JavaWeb必备JavaScript速成

一、引入

        可以内部引入和外部引入，这里介绍外部引入方式

        1. 将代码编写在独立的JS文件中，比如demo.js

        2. 在html页面中用<script>标签引入文件。注意script标签可以出现在html的任意位置，也可以出现多次

<script src="demo.js"></script>

二、基础语法

（1）语法

        1. 区分大小写

        2. 分号可有可无

        3. 注释：单号注释用//，多行注释用/**/

        4. 大括号表示代码块

（2）输出语句

        1. window.alert()将数据写入警告框，注意window可以省略。Safrai警告框展示如下

        

        2. document.write()写入HTML输出，作为页面的一部分显示

        3. console.log()写入浏览器控制台

（3）变量

        1. var声明变量。变量可以存放不同类型的值，并且var定义的变量是全局变量，在代码块中声明的变量在代码块外可以获取

        2. let声明的是局部变量

        3. const定义不可修改的常量

（4）数据类型

        1. typeof()得到数据的数据类型

        2. ==会进行类型转换（只要值相等就是True），全等===不进行类型转换

        3. parseInt()将string转换成number，从第一个字符开始匹配，在遇见第一个非数字的字符时停止转换；如果第一个字符就是非数字，则转换成NaN

三、函数

// 方法一
function function_name(param1, param2...){
    // code
    return return_value
}


// 方法二：用var进行定义
var functionName = function(param1, param2...) {

}

// 调用时 
var result = functionName(params)
alert(result)

四、对象

（1）数组Array

        1. 定义

// 方法一
var arrayName = new Array(element_list)
var arr = new Array(1,2,3)

// 方法二
var arrayName = [element_list]
var arr = [1,2,3]

        注意JS中的array类型和长度都可变

        2. 常用方法

var arr = [1,2,3,4]

// 长度
arr.length

// 遍历所有元素
for (let i=0; i<arr.length; i++){
}

// 遍历有值元素：每个有值元素会作为function的参数e
arr.forEach(function(e){
})
arr.forEach((e)=>{
})

// 添加新元素在尾部，可以同时添加若干
arr.push(1,2)

// 从start开始删除num个
arr.splice(start, num)

（2）字符串

var str = "Hello String"

// 长度
str.length

// 指定位置字符
str.charAt(index)

// 检索字符串所在位置
str.indexOf(substr)

// 去除左右两侧空格，返回新的字符串
var s = str.trim()

// 截取子串，含头不含尾
var s = str.substring(start, end)

（3）JSON对象

        1. 自定义对象

       是由基础类型组合而成的自定义复合类型

// 定义
var myObject = {
    attr1: value1,
    attr2: value2,
    functionName: function(params){}
}
var user = {
    name: 'Tom',
    age: 20,
    eat: function(){
        alert("eat")
    }
}

// 调用
myObject.attr
user.name
myObject.function()
user.eat()

        2. JSON

        是通过JavaScript对象标记法书写的文本， 用于前后端交互，需要将所有attr写在""中

{
    "name": "Tome",
    "age": 20
}

// 字符串定义（注意本质上是文本）
var jsonStr = '{'key1': 'value1'}'
var userStr = '{"name": "Tom", "age": 20, "addr": ['BJ', 'SH']}'

// 将JSON格式字符串转换成JS对象
var obj = JSON.parse(jsonStr)
alert(obj.name)

// JS对象转换成JSON字符串
var jsonStr = JSON.stringify(object)

（4）BOM

        浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个组成部分封装成对象

        1. 浏览器窗口对象Window

// 获取对象，注意调用属性和方法时可以省略window
window

// 获取其他DOM对象
window.history
window.location
window.navigator

// 提示对话框，包括确认和取消两个按钮，分别返回True和False
window.confirm()


// 按照指定周期调用函数，单位为ms
window.setInterval(function, time)

// 一段时间后调用某个函数，单位为ms
window.setTimeout(function, time)

        2. 地址栏对象Location

// 获取（window可以省略）
window.location

// URL地址
location.href
// 获取当前URL
location.href
// 跳转页面
location.href = "https://www.baidu.com"

（5）DOM

        文档对象模型。将HTML标记语言的各个组成部分封装成对象

// HTML中的Element对象可以通过Document对象获取，而Document对象时通过Window对象获取的

// 根据id属性获取，返回单个对象
var h1 = document.getElementById('id')

// 根据标签名，返回对象列表
var divs = document.getElementByTagName('div')

// 根据name属性，返回对象列表
var names = document.getElementByName()

// 根据class属性，返回对象列表
var classes = document.getElementByClassName()


// 改变<img>的src
img.src = "newURL"

// 设置或返回div对象，注意相当于直接在HTML页面中添加newText，因此newText中可以包含新标签
element.innerHTML = “newText”
div.innerHTML += "<font color='red'>very good</font>"

五、事件监听

        在检测到指定事件时执行相应代码

（1）事件绑定

// 方法一：通过HTML中的事件属性
<input type="button" onclick="on()" value="按钮">
<script>
    function on(){
    }
</script>

// 方法二：通过DOM元素属性
<input type="button" id="btn" value="按钮">
<script>
    document.getElementById('btn').onclick=function(){}
</script>

（2）常见事件

onclick	鼠标点击
onblur	失去焦点（输入框）
onfocus	获得焦点
onload	页面/图像完成加载
onsubmit	提交表单
onkeydown	键盘输入
onmouseover	鼠标移动
onmouseout	鼠标移开