JavaScript基础知识

JavaScript基础知识2017-11-18学习目标JavaScript编程基础JavaScript工作原理如何在Html页面中使用JavaScript（数据类型、变量、常量、运算符、表达式、控制流程、数组、函数）JavaScript事件处理对象和系统函数浏览器对象什么是JavaScriptJavaScript是Netscape公司开发的一种脚本语言。该语言编程的程序可以被嵌入到HTML页面中，并直接在浏览器中解释执行。JavaScript功能(1)增强页面动态效果(2)实现页面与用户之间的实时、动态交互JavaScript语言特点脚本语言(ScriptLanguage)解释执行(InterpretedLanguage)基于对象(ObjectBased)事件驱动(EventDriven)简单弱类型(WeaklyTypedLanguage)JavaScript嵌入到HTML页面中在HTML页面中使用script标记嵌入脚本代码。Scriptlanguage=”javascript”Type=”text/javascript”/ScriptJavaScript代码的出现位置(1)HTML页面主体部分(body)例01.html(2)HTML页面头部(head)02.html(3)单独的外部文件Scriptlanguage=”javascript”src=”外部脚本文件”/Script03.html数据类型JavaScript支持基本数据类型和对象类型(1)基本数据类型整型浮点型字符型布尔型(2)对象类型内置对象(String、Math、Date)浏览器对象(Window、Document、History,Forms、…)用户自定义对象变量(1)命名规则:1必须以字母、下划线或美元符号开头，猿说教育前端学院整理教务处出版后面可以跟字母、下划线、美元符号和数字。2变量名区分大小写。3不允许使用JavaScript关键字做变量名。4使用Var声明变量,变量声明时不指定具体数据类型，其具体数据类型由给其赋的值决定。也可以不经声明而直接使用变量，但必须先赋值再取值。例04.htmlJavaScript关键字被赋以定特含义字符，并用于专门的用途BreakcontinueswitchcasedeletefunctionreturntypeofifElsevartrycatchthrowfinallyinthisvoidfalsetrueinstanceofdowhiledebuggernewwithdefaultfornull常量整型常量十进制表示:12十六进制表示:0x12八进制表示:012浮点型常量3.14布尔型常量true字符型常量‘a’“abc”空值常量:null例05.htmlJavaScript运算符算术运算符:+-*/++--%逻辑运算符:&与|或!非^异或比较运算符:,=,,=,!=,==,===完全相同位运算符:~按位取反,&按位与,|按位或,^按位异或,左移,带符号右移,无符号右移赋值运算符:=扩展赋值运算符:+=-=*=/=%=!=&=|=^====三目运算符:()?:字符串连接:++=3+5+“aaa”“aaa”+(3+5);表达式表达式是符合一定语法规则的运算符和操作数的序列。表达式的类型和值:(1)对表达式中操作数进行运算得到的结果就称为表达式的值(2)表达式值的数据类型就是表达式的类型表达式的运算顺序:(1)按照运算符的优先级从高到低进行运算。(2)优先级相同的运算符按照事先预定的接合方向进行运算。程序控制流程分支语句Ifelse例06.htmlSwitch分支语句例07.html循环语句例08.htmlFor循环While循环Do-while循环For-in循环特殊流程控制语句09.htmlBreak跳出循环Continue结束本次循环，继续下次循环数组数组是多个相同类型数据的组合,实现对数据的统一管理。JavaScript数组的声明方式:Vara=newArray();Varb=newArray(size);Varc=newArray(v1,v2,v3,…);JavaScript数组长度可变，数组对象的length属性表明了该数组的长度。数组元素访问格式:数组名[元素下标]有效元素下标的范围:0~length-1;Shift:删除数组的第一项，并返回删除元素的值；如果数组为空则返回undefined。Vara=[1,2,3,4]Varb=a.Shift();b=1;Unshift:将数据添加到数组的开头，并返回数组的长度Vara=[1,2,3,4]Varb=a.Unshift(0,-1);A=[0,-1,1,2,3,4]b=6;Pop:删除数组的最后一项,并返回删除元素的值；如果数组为空则返回undefined。Push:将数据添加到数组的尾部，并返回数组的长度Concat:返回一个新的数组，将数组添加到源数组中Vara=[1,2,3,4]Varb=a.Concat(0,-1);B=[1,2,3,4,0,-1]a=[1,2,3,4]Reverse:数组反转a.Reverse()Sort:排序Slice(start,end)Vara=[1,2,3,4]Varb=a.Slice(2,4);B=[2,3,4]Join(separator)将数组的元素以separator为分隔符组成新的字符串,如果缺省的话以逗号为分隔符Vara=[1,2,3,4]Varb=a.Join(“|”);B=“1|2|3|4”例10.html函数JavaScript中的函数(function)，是用来完成相对独立功能的一段代码的集合。格式:Function函数名(形参列表){函数体代码[return语句]}函数在定义时不需要指定其返回值类型和是否有返回值。例11.html事件及事件处理机制1、事件(Event)用于描述发生了什么事情,用户的鼠标或键盘操作(点击，文字输入,下拉框的选中)以及其他的页面操作(页面的加载和卸载)都会触发相应的事件。2、事件源(EventSource)可能产生事件的组件，一般网页中为表单组件3、事件驱动(EventDriven)由事件引发程序的响应，执行事先准备好的事件处理代码，这种程序运行方式称为事件驱动。4、事件处理代码(EventHandle)JavaScript中事件处理代码通常定义为函数的形式，在其中加入所需要的处理逻辑，并将之关联到所关注的事件源组件上。常用的事件类型OnClick组件被点击onDbClick组件被双击onLoad页面加载onUnload页面卸载onChange组件内容发生变化或条目选中状态发生变化onMouseMove鼠标移动onFocus获得焦点onBlur失去焦点举例说明12.html13.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、时间对象封装了日期和时间信息，并提供相关的操作功能。使用前需要声明/创建对象:Varcurtime=newDate();如下的相关方法:得到时间的方法:getYear()返回年份getFullYear()getMonth()返回月份getDate()返回日期getDay()返回星期几0getHours()返回小时数getMinutes()返回分钟数getSeconds()返回秒数getTime()返回整个时间设置时间的方法:setYear()设置年份setMonth()设置月份setDate()设置日期setHours()设置小时数setMinutes()设置分钟数setSeconds()设置秒数setTime()设置整个时间转换时间的方法:toLocaleString()把Date对象转换成本地格式的时间字符串。举例:15.html3、字符串对象String对象描述和处理文本字符串信息创建String对象的语法：NewString(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匹配的子字符串str2Split()把子字符串分割成数组举例:16.htmlRegExp对象创建正则表达式的对象语法:(1)Varp=newRegExp(pattern,attributes);(2)Varp=/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(非数值类型notanumber)parseFloat(str)将字符串形式的数值解析为浮点数isNaN(v)判断该数的值是否为NaN例19.html浏览器对象浏览器对象属于javascript内置对象，使用这些对象可以实现与HTML页面进行交互。浏览器对象的层次模型:DOM模型(DocumentObjectModel,文档对象类型)BOMbrowseobjectmodel=====================================Window对象表示是浏览器的窗口。(1)可以使用window对象来获取浏览器窗口的状态信息，也可以通过它来访问其他浏览器对象及窗口发生的事件信息。(2)window对象是其他浏览器对象的共同祖先，所以一般在javascript程序中可以省略window对象。(3)浏览器打开HTML文档时，通常会创建一个window对象。Window对象常用方法:Alert(object)Open(URL,windowname,parameterlist)补充说明:Parameterlist参数列表的内容Toolbar=ye