JavaScript

AQAQian_

已于 2022-02-13 01:08:25 修改

阅读量494

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

于 2022-02-12 22:49:59 首次发布

本文链接：https://blog.csdn.net/AQAQian_/article/details/122850623

版权

JavaWeb 专栏收录该内容

5 篇文章 19 订阅

订阅专栏

一，JavaScript概述

1，JavaScript是什么？

2，JavaScript 和 HTML 和 CSS 之间的关系

一，JavaScript概述

1，JavaScript是什么？

JavaScript简称JS，是世界上最流行的编程语言之一，是一种解释性语言（没有编译和运行之分），即使有语法错误那么也只有运行时错误，没有编译错误（查看JS报错需要通过控制台）

JS主要运用于网页开发(更复杂的特效和用户交互) 、网页游戏开发、服务器开发(node.js) 、桌面程序开发(Electron, VSCode 就是这么来的) 、手机 app 开发等。

2，JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨)

CSS: 网页的表现(皮)

JavaScript: 网页的行为(魂)

3，如何进行JS编写

1）关联在HTML中执行

内部关联方式：<script>js语句</script>

外部关联方式：<script src = "js资源的url"></script> -------------- 主要使用方法

2）直接在浏览器的开发者工具的控制台中进行编写（每行都独立执行）

4，JavaScript 的组成

1）ECMAScript(简称 ES): JavaScript 语法，这是一套 "标准", 无论是啥样的 JS 引擎都要遵守这个标准来实现.

2）DOM: 页面文档对象模型, 对页面中的元素进行操作

3）BOM: 浏览器对象模型, 对浏览器窗口进行操作

二，JavaScript基本语法

JS的一些基本语法有很多都同Java一样或者类似，以下主要介绍一些差异比较大的地方

1，输入输出

输入：prompt——弹出输入框，并得到用户输入的值

输出：alert——即弹窗，弹出一个警示对话框，输出结果

console.log——在控制台打印一个日志（供程序员看）

console.error——在控制台打印一个报错

2，变量的使用

1）数据类型：number，boolean，string，undefined，null，function，object，array

2）变量类型：只有一种——引用类型

3）如何使用：js中的变量必须先定义才能使用

定义：var a; var 是 JS 中的关键字, 表示这是一个变量，每个语句最后带有一个 ;

使用：a = 10;

变量是对内存上某段空间的逻辑抽象

3，基本数据类型

1）number

JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示

特殊的数字值：

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围；

-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围；

NaN: 表示当前的结果不是一个数字；

2）string

基本规则：字符串字面值需要使用引号引起来, 单引号双引号均可

如果字符串本来已经包含引号需要使用转义字符，如：\"、\'、\\

模板字符串：使用反引号，如`hello ${world}`------尝试把world变量展开，类似于format输出

求长度：使用string的length属性即可；

3）boolean

表示“真”和“假”，boolean 参与运算时当做 1 和 0 来看待

4）undefined/null

这两种数据类型都是针对一种不存在的抽象

前者针对于如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

undefined 和字符串进行相加, 结果进行字符串拼接

undefined 和数字进行相加, 结果为 NaN

后者表示当前的变量是一个空值

区别：前者连盒子都没有，但null还有一个空的盒子

4，运算符

1）算术运算符：+、-、*、/、%

2）赋值运算符&复合赋值运算符：=、+=、-=、*=、/=、%=

3）自增自减运算符：++、--

4）比较运算符：<、>、<=、>=、==（不严格等于）、!=、===（严格等于）、!==

这里的严格是要求类型也必须一样

5）逻辑运算符：&&、||、!

6）位运算：&、|、~、^

7）移位运算：<<、>>、>>>

5，条件语句

1）if语句

2）三元表达式：

条件？表达式1：表达式2

3）switch语句

适合多分支的场景

6，循环语句

1）while循环

2）for循环

注意continue和break的区别：

continue结束这一次循环，而break结束整个循环

7，数组

1）创建数组：

new--------- var arr = new Array();

字面常量----var arr = [1, 2, 3, false, 'haha'];

数组中保存的内容称为元素，JS的数组不要求元素是相同类型

2）追加元素

arr.push(…) 尾插 arr.unshift(…) 头插

3）删除元素

arr.pop(…) 尾删 arr.shift(…) 头删

arr.splice(num1, num2) 从下标为num1的位置开始删除num2个元素

4）新增元素

① 修改length：相当于在末尾新增元素. 新增的元素默认值为 undefined；

②下标新增：如果下标超出范围赋值元素, 则会给指定位置插入新元素；

5）数组的遍历

① for(var i = 0; i < a.length; i++) { console.log(a[i]); }

② for(var i in a) { console.log(a[i]); }

8，函数

function add(x, y) { return x+y; }

注意：

① function关键字；

② 没有返回值类型；

③ 形参列表中的形参没有类型，也不需要var

JS中的函数是第一等公民，享有同其他公民同样的地位，也就是说函数也是一种数据类型，比如 var b = add；就可以把函数add赋值给变量b，b就可以当作add函数使用

函数中也可以定义其他函数

9，赋值

js中的变量没有类型，所以表现为对赋值操作的两边没有任何要求

10，JS中的对象

JS中的对象类似于Java中的Map

1）使用字面量创建对象

使用{ }创建对象，如 var a = {}; 就是创建了一个空的对象

属性和方法使用键值对的形式来组织，键值对之间使用逗号分割，键和值之间用冒号分割，方法的值是一个匿名函数

使用“.成员”来访问属性

2）使用构造函数创建对象

基本语法：

function 构造函数名(形参) {

this.属性 = 值;

this.方法 = function...

}

var obj = new 构造函数名(实参);

用构造函数可以很方便的创建多个对象

四，Web中js的应用

利用JS语法在恰当时机操作浏览器或者浏览器中展示的文档信息，其中浏览器以BOM的形式体现，浏览器中展示的文档信息以DOM的形式体现（最常见），进而影响用户在浏览器上看到的内容

1，document下的常见操作

1）querySelector（选择器字符串）-----从文档中找到第一个符合选择器规则的元素

这里的选择器和CSS中学到的选择器规则完全一致，如id选择器、元素选择器、类选

择器、……

2）querySelectorAll（选择器）-------从文档中选择所有符合选择器规则的元素，类似于数组

2，事件驱动（event-driven）

明确发生某件特殊含义的行为时，执行某个动作，如下面这个代码就代表只有点击button才会执行changeH1函数

var button = document.querySelector('button');

button.onclick = changeH1 //onXX = …；表示绑定事件

console.log('为 button 绑定了 changeH1 函数');

function changeH1() {

        console.log('changeH1 被调用了');

        var h1 = document.querySelector('h1');

        h1.innerText = '按钮被点击';

}