my name is george phillips and i am a freelance web developer based in london

blog

JavaScript Strings

Strings can be created by using double or single quotes.

var string = "a string";
var string2 = 'another string';

If your string contains quotes or double quotes, they need to be escaped with the backslash like so:

'Then she said, "Man I can/'t believe I had to escape the darn quote!"';

We can do operations on strings with operators.

The + operator concatenates strings.

var string1 = 'holy', string2 = ' cow!', string3 = string1 + string2; // string3 = 'holy cow!'

The Seven Falsey JavaScript Values

The seven falsey JavaScript values are: 0, -0, false, null, undefined, NAN and ""

Declaring a JavaScript Variable

To declare a JavaScript variable, type the keyword var. This is a variable declaration.

To declare a variable called yourName type var yourName. The space between var and yourName has to be there.

What this does is, it creates an undefinded or empty variable called yourName which is ready to be assigned or point to a value.

To assign a value to your variable, use the assignment operator =.

To declare more than one variable, you only need to type the var keyword once and separate declarations with a comma. var varOne = "some value", varTwo = "another value";

  • Variables cannot start with a number.
  • Can start with $, _ or letter.
  • They are case sensitive
  • Can continue with $, _, letter or number

This is a JavaScript Statement
var foo = true, baz = false;
JavaScript statements end in a semi-colon ;

Attaching an External Style Sheet

To add an external style sheet to a HTML page, just add the following to the <head> section of your page. After the <meta> and <title> tags.

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

Change stylesheet.css to the name of your style sheet. Some people prefer to put CSS files in a separate folder to keep content and styling separate.

CSS Comments

A well commented style sheet is important. Things that made sense to you at the time of writing, may not be so clear when you come back to them a month or even a year later.

A CSS comment begins with /* and ends with */ and is ignored by the browser, but it makes your code more readable and easier to edit later.

#sidebar {float: left} /* This means the <div> with the id="footer" is floated to the left.  */

Styling Links with CSS

Links can be styled with any CSS property, such as color, bgcolor, text-decoration and so on, like so.

a {color: #0F0;}

Links can also be styled depending on what state they’re in.

a:link {color: #0F0; text-decoration: none;} /* a standard link turned green and not underlined. */
a:visited {color: #090; text-decoration: none;} - /* a visited link tuned dark green and not underlined. */
a:hover {color: #6CF; text-decoration: underline;} - /* a moused over link turned light blue underlined. */
a:active {color: #0C0; text-decoration: none;} - /* a selected link turned turned dark green and not underlined. */

States must always appear in the order link, visited, hover and active.

Past Reading

CSS – The Missing Manual by David Sawyer McFarland

Current Reading

JavaScript – The Definitive Guide by David Flanagan
The Book of CSS3 A Developer’s Guide to the Future of Web Design – Peter Gasston
JavaScript – The Good Parts by Douglas Crockford