javascript入门讲义
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
24
JavaScript编程基础
6. 程序控制流程
b) 循环结构
do { 语句或语句组 } while (<逻辑表达式>)
<Script> var i = 5; do { document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>
8
JavaScript编程基础
3. 变量
a) 变量命名
以字母或下划线开头（不能以数字开头），后面接数字、 字母或下划线。 变量名区分大小写。 不能用系统保留字和特殊符号作为变量
例：<script> var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<BR>"); document.write(a); </script>
var y=15+8;
结果：y=23
如果表达式中用了其它运算符，JavaScript自动将字符 串转成数值。 例如：var x=“15”-”8”; 结果：x=7 var y=“15”/3; 结果：y=5 运行
7
JavaScript编程基础
2. 数据类型转换
b) 数据类型转换函数 eval(字符串)：将字符串参数转换成相应的数值， 例如： y=eval(“15”)+8; 结果：y=23 parseInt(字符串，[底数])：将字符串转换成指定 基数的数值。 parseFloat(字符串)：将字符串转换成浮点数值。
b. 布尔常量：（Boolean Literals）：true或false c. 数值型：整数常量（Integers Literals） 浮点常量（Floating-Point Literals）
1,0
12
JavaScript编程基础
5. 运算符与表达式
a) 赋值运算符 运算符 = += －= x+=y x%=y 意义 x=5 x=x+y x=x-y 运算符 /= %= *= 意义 x=x/y 求余赋值 x=x*y
+ *
/ % ++
--
15
JavaScript编程基础
5. 运算符与表达式
d) 逻辑运算符
a&&b ：逻辑与 (AND)，若a,b都是ture， 则结果为ture。 a||b ： 逻辑或 (OR) ，若a,b任一是ture， 则结果为ture。 !a ： 逻辑非 (NOT) ，若a是ture，则 结果为false。
2
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将JavaScript代码放入<SCRIPT>…</SCRIPT> 标记符中 例如：
<SCRIPT language="JavaScript" > document.write("欢迎您学习JavaScript!"); </SCRIPT>
7. JavaScript函数 JavaScript包含两类函数： • 系统函数 • 用户自定义函数
28
JavaScript编程基础
1) 编码函数 功能：将字符串中非文字、数字字符（如&,%,#,^,空格 符…）转成相对应的ASCII值。 语法：escape(字符串) 2) 译码函数 功能：与escape()相反，将ASCII值转回ASCII字符. 语法：unescape(ASCII值) 3) 求值函数 功能：通常有两个用途，一个用作字符串的运算，另一 个用来指出操作对象。 语法：eval(字符串表达式)
动态网页脚本语言JavaScript
主要内容
一．概述
二．编程基础
三．面向对象的基本概念
四．内置对象 五．DOM操作 六．举例
1Fra Baidu bibliotek
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
在HTML标记中直接写入JavaScript代码 例： <HTML> <BODY> <P onMouseOver=“alert(‘欢迎您学习 JavaScript!')">鼠标移过来</P> </BODY> </HTML>
29
JavaScript编程基础
4) 数值判断函数 功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数 值。 语法：isNaN(测试值) 举例： <Script> var x = 15, y = "黄雅玲"; document.write("<LI>x 不是数值吗？", isNaN(x)); document.write("<LI>y 不是数值吗？", isNaN(y)); </Script> 执行结果： x 不是数值吗？false y 不是数值吗？True 30
美国的Bingo卡片式5*5的方形：B列数值包含1~15，I 列数字包含16~30，N列数字包含31~45,G列数字包含 46~60，O列数字包含61-75。中间是一个空各自。 该例子需要多次重复执行测试，因此可以通过循环（ loop），指定循环的次数来重复一个操作。 var newNum; do{ newNum=colBasis+getNewNum()+1; }while(usedNums[newNum]) usedNums[newNum]=true; document.getElementById(currSquare).innerHTM L=newNum;
5. 运算符与表达式
g) typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof(操作数)
18
JavaScript编程基础
属性
对象类型：
方法 对象实例 对象实例名.属性 对象实例名.方法
19
JavaScript编程基础
5. 运算符与表达式
h) new：定义对象实例。 语法：对象实例名= new 对象类型(参数) 例如：myArray=new Array(3)
6. 程序控制流程
b) 循环结构 while (<逻辑表达式>) {语句组}
<Script> var i = 5; while ( i > 0 ) { document.write("i = " ＋i＋"<BR>"); i--; } </Script>
23
While循环举例
等价于 x=x+y 等价于 x=x%y
13
JavaScript编程基础
5. 运算符与表达式
b) 比较运算符
操作符 A==B 描述 如果两个操作数相等， 返回true 举例 Psw==password
A!=B
A>=B A>B A<=b
如果两个操作数不等， 返回true
如果A大于或者等于B，返回true 如果A大于B， 返回true 如果A小于或等于B， 返回true
26
JavaScript编程基础
6. 程序控制流程
b) 循环结构
for ( 变量 in 对象 ) { <语句或语句组> }
for ( i in ar )
{ document.write("<FONT size=4>", ar[i], "</FONT><BR>"); }
27
JavaScript编程基础
<STYLE> …… </STYLE>
3
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将代码独立存储为以 .js 为扩展名的文件，利用SRC 属性将该文件调入 例如：
<script language="JavaScript“ src="welcome.js">
</script>
mobile.length!=11
tries>=2 mflag>20 i<=0
A<B
如果A小于或等于B， 返回true
tries<10
14
JavaScript编程基础
5. 运算符与表达式
c) 算术运算符
运算符 意义 加(Addition) 减 (Subtraction) 乘 (Multiplicati on) 运算符 意义 除(Division) 求余 (Modulus) 递增 (Increment) 运算符 意义 递减(Decrement) 取负值(Unary Negation)
11
JavaScript编程基础
4. 常量
a. 字符串常量：（String Literals）
一般字符串常量： ‘ ’ ， “ ” 特殊字符的字符串常量
字符 \b \f \n \r 意义 后退一格(Backspace) 换页(Form feed) 换行(New line) 返回(Carriage return) 字符 \t \’ \” \\ 意义 制表(Tab) 单引号 双引号 反斜线(Backslash)
注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0” 是数值，“空字符串”是字符串。
6
JavaScript编程基础
2. 数据类型转换
a) 自动数据类型转换
如果表达式中用（+）运算符，且其中一个操作数为字 符串，另一个操作数为数值时，JavaScript自动将数值 转成字符串。 例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15”+8 结果：x=158
21
JavaScript编程基础
6. 程序控制流程
b) Switch结构 switch ( <变量> ) { case <特定数值1>：<语句或语句组1>； break; case <特定数值2>：<语句或语句组2>； break; default：<语句或语句组>； }
22
JavaScript编程基础
16
JavaScript编程基础
5. 运算符与表达式
e) 字符串运算符（String operators） f) 条件运算符（？） 格式：条件表达式? 值1 : 值2 如果条件表达式的结果是ture，返回值1，否则 返回值2。 var a, b; max = a>b? a : b
17
JavaScript编程基础
为
字符串)
10
JavaScript编程基础
3. 变量
c) 变量的作用域： 全局变量(Global variable) 局部变量(Local variable) <Script> var gv = "JavaScript"; // gv是全局变量 function test() { var lv = "VBScript"; // lv是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } test(); document.write("document的输出：<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); </Script>
welcome.js文件内容如下： document.write("欢迎您学习JavaScript!");
4
document.write(
);
var A="Uppercase A"; document.write(A); document.write( "Uppercase A" ); document.write("<BR>"); document.write("gv=" + A + "<BR>");
i) this：代表当前对象，因此用在不同的地方， 就有不同的结果。 this.属性 this.方法
20
JavaScript编程基础
6. 程序控制流程
a) 选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} if <逻辑表达式> { 语句组 } else if <逻辑表达式> { 语句组 } else { 语句组 }
5
JavaScript编程基础
1. 数据类型
数值型(Number)：包含整数或浮点数。 布尔型(Logical)：取值为true或false。1,0 字符型(String)：用单引号或双引号括起来的零个 或多个的字符或数字所组成。 空类型(null)：表示没有值，取唯一值”null”，大 小写敏感。
9
JavaScript编程基础
3. 变量
b) 变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。 例如： var name; （JavaScript自动给出一个未定义值） var name, sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均
25
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( [初始值]；[条件]；[增量] ) { <语句或语句组>}
<Script> for ( var i = 5; i > 0; i-- ) { document.write("i = " ,i ,"<BR>"); } </Script>
JavaScript编程基础
6. 程序控制流程
b) 循环结构
do { 语句或语句组 } while (<逻辑表达式>)
<Script> var i = 5; do { document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>
8
JavaScript编程基础
3. 变量
a) 变量命名
以字母或下划线开头（不能以数字开头），后面接数字、 字母或下划线。 变量名区分大小写。 不能用系统保留字和特殊符号作为变量
例：<script> var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<BR>"); document.write(a); </script>
var y=15+8;
结果：y=23
如果表达式中用了其它运算符，JavaScript自动将字符 串转成数值。 例如：var x=“15”-”8”; 结果：x=7 var y=“15”/3; 结果：y=5 运行
7
JavaScript编程基础
2. 数据类型转换
b) 数据类型转换函数 eval(字符串)：将字符串参数转换成相应的数值， 例如： y=eval(“15”)+8; 结果：y=23 parseInt(字符串，[底数])：将字符串转换成指定 基数的数值。 parseFloat(字符串)：将字符串转换成浮点数值。
b. 布尔常量：（Boolean Literals）：true或false c. 数值型：整数常量（Integers Literals） 浮点常量（Floating-Point Literals）
1,0
12
JavaScript编程基础
5. 运算符与表达式
a) 赋值运算符 运算符 = += －= x+=y x%=y 意义 x=5 x=x+y x=x-y 运算符 /= %= *= 意义 x=x/y 求余赋值 x=x*y
+ *
/ % ++
--
15
JavaScript编程基础
5. 运算符与表达式
d) 逻辑运算符
a&&b ：逻辑与 (AND)，若a,b都是ture， 则结果为ture。 a||b ： 逻辑或 (OR) ，若a,b任一是ture， 则结果为ture。 !a ： 逻辑非 (NOT) ，若a是ture，则 结果为false。
2
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将JavaScript代码放入<SCRIPT>…</SCRIPT> 标记符中 例如：
<SCRIPT language="JavaScript" > document.write("欢迎您学习JavaScript!"); </SCRIPT>
7. JavaScript函数 JavaScript包含两类函数： • 系统函数 • 用户自定义函数
28
JavaScript编程基础
1) 编码函数 功能：将字符串中非文字、数字字符（如&,%,#,^,空格 符…）转成相对应的ASCII值。 语法：escape(字符串) 2) 译码函数 功能：与escape()相反，将ASCII值转回ASCII字符. 语法：unescape(ASCII值) 3) 求值函数 功能：通常有两个用途，一个用作字符串的运算，另一 个用来指出操作对象。 语法：eval(字符串表达式)
动态网页脚本语言JavaScript
主要内容
一．概述
二．编程基础
三．面向对象的基本概念
四．内置对象 五．DOM操作 六．举例
1Fra Baidu bibliotek
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
在HTML标记中直接写入JavaScript代码 例： <HTML> <BODY> <P onMouseOver=“alert(‘欢迎您学习 JavaScript!')">鼠标移过来</P> </BODY> </HTML>
29
JavaScript编程基础
4) 数值判断函数 功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数 值。 语法：isNaN(测试值) 举例： <Script> var x = 15, y = "黄雅玲"; document.write("<LI>x 不是数值吗？", isNaN(x)); document.write("<LI>y 不是数值吗？", isNaN(y)); </Script> 执行结果： x 不是数值吗？false y 不是数值吗？True 30
美国的Bingo卡片式5*5的方形：B列数值包含1~15，I 列数字包含16~30，N列数字包含31~45,G列数字包含 46~60，O列数字包含61-75。中间是一个空各自。 该例子需要多次重复执行测试，因此可以通过循环（ loop），指定循环的次数来重复一个操作。 var newNum; do{ newNum=colBasis+getNewNum()+1; }while(usedNums[newNum]) usedNums[newNum]=true; document.getElementById(currSquare).innerHTM L=newNum;
5. 运算符与表达式
g) typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof(操作数)
18
JavaScript编程基础
属性
对象类型：
方法 对象实例 对象实例名.属性 对象实例名.方法
19
JavaScript编程基础
5. 运算符与表达式
h) new：定义对象实例。 语法：对象实例名= new 对象类型(参数) 例如：myArray=new Array(3)
6. 程序控制流程
b) 循环结构 while (<逻辑表达式>) {语句组}
<Script> var i = 5; while ( i > 0 ) { document.write("i = " ＋i＋"<BR>"); i--; } </Script>
23
While循环举例
等价于 x=x+y 等价于 x=x%y
13
JavaScript编程基础
5. 运算符与表达式
b) 比较运算符
操作符 A==B 描述 如果两个操作数相等， 返回true 举例 Psw==password
A!=B
A>=B A>B A<=b
如果两个操作数不等， 返回true
如果A大于或者等于B，返回true 如果A大于B， 返回true 如果A小于或等于B， 返回true
26
JavaScript编程基础
6. 程序控制流程
b) 循环结构
for ( 变量 in 对象 ) { <语句或语句组> }
for ( i in ar )
{ document.write("<FONT size=4>", ar[i], "</FONT><BR>"); }
27
JavaScript编程基础
<STYLE> …… </STYLE>
3
JavaScript概述
4. 在HTML文档中嵌入JavaScript代码
将代码独立存储为以 .js 为扩展名的文件，利用SRC 属性将该文件调入 例如：
<script language="JavaScript“ src="welcome.js">
</script>
mobile.length!=11
tries>=2 mflag>20 i<=0
A<B
如果A小于或等于B， 返回true
tries<10
14
JavaScript编程基础
5. 运算符与表达式
c) 算术运算符
运算符 意义 加(Addition) 减 (Subtraction) 乘 (Multiplicati on) 运算符 意义 除(Division) 求余 (Modulus) 递增 (Increment) 运算符 意义 递减(Decrement) 取负值(Unary Negation)
11
JavaScript编程基础
4. 常量
a. 字符串常量：（String Literals）
一般字符串常量： ‘ ’ ， “ ” 特殊字符的字符串常量
字符 \b \f \n \r 意义 后退一格(Backspace) 换页(Form feed) 换行(New line) 返回(Carriage return) 字符 \t \’ \” \\ 意义 制表(Tab) 单引号 双引号 反斜线(Backslash)
注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0” 是数值，“空字符串”是字符串。
6
JavaScript编程基础
2. 数据类型转换
a) 自动数据类型转换
如果表达式中用（+）运算符，且其中一个操作数为字 符串，另一个操作数为数值时，JavaScript自动将数值 转成字符串。 例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15”+8 结果：x=158
21
JavaScript编程基础
6. 程序控制流程
b) Switch结构 switch ( <变量> ) { case <特定数值1>：<语句或语句组1>； break; case <特定数值2>：<语句或语句组2>； break; default：<语句或语句组>； }
22
JavaScript编程基础
16
JavaScript编程基础
5. 运算符与表达式
e) 字符串运算符（String operators） f) 条件运算符（？） 格式：条件表达式? 值1 : 值2 如果条件表达式的结果是ture，返回值1，否则 返回值2。 var a, b; max = a>b? a : b
17
JavaScript编程基础
为
字符串)
10
JavaScript编程基础
3. 变量
c) 变量的作用域： 全局变量(Global variable) 局部变量(Local variable) <Script> var gv = "JavaScript"; // gv是全局变量 function test() { var lv = "VBScript"; // lv是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } test(); document.write("document的输出：<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); </Script>
welcome.js文件内容如下： document.write("欢迎您学习JavaScript!");
4
document.write(
);
var A="Uppercase A"; document.write(A); document.write( "Uppercase A" ); document.write("<BR>"); document.write("gv=" + A + "<BR>");
i) this：代表当前对象，因此用在不同的地方， 就有不同的结果。 this.属性 this.方法
20
JavaScript编程基础
6. 程序控制流程
a) 选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} if <逻辑表达式> { 语句组 } else if <逻辑表达式> { 语句组 } else { 语句组 }
5
JavaScript编程基础
1. 数据类型
数值型(Number)：包含整数或浮点数。 布尔型(Logical)：取值为true或false。1,0 字符型(String)：用单引号或双引号括起来的零个 或多个的字符或数字所组成。 空类型(null)：表示没有值，取唯一值”null”，大 小写敏感。
9
JavaScript编程基础
3. 变量
b) 变量的声明 变量声明时，不必定义类型，所有类型均由小写的 var声明。 例如： var name; （JavaScript自动给出一个未定义值） var name, sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均
25
JavaScript编程基础
6. 程序控制流程
b) 循环结构 for ( [初始值]；[条件]；[增量] ) { <语句或语句组>}
<Script> for ( var i = 5; i > 0; i-- ) { document.write("i = " ,i ,"<BR>"); } </Script>