JavaWeb_JavaScript(JS)第一天笔记

回顾

多表映射 xml （一对多，多对多）

注解映射

• @Select(“sql语句”)
• @Update
• @Insert
• @Delete

综合案例

今日内容

javascript 工作在浏览器（前端）中，服务器也可以用js写（node js）

• ECMAScript v6 （基本语法）（学习特有的）

• DOM （操作页面上标签元素的 api）document object model （重点）

• BOM（操作浏览器功能的 api）browser object model （了解）

1. 基本语法

方式1：

<script>
	// 编写 js 代码
    
    /* */
</script>

方式2：

<script src="js文件的路径"></script> <!-- js 代码写在js 文件内 -->

工具 node.js （可以不装）主要是开发服务端js代码

vscode （前端神器）

掌握两个调试方法

• console.log(); // 输出到控制台，出了错也要控制台看
• alert() // 弹警告框

定义变量常量

let 变量名 = 值（还是区分类型的..）

const 常量名 = 值

六种基本数据类型

• number 小数整数都可以
• string “hello” ‘hello’ hello
• boolean
• null 和 undefined let a; let b = null;
• bigint

运算符

==  比较值  "10" == 10  true
=== 比较类型和值 "10" == 10 false

字符串转数字

let n = "10";
let m = n-0; // 用-0转为数字的10

parseInt("10")

… 展开运算符（了解）

let arr = [1,2,3];
// ...arr ==> 表示拿到了数组内的这些元素，但不包括[]
let arr2 = [4,5,6,...arr];

let arr3 = [7,8,9];

let arr4 = [...arr, ...arr3];

数组

.splice(索引, 个数);

.push(元素);

.pop()

函数

function 函数名(参数名1, ...) { // 参数无需类型声明，返回值不需要声明
    // 代码
    return 结果;
}

函数名(实参1, ...); // 实参个数不必与形参个数相同

注意：js 中函数没有重载！后定义的同名函数会覆盖前面定义的

匿名函数

let fun = function (参数名1, ...) { 
    // 代码
    return 结果;
};

fun(实参1, ...); // 函数变量

补充

var 变量 = 值;  // 不推荐使用

js 中的每行的结束符号; 是可以省略的，但不建议省略

2. dom（*）

文档对象模型 - 操作标签

查找标签

• document.getElementById(“id值获取”)
• 标签名，class 名称，name 属性，获取父元素

增删改

• createElement(“标签名”)
• 父元素.appendChild(子元素)
• 父元素.removeChild(子元素)

管理属性

• 获取属性 元素.属性名 或 元素.getAttribute(“属性名”)
• 修改属性 元素.属性名=值 或 元素.setAttribute(“属性名”, “值”)
• 删除属性 元素.removeAttribute(“属性名”)
• style 代表样式（优先级高）
  • i1.style.display = “none”; // 隐藏
  • i1.style.display = “block”; // 显示
• className 代码样式（来自于样式表）

建议使用 innerText ,因为 innerHTML xss 注入攻击

3. 事件 (*)

<标签 οnclick=“函数()”/>

<script>
    function 函数名() {
        // 事件发生后要执行的代码
    } 
</script>

<标签 id=“id值”>

<script>
	document.getElementById("id值").onclick = function() { // 匿名函数方式
        // 事件发生后要执行的代码
    }
</script>