简介

什么是 Javascript

  • JavaScript 被设计用来向 HTML 页面添加交互行为。
  • JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
  • JavaScript 由数行可执行计算机代码组成。
  • JavaScript 通常被直接嵌入 HTML 页面。
  • JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
  • 所有的人无需购买许可证均可使用 JavaScript。

真实的名称是 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)。
  • 这个标准仍然处于发展之中。

如何实现 JavaScript

  • <script> 标签嵌入 JavaScript
  • 与老的浏览器打交道:
<html>
  <body>
    <script type="text/javascript">
      <!--
          document.write("Hello World!");
        -->
    </script>
  </body>
</html>

把 JavaScript 放置到何处

  • 位于 head 部分的脚本:当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。
<html>
  <head>
    <script type="text/javascript">
      // ...
    </script>
  </head>
</html>
  • 位于 body 部分的脚本:在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后,它就会生成页面的内容。
<html>
  <head>
  </head>

  <body>
    <script type="text/javascript">
      // ...
    </script>
  </body>
</html>
  • 使用外部 JavaScript
    • <script src="javascript.js">...<script>
    • 您可以把 .js 文件放到网站目录中通常存放脚本的子目录中,这样更容易管理和维护。

JavaScript语句

JavaScript 语句

  • 浏览器把行末作为语句的结尾
  • 分号是可选的,通过使用分号,可以在一行中写多条语句

JavaScript注释

  • 单行注释 – //comments
  • 多行注释 – /*comments*/

JavaScript变量

  • 变量对大小写敏感( yY 是两个不同的变量)
  • 变量必须以字母或下划线开始
  • 可以通过 var 语句来声明 JavaScript 变量
  • 可以在声明它们时向变量赋值
  • 如果您所赋值的变量还未进行过声明,该变量会自动声明
  • 这些语句:
x = 5;
carname = "Volvo";
  • 与这些语句的效果相同:
var x = 5;
var carname = "Volvo";
  • 如果您再次声明了 JavaScript 变量,该变量也不会丢失其原始值。

JavaScript运算符

  • 如果把数字与字符串相加,结果将成为字符串。

JavaScript比较和逻辑运算符

  • == – 等于
  • === – 全等

JavaScript If…Else 语句

  • if
  • if ... else
  • if ... else if ... else
  • switch

JavaScript 消息框

警告框

  • 警告框经常用于确保用户可以得到某些信息
  • 当警告框出现后,用户需要点击确定按钮才能继续进行操作
  • alert("文本")

确认框

  • 确认框用于使用户可以验证或者接受某些信息
  • 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作
  • 如果用户点击确认,那么返回值为 true 。如果用户点击取消,那么返回值为 false
  • confirm("文本)

提示框

  • 提示框经常用于提示用户在进入页面前输入某个值
  • 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵
  • 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null
  • prompt("文本", "默认值")

JavaScript 函数

JavaScript 函数

  • 将脚本编写为函数,就可以避免页面载入时执行该脚本
  • 函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行
  • 函数在页面起始位置定义,即 head 部分

如何定义函数

  1. 创建函数的语法:

    function func(var1, var2, ...) {
      \\ statements
    }
  2. JavaScript变量的生存期

    • 全局变量
    • 局部变量

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>

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>

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>

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

JavaScript Try…Catch 语句

JavaScript 特殊字符

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

JavaScript 指导方针

  • JavaScript 对大小写敏感
  • JavaScript 会忽略多余的空格
  • 您可以在文本字符串内部使用反斜杠对代码进行折行

JavaScript 对象简介

  • JavaScript 是面向对象的编程语言(OOP)
  • 对象拥有属性和方法
    • 属性 – 属性指与对象有关的值
    • 方法 – 方法指对象可以执行的行为(或者可以完成的功能)

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>

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

String 对象的属性

属性 描述 FF N IE
constructor 对创建该对象的函数的引用 1 4 4
length 字符串的长度 1 2 3
prototype 允许您向对象添加属性和方法 1 2 4

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>
</html>
  • 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>

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 对象中毫秒(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

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>

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

JavaScript Boolean(逻辑)对象

  • Boolean 对象是 JavaScript 的一种基本数据类型。
  • Boolean 对象是一个把布尔值打包的布尔对象。

Boolean对象的方法

方法 描述 FF N IE
toSource() 代表对象的源代码 1 4 -
toString() 把逻辑值转换为字符串,并返回结果。 1 4 4
valueOf() 返回 Boolean 对象的原始值 1 4 4

JavaScript Math(算数)对象

  • JavaScript 提供 8 种可被 Math 对象访问的算数值:
含义 算数值
常数 Math.E
圆周率 Math.PI
2 的平方根 Math.SQRT2
1/2 的平方根 Math.SQRT1_{2}
2 的自然对数 Math.LN2
10 的自然对数 Math.LN10
以 2 为底的 \(e\) 的对数 Math.LOG2E
以 10 为底的 \(e\) 的对数 Math.LOG10E

JavaScript HTML DOM 对象

HTML DOM 对象

对象 描述
Window JavaScript 层级中的顶层对象Window对象表示浏览器窗口
Navigator 包含客户端浏览器的信息
Screen 包含客户端显示屏的信息
History 包含了浏览器窗口访问过的 URL
Location 包含了当前 URL 的信息