JavaScript精简笔记

引入方式

外部引用
<script>  </script>

内部引用
<script src="../js/demo.js"></script>

输出语句

window.alert("hello");---弹窗输出
document.write();---HTML输出
console.log();---浏览器控制台输出

变量

var 全局变量，可重复定义但是值会被覆盖
let 局部变量，代码块中有效，不能重复定义
const 常量，值不能改变

数据类型

typeof 获取数据类型
alert(typeof age);以弹框的形式将 age 变量的数据类型输出

原始数据类型
number：数字（整数、小数、NaN(Not a Number)
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

运算符

大部分的运算符使用方式和java一样

==：判断类型是否一样，如果不一样，则进行类型转换，再去比较值
===：判断类型是否一样，如果不一样，直接返回false，再去比较值

var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false

类型转换

使用==运算符时，会有类型转换

其他类型转为number
string转number：按照字符串字面值转为数字，如果不是数字转为NaN
var str = "20";
alert(parseInt(str) + 1);

boolean转number：true转为1，false转为0
var flag = +false;
alert(flag); // 0

其他类型转为boolean
* number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
* string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
* null类型转换为 boolean 类型是 false
* undefined 转换为 boolean 类型是 false

流程控制语句

* if 
* switch
* for
* while
* dowhile

函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；
JavaScript 函数通过 function 关键词进行定义
function add(a,b){
	return a+b;
}
或者
var add = function (a,b){
	return a+b;
}

调用：let result = add(10,20);

常用对象

javascript 提供了很多对象供使用者来使用
基本对象，BOM对象，DOM对象

基本对象举例：
	Array对象用于定义数组，相当于Java中集合长度是可以变化的
	var arr = new Array(1,2,3);
	var arr = [1,2,3];
	arr[索引] = 值;
	alert(arr3[索引]);
	for (let i = 0; i < arr.length; i++) {
    	alert(arr[i]);
	}
	
	// push:添加方法
	var arr5 = [1,2,3];
	arr5.push(10);
	alert(arr5);  //数组的元素是 {1,2,3,10}

	// splice:删除元素
	var arr5 = [1,2,3];
	arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
	alert(arr5); // {2,3}

String对象
	var 变量名 = new String(s); 
	var 变量名 = "数组"; 
	length：字符串的长度
	charAt()---返回在指定位置的字符
	indexOf()---检索字符串
	trim()---去除字符串两端的空格
	var str4 = '  abc   ';
	alert(1 + str4.trim() + 1);

自定义对象
	var 对象名称 = {
	    属性名称1:属性值1,
	    属性名称2:属性值2,
	    ...,
	    函数名称:function (形参列表){},
		...
	};
	var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }
    };
	alert(person.name);  //zhangsan
	alert(person.age); //23
	person.eat();  //干饭~

BOM

BOM：Browser Object Model 浏览器对象模型。
也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现
比如：我现在想将浏览器地址栏的地址改为 `https://www.itheima.com` 
就可以通过使用 BOM 中定义的 `Location` 对象的 `href` 属性，
代码： `location.href = "https://itheima.com";` 

BOM 中包含了如下对象：
	* Window：浏览器窗口对象
	* Navigator：浏览器对象 （基本不使用）
	* Screen：屏幕对象 （基本不使用）
	* History：历史记录对象
	* Location：地址栏对象

Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

获取window对象
    显式调用
	window.alert("abc");
	隐式调用
	alert("abc");

window对象函数
	`alert()`显式带有一段消息和一个确认按钮的警告框
	`confirm()`显式带有一段消息以及确认和取消按钮的对话框
	`setTimeout(function,毫秒值)` : 在一定的时间间隔后执行一个function，只执行一次
	`setInterval(function,毫秒值)` :在一定的时间间隔后执行一个function，循环执行

	// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
	var flag = confirm("确认删除？");
	alert(flag);

	定时器代码：
	当我们打开浏览器，3秒后才会弹框输出 `hehe`，并且只会弹出一次
	setTimeout(function (){
	    alert("hehe");
	},3000);

	当我们打开浏览器，每隔2秒都会弹框输出 `hehe`。
	setInterval(function (){
	    alert("hehe");
	},2000);

History对象
History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取
使用 `window.history`获取，其中`window.` 可以省略

History对象的函数
`back()`加载history列表中的前一个url
`forward()`加载history列表中的下一个url

Location对象
	Location 对象是 JavaScript 对地址栏封装的对象。
	可以通过操作该对象，跳转到任意页面。

获取Location对象
	window.location.方法();
	location.方法();

Location对象属性
	Location对象提供了很多属性。以后常用的只有一个属性 `href`
	`href`设置或返回完整的url
	
	在浏览器首先会弹框显示 `要跳转了`，当我们点击了 `确定` 就会跳转到 百度的首页。
	alert("要跳转了");
	location.href = "https://www.baidu.com";

案例：3秒跳转到百度首页
document.write("3秒跳转到首页..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);

DOM

DOM：Document Object Model 文档对象模型。
也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，
只不过 XML 文档中的标签需要我们写代码解析，
而 HTML 文档是浏览器解析。封装的对象分为
	* Document：整个文档对象
	* Element：元素对象
	* Attribute：属性对象
	* Text：文本对象
	* Comment：注释对象

JavaScript 通过 DOM， 就能够对 HTML进行操作了
	* 改变 HTML 元素的内容
	* 改变 HTML 元素的样式（CSS）
	* 对 HTML DOM 事件作出反应
	* 添加和删除 HTML 元素

**DOM相关概念：**

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。
该标准被分为 3 个不同的部分：
	1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
	   * Document：整个文档对象
	   * Element：元素对象
	   * Attribute：属性对象
	   * Text：文本对象
	   * Comment：注释对象
	2. XML DOM： 针对 XML 文档的标准模型
	3. HTML DOM： 针对 HTML 文档的标准模型
	   该标准是在核心 DOM 基础上，
	   对 HTML 中的每个标签都封装成了不同的对象
		* 例如：`<img>` 标签在浏览器加载到内存中时会被封装成 `Image` 对象，
		  同时该对象也是 `Element` 对象。
	    * 例如：`<input type='button'>` 标签在浏览器加载到内存中时
	      会被封装成 `Button` 对象，同时该对象也是 `Element` 对象

获取Element对象
HTML中的Element对象可以通过`Document`对象获取,而`Document`对象是通过window对象获取

`Document` 对象中提供了以下获取 `Element` 元素对象的函数
	* `getElementById()`：根据id属性值获取，返回单个Element对象
	* `getElementsByTagName()`：根据标签名称获取，返回Element对象数组
	* `getElementsByName()`：根据name属性值获取，返回Element对象数组
	* `getElementsByClassName()`：根据class属性值获取，返回Element对象数组

	var img = document.getElementById("light");
	alert(img);
	
	var divs = document.getElementsByTagName("div");
	for (let i = 0; i < divs.length; i++) {
	    alert(divs[i]);
	}

事件监听

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码

事件绑定（两种方式）
<body>
   
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>

常见事件
----------------------------------------
| 事件属性名  | 说明                     |
| ----------- | -----------------------|
| onclick     | 鼠标单击事件             |
| onblur      | 元素失去焦点             |
| onfocus     | 元素获得焦点             |
| onload      | 某个页面或图像被完成加载   |
| onsubmit    | 当表单提交时触发该事件    |
| onmouseover | 鼠标被移到某元素之上      |
| onmouseout  | 鼠标从某元素移开         |

<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementById("register").onsubmit = function (){
	    //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
	    return true;
}
    </script>
</body>

表单验证案例

有如下注册页面，对表单进行校验，
如果输入的用户名、密码、手机号符合规则，则允许提交；
如果不符合规则，则不允许提交。

完成以下需求：
1. 当输入框失去焦点时，验证输入内容是否符合要求
2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，
   如果不合符则阻止表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>

    </div>


    <script>
		//1. 验证用户名是否符合规则
	    //1.1 获取用户名的输入框
	    var usernameInput = document.getElementById("username");
	
	    //1.2 绑定onblur事件 失去焦点
	    usernameInput.onblur = checkUsername;
	
	    function checkUsername() {
	        //1.3 获取用户输入的用户名
	        var username = usernameInput.value.trim();
	
	        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
	        var reg = /^\w{6,12}$/;
	        var flag = reg.test(username);
	
	        //var flag = username.length >= 6 && username.length <= 12;
	        if (flag) {
	            //符合规则
	            document.getElementById("username_err").style.display = 'none';
	        } else {
	            //不合符规则
	            document.getElementById("username_err").style.display = '';
	        }
	        return flag;
	    }
	
	    //1. 验证密码是否符合规则
	    //1.1 获取密码的输入框
	    var passwordInput = document.getElementById("password");
	
	    //1.2 绑定onblur事件 失去焦点
	    passwordInput.onblur = checkPassword;
	
	    function checkPassword() {
	        //1.3 获取用户输入的密码
	        var password = passwordInput.value.trim();
	
	        //1.4 判断密码是否符合规则：长度 6~12
	        var reg = /^\w{6,12}$/;
	        var flag = reg.test(password);
	
	        //var flag = password.length >= 6 && password.length <= 12;
	        if (flag) {
	            //符合规则
	            document.getElementById("password_err").style.display = 'none';
	        } else {
	            //不合符规则
	            document.getElementById("password_err").style.display = '';
	        }
	        return flag;
	    }
	
	    //1. 验证手机号是否符合规则
	    //1.1 获取手机号的输入框
	    var telInput = document.getElementById("tel");
	
	    //1.2 绑定onblur事件 失去焦点
	    telInput.onblur = checkTel;
	
	    function checkTel() {
	        //1.3 获取用户输入的手机号
	        var tel = telInput.value.trim();
	
	        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
	        //var flag = tel.length == 11;
	        var reg = /^[1]\d{10}$/;
	        var flag = reg.test(tel);
	        if (flag) {
	            //符合规则
	            document.getElementById("tel_err").style.display = 'none';
	        } else {
	            //不合符规则
	            document.getElementById("tel_err").style.display = '';
	        
	        return flag;
	    }
	
	    //1. 获取表单对象
	    var regForm = document.getElementById("reg-form");
	
	    //2. 绑定onsubmit 事件
	    regForm.onsubmit = function () {
	        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
	
	        var flag = checkUsername() && checkPassword() && checkTel();
	
	        return flag;
	    }
    </script>
</body>
</html>

RegExp对象

`RegExp`是正则对象，正则对象是判断指定字符串是否符合规则

正则对象两种创建方式
	var reg = /正则表达式/;
	var reg = new RegExp("正则表达式");

函数：
	`test(str)`：判断指定字符串是否符合规则，返回 true或 false

正则表达式
	正则表达式定义了字符串组成的规则
	也就是判断指定的字符串是否符合指定的规则
	如果符合返回true，如果不符合返回false

	正则表达式是和语言无关的
	很多语言都支持正则表达式
	Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同
	js 中需要使用正则对象来使用正则表达式。

正则表达式常用的规则如下：
	* ^：表示开始
	
	* $：表示结束
	
	* [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
	
	* .：代表任意单个字符，除了换行和行结束符
	
	* \w：代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
	
	* \d：代表数字字符： 相当于 [0-9]

量词：
	* +：至少一个
	
	* *：零个或多个
	
	* ？：零个或一个
	
	* {x}：x个
	
	* {m,}：至少m个
	
	* {m,n}：至少m个，最多n个

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);