JavaScript

2020-11-16 12:33:57 作者：互联网

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();//获取父节点

标签：name,JavaScript,var,new,navigator,document,Netscape
来源： https://www.cnblogs.com/qqkkOvO/p/13984495.html

JavaScript

JavaScript

Nombas 和 ScriptEase

Netscape 发明了 JavaScript

数据类型

js中的数组和对象的定义和赋值

严格检查模式---strict

字符串

函数

定义

变量的作用域

方法的定义和apply()

内部对象

继承

操作BOM对象（重点）

浏览器

navigator（了解），history

screen，代表屏幕

lacation，代表当前页面的URL信息

document（重点），代表当前页面

操作DOM对象

获取DOM对象

更新节点

删除节点

插入节点

表单验证

DOM事件

jQuery

选择器$()

操作HTML

操作css

操作DOM

选择器`$()`