Also used for plug-in scripting (Adobe/Mozilla/Chrome), game scripting, and more.

• 1995: At Netscape, Brendan Eich created "JavaScript".
• 1996: Microsoft releases "JScript", a port for IE3.
• 1997: JavaScript was standardized in the "ECMAScript" spec.
• 2005: "AJAX" was coined and the web 2.0 age begins.
• 2006: jQuery 1.0 was released.
• 2010: Node.JS was released.
• 2015: ECMAScript 6 was released.

Made in 10 days. Netscape + Sun marketing move to rename. Google Maps + GMail make it quite popular. We’ll use parts that are solid and have been around for a long time

• Image switchers and lightboxes
• Full featured web applications
• Keep track of users with cookies
• Interactive elements like tabs, sliders and accordions
• Drawing and animation

Each instruction in JS is a "statement", like:

console.log('Hello World!');

Try it on repl.it:

Each separate instruction in Javascript is called a 'statement'. A 'simple' statement represents a single instruction and ends with a semi-colon. You can think of a simple statement like a sentence - the semi-colon is like a full stop and tells Javascript that your statement is finished. Let's add a simple statement to our script tags and see what happens...

Use variables to store values.

Declare, then initialize in 2 statements:

  var x;
  x = 5;
  console.log(x);

Or declare and initialize in one statement:

  var y = 2;
  console.log(y);

Re-assign the value later:

  var x = 5;
  x = 1;

Variables are one of the basic building blocks of Javascript. Just like 'x' in algebra, a variable in programming is a named container for a value that can change. Variables have to be 'declared' once before being used, using the 'var' keyword and the name of the variable. A variable declaration is a simple statement, so it ends with a semi-colon. Assigning an initial value to a variable is called 'initialising'. You can declare and initialise in one go, or seperately. If its not assigned, it's undefined.

Variables can store different "types" of data, like:

• string: an immutable string of characters:

  var greeting = 'Hello Kitty';
  var restaurant = "Pamela's Place";

• number: whole (6, -102) or floating point (5.8737):

  var myAge = 28;
  var pi = 3.14;

• boolean: Represents logical values true or false:

  var catsAreBest = true;
  var dogsRule = false;

• undefined: Represents a value that hasn't been defined.

  var notDefinedYet;

• null: Represents an explicitly empty value.

  var goodPickupLines = null;

Variables can be populated with any one of the 'data types' available in Javascript. These are the simple ones we'll be working with today... There are also data types that cater for situations where there is no value undefined and null. Loose typing- you don't tell JS what type of data type it is, it guesses. You can use typeof to see what it thinks. http://www.daaq.net/old/javascript/index.php?page=js+data+types&parent=core+javascript

A string holds an ordered list of characters:

  var alphabet = "abcdefghijklmnopqrstuvwxyz";

The length property reports the size of the string:

  console.log(alphabet.length); // 26

Each character has an index. The first character is always at index 0. The last character is always at index length-1:

  console.log(alphabet[0]); // 'a'
  console.log(alphabet[1]); // 'b'
  console.log(alphabet[2]); // 'c'
  console.log(alphabet[alphabet.length]); // undefined
  console.log(alphabet[alphabet.length-1]); // 'z'
  console.log(alphabet[alphabet.length-2]); // 'y'

• Begin with letters, $ or _
• Only contain letters, numbers, $ and _
• Case sensitive
• Avoid reserved words
• Choose clarity and meaning
• Prefer camelCase for multipleWords (instead of under_score)
• Pick a naming convention and stick with it

OK:

  var numPeople, $mainHeader, _num, _Num;

Not OK:

  var 2coolForSchool, soHappy!

Variables can also store the result of any "expression":

  var x = 2 + 2;
  var y = x * 3;

  var name = 'Claire';
  var greeting = 'Hello ' + name;
  var title = 'Baroness';
  var formalGreeting = greeting + ', ' + title;

Variables can even store input from users using the prompt function.

  var name = prompt("What's your name?");
  console.log('Hello ' + name);

JS figures out the type based on value, and the type can change:

  var x;
  console.log(typeof x)  // undefined

  x = 2;
  console.log(typeof x)  // number

  x = 'Hi';
  console.log(typeof x)  // string

A variable can only be of one type:

  var y = 2 + ' cats';
  console.log(typeof y);

coercion

Comments are human-readable text ignored by the computer:

  // You can write single-line comments
  var x = 4; // Or you can comment after a statement

  /*
  Or you can write multi-line comments, if you have something very long
  to say like this gratuitously long description.
  */

When to use comments

Functions are re-usable collections of statements.

First declare the function:

  function sayMyName() {
    console.log('Hi Christina!');
  }

Then call it (as many times as you want):

  sayMyName();

Alright! We can declare a variable and write a statement - what next? A function is collection of statements that work together to do something. In the same way a statement is like a sentence, a function is like a paragraph. Functions look like this... There is no semi-colon at the end this time. That's because a function declaration is 'compound' statement, or one that is made up of other statements contained inside curly braces. Functions are not run straight away, they are stored in memory until they are called. We call a function like this... Side effects.

  function chicken() {
    egg();
  }

  function egg() {
    chicken();
  }

  egg();

Functions can accept any number of named arguments:

  function sayMyName(name) {
    console.log('Hi, ' + name);
  }

  sayMyName('Claire');
  sayMyName('Testy McTesterFace');

  function addNumbers(num1, num2) {
    var result = num1 + num2;
    console.log(result);
  }

  addNumbers(7, 21);
  addNumbers(3, 10);

You can also pass variables:

  var number = 10;
  addNumbers(number, 2);
  addNumbers(number, 4);

Arguments (sometimes called parameters) are values that are passed into a function so it can do the same processing job for different data inputs. We can name our arguments in the function definition, inside the parentheses, separated by commas. We can then access them by name inside the function just like variables... In the function call, we insert our argument values in the parentheses... PIRATE JOKE!!

The return keyword returns a value to whoever calls the function (and exits the function):

  function addNumbers(num1, num2) {
    var result = num1 + num2;
    return result; // Anything after this line won't be executed
  }

  var sum = addNumbers(5, 2);

You can use function calls in expressions:

  var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);

You can even call functions inside function calls:

  var hugeSum = addNumbers(addNumbers(5, 2), addNumbers(3, 7));

Functions can be used to do processing tasks, and they can also return a value to the function caller. To do this we use the 'return' keyword. 'Return' also quits the function so it must always be the last statement in your function. If we assign a function call to a variable, it's value will be the result of running the function, ie whatever is 'returned'. If there is no return statement the variable's value will be 'undefined'.

JS Variables have "function scope". They are visible in the function where they're defined:

A variable with "local" scope:

  function addNumbers(num1, num2) {
    var localResult = num1 + num2;
    console.log("The local result is: " + localResult);
  }

  addNumbers(5, 7);
  console.log(localResult);  // ReferenceError

A variable with "global" scope:

  var globalResult;

  function addNumbers(num1, num2) {
    globalResult = num1 + num2;
    console.log("The global result is: " + globalResult);
  }

  addNumbers(5, 7);
  console.log(globalResult);  // 12

Use newlines between statements and use spaces to show blocks.

Bad:

  function addNumbers(num1,num2) {return num1 + num2;}

  function addNumbers(num1, num2) {
    return num1 + num2;
  }

Good:

  function addNumbers(num1, num2) {
    return num1 + num2;
  }

Google for questions or check Mozilla Developer Network and W3Schools.

Post problematic code on JSFiddle and share the link on stackoverflow.