一名前端工程师的自学之路，Js篇（11-16更新）

css因为当时是看了各种书各种视频自己敲，没有做一些系统化的笔记。等这阵子公司项目忙完会抽出时间来整理一次的，毕竟css也是很深。我写这些东西也主要是分享一下自己当时的学习方法，现在还是菜鸟一个，希望能帮到有需要的人就够了，也希望有大牛多多指点。

看到标题能进来的小伙伴，我也就不废话，先推荐一本必买的书《JavaScript高级程序与设计》。今天这篇文章先分享最基础入门的一些Js的知识。

1、什么是JavaScript？

JavaScript是一门基于对象的客户端脚本语言，用来与web页面进行交互。

js的主要作用：轮播图，表单验证，选项卡。。。。。

web页面三层结构：

结构层 从语义角度来说，布置页面结构 html

表现层 从审美角度来说，用来美化页面 css

行为层 从交互角度来说，提升用户体验 js

---

2、JavaScript的组成？

ECMAScript（欧洲计算机制造商协会） 不是一门语言，而是一个组织， 用来规范JavaScript的语法标准。

BOM （浏览器对象模型）

DOM （文档对象模型） 核心部分

---

3、JavaScript 代码实现（初体验）

• js代码嵌入到网页中，通过script 标签对来实现

• js中的script标签可以写在页面的任意位置（除了title中）

• 通过<script src="xx.js"></script>

• js的代码按照从上到下的顺序执行

• 某个script 如果连接了外部文件，标签对中的代码不会被识别。

---

4、Javascript的几个输出语句

alert（） 通过弹出对话框的方式输出一段语句 ， 会阻塞浏览器的执行 使用 换行

console.log() 控制台输出 用于代码调试 使用 换行

document.write() 在浏览器中打印输出 使用<br>换行

---

5、Js中的字面量（常量）

数值 ：

整数

十进制整数 0-9组成的数值（常用） 89

二进制整数 0- 1 组成的数值 1001

八进制整数 0--7 组成的数值 一般八进制 以 0 开头 023

十六进制整数 0-9 a--f 组成 一般十六进制 以 0x/X 开头

小数

字符 ：

js中 字符可以用单引号 或 双引号 引起来

但是要注意 引号嵌套问题： " '' " 或 ' " " '

---

6、Js中标识符（变量）的命名规范

• 标识符由字母、数字、下划线、$组成（中文也可以但一般不用）

• 不能用数字开头

• 不能用系统指定的一些关键字命名

• 标识符具有一定的含义

命名法：

• 驼峰式命名法:

• 大驼峰：QianFengJiaoYu

• 小驼峰：qianFengJiaoYu

• 匈牙利命名法：

1. iNum 通常表示整数的变量 以i开头

2. fNum 通常表示小数的变量 以f开头

3. sStr 通常表示字符的变量 以s开头

4. oObj 通常表示对象的变量 以o开头

5. arr 通常表示数组类型的变量

6. reg 通常表示正则表达式的变量

---

7、变量的定义和赋值

显示定义

通过var定义的变量

var iNum = 10; 表示 变量在定义的时候 同时又为该变量赋值

var fNum;

fNum = 2.3; 先定义一个变量，然后在为该变量赋值

定义多个变量：

var name="程序员",age = 28;

var name,age;

name = "jack",age = 35;

隐式定义 : 变量定义的时候 var 可以省略的。

变量一定要先定义，后使用。

---

8、Js中输出结果时注意几个问题：

• 1、如果输出的是字符，该字符一定要用引号括起来 比如： alert(hello); 错误 alert("hello");

• 2、如果输出的是一个变量的值，该变量一定不能用引号括起来

• 3、如果既要输出字符又要输出变量， 字符和变量之间 用 + 表示连接

• 4、如果输出的是一个数值，该数值可以不用引号括起来

---

9、变量的数据类型

js中变量的数据类型又变量的初始值来决定

基本数据类型：

数值类型 number

整数、小数 ，值可以有多个

字符类型 string

由单引号或双引号括起来 ， 值可以有多个

布尔类型 boolean

值只有两个 true、false， 这两个关键字不能用引号括起来

复合数据类型（引用数据类型）：

对象 object

数组 Array(本身也是一个object)

特殊数据类型：

undefined 未定义的 （如果一个变量定义了，但没有给初始值，初始值就是undefined）

null 表示 空 （本身也是一个对象object）

测试变量的数据类型 typeof() 用法： typeof（变量名）

---

10、运算符和表达式

运算符： 运算符号

表达式： 一个式子 变量、常量、或一个通过运算符连接的式子 2+3

运算符有哪些

该运算符对应的表达式的值如何计算

---

11、算术运算符

+ - * / % (双目：运算符两侧都有操作数)

* :

表达式 ： 8*9

表达式的值：

1、如果运算符两侧都是数值，正常计算

2、如果运算符两侧中有一侧是纯数字字符串，则该字符串自动转成数值进行计算 7*"8"=56 ,

否则 结果为NaN（不能正常计算的结果都是NaN） NaN：not a number 不是一个数字

3、如果表达式中有一个布尔值，自动将true解析为1，false解析为0 7*true

- / % (运算结果同*)

% 模运算符（求余数）：

4%2 = 0

2%4 = 2

2%1 = 0

134%10 = 4

56%10 = 6

任何数 % 10 = 个位数

编程实现： 7893 计算这个数的各个位数和---（将这个数的个位 、十位、百位、千位取出就好）。

个位 ： 7893 % 10

十位 ： 取整(7893 / 10 ) % 10

百位 ： 取整(7893 / 100) % 10

千位 ： 取整(7893 / 1000)

+ ：

算术运算

表示连接符

数值和字符串相加表示连接,.. 100+“90” = 10090

练习：计算这个表达式的值 ： 10 + "2" - "1" = 101 结果的类型是：number

10 + "2" - "1r" = NaN

++ -- (单目：运算符只有一侧有操作数)

++:自增 : ++ 或 -- 两侧的操作数必须是变量

var i = 2;

表达式 ： i++ （后置++） 或 ++i（前置++）

后置++和前置++的异同：

相同点：

自增变量都会加一

不同点：

表达式的值不同

如果++在后 -> j = i++; ,表达式的值是原i的值 （先赋值、再自增 ---> 先将i的值赋值给整个表达式，然后i在自增）

如果++在前 -> j = ++i; ,表达式的值是自增后i的值（先自增，再赋值 ---> 先将i的值自增1 ，再将i的值赋值给整个表达式）

--：自减

var i = 2;

j = i--; // i = 1 j = 2

var k = 9;

j = --k;

j = 8 k = 8;

k++ + ++k + k++ + k

---

12、关系运算符

运算符 ：　＞　　　＞＝　　　＜　　　＜＝　　　　==(等于)　　　!= (不等于)　　　　＝＝＝(全等)　　 !==(全不等)

关系表达式 ：　2>3 6<7 7>=7 7==9 7>"8" "bds" < "bnd"

关系表达式的值： true 或 false

1、如果表达式的两侧都是数值型，正常比较 8 > 9 false

2、如果表达式的两侧都是字符型，正常比较 (按照字符的编码值进行比较 a:97 A:65 0: 48) "b1">"a" true

3、如果表达式的两侧有一侧是纯数字字符串，字符串自动转成数值型，再正常比较

4、如果表达式的两侧有一侧是非数字字符串，不能自动转换，表示不能正常比较，结果为false

5、所有不能正常比较的结果都是false

==: 只比较值，不比较类型 ，值相等就为true ( 100 == "100" true 100!="100" false )

===: 先比较类型， 再比较值 ，都满足条件结果为true，否则就是false (100 === "100" false , 100!=="100" true )

---

13、逻辑运算符

运算符： &&与(并且) ||或 ! 非(单目)

逻辑表达式： 3 && 5 3 || 7 !9

逻辑表达式的值：true 或 false

js中 非0 表示真，0 表示假

&& 对应的表达式的值：

&& 符号两侧只要有一侧为假false， 表达式的值就是false 地球是方的 && 王哲是男生--- > false

|| 对应的表达式的值：

|| 符号两侧只要有一侧为真true，表达式的值就是true 地球是方的 || 王哲是男生 ---> true

! 对应的表达式的值：

非真即假，非假即真

---

14、 条件运算符 ? : (三目)

条件表达式 ： 表达式1 ? 表达式2 : 表达式3

条件表达式的值：

如果表达式1的结果为真，整个条件表达式的值取表达式2的值，否则整个条件表达式的值取表达式3的值

例如我写小程序里面的一个三目运算：

这个就是一个判断下标然后执行加类名的一个三目运算

最后推广一下自己的小程序，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

自律更自由，一只喜欢锻炼的程序猿，嘿嘿。

你都看到这里了，不点个关注嘛～