JavaScript - Walter Milner

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

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

299 εμφανίσεις

W. W. Milner

JavaScript

W. W. Milner

Chapter 1
-

Intro


Why use JavaScript? Interactivity


LiveScript JavaScript Jscript
ECMAScript


JavaScript is
not

Java!


Programming…..

W. W. Milner

Chapter 2


Do what it says on page 5

W. W. Milner

The first script

<SCRIPT TYPE="text/javascript" >

<!
--

alert("Hello world");

//
--
>

</SCRIPT>


W. W. Milner

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


Variables


data values held in memory


Declaring variables


var price=2.50;


W. W. Milner

Input

Entering data values at ‘run
-
time’

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



W. W. Milner

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


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


Number, date, currency, boolean…


String type = string of characters


Enclose in quotes


var myName;

myName = “Walter Milner”;


W. W. Milner

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


answer = "123.4";


result =
parseFloat
(answer);


W. W. Milner

if
-

the decision statement

unitPrice = 1.30;

if (quantity > 100)


unitPrice = 1.20;


Symbol


Meaning


>


greater than


<


less than


>=


greater than or equal to


<=


less than or equal to


==


equal


!=


not equal


Do task on page 14

W. W. Milner

Repeating
-

loops

var counter;

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

)


alert(counter);


Do task on page 15

W. W. Milner

Chapter 3
-

functions


Code structure
-

splitting code into parts


Function like mini
-
program


Data comes in, processed, result
returned

W. W. Milner

Example function

function average(a,b,c)

{


var total;


total = a+b+c;


return total/3;

}


Values come in
here

Value returned here

W. W. Milner

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


start

function
call

x y z copied to a b c

W. W. Milner

functions

do the tasks page 17/18

W. W. Milner

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

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


A way to refer to things in the window


objects


properties


methods


events


W. W. Milner

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

window

navigator

screen

document

history

location

form

form

button

form

W. W. Milner

navigator


alert(window.navigator.userAgent);


the window

the navigator
in the window

the useragent
property of the
navigator

W. W. Milner

screen


readonly

window.moveTo(0,0);

x = screen.availWidth;

y = screen.availHeight;

window.resizeTo(x,y );


W. W. Milner

location


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


W. W. Milner

document


document.bgColor="yellow";


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


Try the tasks on page 23


W. W. Milner

Forms


CGI GET and POST and server
-
side
processing


JavaScript client
-
side processing


Form data validation

W. W. Milner

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

<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


Try the task on page 27

W. W. Milner

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


Try the task on page 29

W. W. Milner

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

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

interval

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

5 seconds after this statement
executes, this function is called

make something happen (
once
) after a fixed delay

clearInterval(
interval
);

cancels this

W. W. Milner

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


Try page 33

W. W. Milner

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

<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

<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

W. W. Milner

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

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