javascript2!02!67 sent
TRANSCRIPT
-
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
-
8/6/2019 Javascript2!02!67 Sent
2/66
Table of Contents 3
-
8/6/2019 Javascript2!02!67 Sent
3/66
Introduction4
Courier
www.knowwareglobal.com/javascript
-
8/6/2019 Javascript2!02!67 Sent
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. -
8/6/2019 Javascript2!02!67 Sent
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 aparagraph 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.
-
8/6/2019 Javascript2!02!67 Sent
6/66
The Basics 7
www.knowwareglobal.com/javascript/
Title of the Page
...
-
8/6/2019 Javascript2!02!67 Sent
7/66
The Basics8
hello
...
...
write_time
It is
write_time()
OClock!
-
8/6/2019 Javascript2!02!67 Sent
8/66
First JavaScript Programming 9
Title of the Page
Here are the contents of the page!
-
8/6/2019 Javascript2!02!67 Sent
9/66
First JavaScript Programming10
function hello(result){alert(result)}
hello Hello World with Parameters
hello result
resultalert
-
8/6/2019 Javascript2!02!67 Sent
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+
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
12/66
-
8/6/2019 Javascript2!02!67 Sent
13/66
Event Handler 14
onMouseOver
onMouseOut onMouseOveronMouseOver
onMouseOut
onFocus
message
-
8/6/2019 Javascript2!02!67 Sent
14/66
Event Handler 15
Title of the Page
Point 1Point 2Point 3
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
16/66
Event Handler 17
onClick
Title of the Page
Option 1
Option 2
CheckButton
-
8/6/2019 Javascript2!02!67 Sent
17/66
Event Handler 18
onClick Here is the Link!
on... javascript
Reference text
onClick
onClick
www.knowware.de/javascript
-
8/6/2019 Javascript2!02!67 Sent
18/66
Functions 19
Title of the Page
functionhello
(
)
function hello(result,other_value){
{ }
'Hello World with Parameters'
-
8/6/2019 Javascript2!02!67 Sent
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.
-
8/6/2019 Javascript2!02!67 Sent
20/66
Global Variable 21
What kind of computer are you using?
computer unknown
-
8/6/2019 Javascript2!02!67 Sent
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!
-
8/6/2019 Javascript2!02!67 Sent
22/66
Repeated Performance 23
for while
function square(){for (var i=1; i
-
8/6/2019 Javascript2!02!67 Sent
23/66
Repeated Performance24
Squared Numbers
square()
-
8/6/2019 Javascript2!02!67 Sent
24/66
Repeated Performance 25
while for while
forfor
function square(){i=45while (i
-
8/6/2019 Javascript2!02!67 Sent
25/66
Repeated Performance26
Squared Numbers
square()
for while
-
8/6/2019 Javascript2!02!67 Sent
26/66
Conditional Operations 27
ifif
Title of the Page
greeting()
Here is some Text.
-
8/6/2019 Javascript2!02!67 Sent
27/66
Conditional Operations28
hourshello
if ifif
ifif
-
8/6/2019 Javascript2!02!67 Sent
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. -
8/6/2019 Javascript2!02!67 Sent
29/66
Standard Objects30
href="javascript:color('7FFFD4','0000FF','FF0000','990000','000000')">Color change
-
8/6/2019 Javascript2!02!67 Sent
30/66
Standard Objects 31
document.referrer document.locationdocument.title
My JavaScript Page
Contents of the Page
-
8/6/2019 Javascript2!02!67 Sent
31/66
Standard Objects32
document
document.picture.src
picture.gifdocument.picture.src
document.picture.src="picture2.gif"
substitution=new Imagesubstitution.src="picture2.gif"
-
8/6/2019 Javascript2!02!67 Sent
32/66
Standard Objects 33
picture1.gif picture2.gif onMouseOver
onMouseOut
active.gif inactive.gif
active.gif
inactive.gif
-
8/6/2019 Javascript2!02!67 Sent
33/66
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
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:
MouseElephant
Reptiles:
Crocodile
Lizard
Fish:
Great
-
8/6/2019 Javascript2!02!67 Sent
36/66
Standard Objects 37
White Shark
Goldfish
Upon loading the file animalinfo.htm into the browser, you should see this:
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
38/66
Standard Objects 39
document.forms
Pizza Service
Pizza Service
-
8/6/2019 Javascript2!02!67 Sent
39/66
Standard Objects40
onSubmit="confirmation()"> Your Name:
Your Address:Your Pizza:
Size: Small Medium Large
Toppings:
Ham
PeppersPackaging:
Cardboard box
Styrofoam-insulated containeronSubmitconfirmation
Dear,
You have ordered a
alert
-
8/6/2019 Javascript2!02!67 Sent
40/66
Standard Objects 41
document.form
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
43/66
Strings44
xy.lengthxy
xy zz=xy.substring(0,9)
xyxy=xy.toLowerCase
xy zz=xy.toUpperCase
Moving Text
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
46/66
User-Defined Object 47
Frames
Welcome to my Homepage!
Please enter your name:
continue
parent.top.frames[n]. n
-
8/6/2019 Javascript2!02!67 Sent
47/66
User-Defined Object48
document.location.href
Here is Page 2
Yes,
document.write(parent.name)
, unfortunately this is also the last page.
-
8/6/2019 Javascript2!02!67 Sent
48/66
Quiz 49
www.knowware.de/javascript. {MM: pleasespecify the correct URL here!}
-
8/6/2019 Javascript2!02!67 Sent
49/66
Quiz50
Quiz
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
51/66
Quiz52
answer1
points Your Score:
document.write(parent.points)
print_laby()
-
8/6/2019 Javascript2!02!67 Sent
52/66
Quiz 53
print_laby
for ij
document.write("")if
m parent.afield[j][i]
.gif
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
54/66
Quiz 55
||
go(0,-1)else if
go
go
questions.htm destination.htm
steering.htm
questions.htm
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
56/66
Quiz 57
document.write(parent.points)
points.
New Game
www.knowwareglobal.com/javascript/
-
8/6/2019 Javascript2!02!67 Sent
57/66
The Explorer 58
Big Band, Explorer with JavaScript
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
59/66
The Explorer 60
start
max
print_explorer()
print_explorer
-
8/6/2019 Javascript2!02!67 Sent
60/66
The Explorer 61
function print_explorer(){ var i=0
while (parent.ex[i].level!=-1){if (parent.ex[i].level
-
8/6/2019 Javascript2!02!67 Sent
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("
-
8/6/2019 Javascript2!02!67 Sent
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"
}
-
8/6/2019 Javascript2!02!67 Sent
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("
-
8/6/2019 Javascript2!02!67 Sent
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]
-
8/6/2019 Javascript2!02!67 Sent
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
-
8/6/2019 Javascript2!02!67 Sent
66/66
Ordering Information 67