实例：
1，生成文本。
<html>
<body>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
document.write("Hello World!")
</script>
</body>
</html>
</html>
2，生成普通文本和标签。
<html>
<body>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
</html>
3，head部分。
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>
<body onload="message()">
</body>
</html>
</html>
4，body部分。
<html>
<head>
</head>
<head>
</head>
<body>
<script type="text/javascript">
document.write("This message is written when the page loads")
</script>
document.write("This message is written when the page loads")
</script>
</body>
</html>
</html>
5，外部脚本。
<html>
<head>
</head>
<body>
<head>
</head>
<body>
<script src="/www.w3school.com.cn/js/example_externaljs.js">
</script>
</script>
<p>
The actual script is in an external script file called "xxx.js".
</p>
The actual script is in an external script file called "xxx.js".
</p>
</body>
</html>
</html>
6，变量。
<html>
<body>
<body>
<script type="text/javascript">
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
var name = "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>
<p>Then the variable is displayed one more time, only this time as a heading.</p>
</body>
</html>
</html>
7，if声明。
<html>
<body>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
</script>
{
document.write("<b>Good morning</b>")
}
</script>
<p>
This example demonstrates the If statement.
</p>
This example demonstrates the If statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
</p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
</p>
</body>
</html>
</html>
8，if...else声明。
<html>
<body>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
<p>
This example demonstrates the If...Else statement.
</p>
This example demonstrates the If...Else statement.
</p>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
</body>
</html>
</html>
9，if...else if...else声明。
<html>
<body>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
<p>
This example demonstrates the if..else if...else statement.
</p>
This example demonstrates the if..else if...else statement.
</p>
</body>
</html>
</html>
10，随机链接。
<html>
<body>
<body>
<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='../../index.html'>Learn Web Development!</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>Visit Microsoft!</a>")
}
</script>
var r=Math.random()
if (r>0.5)
{
document.write("<a href='../../index.html'>Learn Web Development!</a>")
}
else
{
document.write("<a href='http://www.microsoft.com'>Visit Microsoft!</a>")
}
</script>
</body>
</html>
</html>
11，Switch声明。
<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>")
break
case 6:
document.write("<b>Super Saturday</b>")
break
case 0:
document.write("<b>Sleepy Sunday</b>")
break
default:
document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write("<b>Finally Friday</b>")
break
case 6:
document.write("<b>Super Saturday</b>")
break
case 0:
document.write("<b>Sleepy Sunday</b>")
break
default:
document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>
<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>
</body>
</html>
</html>
12，警告框。
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html><html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
</html><html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html>
</html>
13，带有折行的警告框。
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<input type="button" value="Display alert box" />
</body>
</html>
</html>
14，确认框。
<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
</head>
<body>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
</head>
<body>
<input type="button" value="Display a confirm box" />
</body>
</html>
</html>
15，提示框。
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter")
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?")
}
}
</script>
</head>
<body>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","Harry Potter")
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?")
}
}
</script>
</head>
<body>
<input type="button" value="Display a prompt box" />
</body>
</html>
</html>
16，函数。
<html>
<head>
<head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<body>
<form>
<input type="button"
value="Call function">
</form>
<input type="button"
value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will alert a message.</p>
</body>
</html>
</html>
17，带有参数的函数。
<html>
<head>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<body>
<form>
<input type="button"
onclick="myfunction('Hello')"
value="Call function">
</form>
<input type="button"
onclick="myfunction('Hello')"
value="Call function">
</form>
<p>By pressing the button, a function with an argument will be called. The function will alert
this argument.</p>
this argument.</p>
</body>
</html>
</html>
18，带有参数的函数2。
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button"
Morning!')"
value="In the Morning">
<form>
<input type="button"
Morning!')"
value="In the Morning">
<input type="button"
Evening!')"
value="In the Evening">
</form>
Evening!')"
value="In the Evening">
</form>
<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
</body>
</html>
</html>
19，返回值的函数。
<html>
<head>
<head>
<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
document.write(myFunction())
</script>
<p>The script in the body section calls a function.</p>
<p>The function returns a text.</p>
</body>
</html>
</html>
20，带有参数并返回值的函数。
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
<p>The script in the body section calls a function with two parameters (4 and 3).</p>
<p>The function will return the product of these two parameters.</p>
</body>
</html>
<script type="text/javascript">
document.write(product(4,3))
</script>
<p>The script in the body section calls a function with two parameters (4 and 3).</p>
<p>The function will return the product of these two parameters.</p>
</body>
</html>
21，For循环。
<html>
<body>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
</html>
22，循环产生HTML标签
<html>
<body>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
</html>
23，While循环。
<html>
<body>
<body>
<script type="text/javascript">
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>
i = 0
while (i <= 5)
{
document.write("The number is " + i)
document.write("<br>")
i++
}
</script>
<p>Explanation:</p>
<p><b>i</b> is equal to 0.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html>
</html>
24，Do While循环。
<html>
<body>
<body>
<script type="text/javascript">
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
i = 0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
<p>Explanation:</p>
<p><b>i</b> equal to 0.</p>
<p>The loop will run</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body>
</html>
25，break声明。
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation: The loop will break when i=3.</p>
</body>
</html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Explanation: The loop will break when i=3.</p>
</body>
</html>
本文转自 王祖康 51CTO博客，原文链接：http://blog.51cto.com/wzk89/390780
，如需转载请自行联系原作者
