《第12章javascript基础剖析.》由会员分享，可在线阅读，更多相关《第12章javascript基础剖析.（73页珍藏版）》请在金锄头文库上搜索。
1、Web技术及应用,主讲：梁春泉 Email: lcquan 电话：87091546,第12章 Javascript基础,2015年11月,学习目标,理解JavaScript程序的概念与作用； 掌握JavaScript标识符和变量的概念及使用方法； 掌握JavaScript常用运算符和表达式概念； 掌握JavaScript中顺序、分支、循环等3种程序控制结构语法； 掌握JavaScript函数的定义方法，并学会使用； 学会综合运用JavaScript设计具有动态、交互功能的网页。,12.1 JavaScript概述,JavaScript最初由Netscape公司的Brendan Eich（布兰登
2、艾奇）设计，最初命名为LiveScript，是一种动态、弱类型、基于原型的语言。后来，Netscape与Sun公司进行合作，将LiveScript改名为JavaScript JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸如欢迎信息、数字日历、跑马灯，显示浏览器停留时间等特殊效果，提高网页的可观性。,12.1.1 JavaScript简介,JavaScript是一种基于对象和事件驱动、安全性、轻量级、解释型、弱类型的客户端脚本语言。 决定WEB页面的行为，具
3、有客户端数据验证、用户交互等功能 JavaScript具有如下特点： 1.简单性(小程序、无须编译、解释性、弱数据类型) 2.安全性( Browser无法访问本地硬盘数据/写入到数据库) 3.动态性（JS可以直接对用户提交的信息作出回应） 4.跨平台性（支持JS的Browser）,12.1.2 第一个JavaScript程序, 第一个JavaScript实例 document.write(“第一个JavaScript实例!“); ,基本语法： js语句块; 或 js语句块;,12.1.3 JavaScript放置,JavaScript代码放置有4种情形: (1)头部;(2主体;(3)单独的js
4、文件;(4)直接在事件处理代码中。 JavaScript程序本身不能独立存在，它是依附于某个HTML页面，在浏览器端运行的。 可将JavaScript函数写成一个独立的js文件，在HTML文档中引用该js文件，引用时必须使用src属性。 JavaScript文件的扩展名为*.js。格式如下： 注：此时在标记之间的所有JS语句都被忽略，不会执行。,12.1.3 JavaScript放置-头部, 调用head中定义的JavaScript函数 function message() alert(“调用head中定义的JavaScript函数！“); head标记内定义的JavaScript函数 ,注：
5、JS脚本插入在头部时，JavaScript通常需要定义为函数格式，格式： function 函数名(参数1,参数2,，参数n)函数体语句;。,12.1.3 JavaScript放置-主体, 主体部分JavaScript alert(“JS放置在主体中，直接运行！”); ,注：JS脚本插入在主体时，JavaScript语句能够被立即执行。也可以定义成函数，但必须引用才能执行。,12.1.3 JavaScript放置-外部JS, 调用外部js文件的JavaScript函数 ,注：外部JS文件需要引用到HTML文件中才能被执行。编写外部JS文件时不需要使用标记。,/*- demo.js */ fun
6、ction message() alert(“调用外部js文件中的函数！“); ,这是引用外部JS,这是执行外部JS,12.1.3 JavaScript放置-事件处理代码, 直接在事件处理代码中加入JavaScript代码 ,注：JS代码直接放置在事件处理的代码中，可以直接运行。也可以加上“javascript:alert(信息);”,12.2 JavaScript程序,JavaScript程序由语句、函数、对象、方法、属性等构成，程序结构包括顺序、分支和循环三种基本结构。 12.2.1 语句和语句块 JavaScript语句是发送给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。 例如：
7、alert(“这是告警消息框!”); JavaScript语句可以分批组合起来形成语句块，语句块以左花括号“”开始，以右花括号“”束。 例如：var s=0;document.write(“S的值=”+s);,12.2.2 代码,JavaScript代码是由若干条语句或语句块构成的执行体 var color=“red“; if(color=“red“) document.write(“颜色是红色!“); alert(“颜色是红色!“); ,12.2.3 消息对话框,JavaScript中的消息对话框分为告警框、确认框和提示框。 1.警告框 alert (message) 2.确认框 confi
8、rm (message) 3.提示框 prompt (text, defaultText), 告警消息框使用实例 alert(“这是告警消息框！“); ,12.2.3 消息对话框-告警框,注：确定按钮必须响应，否则屏蔽一切操作。告警信息为纯文本信息或字符串，不能含有HTML标记。, 确认框使用实例 function show_confirm() var r=confirm(“请选择按钮!“); if (r=true) alert(“您按了确定按钮！“); elsealert(“您按了取消按钮！“); ,12.2.3 消息对话框-确认框,注：确认按钮的返回值，类型为逻辑值，确定true，取消fa
9、lse。, 提示框使用实例 function disp_prompt() var name=prompt(“请输入您的姓名“,“李大为“); if (name!=null ,12.2.3 消息对话框-提示框,注：选择“确定”返回输入的值，选择“取消”返回null。,12.2.4 JavaScript注释,JavaScript注释：单行注释和多行注释。 单行注释：使用“/”作为注释标记，可以单独一行或跟在代码末尾，放在同一行中，“/”后为注释内容部分。 多行注释：以“/*”标记开始，以“*/”标记结束，两个标记之间所有的内容都是注释文本。 使用注释防止代码执行-屏蔽某些语句行的执行。, /这是单
10、行注释 /*这是多行注释 可以包含多行内容 */ /alert(“此语句不执行！“); alert(“此语句执行了！”);/执行时弹出告警消息框 ,12.3 标识符和变量,在任何一种编程语言中，实际编程时都要使用变量以存储常用的数据。所谓变量，顾名思义，就是在运行期间其值可以通过程序改变的量。 为了便于变量的使用，实际使用时需要给变量加以命名，变量的名字则称为标识符。,12.3.1 命名规范,1.标识符 标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下： (1)必须使用字母或者下划线开始。 (2)必须使用英文字母
11、、数字、下划线组成，不能出现空格或制表符。 (3)不能使用JavaScript关键字与JavaScript保留字。 (4)不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。 (5)大小写敏感，如name和Name是不同的两个标识符。,12.3.1 命名规范,2.关键字 关键字是JavaScript中已经被赋予特定意义的一些单词，关键字不能作为标识符来使用。,12.3.1 命名规范,3.保留字 JavaScript中除了关键字以外，还有一些用于未来扩展时使用的保留字，保留字同样不能用于标识符的定义。,12.3.2 数据类型,数据类型是每一种计算机语言
12、中的重要基础，JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。 1.字符型 字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、你好！、“学习语言”。 在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。 如：“学习不是一件容易”的事件(，交叉错误)。,12.3.2 数据类型-数值型,2.数值型：是JavaScript中最基本的数据类型之一，分为整型、浮点型、内部常量以及特殊值。 整型数值即整数，例如100、-3500、0等都是整数。整数表示方法有十进制表示、八进制和十六进制的
13、方式表示。 使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。 使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。,12.3.2 数据类型-数值型,浮点数，例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.51015。 内部常量：Math.E(自然对数的底数e)、Math.PI等。 特殊值：Infinity（）、NaN-Not a Number。, var i = 304; var f = 3.87; var s = 8.1e3; var o = 034; var h = 0x2
14、A; document.write(“十进制整型数304的输出结果：“+i+“); document.write(“十进制浮点型数3.87的输出结果：“+f+“); document.write(“十进制数科学计数法8.1e3的输出结果：“+s+“); document.write(“八进制整型数034的输出结果：“+o+“); document.write(“十六进制整型数0x2A的输出结果：“+h+“); ,12.3.2 数据类型案例,12.3.2 数据类型-布尔型,3.Boolean（布尔型）是一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。 在
15、实际应用中，布尔型数据常用在关系、逻辑等运算中，运算的结果往往就是true或者false。例如12的比较结果是true，而3=4的比较结果是false。此外，布尔型变量还常用在控制结构的语句中，如if语句等。 JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。,12.3.2 数据类型-其它类型,4.Null : null,表示空,不是0，0是有值的。 5.Undefined：变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:fa
16、lse） 。 6.Object:对象也是JS的重要组成部分，如date、window、document等，在后面介绍。 数据类型之间可以通过函数进行转换。 转换函数如下： Nnumber(value):把值转换成数字（整型或浮点数） String(value):把值转换成字符串 Boolean(value):把值转换成Boolean类型,12.3.3 变量,变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。 格式： var 变量名 =初值,变量名=初值 ； var作用：声明或创建变量，变量命名要“见名知意”。 具有良好编程习惯的程序员应该“先声明变量再使用” 例如： var area = 0; var area=0，y=2,str1=“欢迎你学习JS”; area = 3.14*radius*radius; var status = true; var a,b,c; name=“张华“; /向
