Transcript Slides

JavaScript
Jonathan Vinson
CSC 415
History

Developed in 1995 by Brendan Eich (Netscape)

Created in 10 days

Originally called Mocha, then LiveScript

Trademarked by Sun and became JavaScript


Officially called ECMAScript since it was
standardized by EMCA in 1996
Now on ECMAScript 5
Names


Must begin with a letter, $, or _
Can contain letters, digits, underscores, and
dollar signs

Case sensitive

Reserved words cannot be used as names
Scope




Static scoped
Variables declared within a JavaScript function
are local to that function
Variables declared outside of a function have
global scope
Assigning a value to a variable that hasn't yet
been declared will automatically make that
variable global
Data Types

Dynamic Data Types

Number

String

Boolean

Array

Object

Undefined

Empty
Operators

+, -, *, /, %, ++, --

==, ===, !=, !==, >, <, >=, <=

&&, ||, !

&, |, ~, ^, <<, >>

typeof, delete, unary +


Strings can use arithmetic operators to interact
with other strings and numbers
Unary + operator converts a string to an integer
Statements

=, +=, -=, *=, /=, %=

While

Do … while

For

For … in

If … else

Control: continue, break
Subprograms

Functions are used in JavaScript
function myFunction(p1, p2) {
return p1 * p2;
}
Exception Handling

Try, Catch, Throw, and Finally
try {
if(x == "") throw "Empty";
if(isNaN(x)) throw "Not a number";
if(x > 10) throw "Too high";
if(x < 5) throw "Too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
Event Handling

Handles HTML events
<button onclick="displayDate()">The time is?</button>
Libraries of JavaScript

Prototype

MooTools

jQuery

YUI

Ext JS

Dojo

UIZE

Many More!
jQuery




Most popular JavaScript framework on the
internet today
Uses CSS selectors to access and manipulate
HTML elements (DOM Objects)
Provides companion UI framework and many
other plug-ins
Used by Google, Microsoft, IBM, and Netflix
jQuery
jQuery
$ (‘body’) .css (‘background’, ‘#ccc’);
JavaScript
Function changeBachground(color) {
Document.body.style.background = color;
}
Prototype



Provides a simple API to perform common web
tasks
API is short for Application Programming
Interface, and is a library for manipulating the
HTML DOM
Prototype enhances JavaScript by providing
classes and inheritance
Mootools


Also a framework that offers an API to make
common JavaScript programming easier
Includes some lightweight effects and animation
functions
Content Delivery Networks




Speed is always important with web pages
Many web sites use the same JavaScript
framework
CDNs solve this by providing a network of
servers containing shared code libraries
Google provides a free CDN for many
JavaScript libraries including: jQuery, Prototype,
Mootools, Dojo, and Yahoo! YUI
Other Useful Features


AJAX (Asynhronous JavaScript and XML)

A way to exchange data with a server, and
update parts of a web page without reloading
the whole page

https://www.youtube.com/watch?v=m1o7TxX9
aBg
JSON (JavaScript Object Notation)

A lightweight data interchange format that is
language independent, and easy to
understand.
Readability

Familiar Syntax

Simple

Easy to read

Libraries such as jQuery can make reading
JavaScript much more condensed
Writability

Allows for expressive coding

Familiar Syntax

Easy to pick up

Development is relatively fast

Frameworks allow for quick building of
JavaScript files
Reliability

Widely supported

Standardized

Run with client resources

Many great libraries
Cost

Training is cheap

Free IDEs

Very portable

Easily maintainable

Most libraries are also free