Published by Tsinghua University, javascript, I wrote down the book and translated some of it. I read it a few years ago, but I have nothing to do recently, so I have read it again. This book should have CDs, but I don’t know where the CDs are from the school. I hope it will be helpful for you to learn JavaScript.
Chapter 1 Introduction to JavaScript
1. Enter javascript statement in the address bar
Javascript:("Show text")
2. Embed javascript into HTML document
<script language=javascript>
="blue"
</script>
Chapter 2: Using variables and arrays
1. Declare variables
<script language=javascripe>
Var answer1,answer2,answer3,answer4;
answer1=9;
answer2=2.5
answer3="Milkey May"
answer4=true
</script>
2. Use integers
<script language=javascript>
var decimalNum,hexadecimalNum,octalNum
decimalNum=24
hexadecimalNum=0x24
octalNum=024
("Show decimal number: "+ decimalNum+"<br>")
("Show hexadecimal number: "+ hexadecimalNum +"<br>")
("Show octal number: "+ octalNum +"<br>")
</script>
3. Use floating point numbers
<script language=javascript>
var num1,num2,num3,num4
num1=1234567890000.0
num2=5.14e23
num3=0.0000123456
num4=6.0254e3-4
("Float number 1:"+num1+"<br>")
("Float 2:"+num2+"<br>")
("Float 3: "+num3+"<br>")
("Float 4:"+num4+"<br>")
</script>
4. Use boolean values
<script language=javascript>
var answer1,answer2
answer1=true
answer2=false
("Show Boolean 1: "+answer1+"<br>")
("Show Boolean 2: "+answer2+"<br>")
</script>
5. Use strings
<script language=javascript>
var str1,str2
str1="fdsgdg dsfdsf china"
str2="Wuhan Radio and Television University"
("Show string 1: "+str1+"<br>")
("Show string 2: "+str2+"<br>")
</script>
6. Determine the variable type
<script>
var answer1,answer2,answer3,answer4
answer1=9
answer2=2.5
answer3="milky may"
answer4=true
("Variable 1 type is: "+typeof answer1 +"<br>")
("Variable 2 type is: "+typeof answer2 +"<br>")
("Variable 3 type is: "+typeof answer3 +"<br>")
(The type of variable 4 is: "+typeof answer4 +"<br>")
</script>
7. Convert strings to numbers
<script>
var str1="31 days in january"
var int1=parseInt(str1)
(The data type of "str1 is: "+typeof str1+"<br>")
(The data type of "int1 is: "+typeof int1+"<br>")
</script>
8. Convert numbers to strings
<script>
var int1=256
var str1=""+int1
(The data type of "str1 is: "+typeof str1+"<br>")
(The data type of "int1 is: "+typeof int1+"<br>")
</script>
9. Declare an array
<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
("Array is: "+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])
</script>
10. Determine the number of array elements
<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
("Array is: "+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")
("The number of elements in the array is"+)
</script>
11. Convert array to string
<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=()
str2=(" ")
(str1+"<br>")
(str2)
</script>
12. Sort arrays
<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=()
(str1+"<br>")
</script>
Chapter 3: Creating Expressions
1. Use arithmetic operators
<script>
var1=12
var2=10
varadd=var1+var2
varsub=var1-var2
varmult=var1*var2
vardiv=var1/var2
varmod=var1%var2
("Data 1 is: "+var1+"<br>")
("Data 2 is: "+var2+"<br>")
("Data addition is: "+varadd+"<br>")
("Data subtraction is: "+varsub+"<br>")
("Data multiplication is: "+varmult+"<br>")
("Data division is: "+vardiv+"<br>")
("The remainder of data phase division is: "+varmod+"<br>")
</script>
2. Incremental variables and decreasing variables
<script>
days=1
("Output variable"+days+"<br>")
days++
("After incrementing the variable becomes: "+days)
</script>
3. Create comparison expressions
<script>
daysofmonth=28
if(daysofmonth==28)
month="february"
("days of month:"+daysofmonth+"<br>")
("month:"+month)
</script>
4. Create logical expressions
<script>
dayofmonth=28
if(dayofmonth==28 || dayofmonth==29)
month="february"
("days of month:"+dayofmonth+"<br>")
("month:"+month)
</script>
5. Use conditional operators
<script language="javascript">
stomach="hungry";
time="5:00";
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";
("Output result"+eat);
</script>
6. Identify numbers
<script>
var1=24;
(isNaN(var1))?("Variable var1"+var1+" is not a number"):("Variable var1"+var1+" is a number")
</script>
Chapter 4 Controlling the procedure
1. Use IF –Else statement
<script>
month="december"
date=25
if(month=="december" && date==25)
("Today is Christmas, the store is closed")
else
("Welcome, you come to the store to shop")
</script>
2. Use for loop
<script>
for (count=1;count<=10;count++)
("Output"+count+" sentence "+"<br>")
</script>
3. Use while loop
<script>
count=1
while(count<=15){
("Output"+count+" sentence " +"<br>")
count++}
</script>
4. Interrupt the loop
<script>
count=1
while(count<=15){
count++
if(count==8)
break;
("Output"+count+" sentence "+"<br>")}
</script>
5. Continue the cycle
<script>
count=1
while(count<=15){
count++
if(count==8)
continue;
("Output"+count+" sentence "+"<br>")}
</script>
6. Use javascript timer
<script>
function rabbit()
{("Output Statement")
}
</script>
<body onload=(rabbit(),5000)>
7. Set a certain interval
<script>
("document.form1.=document.form1.",3000)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
</form>
8. Clear timeout and interval
<script>
stop=("document.form1.=document.form1.",300)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
<input type=button name=button1 value=" Clear timeout and interval" onclick=clearInterval(stop)>
</form>
Chapter 5: Using Functions
1. Declare the function
<script>
function quote()
{ ("Output Statement")
}
</script>
2. Calling functions
<script>
function quote()
{ ("Output Statement")
}
quote()
</script>
3. Understand global and local variables
Any variable declared without the var keyword is a global variable, and any variable declared outside the function is a global variable
4. Pass parameters to functions
<script>
function f(item)
{("Output Parameter"+item+"<br>")
}
f("fgdfgd")
f("parameter two")
</script>
5. Return value from function
<script>
function average(var1,var2,var3)
{ave=(var1+var2+var3)/3;
("Output result");
return ave;
}
(average(34,56,78))
</script>
6. Calling functions through HTML link
<script>
function quote(){
("Output string")
}
</script>
<a href=javascript:quote()>Calling the function through HTML link</a>
<a href=javascript:("Output Character")> Calling the function through HTML link and writing javascript statements directly</a>
Chapter 6: Handling events
1. Check the mouse click
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.='there'>
</form>
2. Detect double-click
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.='You clicked the button' ondblclick=document.form1.='You double-clicked the button'>
</form>
3. Create a hover button
<img src= onmouseover=[0].src='' onmouseout= [0].src=''>
4. Detection button
<form name=form1>
<input type=text name=text1 value=hello onkeypress="if(=='100') document.form1.='You pressed the d key'">
</form>
5. Set focus
<form name=form1>
<input type=text name=text1 value=hello
onfous=document.form1.='This text box gets focus'
onblur=document.form1.='This text box loses focus'>
</form>
6. Detection drop-down menu selection
<form name=form1>
<select name=select1 size=4
onChange=document.form1.=document.form1.>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Wuhan">Wuhan</option>
<option value="Tianjin">Tianjin</option>
<option value="Dalian">Dalian</option>
</select>
<input tppe=text name=text1 value=hello>
</form>
7. Create web page loading and uninstall information
<body onload=document.form1.='Page loaded' onunload=alert('Goodbye, welcome to come again')>
<form name=form1>
<input type=text name=text1 value="Page is loading ...">
</form>
Chapter 7 Usage Objects
1. Understand objects\properties and methods
<body bgcolor="green">
<script>
("The page background color is:"+)
("The page foreground color is:"+)
</script>
2. Use web element objects
<script>
</script>
<form name=form1>
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
<input type=button value="Select text" onclick=document.form1.()>
<input type=button value="Show text" onclick=(document.form1.)>
</form>
3. Use child objects
<form name=form1>
<input type=text name=text1 value=hello>
</form>
<script>
document.form1.="gdfgfd"
</script>
<form name=form1>
<input type=radio name=radio1>Male
<input type=radio name=radio2>Female
</script>
<script>
document.form1.=true
</script>
4. Use predefined objects
<script>
str1="dgdfgdfgdfhf fixed method fixed method kung fu attack method"
(str1+"<br>")
str2=(5)
(str2+"<br>")
("Overall of the output circle:"+*(5.0,2))
</script>
5. Create a new object
<script>
today=new Date()
("Today is"+(()+1)+"month"+()+"day"+"<br>")
("Now is:"+())
</script>
.6. Reference the current object
<form name=form1>
<input type=text name=text1 value="dgdgdfgfd" onclick=()>
</script>
7. View object properties
<script>
for(prop in window)
{("window."+prop+"="+window[prop]+"<br>");}
for(prop2 in location)
{("location."+prop2+"="+location[prop]+"<br>");}
</script>
8. Use Array Objects
<script>
array=new Array(10)
array[0]="bark"
array[1]="apple"
array[2]="nebula"
array[3]="cookie"
array[4]="technology"
("The number of array elements is "++"<br>")
("Use join to combine the array and "+(" ")+"<br>")
("Array sort"+())
</script>
9. Use image object
<img src=**.gif alt="Picture Tips..." border=10>
<script>
("Image prompt is:"+[0].alt+"<br>")
("The image border size is:"+[0].broder)
</script>
10. Preload images
<script>
freddy=new Image()
=
</script>
<body onload=[0].src=>
,<img src="">
</body>
11. Change the image
<img src=><br>
<form name=form1>
<input type=button name=button1 value="Change image" onclickd=[0].src=>
</form>
12. Use link and anchor objects
<a name=anchor1>Anchor 1<br>
<a href=>Microsoft</a><br>
<a href=>sohu</a><br>
<a href=>sina</a><br>
<script>
("This page has a total of "++" links"+"<br>")
("This page has a total of "++" anchor points"+"<br>")
("The first link protocol is "+[0].protocol+"<br>")
("The first link path is "+[0].pathnamel+"<br>")
("The first link href is "+[0].hrefl+"<br>")
</script>
13. Change the link
<a href =>link</a>
<form name=form1>
<input type=button name=button1 value="Change link" onclick=[0].href=''>
</form>
14. Use history objects
<form name=form1>
<input type=button name=button1 value="Return back to 2 pages" onclick=(-2)>
</form>
Chapter 8: Use window
1. Display text on the browser's status bar
<body onload=="Welcome to my site">
<a href=>sohu</a>
</body>
2. Change the background color
<script>
="orange"
</script>
3. List background colors
<body bgColor =green>
<script>
("The current background color is:"+)
</script>
</body>
4. Change the text and link color
<script>
="orange"
="blue"
="red"
</script>
<h2>Look at the color of this text</h2>
<a href=>sohu</a>
</body>
5. Change the document title
<script>
name="Mouse"
="welcome to "+name+"'s House"
()
</script>
6. Show the modification date
<script>
("The last time this page is modified is"+)
</script>
7. View the URL of the current document
<script>
("The URL of this page:"+)
</script>
8. View the citation page
<script>
("The quotation page of this page is"+)
</script>
9. Open a new browser window
<script>
("*.htm","title","width=200,height=400,resizable=yes")
</script>
10. Close the remote window
:
<script>
("text")
</script>
<form name=form1>
<input type=button name=button1value="close" onclick=()>
</form>
<script>
("","romote","width=200,height=400,resizable=yes")
</script>
11. Print window
<script>
("text")
</script>
<form name=form1>
<input type=button value=print onclick=()>
</form>
12. Move the window
<form name=form1>
Horizontal direction <input type=text name=x value=20>
Vertical direction <input type=text name=y value=50>
<input type=button value="Move the window to..."onclick=(document.,document.)>
</form>
<form name=form1>
Horizontal direction <input type=text name=x value=20>
Vertical direction <input type=text name=y value=50>
<input type=button value="move window"onclick=(document.,document.)>
</form>
13. Change the window size
<form name=form1>
Horizontal direction <input type=text name=x value=200>
Vertical direction <input type=text name=y value=500>
<input type=button value="Change the window size to….."onclick=(document.,document.)>
</form>
<form name=form1>
Horizontal direction <input type=text name=x value=200>
Vertical direction <input type=text name=y value=500>
<input type=button value="change window size"onclick=(document.,document.)>
</form>
14. Notify users with warning dialog box
<script>
("welcome")
</script>
15. Use the prompt dialog box to accept input
<script>
name=("enter name","name")
(" Welcome:"+name+"Come here")
</script>
16. Use the confirmation dialog box to make decisions
<script>
like=("Do you think it's good?")
if(like==true)
("Thank you. I appreciate the compliment")
else
("I hope you will get your praise")
</script>
Chapter 9: Using Strings
1. Use string objects
<script>
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
(mystring)
(())
(())
</script>
2. Use substrings
<script>
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
(str1)
((0,13)+"<br>")
( (20,11)+"<br>")
</script>
3.Connection string
<script>
str1="may you find"
str2="peace,happiness and prosperity.<br>"
(str1+"<br>")
(str2)
((str2))
(str1+=str2)
</script>
4. Format string variables
<script>
str1="peace,happiness and prosperity.<br>"
(str1)
(())
(())
(())
(())
(())
((6))
((green))
</script>
5. Create anchors and links
<script>
str1="this is the bigginning of the page.<br>"
str2="….<br>"
str3="this is the end of the page .<br>"
str4="link to the start<br>"
str5="link to the end<br>"
(("start"))
for(i=0;i<10;i++)
(str2);
(("end"))
(("#start"))
(("#end"))
</script>
6. Determine the string length
<script>
str1="this is the bigginning of the page."
(str1+"<br>")
( "The length of the string is:"+)
("The string is all capitalized;"+())
("The string is all lowercase;"+())
</script>
7. Search within the string
<script>
str1="this is the end of the line.<br>"
(str1)
(The character end is "+("end") at the position of the string)
("The character dog is "+("dog"))
</script>
8. Positioning characters in strings
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
("the index for the second word ‘and' is"+("and",30))
("the last index of the word ‘and' is "+("and"))
</script>
9. Replace text in string
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
document .write(("and",","))
</script>
10. String separation
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
str1array=(" ")
(str1array[0]+"<br>")
(str1array[1]+"<br>")
(str1array[2]+"<br>")
(str1array[3]+"<br>")
</script>
Chapter 10 Date and Time of Use
1. Use Date object
<script>
cdate=new Date("august 2,1989 12:30:00")
(cdate)
</script>
2. Display local time and date
<script>
cdate=new Date()
("The current time is:"+()+"<br>")
("Date and time are:"+())
</script>
3. Obtain time and date values
<script>
cdate=new Date()
("Show the current week"+()+"<br>")
("Show the current month"+()+"<br>")
("Show the current date"+()+"<br>")
("Show the current year"+()+"<br>")
("Show the current hour"+()+"<br>")
("Show the current minute"+()+"<br>")
("Show the current second"+()+"<br>")
</script>
4. Set time and date values
<script language=javascript>
cdate=new Date("December 25,1984")
("Show date"+cdate+"<br>")
("Set Month"+(10)+"<br>")
("Set Date"+(23)+"<br>")
("Set Year"+(2000)+"<br>")
("Set hours"+(13)+"<br>");
("Set minutes"+(47)+"<br>");
("Set seconds"+(23)+"<br>");
("Show the date and time after setting"+cdate);
</script>
Chapter 11: Using Math Objects
1. Use Math objects
<script language=javascript>
</script>
<form name=form1>
The radius of the circle:<input type=text name=rad><br>
Area of a circle:<input type=text name=area><br>
<input type=button name=button1 value=calculate the area of the circle onclick=document.=document.*document.*>
</form>
2. Generate random numbers
<script>
array1=new Array(
"This is the first sentence",
"This is the second sentence",
"This is the third sentence",
"This is the 4th sentence",
"This is the 5th sentence",
"This is the 6th sentence")
RandomNo=(*())
("Random output a sentence "+"<br>"+array1[RandomNo])
</script>
3. Use square roots
<form name=form1>
value:<input type=text name=va1><br>
Square root <input type=text name=sqrt><br>
<input type=button name=button1 value=calculate the square root
onclick="document.=(document.form1.)">
</form>
4. Rounding of numbers
<form name=form1>
Enter <input type=text name=val><br>
Rounding result <input type=text name=round><br>
<input type=button name=button1 value=calculation result onclick=document.=(document.)>
</form>
5. Multiply operation
<form name=form1>
Base number <input type=text name=val><br>
Index <input type=text name=power><br>
Power<input type=text name=result><br>
<input type=button name=button1 value=calculation result onclick="document.= (document.,document.)">
</form>
6. Discover the minimum and maximum values
<form name=form1>
Number 1<input type=text name=val1><br>
Number 2<input type=text name=val2><br>
Minimum value <input type=text name=min><br>
Maximum value <input type=text name=max><br>
Number 1<input type=button value=calculation onclick="document.= (document.form1.,document.form1.);document.= (document.form1.,document.form1.)">
</form>
Chapter 12 Use Form
1. Use text boxes
<form name=form1>
<input type=text value="information ,please"name=text1>
</form>
<script>
("Form text1 type is: "+document.form1.+"<br>")
("Form text1 name is: "+document.form1.+"<br>")
("Form text1 value is: "+document.form1.+"<br>")
("Form text1 size is: "+document.form1.+"<br>")
</script>
<form name=form1>
<input type=text name=text1 value=click here
onfocus=document.form1.()>
</form>
2. Use the password box
<form name=form1>
<input type=password name=pw1 value=daylight>
</form>
<script>
("Type of form pw1:"+document.form1.+"<br>")
("The name of form pw1:"+document.form1.+"<br>")
("The value of form pw1:"+document.form1.+"<br>")
("Size of form pw1:"+document.form1.+"<br>")
</script>
3. Use hidden fields
<form name=form1>
<input type=hidden name=hid1 value=piece of eight>
</form>
<script>
("Type of form hid1:"+document.form1.+"<br>")
("The name of form hid1:"+document.form1.+"<br>")
("The value of form hid1:"+document.form1.+"<br>")
</script>
4. Use text area boxes
<form name=form1>
<textarea name=ta1>how many grains of sand are there in the sahara desert?</textarea>
</form>
<script>
("Type of form ta1:"+document.form1.+"<br>")
("The name of form ta1:"+document.form1.+"<br>")
("The value of form ta1:"+document.form1.+"<br>")
("The horizontal width of form ta1:"+document.form1.+"<br>")
("The vertical width of form ta1:"+document.+"<br>")
</script>
<form name=form1>
<textarea name=ta1 rows=4 onfocus="document.form1.()"> how many grains of sand are there in the sahara desert?</textarea>
</form>
5. Use buttons
<form name=form1>
<input type=button name=button1 value=standard button>
</form>
<script>
("Form button1 type:"+document.form1.+"<br>")
(The name of "form button1:"+document.form1.+"<br>")
("Form button1's value:"+document.form1.+"<br>")
</script>
<form name=form1>
<input type=text name=text1 size=45><br>
<input type=button name=button1 value=panic button onclick="document.form1.='sittle down,count to 10 and take a deep breath'">
</form>
6. Use the reset button
<form name=form1>
<input type=reset name=reset1 value="rest form">
</form>
<script>
("Form reset1 type:"+document.form1.+"<br>")
("Form reset1's name:"+document.form1.+"<br>")
("The value of form reset1:"+document.form1.+"<br>")
</script>
7. Use the Submit Button
<form name=form1>
<input type=submit name=submit1 value="submit form">
</form>
<script>
("Form submit1 type:"+document.form1.+"<br>")
("Form submit1's name:"+document.form1.+"<br>")
("The value of form submit1:"+document.form1.+"<br>")
</script>
8. Use the check button
<form name=form1>
<input type=checkbox name=cb1 >computer savvy?
</form>
<script>
("Type of form cb1:"+document.form1.+"<br>")
(Is form cb1 selected?:"+document.form1.+"<br>")
("The name of form cb1:"+document.form1.+"<br>")
</script>
9. Use radio buttons
<form name=form1>
<input type=radio name=radio1>male
<input type=radio name=radio1>female
</form>
<script>
("The first button is selected"+document.form1.radio1[0].checked+"<br>")
("The second button is selected"+document.form1.radio1[1].checked+"<br>")
("Button name"+ document.form1.radio1[0].name+"<br>")
("Number of buttons"+document.form1.)
</script>
10.Use the Selection List
<form name=form1>
<select name=select1 size=4>
<option name=option1 value=lon>london,England</option>
<option name=option2 value=dub>Dublin,Ireland</option>
</select>
</form>
<script>
("The name of this selection list"+document.form1.+"<br>")
("Length of this selection list"+document.form1.+"<br>")
("The index number currently selected in this selection list"+document.form1.+"<br>")
("Size of this selection list"+document.form1.+"<br>")
</script>
11. Verify the validity of the form
<script>
function validate(){
if(document.form1.!='1'||'2'||'3'||'4'){
alert("Please enter integers from 1 to 4")
}
}
</script>
<form name=form1>
Please enter integers from 1 to 4:
<input type=text name=text1 size=4 onchange=validate()>
</form>
12. Control the focus of the form
<form name=form1>
<input type=text name=text1 value=where is you focus?><br>
<input type=text name=text2 value=is there?><br>
<input type=text name=text3 value=or maybe here?><br>
<input type=button name=button1 value="text box #1" onclick=document.form1.()><br>
<input type=button name=button2 value="text box #2" onclick=document.form1.()><br>
<input type=button name=button3 value="text box #3" onclick=document.form1.()><br>
</form>
Chapter 13: Using the column
Chapter 14: Using navigator
1. Use navigator object
<script>
(Attributes of "navigator object"+"<br>")
("appcodename:"++"<br>")
("appname::"++"<br>")
("appversion:"++"<br>")
("platform:"++"<br>")
("userAgent:"++"<br>")
</script>
<script>
("navigator object method"+"<br>")
("javaEnabled():"+())
</script>
2. Check the user's browser
<script>
if(("Microsoft")!=-1){
("The user browser is Microsoft's IE browser"+"<br>")}
else if(("Netscape")!=-1){
("The user browser is netscape's netscape browser"+"<br>")}
if(("4.0")!=-1){
("you are using a version 4.0compatible browser")
}
else{
("this browser is not 4.0 compliant")}
</script>
3. Detect the user's operating system
<script>
if (("win32")!=-1){
("you are using a computer running windows 95 or highter")}
else{
("this computer is not running windows 95 or higher")}
</script>
4. Use location object
<script>
("location object attribute"+"<br>")
("hash"++"<br>")
("hostname"++"<br>")
("host"++"<br>")
("href"++"<br>")
("port"++"<br>")
("search"++"<br>")
</script>
Reload the web page
<form name=form1>
<input type=button name=button1 value=Reload this page onclick=>
</form>
5. Use cookies
<script>
finction makecookie(){
if(!){
name=prompt("Please enter your name");
="name="+name+";";}
}
</script>
<body onload=makecookie()>
<script>
function makecookie(){
if(!){
name=prompt("Please enter your name")
="name="+name+";";
namestart=("=");
nameend=(";");
("your name is:"+(namestart+1,nameend)+",br>")
}
}
</script>
Chapter 1 Introduction to JavaScript
1. Enter javascript statement in the address bar
Javascript:("Show text")
2. Embed javascript into HTML document
<script language=javascript>
="blue"
</script>
Chapter 2: Using variables and arrays
1. Declare variables
<script language=javascripe>
Var answer1,answer2,answer3,answer4;
answer1=9;
answer2=2.5
answer3="Milkey May"
answer4=true
</script>
2. Use integers
<script language=javascript>
var decimalNum,hexadecimalNum,octalNum
decimalNum=24
hexadecimalNum=0x24
octalNum=024
("Show decimal number: "+ decimalNum+"<br>")
("Show hexadecimal number: "+ hexadecimalNum +"<br>")
("Show octal number: "+ octalNum +"<br>")
</script>
3. Use floating point numbers
<script language=javascript>
var num1,num2,num3,num4
num1=1234567890000.0
num2=5.14e23
num3=0.0000123456
num4=6.0254e3-4
("Float number 1:"+num1+"<br>")
("Float 2:"+num2+"<br>")
("Float 3: "+num3+"<br>")
("Float 4:"+num4+"<br>")
</script>
4. Use boolean values
<script language=javascript>
var answer1,answer2
answer1=true
answer2=false
("Show Boolean 1: "+answer1+"<br>")
("Show Boolean 2: "+answer2+"<br>")
</script>
5. Use strings
<script language=javascript>
var str1,str2
str1="fdsgdg dsfdsf china"
str2="Wuhan Radio and Television University"
("Show string 1: "+str1+"<br>")
("Show string 2: "+str2+"<br>")
</script>
6. Determine the variable type
<script>
var answer1,answer2,answer3,answer4
answer1=9
answer2=2.5
answer3="milky may"
answer4=true
("Variable 1 type is: "+typeof answer1 +"<br>")
("Variable 2 type is: "+typeof answer2 +"<br>")
("Variable 3 type is: "+typeof answer3 +"<br>")
(The type of variable 4 is: "+typeof answer4 +"<br>")
</script>
7. Convert strings to numbers
<script>
var str1="31 days in january"
var int1=parseInt(str1)
(The data type of "str1 is: "+typeof str1+"<br>")
(The data type of "int1 is: "+typeof int1+"<br>")
</script>
8. Convert numbers to strings
<script>
var int1=256
var str1=""+int1
(The data type of "str1 is: "+typeof str1+"<br>")
(The data type of "int1 is: "+typeof int1+"<br>")
</script>
9. Declare an array
<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
("Array is: "+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])
</script>
10. Determine the number of array elements
<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
("Array is: "+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")
("The number of elements in the array is"+)
</script>
11. Convert array to string
<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=()
str2=(" ")
(str1+"<br>")
(str2)
</script>
12. Sort arrays
<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=()
(str1+"<br>")
</script>
Chapter 3: Creating Expressions
1. Use arithmetic operators
<script>
var1=12
var2=10
varadd=var1+var2
varsub=var1-var2
varmult=var1*var2
vardiv=var1/var2
varmod=var1%var2
("Data 1 is: "+var1+"<br>")
("Data 2 is: "+var2+"<br>")
("Data addition is: "+varadd+"<br>")
("Data subtraction is: "+varsub+"<br>")
("Data multiplication is: "+varmult+"<br>")
("Data division is: "+vardiv+"<br>")
("The remainder of data phase division is: "+varmod+"<br>")
</script>
2. Incremental variables and decreasing variables
<script>
days=1
("Output variable"+days+"<br>")
days++
("After incrementing the variable becomes: "+days)
</script>
3. Create comparison expressions
<script>
daysofmonth=28
if(daysofmonth==28)
month="february"
("days of month:"+daysofmonth+"<br>")
("month:"+month)
</script>
4. Create logical expressions
<script>
dayofmonth=28
if(dayofmonth==28 || dayofmonth==29)
month="february"
("days of month:"+dayofmonth+"<br>")
("month:"+month)
</script>
5. Use conditional operators
<script language="javascript">
stomach="hungry";
time="5:00";
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";
("Output result"+eat);
</script>
6. Identify numbers
<script>
var1=24;
(isNaN(var1))?("Variable var1"+var1+" is not a number"):("Variable var1"+var1+" is a number")
</script>
Chapter 4 Controlling the procedure
1. Use IF –Else statement
<script>
month="december"
date=25
if(month=="december" && date==25)
("Today is Christmas, the store is closed")
else
("Welcome, you come to the store to shop")
</script>
2. Use for loop
<script>
for (count=1;count<=10;count++)
("Output"+count+" sentence "+"<br>")
</script>
3. Use while loop
<script>
count=1
while(count<=15){
("Output"+count+" sentence " +"<br>")
count++}
</script>
4. Interrupt the loop
<script>
count=1
while(count<=15){
count++
if(count==8)
break;
("Output"+count+" sentence "+"<br>")}
</script>
5. Continue the cycle
<script>
count=1
while(count<=15){
count++
if(count==8)
continue;
("Output"+count+" sentence "+"<br>")}
</script>
6. Use javascript timer
<script>
function rabbit()
{("Output Statement")
}
</script>
<body onload=(rabbit(),5000)>
7. Set a certain interval
<script>
("document.form1.=document.form1.",3000)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
</form>
8. Clear timeout and interval
<script>
stop=("document.form1.=document.form1.",300)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
<input type=button name=button1 value=" Clear timeout and interval" onclick=clearInterval(stop)>
</form>
Chapter 5: Using Functions
1. Declare the function
<script>
function quote()
{ ("Output Statement")
}
</script>
2. Calling functions
<script>
function quote()
{ ("Output Statement")
}
quote()
</script>
3. Understand global and local variables
Any variable declared without the var keyword is a global variable, and any variable declared outside the function is a global variable
4. Pass parameters to functions
<script>
function f(item)
{("Output Parameter"+item+"<br>")
}
f("fgdfgd")
f("parameter two")
</script>
5. Return value from function
<script>
function average(var1,var2,var3)
{ave=(var1+var2+var3)/3;
("Output result");
return ave;
}
(average(34,56,78))
</script>
6. Calling functions through HTML link
<script>
function quote(){
("Output string")
}
</script>
<a href=javascript:quote()>Calling the function through HTML link</a>
<a href=javascript:("Output Character")> Calling the function through HTML link and writing javascript statements directly</a>
Chapter 6: Handling events
1. Check the mouse click
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.='there'>
</form>
2. Detect double-click
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.='You clicked the button' ondblclick=document.form1.='You double-clicked the button'>
</form>
3. Create a hover button
<img src= onmouseover=[0].src='' onmouseout= [0].src=''>
4. Detection button
<form name=form1>
<input type=text name=text1 value=hello onkeypress="if(=='100') document.form1.='You pressed the d key'">
</form>
5. Set focus
<form name=form1>
<input type=text name=text1 value=hello
onfous=document.form1.='This text box gets focus'
onblur=document.form1.='This text box loses focus'>
</form>
6. Detection drop-down menu selection
<form name=form1>
<select name=select1 size=4
onChange=document.form1.=document.form1.>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Wuhan">Wuhan</option>
<option value="Tianjin">Tianjin</option>
<option value="Dalian">Dalian</option>
</select>
<input tppe=text name=text1 value=hello>
</form>
7. Create web page loading and uninstall information
<body onload=document.form1.='Page loaded' onunload=alert('Goodbye, welcome to come again')>
<form name=form1>
<input type=text name=text1 value="Page is loading ...">
</form>
Chapter 7 Usage Objects
1. Understand objects\properties and methods
<body bgcolor="green">
<script>
("The page background color is:"+)
("The page foreground color is:"+)
</script>
2. Use web element objects
<script>
</script>
<form name=form1>
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
<input type=button value="Select text" onclick=document.form1.()>
<input type=button value="Show text" onclick=(document.form1.)>
</form>
3. Use child objects
<form name=form1>
<input type=text name=text1 value=hello>
</form>
<script>
document.form1.="gdfgfd"
</script>
<form name=form1>
<input type=radio name=radio1>Male
<input type=radio name=radio2>Female
</script>
<script>
document.form1.=true
</script>
4. Use predefined objects
<script>
str1="dgdfgdfgdfhf fixed method fixed method kung fu attack method"
(str1+"<br>")
str2=(5)
(str2+"<br>")
("Overall of the output circle:"+*(5.0,2))
</script>
5. Create a new object
<script>
today=new Date()
("Today is"+(()+1)+"month"+()+"day"+"<br>")
("Now is:"+())
</script>
.6. Reference the current object
<form name=form1>
<input type=text name=text1 value="dgdgdfgfd" onclick=()>
</script>
7. View object properties
<script>
for(prop in window)
{("window."+prop+"="+window[prop]+"<br>");}
for(prop2 in location)
{("location."+prop2+"="+location[prop]+"<br>");}
</script>
8. Use Array Objects
<script>
array=new Array(10)
array[0]="bark"
array[1]="apple"
array[2]="nebula"
array[3]="cookie"
array[4]="technology"
("The number of array elements is "++"<br>")
("Use join to combine the array and "+(" ")+"<br>")
("Array sort"+())
</script>
9. Use image object
<img src=**.gif alt="Picture Tips..." border=10>
<script>
("Image prompt is:"+[0].alt+"<br>")
("The image border size is:"+[0].broder)
</script>
10. Preload images
<script>
freddy=new Image()
=
</script>
<body onload=[0].src=>
,<img src="">
</body>
11. Change the image
<img src=><br>
<form name=form1>
<input type=button name=button1 value="Change image" onclickd=[0].src=>
</form>
12. Use link and anchor objects
<a name=anchor1>Anchor 1<br>
<a href=>Microsoft</a><br>
<a href=>sohu</a><br>
<a href=>sina</a><br>
<script>
("This page has a total of "++" links"+"<br>")
("This page has a total of "++" anchor points"+"<br>")
("The first link protocol is "+[0].protocol+"<br>")
("The first link path is "+[0].pathnamel+"<br>")
("The first link href is "+[0].hrefl+"<br>")
</script>
13. Change the link
<a href =>link</a>
<form name=form1>
<input type=button name=button1 value="Change link" onclick=[0].href=''>
</form>
14. Use history objects
<form name=form1>
<input type=button name=button1 value="Return back to 2 pages" onclick=(-2)>
</form>
Chapter 8: Use window
1. Display text on the browser's status bar
<body onload=="Welcome to my site">
<a href=>sohu</a>
</body>
2. Change the background color
<script>
="orange"
</script>
3. List background colors
<body bgColor =green>
<script>
("The current background color is:"+)
</script>
</body>
4. Change the text and link color
<script>
="orange"
="blue"
="red"
</script>
<h2>Look at the color of this text</h2>
<a href=>sohu</a>
</body>
5. Change the document title
<script>
name="Mouse"
="welcome to "+name+"'s House"
()
</script>
6. Show the modification date
<script>
("The last time this page is modified is"+)
</script>
7. View the URL of the current document
<script>
("The URL of this page:"+)
</script>
8. View the citation page
<script>
("The quotation page of this page is"+)
</script>
9. Open a new browser window
<script>
("*.htm","title","width=200,height=400,resizable=yes")
</script>
10. Close the remote window
:
<script>
("text")
</script>
<form name=form1>
<input type=button name=button1value="close" onclick=()>
</form>
<script>
("","romote","width=200,height=400,resizable=yes")
</script>
11. Print window
<script>
("text")
</script>
<form name=form1>
<input type=button value=print onclick=()>
</form>
12. Move the window
<form name=form1>
Horizontal direction <input type=text name=x value=20>
Vertical direction <input type=text name=y value=50>
<input type=button value="Move the window to..."onclick=(document.,document.)>
</form>
<form name=form1>
Horizontal direction <input type=text name=x value=20>
Vertical direction <input type=text name=y value=50>
<input type=button value="move window"onclick=(document.,document.)>
</form>
13. Change the window size
<form name=form1>
Horizontal direction <input type=text name=x value=200>
Vertical direction <input type=text name=y value=500>
<input type=button value="Change the window size to….."onclick=(document.,document.)>
</form>
<form name=form1>
Horizontal direction <input type=text name=x value=200>
Vertical direction <input type=text name=y value=500>
<input type=button value="change window size"onclick=(document.,document.)>
</form>
14. Notify users with warning dialog box
<script>
("welcome")
</script>
15. Use the prompt dialog box to accept input
<script>
name=("enter name","name")
(" Welcome:"+name+"Come here")
</script>
16. Use the confirmation dialog box to make decisions
<script>
like=("Do you think it's good?")
if(like==true)
("Thank you. I appreciate the compliment")
else
("I hope you will get your praise")
</script>
Chapter 9: Using Strings
1. Use string objects
<script>
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
(mystring)
(())
(())
</script>
2. Use substrings
<script>
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
(str1)
((0,13)+"<br>")
( (20,11)+"<br>")
</script>
3.Connection string
<script>
str1="may you find"
str2="peace,happiness and prosperity.<br>"
(str1+"<br>")
(str2)
((str2))
(str1+=str2)
</script>
4. Format string variables
<script>
str1="peace,happiness and prosperity.<br>"
(str1)
(())
(())
(())
(())
(())
((6))
((green))
</script>
5. Create anchors and links
<script>
str1="this is the bigginning of the page.<br>"
str2="….<br>"
str3="this is the end of the page .<br>"
str4="link to the start<br>"
str5="link to the end<br>"
(("start"))
for(i=0;i<10;i++)
(str2);
(("end"))
(("#start"))
(("#end"))
</script>
6. Determine the string length
<script>
str1="this is the bigginning of the page."
(str1+"<br>")
( "The length of the string is:"+)
("The string is all capitalized;"+())
("The string is all lowercase;"+())
</script>
7. Search within the string
<script>
str1="this is the end of the line.<br>"
(str1)
(The character end is "+("end") at the position of the string)
("The character dog is "+("dog"))
</script>
8. Positioning characters in strings
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
("the index for the second word ‘and' is"+("and",30))
("the last index of the word ‘and' is "+("and"))
</script>
9. Replace text in string
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
document .write(("and",","))
</script>
10. String separation
<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
(str1)
str1array=(" ")
(str1array[0]+"<br>")
(str1array[1]+"<br>")
(str1array[2]+"<br>")
(str1array[3]+"<br>")
</script>
Chapter 10 Date and Time of Use
1. Use Date object
<script>
cdate=new Date("august 2,1989 12:30:00")
(cdate)
</script>
2. Display local time and date
<script>
cdate=new Date()
("The current time is:"+()+"<br>")
("Date and time are:"+())
</script>
3. Obtain time and date values
<script>
cdate=new Date()
("Show the current week"+()+"<br>")
("Show the current month"+()+"<br>")
("Show the current date"+()+"<br>")
("Show the current year"+()+"<br>")
("Show the current hour"+()+"<br>")
("Show the current minute"+()+"<br>")
("Show the current second"+()+"<br>")
</script>
4. Set time and date values
<script language=javascript>
cdate=new Date("December 25,1984")
("Show date"+cdate+"<br>")
("Set Month"+(10)+"<br>")
("Set Date"+(23)+"<br>")
("Set Year"+(2000)+"<br>")
("Set hours"+(13)+"<br>");
("Set minutes"+(47)+"<br>");
("Set seconds"+(23)+"<br>");
("Show the date and time after setting"+cdate);
</script>
Chapter 11: Using Math Objects
1. Use Math objects
<script language=javascript>
</script>
<form name=form1>
The radius of the circle:<input type=text name=rad><br>
Area of a circle:<input type=text name=area><br>
<input type=button name=button1 value=calculate the area of the circle onclick=document.=document.*document.*>
</form>
2. Generate random numbers
<script>
array1=new Array(
"This is the first sentence",
"This is the second sentence",
"This is the third sentence",
"This is the 4th sentence",
"This is the 5th sentence",
"This is the 6th sentence")
RandomNo=(*())
("Random output a sentence "+"<br>"+array1[RandomNo])
</script>
3. Use square roots
<form name=form1>
value:<input type=text name=va1><br>
Square root <input type=text name=sqrt><br>
<input type=button name=button1 value=calculate the square root
onclick="document.=(document.form1.)">
</form>
4. Rounding of numbers
<form name=form1>
Enter <input type=text name=val><br>
Rounding result <input type=text name=round><br>
<input type=button name=button1 value=calculation result onclick=document.=(document.)>
</form>
5. Multiply operation
<form name=form1>
Base number <input type=text name=val><br>
Index <input type=text name=power><br>
Power<input type=text name=result><br>
<input type=button name=button1 value=calculation result onclick="document.= (document.,document.)">
</form>
6. Discover the minimum and maximum values
<form name=form1>
Number 1<input type=text name=val1><br>
Number 2<input type=text name=val2><br>
Minimum value <input type=text name=min><br>
Maximum value <input type=text name=max><br>
Number 1<input type=button value=calculation onclick="document.= (document.form1.,document.form1.);document.= (document.form1.,document.form1.)">
</form>
Chapter 12 Use Form
1. Use text boxes
<form name=form1>
<input type=text value="information ,please"name=text1>
</form>
<script>
("Form text1 type is: "+document.form1.+"<br>")
("Form text1 name is: "+document.form1.+"<br>")
("Form text1 value is: "+document.form1.+"<br>")
("Form text1 size is: "+document.form1.+"<br>")
</script>
<form name=form1>
<input type=text name=text1 value=click here
onfocus=document.form1.()>
</form>
2. Use the password box
<form name=form1>
<input type=password name=pw1 value=daylight>
</form>
<script>
("Type of form pw1:"+document.form1.+"<br>")
("The name of form pw1:"+document.form1.+"<br>")
("The value of form pw1:"+document.form1.+"<br>")
("Size of form pw1:"+document.form1.+"<br>")
</script>
3. Use hidden fields
<form name=form1>
<input type=hidden name=hid1 value=piece of eight>
</form>
<script>
("Type of form hid1:"+document.form1.+"<br>")
("The name of form hid1:"+document.form1.+"<br>")
("The value of form hid1:"+document.form1.+"<br>")
</script>
4. Use text area boxes
<form name=form1>
<textarea name=ta1>how many grains of sand are there in the sahara desert?</textarea>
</form>
<script>
("Type of form ta1:"+document.form1.+"<br>")
("The name of form ta1:"+document.form1.+"<br>")
("The value of form ta1:"+document.form1.+"<br>")
("The horizontal width of form ta1:"+document.form1.+"<br>")
("The vertical width of form ta1:"+document.+"<br>")
</script>
<form name=form1>
<textarea name=ta1 rows=4 onfocus="document.form1.()"> how many grains of sand are there in the sahara desert?</textarea>
</form>
5. Use buttons
<form name=form1>
<input type=button name=button1 value=standard button>
</form>
<script>
("Form button1 type:"+document.form1.+"<br>")
(The name of "form button1:"+document.form1.+"<br>")
("Form button1's value:"+document.form1.+"<br>")
</script>
<form name=form1>
<input type=text name=text1 size=45><br>
<input type=button name=button1 value=panic button onclick="document.form1.='sittle down,count to 10 and take a deep breath'">
</form>
6. Use the reset button
<form name=form1>
<input type=reset name=reset1 value="rest form">
</form>
<script>
("Form reset1 type:"+document.form1.+"<br>")
("Form reset1's name:"+document.form1.+"<br>")
("The value of form reset1:"+document.form1.+"<br>")
</script>
7. Use the Submit Button
<form name=form1>
<input type=submit name=submit1 value="submit form">
</form>
<script>
("Form submit1 type:"+document.form1.+"<br>")
("Form submit1's name:"+document.form1.+"<br>")
("The value of form submit1:"+document.form1.+"<br>")
</script>
8. Use the check button
<form name=form1>
<input type=checkbox name=cb1 >computer savvy?
</form>
<script>
("Type of form cb1:"+document.form1.+"<br>")
(Is form cb1 selected?:"+document.form1.+"<br>")
("The name of form cb1:"+document.form1.+"<br>")
</script>
9. Use radio buttons
<form name=form1>
<input type=radio name=radio1>male
<input type=radio name=radio1>female
</form>
<script>
("The first button is selected"+document.form1.radio1[0].checked+"<br>")
("The second button is selected"+document.form1.radio1[1].checked+"<br>")
("Button name"+ document.form1.radio1[0].name+"<br>")
("Number of buttons"+document.form1.)
</script>
10.Use the Selection List
<form name=form1>
<select name=select1 size=4>
<option name=option1 value=lon>london,England</option>
<option name=option2 value=dub>Dublin,Ireland</option>
</select>
</form>
<script>
("The name of this selection list"+document.form1.+"<br>")
("Length of this selection list"+document.form1.+"<br>")
("The index number currently selected in this selection list"+document.form1.+"<br>")
("Size of this selection list"+document.form1.+"<br>")
</script>
11. Verify the validity of the form
<script>
function validate(){
if(document.form1.!='1'||'2'||'3'||'4'){
alert("Please enter integers from 1 to 4")
}
}
</script>
<form name=form1>
Please enter integers from 1 to 4:
<input type=text name=text1 size=4 onchange=validate()>
</form>
12. Control the focus of the form
<form name=form1>
<input type=text name=text1 value=where is you focus?><br>
<input type=text name=text2 value=is there?><br>
<input type=text name=text3 value=or maybe here?><br>
<input type=button name=button1 value="text box #1" onclick=document.form1.()><br>
<input type=button name=button2 value="text box #2" onclick=document.form1.()><br>
<input type=button name=button3 value="text box #3" onclick=document.form1.()><br>
</form>
Chapter 13: Using the column
Chapter 14: Using navigator
1. Use navigator object
<script>
(Attributes of "navigator object"+"<br>")
("appcodename:"++"<br>")
("appname::"++"<br>")
("appversion:"++"<br>")
("platform:"++"<br>")
("userAgent:"++"<br>")
</script>
<script>
("navigator object method"+"<br>")
("javaEnabled():"+())
</script>
2. Check the user's browser
<script>
if(("Microsoft")!=-1){
("The user browser is Microsoft's IE browser"+"<br>")}
else if(("Netscape")!=-1){
("The user browser is netscape's netscape browser"+"<br>")}
if(("4.0")!=-1){
("you are using a version 4.0compatible browser")
}
else{
("this browser is not 4.0 compliant")}
</script>
3. Detect the user's operating system
<script>
if (("win32")!=-1){
("you are using a computer running windows 95 or highter")}
else{
("this computer is not running windows 95 or higher")}
</script>
4. Use location object
<script>
("location object attribute"+"<br>")
("hash"++"<br>")
("hostname"++"<br>")
("host"++"<br>")
("href"++"<br>")
("port"++"<br>")
("search"++"<br>")
</script>
Reload the web page
<form name=form1>
<input type=button name=button1 value=Reload this page onclick=>
</form>
5. Use cookies
<script>
finction makecookie(){
if(!){
name=prompt("Please enter your name");
="name="+name+";";}
}
</script>
<body onload=makecookie()>
<script>
function makecookie(){
if(!){
name=prompt("Please enter your name")
="name="+name+";";
namestart=("=");
nameend=(";");
("your name is:"+(namestart+1,nameend)+",br>")
}
}
</script>