JavaScript Workshop


Published on

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.

Published in: Economy & Finance, Technology

JavaScript Workshop

  1. 1. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society Javascript
  2. 2. JavaScript : a brief history <ul><li>Developed by Netscape Communications Corporation as Mocha , then LiveScript , and finally renamed to JavaScript. </li></ul><ul><li>JavaScript was first introduced in Netscape version 2.0B3 in 1995. </li></ul><ul><li>In Internet Explorer, “JavaScript” is implemented as JScript , which is not exactly the same. </li></ul><ul><li>The latest version of the language is JavaScript 1.7. </li></ul><ul><li>ECMAScript is a standardized version of JavaScript. </li></ul>
  3. 3. JavaScript : the basics <script> … JavaScript code goes here… </script> <ul><li>Code Sits Between <script> tags </li></ul><ul><li>C/Java style syntax, for the most part </li></ul><ul><li>LOOSELY TYPED - more on this later </li></ul><ul><li>Can reside in external file also: </li></ul><script src=”someJSFile.js” ></script>
  4. 4. JavaScript : the basics <html> <head> <title>… the title of the document… </title> <script type=&quot;text/Javascript&quot;> … JavaScript code… </script> </head> <body> … HTML Code/Tags/Content whatever… </body> </html>
  5. 5. JavaScript : the basics <ul><li>Event Handlers </li></ul><ul><ul><li>(most basic html interaction tool) </li></ul></ul><ul><ul><li>“onclick”, “onmouseover”, “ onmouseout”, “onload”, “ondoubleclick”, etc. </li></ul></ul><ul><ul><li>Written in the HTML as an attribute </li></ul></ul>
  6. 6. JavaScript : Hello World <html> <head> <title>JavaScript-Hello-World</title> <script type=&quot;text/Javascript&quot;> function greetings(sender) { alert (“Hello World!”); } </script> </head> <body onLoad=&quot;greetings();“ > <h1>Javascript Hello World!</h1> </body> </html>
  7. 7. JavaScript : Challenge! <ul><li>Create a web page with a header that says “Hello World...”. </li></ul><ul><li>When the user roles over the header, change the text to read “Hello JavaScript!”. </li></ul><ul><li>Use an external JavaScript file. </li></ul><ul><li>Hint : Use Google to look up “onmouseover” </li></ul><ul><li>Hint : Event handlers can pass objects -- think of the header as an object itself (a DOM object) </li></ul><ul><li>Hint : DOM Objects have an “innerHTML” property </li></ul><ul><li>Bonus : Change the font and background color when you role over the text </li></ul><ul><li>Be Creative! Add whatever you want, we’ll help. </li></ul>
  8. 8. JavaScript : Types <ul><li>Number </li></ul><ul><li>String </li></ul><ul><li>Boolean </li></ul><ul><li>Object </li></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>Date </li></ul></ul><ul><ul><li>RegExp </li></ul></ul><ul><li>Null </li></ul><ul><li>Undefined </li></ul><ul><li>Variables can hold any type! </li></ul>
  9. 9. JavaScript : Numbers <ul><li>All numbers are 64 bit floating point (IEEE) </li></ul><ul><li>Familiar parseInt(“123”) syntax to get a number from a string </li></ul><ul><li>Math object contains advanced math functions </li></ul><ul><li>NaN is returned in any operation that does not result in a valid number </li></ul><ul><li>Special Infinity and -Infinity values </li></ul>
  10. 10. JavaScript : Strings <ul><li>Really just Objects (like almost everything) </li></ul><ul><li>Sequences of Unicode characters </li></ul><ul><li>Built-in length, charAt(), toUpperCase() and other properties </li></ul><ul><li>“string literals” are also present </li></ul>
  11. 11. JavaScript : Other Types <ul><li>Bools -- just what you think </li></ul><ul><li>RegExp -- Regular Expression Objects </li></ul><ul><li>Null -- deliberate “no” value for an arbitrary variable </li></ul><ul><li>Undefined -- variable that has not even been initialized </li></ul>
  12. 12. JavaScript : Operators <ul><li>Same as C/C++/Java: ++, +=, +, -, /, *, “string”, bitwise and/or/not, &&, ||, !, etc... </li></ul><ul><li>Boolean expressions </li></ul><ul><ul><li>== performs type coercion </li></ul></ul><ul><ul><li>0 == False .... “dog” == True </li></ul></ul><ul><ul><li>=== is literal comparsion </li></ul></ul><ul><ul><li>False === False .... “dog” !== True </li></ul></ul><ul><li>If, Else, For, While, DoWhile, Switch -- same </li></ul>
  13. 13. JavaScript : Objects <ul><li>In JavaScript, all objects are collections of name value pairs. </li></ul><ul><ul><li>C++ Hash Table, PHP Associative Array, Cocoa/Python Dictionary </li></ul></ul><ul><li>“Name” is a JavaScript string </li></ul><ul><li>“Value” is any JavaScript type, including other Objects </li></ul>
  14. 14. JavaScript : Objects var obj= new Object(); var Obj { }; Create “John”; obj[“name”]= “John”; Add Properties Object Literal Syntax var email { message: “Hi Pamela!”, details: { to: “Pamela”, from: “Ross” } }
  15. 15. JavaScript : Arrays var a= new Array(); a[0]= “red”; a[1]= “blue; var a= {“red”, “blue”}; Create <ul><li>Full-fledged JavaScript Objects themselves </li></ul><ul><li>Built-in Length property = highest index + 1 </li></ul><ul><li>Other Built-in methods: </li></ul><ul><li>a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep),a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end),a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..) </li></ul>
  16. 16. JavaScript : Functions <ul><li>Very flexible system -- functions are all JavaScript Objects </li></ul><ul><li>Can take any number of named parameters </li></ul><ul><li>Parameters not required to be passed in </li></ul><ul><li>More parameters can be passed than asked for in your function </li></ul><ul><li>Return either an explicit value, or undefined </li></ul>
  17. 17. JavaScript : Functions function add(x, y) { var total = x + y; return total; } > add() NaN > add(2, 3) 5
  18. 18. JavaScript : Functions function avg() { var sum = 0; for (var i=0, j=arguments.length; i<j; i++) { sum += arguments[i]; } return sum/arguments.length; } > avg(2, 3, 4, 5) 3.5 > avg.apply(null, [2, 3, 4, 5]) 3.5
  19. 19. JavaScript : Functions <ul><li>You can assign functions to variables, and do all kinds of crazy things with scope: </li></ul><ul><li>Example, when you say in HTML: </li></ul><ul><ul><li><a onclick=”foo()” id=”bar”></a> </li></ul></ul><ul><li>It’s just like saying bar.onclick= foo in JS </li></ul>
  20. 20. JavaScript : Classes <ul><li>JavaScript “Classes” are just functions that initialize new objects (think “constructors”) </li></ul><ul><li>“this” refers to the “current” object </li></ul><ul><li>“new” is similar to C++ -- call it on “constructor” functions </li></ul>function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } this.fullNameReversed = function() { return this.last + ', ' + this.first; } } var ross = new Person(&quot;Ross&quot;, &quot;Boucher&quot;);
  21. 21. JavaScript : Classes <ul><li>Previous method duplicates member functions for every instance </li></ul><ul><li>Alternate approach to creating a class: </li></ul>function personFullName() { return this.first + ' ' + this.last; } function personFullNameReversed() { return this.last + ', ' + this.first; } function Person(first, last) { this.first = first; this.last = last; this.fullName = personFullName; this.fullNameReversed = personFullNameReversed; }
  22. 22. JavaScript : Classes <ul><li>Still another approach, using Prototype: </li></ul>function Person(first, last) { this.first = first; this.last = last; } Person.prototype.fullName = function() { return this.first + ' ' + this.last; } Person.prototype.fullNameReversed = function() { return this.last + ', ' + this.first; } var ross= new Person(“Ross”, “Boucher”);
  23. 23. JavaScript : Prototype <ul><li>Prototypes are a set of properties shared across all objects of the same type </li></ul><ul><li>In this case, all “Person” objects will have the two methods assigned to Person.prototype </li></ul><ul><li>Forms part of a “lookup chain” </li></ul><ul><li>Can add to the prototype of built-in objects </li></ul><ul><li>Not to be confused with the library of the same name </li></ul>
  24. 24. JavaScript : DOM <ul><li>document is a built in object for interacting with the DOM </li></ul><ul><li>document.getElementById(“string”) allows you to get a reference to a specific node in your document </li></ul><ul><li>document.createElement(“tag”) allows you to create new elements </li></ul><ul><li>document.createNode(“text”) allows you to create new text nodes </li></ul>
  25. 25. JavaScript : DOM <ul><li>Documents are made up entirely of nodes </li></ul><ul><li>Element Nodes: every tag in your HTML is an element </li></ul><ul><ul><li>Have children nodes, attributes </li></ul></ul><ul><li>Text Nodes: these contain text, and are children of elements like <p> nodes </li></ul><ul><ul><li>Have no children or attributes </li></ul></ul><ul><li>Nodes have common methods </li></ul><ul><ul><li>nodeType, nodeName, nodeValue </li></ul></ul>
  26. 26. JavaScript : Challenge 2! <ul><li>Wow, that was a lot of material. Let’s try applying it! </li></ul><ul><li>Create a container DIV, and a few floating divs inside (hint: assign these inner divs to a class) </li></ul><ul><li>Make this look like a few boxes inside a larger box. </li></ul><ul><li>Add a link or form button to dynamically add new divs inside the container (also floated) </li></ul><ul><li>Hint : give your container a unique ID so you can access it with document.getElementById(“myId”); </li></ul><ul><li>Hint : use an event handler on the button </li></ul><ul><li>Hint : google appendChild() </li></ul><ul><li>Bonus : Apply a different style to added divs </li></ul><ul><li>Bonus++ : Apply a different style every time! </li></ul>