一起来进行javascript全面系统再学习(正在学习，不断更新中。。。)，（1）javascript基础

来源：互联网发布：firefox ubuntu 编辑：程序博客网时间：2024/05/21 09:33

提示：大多数都是http://www.w3school.com.cn/网站里面的东西，想学的也去学吧。极其方便。

1，helloworld

<html><body><script type="text/javascript">document.write("Hello World!")</script></body></html>

2,当页面载入时，会执行位于 body 部分的 JavaScript。当被调用时，位于 head 部分的 JavaScript 才会被执行。

（1）调用之前已经载入了，当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。结果是：调用事件。

<html><head><script type="text/javascript">function message(){alert("该提示框是通过 onload 事件调用的。")}</script></head><body onload="message()"></body></html>

（2）页面加载之后运行，在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。

<html><head></head><body><script type="text/javascript">document.write("该消息在页面加载时输出。")</script></body></html>

（3）如何访问外部脚本。然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了。

<html><head></head><body><script src="/js/example_externaljs.js"></script><p>实际的脚本位于名为 "xxx.js" 的外部脚本中。</p></body></html>

3，；的问题，每行结束建议加上；，而且通过使用分号，可以在一行中写多条语句。

4，注释：// 这行代码输出标题： /* */

5，变量：变量对大小写敏感（y 和 Y 是两个不同的变量），变量必须以字母或下划线开始。

（1）结果是：变量的改变；

<html><body><script type="text/javascript">var firstname;firstname="George";document.write(firstname);document.write("<br />");firstname="John";document.write(firstname);</script><p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p></body></html>

（2）注意变量加上双引号

var x=5;var carname="Volvo";
6，运算符：加减乘除，累加，累减，求余数等；字符串和数字进行加法运算都变成了字符串。

7，比较运算符，===,==,!==,<=等等；

8，if (age<18) document.write("Too young");判断变量的值；

9，逻辑运算符：&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true

10，条件运算符：JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。variablename=(condition)?value1:value2

结果是：如果判断是什么什么身份，可以对应的什么回应。

<htm><head></head><body><script type="text/javascript">var visitor="PRES"alert(greeting=(visitor=="PRES")?"Dear President ":"Dear ");</script></body></htm>

11，javascript的if else ；

（1）结果是：如果浏览器发现你的时间是小于20的，那么报早安；根据自带的date函数，可以搞定“早晚安”的事情！

<html><body><script type="text/javascript">var d = new Date() //如果未向 Date 对象传递参数，它将被初始化为当前时间 (UTC)。在能够使用该对象前必须为其赋值。/*   var d, s = "Today's date is: ";           // 声明变量。   d = new Date();                           // 创建 Date 对象。   s += (d.getMonth() + 1) + "/";            // 获取月份。   s += d.getDate() + "/";                   // 获取日。   s += d.getYear();                         // 获取年份。   //return(s);                                // 返回日期。alert(s);*/var time = d.getHours()if (time < 20) {document.write("<b>早安</b>")}</script><p>本例演示 If 语句。</p><p>如果浏览器时间小于 20，那么会向您问“早安”。</p></body></html>

（2）结果是：随即的选择出现一个网站，web版本抽奖程序貌似可以这么做出来。

<html><body><script type="text/javascript">var r=Math.random()if (r>0.5) {document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发！</a>")}else{document.write("<a href='http://www.microsoft.com'>访问微软！</a>")}</script></body></html>精简版抽奖程序：<html><head></head><body><script type="text/javascript">//100个电话号码var r=100*Math.random();//0-2,0-100的任意的数字，包括0，但是不包括100a=Math.floor(r);//0-99for(i=0;i<100;i++){ if(i==a){ document.write("tom"+i+"获奖了！") }}</script></body></html>

稍微复杂版本抽奖程序：略；可以向我发信息索要，基于浏览器，很方便，有浏览器就能跑，还可以控制谁谁得奖，还可以分几等奖。包含js以及css等。

(3)switch用法：

<html><body><script type="text/javascript">var d = new Date()theDay=d.getDay()switch (theDay){case 5:  document.write("<b>Finally Friday</b>")  breakcase 6:  document.write("<b>Super Saturday</b>")  breakcase 0:  document.write("<b>Sleepy Sunday</b>")  breakdefault:  document.write("<b>I'm really looking forward to this weekend!</b>")}</script></body></html>

结果是判断周六周末以及周五。

12， 可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

(1)alert:

<html><head><script type="text/javascript">function disp_alert(){alert("我是警告框！！")alert("再次向您问好！在这里，我们向您演示" + '\n' + "如何向警告框添加折行。")}</script></head><body><input type="button" onclick="disp_alert()" value="显示警告框" /></body></html>

(2)确认框：

使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为true 或false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。

<html><head><script type="text/javascript">var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");if (truthBeTold) {window.alert("欢迎访问我们的 Web 页！");}  else  window.alert("再见啦！");</script></head><body></body></html>

<html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button!");if (r==true)  {  alert("You pressed OK!");  }else  {  alert("You pressed Cancel!");  }}</script></head><body><input type="button" onclick="show_confirm()" value="Show a confirm box" /></body></html>

（3）提示框：

<html><head><script type="text/javascript">function disp_prompt()  {  var name=prompt("请输入您的名字","Bill Gates")  if (name!=null && name!="")    { document.write("你好！" + name + " 今天过得怎么样？") }  }</script></head><body><input type="button" onclick="disp_prompt()" value="显示提示框" /></body></html>

提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 "<undefined>"。 
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框 
var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");
13，函数：JavaScript 函数
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
（1）调用函数<html><head><script type="text/javascript">function myfunction(){alert("您好！")}</script></head><body><form><input type="button" onclick="myfunction()" value="调用函数"></form><p>通过点击这个按钮，可以调用一个函数。该函数会提示一条消息。</p></body></html>

（2）带有参数的函数向函数传递变量，以及在函数中使用该变量。向函数传递多个变量，以及在函数中使用这些变量。

<head><script type="text/javascript">function myfunction(txt){alert(txt)}</script></head><body><form><input type="button" onclick="myfunction('您好！李海亚！')" value="调用函数"></form><p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。</p></body>

-------------------------------------------

<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form> <input type="button" onclick="myfunction('早安！')" value="在早晨"> <input type="button" onclick="myfunction('晚安！')" value="在夜晚"> </form> <p>通过点击这个按钮，可以调用一个函数。该函数会输出传递给它的参数。</p></body> </html>

--------------------------------------------

return 语句

return 语句用来规定从函数返回的值。

因此，需要返回某个值的函数必须使用这个 return 语句。

<html><head><script type="text/javascript">function myFunction(){return ("您好，祝您愉快！")}</script></head><body><script type="text/javascript">document.write(myFunction())</script><p>body 部分中的脚本调用一个函数。</p><p>该函数返回一段文本。</p></body></html>

------------------------------

<html><head><script type="text/javascript">function product(a,b){return a*b}</script></head><body><script type="text/javascript">document.write(product(6,5))</script><p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p><p>该函数会返回这两个参数的乘积。</p></body></html>

JavaScript 变量的生存期

当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

14，关于一个方法的用法，

join 方法

<html><head><script type="text/javascript">function myfunction(txt){   var a, b;   a = new Array(0,1,2,3,4);   b = a.join("-");   alert(txt+b);}</script></head><body><form><input type="button" onclick="myfunction('您好！')" value="调用函数"></form><p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。在一个数组中加入指定的标点符号，分割数组，本例中本来是01234，最后变成了0-1-2-3-4</p></body></html>

15，（1）for循环：

JavaScript 循环：在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。向页面打印div标签就很方便，尤其是那些内容型的网站，格式确定后，就是循环出来显示即可。

<html><body><script type="text/javascript">for (i = 0; i <= 5; i++){document.write("数字是 " + i)document.write("<br />")}</script></body></html>ex:循环产生html标题：<body><script type="text/javascript">for (i = 1; i <= 6; i++){document.write("<h" + i + ">这是标题 " + i)document.write("</h" + i + ">")}</script></body>

（2）while循环：

<body><script type="text/javascript">i = 0while (i <= 5){document.write("数字是 " + i)document.write("<br />")i++}</script></body>（2）do while 循环：优点是，先做一次循环，之后看条件是否满足。<script type="text/javascript">i = 0do{document.write("数字是 " + i)document.write("<br />")i++}while (i <= 5)</script>

16，JavaScript Break 和 Continue两种中断：

<script type="text/javascript">var i=0for (i=0;i<=10;i++){if (i==3){continue}document.write("数字是 " + i)document.write("<br />")}</script>

结果：

数字是 0
数字是 1
数字是 2
数字是 4
数字是 5
数字是 6
数字是 7
数字是 8
数字是 9
数字是 10
break中断：

<script type="text/javascript">var i=0for (i=0;i<=10;i++){if (i==3){break}document.write("数字是 " + i)document.write("<br />")}</script>

<p>解释：循环会在 i=3 时中断。</p>
16：JavaScript For...In 声明：

For...In 声明用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。

这个十分有作用。

<body><script type="text/javascript">var xvar mycars = new Array()mycars[0] = "宝马"mycars[1] = "奔驰"mycars[2] = "宾利"for (x in mycars){document.write(mycars[x] + "<br />")}</script></body>

结果是：宝马奔驰宾利

语法：for (变量 in 对象){ 在此执行代码}

优点：省去了判断mycars的length，不用采用for循环写大段代码，可以在以往项目里面普及。

17 ，JavaScript 事件，事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。更多请看：http://www.w3school.com.cn/js/jsref_events.asp

onload 和 onUnload事件：

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："Welcome John Doe!"。

onFocus, onBlur 和 onChange事件：

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit事件：

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver 和 onMouseOut事件：

<a href=http://www.w3school.com.cn

onmouseover="alert('An onMouseOver event');return false"><img src="w3school.gif" width="100" height="30"></a>

18，JavaScript Try...Catch 语句:

description 属性

返回或设置与特定错误相联系的描述字符串。

<html><head><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></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>

弹出确认框，可以选择是否留在本页面还是进行取消，回到其他页面。出错之后捕捉，捕捉之后处理。

<html><head><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"         }   }}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>

19，Throw 声明简介：

throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try...catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。控制用户输入选项。

<html><body><script type="text/javascript">var x=prompt("请输入 0 至 10 之间的数：","")try{ if(x>10)   throw "Err1" else if(x<0)  throw "Err2"else if(isNaN(x))  throw "Err3"} catch(er){if(er=="Err1")   alert("错误！该值太大！")if(er == "Err2")   alert("错误！该值太小！") if(er == "Err3")   alert("错误！该值不是数字！") }</script></body></html>

20，onerror事件：注意：如何使用 onerror 事件捕获网页中的错误。（chrome、opera、safari 浏览器不支持）

语法：onerror=handleErrfunction handleErr(msg,url,l){//Handle the error herereturn true or false}

<html><head><script type="text/javascript">onerror=handleErrvar txt=""function handleErr(msg,url,l){txt="本页中存在错误。\n\n"txt+="错误：" + msg + "\n"txt+="URL: " + url + "\n"txt+="行：" + l + "\n\n"txt+="点击“确定”继续。\n\n"alert(txt)return true//打印出来true的时候，控制台不提示错误，反之，会提示错误。}function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>

21，特殊字符：

你可以在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符。

代码输出\'单引号\"双引号\&和号\\反斜杠\n换行符\r回车符\t制表符\b退格符\f换页符