一名前端工程师的自学之路，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中）
-
通过
-
js的代码按照从上到下的顺序执行
-
某个script 如果连接了外部文件，标签对中的代码不会被识别。
4、Javascript的几个输出语句
alert（） 通过弹出对话框的方式输出一段语句 ， 会阻塞浏览器的执行 使用 换行
console.log() 控制台输出 用于代码调试 使用 换行
document.write() 在浏览器中打印输出 使用
换行
5、Js中的字面量（常量）
数值 ：
整数
十进制整数 0-9组成的数值（常用） 89
二进制整数 0- 1 组成的数值 1001
八进制整数 0--7 组成的数值 一般八进制 以 0 开头 023
十六进制整数 0-9 a--f 组成 一般十六进制 以 0x/X 开头
小数
字符 ：
js中 字符可以用单引号 或 双引号 引起来
但是要注意 引号嵌套问题： " '' " 或 ' " " '
6、Js中标识符（变量）的命名规范
-
标识符由字母、数字、下划线、$组成（中文也可以但一般不用）
-
不能用数字开头
-
不能用系统指定的一些关键字命名
-
标识符具有一定的含义
命名法：
-
驼峰式命名法:
-
大驼峰：QianFengJiaoYu
-
小驼峰：qianFengJiaoYu
-
匈牙利命名法：
-
iNum 通常表示整数的变量 以i开头
-
fNum 通常表示小数的变量 以f开头
-
sStr 通常表示字符的变量 以s开头
-
oObj 通常表示对象的变量 以o开头
-
arr 通常表示数组类型的变量
-
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的值
例如我写小程序里面的一个三目运算：
这个就是一个判断下标然后执行加类名的一个三目运算