转生异世界从0开始学 JavaScript - One day 基础语法-CSDN博客

本文链接：https://blog.csdn.net/widrh/article/details/136958197

本文介绍了JavaScript的历史发展，从NetscapeNavigator2中的LiveScript更名过程，到JavaScript的组成部分（ECMAScript和DOM/BOM），以及如何在HTML中使用JavaScript（行内代码、内嵌式和外联式脚本），涉及Window对象的方法和属性，变量的声明、数据类型（包括基本类型、复杂类型及其转换）等内容。

摘要由CSDN通过智能技术生成

1. JavaScript的由来

1995年2月发布的，Netscape Navigator 2浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript的开发，Netscape 与 Sun 公司建立了一个开发联盟，共同开发 LiveScript。在 NetScape Navigator 2 发布前夕，网景为了更好地推广这个脚本语言（利用 Java语言的知名度），临时把 LiveScript 改名为 JavaScript，实际上两者没有任何关系。

1.1 JavaScript的组成

1. ECMAScript - JavaScript

ECMA 欧洲计算机制造联合会

网景：JavaScript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

2. DOM(Document Object Model) - 文档对象模型

一套操作页面元素的API(API（Application Programming Interface，应用程序接口）)

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

3. BOM(Browser Object Model) - 浏览器对象模型

一套操作浏览器功能的API（接口—类库—方法）,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

2. 使用JavaScript

2.1 行内代码

2.1.1 使用 javascript: 前缀构建执行 JavaScript 代码的 URL。

<a href="javascript:alert('Hello JavaScript')">点我</a>

所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL，当用户触发该 URL 时，javascript: 之后的 JS 代码就会获得执行。

2.1.2 将 JS 代码写到元素的事件属性值中

<div onclick="window.alert('Hello JavaScript!')"></div>

这两种方式只适用于“练习”的时候，工作时，建议写到单独的 JS 文件中引用。

2.2 内部代码（内嵌式）

如果页面需要中包含大量的 JavaScript 代码，则建议将这些JavaScript脚本放在 <script> 标签中。<script> 元素即可作为 <head> 的子元素，也可作为 <body> 的子元素，通常位于<body>元素闭合标签的后面。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        alert("Hello JavaScript")
    </script>
</head>

<body>

    <script>
        alert("Hello JavaScript")
    </script>
</body>

2.3 外联式（单独js文件引入）

<body>
    <script src="./01.js"></script>
</body>

为了让 HTML 页面和 JavaScript 脚本更好地分离，可以将 JavaScript 脚本单独保存在一个 .js 文件中，HTML 页面导入该 .js 文件即可。

3. Window对象

Window 对象表示浏览器中打开的窗口，在页签浏览器（比如 Chrome）中，浏览器会为 HTML 文档创建一个 window 对象，每个页签具有自己的 window对象。也就是说，同一个窗口的页签之间不会共享一个 window 对象，window 对象给我们提供了一些方法、属性和事件。

3.1 Window对象的方法示例

<body>
    <!-- 行内js -->
    <!-- 警告框 -->
    <div onclick="window.alert('还点，我看你是真没见识过黑社会啊')">点击</div>
    <!-- 确认框 -->
    <div onclick="window.confirm('微信转我100')">点击</div>
    <!-- 输入框 -->
    <div onclick="window.prompt('把你支付密码输入进去')">点击</div>

    <!-- 内联js -->
    <script>
        // 警告框
        window.alert('别点确认，自觉关掉浏览器');
        // 确认框
        window.confirm('不让你点还点，我看你是真没见识过黑社会啊');
        // 输入框
        window.prompt('打劫，把你手机密码输入进去');
    </script>
</body>

Ps：上方代码文本只是创作者写作时的心理状态，不是真的！！！！！！！

3.2 Window对象的属性示例

Window 对象是BOM的顶层（核心）对象，其他对象都是以属性的方式添加到 Window 对象下，称为 Window 的子对象。

Window 对象的 “ console ” 属性也是一个对象，它提供了几个可以在控制台输出信息的方法。再例如：Window 对象的 Document 属性是非常重要的对象,每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

// 日志信息（重点,后面常用）
window.console.log('日志信息');

// 显示一个对象的所有属性和方法
window.console.dir(window);

//document对象输出的方法，使用该方在文档中输出 HTML
window.document.write("输出到文档");
//同时也可以加入标签
window.document.write("<b>输出到文档</b>");

4. Javascript语法

4.1 Js标识符

标识符就是指变量、函数、属性，或者函数参数的的名字。

标识符是由大小写字母、数字、下划线、和美元符（$）组成

标识符的组成规则：

不能以数字开头
严格区分大小写，若多个单词组成，建议使用驼峰式命名法
不能使用JavaScript中的关键字命名
尽量做到命名能够明显表达其中的意思

Ps：驼峰式命名法例：studentName

4.2 Js代码注释

//  单行注释

/*
    多行注释
*/

Vscode注释快捷键：

单行注释：Crit + /
多行注释：Alt + Shift + A
也可以自己打开 Vscode 自己在设置里面调整快捷键

4.3 Js保留关键字

这些单词有些已经被收录，被赋予了特殊意义，所以不能使用它们最为标识符；还有些未被收录但是已经预定的单词，是目前没有被赋予特殊意义的标识符，所以也能不使用它们。

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

Ps：以上保留关键字内容来自百度。

4.4 Js代码规范

Js代码对回车换行、空格、缩进不敏感，所以写在一行也能运行，所以为了使代码严谨，建议在每段代码结尾增加 " ; " ，保持严谨，也能使代码更加美观，具有更好的可读性。

<body>
    <script>
        alert("代码第一行"); alert("代码第二行");
    </script>

    <!-- 等价于 -->

    <script>
        alert("代码第一行");
        alert("代码第二行");
    </script>
</body>

Ps：” ; “ 还有一个程序打包压缩问题，如果每行代码结束后没有加 " ; " 可能会使代码加载失败

5. 变量（重点）

5.1 定义变量

变量是一种使用方便的占位符，用于引用计算机内存地址，该地址可以存储 Script 运行时可更改的程序信息，存放数据的容器。
语法：JavaScript 中变量通常利用 var 关键字声明，并且变量名的命名规则与标识符相同。
要声明一个变量你需要首先使用关键字 var，然后输入任何你想要的名称，但是要符合标识符的命名规则：
命名规则：当标识符中需要多个单词进行表示时，常见的表示方式有下划线法（如user_name）、驼峰法（如userName）和帕斯卡法（如UserName）。读者可根据开发需求统一规范命名的方式，如下划线方式通常应用于变量的命名，驼峰法通常应用于函数名的命名等。

5.2 如何使用变量

// var 声明变量
var name;

// 变量赋值
var age;
age = 18;
// 或在声明时给变量赋值
var age_two = 18;

// 省略 var 可以直接赋值（不推荐使用）,在不var声明时会将该属性提升为全局变量
name_two = "man"

// 同时 var 多个变量
var num, sum;
num = 1;
sum = 2;

// 同时 var 多个变量并赋值
var num_two = 1, sum_two = 2;

5.3 变量在内存中的储存

变量的本质是在内存中申请的一块用于存放数据的空间

var name = "张三";
var age = 18;

5.4 变量的声明提升

变量定义之后，可以通过变量名读取变量的值。

var name = "张三";
console.log(name);

定义变量之前，去读取变量的值，就会造成变量提升。

console.log(name);
var name = "张三";
//输出结果为 undefined

由于变量提升，提升到全局作用域，但赋值并不会被提升。

console.log(name); //undefiined
var name; // 被提升到全局作用域
name = "张三"; //name在被赋值

Ps：这一点作者也心存疑点，并不是很理解，那位大佬看到了，记得私信/评论告诉我，谢谢！

6. 数据类型

6.1 数据类型有哪些

基本数据类型：Boolean、Number、String、null、undefined

复杂数据类型：Object

6.1.1 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

6.1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

6.2 基本数据类型

Boolean 类型

var bool = true;
//布尔类型的属性值只有 false/true

Number 类型（数值）

var num = 10; //Number 数值
parseInt(num); //整数类型
parseFloat(num); //浮点数类型(小数)

String 类型（字符串）

var str = "张三"； // 双引号字符串
var str_two = '李四'; //单引号字符串
// 二者没什么区别，都可以包裹字符使用

null 类型

null 类型只有一个值，及 null 。表示缺少的标识，指示变量未指向任何对象。

(把 null 作为未创见的对象，可能会更好理解)

var Null_ = null;
console.log(Null_); // null

undefined 类型。

undefined 类型也只有一个值，及 undefined 。任何一个只声明，但未赋值的变量，它的值都会(隐式类型转换)为 undefined。

var name;
console.log(name); // 输出值为undefined

6.3 复杂数据类型(Object)

在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。在 Javascript 里，引用类型的数据指的是各种对象，他们在内存中的存储方式与原始类型的数据不同。以 Object 对象为例，Object 对象是一组属性的集合。属性包含一个属性名和一个属性值。

var person = {
name = "霹雳火",
age = 3025,
gender = "机车族"
}

person储存值为下

6.4 如何检测数据类型

Js 对于数据类型的检测提供了许多方法，例如 typeof 操作符，用来检测当前数据类型。

var bool = true; //Boolean类型
var num = 1; //Number类型
var str = '一'; //String类型
var null_ = null; //null类型
var undefined_ = undefined; //undefined类型

//检测基本数据类型
console.log(typeof(bool)); //Boolean
console.log(typeof(num)); //Number
console.log(typeof(str)); //String
console.log(typeof(null_)); //undefined
console.log(typeof(undefined_)); //object

var obj = {
    name = "张三"，
    age = 18
}

//检测复杂数据类型
console.log(typeof(obj)); //object

Ps：小段总结，typeof 操作符返回的数据类型（Boolean、Number、String、undefined、Object）

7. 数据类型的转换（重中之重）

数据类型转换分为两种：

强制类型转换：由我们编程人员对代码进行强制转换。
隐式类型转换：通过 Js 解析引擎帮我们自动转换。

7.1 其他类型转换为 Boolean 类型

通过 Boolean() 操作符方法进行强制转换，例：

console.log(Boolean(undefined)); //false
console.log(Boolean(unll)); //false
console.log(Boolean("")); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false

//以上值转换结果都是false

console.log(Boolean(9527)); //true
console.log(Boolean(name:"zhangsan")); //true
console.log(Boolean("Hello")); //true

//以上值转换结果是true
//非空字符串、非0数字、对象，这些值都会转换为true

7.2 其他类型转换为 Number 类型

7.2.1 Number()

通过 Number() 操作符方法进行强制转换，例：

//Number() 转换

//转换字符串
console.log(Number('123.321')); //123.321

//如果是非数字字符串的话会转换成NaN(是数值类型但是非数字)
console.log(Number('abc')); //NaN
console.log(Number('123abc')); //NaN 
console.log(Number('abc321')); //NaN
console.log(Number(false)); //0 
console.log(Number(true)); //1
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN 
console.log(Number(name:"zhangsan")); //NaN

7.2.1 parseInt()

使用 parseInt() 操作符方法也可强制转换为 Number 类型，

parseInt() 操作符是对数值进行取整，且不会进行四舍五入运算。例：

//parseInt() 操作符是对数值进行取整，且不会进行四舍五入运算。
console.log(parseInt(123.321)); //123

//对于字符串类型转换
console.log(parseInt('abc')); //NaN
console.log(parseInt('123')); //123

//对于以数字开头的字符串，会保留后面第一个字母前的数字
console.log(parseInt('123abc')); //123
console.log(parseInt('abc123')); //NaN

//对于布尔值转换
console.log(parseInt(true)); //NaN
console.log(parseInt(false)); //NaN

//undefined
console.log(parseInt(undefined)); //NaN

//null
console.log(parseInt(null)); //NaN

//object
console.log(parseInt({name:"zhangsan")); //NaN

7.2.3 parseFloat()

使用 parseFloat() 操作符方法也可以强制转换成 Number 类型，

parseFloat() 操作符保留原数值[保留小数点]，不会对数值进行四舍五入运算。例：

//parseFloat() 保留原数值，不会进行四舍五入运算
console.log(parseFloat('123.321')); //123.321
console.log(parseFloat('abc')); //NaN
console.log(parseFloat('789')); //789

//对于以数字开头的字符串，会保留后面第一个字母前的数字
console.log(parseFloat('123abc')); //123
console.log(parseFloat('abc123')); //NaN

//对于布尔值转换
console.log(parseFloat(true)); //NaN
console.log(parseFloat(false)); //NaN

//undefined
console.log(parseFloat(undefined)); //NaN

//null
console.log(parseFloat(null)); //NaN

//object
console.log(parseFloat({name:"zhangsan")); //NaN

7.3 其他类型转换为 String 类型

7.3.1 String()

使用 String() 可以强制转换其他类型变成 String 类型，

String() 可以将任意类型转换成字符串 String 类型。例：

console.log(String(123)); //"123"
console.log(String(true)); //"true"
console.log(String(null)); //"null"
console.log(String(undefined)); //"undefined"
console.log(String({name:'zhangsan'})); //"{name:'zhangsan'}"

7.3.2 toString()

使用toString()将其他类型的数据转换成 String 类型。

除了 null 和 undefined 没有 toString() 方法外，其他数据类型都可以完成字符的转换。

同时 toString() 也返回 2进制？的数值字符串，百度了也不是很懂这个属性

例：

//这段代码菜鸟C来的，突然理解了一点
var count = 10;

console.log(count.toString()); //'10'
console.log((17).toString()); //'17'
console.log((17.2).toString()); //'17.2'

var x = 6;

console.log(x.toString(2)); //'110'
console.log((254).toString(16)); //'fe'

console.log((-10).toString(2)); //'-1010'
console.log((-0xff).toString(2)); //'-11111111'

7.4 隐式类型转换

7.4.1 隐式类型转换 Number

// 当非数字类型的字符串相减时，结果都等于NaN
console.log('abc' - '18'); //NaN

// 当数字类型的字符串进行
// 减、乘、除、取余运算时，首先会将字符串转换成数字，然后再进行运算，最终的结果返回的是数值型。
console.log('2' - '1'); //1
console.log('3' * '4'); //12 
console.log('8' / '4'); //2
console.log('12' % '5'); //2

7.4.2 隐式类型转换 String

console.log(12 + ''); //'12' 
console.log(12 + 3 + '4'); //'154'
console.log( '4'+ 12 + 3); //'4123'

7.4.3 使用函数隐式类型转换 isNaN

用于检查其参数是否是非数字值（ isNaN() 函数）

console.log(isNaN(12)); //false
console.log(isNaN(-1.2)); //false
console.log(isNaN(5 - 2)); //false
console.log(isNaN(0)); //false
console.log(isNaN("Hello")); //true
console.log(isNaN("200")); //false