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:

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

Previous method duplicates member functions for every instance

Alternate approach to creating a class:

Still another approach, using Prototype:

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!

JavaScript Workshop

0 comments

Notes on slide 1

7 Favorites