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>