JavaScripting
生成文本
如何在页面中写文本
<script type="text/javascript">
document.write("Hello World!")
</script>
生成普通文本和标签
如何使用 JavaScript 在页面中写入普通文本和标签。
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
当页面载入时,会执行位于 body 部分的 JavaScript。
当被调用时,位于 head 部分的 JavaScript 才会被执行。
head 部分 :调用函数前,脚本已经载入
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>
<body onload="message()"> >>>>>>>>注意message的书写
</body>
body 部分
<body>
<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>
</body>
外部 JavaScript
<body>
<scripr src="../js/example_externaljs.js" tppabs="http://www.w3school.com.cn/js/example_externaljs.js">
</script>
<p>
实际的脚本位于名为 "xxx.js" 的外部脚本中。
</p>
</body>
使用外部 JavaScript
有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本
为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。
注意:外部文件不能包含 <script> 标签。
然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件
提示:您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。
声明(创建) JavaScript 变量
通过 var 语句来声明 JavaScript 变量:
<script type="text/javascript">
var firstname;
firstname="George"; 在为变量赋文本值时,请为该值加引号。
document.write(firstname);
document.write("<br />"); <br/>要写在括号里面,加引号
firstname="John";
document.write(firstname);
重新声明 JavaScript 变量
如果您再次声明了 JavaScript 变量,该变量也不会丢失其原始值。
var x=5;
var x;
在以上语句执行后,变量 x 的值仍然是 5。在重新声明该变量时,x 的值不会被重置或清除。
If 语句
如何编写一个 If 语句
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>早安</b>")
}
</script>
如果浏览器时间小于 10,那么会向您问“早安”。
随机链接
本例演示一个随机的链接,当您单击这个链接时,会打开某个随机的网站。
<script type="text/javascript">
var r=Math.random()
if (r>0.5)
{
document.write("<a href='../index.htm'/*tpa=http://www.w3school.com.cn/*/>学习 Web 开发!</a>")
}
else
{
document.write("<a href='http://www.microsoft.com/'>访问微软!</a>")
}
</script>
Switch 语句
如何编写一个 Switch 语句。
<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>")
}
警告框
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框!!")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
###注意括号。
</body>
确认框 >>>脚本部分
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!"); >>>>confirm()的用法
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
提示框
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates") >>>>记住prompt的作用
if (name!=null && name!="") >>>>>>相当于一个对话框
{
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
带有参数的函数 1
如何向函数传递变量,以及如何在函数中使用该变量。
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
<body>
<form>
<input type="button" onclick="myfunction('您好!')" value="调用函数">
</form>
带有参数的函数 2
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
<form>
<input type="button"
onclick="myfunction('早安!')"
value="在早晨">
<input type="button"
onclick="myfunction('晚安!')"
value="在夜晚">
</form>
返回值的函数
如何从函数返回值。
<script type="text/javascript">
function myFunction()
{
return ("您好,祝您愉快!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction()) >>>返回值
</script>
For 循环
如何编写 loop 循环来按照指定的次数执行相同的代码。
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("数字是 " + i)
document.write("<br />")
}
</script>
</body>
循环产生 HTML 标题
如何使用Loop循环来产生不同的HTML标题
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">这是标题 " + i)
document.write("</h" + i + ">")
}
</script>
Do while 循环
利用 do...while 循环在指定条件为 true 时来循环执行代码。在即使条件为 false 时,这种循环也会至少执行一次。这是因为在条件被验证前,这个语句就会执行。
<script type="text/javascript">
i = 0
do
{
document.write("数字是 " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
break 语句
使用 break 语句来终止循环。
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break} >>>>注意
document.write("数字是 " + i)
document.write("<br />")
}
</script>
For...In 声明
如何使用 For...In 声明来遍历数组内的元素
<script type="text/javascript">
var x
var mycars = new Array() 》》》事件
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
>>>>记住格式
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
try...catch 语句
如何编写 try...catch 语句。
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="错误描述:" + err.description + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
}
}
</script>
带有确认框的 try...catch 语句
另一个编写 try...catch 语句的例子。
<script type="text/javascript">
var txt=""
function message()
{
try
{
adddlert("Welcome guest!")
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页,\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt)) 》》》》注意
document.location.href="../index.html"/*tpa=http://www.w3school.com.cn/index.html*/
}
}
}
</script>
Throw 声明
throw 声明的作用是创建 exception(异常)。你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的。
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
}
catch(er)
{
if(er=="Err1")
alert("Error! The value is too high") >>>>>注意括号
if(er == "Err2")
alert("Error! The value is too low")
}
</script>