JavaScript

JavaScript

为什么要学JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

javascript的作用：

1.表单验证——减轻服务器压力

javascript是客户端脚本语言，对于一些无效性的数据，为了减轻服务器压力，在客户端上进行表单验证，筛除一些无效的数据验证。

2.制作页面特效

3.动态改变页面内容（如动态轮播、选项卡显示等）

特点：

1.向HTML页面中添加交互行为

2.脚本语言，语法和Java类似

3.解释性语言，边执行边解释（即使一行代码出错，前面的内容也能运行显示）

JavaScript组成

由ECMAScript（ES6）、BOM、DOM三部分组成

基本结构：

<script type="text/javascript">
 <!-- 
 JavaScript语句
  -->
</script>

< script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可。

JavaScript的执行原理

网页中引用JavaScript的方式

1.行内（标签内）引入

<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');">

2.HTML文件内部使用< script>标签引入

在html文件中使用< script> < /script>标签，可以写在html文件的任何位置（标签内除外）

3.外部JS文件

写在js文件中，在HTML文件中通过

<script src="export.js type="text/javascript"></script>

引入.

ECMAScript（ES6）

ECMAScript是一种语法标准（约束）

主要是对语法、变量、数据类型、运算符、逻辑控制语句。关键字、保留字、对象等内容进行标准约束.

JavaScript核心语法

变量

1.先声明变量再赋值

var width;
width=10;

2.同时声明和赋值变量

var userName="六月";
var i,j,k=15;  //只给K赋值，i、j声明了没赋值

3.不声明直接赋值（不提倡）

userName="六月";
i=1;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不提倡使用

变量的作用域

1.全局变量

在函数外声明的变量，网页上的所有脚本和函数都能访问它
全局变量在页面关闭后被删除

2.局部变量

在函数内声明的变量（必须用var），只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
局部变量在函数运行以后被删除

数据类型

1.undefined

var width;

变量width没有初始值，将被赋予值undefined

2.null

表示一个空值，与undefined值相等。

（用于判断对象是否为空）

3.number

整数和浮点数

var score=90; //整数
var score=96.5; //浮点数

4.boolean

布尔型true 和false

5.string

被引号（单引号和双引号）括起来的文本

var string="This is a string"

6.object

var string =null;

typeof string的结果为object类型

typeof运算符

用于检测变量的返回值
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null

数组

（1）创建数组语法：

var 数组名称=new Array(size);

size表示数组中可存放的元素总数，可以使用一个整数自变量来控制数组容量（也允许超出）；也可以不填，代表可以添加任意多的值

（2）数组赋值
1.声明时赋值

var fruit=new Array("apple","orange","peach","banana");

2.分别赋值

var fruit=new Array(2);
fruit[0]="apple";
fruit[1]="orange";

（3）访问数组元素
1.通过数组名称和元素下标直接访问数组元素
2.可以使用for-in循环输出数组元素

运算符号

类型	运算符
算术运算符	+ - * / % ++ –
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& || !

逻辑控制语句

if条件语句

if(条件){
//javascript代码
}else{
//javascript代码
}

if中的条件
1.如果是数字类型，除了0以外都为true, 0为false
2.如果是字符串类型，字符串长度大于0都为true,长度为0则为false
3.null和undefined为false
4.其他有值的都为true

switch多分支语句

switch(表达式){
   case 常量1：
         javascript语句1;
         break;
   case 常量2：
         javascript语句2;
         break;
   ....
   default：
         javascript语句3;
         break;
}

for、while循环语句

for(初始化;条件;增量){
    JavaScript代码
}

while(条件){
    JavaScript代码
}

for-in循环语句

类似java中的增强型for循环

var fruit=["apple","orange","peach","banana"];
for(var i in fruit){
    document.write(fruit[i]+"<br/>")
}

注释

1.单行注释以//开始

2.多行注释以/*开始，以 */结束

常用的输入/输出

alert()

在页面弹出一个输出框（警告框）
alert(“提示信息”);

prompt()

在页面中弹出一个用户输入框
prompt(“提示信息”,“输入框的默认信息”);

语法约定

1.代码区分大小写
2.变量、对象和函数的名称规范
3.要写分号

程序调试

1.断点调试

（1）浏览器自带JS调试工具（如Chrome的F12）
（2）可设置断点，变量监控等
语法错误排查–>逻辑错误排查–>修改错误

2.alert()调试

使用alert()弹出不确定的数据，来判断出现错误的位置

3.console调试

在控制台输出不确定的数据，来判断出现错误的位置

函数

类似于java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用

函数可以分为系统函数和自定义函数

系统函数

1.parseInt(“字符串”)

将字符串转换为整型数字
如：parseInt(“86”)将字符串"86"转换为整型值86

2.parseFloat(“字符串”)

将字符串转换为浮点型数字
如：parseFloat(“3.45”)将字符串“3.45”转换为浮点数3.45

3.isNaN()

用于检查其参数是否是非数字
如果是数字，返回false，
如果不是数字，返回true

自定义函数

1.定义函数语法：

function 函数名（参数1，参数2，参数3,....）{
   //javascript语句
   [return 返回值]
}

不带参数则为无参函数，
带参数则为有参函数
return返回值可有可无，根据情况添加

2.调用函数
函数调用一般和表单元素的事件一起使用，调用格式：
事件名=“函数名()”;

事件

名称	说明
onload	一个页面或一幅图像完成加载
onclick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

BOM

Browser Object Model（浏览器对象模型）
提供了独立于内容与浏览器窗口进行交互的对象
（用JavaScript操作浏览器）

BOM可实现功能：
1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口以及调整窗口的大小
3.页面的前进、后退

window对象

浏览器窗口对象

常用的属性

history：有关客户访问过的URL的信息

location：有关当前URL的信息

window.属性名=“属性值”

示例：
window.location=“http://www.kgc.cn”;
表示跳转到课工场首页

常用的方法

方法名称	说明
prompt()	显示可提示用户输入的对话框（点击取消返回null）
alert()	显示带有一个提示信息和一个确认按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框（点击确定返回true，点击取消放回false）
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法

将弹出一个确认对话框

confirm("对话框中显示的纯文本 ")

confirm()与alert()和prompt()的区别

alert()：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt()：两个参数，输入对话框，用来提示用户输入一些信息，单击”取消“按钮则返回null,单击”确认“按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm()：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消按钮”，单击"确认"按钮返回true,单击"取消"按钮返回false，因此与if-else语句搭配使用

open()方法

window.open(“弹出窗口的url”,“窗口名称”,“窗口特征”)

history对象

常用方法：

名称	说明
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表的下一个URL
go()	加载history对象列表的某个具体URL

go()方法

若参数为0，则为刷新
参数<0，则-1代表后退一页，-2代表后退两页…
参数>0，则1代表前进一页，2代表前进两页…

location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档（刷新）
replace()	用新的文档替换当前文档

document对象

常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

referrer

document.referrer

通过载入当前文档的URL判断页面是否是从指定链接进入，来执行不同的操作

常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用（对象的id唯一）
getElementsByName()	返回带有指定名称的对象的集合（相同name属性）
getElementsByTagName()	返回带有指定标签名的对象的集合（相同的元素）
write()	向文档写文本、HTML表达式或javascript代码

innerText

document.getElementById("book").innerText="现象级全球畅销书"；

动态改变层、标签中的内容，只能设置纯文本

innerHTML

document.getElementById("book").innerText="<h1>现象级全球畅销书</h1>"；

动态改变层、标签中的内容，可以设置标签及文本

JavaScript内置对象

Array对象

数组对象，用于在单独变量名中存储一系列的值

常用属性

length:设置或返回数组中的元素的数目

常用方法

名称	说明
join()	把数组的所有元素放入一个字符串，通过一个分隔符进行分隔
sort()	对数组排序（默认按首字母排序）
push()	向数组末尾添加一个或更多元素，并返回新的长度
concat()	合并两个数组

Date对象

用于操作日期和时间
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
例如：

var today =new Date()   //返回当前日期和时间
var tdate=new Date("9 1,2017,14:58:12");

常用方法

名称	说明
getDate()	返回Date对象的一个月中的某一天，其值介于1~31之间
getDay()	返回Date对象的星期中的每一天，其值介于0~6之间，0为周日
getHours()	返回Date对象的小时数，其值介于0~23之间
getMinutes()	返回Date对象的分钟数，其值介于0~59之间
getSeconds()	返回Date对象的秒数，其值介于0~59之间
getMonth()	返回Date对象的月份，其值介于0~11之间，0为1月份
getFullYear()	返回Date对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

string对象

用于支持对字符串（文本）的处理
var 字符串对象 =new String(参数)
参数是要存储在String对象中或转换成原始字符串的值
如：

var str =new String("kgc");

常用属性

length

表示字符串长度
语法：
字符串对象.length

如：

var str="this is javascript";
var strLength=str.length;  //长度是18

常用方法

名称	说明
charAt()	charAt(index)返回在指定位置的字符（下标从0开始）
concat()	concat(str2)连接字符串
replace()	replace(str1,str2)用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
split()	split(str)将一个字符串分割成字符串数组
indexOf()	indexOf(str,index)返回某个指定的字符串值在字符串中首次出现的位置，找不到则返回-1
lastIndexOf()	lastIndexOf(str,index)返回一个指定的字符串值最后出现的位置，找不到则返回-1
match()	可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，找不到返回null
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
substr()	从起始索引号提取字符串中指定数目的字符
substring()	substring(index1,index2)提取字符串中两个指定的索引号之间的字符（包括开始位置，不包括结束位置）
slice()	提取字符串中的某个部分，并以新的字符串返回被提取的部分（负数参数则从后往前截取）

Math对象

用于执行常用的数学任务，它包含了若干个数字常量和函数

常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5) 返回26 Math.ceil(-25.5) 返回-25
floor()	对数进行下舍入	Math.floor(25.5) 返回25 Math.floor(-25.5) 返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5) 返回26 Math.round(-25.5) 返回-26
random()	返回0.0~1.0之间的随机数	0.6273608814137365

定时函数

setTimeout()

setTimeout(“调用的函数”,等待的毫秒数)
暂停指定的毫秒数后执行指定的代码

clearTimeout()

用于停止执行setTimeout()方法的函数代码
clearTimeout(setTimeout()返回的ID值)

如：

var myTime=setTimeout("disptime()",1000);
clearTimeout(myTime);

setInterval()

间隔指定的毫秒数不停地执行指定代码
setInterval(“调用的函数”,间隔的毫秒数)

clearInterval()

用于停止setInterval()方法执行的函数代码
clearInterval(setInterval()返回的ID值)

如：

var myTime=setInterval("disptime()",1000);
clearInterval(myTime);

DOM

Document Object Model(文档对象模型)

是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档。

每个HTML页面打开后会被页面加载成文档对象

（JavaScript操作网页内容）

可以分为三个方面：DOM core、HTML-DOM、CSS-DOM

DOM是对文档中的节点进行操作的，document文档中的节点关系如下图：

访问节点

1.使用getElement系列方法访问指定节点

语法：

document.getElementById()          //通过id属性获取对象
document.getElementsByTagName()    //通过标签名获取对象
document.getElementsByName()       //通过name属性获取对象
document.getElementsByClassName()  //通过class属性获取对象

通过ID获取的对象为单个，而通过标签名、name属性、class属性等获得的值为多个对象的集合，需要根据下标[i]指定单个元素对象

2.根据层次关系访问节点

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，子节点为childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	访问节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

上述方法获得的子节点是包括空格等文本节点在内的所有节点，故firstChild、lastChild在有换行的情况下获得的子节点都为空格节点的undefined

3.element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	访问节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

上述方法获取子节点只包括元素节点，而排除了换行等带来的空格等文本节点

oNext=oParent.nextElementSibling || oParent.nextSibling
oPre=oParent.previousElementSibling || oParent.previousSibling
oFirst=oParent.firstElementChild || oParent.firstChild
oLast=oParent.lastElementChild ||oParent.lastChild

通常为了兼容浏览器，可以将两种写法用||连起来使用

节点信息

分为nodeName(节点名称)、nodeValue(节点值)、nodeType(节点类型)三部分

节点名称 nodeName

1.元素节点——元素名称
2.属性节点——属性名称
3.文本节点——#text
4.document节点——#document

节点值 nodeValue

1.元素节点——null
2.属性节点——属性值
3.文本节点——文本信息
4.document节点——null

节点类型 nodeType

1.元素element
NodeType值=1
2.属性attr
NodeType值=2
3.文本text
NodeType值=3
4.注释comments
NodeType值=8
5.文档document
NodeType值=9

操作节点

操作节点的属性

getAttribute(“属性名”)

通过元素对象的属性名获取对应的属性值

setAttribute(“属性名”,“属性值”)

设置元素对象的属性名和对应的属性值

创建和插入节点

创建节点

名称	描述
createElement(tagName)	创建一个标签名为tagName的新元素节点
A.appendChild(B)	把B节点追加到A节点的子节点中的末尾
insertBefore(A,B)	把A节点插入到B节点之前（同级）
cloneNode(deep)	复制某个指定的节点

删除和替换节点

名称	描述
removeChild(node)	删除指定的节点,node为节点对象
replaceChild(newNode,oldNode)	用其他的节点替换指定的节点，newNode为新节点对象，oldNode为被替换的节点对象

示例：

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

操作节点样式

用javascript改变节点样式可以有两种方式

1.style属性

HTML元素对象.style.样式属性=“属性值”;

document.getElementById("titles").style.color="#ff0000";

对于有带“-”的样式属性，去掉"-"，"-"后面的单词首字母改为大写
如：font-size应写为fontSize

2.className属性

HTML元素对象.className=“样式名称”

给元素对象套用定义好的样式

function over(){
	document.getElementById("cart").className="cartOver";
}

获取元素的样式

HTML元素对象.style.样式属性;

document.defaultView.getComputedStyle(元素对象,null).属性

HTML元素对象.currentStyle.样式属性;

alert(document.getElementById(“cartList”).currentStyle.display);
(兼容IE浏览器)

获取元素的位置

在网页中的一些悬浮框可以随着滚轮向下拉固定在固定的位置，我们通过CSS中的position定位可以实现，也可以通过javascript来实现

元素属性

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容量，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

元素属性应用

document.documentElement.scrollTop;   //标准浏览器
//或
document.body.scrollTop;   //chrome

document.documentElement.scrollLeft;
//或
document.body.scrollLeft;

可先获取元素与界面上方及左方边界的距离，然后获取随滚轮向下和向右拉动的距离，两者相加来给元素进行定位，实现元素在网页中固定悬浮的效果。

示例：

var sTop=document.documentElement.scrollTop ||document.body.scrollTop;