ALBERT WAVERING BOBBY SENG

Week 4: JavaScript  Quiz  Announcements/questions

What is JavaScript?  Programming language!  ‘Scripting’  Lightweight  Embedded or linked to HTML pages  No compilation  Is interpreted by a user’s browser on page load  Compatibility problems?

JavaScript’s Place …JavaScript code goes here…

JavaScript’s Place

Java vs. JavaScript  Similarities?  Syntax  Object-oriented  Differences  Everything else  Good news  Really simple to understand  Real Name?  ECMAScript  ECMA: information systems standards organization  ECMA-262 = JavaScript

Uses of JavaScript  Information processing  Updating element content  Creating interactive webpages  Moving elements  Changing visibility of elements  Asynchronous data transfer  Ex.: Facebook, Google Instant  Cookie storage/retrieval  Store user data (‘keep me logged in’, etc)

JavaScript Output to Browser  For now, use document.write(someVariable);  This is not professionally used but is good for testing and debugging  Later on we’ll be able to select elements, modify them, and generally wreak havoc

Characteristics  Normally structured with functions  If/else/while/switch/for  Dynamically typed  Variables are typed by their data  Object oriented  Objects are collections of data and functions  Fails silently  No error messages to user about code  Test each segment of code as you complete it  Use Firebug or similar

Dynamic Typing x = " Test… "; x = 5; x = 5 + 6; //x is now equal to 11

Object-Oriented Programming?  An object-oriented program allows you to make ‘objects’ and use them to store data and perform functions  An object can store variables and prototypes  You can specify a type of object, then create instances of that object with different data

Brief Intro to Objects  Declare them with name ‘function’  JS functions are objects  The keyword ‘this’ refers to elements belonging to the current object function car(color, doors, type){ this.color = color; this.doors = doors; this.type = type; } delorean = new car("silver", 2, "timetraveling");

Objects function car(color, doors, type){ this.color = color; this.doors = doors; this.type = type; this.speed = 0; this.drive = drive; } function drive(newSpeed){ this.speed = newSpeed; }

Objects delorean = new car("silver", 4, "timetraveling"); delorean.drive(88); //now delorean.speed equals 88

JavaScript Statements  Statements are ended with a semicolon  Variable = value;  Where ‘value’ is anything that evaluates to a number, string, object, etc.  Comments denoted by:  //Single line  /* Multiple-line comments are fun */

JavaScript Statements  Conditional statements and loops use code blocks  Curly brackets denote these blocks of code if(I like cookies){ do some stuff; }

Flow Control if(logical or numerical comparison){ //code executed if condition evaluates to true } else if(another comparison){ //code executed if the first condition was not //met but this one is } else{ //code executed if no other condition evaluated //to true }

Mathematical Operators  Normal arithmetic operators  Add+(combines strings too!)  Subtract -  Multiply*  Divide/  Modulus%  Increment++  Decrement--

More Math  Let x = 15  Assignment operatorsopx is:  Set to=x = 55  Add and set+=x += 520  Subtract from, set-=x -= 510  Multiply with, set*=x *= 230  Divide with, set/=x /= 53  Modulo with, set%=x /= 63

JavaScript Comparators  Logical comparisons  and&&  or||  not!  equal to ==  not equal to !=

JavaScript Comparators  Equal to==  Not equal to!=  Greater than>  Greater than or equal to>=  Less than<  Less than or equal to<=

Variable Scope  Places in the document where the variable exists to be used  Variables are global by default  Can use them anywhere  Object variables only scoped within their object  To apply local scope to a variable inside a function  Keyword ‘var’

Variable Scope  Inside a function, a local variable of the same name as a global variable takes precedence  When declaring variables inside functions, they are only local if the keyword ‘var’ is used

Variable Scope x = 5; function addFive(input){ var x = 0; return input + x; } document.write(x); document.write(" "); document.write(addFive(2));

JavaScript Loops  for(var counter = start; counter <= stop; counter++)  First statement runs once before looping starts  Middle statement evaluated at the beginning of each loop; loop continues if it is true  Last statement: performed at the end of each loop

JavaScript Loop Example for(var counter = 0; counter < 10; counter++){ document.write(counter + " Jump around! "); }

Other Looping Constructs  while(condition)  Loops until condition evaluates to false  do…while(condition)  Loops until condition evaluates to false (but always at least once)

while vs do…while while(x < 5){ some stuff } do{ some stuff }while(x < 5);

Homework  Write an HTML file that implements four JavaScript functions, defined on the next slide  Your file doesn’t actually have to perform the functions automatically; just implement and test them so they work  Due by next class (9/30)  Don’t worry about validation for now

Homework Description  function combine(x, y)  This should concatenate (combine) the strings x and y into a single string and print it  function print(words, count)  This should write the string ‘words’ as many times as is defined by the number count  function choose(x, y, z)  This should write:  x if x > y > z  y if y > x  z otherwise  function fibonnaci(n)  This should write out the Fibonacci sequence up to the n th term  ‘the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two’ [Wikipedia]