🔝前端核心技术之一 JavaScript
大家好，我是allubiba-H，一名大三的学生，专业是通信工程一个偏向于硬件的专业，因为较喜欢互联网行业进入了华清远见这个家庭👨👩👦👦，然后想记录一下我在华清远见的学习过程。由于本人刚学前端水平有限，可能避免不了一些错误，希望大家多多支持🤗。
便捷目录
JavaScript — 动态客户端脚本
JavaScript是一种编程语言，允许您在网页上实现复杂的东西。每当一个网页不仅仅是坐在那里显示静态信息供您查看实时显示及实时的内容更新，交互式地图，动画2D / 3D图形，滚动视频自动点唱机或更多。
学Javascript之前你必须了解HTML和CSS基本知识
1.1 Javascript实现
完整的Javascript实现包括以下几个部分：
- 核心（ECMAScript）
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
ECMAScript
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
DOM
文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。
<html>
<head>
<title>我是网页</title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>
上面代码通过DOM可以表示为一组分层节点：
BOM
浏览器对象模型（BOM，Browser Object Model）API，用于支持访问和操作浏览器的窗口。
我们可以用BOM操作一些扩展比如：
- 弹出新浏览器窗口的能力
- 移动，缩放和关闭浏览器的能力
- navigator 对象，提供关于浏览器的详细信息
- location 对象，提供浏览器加载页面的详尽信息
- screen 对象，提供关于用户分辨率的详尽信息
- 更多
1.2 HTML中的Javascript
使用<script>元素
将Javascript插入HTML的主要方法是使用<script>元素。
这个元素常用的有以下属性：
| 属性名 | 描述 |
|---|---|
| charset | 使用src属性指定的代码字符集 |
| src | 表示包含要执行的代码的外部文件 |
| type | 表示代码块中脚本语言的内容类型 |
使用<script>的方式有两种：通过它直接在网页中嵌入Javascript代码，以及通过其他网页中包含的外部Javascript文件
<script>
document.write("Hi !")
</script>
🧐上述代码执行完成后再对应的HTML网页上显示Hi !。
要包含外部文件中的Javascript，就必须使用src属性。这个属性是一个URL，指向包含Javascript代码的文件。
<script src="script.js">
</script>
标签的位置
所有的<script>元素都被放在页面<head>标签内
<html>
<head>
<title>我是网页</title>
<script src="script.js"/>
</head>
<body>
</body>
</html>
这个方法目的是主要把外部的CSS和Javascript文件都集中放到一起，不过，把所有的Javascript文件都放在<head>标签里，也就意味着必须把所有的Javascript代码都下载解析和解释完成后，才能开始渲染页面。对于需要很多的Javascript的页面，这会导致页面渲染的明显延迟，为了解决这个问题我们可以把script标签放在<body>元素中的页面内容后。
<html>
<head>
<title>我是网页</title>
</head>
<body>
...页面内容...
<script src="script.js"/>
</body>
</html>
1.3 变量
Javascript的变量是松散类型的，可以用于保存任何类型的数据。
有三个关键词可以声明变量：var,const和let，其中var在Javascript所有的版本中都可以使用，而其余两个只能在ES6及更晚的版本中使用。
var 关键词
要定义变量，可以使用var，后跟变量名；
var age;
如果不赋初始值的情况下，会保存一个特殊值undefined;
let 声明
let跟var的作用差不多，但区别在于let声明的范围是块作用域，var声明的范围是函数作用域。
const 声明
const 和 let 基本相同，唯一区别是在用它声明变量是必须同时初始化变量，且尝试修改const 声明的变量会导致运行时错误🙄。
1.4 数据类型
Javascript有6中简单数据类型（也称为原始类型）：
Undefined,Null,Boolean,Number,String 和 Symbol （ES6新加的本人也不太了解😀本文章不会对此介绍）
Typeof 操作符
因为Javascript的类型是松散的，所以需要一种手段来确定任意变量的数据类型。typeof就是为了确定他们用。以下是返回的一些字符串：
- undefined：表示值未定义
- boolean ：表示值为布尔值
- string ：表示值为字符串
- number：表示值为数值
- object：表示值为对象或null
- function ：表示值为函数
需要注意的是：
❗❗❗某些情况下typeof返回的结果可能会让人费解😓，但技术上讲还是正确的、比如。调用typeof（null）返回的是“Object”。这是因为特殊值被认为是一个对空对象的引用。
Undefined 类型
Undefined类型只有一个值😅，就是特殊值Undefined。当使用var和let声明了变量但没有初始化时，就相当于给变量赋予了undefined值；
let name;
console.log(name == undefined); // true
❗❗❗注意，undefined值的变量跟未定义变量是有区别的：
let name; // 这个变量被声明了，只是值为undefined;
// 确保没有声明过这个变量
// let age;
console.log(name); // "undefined";
console.log(age); // 报错
作者调查个一些资料。资料上说的是，对未声明的变量，只能执行一个有用的操作，就是对它调用typeof。
let name; // 这个变量被声明了，只是值为undefined;
// 确保没有声明过这个变量
// let age;
console.log(typeof name); // "undefined";
console.log(typeof age); // "undefined";
这就有点让人看不懂了😓，调用typeof时，都返回undefined。对此作者还没有明确的答案来解释。
Null 类型
Null 类型同样只有一个值😅，逻辑上讲，null表示一个空对象指针，这也是对typeof传一个null会返回Object的原因。
let person = null;
console.log(typeof person); // "Object"
在定义变量将来要保存对象值的变量时，建议使用null 来初始化。
Boolean 类型
Boolean类型时每一种编程语言中最频繁使用的类型之一，有两个字面值：true 和 false。
❗❗❗注意，布尔值字面量true 和 false是区分大小写的；True,False是一个有效的标识符，不是布尔值。
虽然布尔值只有两个，但所有其他JavaScript类型的值都有相应布尔值的等价形式。要将一个其他类型的值转换布尔值可以使用Boolean()转换函数。
| 数据类型 | 转换为true的值 | 转换为false的值 |
|---|---|---|
| Boolean | true | false |
| String | 非空字符串 | “” 空字符串 |
| Number | 非零数值 | 0,Nan |
| Object | 任意对象 | null |
| Undefined | N/A(不存在) | undefined |
理解转换非常重要的，因为if等流程控制语句会自动执行其他类型值到布尔值的转换；
let name = "Habibulla";
if(name) {
console.log("值为真");
}
这个案例会输出字符串"值为真"
Number 类型
JavaScript中最有意思的数据类型。它可以定义整数和浮点数（Java语言中的双精度值(float,double))
通过以下代码了解一下数值类型：
// 整数值
let intNum = 22; // 整数
let ocNum = 070; //八进制 55
let ocNum1 = 079; // 无效的八进制。当成 79 处理
let ocNum2 = 08; // 无效的八进制。当成 8处理
let hexNum = 0xA; // 十六进制10
let hexNum1 = 0x1f; // 十六进制31
// 浮点值
let floatNum = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效但是不推荐使用
let floatNum4 = 1.; // 小数点后面没有数字，当成整数 1 处理
let floatNum5 = 10.0 // 小数点后面是零，当成整数 10 处理
let floatNum6 = 3.1415e5; //等于 314150
有三个函数可以将非数值转换为数值：Number()，parseInt()，parseFloat()
Number() 是转换函数，可以用于任何数据类型。后面两个函数主要用于将字符串转换为数值（很像Java语言中两个方法🤔是不是偷来的！😂）。
Number（）类型转换规则如下：
- 布尔值，true 转换为 1，false 转换为 0.
- 数值，直接返回
- null，返回0
- undefined，返回NaN（Not a Number）
- 字符串
- Number（“1”）返回 1，Number（“123”）返回123，Number（“011”）返回 11（会忽略前面的0）
- 如果是空字符串（不包含字符），则返回0。
// Number()转换函数实例
let num = Number("Habibulla Mamitimin"); // NaN
let num1 = Number(""); // 0
let num2 = NUmber("0000101"); // 101
let num3 = Number(true); // 1
// parseInt()函数实例
let num4 = parseInt("124habi"); // 124
let num5 = parseInt(""); // NaN
let num6 = parseInt("0xB"); // 11，解释为十进制
let num7 = parseInt("99.5"); // 99
let num8 = parseInt("070"); // 70
let num9 = parseInt("070",8); // 56 第二个参数指定进制数
String 类型
String（字符串）数据类型表示零或多个16位Unicode字符序列。JavaScript 字符串类型可以使用双引号（""），单引号（''），反引号（``）
❗❗❗需要注意的是，以某种引号作为字符串开头，必须仍然以该种引号作为字符串结尾。
let firstName = "Habibulla";
let lastName = "Mamitimin";
let name = `${firstName}·${lastName}`; //模板字面量
字符串的长度可以通过length属性来获取：
let name = "Habibulla";
console.log(name.length); // 9
字符串的特点是不可变的，意思是一旦创建，它们的值就不能改变的，必须先销毁原始的字符串，然后将包含新值的另一个字符串保存到该变量。
let name = "Habibulla";
name = name + " Mamitimin";
有两种方式可以把一个值转换为字符串类型。
- toString() 方法
- String() 转换函数
toString()几乎所有的值都有该方法。这个方法唯一的用途是返回当前值得字符串值。
let age = 22;
let ageAsString = age.toString(); // 字符串 "22"
let isLikeAly = true;
let isLikeAlyAsString = isLikeAly.toString(); // 字符串 "true"
String() 转换函数 区别是String() 需要传入参数，如果参数值为null 会返回 "null" undefied 会返回 "undefined"
今天的内容到此结束，希望对你有帮助，喜欢的话支持一下😀
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
1432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
