JavaScript基础知识

1、JavaScript 基础知识学习目标JavaScript 编程基础JavaScript 工作原理如何在 Html 页面中使用 JavaScript（数据类型、变量、常量、运算符、表达式、控制流程、数组、函数）JavaScript 事件处理对象和系统函数浏览器对象什么是 JavaScriptJavaScript 是 Netscape 公司开发的一种脚本语言。 该语言编程的程序可以被嵌入到 HTML页面中，并直接在浏览器中解释执行。JavaScript 功能(1) 增强页面动态效果(2) 实现页面与用户之间的实时、 动态交互JavaScript 语言特点脚本语言 (Script Language

2、)解释执行 (Interpreted Language)基于对象 (Object Based)事件驱动 (Event Driven)简单弱类型 (Weakly Typed Language)JavaScript 嵌入到 HTML页面中在 HTML页面中使用 标记嵌入脚本代码。Type=”text/javascript ”JavaScript 代码的出现位置(1) HTML 页 面 主 体 部 分 () 例1. html(2) HTML 页面头部 () 02.html(3) 单独的外部文件 03.html数据类型JavaScript 支持基本数据类型和对象类型(1) 基本数据类型整型浮点型字符型

3、布尔型(2) 对象类型内置对象 (String 、Math、Date)浏 览 器 对 象 (Window 、 Document 、History,Forms 、, )用户自定义对象变量(1) 命名规则 :必须以字母、 下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。变量名区分大小写。不允许使用 JavaScript 关键字做变量名。使用 Var 声明变量 , 变量声明时不指定具体数据类型，其具体数据类型由给其赋的值决定。也可以不经声明而直接使用变量，但必须先赋值再取值。例 04.htmlJavaScript 关键字被赋以定特含义字符，并用于专门的用途Break continue

4、switch case deletefunction return typeof if Elsevar try catch throw finallyin this void false true instanceofdo while debugger new with defaultfor null常量整型常量十进制表示 :12十六进制表示 :0x12八进制表示 :012浮点型常量 3.14布尔型常量 true字符型常量 a “abc”空值常量 : null例 05.htmlJavaScript 运算符算术运算符 : + - * / + - %逻辑运算符 :& 与 | 或 ! 非 异或比较运

5、算符 :,=,=,!=,=,= 完全相同位运算符 : 按位取反 ,&按位与 ,| 按位或 ,按位异或 , 带符号右移 , 无符号右移赋值运算符 : =扩展赋值运算符 :+= -= *= /= %= != &= |= = =三目运算符 : ()?:字符串连接 : + +=3+5+ “aaa”“aaa”+ (3+ 5);表达式表达式是符合一定语法规则的运算符和操作数的序列。表达式的类型和值 :(1) 对表达式中操作数进行运算得到的结果就称为表达式的值(2) 表达式值的数据类型就是表达式的类型表达式的运算顺序 :(1) 按照运算符的优先级从高到低进行运算。(2) 优先级相同的运算符按照事先预定的接合

6、方向进行运算。程序控制流程分支语句If else 例 06.htmlSwitch 分支语句 例 07.html循环语句 例 08.htmlFor 循环While 循环Do-while 循环For-in 循环特殊流程控制语句 09.htmlBreak 跳出循环Continue 结束本次循环，继续下次循环数组数组是多个相同类型数据的组合 , 实现对数据的统一管理。JavaScript 数组的声明方式 :Var a = new Array();Var b = new Array(size);Var c = new Array(v1,v2,v3, , );JavaScript 数组长度可变 ，数组对象

7、的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: 将数据添

8、加到数组的尾部， 并返回数组的长度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

9、( “| ”);B = “1|2|3|4 ”例 10.html函数JavaScript 中的函数 (function) ，是用来完成相对独立功能的一段代码的集合。格式:Function ()return 语句函数在定义时不需要指定其返回值类型和是否有返回值。例 11.html事件及事件处理机制1、事件(Event)用于描述发生了什么事情 , 用户的鼠标或键盘操作 ( 点击，文字输入 , 下拉框的选中) 以及其他的页面操作 ( 页面的加载和卸载 ) 都会触发相应的事件。2、 事件源 (Event Source)可能产生事件的组件，一般网页中为表单组件3、 事件驱动 (Event Driven)由

10、事件引发程序的响应，执行事先准备好的事件处理代码，这种程序运行方式称为事件驱动。4、 事件处理代码 (Event Handle)JavaScript 中事件处理代码通常定义为函数的形式，在其中加入所需要的处理逻辑，并将之关联到所关注的事件源组件上。常用的事件类型OnClick 组件被点击onDbClick 组件被双击onLoad 页面加载onUnload 页面卸载onChange 组件内容发生变化或条目选中状态发生变化onMouseMove鼠标移动onFocus 获得焦点onBlur 失去焦点举例说明 12.html 13.htmlJavaScript 常用对象1、数学对象 Math( 静态对

11、象 )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();如下的相关方法 :得到时间的

12、方法 :getYear() 返回年份getFullYear()getMonth() 返回月份getDate() 返回日期getDay() 返回星期几 0getHours() 返回小时数getMinutes() 返回分钟数getSeconds() 返回秒数getTime() 返回整个时间设置时间的方法 :setYear() 设置年份setMonth() 设置月份setDate() 设置日期setHours() 设置小时数setMinutes() 设置分钟数setSeconds() 设置秒数setTime() 设置整个时间转换时间的方法 :toLocaleString() 把Date 对象转换成本

13、地格式的时间字符串。举例: 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位置截取到当前字符串尾部的子字符串toLower

14、Case() 转成小写toUpperCase() 转成大写search(str) 检索与正则表达式匹配的值。match(str) 找到一个或多个正则表达式的匹配。 如果没有找到 str, 返回 null;如果找到则返回一个数组。Replace(str1,str2) 替换与正则表达式 str1 匹配的子字符串 str2Split() 把子字符串分割成数组举例: 16.htmlRegExp 对象创建正则表达式的对象语法 :(1)Var p = new RegExp(pattern,attributes);(2)Var p = /pattern/attributes;参数 pattern 是一个字符

15、串 , 指定了正则表达式的模式或其他正则表达式。Attributes 是一个可选的字符串 , 包含的属性” g”( 全局匹配 ), ”i ”( 区分大小写匹配) 和”m”( 多行匹配 ), 注: 如果 pattern部分是正则表达式，而不是字符串的话，则该参数必须省略。匹配方法 :Test() 方法: regexp 对象实例 .test( 字符串)返回值 : 如果字符串满足 regexp 对象实例中规定的正则规则时 , 返回 true, 否则返回 false;Exec() 方法：regexp 对象实例 . Exec ( 字符串)返回值 : 如果 EXEC()方法中没有找到匹配， 则返回 nul

16、l ，如果找到匹配， 则返回一个数组。并且更新全局 RegExp对象的属性，以反应匹配结果。 数组的 0 元素包含了完整的匹配， 从第 1 到 n 元素中包含的是匹配中出现的任意一个子匹配字符串。例 17.html系统函数系 统 函 数 不 属 于 任 何 对 象 ， 可 以 在JAVASCRIPT代码中的任何位置直接使用Eval(str) 计算字符串形式给出的表达式的值。parseInt(str)parseInt(str,radix) radix 表示进制将字符串形式的数值解析为整数， 如果解析到字符串中间遇到非法字符则返回已解析的内容，而不是出错；如果字符串开头的第一个就是非法字符的话，

17、则返回 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) windo

18、w 对象是其他浏览器对象的共同祖先，所以一般在 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 =

19、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 对象的属性， 它封装了当前浏览器的相关信息。N

20、avigator 对象主要属性 :appName 浏览器名称appVersion 浏览器的版本号language 浏览器使用的语言systemlanguage 系统语言userlanguage 用户言语platform 操作系统平台例 20.htmlLocation 对象Location 对象是 window 对象的属性 , 表示当前打开的 URL,提供相关的操作方法。Location 对象的常用属性和方法 :Window.location = “url ”; 指向目标页面Reload() 刷新，重加载例: 21.html=History 对象History 对象是 window 对象的属性，

21、 主要封装了当前浏览器曾经访问过的网页信息，并提供了相应的访问和页面跳转功能。History 对象的主要属性和方法 :Go(index) 前进或后退指定的多个页面Back(); 后退一个页面Forward(); 前进一个页面例: 22.htmlDocument 对象Document 对象是 window 对象的属性 , 它表示的是当前显示的文档， 其中封装了文档中元素的相关信息， 并提供了相应的操作功能。常用属性 :Document.title 设置文档标题等价于 标签。Document.Write();Html DOM结构图Window-navigator-plugins-mime type

22、s-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 字

23、符集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.leftMar

24、ginDocument.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 = “”

25、=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 的元素createTextNode(text) 创建一