Javascript: Sponsored by The Computer Science Honors Society

Javascript
Sponsored by
Upsilon Pi Epsilon
The Computer Science Honors Society
JavaScript: a brief
history
by
Developed
Netscape Communications Corporation as Mocha,
then LiveScript, and finally renamed to JavaScript.
was first introduced in Netscape version
JavaScript
2.0B3 in 1995.
Internet Explorer, JavaScript is implemented as
InJScript,
which is not exactly the same.
latest version of the language is JavaScript 1.7.
The
ECMAScript is a standardized version of JavaScript.
JavaScript: the
basics
<script>
JavaScriptcodegoeshere
</script>
Code Sits Between <script> tags

C/Java style syntax, for the most
part
LOOSELY TYPED - more on this later
></script>
Can src=someJSFile.js
reside in external
file also:
<script
JavaScript: the
basics
<html>
<head>
<title>thetitleofthedocument</title>
<scripttype="text/Javascript">
JavaScriptcode
</script>
</head>
<body>
HTMLCode/Tags/Contentwhatever
</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>JavaScriptHelloWorld</title>
<scripttype="text/Javascript">
functiongreetings(sender){
alert(HelloWorld!);
}
</script>
</head>
<bodyonLoad="greetings();>
<h1>JavascriptHelloWorld!</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, well 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
Create
varobj=newObject();
varObj{};
Add Properties
obj.name=John;
obj[name]=John;
Object Literal
Syntax
varemail{
message:HiPamela!,
details:{
to:Pamela,
from:Ross
}
}
JavaScript: Arrays
Create
vara=newArray();
a[0]=red;
a[1]=blue;
vara={red,blue};
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(),
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
functionadd(x,y){
vartotal=x+y;
returntotal;
}
>add()
NaN
>add(2,3)
5
JavaScript:
Functions
functionavg(){
varsum=0;
for(vari=0,j=arguments.length;i<j;i++)
{
sum+=arguments[i];
}
returnsum/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>
Its 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
functionPerson(first,last){
this.first=first;
this.last=last;
this.fullName=function(){
returnthis.first+''+this.last;
}
this.fullNameReversed=function(){
returnthis.last+','+this.first;
}
}
varross=newPerson("Ross","Boucher");
JavaScript: Classes
Previous method duplicates member
functions for every instance
Alternate approach to creating a class:

functionpersonFullName(){
}
functionpersonFullNameReversed(){
}
this.first=first;
this.last=last;
this.fullName=personFullName;
this.fullNameReversed=personFullNameReversed;
}
JavaScript: Classes
Still another approach, using
Prototype:
this.first=first;
this.last=last;
}
Person.prototype.fullName=function(){
}
Person.prototype.fullNameReversed=function(){
}
varross=newPerson(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.
Lets 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: Sponsored by The Computer Science Honors Society

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Javascript: Sponsored by The Computer Science Honors Society

Enviado por

Direitos autorais:

Formatos disponíveis

Javascript

Code Sits Between <script> tags

Written in the HTML as an

Create a web page with a header that says Hello

Variables can hold any type!

Familiar parseInt(123) syntax to get a

Math object contains advanced math

NaN is returned in any operation that

Special Infinity and -Infinity values

Sequences of Unicode characters

toUpperCase() and other properties

string literals are also present

Null -- deliberate no value for an

Undefined -- variable that has not

string, bitwise and/or/not, &&, ||, !, etc...

collections of name value pairs.

C++ Hash Table, PHP Associative

Name is a JavaScript string

Full-fledged JavaScript Objects

Can take any number of named parameters

Return either an explicit value, or undefined

variables, and do all kinds of crazy

Example, when you say in HTML:

initialize new objects (think constructors)

this refers to the current object

Alternate approach to creating a class:

Prototypes are a set of properties shared

In this case, all Person objects will have

Forms part of a lookup chain

allows you to create new elements

allows you to create new text nodes

Have children nodes, attributes

Have no children or attributes

Wow, that was a lot of material.

Lets try applying

Você também pode gostar