JavaScript Workshop

  • 6,670 views
Uploaded on

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

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.
http://pollux.usc.edu/~upe/

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,670
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
294
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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