个人自学前端9-JS2-JS概述，变量，常量和数据类型，程序运行过程

目录

JavaScript概述

JavaScript是一门弱类型的编程语言。简称js。由美国网景公司发布。微软发布的类似JavaScript的语言叫JScript。

前端的编程语言只有JavaScript，后端的编程语言有java，php等。

编程语言是什么？

html+css如果是填空题，JavaScript就是作文题。

编程需要比较严谨的逻辑思维，实现高级功能需要比较高深的数学知识。

前端编程只用到加减乘除。

JavaScript运行环境

JavaScript的运行环境有两种：

1：浏览器。

2：服务器。（node.js）（全栈方向）

JavaScript构成

我们之学浏览器环境下运行的JavaScript。前端主要就是书写浏览器环境下的JavaScript。

浏览器环境下的JavaScript分为3大部分.

1：ECMAScript.简称ES。它是js的语法规范。实际上这部分和浏览器没关系。

ES的最新版本是ES6。我们主学ES5.1，穿插学习ES6。

2：DOM（Document Object Model）文档对象模型，提供了操作网页元素的API。

3：BOM（Broswer Object Model）浏览器对象模型，提供了操作浏览器的API。

我们主学ES。ES是Javascript的基础和核心。其次是DOM，BOM最不重要。

ES主要知识点大纲（编程基本知识大纲）

1：变量，常量和数据类型

2：运算符，表达式

3：控制结构，循环和判断

4：函数

5：对象，面向对象

其中1-3是编程基础。4-5是编程进阶，是难点，也是重点。

DOM主要知识大纲

1：节点获取和操作

2：事件对象，事件流

3：html文档操作。

BOM主要知识

1：location对象

2：navigator对象

3：history对象

JavaScript的引入

1：script标签内书写JavaScript。

2：通过script的src引入外部的js文件。

注意，书写了src的script标签内部就不能再写JavaScript代码。

程序运行过程

一：浏览器运行JavaScript的过程

开发人员书写JavaScript代码，是谁执行（运行）的，何时执行的？

是谁运行？

JavaScript代码（也叫 JavaScript脚本）是由浏览器运行的。

我们书写的JavaScript代码，实际是一个任务清单。

浏览器运行JavaScript代码，实际相当于按照任务清单执行任务。

浏览器运行JavaScript代码，大概分为两个阶段：

1：解析阶段。此阶段分析代码是否有语法错误。

2：运行阶段。解析成功后，开始逐行运行代码。（按清单执行任务）

何时运行的？

这里需要先说明下浏览器显示网页的大概过程，分为两个部分：

1：解析阶段。此阶段解析html内的所有标签内容。包括style和script

2：渲染阶段。解析成功后按照解析结果渲染内容到浏览器视口内。

JavaScript的代码在何时运行的？

JavaScript代码在浏览器解析html文档时运行。

当浏览器解析到script标签时，即开始JavaScript代码的解析和执行过程。

以下是浏览器显示网页的大致过程：

1：从服务器下载html文档，逐行解析

​ 如果遇到style的css样式，解析css

​ 如果遇到script标签，开始解析JavaScript代码，解析完成后运行JavaScript代码

2：解析所有标签成功后，开始渲染网页内容到视口内，此过程结束后，用户将看到网页内容。

二：报错

如果因为某些原因，JavaScript会报出错误提示。

1：语法错误。SyntaxError

如果在解析JavaScript代码的过程中，发现有语法错误，则解析失败，JavaScript不会进入运行阶段

2：引用错误（ReferenceError）和类型错误（TypeError）。

如果没有语法错误，解析成功，在执行的过程中如果发生了错误，则发生错误处后面的代码无法得到执行。

常见错误：

xxx is not defined 意思是xxx变量没声明就使用了。这是引用错误。

Cannot read property xxx of undefined 不能读取undefined的xxx属性。因为undefined没有属性。

Cannot read property xxx of null 不能读取null的xxx属性。因为null没有属性。

Cannot set property xxx of undefined 不能设置undefined的xxx属性，因为undefined不能设置属性

Cannot set property xxx of null 不能设置null的xxx属性，因为null不能设置属性

xxx is not a function 意思是xxx不是函数，你把它当成了函数使用，这是类型错误。

三：调试

有时候程序报错，我们需要知道报错原因，报错信息不一定能知道错误在哪里。

这里需要了解程序运行过程中的每一步细节和状态。这是入门程序的必备技能。

浏览器按照Javascript代码逐行依次执行，因此我们可以以代码行为单位逐行逐步骤分析代码的运行和跳转过程。

调试方法：

1：debugger调试。

2：利用浏览器的断点功能进行逐行断点调试。

变量，常量和数据类型

一：变量

变量用于存储编程所使用的数据和方法。

变量必须先声明才可以使用。

声明一般变量关键字：var， let， const。其中let和const是es6的语法。

声明其他特殊变量关键字：function，class，import等

声明变量：

//声明一个变量
let x;
//声明多个变量
let x,y;

变量用于存储数据，因此可以把变量当成是一个'容器'

存储在变量中的数据，叫做变量的值

如何给变量存储数据？

给变量存储数据的过程，叫赋值，符号是 =

//声明一个变量并赋值
let x = 10;
//声明多个变量并赋值
let x = 10,
	y = 20;

注意：这里的 = 不是数学上的 = 。

// 意思是把10装进x里。或者理解为把x变成10;
// 不是x等于10的意思
x = 10;

// 数学上 a = b 和 b=a 是一个意思，但是在编程世界中不是这样。
// 把b装进a中（把a变成b）
a = b

// 把a装进b中（把b变成a）
b = a

变量必须声明后才可以使用，否则报错。

例如企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误。

let,const 和 var的区别
1：var可以重复声明,let和const不能

2：const声明常量,值不能再修改

标识符命名规则

标识符：编程中的各种名字，例如变量名，属性名，函数名，数组名，对象名等等。

编程中起名字（标识符命名）的规则：

1：由数字和英文组成，但是不能以数字开头

2：特殊字符只能包含_和$

3：不能和关键字保留字冲突

4：区分大小写。

标识符命名习惯：

1：数据类型+单词。例如：oDiv。表示oDiv的数据类型是对象，它的值是一个div标签。

2：驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写，后续单词首字母大写。

例如：getElementsByTagName

二：常量

常量，意即值不能修改的数据。

常量的值就是常量本身。

例如10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成11.

ES6使用const声明一个常量。

const声明常量时必须同时赋值，并且后续不可再修改。

三：数据类型

顾名思义，数据类型就是数据的种类。不同数据拥有不同的作用。

JavaScript常见数据类型：

1：number（数字）

2：string（字符串）

3：boolean（布尔值）（用于表示对错）

4：undefined （空的值）（用于表示空的值）

5：null（不存在的对象）（用于描述一个不存在的对象）

6：object（对象）（描述一组数据）（难）

其中object细分，又分为数组（array），函数（function）和纯对象（plain object）3种。

其中：

number，string，boolean，undefined，null为基本类型（简单类型）。（不是对象，理论不能添加属性）

object（包括array，function，plain object以及其他对象）为引用类型（复杂类型）。（是对象，可添加属性）

3.1：字符串

字符串用于在编程中描述文字。

字符串需要使用引号括起。单引号双引号都可以，但是不能混用。

ES6中也可以使用字符串模板来表示字符串。符号是反引号 ``.

字符串拼接：

两个字符串可以通过 + 拼接连成一个新的字符串。

// 拼接两个字符串常量
let x = '你' + '好';

// 拼接两个字符串变量
let str1 = '你';
let str2 = '好';
let word = str1 + str2;

// 在字符串常量中拼接变量
let word = str1 + str2 + '吗？';
let word = '现在' + str1 + str2 + '吗？';

// 使用ES6的字符串模板拼接字符串常量和变量
let word = `现在${str1}${str2}吗？`;

难点：

1：要不要写引号.

2：字符串拼接如果使用es5的 + 进行拼接，如何写 + 和 ''.

3.2：undefined

表示没有值的默认值。

一个变量声明后没有赋值，这时候这个变量中的值是什么呢？

这时候这个变量没有值，那如何表示这个没有值的状态呢？使用undefined表示

let x;
// undefined
consosle.log(x);

很多时候，本该有值的地方没有值，都显示undefined。

3.3：null

null和undefined很像。一般我们都只用null来表示一个暂时还不存在的对象。

例如获取一个标签，这个标签在页面上不存在，如何描述这个不存在的标签呢？用null表示。

3.4：object

这是一个很复杂的数据类型。意即：对象。

什么是对象？

简单理解就是看得见摸得着的东西。

既然看得见摸得着，就一定会有对该对象的各种 ‘感知’，这些 ‘感知’ 用数据描述下来，就变成对象的属性。

一个对象的所有属性用一个 {} 括起。

属性由属性名和属性值组成。属性值和属性名之间用 ：（冒号）连接。

属性都是键值对(key-value)。
age: 35 => age是key(键), 35就是value(值)

多个属性之间用 ，（逗号）隔开。

// 创建一个拥有两个属性的对象 oYm
let oYm = {
	name:'杨幂'，
	age：33
}
// name是属性，值是'杨幂'
// age是属性，值是33
// oYm.name就是存储 '杨幂' 的变量
// oYm.age就是存储 33 的变量

// 访问对象的属性值。
console.log(oYm.name);

// 修改属性.把属性age变成了100.
oYm.age = 100;
// oYm没有height属性，一下操作会给oYm添加一个新属性height，并且属性值是 '168cm'
oYm.height = '168cm';
// 删除oYm的name属性。
delete oYm.name;
// 访问一个不存在的属性，得到undefined
console.log(oYm.sex);// undefined

注意：

万物皆对象。

js的6种数据类型中，只有object类型才是对象，理论只有object类型才可以添加和访问属性。

但是js中，number,string以及boolean虽然不是object类型，但是他们可以访问属性，但是添加属性会失败。

js中，唯一不能访问属性和添加属性的是undefined和null。

let x = 10;
console.log(x.name);// undefined
x.name = '数字10';
console.log(x.name);// undefined

console.log(undefined.name); //报错,不能获取
undefined.name = '空'; // 报错,不能设置

let y;
console.log(y.name);//报错,不能获取
y.name = '空'; // 报错,不能设置

let oYm = null;
oYm.name = '杨幂';// 报错,不能设置
console.log(oYm.name);//报错,不能获取

四：检测数据类型

变量的数据类型，意即变量的值的类型。

如何检测变量的数据类型？使用typeof操作符。

注意，typeof检测数组，null和object对象时不准确。

typeof检测一个函数，得到的结果是 function。

typeof检测一个数组，得到结果是 object。

typeof检测一个null，得到结果是 object。

typeof检测一个对象，得到结果是object。

杂七杂八

一：let,const,var

let 不能重复声明
var 可以重复声明
const声明=> 声明常量，值永远不变

二：number

NaN => not a number => 不是一个数字
Infinity => 无穷大

三：数据类型

ES5:number,string,boolean,undefined,null,object(Array,function,plain object)
ES6:symbol => 表示独一无二的值，最大的用法是用来定义对象的唯一属性名
posted @ 2021-07-08 15:19  暗鸦08  阅读(149)  评论(0)    收藏  举报