Javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 44

JavaScript PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on
  • Presentation posted in: General

JavaScript. Chapter 1 - Intro. Why use JavaScript? Interactivity LiveScript JavaScript Jscript ECMAScript JavaScript is not Java! Programming….. . Chapter 2. Do what it says on page 5. The first script. <SCRIPT TYPE="text/javascript" > <!-- alert("Hello world"); //--> </SCRIPT>.

Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Javascript

JavaScript

W. W. Milner


Chapter 1 intro

Chapter 1 - Intro

  • Why use JavaScript? Interactivity

  • LiveScript JavaScript Jscript ECMAScript

  • JavaScript is not Java!

  • Programming…..

W. W. Milner


Chapter 2

Chapter 2

  • Do what it says on page 5

W. W. Milner


The first script

The first script

<SCRIPT TYPE="text/javascript" >

<!--

alert("Hello world");

//-->

</SCRIPT>

W. W. Milner


Using separate script files

Using separate script files

<!-- This shows a first piece of JavaScript -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title> ----- 1 - HelloWorld ------- </title>

<SCRIPT SRC="hithere.js" TYPE="text/javascript">

</head>

<body>

<p> Some page content </p>

</body>

</html>

W. W. Milner


Chapter 3

Chapter 3

  • Variables – data values held in memory

  • Declaring variables

  • var price=2.50;

W. W. Milner


Input

Input

Entering data values at ‘run-time’

price = prompt("Enter the price", "10.00");

W. W. Milner


What s wrong

What’s wrong?

price = prompt "Enter the price", "10.00";

price = prompt("Enter the price", "10.00";

price = prompt("Enter the price", 10.00);

price = prompt( Enter the price", "10.00");

prompt("Enter the price", "10.00");

price = prompt("Enter the price", "10.00")

W. W. Milner


Arithmetic

Arithmetic

  • total = price * quantity;

  • result = 2 + 3;

  • result = 1 + 3 * 4;

  • result = (1 + 3) * 4;

  • result = 7 / 8;

  • Try page 12

W. W. Milner


Data type

Data type

  • Number, date, currency, boolean…

  • String type = string of characters

  • Enclose in quotes –

    var myName;

    myName = “Walter Milner”;

W. W. Milner


String concatenation

String concatenation

  • A + joins strings

    string1 = “fat “;

    string2 = “cats”;

    alert(string1+string2); >> fat cats

  • What is

    "9" + "9"?

W. W. Milner


Changing string type to number

Changing string type to number

  • answer = "123.4";

  • result = parseFloat(answer);

W. W. Milner


If the decision statement

Symbol

Meaning

>

greater than

<

less than

>=

greater than or equal to

<=

less than or equal to

==

equal

!=

not equal

if - the decision statement

unitPrice = 1.30;

if (quantity > 100)

unitPrice = 1.20;

Do task on page 14

W. W. Milner


Repeating loops

Repeating - loops

var counter;

for (counter=0; counter<4; counter++ )

alert(counter);

Do task on page 15

W. W. Milner


Chapter 3 functions

Chapter 3 - functions

  • Code structure - splitting code into parts

  • Function like mini-program

  • Data comes in, processed, result returned

W. W. Milner


Example function

Example function

Values come in here

function average(a,b,c)

{

var total;

total = a+b+c;

return total/3;

}

Value returned here

W. W. Milner


Call and return of function

Call and return of function

function average(a,b,c)

{

var total;

total = a+b+c;

return total/3;

}

..

x=4;

y=3;

z=2;

answer=average(x,y,z);

alert(answer);

function call

x y z copied to a b c

start

W. W. Milner


Functions

functions

do the tasks page 17/18

W. W. Milner


Event handling functions

event-handling functions

  • examples of events -

  • key press, mouse move, mouse click, timer times out

  • GUI programming = responding to user events

  • event-handler = function called when an event happens

W. W. Milner


The onload event

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> ----- 2 - functions ------- </title>

<SCRIPT TYPE="text/javascript" >

<!--

function greet()

{

alert("Loaded");

}

//-->

</SCRIPT>

</head>

<body onload="greet()">

</body>

</html>

The onLoad event

do task page 18/19

W. W. Milner


Chapter 5 the dom

Chapter 5 - The DOM

  • A way to refer to things in the window

  • objects

  • properties

  • methods

  • events

W. W. Milner


Dom example

DOM example

var newWindow =window.open("","nw", "menubar, status, resizable");

newWindow.status ="Hello folks";

newWindow.resizeTo(400,200);

  • Do task top of page 21

W. W. Milner


Dom hierarchy

DOM hierarchy

window

navigator

screen

document

history

location

form

form

button

form

W. W. Milner


Navigator

navigator

  • alert(window.navigator.userAgent);

the useragent property of the navigator

the navigator in the window

the window

W. W. Milner


Screen

screen

  • readonly

    window.moveTo(0,0);

    x = screen.availWidth;

    y = screen.availHeight;

    window.resizeTo(x,y );

W. W. Milner


Location

location

  • location.href="http://www.yahoo.com/";

W. W. Milner


Document

document

  • document.bgColor="yellow";

  • document.write("This is some <b>bold text</b>");

  • Try the tasks on page 23

W. W. Milner


Forms

Forms

  • CGI GET and POST and server-side processing

  • JavaScript client-side processing

  • Form data validation

W. W. Milner


Form example

Form example

<form name="myform" method="post" action="" >

<input type="text" name="num1">

<input type="text" name="num2">

<br>

<input type="button" name="Button" value="+" >

<br>

Result:<input type="text" name="result">

</form>

W. W. Milner


Event handler for button

Event-handler for button

<input type="button" name="Button" value="+" onClick="doAdd()">

function doAdd()

{

var number1, number2, result;

number1=parseFloat(myform.num1.value);

number2=parseFloat(myform.num2.value);

result = number1+number2;

myform.result.value=result;

}

W. W. Milner


Forms task

Forms task

  • Try the task on page 27

W. W. Milner


Form data validation

Form data validation

function checkForm()

{

var OK=true;

if (document.form1.forename.value=="")

{

alert("Please type in your forename");

document.getElementById("fNamePrompt").style.color="red";

OK=false;

}

if (document.form1.surname.value=="")

{

alert("Please type in your surname");

document.getElementById("sNamePrompt").style.color="red";

OK=false;

}

if (OK)

{

// submit form here

}

}

W. W. Milner


Form validation task

Form validation task

  • Try the task on page 29

W. W. Milner


Chapter 7 the math object

Chapter 7 - The Math object

function rollDice()

{

var x = Math.random();

x = 6*x;

x = Math.floor(x);

x=x+1;

alert(x);

}

Task on page 31

W. W. Milner


Date object

Date object

var now = new Date();

var result="It is now "+now;

document.getElementById("timeField").innerText=result;

..

<p id="timeField"> </p>

  • hours = now.getHours();

  • Task on page 32

W. W. Milner


Timing settimeout

Timing - setTimeout

make something happen (once) after a fixed delay

interval = setTimeout('bang()', 5000);

5 seconds after this statement executes, this function is called

clearInterval(interval);

cancels this

W. W. Milner


Setinterval

setInterval

makes something happen repeatedly at fixed intervals

interval = setInterval('ticktock()', 1000);

this function is called every second after this

clearInterval(interval);

stops it

W. W. Milner


Timing tasks

Timing - tasks

  • Try page 33

W. W. Milner


Chapter 8 standard tricks rollovers

Chapter 8 - Standard tricks - rollovers

..

function showPic(f)

{

document.pic.src=f;

}

// -->

</SCRIPT>

</head>

<body >

<p onMouseOver="showPic('pic1.gif')"> Pic one </p>

<p onMouseOver="showPic('pic2.gif')"> Pic two</p>

<img name = "pic" src="default.gif">

</body>

</html>

W. W. Milner


Image roll over

Image roll-over

<SCRIPT TYPE="text/javascript">

<!--

function showPic(f)

{

document.pic.src=f;

}

// -->

</SCRIPT> 

</head>

<body >

<img name = "pic" src="default.gif" onMouseOver="showPic('pic1.gif')" onMouseOut="showPic('pic2.gif')" >

</body>

Task - try this out - produce a page showing an image, which changes to a second image when the mouse goes over it, and a third image when the mouse leaves it. Get images from the Web or draw them using the graphics software on the computer

W. W. Milner


Pre loading images

Pre-loading images

<SCRIPT TYPE="text/javascript">

<!--

var image1, image2, image3;

function preLoad()

{

image1 = new Image(30,30);

image2 = new Image(30,30);

image3 = new Image(30,30);

image1.src="default.gif";

image2.src="pic1.gif";

image3.src="pic2.gif";

document.pic.src = image1.src;

}

// -->

</SCRIPT>

</head>

<body onLoad="preLoad()"

onMouseOver="document.pic.src = image2.src" >

<img name = "pic" >

</body>

</html>

W. W. Milner


Menus

Menus

W. W. Milner


Styles for menus

Styles for menus

<style type="text/css">

<!--

#ID1, #ID2 { /* initial settings of the two menu blocks */

font-family: Geneva, Arial, Helvetica, san-serif;

font-size: 12px;

color: #FFFFFF ;

display : none; /* <<<< so you cant see them */

background-color= #ffff00;

position: absolute;

top: 40px;

width: 55px;

border: thin solid black

}

..

-->

W. W. Milner


Javascript for the menus

JavaScript for the menus

function mouseMethod(leftPos, whichID)

{ /* when they click on a menu item */

/* change from display none to display block - can see it */

document.getElementById(whichID).style.display = "block";

/* make it correct position across screen */

document.getElementById(whichID).style.left = leftPos;

}

function hideAgain(whichID)

{ /* when they click hide, revert to display none */

document.getElementById(whichID).style.display = "none";

}

Task - Try this out. Add a third block

W. W. Milner


  • Login