Javascript2!02!67 Sent

8/6/2019 Javascript2!02!67 Sent

1/66

Javascript for beginners Copyright Martin Baier

Translated from the German by Linda L. Gaus

Copyright 2000 Author and KnowWare

Acrobat Reader: How to ...F5/F6 open/closes bookmarks - F4 open/closes thumbnails

In menu View you can set, how the file is displayed

CTRL +0 = Fit in Window, CTRL +1 = Actual size, CTRL +2 = Fit widthYou can set S INGLE PAGE , CONTINUOUS VIEW or CONTINUOUS FACING.. try them out and you will see the differences.

Navigation

ARROW LEFT / RIGHT : forward/backwards one page

ALT +A RROW LEFT / RIGHT : same as in a browser: forward/back

CTRL ++ zooms in AND CTRL +- zooms out

www.knowwareglobal.com


2/66

Table of Contents 3


3/66

Introduction4

Courier

www.knowwareglobal.com/javascript

[email protected]


4/66

The Basics 5

Start/ Programs / Accessories / Notepadwww.netscape.com

www.microsoft.com

Here is a
Pagebreak. This text will appear in italics.

Title of the Page (appears in the browser in the title

line)

Here is a
Pagebreak. This text will appear in italics.


5/66

The Basics6

File / Open

/

Title of the Page (appears in the browser in the title

line) This is a title that contains a word beginning with

Here is a
Pagebreak. And here is a

paragraph This text will appear in italics, this, by contrast, in boldface, and this text will be underlined. There is also a link and you can even include pictures.


6/66

The Basics 7

www.knowwareglobal.com/javascript/

Title of the Page

...


7/66

The Basics8

hello

...

...

write_time

It is

write_time()

OClock!


8/66

First JavaScript Programming 9

Title of the Page

Here are the contents of the page!


9/66

First JavaScript Programming10

function hello(result){alert(result)}

hello Hello World with Parameters

hello result

resultalert


10/66

What Time is it? 11

Title of the Page

Welcome to my Web Site. It is

time()

OClock!

time=new Date ()time time

timedocument.writetime.getHours : time.getMinutes

time+


11/66

What Time is it?12

Title of the Page (appears in the Browser in the title line

)

If you click here, you will go to Page 2!

file:///C|/Files/Knowware/JavaScript/page2.htm

If you click here, you will go to Page2!

onMouseOver

onMouseOut


12/66


13/66

Event Handler 14

onMouseOver

onMouseOut onMouseOveronMouseOver

onMouseOut

onFocus

message


14/66

Event Handler 15

Title of the Page

Point 1Point 2Point 3


15/66

Event Handler 16

onBlur onFocus

onFocus

window.status="You have placed the cursor in the" + field + "field!" window.status=You have now left the " + field +" field!"

onFocus onBlur

onBlur

onChange onBluronBlur

onBlur onChange


16/66

Event Handler 17

onClick

Title of the Page

Option 1
Option 2
Check

Button


17/66

Event Handler 18

onClick Here is the Link!

on... javascript

Reference text

onClick

onClick

www.knowware.de/javascript


18/66

Functions 19

Title of the Page

functionhello

(

)

function hello(result,other_value){

{ }

'Hello World with Parameters'


19/66

Variable20

function hello(result){alert(result)}

result

resulthello

function hello(){ var result

result="Here I am!"alert(result)}

resultHere I am!

function hello(){ var eggs=5

alert("Today I bought " + eggs + " eggs.")}

eggs 5 Today I bought 5 eggs.


20/66

Global Variable 21

What kind of computer are you using?

computer unknown


21/66

Mathematical Operation22

resulta b

result = a + bresult = a - b

result = a * bresult = a / b

a = Math.round(b)

result = result + 1

result++ result = result - 1result--

Seconds in a Year A year has var seconds=365*24*60*60

document.write(seconds)

seconds!


22/66

Repeated Performance 23

for while

function square(){for (var i=1; i


23/66

Repeated Performance24

Squared Numbers

square()


24/66

Repeated Performance 25

while for while

forfor

function square(){i=45while (i


25/66

Repeated Performance26

Squared Numbers

square()

for while


26/66

Conditional Operations 27

ifif

Title of the Page

greeting()

Here is some Text.


27/66

Conditional Operations28

hourshello

if ifif

ifif


28/66

Standard Objects 29

document.write("Bla bla")document alert("Bla bla")

window window.alert("Bla bla")document.bgColor document

document

Title of the Page

This is normal Text.
I have not visited Page 2 yet.
But I have already visited Page 3.
I am clicking on this link right now.


29/66

Standard Objects30

href="javascript:color('7FFFD4','0000FF','FF0000','990000','000000')">Color change


30/66

Standard Objects 31

document.referrer document.locationdocument.title

My JavaScript Page

Contents of the Page


31/66

Standard Objects32

document

document.picture.src

picture.gifdocument.picture.src

document.picture.src="picture2.gif"

substitution=new Imagesubstitution.src="picture2.gif"


32/66

Standard Objects 33

picture1.gif picture2.gif onMouseOver

onMouseOut

active.gif inactive.gif

active.gif

inactive.gif


33/66


34/66

Standard Objects 35

document.frames documentdocument.frames

animalinfo.htm

Animal Information

kindofanimal.htm

Kind of Animal

startanimal.htm

Here is where some information about animals will appear.

kindofanimal.htm mammals.htm reptiles.htm fish.htm Kind of Animal mammals reptiles fish


35/66

Standard Objects36

startanimal.htm mouse.htm elephant.htm crocodile.htm

lizard.htm greatwhiteshark.htm goldfish.htm contents.htm

Elephant

function change_frames(file1,file2){ parent.frames[1].location.href=file1 parent.frames[2].location.href=file2

}

animalinfo.htm

parent

location.href

file1 file2The entire source code for the file contents.htm looks like this:

Smammals:
Mouse

Elephant

Reptiles:

Crocodile

Lizard

Fish:

Great


36/66

Standard Objects 37

White Shark

Goldfish

Upon loading the file animalinfo.htm into the browser, you should see this:


37/66

Standard Objects38

formsdocument.forms[0].length

document.forms document.forms[0].elements elements

Elementname

document.forms[0].Elementname.value

document.forms[0].Elementname.defaultValue(DefaultValue)

document.forms[0].Elementname.select()

document.forms[0].Elementname.focus()

n0 1 false

true

document.forms[0].Elementname.defaultChecked n

name

document.forms[0].Elementname.options[n].selectedIndex

valuedocument.forms[0].Elementname.options[n].value


38/66

Standard Objects 39

document.forms

Pizza Service

Pizza Service


39/66

Standard Objects40

onSubmit="confirmation()"> Your Name:

Your Address:

Your Pizza:

Size: Small Medium Large

Toppings:
Ham
Peppers

Packaging:
Cardboard box
Styrofoam-insulated container

onSubmitconfirmation

Dear,

You have ordered a

alert


40/66

Standard Objects 41

document.form


41/66

Euro Calculator 42

form

calculate Euro Calculator

Euro Calculator ATS BEF/LUF DEM ESP FIM FRF

IEP ITL NLG PTE

corresponds to

Euros.

onChange

value

calculatea


42/66

Euro Calculator 43

function calculate(){if (a==0){document.forms[0].euro.value=Math.round(document.forms[0].amount.value / document.forms[0].currency[document.forms[0].currency.selectedIndex].value * 100) / 100}if (a==1){document.forms[0].amount.value=Math.round(document.forms[0].euro.value * document.forms[0].currency[document.forms[0].currency.selectedIndex].value * 100) / 100}}

a Math.round

value

a=1


43/66

Strings44

xy.lengthxy

xy zz=xy.substring(0,9)

xyxy=xy.toLowerCase

xy zz=xy.toUpperCase

Moving Text


44/66

Strings 45

window.status=resultif (result==""){result=text}setTimeout("movingtext()",150)}

//--> Have a look at the status line!

text

result start movingtext onLoad

result start

result texttext result if

result

resulttext if

setTimeout("movingtext()",150) movingtext

result


45/66

User-Defined Object46

smith-name smith-age jones-name jones-age

function colleague(name,age){this.name=namethis.age=age}

var smith=new colleague("Michael Smith",43)

smith.name smith.age

smith=new Object

smith.firstname="Michael"smith.lastname="Smith"smith.hobby="soccer"

new

new = new Array

new[1] new[2] new[3]new[1] new[2]

name


46/66

User-Defined Object 47

Frames

Welcome to my Homepage!

Please enter your name:

continue

parent.top.frames[n]. n


47/66

User-Defined Object48

document.location.href

Here is Page 2

Yes,

document.write(parent.name)

, unfortunately this is also the last page.


48/66

Quiz 49

www.knowware.de/javascript. {MM: pleasespecify the correct URL here!}


49/66

Quiz50

Quiz


50/66

Quiz 51

question[1].answer3="Mars"question[1].answer=1

question[2].text=" Which gas makes it possible for a match to burn?"

question[2].answer1="nitrogen"question[2].answer2="hydrogen"question[2].answer3="oxygen"question[2].answer=3

question[3].text="What do monks do in a refectory?"question[3].answer1="pray"question[3].answer2="work"question[3].answer3="eat"question[3].answer=3

question[4].text="Of which country is Newfoundland a part?"question[4].answer1="Denmark"question[4].answer2="Canada"question[4].answer3="USA"

question[4].answer=2...

// -->

pointsx y

answered

afield afield[1]afield[5] for

afield[1][2]=destinationquestion question[1]

question[40] forasked false

text answer1 answer2 answer3answer


51/66

Quiz52

answer1

points Your Score:

document.write(parent.points)

print_laby()


52/66

Quiz 53

print_laby

for ij

document.write("")if

m parent.afield[j][i]

.gif


53/66

Quiz54

else {document.write('')}document.write("")}function go(x,y){

parent.points=parent.points-25 parent.x=parent.x + x parent.y=parent.y + y parent.frames[0].location.href="laby.htm"

if (parent.afield[parent.x][parent.y]=="horiz"){ parent.frames[1].location.href="questions.htm"

}else if (parent.afield[parent.x][parent.y]=="destination"){

parent.frames[1].location.href="destination.htm"}else{

parent.frames[1].location.href="steering.htm"}

parent.frames[2].location.href="points.htm"}//-->

print_steering()

print_steering

www.knowware.de/javascript. {MM: Please check this URL!} print_steering

parent.afield[parent.x][parent.y] f if


54/66

Quiz 55

||

go(0,-1)else if

go

go

questions.htm destination.htm

steering.htm

questions.htm


55/66

Quiz56

}else{alert("Sorry, that is wrong. You lose 40 points.")

parent.points=parent.points-40}

parent.frames[1].location.href="steering.htm"

parent.frames[2].location.href="points.htm"}

//-->

question()

question()

a=Math.round(Math.random()*39)+1 Math.random()

Math.random()*39 Math.round

whileasked

true

answera

answer

Congratulations! You have arrived at the destination with


56/66

Quiz 57

document.write(parent.points)

points.

New Game

www.knowwareglobal.com/javascript/


57/66

The Explorer 58

Big Band, Explorer with JavaScript


58/66

The Explorer 59

ex[0]=new init_ex(0,true,"Desktop","start.htm")ex[1]=new init_ex(1,true,"My Workspace","")ex[2]=new init_ex(2,true,"1st file","xy.htm")ex[3]=new init_ex(2,true,"2nd file","xyz.htm")ex[4]=new init_ex(1,true,"Directory II","")ex[5]=new init_ex(2,true,"Directory III","")ex[6]=new init_ex(3,true,"Directory IV","")ex[7]=new init_ex(-1,true,"","")//-->

init_ex

var ex=new Array ex[1] ex[2] ex[3]ex[x]

ex[x] init_ex

ex[x]=new init_ex(Level,true/false,"Displaytext","Filename")

ex[x]

ex[x].levelex[x].opened

ex[x].descriptionex[x].filename


59/66

The Explorer 60

start

max

print_explorer()

print_explorer


60/66

The Explorer 61

function print_explorer(){ var i=0

while (parent.ex[i].level!=-1){if (parent.ex[i].level


61/66

The Explorer 62

target='contents'>" + parent.ex[0].description +"")

if (parent.ex[0].opened==false){ max=0

}else{

max=1000}}

unopen

parent.ex[0].description parent.ex[0].filename

if

max

exfolderfunction exfolder(i){ var picture1="exopen.gif" var picture2="exminus.gif"

if (parent.ex[i].opened==false){ picture1="exto.gif" picture2="explus.gif"

}document.write("" + parent.ex[i].description + "")

if (parent.ex[i].opened==false){ max=parent.ex[i].level}else{

max=1000}}

picture1 picture2

exmaini

picture1 picture2exfile

function exfile(i){ var picture="exdat.gif"

if (parent.ex[i].level!=parent.ex[i+1].level){ picture="exend.gif"

}document.write("


62/66

The Explorer 63

parent.ex[i].filename +"' target='contents'>" + parent.ex[i].description +"")

}

pictureexmain

max

function exempty(i){for (j=0; j=j-2)&&(parent.ex[k].level!=-1)){if (parent.ex[k].level==j+1){

paint=true}k++}if (paint==true){document.write("")}else{document.write("")}}}

forj while k

paint true

unopenfunction unopen(nr){

parent.ex[nr].opened=!parent.ex[nr].opened parent.frames[0].location.href="explorer.htm"

}


63/66

The Explorer 64

document.write("")exempty(i)exfolder(i)document.write("")}else{document.write("")exempty(i)exfile(i)document.write("")}document.write("")}i++}}function exmain(){document.write("" + parent.ex[0].description +"")

if (parent.ex[0].opened==false){ max=0

}else{

max=1000}}function exfolder(i){

var picture1="exopen.gif" var picture2="exminus.gif"

if (parent.ex[i].opened==false){ picture1="exto.gif" picture2="explus.gif"

}document.write("" + parent.ex[i].description + "")

if (parent.ex[i].opened==false){ max=parent.ex[i].level

}else{

max=1000}}function exfile(i){

var picture="exdat.gif"if (parent.ex[i].level!=parent.ex[i+1].level){

picture="exend.gif"}document.write("


64/66

The Explorer 65

parent.ex[i].filename +"' target='contents'>" + parent.ex[i].description +"")

}function exempty(i){for (j=0; j=j-2)&&(parent.ex[k].level!=-1)){if (parent.ex[k].level==j+1){

paint=true}k++}if (paint==true){document.write("")}else{document.write("")}}

}function unopen(nr){ parent.ex[nr].opened=!parent.ex[nr].opened parent.frames[0].location.href="explorer.htm"

}//-->

print_explorer()

ex[i]


65/66

Reserved Words and the Last Word66

abstract boolean break

bytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelse

enum exportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimport

in

instanceofintinterface

longnativenewnull

package private protected public

returnshortstaticsuperswitch

synchronized thisthrowthrowstransienttruetrytypeof

var void volatile

whilewith

_

a b c d ef input result counter day month

year


66/66

Ordering Information 67

Javascript2!02!67 Sent

Documents

Transcript of Javascript2!02!67 Sent