XiYuJing|文章:JS学习

[[ slide_text ]]

[[item.c]]

JS学习

发布时间：2022年09月20日 作者：靖华来源：XiYuJing

# JS入门

## 历史

> 1995年，JavaScript是由Web发展初期的网景(Netscape)公司创建。JavaScript是SunMicrosystem公司(现在的 Oracle)的注册商标。网景将这门语言作为标准提交给ECMA-欧洲计算机制造协会 -由于商标上的冲突,这门语言的标准版本改了一个丑陋的名字“ECMAScript”。同样由于商标的冲突,微软对这门语言的实现版本取了一个广为人知的名字“Jscript”实际上,几乎所有人都将这门语言叫做“JavaScript”.JavaScript的标准是ES，而JS则是ES标准的实现。2017年发布了ES8(2017)，2018年发布了ES9(2018)。ES标准在不断的吸收其他编程语言的优点，尤其是脚本语言。所以JavaScript看上去也和Python有很多的类似之处。

##简介

### 作用：

如果把HTML比做一个人，那么CSS就是衣服，那JS就是指人的动作和行为

### 书写：

JS代码可以直接写在[script]()标签里面，或者写在其他的[.js后缀文件]()中，并通过script标签引入。注意：[在引入js文件的script里面，一定不能写js代码。]()当然也可以在标签内写js代码，但是这种方式并不推荐。

### 要求：

一般把script标签写在 [head]() 或者 [body]() 里
要注意的是是否需要加上[window.onload]()
如果没有特殊要求，一般script标签放在[body结束]()之前

###JS书写：

#### 在body之前书写

```javascript
<script type="text/javascript">
    //alert("你好，js") 弹窗 JS单行注释用// 多行注释用/* */
    // console.log('你好 console') 在终端弹出窗口
    // 以上这两个可以弹出信息，类似于python中的print，当代码报错的时候，是不会执行后面的内容
</script>
```

#### 在head中书写

```js
<script type='text/javascript'>
    // 代码写在head中的script标签里面
    alert('hello js')
	//正常情况下，js从上往下运行，如果需要js在之后再运行，那么需要加上window.onload
	// window.load = function(){
	//	alert('head in js')
	//}
</script>
```

#### 在JS文件中书写

```js
// 在js文件中书写js代码
alert('index.js')
```

## JS获取标签

### 意义：

在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以要首先学会如何获取元素

### js获取独有标签：

即title，head，body等一个html页面只有一个的标签

> document . title	获取标题
> document . head	获取头部信息
> document . body	获取body内容

### 其他标签的获取：

1. > 通过id获取元素：document.getElementById("idname"); 
    >
    > ```js
    > var p1 = document.getElementById("p1");     /*1、通过id元素*/
    > ```

2. > 通过class获取元素：document.getElementsByClassName("classname");
    > 但是这里要记住，获取的是多个标签，因此具体要操作哪一个标签，需要使用下标。
    >
    > ```js
    > var p2 = document.getElementsByClassName("p2");     /*通过class获取元素*/
    > 
    > p2[0].innerText = "我不是一个段落2";   /*用角标取一个值*/
    > p2.item(0).innerText = "1111";      /*用item这个方法取出一个值*/
    > ```

3. > 通过标签名获取元素：document.getElementsByTagName("tagdem"); 
    >
    > 这里要记住，获取的是多个标签，因此具体要操作哪一个标签，需要使用下标。
    >
    > ```js
    > var ptag = document.getElementsByTagName("p");  /*通过标签名获取*/
    > ptag[2].innerText = "你猜我是啥";
    > ```

4. > 表单中的name：document.getElementsByName("name");
    >
    > ```js
    > var pname = document.getElementsByName("pname");    /*通过name属性获取*/
    > pname[5].innerText = "66666";
    > ```

5. > selector选择器(不兼容IE7及以下)/通过css选择器获取元素（不支持伪类）

1. > document.querySelector (""); 通过CSS选择器获取一个
        >
        > ```js
        > var qsid = document.querySelector(".p2");   /*多个情况下只会获取到第一个*/
        > ```

2. > document.querySelectorAll(""); 通过CSS选择器获取所有
        >
        > ```js
        > var qsa = document.querySelectorAll(".p2")[1];  /*获取选中的所有元素*/
        > ```

### 修改元素：

```js
/* innerText和innerHtml区别
    innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
    原:
    <p id="p1"><p>
    var p1 = document.getElementById("p1"); 
    p1.innerHTML = "<h1>我不是一个段落1</h1>";
    js后:
    <p id="p1">
    <h1>我不是一个段落1</h1>
    <p>
    innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）只会改文本不改标签
    innerHTML、innerText仅设置标签之间的文本
*/
```

## JS简单事件

### 含义：

所谓事件，是指JavaScript捕获到用户的操作，并做出正确的响应

### 使用：

在事件函数里而，有一个关键字this，代表当前发事件的这个元素

### 鼠标事件：

左键单击 onclick
左键双击 ondblctick
鼠标移入 onmouseover/onmouseenter
鼠标移出 onmouseout/onmouseleave

```js
<p style="cursor: pointer;">点我</p>

//1.单击事件 就是点击一下
    aP.onclick = function () {
        alert("别点我");
    }

//2、双击事件 注意：单击事件和双击事件是不能同时存在
    // aP.ondblclick = function () {
    //     alert("点了我两下");
    // }

//3、滑入事件
    aP.onmouseenter = function () {
        aP.innerText = "滑入了";
    }

//4、滑出事件
    aP.onmouseleave = function () {
        aP.innerText = "滑出了";
    }
</script>
```

## JS修改样式

### 解释：

js可以修改规范和不规范的标签的样式，也可以配合点击事件等一起使用

### 规范标签：

规范的标签属性： . 符号直接操作(可读可写)
不规范(自定义)的标签属性：
	获取： .getAttribute()
	设置： .setAttribute()
	移除： .removeAttribute()

```js
<script>
    var obox = document.getElementsByTagName("div")[0];

//单独操作class属性
    obox.className = "aa";  /*增加*/
    obox.className = "bb";  /*修改/覆盖（如果有class属性的话，就会覆盖之前的）*/

console.log(obox.className);    /*查*/

obox.className = "";    /*属性值置为空，并未删除class*/
    obox.removeAttribute("class");  /*移除class属性*/

//操作自定义属性
    obox.setAttribute("aa","a1");   /*增加   第一个代表属性名，第二个代表属性值*/
    obox.setAttribute("bb","b1");   /*增加/覆盖（如果有相同属性的话，就会覆盖之前的）*/

console.log(obox.getAttribute("aa"));   /*查属性对应的属性值*/

console.log(obox.hasAttribute("aa"));     /*查看是否有此属性 true代表有，false代表没有*/

obox.removeAttribute("aa");     /*移除*/
</script>
```

### 注意项：

> 所有的路径、颜色 获取的结果不一定是你写的内容
> 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素
> 自定义标签属性的操作方式，同样可以操作符合规范的标签属性

## JS数据类型

number：数字，在js里面的小数和整数统一都是数字 ，-2^53 ~ 2^53 超出范围之后进度就会不准确

boolean：布尔值（true、false）

undefined：为定义，一个变量声明之后没有赋值就是undefined

string：字符串

null：空值，在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单一类的数据类型null

object：对象

```js
<script>
    var a = 123;    /*number 数字类型*/
    // console.log(typeof a);

var b = "123";  /*string 字符串类型*/
    // console.log(typeof b);

var c = true;   /*booleam 布尔类型*/
    // console.log(typeof c);

var d;  /*undefined 未定义*/
    // console.log(typeof d);

//在js中，除了number、string、booleam、undefined外，其它我们都叫对象
    var e = null;   /*object 对象 （空对象）*/
    // console.log(typeof e);

var f = [1,2,3,4];  /*object 对象*/
    console.log(typeof f);

//作业
    var oInp = document.getElementById("ipt");      //获取输入框
    var oBtn = document.getElementById("btn");      //获取按钮
    oBtn.onclick = function () {
        console.log(oInp.value);    /*获取输入框的值*/
    }
</script>
```
# JS提高

## JS运算符

### 算术运算符：

算术运算符(基础数字运算) + - * / %

> 1.当不是数字之间的运算的时候，+号两边一旦有字符串(引号引起的部分)，那么+号就不再是数学运算了，而是拼	接，最终结果是字符串。 
> 2.-/*% 尽量将字符串转换成数字（隐式类型转换)
> 3.NaN: Not a Number number

### 赋值运算符：

> +=，-=，*=，/=，= 这些是基本的赋值运算符，除此之外还有++，--,这两个都存在隐式类型转换，会全部转成数字。

### 逻辑运算符：

> JS中的逻辑运算用：&&、||、! 来表示。 && 和 || 不会进行类型转换，！则会进行类型转换，将后面的数据先转换为布尔型在取反

###比较运算符：

> ，< ，!=， >= ，<=， ==（比较值）， ===（全等， 它会先比较类型，在比较值）
如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等
NaN==NaN 返回false，NaN和所有值包括自己都不相等

## Js流程控制

### if

```js
var name = "A";
    if (name == "A") {
        document.write("大奖");
    } else if (name == "B") {
        document.write("二等奖");
    } else if (name == "C") {
        document.write("三等奖");
    } else {
        document.write("优秀奖");
    }
    document.write("<br>");
```

### switch

```js
/*
        二、switch 选择语句
            · 计算一次 switch 表达式
            · 把表达式的值与每个 case 的值进行对比
            · 如果存在匹配，则执行关联代码
            break 跳出当前代码块
    */
var day = 9;
switch (day) {
    case 1:
        document.write("星期一");
        break;  //结束
    case 2:
        document.write("星期二");
        break;  //结束
    case 3:
        document.write("星期三");
        break;  //结束
    case 4:
        document.write("星期四");
        break;  //结束
    case 5:
        document.write("星期五");
        break;  //结束
     default:
         document.write("请输入数字1-5");
}
```

## js循环

### for

```js
/*
        一、for 循环   需要重点分析
        for(初始值;条件判断;更新初始值)
        循序：循环初始值-》判断-》执行-》更新-》判断-》执行
        特点：先判断在执行
   */
// for(var i = 1;i <= 5;i++) {
//     //循环体
//     document.write(i+"<br>");
// }

for(var i = 1;i <= 5;i++) {
    //循环体
    if(i === 3) {
        // break;  //直接结束
        continue;   //跳过本次，执行下一次
    }
    // document.write(i+"<br>");
}

/*
        二、for...in 语句
        遍历一个数组的时候。得到的是数组中对应的下标值
    */
var array = [1,2,3,4,5];
for(var i in array) {
    // document.write(i+"<br>");   //i得到的是一个下标
    // document.write(array[i]+"<br>");   //array[i]用于取到我们的元素
}

/*
```

### while

```js
三、while 循环
        和for循环顺序相同
        循序：判断-》执行-》更新-》判断-》执行
        特点：先判断在执行
    */
var i = 1;  // 声明循环变量
while (i <= 5) {  // 判断循环条件
    // document.write(i + "<br>");  // 循环体
    i++;  // 更新循环条件
}

/*
        四、do while
        特点：先执行在判断
        不管初始条件是否成立，都至少执行一次
    */
var i = 1; // 声明循环变量
do {
    // document.write(i + "<br>");  // 循环体
    i++;   // 更新循环条件
}while (i <= 0);   // 判断循环条件
```

## JS命名区别

```js
/*
    使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；    全局
    使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；     局部
    使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。      常量（不可更改）
*/
```

## JS字符串方法

length(长度)，slice(切片)，indexOf(索引)，split(分割)，substring(截取)，replace(替换)

```js
var str = "hello world";
console.log(str.length);    //11 获取长度 空格也算

console.log(str.indexOf("o"));  //4 查找下标 只会给出首次出现的
console.log(str.indexOf("o",5));  //7 查找下标 数字就代表从哪个数字开始查

console.log(str.split("o"));    //分割 返回数组

console.log(str.replace("h","a"));  //替换  第一个参数代表你要替换的东西，第二个参数代表你要替换成什么样子

console.log(str.slice(0,7));    //hello w   切片 数字都是角标 第一个参数代表起始位置，第一个参数代表结束位置 包括起始位置但不包括结束位置
console.log(str.substring(0,7));    //hello w   截取 数字都是角标 第一个参数代表起始位置，第一个参数代表结束位置 包括起始位置但不包括结束位置
```

## JS数组方法

length(长度)，push(追加)，unshift(添加)，pop、shift(删除)，indexOf(查找)，slice、join、sort、reverse(改)

```js
var array = ["西瓜", "橘子", "香蕉", "椰子", "甘蔗"];
console.log(array.length);  //5 获取长度

console.log(array.indexOf("香蕉"));  //2 获取下标
console.log(array.indexOf("111"));  //-1 代表没有找到

console.log(array.push("葡萄"));  //6 添加 返回数组长度
console.log(array); //追加到数组的最后一个

console.log(array.unshift("苹果"));   //7 添加
console.log(array); //添加在数组的最前面

console.log(array.pop());   //删除最后一个

console.log(array.shift()); //删除最前的一个

console.log(array.slice(1,3));  //切片 数字都是角标 第一个参数代表起始位置，第一个参数代表结束位置 包括起始位置但不包括结束位置

console.log(typeof (array.join("-")));   //拼接

var arr = ['a' , 'c' , 'e' ,'d' ,'b'];
console.log(arr.sort());    //排序 只能排数字和字母
console.log(arr.reverse());
```

## 类型转换

```js
var num = 12.24;
console.log(typeof (num));
console.log(typeof (num.toString()));   //转string
console.log(num.toFixed(1)); //小数转整数 四舍五入   数字代表保留几位
console.log(parseInt("123.623"));   //转整形 不经过四舍五入
console.log(parseFloat("123.123")); //转浮点型

console.log(typeof (111));
console.log(typeof String(111));    //强制转换成字符串

console.log(typeof ("333"));
console.log(typeof Number("333"));  //强制转换成number

console.log(typeof (3));
console.log(typeof Boolean(3)); //强制转换成boolean
```
# Js进阶

## JS内置对象

JS内部已经内置了不少对象，类似于Python中的内置模块，可以直接使用，并且对象一般不需要导入，可以直接使用

### Math对象

Math对象是一个处理数学相关的对象，可以用来执行在数学相关的内容

```js
document.write(Math.sqrt(9) + "<br>");   //3 开平方
document.write(Math.abs(-122) + "<br>");   //122 绝对值
document.write(Math.PI + "<br>");   //π
document.write(Math.pow(2,4) + "<br>");  //16 次方

document.write(Math.round(123.663) + "<br>");   //取整 四舍五入
document.write(Math.ceil(123.223) + "<br>");   //向上取整 不管小数位，直接给我们加一
document.write(Math.floor(123.663) + "<br>");   //向下取整 不管小数位

document.write(Math.max(2,3,4,8) + "<br>"); //8 取最大值
document.write(Math.min(2,3,4,8) + "<br>"); //8 取最小值

document.write(Math.random() + "<br>"); //随机数 范围 0-1 包括0不包括1 0-100
document.write(Math.random() * 100 + "<br>"); //随机数  0-100 有小数位
document.write(Math.round(Math.random() * 100) + "<br>"); //随机数  0-100 整数
```

### 日期对象

日期也是常用对象之一，基本和常用的方法都是需要了解和熟悉

```js
var today = new Date(); //定义日期对象
// document.write(Date.getFullYear())
document.write(today + "<br>");

document.write(today.getFullYear() + "<br>");    //获取年份
document.write(today.getMonth() + 1 + "<br>");  //获取月份
document.write(today.getDate() + "<br>");   //获取日

document.write(today.getHours() + "<br>");  //获取小时
document.write(today.getMinutes() + "<br>");  //获取分钟
document.write(today.getSeconds() + "<br>");    //获取秒
document.write(today.getMilliseconds() + "<br>");   //获取毫秒

document.write(today.getDay() + "<br>");    //获取星期

//时间戳
var tiemstamp = Date.now();
document.write(tiemstamp);
```

## JS的Window对象

Window对象是所有客户端JS特性和API的主要接入点。它表示Web浏览器的一个窗口或窗体，并且可以用标识符window来引用它

### Window属性和方法

Window对象定义了一些属性和方法，比如：alert()方法、非常重要的document属性等

window对象定义了很多的属性和方法，open和location是常用的方法之一

```js
var oBtn = document.getElementById("btn");
//在原来的窗口上实现跳转
// oBtn.onclick = function () {
//     window.location.href = "https://baidu.com";
// }

//在新窗口实现跳转
oBtn.onclick  = function () {
    window.open('https://baidu.com');
    windoe.location = 'https://baidu.com'//跳转新页面的传统方法
}
```

### 计时器

计时器就是Window中的一个方法，可以用来实现计时的一些操作。

####定时器

定时器可以实现定时操作，并且通过window对象来实现跳转操作

```js
/*
        setTimeout()
            特点：一次性的，时间到就执行
            在指定的时间后 执行一次
*/
var timer1 = setTimeout(function () {
    console.log(111);
},3000);
// clearTimeout(timer1);   //清除定时器

/*
        setInterval()
            特点：周期性的，根据设定的时间周期进行
            已指定的时间周期进行循环执行
   */
var timer2 = setInterval(function () {
    console.log(222);
},3000);
clearInterval(timer2);  /*清除定时器*/
```

## JS函数

### 介绍

JS 的函数包裹在花括号当中，使用关键词function来定义。函数可以挂载在一个对象上，作为一个对象的属性，称为对象的方法。

### 特性

在JS中，函数即对象，程序可以随意操控它们。比如，JS可以把函数赋值给变量，或者作为参数传递给其他的函数，甚至可以设置属性，调用它们的方法。

### 有名函数和匿名函数

[有名函数]()：有名字的函数，使用时是：函数名加上括号执行，充当时间函数执行
[匿名函数]()：没有名字的函数，匿名函数不能单独出现，一般充当事件函数，比如点击事件调用的函数。

```js
//有名函数
function func1() {
    console.log(111);
}
func1();

//匿名函数
function () {
     window.location.href = "https://baidu.com";
}
```

### 函数传参

```js
function func(x) {  //形参
    console.log(x);
    //x 是形参 ，在函数内部工作，命名规则和var相同
}
func('111');    //实参 ‘111’是实参，可以传递，是已知的变量或者数据
function sum(q,w) {
    alert(q+w)
}
sum(1,2,3) //实参的个数可以与形参个数不同
//参数的个数不取决于定义，而是取决于函数内部执行的代码
function add() {
    console.log(arguments); //不定长参数，默认存放在arguments中，可以用下标来取值
}
add(123);
add(123,456);
```

### 函数返回值

JS中的函数返回和Python中函数返回类似，只是默认返回值不一样

默认返回undefined

### 函数作用域

![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1s9iANgoMAAE9aY946jY5186346 "undefined")

![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1s-OAZQmZAAEPzUt0v3M2851769 "undefined")

### JS解析顺序

1. （定义）先解析var function 参数
    1. 该步骤的var只定义变量，后面的 = 赋值不解析
    2. 该步骤的函数值定义函数，函数的执行不解析
    3. 重名的只留一个，var 和 函数重名，函数优先
2. （执行）再从上至下执行其他代码

### 递归

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1s-yAVBYLAAC2Et5fGNQ4915875)

### 自执行函数

```js
//手动调用
function f() {
    console.log(1);
}
f();

//自执行函数 在创建的时候就调用
//第一种写法
// +function () {
//     console.log(2);
// }()

//第二种写法
// ~function () {
//     console.log(2);
// }()

//第三种写法 推荐使用
(function () {
    console.log(3);
}())
```

## JS异常处理

```js
 /*
        try 正确执行的代码   可能会出错的代码
        catch 执行错误后执行
        finally 不管正确还是错误都会执行
        throw  自定义异常
   */
function func() {
    try {
        alert("我是" + num);
    } catch (e) {
        document.write("错误类型：" + e.name + "<br>" + "错误信息：" + e.message);
    } finally {
        document.write("不管是正确还是错误都会执行");
    }
}
func();

你觉得文章怎么样

已浏览 53 次，0 条评论