1 / 76

Intro to Javascript & DOM

Intro to Javascript & DOM. Javascript Outline. Introduction Variables & data types Control Statements Arrays Functions Objects. Javascript Quick facts. Netscape was battling with IE and wanted a lightweight component to compete with Microsoft VB.

bess
Download Presentation

Intro to Javascript & DOM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Intro to Javascript & DOM

  2. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  3. Javascript Quick facts • Netscape was battling with IE and wanted a lightweight component to compete with Microsoft VB. • Created by Brendan Eich(creator of mozillafoundation)in 1995 while at Netscape. CSE 3345

  4. Javascript Quick facts • Javascript was described by Brendan as, “something that had to ‘look like Java’ only less so and be Java’s dumb kid brother or boy-hostage sidekick.” • Had to be created in 10 days, or something worse would have been developed. CSE 3345

  5. Javascript Disclaimer • A lot of people hate javascript! • A lot of the people that hate javascript really just don’t understand it. • There are good parts and bad parts. CSE 3345

  6. 3 Ways Use JS • Inline • Embedded • External CSE 3345

  7. Inline Example <div onclick="alert('this is a horrible idea');"> Click me </div> CSE 3345

  8. Embedded Example <html> <head> <scripttype="text/javascript"> window.onload=function(){ alert('window loaded');}; </script> </head> </html> CSE 3345

  9. External Example index.html <html> <head> <!-- Make sure you always use an opening and closing <script> tag; else your script might not load --> <scripttype="text/javascript"src="test.js"></script> </head> </html> test.js window.onload=function(){ alert('window loaded');}; CSE 3345

  10. Same as CSS • Reasons to use each method are the same as CSS. • External is preferred! CSE 3345

  11. JS characteristics • It is a dynamic and weakly typed language. • Dynamic type means that there are no compile time checks to deduce variable type and type conversions. • Weakly typed mean the language will figure out for itself how to convert variables of different type. CSE 3345

  12. Strongly Typed Example Test.java: publicclass Test { publicstaticvoid main(String args[]){ String x ="2"; intnum=7; num+= x;// Integer.parseInt(x); System.out.println(num); } } Test.java:6: error: inconvertible types num += x;// Integer.parseInt(x); ^ required: int found: String 1 error CSE 3345

  13. Weakly Typed Example var x ="2"; varnum=7; num+= x; console.log(num);//72 CSE 3345

  14. Outputting text to the console • The web console provides a heads up display for the web by letting users see error messages and other logged information. • console.log() – Outputs a message to the web console. Extremely useful for debugging!

  15. Outputting text to the console Print strings console.log(“Hello “ + “world!”); Print objects var foo = ‘hello’; var bar = 0x01; console.log(foo + “ “ + bar + “!”);

  16. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  17. Declaring variables • Variables are declared using the var keyword. • Javascript does not allow variables to be declared with a specific type (int, float, boolean, etc). • Javascript does have different data types

  18. Javascript types typeof4;// number typeof0xFF;// number typeofx;// undefined typeoftrue;// boolean typeof"String";// string typeof{};// object typeof[];// object typeoffunction(){ alert("hi!");};// function

  19. To var, or not to var? • Any variable declared without the varkeyword becomes a global variable. • That means un-varred variables in methods automatically are global. CSE 3345

  20. Truthy and falsy values Any value can be converted to a boolean according to the following rules: • false, 0, the empty string (“”), NaN, null, and undefined all become false. • All other values become true. CSE 3345

  21. Truth and Falsy in Action var c =(false==0);// true var d =(false=="");// true var e =(0=="");// true //null and undefined are only equal to themselves and each other var f =(null ==false);// false var g =(null == null);// true var h =(undefined == undefined);// true vari=(undefined == null);// true //NaN is not equivalent to anything var j =(NaN == null);// false var k =(NaN == NaN);// false CSE 3345

  22. Comparing for equality • The Equals operator is ==. Compares “truthy” and “falsy” values of variables. • Strict equals operator is ===. Always returns false when the operands are of different types. CSE 3345

  23. Always use === • To avoid unintended results, always use the strict equals operator. CSE 3345

  24. String operators • Use the + operator to concatenate two strings together. var x = “hello” + “ world”; • Use the += operators to append two existing strings. var x = “hello”; x += “ world”; CSE 3345

  25. Converting strings to numbers • parseInt() – parses a string object and returns an integer of the specified radix or base. You should always specify a base. • parseInt(“010”, 2);// 2 • parseInt(“010”, 10); // 10 • parseFloat() – parses a string object and returns a floating point number. Always uses base 10. • parseFloat(“10.44”); //10.44 CSE 3345

  26. Converting strings to numbers • You can also prepend a string with a + to convert the string to a number. varstring="50"; console.log(string+100);// 50100 console.log(+string+100);// 150 CSE 3345

  27. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  28. Control Statements • Javascript supports the typical list of control statements. • if, else, else if • while • do while • for • switch • break • continue CSE 3345

  29. Control Statements • In addition to that list, js has a “for in” statement. • Use it to iterate over properties of an object. • Be careful using “for in” for arrays. Sometimes an object will have properties that you’re unaware and give weird output. CSE 3345

  30. For in example // Initialize object. a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"} ; // Iterate over the properties. vars = "“; for(var key in a) { s += key + ": " + a[key]; s += "<br />"; } document.write(s); // Output:// a: Athens// b: Belgrade// c: Cairo CSE 3345

  31. Bad Part of Javascript • Always place an opening brace “{“ on the same line as the control statement or function. • Undesired results can occur if you don’t follow this practice. • See here for details CSE 3345

  32. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  33. Arrays • Arrays are a special type of object that have a length property. • Accessing a value that is outside of the array bounds returns undefined. • The length property returns the length of the array. • The length is also one more than the highest index. • The length of an array isn’t always the number of items in the array. CSE 3345

  34. Array Length Bad Part var x =["dog","cat","monkey"]; x.length;//3 x[100]="aligator"; x.length;//101 CSE 3345

  35. Bad Array Initialization > var a = new Array(); > a[0] = "dog"; > a[1] = "cat"; > a[2] = "hen"; > a.length 3 > var a = new Array(); //bad CSE 3345

  36. Good Array Initialization > var a = ["dog", "cat", "hen"]; > a.length 3 > var a = []; //good CSE 3345

  37. Array Methods CSE 3345

  38. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  39. Functions • Almost like typical C/C++ and Java functions, except you don’t specify a return type. function sayHello() { alert(“hello world!”); } CSE 3345

  40. Function with parameters • Once again similar to C/C++ and Java, but you don’t specify the data type of the parameters. • You also don’t prefix the parameter name with the var keyword. function add(x, y) { return x + y; } CSE 3345

  41. The arguments object • The arguments object is a local variable available within all functions that contains an entry for each argument passed to a function. • The arguments object will also hold values for parameters that are specified by the function. CSE 3345

  42. Arguments object example functionconcat(parm1){ varstr= parm1; for(vari=0,len=arguments.length;i<len;i++){ str+=" "+ arguments[i]; } returnstr; } concat("1","2","3","4"); //"1 1 2 3 4” CSE 3345

  43. Anonymous Function • You can create functions that are not bounded to an identifier. alert((function(){return "hello";})()); CSE 3345

  44. Functions are first class objects • This means that javascript functions are just a special type of object that can do all things regular objects can do. This allows • Functions to be stored as variables • Functions to be passed as a parameter to another function. • You can return a function from another function. CSE 3345

  45. Functions stored as variables functionsayHi(){console.log(“hi”);} var hi =sayHi; hi();// hi • Note that when assigning a function to a variable, you don’t place “()” after the function name. • However, to execute the function with the variable name, you must use “()”. CSE 3345

  46. Function as a parameter of another function functionsayHi(){return"hi";} functionsalutation(greeting, name){ console.log(greeting()+" "+ name); } varhi =sayHi; salutation(hi,"Fred"); // hi Fred CSE 3345

  47. Function as a return value for another function functionadd(x,y){return x + y;} functionsubtract(x,y){return x - y;} functiongetOperation(x){ var operation = x %2===0? add : subtract; return operation; } var operation =getOperation(2); operation(5,3);// 8 CSE 3345

  48. Javascript Outline • Introduction • Variables & data types • Control Statements • Arrays • Functions • Objects

  49. Objects • Objects are a collection of name-value pairs • The “name” part is a javascript string. • The “value” part can be any javascript value. CSE 3345

  50. Creating Objects var student ={ name:"Wade Wilson", alias:"wwilson", id:12345678, email:"wwilson@smu.edu", isPassing:true }; CSE 3345

More Related