JavaScript Workshop

Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society Javascript

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.

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>

JavaScript : the basics <html> <head> <title>… the title of the document… </title> <script type="text/Javascript"> … JavaScript code… </script> </head> <body> … HTML Code/Tags/Content whatever… </body> </html>

JavaScript : the basics
Event Handlers
(most basic html interaction tool)
“onclick”, “onmouseover”, “ onmouseout”, “onload”, “ondoubleclick”, etc.
Written in the HTML as an attribute

JavaScript : Hello World <html> <head> <title>JavaScript-Hello-World</title> <script type="text/Javascript"> function greetings(sender) { alert (“Hello World!”); } </script> </head> <body onLoad="greetings();“ > <h1>Javascript Hello World!</h1> </body> </html>

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.

JavaScript : Types
Number
String
Boolean
Object
Function
Array
Date
RegExp
Null
Undefined
Variables can hold any type!

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

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

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

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

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

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” } }

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]..)

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

JavaScript : Functions function add(x, y) { var total = x + y; return total; } > add() NaN > add(2, 3) 5

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

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

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("Ross", "Boucher");

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; }

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”);

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

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

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

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!

http://www.slideshare.net	3
http://darrylw.inventer.nl	2
http://192.168.12.135	1
http://192.168.0.108	1

JavaScript Workshop

by Pamela Fox

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 7

Statistics

JavaScript Workshop Presentation Transcript