JavaWeb 课堂笔记 —— 02 JavaScript

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 JavaScript ?

JavaScript 是一门跨平台、面向对象的脚本语言，其使得网页可交互。

02 JavaScript 引入方式

标签：<script>

<!-- 内部脚本 -->
<script>
	alert("Hello JavaScript");
</script>

<!-- 外部脚本 -->
<script src="demo.js"></script>

03 JavaScript 基础语法

① 输出语句

<script>
	window.alert("Hello JavaScript"); //弹出警告框
    document.write("Hello JavaScript"); //写入HTML页面
    console.log("Hello JavaScript"); //浏览器控制台输出（F12）
</script>

注：console / kənˈsoʊl / 控制台。

② 变量

var a = 20;
a = "张蓝天";

注：var 为全局变量，可重复定义。

③ 数据类型

var a = 20;
alert(typeof a); //获取数据类型

④ 运算符

⑤ 流程控制语句

04 JavaScript 函数

//定义
function add(a, b){
    return a + b;
}

var add = function(a, b){
   	return a + b;
}

//调用
var result = add(1, 2);
alert(result);

05 JavaScript 对象

① Array

var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];

arr[10] = "hello";
arr[9] = 'a';
arr[8] = true;

注：JavaScript数组相当于Java集合，其长度可变，类型可变。

<script>
    var arr = [1, 2, 3, 4];
    for(int i=0; i<arr.length; ++i){
        console.log(arr[i]);
    }
    
    arr.forEach(function(e){
        console.log(e); //仅遍历有值的元素
    }) 
    arr.forEach( (e) => {console.log(e);} ) //ES6 箭头函数 (...) => {...}
    
    arr.push(7, 8, 9);
    console.log(arr);
    
    arr.splice(2, 2); //start number
    console.log(arr);
</script>

② String

var str = new String("Hello JavaScript");
var str = "Hello JavaScript";

<script>
    var str = "  Hello JavaScript  ";
    
    console.log(str.length);
    console.log(str.charAt(4)); //o
    console.log(str.indexOf(o)); //4
    
    var str2 = str.trim();
    console.log(str2);
    
    console.log(str2.substring(0, 5)) //[start, end)
</script>

③ 对象

var user{
    //属性名：属性值
    name: "Tom";
    age: 10;
    gender: "male";
    //方法
    eat: function(){
        alert("干饭！");
    }
    drink(){
        alert("喝酒！");
    }
}

alert(user.name);
user.eat();

④ JSON

JavaScript Object Notation为通过JavaScript对像标记法书写的文本，由于其语法简单，层次结构鲜明，多用于作为数据载体，在网络中进行数据传输。

var 变量名 = '{"key1": value1, "key2": value2}'; //JSON字符串

var jsonStr = '{"name": "Tom", "age": 18, "address": {"北京", "上海", "西安"}}';

//JSON字符串 -> JavaScript对象
var obj = JSON.parse(jsonStr);
alert(obj.name);

//JavaScript对象 -> JSON字符串
var str = JSON.string(obj);
alert(atr);

⑤ BOM

Browser Object Model为浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

• Window：浏览器窗口对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象

Ⅰ 浏览器窗口对象Window

window.alert("Hello Window");
alert("Hello Window");

<script>
	//confirm - 对话框 - 确认：true，取消：false
    var flag = confirm("确定删除吗？");
    alert(flag);
    
    //setInterval - 定时器 - 无限循环
    var i = 0;
    setInterval(function(){
        i++;
        console.log("第"i"次振翅")；
    }, 2000)
    
    //setTimeout() - 延迟器 - 延期执行
    setInterval(function(){
        alert("Hello JavaScript");
    }, 3000) //毫秒
</script>

Ⅱ 地址栏对象Location

window.location.href;
location.href;

⑤ DOM

Document Object Model为文档对象模型，将标记语言的各部分封装为对象。

• Document：整个文档对象
• Element：元素（标签）对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象

JavaScript通过DOM 就能够对HTML文档进行操作:

• 改变HTML元素的内容
• 改变HTML元素的样式(CSS)
• 对HTML DOM事件作出反应
• 添加和制除HTML元素

Ⅰ 获取Element元素（标签）对象

Ⅱ 修改Element元素（标签）内容

<body>
    <img id="h1" src="img/off.gif"> <br><br>
    
    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>
    
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //点亮灯泡
    var img = document.getElementById("h1");
    img.src = "img/on.gif";
    
    //very good
    var divs = document.getElementByClassName('cls');
    var div1 = divs[0];
    var div2 = divs[1];

    div1.innerHTML += "<font color="red">very good</font>"; 
    div2.innerHTML += "<font color="red">very good</font>";
    
    //勾选方框
    var ins = document.getElementByName("hobby");
    for(let i=0; i<ins.length; ++i){
        const check = ins[i];
      	check.checked = "true"; //问AI呗~
    }
</script>

06 JavaScript 事件监听

HTML事件是发生在HTML元素上的事情，比如按钮被点击、鼠标移动到元素上或者按下键盘按键，JavaScript可以在事件被侦测到时执行代码。

① 事件绑定

方式一：通过HTML标签中的属性进行绑定

<body>
<input type="button" onclick="on()" value="按钮1">
</body>
<script>
    function on(){
        alert('我被点击啦！');
    }
</script>

方式二：通过DOM元素属性绑定

<body>
<input type="button" id="btn" balue="按钮2">
</body>
    
<script>
    document.getElementById("btn").onclick=function(){
        alert('我被点击啦！');
    }
</script>

② 常见事件

③ 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/on.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 
    // 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on(){ //事件监听
        var img = document.getElementsById("light"); //DOM
        img.src="img/on.gif";
    }

    function off(){
        var img = document.getElementsById("light");
        img.src="img/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 
    // 输入框离焦后, 展示大写; 
    function lower(){
        var input = document.getElementById("name");
        input.value = input.toLowerCase();
    }

    function upper(){
        var input = document.getElementById("name");
        input.value = input.toUpperCase();
    }

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 
    // 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; 
    function checkAll(){
        var checks = document.getElementsByName("hobby");
        for(let i=0; i<checks.length; ++i){
            const check = checks[i];
            check.checked = true;
        }
    }

    function reverse(){
        var checks = document.getElementsByName("hobby");
        for(let i=0; i<checks.length; ++i){
            const check = checks[i];
            check.checked = false;
        }
    }

</script>
</html>