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.调用函数
函数调用一般和表单元素的事件一起使用，调用格式：
事件名=“函数名()”;

事件

BOM

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

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

window对象

浏览器窗口对象

常用的属性

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

location：有关当前URL的信息

window.属性名=“属性值”

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

常用的方法

confirm()方法

将弹出一个确认对话框

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

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

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

open()方法

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

history对象

常用方法：

go()方法

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

location对象

常用属性

常用方法

document对象

常用属性

referrer

document.referrer

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

常用方法

innerText

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

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

innerHTML

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

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

JavaScript内置对象

Array对象

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

常用属性

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

常用方法

Date对象

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

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

常用方法

string对象

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

var str =new String("kgc");

常用属性

length

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

如：

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

常用方法

Math对象

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

常用方法

定时函数

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.根据层次关系访问节点

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

3.element属性

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

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(“属性名”,“属性值”)

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

创建和插入节点

创建节点

删除和替换节点

示例：

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来实现

元素属性

元素属性应用

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

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

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

示例：

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