Java Web(四）–JavaScript

介绍

JavaScript 教程

JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证；
JS 需要运行浏览器来解析执行JavaScript 代码；
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript，后更名为 JavaScript，和 Java 没有关系；

JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释。
JavaScript 是一种基于对象的脚本语言，可以创建对象，也可使用现有对象(有对象)。
JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）；
使用垃圾回收的编程语言，开发者不需要操心内存分配和回收，主流的垃圾回收算法是标记算法；

说明：

js代码可以写在 script标签中；
type="text/javascript" ：表示这个脚本(script)类型是javascript，可以不写，但是建议写上；

js 语句可以不写 ; 建议写上。

使用方式

方式1

script 标签写 JS 代码；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>script 标签中 写 JS 代码</title>

    <script type="text/javascript">
        //在head内使用script写js
        alert("ok");//使用警告框来显示数据：
    </script>

</head>

<body>

<script type="text/javascript">
    //在body内使用script写js
    console.log("hi");//写入浏览器控制台
</script>

</body>

</html>

说明：

scrpt标签位置可以在 head 和 body 嵌入，执行顺序从上到下；

建议放在head中

alert 是 JavaScript 语言提供的一个警告框函数。它可以输出指定的内容, 变量等信息。

方式2

使用script标签引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 script 标签引入 JS文件</title>

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

</head>

<body>
</body>
</html>

test.js文件JS代码：
alert("我是 test.js 文件");

两种使用js的方式，是二选一，不能混用。
若都使用，不会报错，但是只有一个生效, 前面引入的js生效。

好处：

可维护性

缓存。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件，这意味着如果两个页面都用到同一个JavaScript文件，则该文件只需加载一次，这最终意味着页面加载更快。

内容

JS变量

JavaScript 变量表示存储数据的容器，通过 var 关键词来声明 JavaScript 变量，并以逗号分隔变量。

所有 JavaScript 变量必须以唯一的名称的标识，这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

序号	名称	数据类型	备注
1	数值类型	number
2	字符串类型	string	可以双引号括起来，也可以单引号括起来； "a book of JavaScript"、 'abc'、"a"、 ""；
3	对象类型	object
4	布尔类型	boolean
5	函数类型	function
6	不带有值的变量	undefined	未赋初始值时，默认 undefined
7	空值	null

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

对比var与let、const

let不具备声明提升，var具备声明提升

let声明的范围是块作用域，而var声明的范围是函数作用域。

let是ES6才引入的声明关键字

for循环中的let声明

const与let很相似，最大的区别是const必须初始化，且不能再次赋值。

结语：

大多数开发者尽量限制自己只使用let和const，有助于提升代码质量，因为变量有了明确的作用域、声明位置、以及不变的值。
const优先，let次之。使用const声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型-特殊值</title>
</head>
<body>
<script type="text/javascript">

    //1. typeof()是 JavaScript 语言提供的一个函数，返回变量的数据类型
    //2. 3个特殊值 undefined 没有赋值就使用 null, NaN 当不能识别类型

    var email; //特殊值undefined
    console.log("email= " + email); //undefined
    var address = null;
    console.log("address= " + address); //null
    console.log(10 * "abc"); //NaN= Not a Number

	alert(typeof(email))；


</script>
</body>
</html>

变量的特点：

原始值大小固定，保存在栈内存中

从一个变量到另一个变量复制原始值，会创建该值得第二个副本

引用值是对象，存储在堆内存中

包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身

从一个变量到另一个变量复制引用值，只会复制指针，因此结果是两个变量都指向同一个对象

typeof操作符可以确定值的原始类型，instanceof操作符用于确保值的引用类型（针对数组变量时候，注意使用instanceof的前提是只有一个全局执行上下文）；

变量的执行：任何变量都存在于某个执行上下文中（也称为作用域）。这个上下文（作用域）决定了变量的生命周期，以及它们可以访问代码的哪些部分。

执行上下文分为 ① 全局上下文、② 函数上下文、③ 块级上下文

代码执行流每进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数

函数或块的局部上下文不仅可以访问自己作用域内的变量，也可以访问任何包含上下文乃至全局上下文的变量

全局上下文只能访问全局上下文中的变量和函数，不能直接访问局部上下文中的任何数据

变量的执行上下文用于确定什么时候释放内存；

JS数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组定义</title>

    <script type="text/javascript">
        //"Audi", "BMW", "Volvo";

        //数组定义方式1
        var cars1 = ["Audi", "BMW", "Volvo"];
        console.log("cars1=" + cars1);
        console.log(cars1[1]);//表示访问 cars1 数组的第2个元素, 1表示下标/索引，从0开始编号

        //数组定义方式2
        var cars2 = [];//空数组
        //添加元素
        cars2[0] = "奥迪";
        cars2[1] = "宝马";
        cars2[2] = "奔驰";
        console.log("cars2=" + cars2);
        console.log("cars2[2]=" + cars2[2]);//奔驰
        console.log("cars2[10]=" + cars2[10]);//如果该元素不存在，返回的就是undefined

        //数组定义方式3
        var cars3 = new Array("Audi", "BMW", "Volvo");
        console.log("cars3=" + cars3);
        console.log("cars3[0]=" + cars3[0]);//Audi

        //数组定义方式4
        var cars4 = new Array();//空数组
        console.log(typeof cars4); //object
        cars4[0] = "法拉利";
        cars4[1] = "保时捷";
        cars4[2] = "yy";//相当于是给数组扩容
        cars4[0] = "zz";//替换

        cars4[8] = "红旗";//扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素为undefined
        console.log("cars4[3]=" + cars4[3]);//undefined
        console.log("cars4= " + cars4);

        //遍历数组
        for (i = 0; i < cars4.length; i++) {
        console.log(cars4[i]); //log 方法会自动换行
            }

    </script>
</head>
<body>
</body>
</html>

JS函数

函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块；

执行函数的方式：1、主动调用；2、事件触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用函数方式1</title>
    <script type="text/javascript">
        //定义没有返回值的函数
        function f1() {
            alert("f1() 被调用...");
        }

        f1();

        //定义有形参的函数
        //这里的形参，不需要指定类型, name的数据类型是由实参决定
        function f2(name) {
            alert("hi " + name);
        }

        f2("jack");

        //定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据来决定
        //js的函数调用机制和java一样
        function f3(n1, n2) {
            return n1 + n2;
        }

        alert("f3(10, 20)=" + f3(10, 20));
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用函数的第二种方式</title>
    <script type="text/javascript">
        //可以理解成f1指向了函数
        var f1 = function () {
            alert("hi");
        }
        console.log(typeof f1);
        f1();//调用函数

        var f3 = f1;
        f3();
        var f2 = function (name) {
            alert("hi " + name);
        }
        f2("小米");

        var f4 = function (n1, n2) {
            return n1 + n2;
        }
        alert("res= " + f4(10, 50));
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用注意事项和细节</title>

    <script type="text/javascript">
        //1. JS 中函数的重载会覆盖掉上一次的定义
        //2. 当你调用f1() 时候其实调用的是 f1(name)
        //3. 调用f1(name) 如果你没有传入实参, 那么这个name就是undefined

        function f1() {
            alert("ok jack~")
        }
        function f1(name) {
            alert("hi " + name);
        }
        f1();

        // 2. 函数的 arguments 隐形参数（作用域在 function 函数内）
        // (1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。
        // (2) 隐形参数特别像 java 的可变参数一样。 public void fun( int ... args )
        // (3) js 中的隐形参数跟 java 的可变参数一样。操作类似数组

        function f2() {
            //遍历 函数的 arguments 隐形参数,arguments 是数组
            //如果我们希望通过 console.log输出对象的数据，使用, 连接而不是+
            console.log("arguments= ", arguments);
            console.log("arguments长度= " + arguments.length)
            alert("f2()...")
        }

        f2(10, 20, 30, "java");

        //3 (1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
        //  (2)如果有匹配上，就赋给他， 如果没有匹配上，也无所谓
        //  (3)仍然会把所有的实参，赋给 arguments
        //  (4)如果形参个数，大于了实参个数，则该形参的值为undefined

        function f3(n) {
            console.log("n=" + n);//100
            console.log("arguments= ", arguments);//100, 90, 20
        }

        f3(100, 90, 20);

    </script>
</head>
<body>

</body>
</html>

说明：

如果不调用函数，那么该函数时不会执行；

JS中函数的重载会覆盖掉上一次的定义；

函数的arguments隐形参数（作用域在 function 函数内），在function函数中不需要定义，可以直接用来获取所有参数的变量，跟 java 的可变参数一样。操作类似数组 public void fun( int ... args )；

实参、形参的类型、数量无需保持一致

JS自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
    <script type="text/javascript">

        //自定义对象的方式1
        //person是一个空对象，没有自定义的函数和属性
        var person = new Object();
        console.log("person类型=" + typeof(person));//object
        //增加一个属性name
        person.name = "jack";
        //增加一个属性
        person.age = 20;
        //增加函数
        person.say = function () {
            //这里的this就是person
            console.log("person的信息 " + this.name + " " + this.age + " " + this.job);
        }

        //调用
        //访问属性
        console.log("name= " + person.name + " " + person.email);
        //访问方法
        person.say();

        //小细节, 如果没有定义属性，直接使用，就会出现变量提升， 显示undefined
        console.log("address= " + person.address);

    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象方式2：{} 形式</title>
    <script type="text/javascript">
        //演示自定义对象方式2：{} 形式

        var person = {
            name: "老韩", //说明多个属性和函数之间，使用,隔开
            age: 20,
            hi: function () {
                console.log("person信息= " + this.name + " " + this.age);
            },
            sum: function (n1, n2) {
                return n1 + n2;
            }
        }

        //使用
        console.log("外部访问 name= " + person.name + " age=" + person.age);
        person.hi();
        console.log("sum=" + person.sum(10, 30));
    </script>
</head>
<body>

</body>
</html>

事件

事件是电脑输入设备与页面进行交互的响应；事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行；

事件的注册（绑定）：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定；

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码；

动态注册事件：

通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 形式；
步骤：1. 获取标签<--->dom 对象； 2. dom 对象.事件名 = fucntion(){}

常用事件

onload加载完成事件

onload : 某个页面或图像被完成加载
页面加载完成之后，常用于做页面 js 代码初始化操作

onclick单击事件

常用于按钮的点击响应操作

onblur失去焦点事件

常用用于输入框失去焦点后验证其输入内容是否合法

onchange内容发生改变事件

常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件

常用于表单提交前，验证所有表单项是否合法
邮箱的正则表达式： var emailPatt = /^[w-]+@([a-zA-Z]+.)+[a-zA-Z]+$/;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick 单击事件</title>
    <script type="text/javascript">
        //定义一个函数
        function sayOK() {
            alert("你点击了sayOK按钮");
        }

        //1. 在js中，将页面窗口 映射成 window dom对象
        //2. window对象有很多的函数和属性，可以使用
        //3. window.onload 表示页面被加载完毕
        //4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码  
        window.onload = function () {
            alert("动态注册 onload 事件");

            // 动态注册 onclick 事件
            //1. 先拿到 id=btn01 的 button对应dom对象（当页面加载完成后，即执行window.onload后，才能得到）
            //2. 通过 dom对象动态的绑定onclick事件
            //3. 通过document的 getElementById获取对应的dom对象
            // 挖坑~填坑
            var btn01 = document.getElementById("btn01");

            // alert(btn01); //[object HTMLButtonElement]

            btn01.onclick = function () {
                alert("你点击了sayHi按钮");
            }
        }

    </script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK按钮</button>

<!--动态注册 onClick 事件-->
<button id="btn01">sayHi按钮</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur 失去焦点事件</title>
    <script type="text/javascript">

        //静态绑定
        function upperCase() {
//1. 先得到fname 输入框的value -> 得到对应dom对象
            var fname = document.getElementById("fname");
            fname.value = fname.value.toUpperCase();
        }

//在页面加载完毕，完成动态绑定
        window.onload = function () {
 //1.得到fname2的dom对象
            var fname2 = document.getElementById("fname2");
            fname2.onblur = function () {
                fname2.value = fname2.value.toUpperCase();
            }
        }
    </script>
</head>

<body>
输入英文单词：
<input type="text" id="fname" onblur="upperCase()" /><br />
输入英文单词：
<input type="text" id="fname2" />
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange 内容发生改变事件</title>
    <script type="text/javascript">
        function mySal() {
            alert("工资范围变化了~");
        }

        //动态注册
        window.onload = function () {
            //获取到sel01的dom对象
            var sel01 = document.getElementById("sel01");
            //给sel01绑定onchange事件
            sel01.onchange = function () {
                alert("你换女友的~");
            }
        }
    </script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()">
    <option>--工资范围--</option>
    <option>10k以下</option>
    <option>10k-30k</option>
    <option>30k以上</option>
</select> <br/>

你当前女友是谁：
<select id="sel01"> <!-- 动态绑定 onchange-->
    <option>---女友---</option>
    <option>艳红</option>
    <option>春桃</option>
    <option>春花</option>
</select>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit 表单提交事件</title>
    <script type="text/javascript">
        //静态注册表单提交事件
        function register() {
            //先得到输入的用户名和密码
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            //判断是否为空""
            if ("" == username.value || "" == pwd.value) {
                alert("用户名和密码不能为空, 不能提交");
                return false;//不提交
            }
            //表示要提交
            return true;
        }

        //动态注册表单提交事件
        window.onload = function () {
            //使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致 （查看页面的源代码，可查看是否一致）-->查找问题；
            //得到 from2 表单dom对象
            var form2 = document.getElementById("form2");

            // //给form2绑定onsubmit事件， onsubmit 绑定的函数会直接将结果(f,t)返回给onsubmit
            form2.onsubmit = function () {
                if(form2.username.value == "" || form2.pwd.value == "") {
                    alert("用户名和密码不能为空, 不能提交");
                    return false;//不提交
                }
                return true;
            }
        }

    </script>
</head>
<body>
<h1>注册用户1</h1> <!-- 静态注册表单提交事件 -->
<form action="ok.html" onsubmit="return register()">
    u: <input type="text" id="username" name="username"/><br/>
    p: <input type="password" id="pwd" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>

<h1>注册用户2</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
    u: <input type="text" name="username"/><br/>
    p: <input type="password" name="pwd"/><br/>
    <input type="submit" value="注册用户"/></form>
</body>
</html>

运算符

算术运算符

用于执行变量与/或值之间的算术运算；

赋值运算符

用于给 JavaScript 变量赋值；

关系运算符

在逻辑语句中使用，以测定变量或值是否相等；

注意事项：
等于： == 是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算符

用于测定变量或值之间的逻辑；

注意事项
   在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
   0 、null、 undefined、""(空串) 都认为是 false
   && 且运算，有两种情况 => (即 && 返回值是遵守短路与的机制)
   || 或运算, 有两种情况 => (即|| 返回值是遵守短路或的机制)
   短路现象：当&&和||有确定结果后，后面的表达式不再执行；

条件运算符

类似 Java 的三元运算符。

    <title>条件运算符</title>
    <script type="text/javascript">
        // 规则 如果 (10 > 1) 条件表达式为 T, 返回第一个表达式的值 ；条件表达式为 F, 返回第 2 个表达式的值
        var n1 = 90;
        var n2 = 1;
        var res = n2 > 9 ? "jack" + " 你好" : 800 + n1;
        alert("res=" + res);
    </script>