Download presentation
Presentation is loading. Please wait.
1
了解JavaScript
2
JavaScript概述 什么是JavaScript脚本语言？ (1) 脚本语言(Scripting Language)？
由ASCII码构成，可直接用任何的文本编辑器开发完成。是一种不必事先编译，只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序 (2) JavaScript？ JavaScript是由网景公司开发的一种跨平台，基于对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中，随网页一起传送到客户端浏览器，然后通过浏览器的解释器来解释执行。
3
JavaScript概述 2. JavaScript的特点 脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台
4
JavaScript概述 3. JavaScript的功能 制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率
5
JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 在HTML标记中直接写入JavaScript代码 例：
<BODY> <P onmouseover="alert('欢迎您学习JavaScript!')">鼠标移过来</P> </BODY> </HTML> 运行
6
JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 <script>
将JavaScript代码放入<Script>…</Script>标记符中 例如： <script> document.write("欢迎您学习JavaScript!"); </script> 运行
7
JavaScript概述 4. 在HTML文档中嵌入JavaScript代码
将代码独立存储为以 .js 为扩展名的文件，利用SRC属性将该文件调入 例如： <script src="welcome.js"> </script> welcome.js文件内容如下： document.write("欢迎您学习JavaScript!");
8
JavaScript概述 4. 在HTML文档中嵌入JavaScript代码
为避免某些浏览器不完全支持JavaScript，而造成错误，可将JavaScript代码用注释语句括起来 例如： <Script > <!-- …… --> </Script>
9
JavaScript编程基础 1. 数据类型 数值(Number)：包含整数或浮点数。
逻辑值(Logical)：取值为true或false。 字符串(String)：用单引号或双引号括起来的零个或多个单一的字符所组成。 空值(null)：表示没有值，取唯一值”null”，大小写敏感。 未定义值(undefined)：表示尚未定义值。 注：null不能写成Null或NULL。 null既不等于“0”，也不等于“空字符串”。因为“0”是数值，“空字符串”是字符串。
10
JavaScript编程基础 2. 数据类型转换 自动数据类型转换
例如：var x=”我今年”+18; 结果：x=“我今年18” var x=”15” 结果：x=158 var y=15+8; 结果：y=23 如果表达式中用了其它运算符，JavaScript自动将字符串转成数值。 例如：var x=”30”/5; 结果：x=6 var y=”15”-“8”; 结果：y= 举例
11
JavaScript编程基础 2. 数据类型转换 数据类型转换函数 eval(字符串)：将传入的字符串参数内容，转换成相应的数值，例如：
y=eval(“15”)+8; 结果：y=23 parseInt(字符串，[底数])：将传入的字符串，转换成指定底数的数值。 parseFloat(字符串)：将传入的字符串，转换成浮点数值。 举例
12
JavaScript编程基础 3. 变量 变量命名 以字母或下划线开头（不能以数字开头），后面接数字或其它字母。 变量名区分大小写。
var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<br>"); document.write(a); </script>
13
JavaScript编程基础 3. 变量 变量的声明 变量声明时，不必定义类型，所有类型均由小写的var声明。 例如：
var name; （JavaScript自动给出一个未定义值） var name,sex; （JavaScript自动给出一个未定义值） var name=”张永”，sex=”女生”； (二变量均为字符串)
14
JavaScript编程基础 3. 变量 变量的作用域：全局变量(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("lv=" + lv + "<br>"); </Script>
15
JavaScript编程基础 4. 常量 字符串常量（String Literals） 一般字符串常量 特殊字符的字符串常量
布尔常量（Boolean Literals）：true或false。 整数常量（Integers Literals） 浮点常量（Floating-Point Literals） 数组常量（Array Literals） 字符 意义 \b 后退一格(Backspace) \t 制表(Tab) \f 换页(Form feed) \’ 单引号 \n 换行(New line) \” 双引号 \r 返回(Carriage return) \\ 反斜线(Backslash)
16
JavaScript编程基础 5. 运算符与表达式 赋值运算符 运算符 意义 = x=5 /= x=x/y += x=x+y %= 求余赋值
-= x=x-y *= x=x*y
17
JavaScript编程基础 5. 运算符与表达式 比较运算符 举例 操作符 描述 举例 A==B 如果两个操作数相等，返回true
Psw =password A!=B 如果两个操作数不等，返回true mobile.length!=11 A>=B 如果A大于或者等于B，返回true tries>=2 a>B 如果A大于B，返回true mflag>20 A<=b 如果A小于或等于B，返回true i<=0 A<B 如果A小巧或等于B，返回true tries<10
18
JavaScript编程基础 5. 运算符与表达式 算术运算符 举例 运算符 意义 + 加(Addition) / 除(Division)
-- 递减(Decrement) - 减(Subtraction) % 求余(Modulus) 取负值(Unary Negation) * 乘(Multiplication) ++ 递增(Increment)
19
JavaScript编程基础 5. 运算符与表达式 逻辑运算符
a&&b ：逻辑与(Logical AND)，若a,b都是ture，则结果为ture。 a||b ：逻辑或(Logical OR) ，若a,b任一是ture，则结果为ture。 !a ：逻辑非(Logical NOT) ，若a是ture，则结果为false。
20
JavaScript编程基础 5. 运算符与表达式 字符串运算符（String operators） 条件运算符（？）
格式：条件表达式？值1：值2 如果条件表达式的结果是ture，返回值1，否则就返回值2。 举例 new：定义对象实例。 语法：对象名称 = new 对象类型（参数） 例如：myArray=new Array(3)
21
JavaScript编程基础 5. 运算符与表达式 delete：删除对象、属性、数组、变量
格式：delete 对象名 delete 对象名.属性名 delete 数组名[索引值] delete 变量名 注：删除成功返回true，删除失败返回flase 举例 typeof：用来判断操作数的类型 格式：typeof 操作数 或 typeof （操作数） this：代表当前对象，因此用在不同的地方，就有不同的结果。
22
JavaScript编程基础 6. 程序控制流程 选择结构 if <逻辑表达式> 语句 else
{ 语句组 } else if <逻辑表达式> else if <逻辑表达式> { 语句组 } else { 语句组} 举例
23
JavaScript编程基础 6. 程序控制流程 选择结构 Switch结构： switch ( <变量> ) {
case <特定数值1>：<语句或语句组>； case <特定数值2>：<语句或语句组>； default：<语句或语句组>； }
24
JavaScript编程基础 6. 程序控制流程 循环结构 while (<逻辑表达式>) {语句组}
var i = 5; while ( i > 0 ) { document.write("i = " ,i ,"<BR>"); i--; } </Script>
25
JavaScript编程基础 6. 程序控制流程 循环结构 do { 语句或语句组 }while (<逻辑表达式>)
var i = 5; document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>
26
JavaScript编程基础 6. 程序控制流程 循环结构 for ( [初始值]；[条件]；[增量] )
{ <语句或语句组>} <Script> for ( var i = 5; i > 0; i-- ) { document.write(“i = ” ,i ,“<BR/>"); } </Script>
![JavaScript编程基础 6. 程序控制流程 循环结构 for ( [初始值]；[条件]；[增量] )](http://slidesplayer.com/slide/11578362/62/images/26/JavaScript%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80+6.+%E7%A8%8B%E5%BA%8F%E6%8E%A7%E5%88%B6%E6%B5%81%E7%A8%8B+%E5%BE%AA%E7%8E%AF%E7%BB%93%E6%9E%84+for+%28+%5B%E5%88%9D%E5%A7%8B%E5%80%BC%5D%EF%BC%9B%5B%E6%9D%A1%E4%BB%B6%5D%EF%BC%9B%5B%E5%A2%9E%E9%87%8F%5D+%29.jpg "{ <语句或语句组>} <Script> for ( var i = 5; i > 0; i-- ) { document.write( i = ,i , <BR/> ); } </Script>")
27
JavaScript编程基础 6. 程序控制流程 循环结构 for ( 变量 in 对象 ) { <语句或语句组> }
例 例2
28
JavaScript编程基础 6. 程序控制流程 循环结构 with ( <对象> ) { <语句或语句组> }
{ <语句或语句组> } <Script> document.write ("限时抢购物品："); document.write ("<Li>ViewSonic 17\" 显示器。"); document.write ("<Li>EPSON 打印机。"); </Script> <Script> with (document) { write ("限时抢购物品："); write ("<Li>ViewSonic 17\" 显示器。"); write ("<Li>EPSON 打印机。"); } </Script>
29
break和continue语句 与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。
30
JavaScript编程基础 6. 程序控制流程 注释语句 // <单行注释语句> /* <多行注释语句> */
31
JavaScript的事件处理 主要内容 1、事件 (Event)：鼠标或键盘的动作称为事件 。
2、事件驱动(Event Driver)：由事件引发的一连串程序的动作，称为事件驱动。 3、事件处理程序(Event Handler)：对事件进行处理的程序或函数。 4、事件处理程序语法
32
JavaScript的事件处理 1、常见事件 事件 动作 Abort 中止正在加载的对象 Unload 关闭当前网页 Blur 失去焦点
MouseDown 按下鼠标左键 Focus 获取焦点 MouseMove 移动鼠标指针 Change 改变对象的值 MouseOut 鼠标指针离开某对象 Click 在对象上单击鼠标 MouseOver 鼠标指针悬停于某对象之上 DblClick 在对象上双击鼠标 MouseUp 放开鼠标左键 DrogDrop 拖拽对象 Move 窗口被移动时 Error 加载文件或图形时发生错误 Resize 窗口大小被改变 KeyDown 按下键盘上的任意键的瞬间 Select 选择某对象 KeyPress 按下键盘上的任意键时 Submit 单击表单上的Submit按钮 KeyUp 某键被按下后弹起来的瞬间 Reset 单击表单上的Reset按钮 Load 浏览器读入文件时
Similar presentations
