JavaScript基本语法

发布时间:2024年01月07日

1. JavaScript 是什么

JavaScript (简称 JS),是世界上最流行的编程语言之一。是一个脚本语言,通过解释器运行,主要在客户端(浏览器)上运行,现在也可以基于 node.js 在服务器端运行。
在这里插入图片描述

1.1 JavaScript 和 HTML 和 CSS 之间的关系

在这里插入图片描述

1.2 JavaScript 运行过程

在这里插入图片描述
在这里插入图片描述
浏览器分成渲染引擎 + JS 引擎。
在这里插入图片描述
JS 引擎逐行读取 JS 代码内容,然后解析成二进制指令,再执行。

1.3 JavaScript 的组成

在这里插入图片描述
光有 JS 语法,只能写一些基础的逻辑流程。但是要想完成更复杂的任务, 完成和浏览器以及页面的交互,那么久需要 DOM API 和 BOM API。

2. JavaScript 的书写形式

2.1 行内式

直接嵌入到 html 元素内部
在这里插入图片描述
在这里插入图片描述
我们点击这个按钮没有反应。
在这里插入图片描述
在这里插入图片描述
此时再按就会有反应了。注意:JS 中字符串常量可以使用单引号表示,也可以 使用双引号表示。HTML 中推荐使用双引号,JS 中推荐使用单引号。

2.2 内嵌式

写到 script 标签中
在这里插入图片描述

2.3 外部式

写到单独的 .js 文件中
在这里插入图片描述
在这里插入图片描述
注意:这种情况下 script 标签中间不能写代码。必须空着(写了代码也不会执行)

3. 变量的使用

在这里插入图片描述
var和let 是 JS 中的关键字,表示这是一个变量。= 在 JS 中表示 “赋值”,相当于把数据放到内存的盒子中。初始化的值如果是字符串,那么就要使用单引号或者双引号引起来。
我们这里推荐使用let,因为let出现的比var晚,意味着避免了var定义变量的缺陷。如果使用let定义变量,此时变量的生命周期、作用域基本和java相同
在这里插入图片描述

3.1 静态变量和动态变量

动态类型意味着代码在执行的过程中,变量类型可以随时发生变化。
静态类型意味着变量定义的时候是什么类型,在运行中就是什么类型

JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型),随着程序运行, 变量的类型可能会发生改变。这一点和 C Java 这种静态类型语言差异较大,C, C++, Java, Go 等语言是静态类型语言。一个变量在创建的时候类型就确定了,不能在运行时发生改变。如果尝试改变, 就会直接编译报错。

4. 基本数据类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.1 undefined 未定义数据类型

如果一个变量没有被初始化过,结果就是 undefined 类型
在这里插入图片描述undefined 和字符串进行相加,结果进行字符串拼接:
在这里插入图片描述
undefined 和数字进行相加,结果为 NaN:
在这里插入图片描述

4.2 null 空值类型

在这里插入图片描述
注意:null 和 undefined 都表示取值非法的情况,但是侧重点不同。null 表示当前的值为空(相当于有一个空的盒子)。undefined 表示当前的变量未定义 (相当于连盒子都没有)。

5. 数组

在这里插入图片描述
注意: JS 的数组不要求元素是相同类型,这一点和 C, C++, Java 等静态类型的语言差别很大。

5.1 新增数组元素

5.1.1 通过修改 length 新增

在这里插入图片描述

5.1.2 通过下标新增

在这里插入图片描述
此时这个数组的 [0] 和 [1] 都是 undefined。

5.1.3 使用 push 进行追加元素

在这里插入图片描述

5.2 删除数组中的元素

在这里插入图片描述

6. 输入输出

6.1 输入: prompt

弹出一个输入框:
在这里插入图片描述
在这里插入图片描述

6.2 输出: alert

弹出一个警示对话框, 输出结果:
在这里插入图片描述
在这里插入图片描述

6.3 输出: console.log

在控制台打印一个日志(供程序员看):
在这里插入图片描述
注意: 在 VSCode 中直接输入 “log” 再按 tab 键, 就可以快速输入 console.log
需要打开浏览器的开发者工具(F12) => Console 标签页 才能看到结果:
在这里插入图片描述

7. 函数

7.1 语法格式

在这里插入图片描述

7.2 函数表达式

在这里插入图片描述
此时形如 function() { } 这样的写法定义了一个匿名函数,然后将这个匿名函数用一个变量来表示。后面就可以通过这个 add 变量来调用函数了。
arguments叫做:类数组对象,当我们在js中在调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的里面

8. 作用域

某个标识符名字在代码中的有效范围。
在这里插入图片描述
在这里插入图片描述
这样写的结果是:101,原因是:在JS中,如果定义一个变量不使用let和var,则得到一个全局变量。

8.1 作用域链

在这里插入图片描述
举个例子:
在这里插入图片描述
这里的结果是10。执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找。如果还没找到, 就去全局作用域查找。大家只需要记住一个点就行:就近原则。

9. 对象

9.1 使用 字面量 创建对象

使用 { } 创建对象:
在这里插入图片描述
在这里插入图片描述
使用对象的属性和方法:

// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();

9.2 使用 new Object 创建对象

在这里插入图片描述
注意:使用 { } 创建的对象也可以随时使用 student.name = " "; 这样的方式来新增属性。

9.3 使用 构造函数 创建对象

前面的创建对象方式只能创建一个对象,而使用构造函数可以很方便 的创建 多个对象。使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程。
在这里插入图片描述
在这里插入图片描述
举个例子:
在这里插入图片描述

9.4 class关键字创建对象

这个关键字在ES6之前是没有的。
在这里插入图片描述
这里构造函数用一个constructor来表示,方法也不需要加function

文章来源:https://blog.csdn.net/qq_52154068/article/details/135412709
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。