Intro to JavaScript

Introduc)on
to
JavaScript

Jussi
Pohjolainen

Tampere
University
of
Applied
Sciences

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

Possibili)es?

•  JS
was
designed
to
add
interac)vity
to
HTML

pages

•  Dynamic
HTML

•  Can
react
to
events:
page
has
ﬁnished
loading,

user
clicks..

•  Data
valida)on

•  Browser
detec)on

•  Cookies

Compa)bility

•  Old
or
rare
browsers

•  PDA
or
Mobile
phones

•  JavaScript
execu)on
disabled

•  The
use
of
speech
browser

•  Browser
incompa)bilites

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

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

<!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" /
>
</head>
<body>

<p>

<script type="text/javascript">
//<![CDATA[

document.write("Hello from JS!");

//]]>
</script>
</p>

</body>
</html>

<head>
<title>External JS Example</title>
<meta http-equiv="content-type" content="application/xhtml
+xml; charset=utf-8" />
<script type="text/javascript" src="event.js"></script>
</head>
<body onload="message()">

</body>
</html>

// event.js
function message()
{
alert("This alert box was called
with the onload event");
}

QUICK
INTRO
TO
PROGRAMMING

WITH
JS

Variables

•  Values
are
stored
in
variables

•  Variables
are
declared:

–  var carname;
•  Assigning
value

–  carname = "volvo";
•  Together

–  var carname = "volvo";

...
<body>

<p>
//<![CDATA[

// Declaration
var car;
// Assigning
car = "Volvo";
document.write(car);

//]]>
</script>
</p>

</body>
</html>

Comparison
(w3schools)

//<![CDATA[

var d = new Date();
var time = d.getHours();

if ( time < 10 )
{
document.write("<b>Good morning</b>");
}

//]]>
</script>

Comparison
(w3schools)

//<![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>

Repeat
(w3schools)

//<![CDATA[

var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i = i + 1;
}

//]]>
</script>

Popup
Boxes

•  Alert
Box

–  alert("some
text");

•  Conﬁrm
Box

–  conﬁrm("some
text");

•  Prompt
Box

–  prompt("sometext",
"default
value")

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<head>
<meta http-equiv="content-type" content="application/
xhtml+xml; charset=utf-8" />
</head>
<body>

<input type="button" onclick="alert('moi');" value="Show
alert box" />

</body>
</html>

JS
Events

•  Mouse
click
(onclick)

•  Web
page
loading
(onload)

•  Mousing
over
and
out
(onmouseover

onmouseout)

•  Submiang
HTML
form
(onsubmit)

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();">

Example

<form name="myform" method="post" onsubmit="return
count()">
Height (m):<br/>
<input type="text" name="height"/><br/>
Weight (kg):<br/>
<input type="text" name="weight"/><br/>

<input type="submit" value="BMI"/><br/>

BMI<br/>
<input type="text" name="result"/>
</form>

//<![CDATA[
function count()
{
var height = document.myform.height.value;
var weight = document.myform.weight.value;
document.myform.result.value = (weight / (height*height));

return false;
}

//]]>
</script>

DOM?

•  Speciﬁca)on
how
to

access
(X)Html
–
elements

•  Diﬀerent
levels
of
DOM:
0,

1,
and
2

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,
conﬁrm,
open,
prompt,
setTimeOut

Opening
new
Browser
Window

// See:
http://www.javascript-coder.com/window-
popup/javascript-window-open.phtml

window.open("http://www.tamk.fi",
"title",
"width=600, height=100");

navigator
-‐
object

•  navigator
tells
informa)on
about
your
browser

•  Client-‐sniﬃng

var browser = navigator.appName;
var b_version = navigator.appVersion;
var version = parseFloat(b_version);

document.write("Browser name: "+ browser);
document.write("<br />");
document.write("Browser version: "+ version);

document
-‐
object

•  Collec)on
of
elements
in
the
html-‐page

•  Crea)ng
Nodes

–  createElement("element
name")

–  createTextNode("text")

•  Walk
the
Tree

–  getElementsByTagName

–  getElementById

•  See:
hZp://www.howtocreate.co.uk/tutorials/
javascript/domstructure

<head>
<title></title>
//<![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>

<head>
<title></title>
//<![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>
</table>

<input type="submit" onClick="change();" value="Add Row"/>

</body>
</html>

Intro to JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Intro to JavaScript

More from Jussi Pohjolainen

Recently uploaded

Intro to JavaScript