【Java从0到架构师】JS_jQuery_BootStrap

- 日理万妓 2022-08-31 12:24 93阅读 0赞

### JS\_jQuery\_BootStrap ###

*  JavaScript
 *   *  script 标签
     *  基础语法
     *  数据类型
     *  字符串的遍历
     *  数组的遍历
     *  对象的遍历
     *  常用 API 参考
     *  函数
     *  DOM 操作
 *  jQuery
 *   *  基于 jQuery 的各种插件
 *  BootStrap

> Java 从 0 到架构师目录：[【Java从0到架构师】学习记录][Java_0]

Gitee 代码：[https://gitee.com/szluyu99/mj\_java/tree/master/08\_js/web/WEB-INF/page][https_gitee.com_szluyu99_mj_java_tree_master_08_js_web_WEB-INF_page]

# JavaScript #

> JS 参考资料：[Mozilla MDN][]、[javascript.info][]

Javascript 简称 JS，是广泛应用于前端开发中的脚本语言

Javascript 遵循了 Java 的表达式语法、命名规范、基础流程控制

> 这也是 Javascript 从 MLiveScript 更名的原因之一

JS 的标准化组织是 [ECMA][]，这种标准化的 JS 被称为 ECMAScript，简称 ES

*  2011/06，ES5.1
 *  2015/06，ES2015，ES6
 *  2016/06，ES2016，ES7
 *  2017/06，ES2017，ES8
 *  2018/06，ES2018，ES9
 *  2019/06，ES2019，ES10

--------------------

JavaScript 常见用途：

*  跟用户进行交互
 *  对标签的增删改查
 *  实现绚丽的动画效果
 *  跟服务器进行交互

## script 标签 ##

在 script 标签中编写 JS 代码（ 标签可以在 head、body 中）

<script type="text/javascript"> // 编写JS代码 </script>

可以使用 script 标签引用 js 文件

## 基础语法 ##

JS 每一条语句结束后可以加分号，也可以不加分号（现在建议不加分号）

> 如果选择不加分号，那么每一条语句需要独占一行

常见输出方式：`alert`、`console.log`

JS 中有两种注释：单行注释、多行注释

JS 中用 **var**、**let** 定义变量（建议用 let），const 定义常量

let score = 10
    score += 20
    console.log(score) // 30
    
    const age = 10
    consle.log(age) // 10

字符串的拼接：

const name = "jack"
    const age = 20
    
    // my name is jack, age is 20
    console.log('my name is ' + name + ", age is " + age)
    console.log(`my name is ${ name}, age is ${ age}`)
    console.log(`my name is ${ 'ja' + 'ck'}, age is ${ 19 + 1}`)

监听标签的点击事件：

function change() { 
    	console.log("点击了【换一换】")
    }

## 数据类型 ##

JS 中有 8 种数据类型：

*  `number`：整数、浮点数

1
    -10
    8.6

*  `bigint`：任意长度的整数

12345678987654321n

*  `string`：字符串

"jack"
    'jack'
    `jack`

*  `boolean`：真假

true
    false

*  `undefined`：未分配的值\\

undefined

*  `null`：不存在或无效

null

*  `object`：对象

{ }
    []

*  `symbol`：唯一标识符

--------------------

typeof 运算符（类型运算符）：返回 x 的类型，返回值是字符串类型

typeof x
    typeof (x)

使用示例：

console.log(typeof 1) // number
    console.log(typeof 1.0) // number
    console.log(typeof 1n) // bigint
    console.log(typeof 'jack') // string
    console.log(typeof "jack") // string
    console.log(typeof true) // boolean
    console.log(typeof { 
    	name: 'jack',
    	age: 10
    }) // object
    console.log(typeof [1, '2', true]) // object
    console.log(typeof undefined) // undefined
    console.log(typeof Symbol()) // symbol
    console.log(typeof alert) // function

有一个比较特殊的，可以视为 javascript 早期的设计缺陷：

console.log(typeof null) // object

## 字符串的遍历 ##

`for (let ... of ...)` 遍历时获取元素内容：

const str = 'cat'
    for (const c of str) { 
    	console.log(c)
    }
    // c
    // a
    // t

`for (let ... in ...)` 遍历时获取元素下标：

for (let i in str) { 
    	console.log(i, str.charAt(i))
    }
    // 0 c
    // 1 a
    // 2 t

常规的 for 循环遍历方式：

for (let i = 0; i < str.length; i++) { 
    	console.log(i, str.charAt(i))
    }
    // 0 c
    // 1 a
    // 2 t

## 数组的遍历 ##

const arr = [11, '22']

`for (let ... of...)` 遍历时获取元素内容：

for (const e of arr) { 
    	console.log(e)
    }
    // 11
    // 22

数组的 `forEach` 方法遍历：

arr.forEach((e, idx) => { 
    	console.log(idx, e);
    });
    // 0 11
    // 1 22

`for (let ... in ...)` 遍历时获取元素下标：

for (let i in arr) { 
    	console.log(i, arr[i])
    }
    // 0 11
    // 1 22

常规的 for 循环遍历：

for (let i = 0; i < arr.length; i++) { 
    	console.log(i, arr[i])
    }
    // 0 11
    // 1 22

## 对象的遍历 ##

const person = { name: 'jack', age: 20};

`for (let ... in...)` 遍历时获取元素内容：

for (const k in person) { 
    	console.log(k, person[k])
    }
    // name jack
    // age 20

> 注意：`for (let ... of ...)` 无法直接遍历对象，会提示 `person is not iterable`

`for (let ... of ...)` 结合 `Object.keys` 方式遍历：

for (const k of Object.keys(peson)) { 
    	console.log(k, person[k])
    }
    // name jack
    // age 20

`for (let ... of ...)` 结合 `Object.entries(person)` 方式遍历：

for (const entry of Object.entries(person)) { 
    	console.log(entry[0], entry[1])
    }
    // name jack
    // age 20

`for (let ... of ...)` 结合 `Object.values` 方式遍历：只能遍历出对象的属性的值

for (const v of Object.values(person)) { 
    	console.log(v)
    }
    // jack
    // 20

## 常用 API 参考 ##

数字：[https://zh.javascript.info/number][https_zh.javascript.info_number]

字符串：[https://zh.javascript.info/string][https_zh.javascript.info_string]

数组：[https://zh.javascript.info/array][https_zh.javascript.info_array]、[https://zh.javascript.info/array-methods][https_zh.javascript.info_array-methods]

## 函数 ##

function sum(a, b, c=10) { 
    	return a + b + c
    }
    
    console.log(sum(1, 2, 3)) // 6
    console.log(sum(1, 2)) // 13
    console.log(sum(1)) // NaN
    console.log(sum()) // NaN

JS 中，函数可以作为参数、返回值

ES6 开始，推出了箭头函数

function execute(fn, a, b) { 
    	console.log(fn(a, b))
    }
    
    // 30
    execute(function(a, b) { 
    	return a + b
    }, 10, 20)
    
    // 30
    execute((a, b) => { 
    	return a + b
    }, 10, 20)
    
    // 30
    execute((a, b) => a + b, 10, 20)

## DOM 操作 ##

> 参考文档：[文档对象类型（DOM）][DOM]

DOM 操作就是指对 HTML 文档中节点的增删改查操作

// 删除id为vv的节点
    document.getElementById('vv').remove()
    
    // 删除第一个div节点
    document.getElementByTagName('div')[0].remove()
    
    // 删除第二个class为link的节点
    document.getElementByClassName('link')[1].remove()

更建议使用 `querySelector` 根据 CSS 选择器获取节点，再进行操作

// 删除id为vv的节点
    document.querySelector('#vv').remove()
    
    // 删除第一个div节点
    document.querySelector('div').remove()
    
    // 删除第二个class为link的节点
    document.querySelector('.link')[1].remove()

# jQuery #

> 参考文档：[中文文档][Link 1]、[英文文档][Link 2]

[jQuery][] 前端开发中非常著名的一个开源框架

使用 jQuery 来操作 DOM 节点能够大大提高开发效率：

$('#vv').remove()
    $('div').remove()
    $('.link')[1].remove()

绑定点击事件：

document.querySelector(sel).onclick = function() { 
    }

$(sel).on('click', function() { 
    })

$(sel).click(function() { 
    })

## 基于 jQuery 的各种插件 ##

jQuery UI：[https://jqueryui.com/][https_jqueryui.com]、[https://www.jqueryui.org.cn/][https_www.jqueryui.org.cn]

jQuery Validation Plugin：[https://jqueryvalidation.org/][https_jqueryvalidation.org]

# BootStrap #

Bootstrap 是非常强大的前端库，可以帮助开发者快速开发出简洁美观、响应式的前端页面

BootStrap 由 Twitter 公司出品：[https://getbootstrap.com/][https_getbootstrap.com]、[https://www.bootcss.com/][https_www.bootcss.com]

--------------------

加深对 `col`、`col-sm`、`col-md`、`col-lg` 的理解：

*  `col` 会将内容进行调整，来强制满足栅格布局
 *  `col-sm`、`col-md`、`col-lg` 会根据缩放的尺度，来动态调整内容，从而实现效果较好的响应式

[Java_0]: https://blog.csdn.net/weixin_43734095/article/details/119067034
[https_gitee.com_szluyu99_mj_java_tree_master_08_js_web_WEB-INF_page]: https://gitee.com/szluyu99/mj_java/tree/master/08_js/web/WEB-INF/page
[Mozilla MDN]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[javascript.info]: https://zh.javascript.info/
[ECMA]: https://www.ecma-international.org/
[https_zh.javascript.info_number]: https://zh.javascript.info/number
[https_zh.javascript.info_string]: https://zh.javascript.info/string
[https_zh.javascript.info_array]: https://zh.javascript.info/array
[https_zh.javascript.info_array-methods]: https://zh.javascript.info/array-methods
[DOM]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
[Link 1]: https://www.jquery123.com/
[Link 2]: https://api.jquery.com/
[jQuery]: https://jquery.com/
[https_jqueryui.com]: https://jqueryui.com/
[https_www.jqueryui.org.cn]: https://www.jqueryui.org.cn/
[https_jqueryvalidation.org]: https://jqueryvalidation.org/
[https_getbootstrap.com]: https://getbootstrap.com/
[https_www.bootcss.com]: https://www.bootcss.com/