w3cschool javascript 笔记(1) - 行者无疆 始于足下 - 行走，思考，在路上
w3cschool javascript 笔记(1)
xiaohanyu
posted @ Mon, 30 Aug 2010 08:48:52 +0800
in Web
with tags
javascript
, 6135 readers
Javascript 教程
Table of Contents
- 1 简介
- 2 如何实现JavaScript
- 3 把JavaScript放置到何处
- 4 JavaScript语句
- 5 JavaScript注释
- 6 JavaScript变量
- 7 JavaScript运算符
- 8 JavaScript比较和逻辑运算符
- 9 JavaScript If…Else语句
- 10 JavaScript消息框
- 11 JavaScript函数
- 12 JavaScript For循环
- 13 JavaScript While循环
- 14 JavaScript Break和Continue语句
- 15 JavaScript事件
- 16 JavaScript Try…Catch语句
- 17 JavaScript特殊字符
- 18 JavaScript指导方针
- 19 JavaScript对象简介
- 20 JavaScript字符串(String)对象
- 21 JavaScript Date（日期）对象
- 22 JavaScript数组
- 23 JavaScript Boolean（逻辑）对象
- 24 JavaScript Math（算数）对象
- 25 JavaScript HTML DOM对象
1 简介
1.1 什么是Javascript
- JavaScript被设计用来向HTML页面添加交互行为。
- JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。
- JavaScript由数行可执行计算机代码组成。
- JavaScript通常被直接嵌入 HTML 页面。
- JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。
- 所有的人无需购买许可证均可使用JavaScript。
1.2 真实的名称是ECMAScript
- JavaScript的正式名称是"ECMAScript"。这个标准由ECMA组织发展和维护。
- ECMA-262是正式的JavaScript标准。这个标准基于JavaScript(Netscape)和JScript(Microsoft)。
- Netscape(Navigator 2.0)的Brendan Eich发明了这门语言，从1996年开始，已经出现在所有的Netscape和Microsoft浏览器中。
- ECMA-262的开发始于1996年，在1997年7月，ECMA会员大会采纳了它的首个版本。
- 在1998年，该标准成为了国际ISO标准(ISO/IEC 16262)。
- 这个标准仍然处于发展之中。
2 如何实现JavaScript
- <script>标签嵌入JavaScript
-
与老的浏览器打交道：
<html> <body> <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script> </body> </html>
3 把JavaScript放置到何处
-
位于 head 部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。
<html> <head> <script type="text/javascript"> .... </script> </head> .... -
位于 body 部分的脚本：在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后，它就会生成页面的内容。
<html> <head> </head> <body> <script type="text/javascript"> .... </script> </body> </html> -
使用外部JavaScript
- <script src="javascript.js">….<script>
- 您可以把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。
4 JavaScript语句
4.1 JavaScript语句
- 浏览器把行末作为语句的结尾
- 分号是可选的，通过使用分号，可以在一行中写多条语句。
5 JavaScript注释
- 单行注释：//comments
- 多行注释：/*comments*/
6 JavaScript变量
- 变量对大小写敏感（y和Y是两个不同的变量）
- 变量必须以字母或下划线开始
- 可以通过var语句来声明JavaScript变量
- 可以在声明它们时向变量赋值
-
如果您所赋值的变量还未进行过声明，该变量会自动声明
-
这些语句：
x=5; carname="Volvo"; -
与这些语句的效果相同：
var x=5; var carname="Volvo";
-
这些语句：
- 如果您再次声明了JavaScript变量，该变量也不会丢失其原始值。
7 JavaScript运算符
- 如果把数字与字符串相加，结果将成为字符串。
8 JavaScript比较和逻辑运算符
- ==：等于
- ===：全等
9 JavaScript If…Else语句
- if
- if … else
- if … else if … else
- switch
10 JavaScript消息框
10.1 警告框
- 警告框经常用于确保用户可以得到某些信息。
- 当警告框出现后，用户需要点击确定按钮才能继续进行操作。
- alert("文本")
10.2 确认框
- 确认框用于使用户可以验证或者接受某些信息。
- 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
- 如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。
- confirm("文本")
10.3 提示框
- 提示框经常用于提示用户在进入页面前输入某个值。
- 当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
- 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。
- prompt("文本", "默认值")
11 JavaScript函数
11.1 JavaScript函数
- 将脚本编写为函数，就可以避免页面载入时执行该脚本。
- 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
- 函数在页面起始位置定义，即 <head> 部分。
11.2 如何定义函数
11.2.1 创建函数的语法：
function func(var1, var2, ...)
{
\\statements
}
11.2.2 JavaScript变量的生存期
- 全局变量
- 局部变量
12 JavaScript For循环
<html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { document.write("The number is " + i) document.write("<br />") } </script> </body> </html>
13 JavaScript While循环
<html> <body> <script type="text/javascript"> var i=0 while (i<=10) { document.write("The number is " + i) document.write("<br />") i=i+1 } </script> </body> </html>
14 JavaScript Break和Continue语句
- break语句：使用break语句来终止循环。
- continue语句：使用continue语句来终止当前的循环，然后从下一个值继续执行。
JavaScript For…In声明
<html> <body> <script type="text/javascript"> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </body> </html>
15 JavaScript事件
- 事件是可以被JavaScript侦测到的行为。
-
事件举例：
- 鼠标点击
- 页面或图像载入
- 鼠标悬浮于页面的某个热点之上
- 在表单中选取输入框
- 确认表单
- 键盘按键
-
JavaScript事件参考
属性 当以下情况发生时，出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内容 1 2 3 onclick 鼠标点击某个对象 1 2 3 ondblclick 鼠标双击某个对象 1 4 4 onerror 当加载文档或图像时发生某个错误 1 3 4 onfocus 元素获得焦点 1 2 3 onkeydown 某个键盘的键被按下 1 4 3 onkeypress 某个键盘的键被按下或按住 1 4 3 onkeyup 某个键盘的键被松开 1 4 3 onload 某个页面或图像被完成加载 1 2 3 onmousedown 某个鼠标按键被按下 1 4 4 onmousemove 鼠标被移动 1 6 3 onmouseout 鼠标从某元素移开 1 4 4 onmouseover 鼠标被移到某元素之上 1 2 3 onmouseup 某个鼠标按键被松开 1 4 4 onreset 重置按钮被点击 1 3 4 onresize 窗口或框架被调整尺寸 1 4 4 onselect 文本被选定 1 2 3 onsubmit 提交按钮被点击 1 2 3 onunload 用户退出页面 1 2 3
16 JavaScript Try…Catch语句
17 JavaScript特殊字符
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \& | 和号 |
| \\ | 反斜杠 |
| \n | 换行符 |
| \r | 回车符 |
| \t | 制表符 |
| \b | 退格符 |
| \f | 换页符 |
18 JavaScript指导方针
- JavaScript对大小写敏感
- JavaScript会忽略多余的空格
- 您可以在文本字符串内部使用反斜杠对代码进行折行
19 JavaScript对象简介
- JavaScript是面向对象的编程语言(OOP)。
-
对象拥有属性和方法。
- 属性：属性指与对象有关的值。
- 方法：方法指对象可以执行的行为（或者可以完成的功能）。
20 JavaScript字符串(String)对象
-
计算字符串的长度
<html> <body> <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script> </body> </html>
-
indexOf()方法
<html> <body> <script type="text/javascript"> var str="Hello world!" document.write(str.indexOf("Hello") + "<br />") document.write(str.indexOf("World") + "<br />") document.write(str.indexOf("world")) </script> </body> </html>
-
match()方法
<html> <body> <script type="text/javascript"> var str="Hello world!" document.write(str.match("world") + "<br />") document.write(str.match("World") + "<br />") document.write(str.match("worlld") + "<br />") document.write(str.match("world!")) </script> </body> </html>
-
replace()方法
<html> <body> <script type="text/javascript"> var str="Visit Microsoft!" document.write(str.replace(/Microsoft/,"W3School")) </script> </body> </html>
20.1 String对象的方法
- JavaScript的字符串是不可变的
-
String类定义的方法都不能改变字符串的内容
方法 描述 FF N IE anchor() 创建 HTML 锚。 1 2 3 big() 用大号字体显示字符串。 1 2 3 blink() 显示闪动字符串。 1 2 bold() 使用粗体显示字符串。 1 2 3 charAt() 返回在指定位置的字符。 1 2 3 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 1 4 4 concat() 连接字符串。 1 4 4 fixed() 以打字机文本显示字符串。 1 2 3 fontcolor() 使用指定的颜色来显示字符串。 1 2 3 fontsize() 使用指定的尺寸来显示字符串。 1 2 3 fromCharCode() 从字符编码创建一个字符串。 1 4 4 indexOf() 检索字符串。 1 2 3 italics() 使用斜体显示字符串。 1 2 3 lastIndexOf() 从后向前搜索字符串。 1 2 3 link() 将字符串显示为链接。 1 2 3 localeCompare() 用本地特定的顺序来比较两个字符串。 1 4 4 match() 找到一个或多个正在表达式的匹配。 1 4 4 replace() 替换与正则表达式匹配的子串。 1 4 4 search() 检索与正则表达式相匹配的值。 1 4 4 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 1 4 4 small() 使用小字号来显示字符串。 1 2 3 split() 把字符串分割为字符串数组。 1 4 4 strike() 使用删除线来显示字符串。 1 2 3 sub() 把字符串显示为下标。 1 2 3 substr() 从起始索引号提取字符串中指定数目的字符。 1 4 4 substring() 提取字符串中两个指定的索引号之间的字符。 1 2 3 sup() 把字符串显示为上标。 1 2 3 toLocaleLowerCase() 把字符串转换为小写。 - - - toLocaleUpperCase() 把字符串转换为大写。 - - - toLowerCase() 把字符串转换为小写。 1 2 3 toUpperCase() 把字符串转换为大写。 1 2 3 toSource() 代表对象的源代码。 1 4 - toString() 返回字符串。 - - - valueOf() 返回某个字符串对象的原始值 1 2 4
20.2 String对象的属性
| 属性 | 描述 | FF | N | IE |
|---|---|---|---|---|
| constructor | 对创建该对象的函数的引用 | 1 | 4 | 4 |
| length | 字符串的长度 | 1 | 2 | 3 |
| prototype | 允许您向对象添加属性和方法 | 1 | 2 | 4 |
21 JavaScript Date（日期）对象
-
返回当日的日期和时间
<html> <body> <script type="text/javascript"> document.write(Date()) </script> </body> </html>
-
getTime()
<html> <body> <script type="text/javascript"> var minutes = 1000*60 var hours = minutes*60 var days = hours*24 var years = days*365 var d = new Date() var t = d.getTime() var y = t/years document.write("It's been: " + y + " years since 1970/01/01!") </script> </body>
-
setFullYear()
<html> <body> <script type="text/javascript"> var d = new Date() d.setFullYear(1992,10,3) document.write(d) </script> </body> </html>
-
toUTCString()
<html> <body> <script type="text/javascript"> var d = new Date() document.write (d.toUTCString()) </script> </body> </html>
-
时钟
<html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) } function checkTime(i) { if (i<10) { i="0" + i } return i } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html>
21.1 Date对象的方法
| 方法 | 描述 | FF | N | IE |
|---|---|---|---|---|
| Date() | 返回当日的日期和时间 | 1 | 2 | 3 |
| getDate() | 从Date对象返回一个月中的某一天 (1 ~ 31) | 1 | 2 | 3 |
| getDay() | 从Date对象返回一周中的某一天 (0 ~ 6) | 1 | 2 | 3 |
| getMonth() | 从Date对象返回月份 (0 ~ 11) | 1 | 2 | 3 |
| getFullYear() | 从Date对象以四位数字返回年份 | 1 | 4 | 4 |
| getYear() | 从Date对象以两位或四位数字返回年份。 | 1 | 2 | 3 |
| getHours() | 返回Date对象的小时 (0 ~ 23) | 1 | 2 | 3 |
| getMinutes() | 返回Date对象的分钟 (0 ~ 59) | 1 | 2 | 3 |
| getSeconds() | 返回Date对象的秒数 (0 ~ 59)) | 1 | 2 | 3 |
| getMilliseconds() | 返回Date对象的毫秒(0 ~ 999) | 1 | 4 | 4 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数 | 1 | 2 | 3 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间的分钟差 (GMT) | 1 | 2 | 3 |
| getUTCDate() | 根据世界时从Date对象返回月中的一天 (1 ~ 31) | 1 | 4 | 4 |
| getUTCDay() | 根据世界时从Date对象返回周中的一天 (0 ~ 6) | 1 | 4 | 4 |
| getUTCMonth() | 根据世界时从Date对象返回月份 (0 ~ 11) | 1 | 4 | 4 |
| getUTCFullYear() | 根据世界时从Date对象返回四位数的年份 | 1 | 4 | 4 |
| getUTCHours() | 根据世界时返回Date对象的小时 (0 ~ 23) | 1 | 4 | 4 |
| getUTCMinutes() | 根据世界时返回Date对象的分钟 (0 ~ 59) | 1 | 4 | 4 |
| getUTCSeconds() | 根据世界时返回Date对象的秒钟 (0 ~ 59) | 1 | 4 | 4 |
| getUTCMilliseconds() | 根据世界时返回Date对象的毫秒(0 ~ 999) | 1 | 4 | 4 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数 | 1 | 2 | 3 |
| setDate() | 设置Date对象中月的某一天 (1 ~ 31)) | 1 | 2 | 3 |
| setMonth() | 设置Date对象中月份 (0 ~ 11)) | 1 | 2 | 3 |
| setFullYear() | 设置Date对象中的年份（四位数字） | 1 | 4 | 4 |
| setYear() | 设置Date对象中的年份（两位或四位数字）。 | 1 | 2 | 3 |
| setHours() | 设置Date对象中的小时 (0 ~ 23) | 1 | 2 | 3 |
| setMinutes() | 设置Date对象中的分钟 (0 ~ 59) | 1 | 2 | 3 |
| setSeconds() | 设置Date对象中的秒钟 (0 ~ 59) | 1 | 2 | 3 |
| setMilliseconds() | 设置Date对象中的毫秒 (0 ~ 999) | 1 | 4 | 4 |
| setTime() | 通过向或从1970年1月1日午夜添加或减去指定数目的毫秒来计算日期和时间 | 1 | 2 | 3 |
| setUTCDate() | 根据世界时设置Date对象中月份的一天 (1 ~ 31) | 1 | 4 | 4 |
| setUTCMonth() | 根据世界时设置Date对象中的月份 (0 ~ 11) | 1 | 4 | 4 |
| setUTCFullYear() | 根据世界时设置Date对象中年份（四位数字） | 1 | 4 | 4 |
| setUTCHours() | 根据世界时设置Date对象中小时 (0 ~ 23) | 1 | 4 | 4 |
| setUTCMinutes() | 根据世界时设置Date对象中分钟 (0 ~ 59) | 1 | 4 | 4 |
| setUTCSeconds() | 根据世界时设置Date对象中秒钟 (0 ~ 59) | 1 | 4 | 4 |
| setUTCMilliseconds() | 根据世界时设置Date对象中毫秒S(0 ~ 999) | 1 | 4 | 4 |
| toSource() | 代表对象的源代码 | 1 | 4 | - |
| toString() | 把Date对象转换为字符串。 | 1 | 2 | 4 |
| toTimeString() | 把Date对象的时间部分转换为字符串。 | 1 | 2 | 4 |
| toDateString() | 把Date对象的日期部分转换为字符串。 | 1 | 2 | 4 |
| toGMTString() | 根据格林威治时间，把Date对象转换为字符串。 | 1 | 2 | 3 |
| toUTCString() | 根据世界时，把Date对象转换为字符串。 | 1 | 4 | 4 |
| toLocaleString() | 根据本地时间格式，把Date对象转换为字符串。 | 1 | 2 | 3 |
| toLocaleTimeString() | 根据本地时间格式，把Date对象的时间部分转换为字符串 | 1 | 2 | 3 |
| toLocaleDateString() | 根据本地时间格式，把Date对象的日期部分转换为字符串 | 1 | 2 | 3 |
| UTC() | 根据世界时，获得一个日期，然后返回1970年1月1日午夜到该日期的毫秒数。 | 1 | 2 | 3 |
| valueOf() | 返回Date对象的原始值。 | 1 | 2 | 4 |
22 JavaScript数组
-
创建数组
<html> <body> <script type="text/javascript"> var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br />") } </script> </body> </html>
-
For…In声明
<html> <body> <script type="text/javascript"> var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script> </body> </html>
22.1 Array对象的方法
| 方法 | 描述 | FF | N | IE |
|---|---|---|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 | 1 | 4 | 4 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 | 1 | 3 | 4 |
| pop() | 删除并返回数组的最后一个元素 | 1 | 4 | 5.5 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 | 1 | 4 | 5.5 |
| reverse() | 颠倒数组中元素的顺序。 | 1 | 3 | 4 |
| shift() | 删除并返回数组的第一个元素 | 1 | 4 | 5.5 |
| slice() | 从某个已有的数组返回选定的元素 | 1 | 4 | 4 |
| sort() | 对数组的元素进行排序 | 1 | 3 | 4 |
| splice() | 删除元素，并向数组添加新元素。 | 1 | 4 | 5.5 |
| toSource() | 代表对象的源代码 | 1 | 4 | - |
| toString() | 把数组转换为字符串，并返回结果。 | 1 | 3 | 4 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 | 1 | 3 | 4 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 | 1 | 4 | 6 |
| valueOf() | 返回数组对象的原始值 | 1 | 2 | 4 |
23 JavaScript Boolean（逻辑）对象
- Boolean 对象是 JavaScript 的一种基本数据类型。
- Boolean 对象是一个把布尔值打包的布尔对象。
23.1 Boolean对象的方法
| 方法 | 描述 | FF | N | IE |
|---|---|---|---|---|
| toSource() | 代表对象的源代码 | 1 | 4 | - |
| toString() | 把逻辑值转换为字符串，并返回结果。 | 1 | 4 | 4 |
| valueOf() | 返回Boolean对象的原始值 | 1 | 4 | 4 |
24 JavaScript Math（算数）对象
-
JavaScript提供8种可被Math对象访问的算数值：
含义 算数值 常数 Math.E 圆周率 Math.PI 2的平方根 Math.SQRT2 1/2的平方根 Math.SQRT12 2的自然对数 Math.LN2 10的自然对数 Math.LN10 以2为底的e的对数 Math.LOG2E 以10为底的e的对数 Math.LOG10E
25 JavaScript HTML DOM对象
25.1 HTML DOM对象
| 对象 | 描述 |
|---|---|
| Window | JavaScript层级中的顶层对象。Window对象表示浏览器窗口。 |
| Navigator | 包含客户端浏览器的信息。 |
| Screen | 包含客户端显示屏的信息。 |
| History | 包含了浏览器窗口访问过的 URL。 |
| Location | 包含了当前URL的信息。 |
Mon, 30 Aug 2010 17:00:57 +0800
看不懂