JavaScript基础知识.doc

JavaScript基础知识学习目标JavaScript编程基础 JavaScript工作原理 如何在Html页面中使用JavaScript （数据类型、变量、常量、运算符、表达式、控制流程、数组、函数）JavaScript事件处理对象和系统函数浏览器对象什么是JavaScript JavaScript是Netscape公司开发的一种脚本语言。该语言编程的程序可以被嵌入到HTML页面中，并直接在浏览器中解释执行。 JavaScript功能(1) 增强页面动态效果(2) 实现页面与用户之间的实时、动态交互JavaScript语言特点 脚本语言(Script Language) 解释执行(Interpreted Language) 基于对象(Object Based) 事件驱动(Event Driven) 简单 弱类型(Weakly Typed Language)JavaScript嵌入到HTML页面中在HTML页面中使用标记嵌入脚本代码。Type=”text/javascript”JavaScript代码的出现位置(1) HTML页面主体部分() 例01.html(2) HTML页面头部() 02.html(3) 单独的外部文件 03.html数据类型JavaScript支持基本数据类型和对象类型(1) 基本数据类型整型 浮点型字符型布尔型(2) 对象类型内置对象 (String、Math、Date)浏览器对象 (Window、Document、History,Forms、) 用户自定义对象变量(1) 命名规则:必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。变量名区分大小写。不允许使用JavaScript关键字做变量名。使用Var声明变量,变量声明时不指定具体数据类型，其具体数据类型由给其赋的值决定。也可以不经声明而直接使用变量，但必须先赋值再取值。例04.htmlJavaScript关键字 被赋以定特含义字符，并用于专门的用途Break continue switch case delete function return typeof if Else var try catch throw finally in this void false true instanceof do while debugger new with default for null常量 整型常量 十进制表示:12 十六进制表示:0x12 八进制表示:012 浮点型常量 3.14 布尔型常量 true 字符型常量 a “abc”空值常量: null例05.htmlJavaScript运算符算术运算符: + - * / + - %逻辑运算符:&与 |或 !非 异或比较运算符:,=,=,!=,=,=完全相同位运算符: 按位取反,&按位与,|按位或,按位异或,带符号右移,无符号右移赋值运算符: =扩展赋值运算符:+= -= *= /= %= != &= |= = = =三目运算符: ()?:字符串连接: + +=3+5+ “aaa”“aaa”+ (3+ 5);表达式 表达式是符合一定语法规则的运算符和操作数的序列。表达式的类型和值:(1) 对表达式中操作数进行运算得到的结果就称为表达式的值(2) 表达式值的数据类型就是表达式的类型表达式的运算顺序:(1) 按照运算符的优先级从高到低进行运算。(2) 优先级相同的运算符按照事先预定的接合方向进行运算。程序控制流程分支语句 If else 例06.html Switch分支语句 例07.html 循环语句 例08.html For循环 While循环 Do-while 循环 For-in循环特殊流程控制语句 09.html Break 跳出循环 Continue 结束本次循环，继续下次循环数组数组是多个相同类型数据的组合,实现对数据的统一管理。JavaScript数组的声明方式:Var a = new Array();Var b = new Array(size);Var c = new Array(v1,v2,v3,);JavaScript数组长度可变，数组对象的length属性表明了该数组的长度。数组元素访问格式: 数组名元素下标有效元素下标的范围: 0length-1;Shift:删除数组的第一项，并返回删除元素的值；如果数组为空则返回undefined。Var a = 1,2,3,4Var b = a.Shift(); b =1;Unshift:将数据添加到数组的开头，并返回数组的长度Var a = 1,2,3,4Var b = a.Unshift (0,-1); A =0,-1, 1,2,3,4 b = 6;Pop:删除数组的最后一项, 并返回删除元素的值；如果数组为空则返回undefined。Push: 将数据添加到数组的尾部，并返回数组的长度Concat:返回一个新的数组，将数组添加到源数组中Var a = 1,2,3,4Var b = a. Concat(0,-1);B = 1,2,3,4, 0,-1 a=1,2,3,4Reverse:数组反转 a.Reverse()Sort:排序Slice(start,end)Var a = 1,2,3,4Var b = a. Slice (2,4);B =2,3,4Join(separator)将数组的元素以separator为分隔符组成新的字符串,如果缺省的话以逗号为分隔符Var a = 1,2,3,4Var b = a.Join(“|”); B = “1|2|3|4”例 10.html函数 JavaScript中的函数(function)，是用来完成相对独立功能的一段代码的集合。 格式: Function () return 语句 函数在定义时不需要指定其返回值类型和是否有返回值。例 11.html事件及事件处理机制1、 事件(Event)用于描述发生了什么事情,用户的鼠标或键盘操作(点击，文字输入,下拉框的选中)以及其他的页面操作(页面的加载和卸载)都会触发相应的事件。2、 事件源(Event Source)可能产生事件的组件，一般网页中为表单组件3、 事件驱动(Event Driven)由事件引发程序的响应，执行事先准备好的事件处理代码，这种程序运行方式称为事件驱动。4、 事件处理代码(Event Handle)JavaScript中事件处理代码通常定义为函数的形式，在其中加入所需要的处理逻辑，并将之关联到所关注的事件源组件上。常用的事件类型OnClick 组件被点击onDbClick 组件被双击onLoad 页面加载onUnload 页面卸载onChange 组件内容发生变化或条目选中状态发生变化onMouseMove 鼠标移动onFocus 获得焦点onBlur 失去焦点举例说明 12.html 13.htmlJavaScript常用对象1、数学对象 Math(静态对象)Math对象的属性:PI 圆周率,EMath对象的方法: Ceil(数值) 向上取整 Floor(数值) 向下取整 Min(数值1, 数值2)最小值 Max(数值1, 数值2)最大值 Pow(数值1, 数值2) 数值1的数值2次方 Random() 0到1的随机数 Round(数值) 四舍五入到整数 Sqrt(数值) 开平方根 Abs(),sin(),cos()举例: 14.html2、 时间对象 封装了日期和时间信息，并提供相关的操作功能。使用前需要声明/创建对象: Var curtime = new Date();如下的相关方法: 得到时间的方法: getYear() 返回年份 getFullYear() getMonth() 返回月份 getDate() 返回日期 getDay() 返回星期几 0 getHours()返回小时数 getMinutes()返回分钟数 getSeconds()返回秒数 getTime() 返回整个时间 设置时间的方法: setYear() 设置年份 setMonth()设置月份 setDate() 设置日期 setHours()设置小时数 setMinutes()设置分钟数 setSeconds()设置秒数 setTime()设置整个时间 转换时间的方法: toLocaleString()把Date对象转换成本地格式的时间字符串。举例: 15.html3、 字符串对象 String 对象描述和处理文本字符串信息创建String对象的语法： New String(s);属性:Length 字符串长度方法:charAt(idx) 返回指定下标的字符indexof(chr) 返回字符所在的位置indexof(chr,idx)lastindexof(chr) substring(m,n)从m位置截取到n位置的字符串 substring(m) 从m位置截取到当前字符串尾部的子字符串substr(m,n) 从m位置截取n个字符串substr(m) 从m位置截取到当前字符串尾部的子字符串 toLowerCase()转成小写 toUpperCase()转成大写 search(str) 检索与正则表达式匹配的值。 match(str)找到一个或多个正则表达式的匹配。如果没有找到str,返回null;如果找到则返回一个数组。 Replace(str1,str2)替换与正则表达式str1匹配的子字符串str2 Split()把子字符串分割成数组 举例: 16.htmlRegExp 对象创建正则表达式的对象语法:(1)Var p = new RegExp(pattern,attributes);(2)Var p = /pattern/attributes;参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。Attributes 是一个可选的字符串,包含的属性”g”(全局匹配),”i”(区分大小写匹配)和”m”(多行匹配),注:如果pattern部分是正则表达式，而不是字符串的话，则该参数必须省略。匹配方法: Test()方法: regexp对象实例.test(字符串) 返回值:如果字符串满足regexp对象实例中规定的正则规则时,返回true,否则返回false; Exec()方法：regexp对象实例. Exec (字符串) 返回值:如果EXEC()方法中没有找到匹配，则返回null，如果找到匹配，则返回一个数组。并且更新全局RegExp对象的属性，以反应匹配结果。数组的0元素包含了完整的匹配，从第1到n元素中包含的是匹配中出现的任意一个子匹配字符串。例17.html系统函数系统函数不属于任何对象，可以在JAVASCRIPT代码中的任何位置直接使用Eval(str) 计算字符串形式给出的表达式的值。parseInt(str) parseInt(str,radix) radix 表示进制将字符串形式的数值解析为整数，如果解析到字符串中间遇到非法字符则返回已解析的内容，而不是出错；如果字符串开头的第一个就是非法字符的话，则返回NaN(非数值类型 not a number)parseFloat(str) 将字符串形式的数值解析为浮点数isNaN(v)判断该数的值是否为NaN例 19.html浏览器对象浏览器对象属于javascript内置对象，使用这些对象可以实现与HTML页面进行交互。浏览器对象的层次模型: DOM模型(Document Object Model,文档对象类型)BOM browse object model =Window对象 表示是浏览器的窗口。 (1) 可以使用window对象来获取浏览器窗口的状态信息，也可以通过它来访问其他浏览器对象及窗口发生的事件信息。 (2) window对象是其他浏览器对象的共同祖先，所以一般在javascript程序中可以省略window对象。 (3) 浏览器打开HTML文档时，通常会创建一个window对象。Window对象常用方法:Alert(object)Open(URL,windowname,parameterlist)补充说明:Parameterlist参数列表的内容Toolbar = yes/no 标准工具条location = yes/no 位置输入字段directions = yes/no 标准目录按钮status = yes/no 状态条menubar = yes/no 菜单条scrollbar = yes/no 滚动条revisable = yes/no 能否改变窗体的大小width = 值 窗口的宽度height = 值 窗口的高度top = 值 窗口的顶部距离屏幕的距离left = 值 窗口的左部距离屏幕的距离 Close()Prompt(text,defaulttext)Confirm(text) 返回值:”点击确定”返回true,否则返回falsesetInterval(func,timer)clearInterval(timer)opener 例 18.htmlNavigator对象 Navigator对象是window对象的属性，它封装了当前浏览器的相关信息。Navigator对象主要属性: appName浏览器名称 appVersion浏览器的版本号 language 浏览器使用的语言 systemlanguage 系统语言 userlanguage 用户言语 platform 操作系统平台例 20.htmlLocation对象Location对象是window对象的属性,表示当前打开的URL,提供相关的操作方法。Location对象的常用属性和方法: Window.location = “url”;指向目标页面 Reload() 刷新，重加载例: 21.html=History对象 History对象是window对象的属性，主要封装了当前浏览器曾经访问过的网页信息，并提供了相应的访问和页面跳转功能。History对象的主要属性和方法: Go(index) 前进或后退指定的多个页面 Back();后退一个页面 Forward();前进一个页面例: 22.htmlDocument对象 Document对象是window对象的属性,它表示的是当前显示的文档，其中封装了文档中元素的相关信息，并提供了相应的操作功能。 常用属性: Document.title 设置文档标题等价于标签。Document.Write();Html DOM结构图Window -navigator -plugins -mime types -frames -location -history -window objects(self,parent) -document -forms -elements -images -embeds -links -anchors -appllets对象属性 Document.title 设置文档标题等价于标签。 Document.bgcolor 背景颜色 Document.fgcolor 前景颜色(文本颜色) Document.linkcolor 未点击的连接颜色 Document.alinkcolor 焦点在连接上的颜色 Document.vlinkcolor点击过后的连接颜色 Document.charset 字符集Document.cookie 设置和读取cookie常用方法 Document.write(); Document.createElement(Tag); /创建一个html标签对象. Document.getElementById(id) /获取指定ID值的对象。 Document.getElementsByName(name) /获取指定Name值的对象。 Document.body /Document.body.linkDocument.body.alinkDocument.body.vlinkDocument.body.textDocument.body.leftMarginDocument.body.rightMarginDocument.body.topMarginDocument.body.bottomMarginDocument.body.backgroundDocument.body.innerText /在文本内容Document.body.innerHTML /在HTML代码Document.body.appendChild(Tag);/绑定一个对象到正文部分常用事件Document.body.onclick = “”Document.body.onmouseover = “”Document.body.onmouseout = “”=HTML DOMDOM （Document Object model）文档对象模型DOM树结构：Document 最顶层的节点，其他节点都附属于它。DocumentType - DTD引用节点DocumentFragment 碎片文档Element 表示起始标签到结束标签之间的内容Attr 表示属性名和内容Text 表示标签之间的文本内容CDataSection 节点Entity Entity定义节点EntityReference 实体引用节点ProcessingInstruction PI节点Comment 注释节点Notation DTD规范中定义的记号创建节点的方法createElement(tagname) 创建一个标签名为tagname的元素createTex