【前端】JavaScript 基础-CSDN博客

本文链接：https://blog.csdn.net/AAlykk/article/details/147401550

> 作者：დ旧言~
> 座右铭：松树千年终是朽，槿花一日自为荣。

> 目标：了解 JavaScript 基础语法。

> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!

> 专栏选自：前端基础知识_დ旧言~的博客-CSDN博客

> 望小伙伴们点赞👍收藏✨加关注哟💕💕

一、处识 JavaScript

概念：

JavaScript 简称 JS ，是一个脚本语言，通过解释器运行，主要在客户端（浏览器）运行，现在也可以基于 node.js 在服务端运行

JavaScript 能做的事情：

网页开发（复杂的特效和用户交互）
网页游戏开发
服务器开发（基于node.js）
桌面程序开发（如VSCode）
手机app开发

JavaScript 的组成：

ECMAScript：JavaScript语法
DOM：页面文档对象模型，对页面的元素进行操作
BOM：浏览器对象模型，对浏览器窗口进行操作

JS 是一个动态类型语言, JS 是一个弱类型语言：

一个变量在程序运行过程中,类型可以发生改变,这就是动态类型 (js,python,php...)
一个变量在程序运行过程中,类型学不能发生改变,这就是静态类型(c,java,c++,go..)
可以发生隐式类型转换的就是弱类型语言
不可以发生隐式类型转换的就是强类型语言

二、JavaScript 的基础语法

2.1、变量的用法

创建变量：

var与let都可以创建变量，他俩只表示这是一个变量，
而不指定具体的类型，具体类型由后面具体的赋值确定
var与let的区别是作用域不同，var定义的是全局变量,let定义的是局部变量
建议使用 let

    <script>
        var a = 10;
        var name = "张三";
        let flag = true;
    </script>

使用变量：

    <script>
        var a = 10;
        var name = "张三";
        let flag = true;
        a = 20; //修改变量的值
        console.log(name); //控制台打印变量
    </script>

理解动态类型：

JS的变量类型是程序运行过程中才确定的，随着程序的运行，变量的类型可能会发生改变。

var a = 10;
var name = "小花";
a = "张三";
name = 10;

2.2、基本数据类型

2.2.1、Number 数字类型

JS不区分整数和浮点数，统一用数字类型来表示，可以用不同的进制表示：

var a = 10;  //十进制
var b = 07;  //八进制，以0开头
var c = 0xa; //十六进制，以0x开头
var d = 0b10;//二进制，以0b开头

特殊的数字值：

Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围
-Infinity：负无穷大，小于任何数字。表示数字已经低于了JS能表示的范围
NaN：表示当前的结果不是一个数字

var max = Number.MAX_VALUE;
console.log(max*2); //得到Infinity
console.log(-max*2);//得到-Infinity
console.log("haha"-10);//得到NaN

注意：

负无穷大和无穷小不是一回事，无穷小是无限趋近 0，值为 1 / Infinity
"haha" - 10得到 NaN ，但是 "haha" + 10不是 NaN ，而是进行字符串拼接得到 "haha10"
可以使用 isNaN 判断是不是一个数字：

console.log(isNaN(10)); //true
console.log(isNaN("haha"-10));  //false

2.2.2、String 字符串类型

字符串字面量需要用单引号或者双引号引起来：

var a = "aaa";
var b = 'bbb';
var c = ccc;  //运行出错

如果字符串中已经包含了引号咋办：

var msg = "my name is 'zhangsan'"; //正确，双引号包裹单引号
var msg = 'my name is "zhangsan"'; //正确，单引号包裹双引号
var msg = "my name is \"zhangsan\""; //正确，使用转义字符，\"表示内部的引号
var msg = "my name is "zhangsan""; //出错

转义字符：

\n，表示换行
\\，表示 \
\'，表示 '
\"，表示 "
\t ，表示制表符

求字符串的长度：使用String的length属性即可

var s = "haha";
console.log(s.length); //4
var c = "hello";
console.log(c.length); //5

字符串拼接：使用+进行拼接

var a = "hello";
var b = "word";
console.log(a+b);//helloword

数字和字符串也可以拼接：

var a = "my age is ";
var b = 16;
console.log(a+b); //my age is 16

2.2.3、Boolean 布尔类型

输出结果：

表示真true或假false，参与运算时当作1和0

var a = true;
var b = false;
console.log(2+a+b);//3

2.2.4、undefined 数据类型

如果一个变量没有被初始化，就是 undefined 类型，结果也是 undefined ：

var a;
console.log(a);//undefined

undefined 和字符串相加，结果为字符串拼接的结果：

var a;
console.log(a+"haha"); //undefinedhaha

undefined 和数字相加，结果为 NaN ，表示不是一个数字类型：

var a;
console.log(a+10);//NaN

2.2.5、null 空值类型

null 表示当前变量为一个“空值”：

var a = null;
console.log(a+10); //10
console.log(a+"haha"); //nullhaha

注意：

null 和 undefined 都为取值非法情况，但是侧重不一样，null 表示当前的值为空（相当于有一个空盒子），undefined 表示当前变量未定义（相当于连盒子都没有）

2.3、运算符

typeof 运算符：使用typeof操作符可以用来检查一个变量的数据类型。

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

算数运算符：

+ - * / %

赋值运算符和复合赋值运算符：

= += -= *= /= %=

自增自减运算符：

++ --

比较运算符：

< > <= >= ==(会隐式类型转换) != ===(不会隐式类型转换) !==

逻辑运算符：

&& || !

位运算符：

& | ~ ^

移位运算符：

<< >> >>>

2.4、条件语句

if 语句：判断一个数是奇数还是偶数

var num = 10;
if(num == 1){
    console.log(num+"既不是偶数也不是奇数");
}else if(num % 2 == 0){
    console.log(num+"是偶数");
}else {
    console.log(num+"是奇数");
}

三元表达式：将一个 boolean 表达式的值取反

var a = true;
a = a?false:true;
console.log(a);

switch分支：用户输入一个数，判断是星期几

var day = prompt("请输入一个数字：");
switch(parseInt(day)){ //day为一个字符串，必须转为数字
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期天");
        break;
    default:
        alert("输入有误");   
}

2.5、循环语句

while 循环：打印1到10

var num = 1;
while(num <= 10){
    console.log(num);
    num++;
}

for 循环：计算5的阶乘

var result = 1;
for(var i = 1;i <= 5;i++){
    result *= i;
}
console.log(result);

continue 与 break：

continue 跳出本趟循环，继续执行下一次循环，break 结束整个循环

2.6、数组

数组的创建：

使用new关键字创建：

var arr = new Array();

直接使用 [ ] 创建 (常用方式)：

var arr = [];

使用字面量方式创建：

var arr = [1,2,3,"hehe",5,true];

注意：

JavaScript 使用 [] 包裹数组元素，而不是 {}
JavaScript 不要求数组中是同一类型元素

遍历数组的三种方式：

let arr = ['咬人猫','兔总裁','阿叶君'];
        //for循环遍历
        for(let i = 0;  i < arr.length; i++) {
            console.log(arr[i]);
        }
        for(let i in arr) {
            //此处i是数组下标
            console.log(arr[i]);
        }
        for(let elem of arr) {
            //此处elem是数组元素
            console.log(elem);
        }

获取数组元素：

通过修改length新增：

var arr = [1,2,3,4];
arr.length = 6;
console.log(arr[5]); //新增元素默认值为undefined
console.log(arr);

使用push进行元素追加：将一组数的奇数放到一个新数组中

var arr = [1,2,3,4,5,6,7,8,9];
var newArr = [];
for(var i = 0;i < arr.length;i++){
    if(arr[i] == 1){
        continue;
    }
    if(arr[i] % 2 != 0){
        newArr.push(arr[i]);
    }
}
console.log(newArr);

删除数组中的元素：

var arr = [1,2,3,4,5];
arr.splice(2,2);//删除3，4
console.log(arr);//打印1，2，5

常见方法：

2.7、函数

函数的创建格式①：

function 函数名 (参数列表) {
    函数体;
    return 返回值;
}

注意：

实参和形参的个数可以不匹配, 但是实际开发一般要求形参和实参个数要匹配
实参个数比形参个数多，多出的不参与运算
实参个数比形参个数少，多出的形参值为 undefined

函数的创建格式②：

var add = function(){
    var sum = 0;
    for(var i = 0;i < arguments.length;i++){
        sum += arguments[i];
    }
    return sum;
}
console.log(add(10,20,30));//60
console.log(add(1,2,3));//6
console.log(typeof add);//function

说明：

function(){} 定义了一个匿名函数，用变量来表示，后面就可以用这个变量来调用函数了
arguments 为传入的参数，将参数作为一个数组
typeof add 输出的是 add 这个变量的类型

作用域：

全局作用域：在整个 script 标签，或者单独的 js 文件中生效
局部作用域 / 函数作用域：在函数内部生效

举个栗子：

var a = 10;//全局变量
function test (){
    var a = 20;//局部变量
    console.log(a);//优先找自己的局部变量，若没有则找全局变量
}
test();

var 与 let 的区别：

作用域不同，let 定义的是局部变量

2.8、对象

对象的创建：使用{}创建对象

var student = {
    name: "张三",
    age: 23,
    sex: "男",
    play: function(){
        console.log("正在玩耍");
    }
};

注意：

属性和对应的值用键值对的形式来组织
键值对之间用“，”分割，最后一个属性“，”可有可无
键和值用: 分割
方法的值是一个匿名函数

对象属性和方法的使用：

console.log(student.name);
console.log(student.age);
student.play();//调用方法要加()

理解 new 关键字：

先在内存中创建一个空的对象 { }
this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
执行构造函数的代码, 给对象创建属性和方法
返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)
参考new 运算符 - JavaScript | MDN

三、WebAPI

什么是 WebAPI：

ECMAScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器
WebAPI 就包含了 DOM + BOM

什么是 DOM ？

DOM 全称为 Document Object Model（文档指的是界面显示的部分，对象指的是js中代码操作的部分，通过这两个配合使界面产生改变）
DOMAPI是js提供给浏览器的一组用来操作页面元素的API。主要是进行以下三个部分元素的操作。

1.获取元素（.querySelector/querySelectorAll）

2.事件处理（.onclick）

3.操作元素内容（.innerHTML）

什么是 DOM 树？

一个页面的结构是一个树形结构 , 称为 DOM 树。类似于我们前面学的文件的存储路径，也可以通俗地说成家谱。下面我们列出一个页面结构的DOM树的结构，便于理解。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

3.1、获取元素

什么是获取元素：

这部分工作类似于 CSS 选择器的功能。要想操作页面上的元素，就需要先拿到对应的js对象。

怎么获取元素呢：

我们常使用querySelector/querySelectorAll来实现。这两个元素其实是一个document这样的对象的属性。（当一个页面加载好之后，就会自动生成一个全局变量，叫做document），在这里面就有有一些属性和方法，通过这些属性和方法来操作页面的内容

演示querySelector：

<body>
	<div class="one">
		hello
	</div>
	<div id="two">
		hello1
	</div>
	<ul>
		<li>aaa</li>
	</ul>
   <script>
	   //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等）
	   //这个变量名是任意的，只不过对象中填写的值要以div中的为主
	   let obj=document.querySelector('.one');
	   let syb=document.querySelector('#two');
       let div=document.querySelector("ul li");
	   //类选择器
	   console.log(obj);
	   //id选择器
	   console.log(syb);
	   //后代选择器
	   console.log(div);
   </script>
</body>

演示querySelectorAll：

body>
	<ul>
		<li>aaa</li>
		<li>bbb</li>
	</ul>
   <script>
	   //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等）
	   //这个变量名是任意的，只不过对象中填写的值要以div中的为主
       let div=document.querySelectorAll("ul li");
	   //后代选择器
	   console.log(div);
   </script>
</body>

3.2、事件初识

什么是事件：

在js中，很多代码都是通过事件来实现的。事件就是浏览器对于用户的操作的一个统称（准确的说,事件也不一定全是用户操作产生的,但是大部分是的）。
通俗的举个例子，我们使用鼠标进行移动光标是一个事件，我们使用鼠标在页面的某个位置进行点击，也是一个事件等待。其中js主要的工作就是在不同的事件中进行不同的处理。

事件的三要素：

事件源：哪个HTML产生的元素
事件类型：鼠标移动，鼠标点击，窗口大小切换
事件处理程序：当事件产生之后，执行什么样的js代码

举个栗子：

<body>
	<!-- 创建一个按钮 -->
	<!-- 事件源：这个button对象 -->
	<button onclick="f()">请按按钮</button>
   <script>
	  let cell=document.querySelector('button');
	//   事件类型：onclick 表明这是一个点击事件
	   function f(){
		   alert('hello');
	   }
   </script>
</body>

3.3、操作元素

图解说明：

案例一：修改原内容

<body>
    <div id="screen">welcome to js</div>
    <button id="one">获取内容的按钮</button>
    <button id="two">修改内容的按钮</button>
       <script>
           //首先要获取到这个获取内容的按钮
    let btn=document.querySelector('#one');
    //使它能够产生获取点击的事件类型
    btn.onclick=function(){
        let screen=document.querySelector('#screen');
        //获取到div中的welcome to js的内容
        console.log(screen.innerHTML);
    }
    let btn2=document.querySelector('#two');
    btn2.onclick=function(){
        let screen=document.querySelector('#screen');
        //这是修改后的内容
        screen.innerHTML += 'a';
    }
       </script>
    </body>

案例二：实现 plus 操作

<body>
	<div id="screen">0</div>
	<button id ="plus" >+</button>
    <script>
        let plusBtn = document.querySelector("#plus");
        plusBtn.onclick = function () {
        //1.获取screen里面的值
            let screen = document.querySelector("#screen");
			//这个时候得到的类型是字符串类型，可以用typeof进行检测
            let val = screen.innerHTML;
			//因为是字符串类型，直接加的话只能够实现拼接，所以这个时候，我们先将它转化为数字类型
			val=parseInt(val);
        //2.将其＋1
            val += 1;
		//3.将这个值写回原来的位置
		screen.innerHTML=val;
	}
   </script>
</body>

3.4、小结

选中元素 querySelector / querySelectorAll
事件 onclick
修改元素内容 innerHTML
修改元素属性元素.属性
修改表单属性元素 .value 元素 .type
元素样式元素 .style .样式名=值元素 .className = css 类名
创建元素 createElement
把元素放到 dom 树上 appendChild
删除元素 removeChild

四. JavaScript 的对象和 Java 的对象

JavaScript 没有 “类” 的概念：

对象其实就是 “属性” + “方法” .
类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”
在 JavaScript 中的 “构造函数” 也能起到类似的效果.
而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象。
在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.

JavaScript 对象不区分 “属性” 和 “方法”：

JavaScript 中的函数是 “一等公民”, 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.

JavaScript 对象没有 private / public 等访问控制机制：

对象中的属性都可以被外界随意访问

JavaScript 对象没有 “继承”：

继承本质就是 “让两个对象建立关联”. 或者说是让一个对象能够重用另一个对象的属性/方法.
JavaScript 中使用 “原型” 机制实现类似的效果.

JavaScript 没有 “多态”：

多态的本质在于 “程序猿不必关注具体的类型, 就能使用其中的某个方法”.
C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过子类继承父类, 并重写父类的方法的方式来实现多态的效果.
但是在 JavaScript 中本身就支持动态类型, 程序猿在使用对象的某个方法的时候本身也不需要对对象的类型做出明确区分. 因此并不需要在语法层面上支持多态.

五、实战项目

运行结果：

代码呈现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
 
        * {
            /* 消除浏览器默认样式 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 600px;
            margin: 20px auto;
        }
 
        h1 {
            text-align: center;
        }
 
        p {
            text-align: center;
            color: #666;
            margin: 20px auto;
        }
 
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 竖直方向居中 */
            align-items: center;
        }
        .row span {
            width: 80px;
        }
        .row input {
            width: 200px;
            height: 30px;
        }
 
        .row button {
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            /* 去掉默认边框 */
            border: none;
            border-radius: 3px;
        }
 
        .row button:active {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交,信息将显示到下方表格</p>
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
        <div class="row">
            <button id="revert">撤销</button>
        </div>
    </div>
 
    <script>
        // 实现将提交的内容呈现在页面显示
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            //分别获取三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == '') {
                return;
            }
            //构建一个新的div
            let rowDiv = document.createElement('div');
            //此处class属性名不构造row防止撤销把自己删除了
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说 ' + msg;
            containerDiv.appendChild(rowDiv);
            // 完成提交后 清空输入框内的内容
            for(let input of inputs) {
                input.value = '';
            }
            let revertButton =document.querySelector('#revert');
            revertButton.onclick = function() {
                //删除最后一条消息
                //选中所有的row message,找出最后一个row message,然后进行删除
                let rows = document.querySelectorAll('.message');
                //如果没有数据就不删了
                if(rows == null || rows.length == 0) {
                    return;
                }
                containerDiv.removeChild(rows[rows.length-1]);
            }
        }
    </script>
</body>
</html>