The Grammar of JavaScript

 Each line of a script is a statement  An instruction that JavaScript can evaluate (make sense of)  Ends with a semicolon;  Each one on a new line Example: var x =2; var y = 3; alert(x + y); // displays 5

 Used to represent or hold a value  The value of a variable can change over time  Give a variable a name and then assign a value to it  Remember Algebra?  x = 100 let x hold the value 100  x = 200 now x holds the value 200  The concepts are similar – JavaScript variable and Algebra variable

 Words are more meaningful than numbers  You don’t have to remember what a number means  payRate = 10.50;  year = 2010;  totalPrice = cost + tax;

 Variables can be compared to small boxes with names. If you were to store 5 pair of shoes, you might have a box for each pair. On each box you would write what is in it.  The boxes would be your variables. - Places to store things.  The name on the boxes would be the variable names. - The ones you'd use when referring to each of the boxes.  And finally the shoes, would be the content of the variables. - What is stored in the boxes  Note: from

Standard Form: var variablename = value;  var is a keyword ( a reserved word)  Variablename – a user defined name  = the assignment operator  Value – value to be assigned  Examples var interestRate = 0.08; var carType = “Mustang”; var salary = 3000; var answer = false;

 Give variable names meaningful names!!!  Case sensitive (y and Y are two different variables)  Must begin with a letter or the underscore character  Good Practice: use camelCase naming convention  First word lower case, every subsequent word – the first letter is uppercase  Example dayOfWeek firstName myDogsName

 You are not forced to declare a “type” of a variable like in more strict languages  Numbers: can have integers, floats, exponential values x = 22.9;  Strings: text characters need to be enclosed by double or single quotes firstName = “Mickey”;  Boolean: Value is true or false true and false are reserved words – don’t need quotes switchOn = true;  null – no value middleName = null;

 Unlike other programming languages, there is no int or float variable type  You do not have to tell the interpreter the data type, it is assumed when you assign data to the variable  x = x + 1; //doesn’t make sense in algebra  It means: take whatever is on the right side and assign it to whatever is on the left side  If x was 10 to start, after this line of code is interpretted, x is 11  IMPORTANT: = is used as assignment operator  IMPORTANT : == is used as a relational operator (a comparison)

 Consist of 1 or more characters in quotes:  var shirtSize= “medium”  var month = “October”  length method  alert(month.length);  Displays the number 7  alert(shirtSize.length)  Displays the number 6

 Use to print out a line of text document.write(“hello world”);  Can embed html elements into the write function  To place a line feed at the end of a line of text  + concatenation operator document.write(“hello world” + “ ”);  To make a line of text an h2 element document.write(“ ” + “hi there” + “ ”)

var myDog = “durango”; document.write(myDog); this prints the value stored in myDog document.write(“My dog is named “ + myDog); this prints the text “My dog is named” followed by the value stored in myDog document.write(“My dog is named “ + myDog + “ and he is very nice”); this prints the text “My dog is named” followed by the value stored in myDog followed by the text “and he is very nice” Do VariablesStudent.html

 Purpose: used to perform math calculations on 2 or more values OperatorSymbolFunction Addition+Add 2 values Subtraction-Subtract 1 value from another Multiplication*Multiply 2 numbers Division/Divide 1 value by another Modulus%Remainder Increment++Shortcut – add 1 to a single number Decrement--Shortcut – subtract1 a single number

var x = 10; var y = x + 20; var z = y / x; var mod = y % z; var mod2 = x % 4; document.write(“x:” + x); document.write(“y:” + y); document.write(“z:” + z); document.write(“mod:” + mod); document.write(“mod2:” + mod2);

 Increment: ++myVariable;  Adds 1 to the value stored in myVariable  Decrement: --myVariable;  Subtracts 1 to the value stored in myVariable  Examples: var x = 20; var y = 10; var incrementedX = ++x; var decrementedY = --y; document.write(incrementedX); //will print 21 document.write(decrementedY );// will print 9

 A method used to display info in a pop-up window  Examples: var theName = “James”; window.alert(“hello “+ theName); var theAge = 22; window.alert(“You are “ + theAge + “ years old”);

 Used to add things to strings window.alert(“\nthis is fun \n”); CharacterMeaning \ttab \nNewline \\backslash \”Double quote \’Single quote

 A method used to prompt the user for information  Examples: var theName = window.prompt(“What is your name?”); window.alert(“hello “ + theName); var theAge = window.prompt(“What is your age?”); window.alert(“You are “ + theAge + “ years old”);

 isNaN( ) – determines whether a number is legal  Math.PI – returns value of pi  Math.Random( ) – returns random number  Math.pow(x, y) – returns x to the power of y

 The result of a window.prompt method call is a string  You can not do math on a string, so if you are prompting the user to enter a number that you want to do math on, you must convert it.  Example: var theNum1 = window.prompt("enter a number"); var theNum2 = window.prompt("enter another number"); var newNum = theNum1 + theNum2; window.alert("new num is: " + newNum); If user enters a 1 and then a 2, the alert window says: new num is 12 ?????? Not what we expected

 parseInt- Parses a string and returns an integer  parseFloat - Parses a string and returns an float  Example: var theNum1 = window.prompt("enter a number"); var theNum2 = window.prompt("enter another number"); var newNum = parseInt(theNum1) + parseInt(theNum2); window.alert("new num is: " + newNum) ;

 Purpose: used to used to assign values to variables OperatorSymbolFunction Assignment=Assign the value on the right side of the operator to a variable Add and assign+=Adds the value on the right side of the operator to the variable on the left side and then assigns the new value to the variable Subtract and assign-=Same as above except “subtract” Multiple and assign*=Same as above except “multiply” Divide and assign/=Same as above except “divide” Modulus and assign%=Same as above except “modulus”

var total = 100; total += 50;// same as total = total + 50 //total stores value 150 total -= 30; // same as total = total – 30 // total stores value 120 total /= 2;// same as total = total /2 // total stores value 60 total %= 5;// same as total = total /5 (modulus ) // total stores value 0

 Purpose: a way of storing more than 1 value in a single place  Shopping list analogy:  you can add things to your list when you need something  You can remove things from your list after you bought them  Still one single list

 First declare the array name and then supply comma separated values var friends =[‘sue’, ‘bob’, ‘ann’, ‘joe’]; The brackets tell interpreter you are working with an array Empty array: var enemies = [ ];

 Access an item in an array by typing the variable name and an index  Array indexes start at 0.  var friends =[‘sue’, ‘bob’, ‘ann’, ‘joe’];  First friend: friend[0]  Second friend: friend[1] alert(friends[2]); // this would display “ann”

var colors = [ ‘red’, ‘blue’]  Adding at the end:  colors.push(‘pink’);  Array would contain: red, blue, pink  Adding at the beginning:  colors.unshift(‘green’);  Array would contain: green, red, blue, pink  Number of items in an array  var num = color.length // this would set num to 4

var colors = [ ‘red’, ‘blue’, ‘purple’]  Removing at the end:  colors.pop( );  Array would contain: red, blue  Removing from the beginning:  colors.shift( );  Array would contain: blue  Number of items in an array  var num = color.length // this would set num to 4

 JavaScript is filled with Objects, examples:  Browser window  Document  String  Date  Object property:  The parts of an object  Use dot notation to access e.g. document.url  Object method:  Actions an object can perform  Methods end with () e.g. document.write()

 Can create multiple instances of an object  Each instance has its own set of properties and methods  Example, create 2 instances of a String object:  var dog = ‘spot’;  var cat = ‘morris’;  Example, whenever you create a variable you are creating a new object  var size = 10; //new number object  var answer = false; //new Boolean object