JavaScript学习教程(全)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在HTML标记中直接写入JavaScript代码 例： <HTML> <BODY> <P onmouseover="alert('欢迎您学习 JavaScript!')">鼠标移过来</P> </BODY> </HTML>
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将JavaScript代码放入<Script>…</Script>标记符中 例如：
JavaScript编程基础
6. 程序控制流程
b) 循环结构 do { 语句或语句组 }while (<逻辑表达式>) <Script> var i = 5; do { document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>
6. 程序控制流程
a) 选择结构
Switch结构： switch ( <变量> ) { case <特定数值1>：<语句或语句组>； case <特定数值2>：<语句或语句组>； default：<语句或语句组>； }
JavaScript编程基础
6. 程序控制流程
b) 循环结构 while (<逻辑表达式>) {语句组} <Script> var i = 5; while ( i > 0 ) { document.write("i = " ,i ,"<BR>"); i--; } </Script>
JavaScript编程基础
4. 常量
a. 字符串常量（String Literals）
一般字符串常量 特殊字符的字符串常量
字符 \b \f \n \r 意义 后退一格(Backspace) 换页(Form feed) 换行(New line) 返回(Carriage return) 字符 \t \’ \” \\ 意义 制表(Tab) 单引号 双引号 反斜线(Backslash)
b. 布尔常量（Boolean Literals）：true或false。 c. 整数常量（Integers Literals） d. 浮点常量（Floating-Point Literals） e. 数组常量（Array Literals）
JavaScript编程基础
5. 运算符与表达式
a) 赋值运算符 运算符 = += -= 意义 x=5 x=x+y x=x-y 运算符 /= %= *= 意义 x=x/y 求余赋值 x=x*y
注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0” 是数值，“空字符串”是字符串。
JavaScript编程基础
2. 数据类型转换
a) 自动数据类型转换 如果表达式中用（+）运算符，且其中一个操作数 为字符串，另一个操作数为数值时，JavaScript自动 将数值转成字符串。 例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15”+8 结果：x=158 如果表达式中用了其它运算符，JavaScript自动将字 符串转成数值。 例如：var x=”30”/5; 结果：x=6 var y=”15”-“8”; 结果：y=7 举例
var y=15+8;
Hale Waihona Puke Baidu
结果：y=23
JavaScript编程基础
2. 数据类型转换
b) 数据类型转换函数 eval(字符串)：将传入的字符串参数内容，转换成 相应的数值，例如：
parseInt(字符串，[底数])：将传入的字符串，转 换成指定底数的数值。 parseFloat(字符串)：将传入的字符串，转换成浮 点数值。
Psw =password
mobile.length!=11 tries>=2 mflag>20 i<=0 tries<10
JavaScript编程基础
5. 运算符与表达式
c) 算术运算符
运算符 意义 运算符 意义 运算符 意义
+
*
加(Addition)
减 (Subtraction) 乘 (Multiplicatio n)
JavaScript编程基础
5. 运算符与表达式
e) 字符串运算符（String operators） f) 条件运算符（？） 格式：条件表达式？值1：值2 如果条件表达式的结果是ture，返回值1，否则就返 回值2。 g) new：定义对象实例。 语法：对象名称 = new 对象类型（参数） 例如：myArray=new Array(3)
JavaScript编程基础
5. 运算符与表达式
h) delete：删除对象、属性、数组、变量 格式：delete 对象名 delete 对象名.属性名 delete 数组名[索引值] delete 变量名 注：删除成功返回true，删除失败返回flase i) typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof （操作数） j) this：代表当前对象，因此用在不同的地方，就有不 同的结果。
JavaScript概述
2. JavaScript的特点
脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台
JavaScript概述
3. JavaScript的功能
制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( 变量 in 对象 ) { <语句或语句组> }
JavaScript编程基础
6. 程序控制流程
b) 循环结构
with ( <对象> ) { <语句或语句组> } <Script> <Script> with (document) document.write ("限时抢购物品："); { document.write ("<Li>ViewSonic 17\" 显示器。"); write ("限时抢购物品： "); document.write ("<Li>EPSON 打印机。 "); write ("<Li>ViewSonic 17\" 显示器。 "); </Script> write ("<Li>EPSON 打印机。"); } </Script>
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
为避免某些浏览器不完全支持JavaScript，而造成错 误，可将JavaScript代码用注释语句括起来 例如： <Script > <!-…… --> </Script>
JavaScript编程基础
1. 数据类型
数值(Number)：包含整数或浮点数。 逻辑值(Logical)：取值为true或false。 字符串(String)：用单引号或双引号括起来的零个或 多个单一的字符所组成。 空值(null)：表示没有值，取唯一值”null”，大小写 敏感。 未定义值(undefined)：表示尚未定义值。
JavaScript概述
1.什么是JavaScript脚本语言？ (1) 脚本语言(Scripting Language)？ 由ASCII码构成，可直接用任何的文本编辑器开 发完成。是一种不必事先编译，只要利用适当的 解释器(Interpreter)就可以执行的简单的解释式程 序。 (2) JavaScript？ JavaScript是由网景公司开发的一种跨平台，纯 面向对象(object-oriented)式的网页式脚本语言 (Web Script Language)。JavaScript代码可直接嵌 入HTML文件中，随网页一起传送到客户端浏览器， 然后通过浏览器的解释器来解释执行。
JavaScript编程基础
3. 变量
b) 变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。 例如： var name; （JavaScript自动给出一个未定义值） var name,sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均为字 符串)
JavaScript编程基础
3. 变量
c) 变量的作用域：全局变量(Global variable)和局部变 量(Local variable)。
<Script> document.title = "变量的作用域实例"; var gv = "JavaScript"; //gv是全局变量 document.write("test函数的输出：<br>"); test(); function test() { var lv = "VBScript"; //lv是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } document.write("document的输出：<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); </Script>
JavaScript编程基础
6. 程序控制流程
a) 选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} if <逻辑表达式> { 语句组 } else if <逻辑表达式> { 语句组 } else { 语句组 }
JavaScript编程基础
/
% ++
除(Division)
求余 (Modulus) 递增 (Increment)
--
递减(Decrement)
取负值(Unary Negation)
JavaScript编程基础
5. 运算符与表达式
d) 逻辑运算符
a&&b ：逻辑与(Logical AND)，若a,b都是ture，则 结果为ture。 a||b ：逻辑或(Logical OR) ，若a,b任一是ture，则 结果为ture。 !a ：逻辑非(Logical NOT) ，若a是ture，则结果为 false。
<script> document.write("欢迎您学习JavaScript!"); </script>
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将代码独立存储为以 .js 为扩展名的文件，利用SRC 属性将该文件调入 例如： <script src="welcome.js"> </script> welcome.js文件内容如下： document.write("欢迎您学习JavaScript!");
JavaScript编程基础
5. 运算符与表达式
b) 比较运算符
操作符 描述 举例
A==B
A!=B A>=B a>B A<=b A<B
如果两个操作数相等，返回true
如果两个操作数不等，返回true 如果A大于或者等于B，返回true 如果A大于B，返回true 如果A小于或等于B，返回true 如果A小巧或等于B，返回true
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( [初始值]；[条件]；[增量] ) { <语句或语句组>} <Script> for ( var i = 5; i > 0; i-- ) { document.write("i = " ,i ,"<BR>"); } </Script>
y=eval(“15”)+8;
结果：y=23
JavaScript编程基础
3. 变量
a) 变量命名 以字母或下划线开头（不能以数字开头），后面接 数字或其它字母。 变量名区分大小写。 例：<script> var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<br>"); document.write(a); </script>
JavaScript学习教程
主要内容 一．概述 二．编程基础
三．事件驱动
四．内置对象
五．浏览器对象
JavaScript概述
JavaScript是由网景公司开发的一种跨平台，面向 对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。 JavaScript代码可直接嵌入HTML文件中，随网页一 起传送到客户端浏览器，然后通过浏览器来解释执行。
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将JavaScript代码放入<Script>…</Script>标记符中 例如：
JavaScript编程基础
6. 程序控制流程
b) 循环结构 do { 语句或语句组 }while (<逻辑表达式>) <Script> var i = 5; do { document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>
6. 程序控制流程
a) 选择结构
Switch结构： switch ( <变量> ) { case <特定数值1>：<语句或语句组>； case <特定数值2>：<语句或语句组>； default：<语句或语句组>； }
JavaScript编程基础
6. 程序控制流程
b) 循环结构 while (<逻辑表达式>) {语句组} <Script> var i = 5; while ( i > 0 ) { document.write("i = " ,i ,"<BR>"); i--; } </Script>
JavaScript编程基础
4. 常量
a. 字符串常量（String Literals）
一般字符串常量 特殊字符的字符串常量
字符 \b \f \n \r 意义 后退一格(Backspace) 换页(Form feed) 换行(New line) 返回(Carriage return) 字符 \t \’ \” \\ 意义 制表(Tab) 单引号 双引号 反斜线(Backslash)
b. 布尔常量（Boolean Literals）：true或false。 c. 整数常量（Integers Literals） d. 浮点常量（Floating-Point Literals） e. 数组常量（Array Literals）
JavaScript编程基础
5. 运算符与表达式
a) 赋值运算符 运算符 = += -= 意义 x=5 x=x+y x=x-y 运算符 /= %= *= 意义 x=x/y 求余赋值 x=x*y
注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0” 是数值，“空字符串”是字符串。
JavaScript编程基础
2. 数据类型转换
a) 自动数据类型转换 如果表达式中用（+）运算符，且其中一个操作数 为字符串，另一个操作数为数值时，JavaScript自动 将数值转成字符串。 例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15”+8 结果：x=158 如果表达式中用了其它运算符，JavaScript自动将字 符串转成数值。 例如：var x=”30”/5; 结果：x=6 var y=”15”-“8”; 结果：y=7 举例
var y=15+8;
Hale Waihona Puke Baidu
结果：y=23
JavaScript编程基础
2. 数据类型转换
b) 数据类型转换函数 eval(字符串)：将传入的字符串参数内容，转换成 相应的数值，例如：
parseInt(字符串，[底数])：将传入的字符串，转 换成指定底数的数值。 parseFloat(字符串)：将传入的字符串，转换成浮 点数值。
Psw =password
mobile.length!=11 tries>=2 mflag>20 i<=0 tries<10
JavaScript编程基础
5. 运算符与表达式
c) 算术运算符
运算符 意义 运算符 意义 运算符 意义
+
*
加(Addition)
减 (Subtraction) 乘 (Multiplicatio n)
JavaScript编程基础
5. 运算符与表达式
e) 字符串运算符（String operators） f) 条件运算符（？） 格式：条件表达式？值1：值2 如果条件表达式的结果是ture，返回值1，否则就返 回值2。 g) new：定义对象实例。 语法：对象名称 = new 对象类型（参数） 例如：myArray=new Array(3)
JavaScript编程基础
5. 运算符与表达式
h) delete：删除对象、属性、数组、变量 格式：delete 对象名 delete 对象名.属性名 delete 数组名[索引值] delete 变量名 注：删除成功返回true，删除失败返回flase i) typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof （操作数） j) this：代表当前对象，因此用在不同的地方，就有不 同的结果。
JavaScript概述
2. JavaScript的特点
脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台
JavaScript概述
3. JavaScript的功能
制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( 变量 in 对象 ) { <语句或语句组> }
JavaScript编程基础
6. 程序控制流程
b) 循环结构
with ( <对象> ) { <语句或语句组> } <Script> <Script> with (document) document.write ("限时抢购物品："); { document.write ("<Li>ViewSonic 17\" 显示器。"); write ("限时抢购物品： "); document.write ("<Li>EPSON 打印机。 "); write ("<Li>ViewSonic 17\" 显示器。 "); </Script> write ("<Li>EPSON 打印机。"); } </Script>
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
为避免某些浏览器不完全支持JavaScript，而造成错 误，可将JavaScript代码用注释语句括起来 例如： <Script > <!-…… --> </Script>
JavaScript编程基础
1. 数据类型
数值(Number)：包含整数或浮点数。 逻辑值(Logical)：取值为true或false。 字符串(String)：用单引号或双引号括起来的零个或 多个单一的字符所组成。 空值(null)：表示没有值，取唯一值”null”，大小写 敏感。 未定义值(undefined)：表示尚未定义值。
JavaScript概述
1.什么是JavaScript脚本语言？ (1) 脚本语言(Scripting Language)？ 由ASCII码构成，可直接用任何的文本编辑器开 发完成。是一种不必事先编译，只要利用适当的 解释器(Interpreter)就可以执行的简单的解释式程 序。 (2) JavaScript？ JavaScript是由网景公司开发的一种跨平台，纯 面向对象(object-oriented)式的网页式脚本语言 (Web Script Language)。JavaScript代码可直接嵌 入HTML文件中，随网页一起传送到客户端浏览器， 然后通过浏览器的解释器来解释执行。
JavaScript编程基础
3. 变量
b) 变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。 例如： var name; （JavaScript自动给出一个未定义值） var name,sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均为字 符串)
JavaScript编程基础
3. 变量
c) 变量的作用域：全局变量(Global variable)和局部变 量(Local variable)。
<Script> document.title = "变量的作用域实例"; var gv = "JavaScript"; //gv是全局变量 document.write("test函数的输出：<br>"); test(); function test() { var lv = "VBScript"; //lv是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } document.write("document的输出：<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); </Script>
JavaScript编程基础
6. 程序控制流程
a) 选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} if <逻辑表达式> { 语句组 } else if <逻辑表达式> { 语句组 } else { 语句组 }
JavaScript编程基础
/
% ++
除(Division)
求余 (Modulus) 递增 (Increment)
--
递减(Decrement)
取负值(Unary Negation)
JavaScript编程基础
5. 运算符与表达式
d) 逻辑运算符
a&&b ：逻辑与(Logical AND)，若a,b都是ture，则 结果为ture。 a||b ：逻辑或(Logical OR) ，若a,b任一是ture，则 结果为ture。 !a ：逻辑非(Logical NOT) ，若a是ture，则结果为 false。
<script> document.write("欢迎您学习JavaScript!"); </script>
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将代码独立存储为以 .js 为扩展名的文件，利用SRC 属性将该文件调入 例如： <script src="welcome.js"> </script> welcome.js文件内容如下： document.write("欢迎您学习JavaScript!");
JavaScript编程基础
5. 运算符与表达式
b) 比较运算符
操作符 描述 举例
A==B
A!=B A>=B a>B A<=b A<B
如果两个操作数相等，返回true
如果两个操作数不等，返回true 如果A大于或者等于B，返回true 如果A大于B，返回true 如果A小于或等于B，返回true 如果A小巧或等于B，返回true
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( [初始值]；[条件]；[增量] ) { <语句或语句组>} <Script> for ( var i = 5; i > 0; i-- ) { document.write("i = " ,i ,"<BR>"); } </Script>
y=eval(“15”)+8;
结果：y=23
JavaScript编程基础
3. 变量
a) 变量命名 以字母或下划线开头（不能以数字开头），后面接 数字或其它字母。 变量名区分大小写。 例：<script> var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<br>"); document.write(a); </script>
JavaScript学习教程
主要内容 一．概述 二．编程基础
三．事件驱动
四．内置对象
五．浏览器对象
JavaScript概述
JavaScript是由网景公司开发的一种跨平台，面向 对象(object-oriented)的网页脚本语言(Web Script Language)，是目前流行的网页特效设计语言。 JavaScript代码可直接嵌入HTML文件中，随网页一 起传送到客户端浏览器，然后通过浏览器来解释执行。