1. JS 简介

   JS 特点

   • 可以直接嵌入 HTML 页面运行
   • 解释型语言：浏览器逐行解释执行，无需提前编译
   • 弱类型语言：变量声明不限制类型，赋值后自动确定类型

   JS 与 Java 核心区别

   • Java：编译型、强类型语言（声明必须指定类型 int num）
   • JS：解释型、弱类型语言（统一 let 声明）

   JS 变量名命名规范

   变量名、函数名、自定义属性名，统一遵循以下 JS 命名规则，考试、开发通用：

   • 可由：字母、数字、下划线_、美元符号$ 组成

   • 严格区分大小写：num 和 Num 是两个完全不同的变量

   • 不能以数字开头（例：123name 非法，name123 合法）

   • 不能包含空格、汉字、特殊符号（@ # ! - 等）

   • 不能使用 JS 关键字、保留字（let、var、const、function、if、for 等）

   • 见名知意：杜绝随意命名（a、b、c），使用语义化名称（name、age、userList）

   • 统一使用 小驼峰命名法：第一个单词首字母小写，后续单词首字母大写（例：userName、userAge、maxNum）

   • 常量推荐全大写+下划线（例：PI、MAX_SIZE）

   字符串规则

   JS 中单引号、双引号完全等价，都可以包裹字符串。

   字符串 + 数字 运算特点

   • 数字 + 字符串 → 字符串拼接
   • 想要数学运算 → parseInt() 转数字

   <script type="text/javascript">
       let num1 = 3;
       let num2 = 5;
       let result = num1 + num2;
       console.log(result); // 8
   
       let str = '10';
       console.log(num1 + str); // 310 （拼接）
   
       let result2 = num1 + parseInt(str);
       console.log(result2); // 13 （数学相加）
       alert(result2);
   </script>

   变量特点

   • let 声明变量，声明无类型，赋值才有类型
   • 变量可以任意切换数据类型（弱类型特征）

   五大基本数据类型

   
   • undefined：变量声明未赋值
   • number：数字（整数、小数）
   • string：字符串
   • boolean：布尔（true/false）
   • null：空对象

   null 和 undefined 区别

   • undefined：声明变量，未赋值
   • null：变量已赋值，值为空
   • typeof(null) → object 是 JS 历史 bug

   <script type="text/javascript">
       let v;
       console.log(v); // undefined
       console.log(typeof(v)); // undefined
   
       v = 3.14;
       console.log(typeof(v)); // number
   
       v = 'js';
       console.log(typeof(v)); // string
   
       v = true;
       console.log(typeof(v)); // boolean
   
       v = null;
       console.log(typeof(v)); // object
   </script>

   关系运算符

   == 与 === 核心区别

   • ==：只判断值相等，会自动类型转换
   • ===：值 & 类型全部相等（全等，推荐）
   • !==：不全等

   <script type="text/javascript">
       let m = '3';
       let n = 3;
   
       if (m == n) {
           console.log('m==n'); // 成立
       }
   
       if (m === n) {
           console.log('m===n'); // 不成立
       }
   </script>

   String 字符串

   两种创建方式

   • 字面量：let str = 'hello'（常用）
   • 对象方式：let str = new String('hello')

   常用属性与方法

   • str.length：字符串长度
   • toUpperCase()：转大写
   • toLowerCase()：转小写
   • charAt(index)：获取指定下标字符
   • indexOf(字符)：从前往后找索引，找不到返回 -1
   • lastIndexOf(字符)：从后往前找索引
   • split(分隔符)：字符串切割为数组

   <script type="text/javascript">
       let str1 = 'Hello JS and Java';
       console.log(str1.indexOf('J')); // 6
       console.log(str1.indexOf('JS')); // 6
       console.log(str1.indexOf('JS', 9)); // -1
   
       let str2 = 'how are you doing today';
       let array = str2.split(' ');
       console.log(array);
       console.log('1:2:3:4'.split(':'));
   </script>

   Boolean 布尔类型

   JS 真假规则

   一切空、零、NaN 都是 false；非空非零都是 true

   

   false：0、''空字符串、null、undefined、NaN

   <script type="text/javascript">
       console.log('-----------------')
       if (true) {
           console.log('true');
       }
       if (0) {
           console.log('0');
       }
       if (!0) {
           console.log('!0'); // true
       }
       if ('') {
           console.log('空字符串');
       }
       if ('abc') {
           console.log('abc'); // true
       }
   </script>

   Array 数组

   数组创建方式

   let array1 = new Array();      // 空数组
   let array2 = new Array(7);     // 长度为7的空数组
   let array3 = new Array(1,2,3); // 带数据数组
   let array4 = [100,200,300];    // 字面量（推荐）

   常用操作

   • 数组.length：获取长度
   • push()：尾部添加
   • pop()：尾部删除并返回元素

   <script type="text/javascript">
       let arr = new Array();
       arr.push('zhangsan');
       arr.push(false);
       arr.push(45);
       console.log(arr);
   
       console.log(arr.pop()); //45
       console.log(arr.pop()); //false
       console.log(arr.pop()); //zhangsan
   </script>

   Math 数学对象

   • parseInt()：字符串转整数
   • Math.PI：圆周率
   • Math.round()：四舍五入
   • 

   eval 函数

   作用：将字符串当做 JS 代码执行

   风险：不安全、不优化、容易代码注入，工作中尽量不用

   eval('2+3') // 5
   eval('let x=10;let y=20;console.log(x*y);');

   JS 自定义对象

   对象可以包含：属性 + 方法

   <script>
       let student = {
           name: 'zhansgan',
           age: 23,
           study: function() {
               console.log(this.name + '的年龄是' + this.age + '岁');
           }
       };
       console.log(student.name);
       student.study();
   </script>

   DOM 文档对象模型

   DOM 作用

   JS 和 HTML 的桥梁，实现对标签的增、删、改、查

   五大节点

   • 文档节点：document
   • 元素节点：html 标签
   • 文本节点：标签内部文字
   • 属性节点：id、type、value
   • 注释节点

   常用获取元素方式

   • document.getElementById("id")：根据id获取单个
   • document.getElementsByTagName("标签名")：根据标签获取数组

   

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
   <table>
       <tr>
           <td><img src=""/></td>
           <td colSpan="3">购物简易计算器</td>
       </tr>
       <tr>
           <td>第一个数</td>
           <td colSpan="3">
               <input type="text" id="num1Id"/>
           </td>
       </tr>
       <tr>
           <td>第二个数</td>
           <td colSpan="3">
               <input type="text" id="num2Id"/>
           </td>
       </tr>
       <tr>
           <td><input type="button" value=" + " onclick="cal('+')"/></td>
           <td><input type="button" value=" - " onclick="cal('-')"/></td>
           <td><input type="button" value=" * " onclick="cal('*')"/></td>
           <td><input type="button" value=" / " onclick="cal('/')"/></td>
       </tr>
       <tr>
           <td>计算结果</td>
           <td colSpan="3">
               <input type="text" id="resultId"/>
           </td>
       </tr>
   </table>
   
   <script type="text/javascript">
       // eval 版（简洁但不安全）
       function cal(type) {
           let num1 = document.getElementById('num1Id').value;
           let num2 = document.getElementById('num2Id').value;
           let result = eval(parseInt(num1) + type + parseInt(num2));
           document.getElementById('resultId').value = result;
       }
   
       // switch 标准版（推荐考试/项目）
       function cal1(type) {
           let num1 = parseInt(document.getElementById('num1Id').value);
           let num2 = parseInt(document.getElementById('num2Id').value);
           let result = 0;
           switch (type) {
               case '+': result = num1 + num2; break;
               case '-': result = num1 - num2; break;
               case '*': result = num1 * num2; break;
               case '/': result = num1 / num2; break;
           }
           document.getElementById('resultId').value = result;
       }
   </script>
   </body>
   </html>

   innerText 与 innerHTML 区别

   • innerText：纯文本，不解析 HTML 标签
   • innerHTML：解析 HTML 标签，渲染样式

   <body>
   <span id="spanId">Hello Span</span> <br/>
   <button onclick="clickMe()">点击</button>
   
   <script type="text/javascript">
       function clickMe() {
           let spanObj = document.getElementById('spanId');
           // spanObj.innerText = '<h1>文字</h1>'; // 原样显示文本
           spanObj.innerHTML = '<h1 style="color: red;">innerHTML</h1>';
       }
   </script>
   </body>

   onload 页面加载事件

   作用

   让 HTML 先加载完毕，再执行 JS 代码，防止获取不到 DOM 元素

   window.onload = function() {
       // 页面加载完成后执行
   }

   节点创建、追加、替换

   创建节点

   • document.createElement("标签名")：创建元素
   • document.createTextNode("内容")：创建文本
   • setAttribute("属性名","值")：设置属性

   节点操作

   • 父.appendChild(子)：末尾追加
   • 父.insertBefore(new,old)：插入到某个节点前面
   • 父.replaceChild(new,old)：替换节点

   window.onload = function() {
       let colors = ['red', 'green', 'blue'];
       let colorMeans = ['热情', '冷静', '生机'];
       let ul = document.createElement('ul');
   
       for (let i = 0; i < colors.length; i++) {
           let li = document.createElement('li');
           li.setAttribute('mean', colorMeans[i]);
           let textNode = document.createTextNode(colors[i]);
           li.appendChild(textNode);
           ul.appendChild(li);
       }
       document.body.appendChild(ul);
   }

   JS 常用事件

   事件：用户对页面的操作行为，事件函数：事件触发后的代码

   • onclick：点击
   • onmouseover：鼠标移入
   • onmouseout：鼠标移出
   • onkeyup/keydown：键盘抬起/按下
   • onfocus：获得焦点
   • onblur：失去焦点
   • onsubmit：表单提交

   事件两种绑定方式

   1. 行内绑定：<button onclick="fn()">
   2. JS 动态绑定：btn.onclick = function(){}

let btn = document.getElementById('btnId');
btn.onclick = function () {
    alert('thanks');
}

对比维度	Java	JavaScript
语言类型	编译型、强类型语言	解释型、弱类型语言
运行环境	JVM 虚拟机（需安装 JRE）	浏览器 / Node.js
编译方式	先编译为字节码（.class），再运行	逐行解释执行，无需预编译
变量声明	必须指定数据类型 int num = 10;	let / var / const，无需写类型
变量类型	类型固定，声明后不可更改	类型可变，可随时赋值不同类型
字符串引号	双引号 "" 表示字符串；单引号 '' 只能存单个字符	单引号 ''、双引号 "" 都可表示字符串
相等比较	== 比较值（基本类型）/ 引用（对象）	== 自动转换比较值；=== 值 + 类型全等比较
类型转换	类型不匹配直接编译报错	支持隐式自动类型转换 运行报错
面向对象	纯面向对象，一切依托 class，有严格继承、封装、多态	基于对象，ES6 class 是语法糖，支持对象字面量直接创建
数值类型	区分 int、long、float、double 等多种	统一为 number 类型，不区分整数和小数
空值	null	null 和 undefined 两种
数组	长度固定，类型统一	长度动态，可存放任意类型混合数据
区分大小写	✅ 区分	✅ 区分

json

定义：是一种轻量级的数据交换格式

JSON是JavaScript Object Notation缩写

特点：

1. 易于程序员阅读和编写。
2. 易于计算机解析和生成。
3. 其实是javascript的子集：原生javascript支持JSON

JSON是一种与语言无关的数据交换的格式，作用：

1、使用ajax进行前后台数据交换

2、移动端与服务端的数据交换

JSON数据格式

JSON的语法规则十分简单，可称得上“优雅完美”，总结起来有：

JSON有两种结构：

1、对象格式：{“key1″：obj1, “key2”:obj2, “key3”:obj3…}

2、数组/集合格式: [obj1,obj2,obj3…]

注意：JSON的key是字符串，JSON的value是任意类型

元素值可具有的类型：string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示

{
    "id" : 12,
    "name" : "java1711",
    "age" : 20,
    "gender" : "男"
}

2、数组（Array）用方括号([][][{} {}])表示:

[
    {
       "id" : 12,
        "name" : "java1711",
        "age" : 20,
        "gender" : "男"
    }
    ,
    {
       "id" : 13,
        "name" : "java1712",
        "age" : 21,
        "gender" : "女"
    }
]