javascript
Download
Skip this Video
Download Presentation
JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 44

JavaScript - PowerPoint PPT Presentation


  • 159 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'JavaScript' - sidney


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

W. W. Milner

using separate script files
Using separate script files

----- 1 - HelloWorld -------

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 bold text");
  • 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



Result:

W. W. Milner

event handler for button
Event-handler for button

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;

..

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

}

// -->

Pic one

Pic two

W. W. Milner

image roll over
Image roll-over

 

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

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

W. W. Milner

menus
Menus

W. W. Milner

styles for menus
Styles for menus