Web应用系统安全开发课件：使用JavaScript编写网页行为

Web应用系统安全开发

使用

J

a

va

S

c

r

i

p

t

编写网页行为2.3.1

JavaScript基础1.

概述➢HTML定义网页的内容，CSS规定网页的布局，JavaScript则是对网页行为进行编程

➢JavaScript是一种动态类型、弱类型、基于原型的直译式脚本语言，其解释器被称为JavaScript引擎，

是浏览器的一部分。➢JavaScript用来给HTML网页增加动态功能➢JavaScript是所有现代浏览器以及HTML5中的默认脚本语言➢JavaScript特点➢脚本语言➢基于对象➢简单➢动态性➢跨平台性实例2-72.

语法(1)输出➢使用alert()弹出警告框。➢使用document.write()方法将内容写到HTML文档中。➢使用innerHTML写入到HTML元素。➢使用console.log()写入到浏览器的控制台。(2)语句➢JavaScript语句向浏览器发出命令，告诉浏览器该做什么<script>document.getElementById("demo").innerHTML="我的第一段JavaScript";

</script>(3)注释➢单行注释以“//”开头，多行注释以“/*”开始，以“*/”结尾(4)数据类型➢JavaScript的数据类型有字符串、数字、布尔、数组、对象、null、undefined➢JavaScript拥有动态数据类型，这意味着相同的变量可用作不同的类型(5)变量➢变量可以使用短名称，也可以使用描述性更好的名称➢变量必须以字母开头，也能以“$”和“_”符号开头，变量名称对大小写敏感。➢JavaScript变量均为对象，声明一个变量就创建了一个新的对象。➢在JavaScript中创建变量通常称为“声明”变量，可使用var关键词，如下代码所示：var

x=2;y=3;var

name=“Gates”;(6)运算符➢算术运算符一元运算符包括：前置或后置自增“++”、前置或后置自减“--”、正号“+”和负号“-”。二元运算符包括：加“+”、减“-”、乘“*”、除“/”和取余“%”。➢赋值运算符赋值运算符“=”用于给变量赋值，其它运算符可以和赋值运算符联合使用，构成组合运算符。➢比较运算符比较运算符用来比较两个操作数的值，返回值为布尔类型。小于“<”、大于“>”、小于等于“<=”、大于等于“>=”、相等“==”、不等于“!=”、全等(值和类型)“===”和非全等(值和类型)“!==”。➢逻辑运算符逻辑与“&&”、逻辑或“||”和逻辑非“!”。➢条件运算符表达式1?表达式2:表达式3➢if…else

if…else

语句if(条件1){当条件1为true时执行的代码}else

if(条件2){当条件2为true时执行的代码}else{当条件1和条件2都不为true时执行的代码}➢switch

语句switch(n){case1:执行代码块1;break;case2:(7)条件语句➢if语句

if(条件){只有当条件为true时执行的代码}➢

if…else语句if(条件){当条件为true

时执行的代码}else{当条件不为true时执行的代码}执行代码块2;break;default:实例2-8n与case1和case2不同时执行的代码}(8)循环语句➢for循环语句for(语句1;语句2;语句3){被执行的代码块}➢

for…in循环语句var

teacher={fname:"Keke",lname:"Wu",age:40};for(m

in

teacher){n=n+teacher[m];}➢while循环语句while(条件){需要执行的代码}➢do…while循环语句

do{需要执行的代码}while(条件);(9)

break语句(11)错误处理语句➢用于跳出switch语句➢用于跳出循环语句try{(10)

continue语句在这里运行代码➢continue语句退出当前循环；若控制表达式为真，}还允许继续进行下一次循环catch(err){在这里处理错误}(12)函数➢函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块➢函数就是包裹在花括号中的代码块，前面使用了关键词functionfunction

functionname(argument1,argument2,argument3,…){这里是要执行的代码}实例2-92.3.2

JavaScript对象1.

概述➢JavaScript中的所有事物都是对象➢JavaScript对象是拥有属性和方法的数据➢属性是与对象相关的值，方法是能够在对象上执行的动作➢访问对象属性的语法➢objectNpertyName➢访问对象方法的语法➢objectName.methodName()(1)

Array对象：在单个变量中存储多个值newArray();newArray(size);newArray(element0,element1,...,elementn);(2)

Boolean对象：

true或falsenew

Boolean(value);//构造函数Boolean(value);//转换函数(3)

Date对象：处理日期、时间var

myDate=new

Date();(4)

Math对象：➢执行数学任务➢没有构造函数，无需创建，直接使用varpi_value=Math.PI;varsqrt_value=Math.sqrt(15);2.

基本对象(6)

String对象：

处理字符串newString(s);String(s);➢Global对象，即全局对象，是预定义的对象。➢在客户端JavaScript中，全局对象就是Window对象var

myNum=newNumber(value);var

myNum=Number(value);(5)

Number对象：

原始数值包装对象(7)

Global对象：3.

文档对象➢文档对象模型(Document

Object

Model，简称DOM)是W3C组织推荐的处理可扩展标记语言的标准编程接口➢是一种与平台和语言无关的应用程序接口(API)➢是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中(1)

document对象➢每个载入浏览器的HTML文档都会成为document对象➢document对象可以从脚本中对HTML页面中的所有元素进行访问(2)元素对象➢元素对象代表着一个HTML元素，其子节点可以是元素节点、文本节点、注释节点。(3)事件对象➢事件对象代表事件的状态，比如事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等➢事件通常与函数结合使用，函数不会在事件发生前被执行4.

浏览器对象➢浏览器对象模型(Browser

Object

Model，简称BOM)是用于描述对象与对象之间层次关系的模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。➢BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该

对象的子对象。➢BOM没有相关标准，每个浏览器都有其自己对BOM的实现方式。(1)

window对象➢window对象表示浏览器中打开的窗口(2)

navigator对象➢navigator对象包含有关浏览器的信息(3)

screen对象➢screen对象中存放着有关显示浏览器屏幕的信息➢JavaScript程序将利用这些信息来优化它们的输出，以