JavaScript之入门学习风云（1）

黄大帅@lz

已于 2023-01-08 10:36:54 修改

阅读量530

点赞数

分类专栏：前端（html+css+js）文章标签： javascript 前端开发语言

于 2022-12-01 23:15:05 首次发布

本文链接：https://blog.csdn.net/gua_Piter/article/details/128051990

版权

前端（html+css+js）专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、js介绍

1.1、js起源与发展

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。

为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。但是你要清楚，Java和JavaScript是没有什么关系的，只不过当时Java非常流行，为了蹭热度，才将LiveScript更名为JavaScript，它们的关系就像雷锋和雷峰塔的关系一样，没啥关系。

但是，浏览器开发商不止网景一家，还有一个大家都知道的公司，微软公司，它们的主打产品是IE（Internet Explorer）浏览器，当网景公司的Netscape Navigator浏览器推出JavaScript语言时，微软就急了啊，好家伙，人网景都推出了专门用于前端验证的语言，不仅大大减少了后端程序的压力，还提高了用户的体验。我微软这么大的公司不也得整一个，在1996年，微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的JScript，虽然当时浏览器的巨头是网景，但是网景的浏览器是收费的，虽然微软的IE浏览器在全球的市场份额远远不及网景，但是微软的拳头产品是Windows操作系统，每一个操作系统都自带一个IE浏览器并且免费，那么，未来的发展大家可能也想到了，网景让微软给干倒闭了，1998年11月，网景被美国在线（AOL）收购。

老大哥就是老大哥，为了抢先获得规则制定权，网景最先将JavaScript作为草案提交给欧洲计算机制造商协会，也就是ECMA组织，希望能将JavaScript做成行业标准，最终在网景、SUN以及微软等公司的参与下，由一众程序员和相关组织人员组成的第39技术委员会也就是TC39发布了ECMA-262标准，这个标准定义了名为ECMAScript的全新脚本语言，为啥又来了个ECMAScript？

因为Java是SUN的商标，SUN授权了NetScape可以叫JavaScript，但是ECMA没有SUN的授权就不能叫JavaScript，哪怕NetScape成员特别希望ECMA把它叫做JavaScript，但是ECMA也有成员并不希望这个标准就叫JavaScript，总之经过几轮磋商和博弈，ECMAScript这个名字就定下来。

1.2、js组成

JavaScript 包括：

1. ECMAScript、2. DOM、3. BOM

二、JavaScript的使用

2.1、标签的使用

2.1.1行嵌入式

例如：

<input type="button" value="点我试试" onclink="javascript:alert('Hello World')" />

但是在我们编写的时候，一般不会采取这个方法，因为这个方法不方便，如果几个人一起完成同一个网页代码的时候就会出现代码复杂混乱的状况。

2.1.2内嵌入式

例如：

<script>
     alert('Hello World!');
</script>

注意：

可以将多行JS代码写到script标签中
内嵌 JS 是学习时常用的方式

2.1.3外部插入式

例如：

<script src="my.js"></script>/*自己还需要在外部创造一个.js文件用于引用*/

注：

利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况
此方法与css外部引用方法相似

三、JavaScript基本语法

3.1注释

3.1.1多行注释

<!-- 
    js多行注释
    注释中的内容不会被执行，但是可以在源代码中查看，便于提醒自己所写内容
 -->

3.1.2单行注释

// 单行注释

3.1.3注意事项

JS中严格区分大小写
JS中每一条语句以分号(;)结尾如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写
JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

3.2字面量和变量

3.2.1字面量

都是一些不可改变的值比如:1 2 3 45 字面量都是可以直接使用，但是我们一般都不会直接使用字面量

3.2.2变量

变量变量可以用来保存字面量，而且变量的值是可以任意改变的
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量

变量的声明：使用var关键字声明一个变量。

var a;

变量的赋值：使用=为变量赋值。

a = 123;

声明和赋值同时进行：

var a = 123;

3.3 标识符

在JS中所有的可以由我们自主命名的都可以称为是标识符例如:变量名、函数名、属性名都属于标识符
命名一个标识符时需要遵守如下的规则:

1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是关键字或保留字
4.标识符一般都采用驼峰命名法：-首字母小写，每个单词的开头字母大写，其余字母小写helloworld xxxYvvZzz

关键字：
在这里插入图片描述
保留字符：

其他不建议使用的字符：

4、数据类型

一般分为以下五种：

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）

4.1 string

String用于表示一个字符序列，即字符串。字符串需要使用单引号或双引号括起来。
使用双引号或单引号都可以，但是不要混着用

转义字符:
在这里插入图片描述
**注意：**使用typeof运算符检查字符串时，会返回"string"

4.2 number

注意：

1. 在JS中所有的数值都是Number类型,包括整数和浮点数（小数)
2. JS中可以表示的数字的最大值 Number.MAX_VALUE: 1.7976931348623157e+308
3. Number.MIN_VALUE 大于0的最小值:5e-324
4. 如果使用Number表示的数字超过了最大值，则会返回一个
5. Infinity表示正无穷 -Infinity表示负无穷
6. 使用typeof检查Infinily也会返回numberNaN是一个特殊的数字，表示Not A Number
7. 使用typeof检查一个NaN也会返回number

如果使用JS进行浮点运算，可能得到一个不精确的结果所以千万不要使用JS进行对精确度要求比较高的运算

4.3 Boolean布尔值

布尔值只有两个，主要用来做逻辑判断 true- 表示真 ,false表示假
使用typeof检查一个布尔值时，会返回boolean

4.4 Boolean布尔值

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

注意：

使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

3.4.3 Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

5. 强制转换

1）指的是将一个数据类型强制转换为其他的数据类型

2）类型主要转换为 String Number Boolean这三种类型

5.1将其他的数据类型转换为String

方式一:

调用被转换数据类型的toString()方法
该方法不会影响到原变量,它会将转换的结果返回
但是注意:null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错

var a = 111;
 
b = a.toString();   //调用xxx的yyy()方法，就是xxx.yyy()
 
console.log(typeof a);
判断出 b 是由数值强制转换字符串类型

方式二:

调用String()函数，并将被转换的数据作为参数传递给函数-使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法但是对于null和undefined，就不会调用toString()方法
它会将null直接转换为"null" 将undefined直接转换为"undefined"

a = 111;
 
b = String(a);  //将参数a赋给String()函数

5.2 转换为Number类型

有三个函数可以把非数值转换为数值：Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而parseFloat()可以将字符串转换为浮点数。

方式一：使用Number()函数

字符串 --> 数字如果是纯数字的字符串，则直接将其转换为数字如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0 布尔 --> 数字 true 转成 1 false 转成 0 null -->
数字 null 转成 0
undefined --> 数字 undefined 转成 NaN

方式二：这种方式专门用来对付字符串，parseInt() 把一个字符串转换为一个整数

var a = "123";
a = parseInt(a);
console.log(a);
console.log(typeof a);

方式三：这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);

注意：

如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作

5.3转化为Boolean

将其它的数据类型转换为Boolean，只能使用Boolean()函数。

使用Boolean()函数数字 —> 布尔除了0和NaN，其余的都是true
字符串 —> 布尔除了空串，其余的都是true
null和undefined都会转换为false 对象也会转换为true

6.运算符

解释：

1.运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。
2. 比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回

6.1 算术运算符

在这里插入图片描述
+

可以对两个值进行加法运算，并将结果返回如果对两个字符串进行加法运算，则会做拼串会将两个字符串拼接为一个字符串，并返回
任何的值和字符串做加法运算,都会先转换为字符串，然后把他们合在一起

注意：

任何值做-*/运算时都会自动转换为Number我们可以利用这一特点做隐式的类型转换
可以通过为一个值-*1 /1来将其转换为Number

6.2 自加和自减

自增++

通过自增可以使变量在自身的基础上增加1
对于一个变量自增以后，原变量的值会立即自增1-自增分成两种:后++(a++)和前++(++a) 无论是a++还是++a，都会立即使原变量的值自增1 不同的是a++和++a的值不同
++的值等于原变量的值（自增前的值)++a的值等于新值(自增后的值)

自减– –

通过自减可以使变量在自身的基础上减1
自减分成两种:后–(a–)和前–(–a) 无论是a–还是–a都会立即使原变量的值自减1 不同的是a–和–a的值不同 a–是变量的原值（自减前的值)–a是变量的新值（自减以后的值)

6.3 逻辑运算

在这里插入图片描述

! 可以用来对一个值进行非运算

所谓非运算就是值对一个布尔值进行取反操作， true变false, false变true
如果对一个值进行两次取反，它不会变化
如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值可以为一个任意数据类型取两次反，来将其转换为布尔值，
原理和Boolean()函数一样

&&与