2. JavaScript
• Object-‐orientated
scrip)ng
language
• Dialect
of
EcmaScript-‐standard
• History
– Netscape:
LiveScript
to
JavaScript
– MicrosoH:
JScript
– Standard:
EcmaScript
• Latest
version:
JavaScript
1.8.1,
a
superset
of
EcmaScript
3. Possibili)es?
• JS
was
designed
to
add
interac)vity
to
HTML
pages
• Dynamic
HTML
• Can
react
to
events:
page
has
finished
loading,
user
clicks..
• Data
valida)on
• Browser
detec)on
• Cookies
4. Compa)bility
• Old
or
rare
browsers
• PDA
or
Mobile
phones
• JavaScript
execu)on
disabled
• The
use
of
speech
browser
• Browser
incompa)bilites
5. JavaScript
Today:
AJAX
• JavaScript
is
heavily
used
in
AJAX-‐based
sites
• AJAX:
asynchronous
JavaScript
and
XML
– group
of
interrelated
techniques
used
on
the
client-‐side
to
create
rich
web
apps
where
data
is
retrieved
from
the
server
in
the
background.
• Example
usage:
Gmail,
Google
Maps
6. Google
Web
Toolkit
• Great
tool
for
crea)ng
AJAX/JS-‐based
sites
• Coding
is
done
with
Java
which
is
compiled
to
JavaScript
• Resolves
browser
incompa)bilies
• See
Example:
– hZp://gwt.google.com/samples/Showcase/
Showcase.html
12. Variables
• Values
are
stored
in
variables
• Variables
are
declared:
– var carname;
• Assigning
value
– carname = "volvo";
• Together
– var carname = "volvo";
14. Comparison
(w3schools)
<script type="text/javascript">
//<![CDATA[
var d = new Date();
var time = d.getHours();
if ( time < 10 )
{
document.write("<b>Good morning</b>");
}
//]]>
</script>
15. Comparison
(w3schools)
<script type="text/javascript">
//<![CDATA[
var d = new Date();
var time = d.getHours();
if ( time < 10 )
{
document.write("<b>Good morning</b>");
}
else
{
document.write("<b>Good Day</b>");
}
//]]>
</script>
16. Repeat
(w3schools)
<script type="text/javascript">
//<![CDATA[
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i = i + 1;
}
//]]>
</script>
21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Embed Example</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function askQuestion()
{
var name = prompt("Please enter your name","Harry Potter");
if ( name!=null && name!="" )
{
alert("Hello " + name + "! How are you today?");
}
}
//]]>
</script>
</head>
<body>
<input type="button" onclick="askQuestion();" value="Question for me" />
</body>
</html>
23. JS
Events
• Mouse
click
(onclick)
• Web
page
loading
(onload)
• Mousing
over
and
out
(onmouseover
onmouseout)
• Submiang
HTML
form
(onsubmit)
24. About
Events
• You
may
cancel
some
events:
– <a href=http://www.tamk.fi/
onclick="alert('message'); return
false;">
• Example
– <form name="myform" action=""
onsubmit="return validate();">
29. W3C
DOM
• DOM
–
Document
Object
Model
–
cross-‐
pladorm
and
language-‐independent
conven)on
for
interac)ng
with
objects
in
HTML
and
in
XML.
• With
DOM
you
can
manipulate
html/xml
document!
Dynamic
html!
• Public
interface
available:
hZp://www.w3.org/
DOM/DOMTR
30. W3C
DOM
Levels
• (
DOM
Level
0
and
Intermediate
DOM
)
– Not
W3C
Standards,
used
in
Netscape
2
(Level
0)
and
Netscape
4
(Intermediate
DOM)
• DOM
Level
1
– 1998:
Ability
to
change
en)re
HTML
or
XML
document
• DOM
Level
2
– 2001:
Introduces
“getElementById”
func)on,
event
model
and
support
for
XML
namespaces
• DOM
Level
3
– 2004:
XPath,
keyboard
event
handling
32. Node
• In
DOM,
each
object
is
Node
• In
this
– <p>Hello</p>
• You
have
two
nodes
1)
element
node
p
2)
text
node
Hello
• Text
node
is
child
node
of
p
element.
P
element
is
parent
node
of
the
text
node
33. Node
Example
<p>This is a <strong>paragraph</strong></p>
<p>
|
--------------
| |
This is a <strong>
|
|
paragraph
35. Nodes
• Element
node:
p,
img,
a
• Text
node:
sometext
• AZribute
node:
src
36. DOM
Level
1:
To
Access
DOM
tree
• X
can
be
some
node
– var
parent
=
x.parentNode;
– var
firstchild
=
x.childNodes[0];
• How
to
get
reference
to
x?
37. window
-‐
object
• Every
reference
to
other
objects
is
done
via
the
window
–
object
• You
don't
have
to
use
the
reference
in
your
code:
– window.document.form.height.value
=
– document.form.height.value
• Window
methods
– alert,
close,
confirm,
open,
prompt,
setTimeOut
39. Access
var title =
document.firstChild.firstChild.lastChild;
// document.html.head.title
var title =
document.firstChild.childNodes[0].childNodes[
0];
40. Geang
Element
Easier
Way
var x =
document.getElementsByTagName(‘strong')[0]
var x = document.getElementById('hereweare');
41. Changing
the
Node
// <a href=“” id=“someId”>Link</p>
var x =
document.getElementById(’someId');
x.firstChild.nodeValue = “Hello!”;
x.setAttribute(“href”, “http:/…”);
42. Inner
HTML
// <a href=“” id=“someId”>Link</p>
var x =
document.getElementById(’someId');
x.innerHTML = “Hello!”;
//
innerHTML
is
NOT
W3C
Standard
and
it’s
//
slower…
43. Crea)ng
and
Removing
Nodes
var x = document.createElement(’hr');
document.getElementById('inserthrhere').appendChild(x);
var node = document.getElementById('inserthrhere')
node.removeChild(node.childNodes[0]);
var x = document.createTextNode(’SomeText');
document.getElementById('hereweare').appendChild(x);
44. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function change()
{
// Get list of ALL <h1> - elements
var listOfHeading1 = window.document.getElementsByTagName("h1");
// Find the first <h1> - element in the list
var heading1 = listOfHeading1[0];
// Get the child - element of the first <h1> - element (Text)
var text = heading1.firstChild;
// Replace the text
text.data = "Hello from JS!";
}
//]]>
</script>
</head>
<body>
<h1>Title</h1>
<input type="submit" onClick="change();" value="click!"/>
</body>
</html>
45. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function change()
{
// Reference to the table - element
var table = document.getElementById("mytable");
var tr = document.createElement("tr"); // <tr>
var td1 = document.createElement("td"); // <td>
var td1Text = document.createTextNode("New Cell"); // "New Cell"
td1.appendChild(td1Text); // <td>New Cell</td>
var td2 = document.createElement("td"); // <td>
var td2Text = document.createTextNode("New Cell"); // "New Cell"
td2.appendChild(td2Text); // <td>New Cell</td>
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
//]]>
</script>
</head>
<body>
<table id="mytable" border="1">
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
<input type="submit" onClick="change();" value="Add Row"/>
</body>
</html>
46. DOM
Level
0
• DOM
Level
1
supports
also
Level
0
• Level
0:
Only
access
to
elements
• Browsers
will
con)nue
to
support
it
• Access
elements
by
name:
– <img
name=“myimage”
src=“..”/>
– document.images[’myimage'].src
=
'another_image.gif';
48. Accessing
Forms
in
DOM
0
document.forms[’myform'].elements['address']
document.forms['myform'].elements[0]
document.forms[0].elements['address’]
document.forms[0].elements[0]
