JavaScript Workshop

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    7 Favorites

    JavaScript Workshop - Presentation 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!

    + wuzziwugwuzziwug, 4 years ago

    custom

    5281 views, 7 favs, 0 embeds more stats

    Put on by USC's Upsilon Pi Epsilon as part of Wonde more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5281
      • 5281 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 7
    • Downloads 29
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories