JavaScript
一名合格的后端人员必须要精通JavaScript！
JS，是一门最流行的脚本语言，严格区分大小写，并且<script></script>必须成对出现。
历史背景：
Nombas 和 ScriptEase
大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。
Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。
Netscape 发明了 JavaScript
当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。
当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。
那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。
Netscape 的 Brendan Eich (布伦丹·艾奇)，开始着手开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 共同完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。
数据类型
-
number：不区分整数和小数
-
字符串
-
布尔值
-
逻辑运算：&& || ！
-
比较运算：> < = == ===绝对等于
- ==是js的一个缺陷，值一样类型不一样也会判断为true
- NaN与所有的数值都不相等，包括自己，只能通过isNaN（）来判断这个数是否是NaN
js中的数组和对象的定义和赋值
/* 数组【】 */ var arr = [1, 2, 5, 4, 6, 3]; /* 对象{} ，赋值为：*/ var object = { name: "db", age: 18, tags: ['java', 'as', 'mysql'] }js中数组：可以包含任意的数据类型
-
数组中的方法：
toUpperCase(); //转为大写 toUpperCase(); //转为小写 substring(0,10); //截取字符串 [) 左闭右开 push('a','b'); //将a，b压入数组尾部 pop(); //弹出尾部的一个元素 unshift('a','b'); //压入到头部 shift(); //弹出头部的一个元素 sort(); //升序排序 reverse(); //元素反转 concat(); // join('-'); //连接符
js中的对象：
- 赋值
var person={ name : 'java', age : 18 }- 动态增、删对象的属性
delete person.name; person.name='mysql';- 判断属性是否在这个对象中，关键字
in
'name' in person;- Map和Set
/* Map */ var names = new Map([ ["tom", 1], ["cat", 2], ["rose", 3] ]); names.set("admin", 123456); names.get("admin"); names.delete("admin"); var set = new Set([3,1,1,1,22,22]); //Set可以去重 set.add(100); set.delete(1);- 遍历数组，Map，Set
/* for of 输出数组中所有值 */ for (var num of nums) { console.log(num); } /* for in 输出数组的下标 */ for (var num in nums) { console.log(num); } /* foreach 输出value */ names.forEach(function name(value) { console.log(value); });
严格检查模式---strict
var，let：用于定义局部变量，尽量使用 let
/* 启用严格检查模式 */
'use strict';
/* 变量没有声明，会报错：is not defined */
arr1 = [4, 5, 6];
let arr1 = [4, 5, 6];
字符串
- 使用单引号，双引号嵌套
- 转义字符：
\'\n\t
函数
定义
所有的方法都由function来定义。
获取参数之外的所有参数 -->rest，只能写在所有参数之后，必须带有标识...rest
function f_name(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
变量的作用域
- 在函数体中声明的变量，在函数体外部不可使用
- 全局对象window
- 局部作用域变量--->let
- 常量--->const，赋值后不可以被改变
方法的定义和apply()
/* this指向当前对象 */
var person = {
name: 'keke',
birth: 1997,
age: function() {
no = new Date().getFullYear();
return no - this.birth;
}
}
/*apply（Object, []），控制this的指向 */
function getAge() {
no = new Date().getFullYear();
return no - this.birth;
}
var keke={
name:'keke',
birth:2000,
age:getAge
}
getAge.apply(keke,[]);
内部对象
- 标准对象
typeof 1
"number"
typeof '1'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof isNaN
"function"
typeof []
"object"
typeof undefined
"undefined"
- 日期Date
getTime() //时间戳==> 全世界统一，从1970-01-01开始到现在的毫秒数
new Date(new Date().getTime()) //把当前 时间戳 转 为时间
getFullYear()
getMonth()
getDate()
- JSON
主要两个方法：
- JOSN.stringify() 把js对象转换成字符串
- JSON.parse() 把字符串解析成js对象
继承
-
原型继承
object._proto_=anotherObject; -
class继承，ES6引入
class关键字/* 定义一个类 */ class person { constructor(name) { this.name = name; } say() { alert("汪汪汪~"); } } class people extends person { constructor(name, xx) { super(name); this.xx = xx } mySay() { alert("喵喵喵~"); } } var xiaoho = new person('xiaoho'); var xiaomi = new people('xiaomi ', 'haha');
操作BOM对象（重点）
浏览器对象模型---Browser Object Model
浏览器
JavaScript的诞生就是为了能在浏览器中运行
浏览器：
- IE
- chrome
- Firefox
navigator（了解），history
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"
/* navigator封装了浏览器的信息 */
navigator
Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, userActivation: UserActivation, …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
cookieEnabled: true
credentials: CredentialsContainer {}
deviceMemory: 4
language: "zh-CN"
languages: (2) ["zh-CN", "en"]
locks: LockManager {}
platform: "Win32"
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
vendor: "Google Inc."
大多数时候都不使用navigator，因为会被人修改。
screen，代表屏幕
screen
Screen {availWidth: 1366, availHeight: 738, width: 1366, height: 768, colorDepth: 24, …}
lacation，代表当前页面的URL信息
location
Location {ancestorOrigins: DOMStringList, href: "file:///D:/Users/%E8%9C%98%E8%9B%9B%E5%95%8A%E5%85…%AB%AF%E5%AD%A6%E4%B9%A0%E4%B9%8B---JS/index.html", origin: "file://", protocol: "file:", host: "", …}
/* 设置新的地址 */
location.assign("https://www.cnblogs.com/")
document（重点），代表当前页面
document.title
"Document"
document.title="柯柯"
"柯柯"
/* 获得具体的文档树节点0 */
document.getElementById(" ")；
操作DOM对象
Document Object Model --- 文档对象模型
获取DOM对象
/* 对应css选择器 */
document.getElementsByTagName("h1");
document.getElementById("id");
document.getElementsByClassName("class");
这是原生代码，之后使用的都是jQuery
更新节点
var app=document.getElementById("app")
/* 修改文本的值 */
app.innerText='1233333333'
app.innerHTML='<strong>123654789</strong>' //可解析html文本标签
/* 修改css */
app.style.color='red'
删除节点
先找到父节点，再通过父节点删除自己
var dl=document.getElementById("id")
dl.parentElement.removeChild(dl)
插入节点
p=document.getElementById("p")
ul=document.getElementById("ul")
/* 移动已有的节点 */
ul.appendChild(p)
/* 创建一个新标签 */
p1=document.createElement("p")
// p1.id="newp" //不推荐使用
p1.setAttribute("id","newp") //推荐这中，以键值对形式设置，万能用法
p1.innerText="hello，哈哈!"
/* 插入 */
ul.appendChild(p1)
表单验证
<div id="app">
<form name="myForm" action="" method="post">
姓名：<input type="text" name="fname">
<input type="submit" onclick="validateForm()" alue="Submit">
</form>
</div>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("必须填写姓名");
return false;
}
}
</script>
DOM事件
- onclick，点击触发
- onchange，离开输入框触发
- onmouseover 和 onm ouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发
- onmousedown，鼠标按下触发
- onmouseup，鼠标松开触发
jQuery
jQuery就是一个js库，装有大量的js函数
获取链接：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>当网页加载完后，响应事件：
$(function(){
})
选择器$()
$('Tag_name').action()
$('. class_name').action()
$('# id_name').action()
操作HTML
/* 设置html元素 */
t.html("<p>Hello World</p>");
/* 获取html元素 */
t.html();
/* 设置文本内容 */
t.text("Hello China!");
操作css
t.css("font-size","35px");
/* 隐藏 显示*/
t.hide();
t.show();
操作DOM
$("#id").remove();//删除节点
t.parent();//获取父节点