PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

讹爪薛
5 years ago
Views:

1 JavaScript 概述管理科学与工程学科耿方方

2 主要内容什么是 JavaScript? JavaScript 发展史 JavaScript 版本 JavaScript 作用 JavaScript 开发工具在 HTML 中使用 JavaScript JavaScript 语法

3 什么是 JavaScript? 概念 JavaScript 是一种为网站添加互动以及自定义行为的客户端脚本语言, 因此通常只能通过 Web 浏览器去完成操作, 而无法像普通意义上的程序那样独立运行

4 什么是 JavaScript? 主要特点解释性执行的脚本语言 JavaScript 的语法基本结构形式与 C C++ Java 十分类似, 但是在使用之前, 不需要先编译, 而是在程序执行中被逐行的解释简单弱类型脚本语言 JavaScript 的简单性主要在于其基于 Java 基本语句和控制流之上的简单而紧凑的设计 ; 其次在于其变量类型是采用弱类型, 并未使用严格的数据类型

5 什么是 JavaScript? 主要特点相对安全的脚本语言 JavaScript 作为一种安全性语言, 不被允许访问本地硬盘, 且不能将数据存入服务器, 不允许对网络文档进行修改和删除, 只能通过浏览器实现信息浏览或动态交互, 从而有效地防止数据的丢失或对系统的非法访问跨平台性的脚本语言 JavaScript 依赖于浏览器本身, 与操作环境无关, 只要计算机能运行支持 JavaScript 的浏览器, 就可正确执行, 从而实现了跨平台的特性

6 JavaScript 发展史 JavaScript 诞生于 1996 年当时, 它的目的是处理以前由服务器端语言 ( 如 Perl) 负责的一些输入验证操作当时, 上网的速度仅为 28.8kbit/s, 在服务器端验证一次表单, 再看到页面需要等待 30s Netscape 公司决定开发一种客户端语言与 Java 没有任何的关系, 它由 Netscape 公司与 Sun 公司合作开发 JavaScript 最开始的名字是 LiveScript, 因当时 Java 风靡一时以及当时正与 Sun 公司进行合作等因素, 于是将 LiveScript 改为了 JavaScript JavaScript 的第一个版本, 出现在 1996 年推出的 NetScape Navigator 2 浏览器中

7 JavaScript 发展史在微软进入市场后, 有 3 种不同的 JavaScript 版本同时存在 : Navigator 中的 JavaScript IE 中的 Jscript 及 CEnvi 中的 ScirptEase 1997 年,JavaScript1.1 版本作为一个草案提交给欧洲计算机制造商协会 (ECMA), 最终由来自 Netscape Sun 微软 Borland 和其他一些对脚本编程感兴趣的公司程序员组成了 TC39 委员会, 该委员会被委派标准化一个通用跨平台中立于厂商的脚本语言的语法和语义 TC39 委员会制定了 ECMA-262 标准, 该标准由国际标准化组织采纳通过, 作为各浏览器生产开发所使用的脚本程序的统一标准

8 JavaScript 版本

9 JavaScript 作用通常情况下,Web 前端开发者使用 JavaScript 在给网页添加交互作用网页的结构层是 HTML; 网页表现层由 CSS 构成 ; 网页行为层由 JavaScript 组成网页上的所有元素属性和文本都能通过使用 DOM( 文本对象模型 ) 的脚本来获得 Web 前端开发者可通过 JavaScript 来实现改变网页内容 CSS 样式对用户输入做出反馈等操作

10 JavaScript 开发工具

11 在 HTML 中使用 JavaScript 用 JavaScript 编写的代码必须通过 HTML/XHTML 文档才能执行目前有三种方法可以调用 JavaScript 方法一 : 将 JavaScript 代码放到文档 <head> 或 <body> 标签中的 <script> 标签之间但最好的做法是将 <script> 标签放到 HTML 文档的最后,<body> 结束标签之前方法二 : 将 JavaScript 代码存为一个扩展名为.js 的独立文件典型的做法是在文档的 <head> 部分放置一个 <script> 标签, 并把它的 src 属性指向该文件方法三 : 直接将脚本嵌入到 HTML 标记的事件中

12 在 HTML 中使用 JavaScript 方法一 :<script> 是 HTML 语言为引入脚本程序而定义的一个双标记在网页中最常用的一种插入脚本的方法是使用 <script></script> 标记对具体方法是 : 把脚本标记对 <script></script> 置于网页的 head 部分或 body 部分中, 然后在其中加入脚本程序

13 在 HTML 中使用 JavaScript 案例 1: <!DOCTYPE html> <head> <title> 第一个 JavaScript 程序 </title> </head> <body> <h1> 第一个 JavaScript 程序 </h1> <script>document.write( <h3>welcome!</h3> ); </script> </body> </html>

14 在 HTML 中使用 JavaScript 方法二 : 将 JavaScript 代码存为一个扩展名为.js 的独立文件典型的做法是在文档的 <head> 部分放置一个 <script> 标签, 并把它的 src 属性指向该文件

15 在 HTML 中使用 JavaScript 案例 2: <html> <head> <title> 链接式 </title> <meta charset="utf-8"> </head> <body> <h1> 我的第一个 JS 程序 </h1> <script src="demo2-01.js"></script> </body> </html> Demo2-01.js var today = new Date(); var hournow = today.gethours(); var greeting; if (hournow > 18) { greeting = 'Good evening!'; } else if (hournow > 12) { greeting = 'Good afternoon!'; } else if (hournow > 0) { greeting = 'Good morning!'; } else { greeting = 'Welcome!'; } document.write('<h3>' + greeting + '</h3>');

16 在 HTML 中使用 JavaScript 方法三 : 可以直接在 HTML 某些标记内添加事件, 然后将 JavaScript 脚本写在该事件的值内, 以响应输入元素的事件案例 3: <html> <head> <title> 第一个 JavaScript 程序 </title> </head> <body> <p onclick= javascript:alert( Hello,the Web world! ); >click here</p> </body> </html>

17 在 HTML 中使用 JavaScript 浏览器在遇到 <script> 元素时会停止载入脚本, 然后检查, 看看自己是否有什么要做的这样会影响页面的加载时间需要注意的是 : 上述代码中 <script> 标签没有包含传统的 type="text/javascript" 属性, 是因为在 HTML5 规范中,script 属性默认是 text/javascript, 所以可以省略, 但是在 HTML4.01 和 XHTML1.0 规范中,type 属性是必须的

18 语法结构 JavaScript 程序使用 Unicode 字符集编写, 它是一种区分大小写的语言, 也就是说, 在输入关键字变量函数名以及所有的标识符时, 都必须采取一致的字母大小写格式标识符可以按照下列格式规则组合起来的一或多个字符 : 第一个字符必须是一个字母下划线 (_) 或一个美元符号 ($); 其他字符可以是字母下划线美元符号或数字按照惯例, 标识符采用驼峰大小写格式, 也就是第一个字母小写, 剩下的每个单词的首字母大写, 例如 : firstsecond mycar dosomethingimportant 不能把关键字保留字 true false 和 null 用作标识符

19 语法结构 JavaScript 会忽略程序中记号之间的空格制表符和换行符因为可以在程序中任意使用空格制表符和换行符, 因此开发者可以采用整齐一致的方式排版 JavaScript 代码, 增加代码的可读性 JavaScript 中的简单语句后面通常都有分号 (;) 主要是为了分割语句

20 注释 JavaScript 和 Java 一样, 它也支持 C++ C 型的注释 JavaScript 会把处于 // 和一行结尾之间的任何文本都当做注释忽略掉此外 /* 和 */ 之间的文本也会被当做注释, 这个注释可以跨越多行, 但是其中不能有嵌套的注释

21 关键字和保留字 JavaScript 具有特定用途的关键字, 这些关键字可用于表示控制语句的开始或结束, 或者用于执行特定操作

22 关键字和保留字 JavaScript 中有可能将来被用作关键字的, 也不能用作标识符的保留字

23 关键字和保留字此外还应该避免把 JavaScript 预定义的全局变量名或全局函数名用作标识符避免使用的标识符如表所示

24 变量变量是用于存储信息的容器 : JavaScript 的变量是一种弱类型变量, 所谓弱类型变量是指它的变量无特定类型, 定义任何变量都是用 var 关键字, 并可以将其初始化为任何值, 而且可以随意改变变量中所存储的数据类型例如 : var smystring 通过赋值语句向 JavaScript 变量赋值 : var x=5; var carname="volvo"; 变量名在 = 符号的左边, 而需要向变量赋的值在 = 的右侧在以上语句执行后, 变量 x 中保存的值是 5, 而 carname 的值是 Volvo 可以使用一条语句定义多个变量, 只要每个变量用逗号分隔开即可 : var message= hi, found=false,age=29;

25 变量实例 4: <html> <body> <script type="text/javascript"> var firstname; firstname="george"; document.write(firstname); document.write("<br />"); firstname="john"; document.write(firstname); </script> <p> 上面的脚本声明了一个变量, 为其赋值, 显示该值, 改变该值, 然后再显示该值 </p> </body> </html>

26 变量在函数内声明了一个变量, 就只能在该函数中访问该变量当退出该函数后, 这个变量会被撤销这种变量称为局部变量您可以在不同的函数中使用名称相同的局部变量, 这是因为只有声明过变量的函数能够识别其中的每个变量如果您在函数之外声明了一个变量, 则页面上的所有函数都可以访问该变量这些变量的生存期从声明它们之后开始, 在页面关闭时结束这种变量成为全局变量例如 : function test(){ var message= hi ; // 局部变量 } test(); alert(message); 错误!

27 数据类型 JavaScript 是一种弱类型语言, 这意味着 Web 前端开发者可以在任何阶段改变变量的数据类型, 而无需像强类型语言一样在声明变量的同时还必须同时声明变量的数据类型 JavaScript 的三种基本数据类型有 : 字符串数值布尔值除了这三种基本的类型外, 还有数组 undefined null 对象

28 数据类型 - 字符串字符串由零个或多个字符构成字符包括 ( 但不局限于 ) 字母数字标点符号和空格字符串必须包在引号里面, 单引号或双引号都可以 JavaScript 可以随意的选用引号, 但最好还是根据字符串所包含的字符来选择即如果字符串包含双引号, 就把整个字符串包含在引号里面 ; 如果包含单引号就把整个字符放在双引号里面如果一个字符串中既有单引号又有双引号, 那么这种情况下需要把那个单引号或双引号看做一个普通字符, 而不是这个字符串的结束标志, 这种情况下需要对这个字符进行转义, 在 JavaScript 中用反斜线对字符串进行转义 var score= run time 3\ 15\ // 转义字符后面的第 1 个字符将按原样输出

29 数据类型 - 字符串下面的表格列出了其余的特殊字符, 这些特殊字符都可以使用反斜杠来添加到文本字符串中 : 代码输出 \r 回车符代码 \' 输出单引号 \t 制表符 \" 双引号 \b 退格符 \& 和号 \f 换页符 \\ 反斜杠 \n 换行符

30 数据类型 - 字符串转换为字符串 : 第一种使用 tostring() 方法, 数值布尔值对象和字符串值都有 tostring() 方法, 但 null 和 undefinded 值没有这个方法第二种是 string () 函数, 这个函数可以将任何类型的值转换为字符串例如 : var age=11; var ageasstring=age.tostring(); // 字符串 11 var found=true; var foundasstring=found.tostring(); // 字符串 true var value1=10, value2=true, value3=null,value4; alert(string(value1)); // 10 alert(string(value2)); // true alert(string(value3)); // null alert(string(value4)); // undefinded

31 数据类型 - 字符串案例 5: <html> <head> <title> 字符串实例 </title> <meta charset="utf-8"> </head> <body> <h1> 字符串变量 </h1> <div id="title">howdy <span id="name">friend</span>!</div> <div id="note">take a look around...</div> <script src="demo js"></script> </body> </html> Demo js var username; var message; username = 'Molly'; message = 'See our upcoming range'; var elname = document.getelementbyid('name'); elname.textcontent = username; var elnote = document.getelementbyid('note'); elnote.textcontent = message;

32 数据类型 - 数值如果想给一个变量赋一个数值, 不用限定它必须是一个整数 JavaScript 允许使用带有小数点的数值, 并且允许任意位小数点, 这样的数称为浮点数, 数值主要数据类型如下所示

33 数据类型 - 数值数值转换 : 把非数值转换为数值的三个函数 :Number() parseint() 和 parsefloat() Number() 可以用于任何数据类型 var num1=number( Hello World! ); //NaN var num2=number( ); //0 var num3=number( ); //11 var num4=number(true); //1 可以使用 parseint() 和 parsefloat() 进行转换, 例如 : var num1=parseint( AF,16) //175 var num2=parseint( AF ) //NAN var num3=parsefloat( 1234blue ) //1234 var num4=parsefloat( 22.5 ) //22.5 var num5=parsefloat( ) //22.34

34 数据类型 - 数值案例 6: <html> <head> <title> 数值变量 </title> <meta charset="utf-8"> </head> <body> <h1> 数值变量 </h1> <div id="content"> <h2>custom Signage</h2> <div id="cost">cost: $5 per tile</div> </div> <script src="demo js"></script> </body> </body> </html> Demo js var price; var quantity; var total; price = 5; quantity = 14; total = price * quantity; var el = document.getelementbyid('cost'); el.textcontent = '$' + total;

35 数据类型 - 布尔值布尔数据只有两个可选值 :true 或者 false 布尔值不是字符串, 不能将布尔值用引号括起来布尔值的 false 与字符串值 false 是完全不相关的两码事

36 数据类型 - 布尔值所有类型的数值都有与 Boolean 值等价的值, 要将一个值转换为其对应的 Boolean 值, 可以调用转型函数 Boolean() 对应关系如表数据类型转换为 true 的值转换为 false 的值 Boolean true false String 任何非空字符串 ( 空字符串 ) Number 任何非零数字值 ( 包括无穷大 ) Object 任何对象 null 0 和 NAN Undefined n/a( 不适用 ) undefined

37 数据类型 - 布尔值案例 7 <html> <head> <title> 布尔变量 </title> <meta charset="utf-8"> </head> <body> <h1> 布尔变量 </h1> <script> var married=true; document.write(typeof(married)+"<br/>"); // 输出 boolean married="true"; document.write(typeof(married)); </script> </body> </html> // 输出 string

38 数据类型 -Undefined Undefined 类型只有一个值, 即特殊的 Undefined 在使用 var 声明变量但未对其加以初始化时, 这个变量的值就是 undefined var message; alert(message==undefined); //true

39 数据类型 -null null 类型只有一个值, 即特殊的 null 从逻辑角度讲,null 值表示一个空对象指针 var car=null; alert(typeof car); //object

40 数据类型 - 数组字符串数值和布尔型数据都属于离散值, 即在任意时刻只能存储一个值如果想用一个变量来存储一组值, 就需要使用数组数组是由名称相同的多个值构成的一个集合, 集合中的每个值都是这个数组的元素例如可以使用数组变量 rank 来存储论坛用户所有可能的级别创建数组的方法方法一 : 同创建任何其他变量的方法类似, 可以直接创建数组并命名, 赋给数组的值被包含在一对中括号里面, 每个值用逗号隔开可以在同一数组中存储字符串数字和布尔值这种方法为字面量法例如 : var colors; colors=[ white, black, custom ] var el=document.getelemnetbyid( color ); el.textcontent=colors[0];

41 数据类型 - 数组方法二 : 数组构造函数 : 这种方法的形式是用一个 new 关键字, 后面跟着 Array (); 值在圆括号中指定, 值之间用逗号分隔还可以调用叫做 item() 的方法来从数组中获取数据例如 : var colors=new Array( white, black, custom ); var el=document.getelemnetbyid( color ); el.innerhtml=colors[0];

42 数据类型 - 数组数组的 length 属性 : 该属性用于返回数组的长度语法 : array.length 例如 : 创建一个数组对象, 并获取该数组对象的长度, 代码如下 : var arr=new Array(1,2,3,4,5); document.write(arr.length); 运行结果 :5 说明 : 当使用 new Array() 创建数组时, 在不对其进行赋值的情况下, length 属性的返回值是 0 Array 对象的下标是从 0 开始的

43 数据类型 - 数组数组的方法 : 1 concat() 方法 : 该方法用于将其他数组连接到当前数组的尾端语法 :arrayobject.concat(arrayx,arrayx,,arrayx) arrayobject: 必选项数组名称 arrayx: 必选项该参数可以是具体的数组元素值, 也可以是数组对象例如 : Var arr=new Array(1,2,3,4); Document.write(arr.concat(6,7,8,9));

44 数据类型 - 数组数组的方法 : 2 shift() 方法 : 该方法用于把数组中的第一个元素从数组中删除, 并返回删除元素的值语法 :arrayobject.shift() arrayobject: 必选项数组名称例如 : Var arr=new Array(1,2,3,4); Var del=arr.shift(); Document.write( 删除元素为 : +del+ ; 删除后的数组为 : +arr); 3 pop() 方法 : 该方法用于把数组中的最后一个元素从数组中删除, 并返回删除元素的值语法 :arrayobject.pop() arrayobject: 必选项数组名称

45 数据类型 - 数组数组的方法 : 4 push() 方法 : 该方法向数组的末尾添加一个或多个元素, 并返回添加后的数组长度语法 : arrayobject.push(newelement1,newelement2,newelement3 ) 5 unshift() 方法 : 该方法向数组的开头添加一个或多个元素, 并返回添加后的数组例如 : var arr=new Array(4,5,6); document.write( 原数组 +arr+ <br/> ); arr.unshift(1,2,3); Document.write( 新数组 +arr);

46 数据类型 - 数组数组的排序 : 1 reverse() 方法该方法用于颠倒数组中的元素顺序语法 : arrayobject.reverse(); 2 sort() 方法该方法用于对数组的元素进行排序语法 : arrayobject.sort(); 获取数组中的某段数组元素语法 : arrayobject.slice(start,end)

47 数据类型 - 数组案例 8: <html> <head> <title> 数组 </title> <meta charset="utf-8"> </head> <body> <h1> 数组 </h1> <div id="content"> <div class="message"> Color: <span id="colors"></span></div> </div> <script src="demo js"></script> </body> </html> var colors = ['white', 'black', 'custom']; colors[2] = 'beige'; var el = document.getelementbyid('colors'); el.textcontent = colors[2];

48 表达式表达式是 JavaScript 的一个短语,JavaScript 解释器可以计算表达式, 从而生成一个值, 最简单的表达式是直接量或变量名表达式可以求出一个值, 求值的过程可以包含运算基本上有两种类型的表达式一专门给变量赋值的表达式 var color= beige ; 二表达式中可以使用两个或更多个值, 表达式最终会返回一个值 var area=3*2;

49 运算符算术运算符 :JavaScript 中, 加减乘除都是一种操作, 这些算术操作中的每一种都必须借助于相应的操作符才能完成, 操作符是 JavaScript 为完成各种操作而定义的一些符号假设 y=3, 则 :

50 运算符赋值运算符用于给 JavaScript 变量赋值, 假设 x=6,y=3, 则 : 加号 (+) 是一个比较特殊的操作符, 它既可以用于数字, 也可用于字符串, 代码如下所示

51 运算符比较运算符 : 给定 x=5, 表格解释了比较运算符

52 运算符逻辑操作符 : 整合多个表达式, 返回 true 或 false 运算符描述例子 && and (x < 10 && y > 1) 为 true or (x==5 y==5) 为 false! not!(x==y) 为 true

53 运算符案例 9: <html> <head> <title> 算术运算符 </title> <meta charset="utf-8"> </head> <body> <h1> 算术运算符 </h1> <div id="content"> <div class="message number">subtotal: $<span id="subtotal"> </span></div> <div class="message number">shipping: $<span id="shipping"> </span></div> <div class="message number">total: $<span id="total"> </span></div> </div> <script src="demo js"></script> </body> </html> var subtotal = (13 + 1) * 5; var shipping = 0.5 * (13 + 1); var total = subtotal + shipping; var elsub = document.getelementbyid('subtotal'); elsub.textcontent = subtotal; var elship = document.getelementbyid('shipping'); elship.textcontent = shipping; var eltotal = document.getelementbyid('total'); eltotal.textcontent = total;

54 想一想? 1 使用字符串运算符 +, 连接字符串, 并使用 document.write 语句输出个人信息 2 已知长方形的长和宽, 根据长方形面积公式, 应用算术运算符计算出长方形的面积

计算机文化

计算机文化 1 Web 前端开发技术与实践第 14 章 : 初始 JavaScript 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.book.51xueweb.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心 2015.9 2 本章主要内容 JavaScript 概述 JavaScript 语法 DOM 案例 : 使用 JavaScript 进行表单验证