COMP212: Intro to JavaScript JavaScript Including JavaScript in the ...

berserkarithmeticInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

116 εμφανίσεις

COMP212: Intro to JavaScript

Advanced Web Development
Lecture 3
JavaScript

Client-side scripting language

Standardised as ECMAScript

JavaScript code sent (like HTML and CSS) to browser

Browser then runs JavaScript in a virtual machine

Code is run when browser encounters it
Including JavaScript in the Page

Can include it directly in HTML

<html>(...(<script>(...(</script>(...(</html>

Better to put it in a separate file

<script(src=”somefile.js”></script>

Can include multiple files, or mix both approaches
JavaScript Language

Has the usual programming structures
(variables, loops, functions, etc.)

Has a mix of functional and OO elements

Functional - functions are ‘first class’ -
can be assigned to variables etc.
Java and JavaScript
JavaScript Example
var$func,$i;
function$factorial(n)${
if$(n$===$0)${
return$1;
}$else${
return$n*factorial(n91);
}
}
func$=$factorial;
factorials$=$[];
for$(i=0;$i<5;$i+=1)${
factorials.push(func(i));
}
console.log(factorials);
Points to Note

== tests for same
value
, === for same value and
type

Semi-colons optional, but should
always
use them

Functions can be assigned to variables

Arrays are an object - have stack-like functions

var
to declare variables - optional, but
always
use it
DOM Scripting

Basic idea - dynamically alter the HTML page

Mix of HTML, CSS, and client-side scripting

1996 - JavaScript in Netscape Navigator 3 / IE 3

1997 - Dynamic HTML (DHTML) in IE 4 / NN 4

1998 - W3C standard Document Object Model (DOM)
The Document Object Model

DOM is how JavaScript interacts with a web page

A tree structure representing the document
<!DOCTYPE$html>
<html>
<head>
<title>Page$Title</title>
<meta$charset=”utf98”>
</head>
<body>
<h1>Heading$1</h1>
<p>Text,$some$<em>emphasised</em></p>
<ul$id=‘myID’>
<li>$List$item$1
<li>$List$item$2
<li>$List$item$3
</ul>
</body>
</html>
html
head
body
title
meta
h1
p
ul
li
li
li
em
JavaScript and the DOM

DOM represented by a
document
object

This represents the root node of the tree

Other nodes are represented by objects as well

The DOM has the usual tree operations

someNode.parentNode()

someNode.childNodes()
Searching the DOM

Can search the DOM by id, class, HTML tag, etc.

document.getElementByID(“myID”)

document.getElementsByTagName(“p”)

document.getElementsByClassName(“myClass”)

Results are (arrays of) document elements

These can be used like
document
itself
DOM Examples

Getting a list of unordered lists in the document

var(uls=document.getElementsByTagName(“ul”);

Getting the list items under the first such list

var(litems=uls[0].childNodes();

var(litems=uls[0].getElementsByTagName(“li”);
DOM Manipulation

As well as searching the DOM you can change it

You can access CSS through the
style
property

someNode.style.color(=(“red”;

You can add or remove nodes from the DOM

someNode.removeChild(someOtherNode);

someNode.appendChild(someOtherNode);
JavaScript Events

DOM elements have events associated with them

These can be linked to JavaScript functions to be called
when the event is triggered (
event handlers
or
callbacks
)

There is also a
window
object that represents the
browser window containing the document

This has events, notably
onload
, which is triggered
when the document has finished loading
Event Example
function$doSomething()${/*Code$here*/};
function$setup()${
$$var$button$=$
$$$$$$document.getElementById(“someId”);
$$button.onclick$=$doSomething;
}
if$(document.getElementById)${
$$window.onload$=$setup;
}
Event Example Notes

We assign the
name
of the function - eg:
doSomething

to the event to create a callback/event handler

This is not the same as the
result
of the function, which
we would get with
doSomething()

The test
(if(document.getElementById)
checks to
see if we have a sensible DOM

‘Falsey’ values -
false,(0,(“”,(undefined,(null
JSLint

JavaScript has some dangerous features

Douglas Crockford has strong views on this

See his book,
JavaScript: the Good Parts

JSLint checks code for the ‘good’ and ‘bad’ parts

www.jslint.com

Warning:
JSLint
will hurt your feelings
JSLint Settings

You may not agree with all of JSLint’s rules

These can be changed with the settings

Example:
++
and
RR
are discouraged

Why?
x(=(1;(y(=(++x(+(x++;

Don’t agree? Set ‘Tolerate’ to true beside ‘++ and --’