WEB前端（二）--JavaScript

JavaScript

全称叫做JavaScript，简称叫做JS
由NetScape(网景)公司提供，是一门专门嵌入在浏览器中执行的脚本语言
主要作用是实现网页中的动画效果，或者实现表单校验等功能

特点

（1）JS是一门直译式的语言（JS不需要编译，直接执行的就是源代码）
java--> 编写时 xx.java --->编译成 xx.class --> 运行class文件
js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程
（2）JS是一门基于对象的语言言(JS中没有类的概念,也没有编译的过程)JS中是有对象的(内置对象、自定义对象)
（3）JS是一门弱类型的语言（JS中的变量不区分类型，可以指向任意的数据）

优势

(1)JS具有良好的交互性
(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
(3)JS具有跨平台性(JS 浏览器)

--JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
--Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台

JS的引入

1.直接写在html中的script标签内部

script标签可以放在head或body中
<script>
    //js代码...
</script>

2.通过script标签引入外部的JS文件

<script src="./js/demo.js"></script>
需要注意的是:
(1)在引入js文件的script标签内部,不要书写JS代码,因为无法执行
(2)引入js文件的script标签最好不要自闭,可能会导致js文件引入失败

3.直接将js代码写在html标签上

<input type="button" onclick="console.log('别点我~~~')"/>

JS语法

基本数据类型

（1）数值类型（number）：JS中所有的数值在底层都是浮点型，只不过在需要时，会自动的在整型和浮点型之间进行转换

    NaN（非数字）、Infinity（无穷大）、-Infinity（负无穷）

（2）字符串类型（string）：JS中字符串是基本数据类型，但JS中也提供的对应的包装对象
JS中的字符串可以使用单引号或者双引号引起来!
（3）布尔类型：布尔类型的值有两个: true和false
（4）undefined类型：声明了变量但没有为变量赋值，此时变量的值是undefined
（5）null类型：表示空值，可以作为函数的返回值，表示函数返回的是一个空的对象

变量的声明

JS中通过var关键字声明变量，声明的变量不区分类型，可以指向任意的数据
JS中是严格区分大小写的
JS有自动断句的功能，即使在一行代码之后，没有加分号，也不会报错

JS的运算符

JS中的运算符和Java中的运算符大致相同

JS中的语句

if分支结构

if (条件 1){
    当条件 1 为 true 时执行的代码
}else if (条件 2){
    当条件 2 为 true 时执行的代码
}else{
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch语句

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
        ...
    default:
        与 case 1 和 case 2 不同时执行的代码
    }

for循环

for (语句 1; 语句 2; 语句 3){
    被执行的代码块
}

while循环

while (条件){
    需要执行的代码
}

JS的数组

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组的特点:

(1)JS中的数组可以存放任意类型的元素
(2)JS中的数组的长度可以被任意改变

JS函数

函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function。

function fn1( [形参1,形参2,...] ){ 
    //函数体... 
}

(function( [形参1,形参2,...] ){ 
    //函数体... 
})( [实参1,实参2,...] );

var fn3 = function( [形参1,形参2,...] ){ 
    //函数体... 
}

JS事件（event）

onclick                                 用户点击HTML元素
ondblclick                              用户双击HTML元素
onchange                                内容改变事件，特别常用于下拉框
onmouseover                             鼠标移动到HTML元素上
onmouseout                              鼠标移开HTML元素
onkeydown                               用户按下键盘按键
onkeyup                                 用户松开键盘按键
onload                                  浏览器已经完成页面加载
onunload                                浏览器关闭时执行，但通常无用，用户直接关闭浏览器甚至中断

DOM操作

DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素提供的一套API。

文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

Window对象

window.alert("text")                    提示信息会话框
window.confirm("text")                  确认会话框
window.prompt("text")                   键盘输入会话框
window.setIntervel(func, time)          每隔指定时间(毫秒)执行，反复执行
window.clearInterval()                  清除时间间隔
window.setTimeout(action,time)          等待指定时间(毫秒)后再执行，执行一次
window.open()                           打开新的窗口
window.close()                          关闭窗口
window.event                            事件对象
window.document                         文档对象
window.history                          历史对象
window.history.length                   浏览过的页面数
window.history.back()                   后退
window.history.forward()                前进
window.history.go(i)                    前进或后退i个页面（i>0前进，i<0后退）

Document对象

document.URL                            在同一窗口打开另一网页
document.fileCreatedDate                文件建立日期，只读属性
document.fileModifiedDate               文件修改日期，只读属性
document.fileSize                       大小，只读属性
document.cookie                         设置和读出cookie
document.charset                        字符集
document.write()                        动态向页面写入内容
document.createElement(tag)             创建指定标签的元素
document.getElementById(id)             获得指定id值的元素
document.getElementsByName(name)        获得指定Name值的元素
document.getElementsByClassName(name)   通过类名来查找元素
document.body                           文档主体，等价于<body></body>

JS获取元素

document 是一个js对象，用于表示当前html网页。当浏览器加载完整个html网页后，会用document对象表示整个html网页！
document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。
document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.getElementsByName（name属性） --得到数组
document.getElementsByClassName （class属性）-- 得到数组
document.body -- 获取当前文档中的body元素
element.parentNode -- 获取当前元素的父元素。element表示当前元素

JS增删改元素

document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象
parent.appendChild( child ) -- 通过父元素添加子元素，其中parent表示父元素，child表示子元素
parent.removeChild( child ) -- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
element.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)

ES6高级语法

var

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

let&const

ES6引入了两个重要的 JavaScript 新关键词：let变量和 const常量。这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。在 ES6 之前，JavaScript只有两种类型的作用域：全局作用域和函数作用域。这样让变量作用域更小，更加节省资源。

转义字符

日常字符串可以使用双引号也可以以单引号表示，那在双引号中，怎么再展现双引号呢？这就需要转义字符，和java语言类似。

'\'

Undefined

没有赋值的变量值为undefined未定义，比java中的null更加灵活，javascript也有null几乎不用。

NaN

请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己