w3cschool javascript 笔记(1) - 行者无疆 始于足下 - 行走,思考,在路上

w3cschool javascript 笔记(1)

xiaohanyu posted @ Mon, 30 Aug 2010 08:48:52 +0800 in Web with tags javascript , 4523 readers

Javascript 教程

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的信息。
 

Login *


loading captcha image...
(type the code from the image)
or Ctrl+Enter
Host by is-Programmer.com | Power by Chito 1.3.3 beta | © 2007 LinuxGem | Design by Matthew "Agent Spork" McGee