JAVASCRIPT Introduction Kenny Lam

What is Javascript?  Client-side scripting language that can manipulate elements in the DOM  Event-driven language that responds to activity on the webpage  In the end, adds an interactive element to the page without having to load a new page

More about…  Dynamic typing  Interpreted language  Object Oriented  Protoypes for inheritance  May be different for different browsers  May be different for different versions of different browsers

JAVASCRIPT Variables and Basic Syntax Kenny Lam

Importing your Javascript  Two places to import your javascript  element  End of element OR … …

Variables  Only one prefix to remember, use var with all your variables when declaring them  Different variable types include (objects later)  Numbers  Booleans  String  Null  Undefined var x = 6.470; var y = ‘hello world’; var s = true;

Variables pt. 2  Numbers – double precision, be careful of floating point errors  Null – for explicitly saying non-assigned value  Undefined – for never having assigned anything

Strings  Array of characters  Comes with a variety of built-in methods  length, indexOf, match, replace, search, split, substr, substring, toString var s = ‘hello world’; s[1];// value of ‘e’ s.indexOf(‘\ ’);// value of 5 s.substr(8);// value of ‘rld’

Syntax  Be a clean coder when it comes to javascript, can lead to hazards if not careful  If-else statements. Use blocks  End appropriate lines with semicolons  Use either single or double quotes, but don’t mix and match if (expression) { //code } else { //code } var s = ‘string here’; var x = ‘we can have a “string” inside another!’

Objects  Same as a dictionary/hash table in other languages  Can use strings as keys, helps with disallowed characters  Values are any acceptable var’s  Can even use functions as values (later) var x = 6470; var obj1 = {//the braces create an object key1: x,//use commas to separate keys “key2”: “string” };//ending my declaration var obj2 = { key: obj1//can even have an object! };

Objects pt. 2  Access using object.property  Access using array notation obj1.key1;//will give obj1.y = 3; obj2[‘key’]

Special Objects  Two very special objects: window and document  The document object holds the DOM elements  Every window/tab houses everything inside of the window object document.body;//returns the element window.location;//gives the URL for the window

Arrays  Special type of objects, using numbers as keys  Has many special methods  length, push, pop, concat, toString var tmpArray = [“string”, 6.470, obj1]; //different variable types are okay tmpArray[0];//value “string” tmpArray[2].key1;//value 6.470

The console  Console logging  Shows visibility of object properties  Web page source code  Breakpoints console.log(obj1);//you can see all its properties console.log(“message”); console.log(array1);//can read all elements

JAVASCRIPT Operators and Functions Kenny Lam

Operators  All the common mathematical operators  +, -, *, /, % (mod)  Unary operators  Compound assignment  Overloaded + operator for strings  More operators in Math module for numbers (use Math.pow, not the carat) x++; ++x; x*=3; “string1” + “string2”;// gives “string1string2” “3” + 8// gives “38” “1” // gives “123”

Operators pt. 2  Comparison operators: , >=  For non-strict equality comparisons, can use ==  For strict equality comparisons, use ===  Also non-equality comparisons:  !=, !==

Functions  Functions are objects, two ways of declaring  Just use number of parameters because of dynamic typing function fun(x,y) {//will take 2 parameters //code }; var funFunc = function(a,b,c) {//uses 3 parameters //code }; fun(“string”, obj1); fun(obj1, obj2);//these two call the same function!

Functions pt. 2  Lots of bad flexibility. Function calls don’t need to match signature!  If you need a variable number of arguments, use the arguments object fun(x,y); fun(x,y,z);//these will both call the same function function abc() { arguments.length; arguments[0]; //more code }

Functions pt. 3  Object properties can be functions too (since functions are objects)  Functions return undefined by default, but can return any value  Recursive calls

Scope  Functions define scope of variables  The ‘this’ reference  Anonymous functions, closure, and inner functions are fun ways to play with this var x = 13; function scopeFun() { var x = 12; console.log(x);//value of 12 console.log(this.x);//value of 13 };//helps to show why to use var!

Execution  Javascript is executed in the order written  To get asynchronous behavior, use setTimeout or AJAX calls (more later)

JAVASCRIPT Classes and Inheritance Kenny Lam

Object Oriented  Can create classes in javascript, defined by functions (constructors)  The ‘new’ keyword makes a new object and sets up the constructor correctly function MITClass(course, semester){ this.course = course; this.semester = semester; } var web = MITClass(6.470, “IAP 2013”); web.course;//value web.semester;//value “IAP 2013”

Prototypes  In javascript, you inherit from instances instead of classes  The ‘__proto__’ property of objects, and the ‘prototype’ property of functions var x = MITClass(6.470, “IAP 2013”); x.prototype;//undefined, x is an object! MITClass.__proto__;//bogus, MITClass is a function! x.__proto__;//some object MITClass.prototype;//same object x.__proto__ == MITClass.prototype;//true x.__proto__ === MITClass.prototype;//true

JAVASCRIPT Conditionals and Loops Kenny Lam

Conditionals  If-else statements  Switch statements if (condition) {if(condition) {//code } else {else if(condition) {//code }} else { //code } switch(variable) { case 1: //code break; case 2: //code break; default: //code }

Looping  For loops  While loops  Do…while loops var i=0; for(var i=0; i<n; i++) {while(i<n) {//code} for(var x in ObjectName) { ObjectName[x]; //code }

JAVASCRIPT jQuery Kenny Lam

About jQuery  Open source aid to writing effective javascript  Bundles all the power of javascript into more manageable API  Cross-browser support  Handles events, manipulates DOM, provides animations  Wait for DOM to load properly $; //the dollar is shorthand for jQuery jQuery; //also jQuery (surprise) var x = jQuery.noConflict(); $(document).ready()

Selectors  Any CSS style selectors are valid  Most typical will be id, class, and element type selectors $(‘#id’) //select elements using the hash prefix $(‘.class’) //select elements using the dot prefix $(‘div’) //select elements by node type $(‘div:first’).parent() //select parent of first div

Events  Provides a great way to handle events  Read the documentation for all possible events  Common events  click, blur, keypress, focus, hover, submit, etc. $(‘#id’).click(function(event) { //code to execute on a click of #id element });

Extras  jQuery can also do loops that integrate well with selectors  The jQuery API is used for jQuery objects. Be careful of ‘this’ $(‘div’).each(function() { //code }); $(‘div’).click(function() { //you can reference ‘this’ in here and it will mean the clicked div //but you might really want $(this) });

JAVASCRIPT More Reading Kenny Lam

Additional Topics  Console/debugging  Cookies  Closures  Regex  Storage  Anonymous/named anonymous functions  Other cool javascript libraries! (Raphael, lightbox, scriptaculous, jQuery UI, prototype, mooTools, etc.)