Intro to JavaScript

Introduction to JavaScript Jussi Pohjolainen Tampere University of Applied Sciences

JavaScript

Object-orientated scripting language

Dialect of EcmaScript-standard

History

Netscape: LiveScript to JavaScript

Microsoft: JScript

Standard: EcmaScript

Latest version: JavaScript 1.8.1, a superset of EcmaScript

Possibilities?

JS was designed to add interactivity to HTML pages

Dynamic HTML

Can react to events: page has finished loading, user clicks..

Data validation

Browser detection

Cookies

Compatibility

Old or rare browsers

PDA or Mobile phones

JavaScript execution disabled

The use of speech browser

Browser incompatibilites

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 creating AJAX/JS-based sites

Coding is done with Java which is compiled to JavaScript

Resolves browser incompatibilies

See Example:

http://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>

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

}

Result

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

Confirm Box

confirm("some text");

Prompt Box

prompt("sometext", "default value")

<head>

<title>Embed Example</title>

</head>

<body>

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

</body>

</html>

Result

<head>

//<![CDATA[

function showAlert()

{

alert("Hello World!");

}

//]]>

</script>

</head>

<body>

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

</body>

</html>

<head>

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

JS EVENTS AND DOM

JS Events

Mouse click (onclick)

Web page loading (onload)

Mousing over and out (onmouseover onmouseout)

Submitting 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>

Result

DOM

DOM?

Specification how to access (X)Html – elements

Different 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, confirm, 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 information about your browser

Client-sniffing

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

Collection of elements in the html-page

Creating Nodes

createElement("element name")

createTextNode("text")

Walk the Tree

getElementsByTagName

getElementById

See: http://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

0 comments

Notes on slide 1

Favorites, Groups & Events

Intro to JavaScript - Presentation Transcript

More by user

More info about this document

Categories

Intro to JavaScript

0 comments

Notes on slide 1

Favorites, Groups & Events

Intro to JavaScript - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories