第0章 课前说明
0.1 学习方法及态度
没有学不会的知识，只有不努力的傻子！！！
学习的过程很痛苦，不学习的日子是苦难！！！
0.2 学前准备
1：拒绝一阳指和二指禅； 2：打字练习，及格线： 100/分
3：windows中的常用快捷键
0.3 开发工具
0.3.1 浏览器
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
国内网民计算机上常见的网页浏览器有，QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。
常用的五大浏览器：chrome，firefox，Safari，ie，opera；
我们用的最多的则是 chrome(谷歌浏览器) 和 Firefox(火狐浏览器)
0.3.2 编辑器
Sublime Text、VSCode、Atom、Brackets、WebStorm、Notepad++、HBuilder、Vim、记事本......
0.4 JavaScript语言的强大
http://impress.github.io/impress.js/http://naotu.baidu.com/http://echarts.baidu.com/index.html
总结:
摆正学习心态；编程基本功要练好；编程使用的工具要熟悉且顺手；我们要学的 JavaScript 很强大；
第1章 JavaScript介绍及基础语法
1.1 JavaScript编程语言
JavaScript，简称JS，是一种客户端脚本语言，主要用来向HTML网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）
JS主要运行于客户端（浏览器），也可以运行在服务端（操作系统）
JavaScript 和 Java 是两种不同的编程语言：JavaScript主要用于客户端，Java用于服务端。
JavaScript现在的意义(应用场景)
JavaScript 发展到现在几乎无所不能。
- 网页特效 *
- 服务端开发(Node.js) *
- 命令行工具(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.2 发展及历史
1994年Netscape公司推出免费版本浏览器 Netscape Navigator(网景浏览器1.0)
1995年微软公司发布 Internet Explorer 1.0
1995年网景公司为适应市场变化，需要开发一门专门在浏览器运行的脚本语言，这个任务交给了布兰登，为了应付公司安排的任务， 他只用10天时间就提交了工作，并将这门语言命名为 LiveScript;
后来为了蹭sun公司java的热度,与sun公司合作，将其临时改名为“JavaScript”;
1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript，首先内置于IE 3.0;
1997年7月，ECMA组织发布ECMAScript 1.0版；
此后，明争暗斗不断，1998年6月，ECMAScript 2.0版发布，1999年12月，ECMAScript 3.0版发布；
2007年10月，ECMAScript 4.0版草案发布，2008年7月中止ECMAScript 4.0的开发，并发布3.1版本；
会后不久，ECMAScript 3.1就改名为ECMAScript 5
2011年6月，ECMAscript 5.1版发布，现在使用最为广泛的版本 版发布，现在使用最为广泛的版本；
2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”；
随后，ECMA组织决定，每年发布一个升级版本，以年号来代替版本号，如：ECMAScript 2016、ECMAScript 2017；
另外： 1996年，样式表标准CSS第一版发布；
1997年，DOM模式第一版正式应用，目前的通用版本是DOM3，下一代版本DOM 4正在拟定中
1999年，IE5部署了XMLHttpRequest接口，允许JavaScript发出HTTP请求；
2001年，提出了JSON格式，用于取代XML格式。
2002年，Mozilla项目发布第一版Firefox。
2003年，苹果公司发布了Safari浏览器的第一版。
2006年，jQuery函数库诞生
2007年，Webkit引擎在iPhone手机中得到部署；
2008年，为Chrome浏览器而开发的V8编译器(解析引擎)诞生；
2009年，基于V8解析引擎的Node.js项目诞生,迎来前后端JS的霸权时代；
2009年，Google发布Chrome OS
2009年，Google发布Angular框架；
2013年，Mozilla基金会发布手机操作系统Firefox OS，该操作系统的整个用户界面都使用JavaScript；
2013年5月，Facebook发布UI框架库React；
2014年，尤雨溪发布开源前端开发库Vue.js；
2015年3月，Facebook公司发布了 React Native项目；
1.3 JavaScript和HTML、CSS
-
HTML：提供网页的结构，提供网页中的内容
-
CSS: 用来样式排版、美化网页
-
JavaScript: 可以用来控制网页内容，给网页增加动态的效果
1.4 JavaScript的组成
ECMA 欧洲计算机制造联合会； ECMAScript 是一套标准，定义了一种语言的标准，规定了基本语法、数据类型、关键字、具体API的设计规范等，解析引擎设计的参考标准，但与具体实现无关；
1.4.1 ECMAScript - JavaScript的核心
ECMAScript是一套语法标准，描述了JavaScript语言的基本语法和数据类型，是JavaScript的核心。 ES5 ES6
1.4.2 BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
1.4.3 DOM - 文档对象模型
一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
1.5 JS学习概况
我们在学习JS时，需要学习的内容分为两部分，语言结构及宿主环境提供的API；
语言结构部分主要时语言规则及内置对象；
而宿主环境的API，根据宿主环境不同而不同，以浏览器为例(js还可以运行在服务器/操作系统)，最常见的三个类型： 浏览器控制类、DOM操作类、网络控制类；
总结：
JavaScript编程语言简称 JS，是一种嵌入式的脚本语言，应用范围及其广泛，由布兰登-艾奇开发，在20+年的发展中历经沧桑，学习 JS 分为语言规则及宿主环境两部分；
2.1 如何写一段JS代码并运行
- 写在行内
01.html:
<input type="button" value="按钮" onclick="alert('Hello World')" />
- 写在script标签中 *
02.html:
<head>
<script>
alert('Hello World!');
</script>
</head>
- 写在外部js文件中，在页面引入
03.html:
<script src="main.js"></script>
main.js:
alert('Hello World!');
注意点： 引用外部js文件的 script 标签中不可以再写JavaScript代码，即使写了也不会执行，没有作用
温馨提示：
下面开始进入 JS 基础语法的学习，可能非常枯燥，别睡着……
音乐很优美很动听，但学五线谱真的是乏味无聊痛苦不堪；
2.3 变量
2.3.1 什么是变量
-
什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
-
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据
总结：变量就是存储数据的容器
2.3.2 如何使用变量
- var声明变量
var age;
- 变量的赋值
var age;
age = 18;
- 同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
- 同时声明多个变量并赋值
var age = 10, name = 'zs';
2.3.3 变量的命名规则和规范
-
规则 - 必须遵守的，不遵守会报错
-
由字母、数字、下划线、$符号组成，且不能以数字开头
-
区分大小写
-
不能是关键字和保留字，例如：for、while。
-
-
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。(首字母小写，后面单词的首字母需要大写。例如：userName、userPassword)
-
下面哪些变量名不合法
a 1 age18 18age name $ $name _sex &sex theworld theWorld
name变量名，本身不是保留字/关键字， 建议少用。 name在有的浏览器中，是自动声明过的。
2.3.4 案例
- 交换两个变量的值
var a = '1';
var b = '2';
// 借助第三个变量
var c = a;
a=b;
b=c;
console.log(a,b);
- 不使用临时变量，交换两个数值变量的值
//第二种方式
var num1 = 10;
var num2 = 20;
//计算的方式:累加,然后相减
num1 = num1 + num2;//num1的结果是30
num2 = num1 - num2;//num2的结果是10
num1 = num1 - num2;//num1的结果是20
console.log(num1);
console.log(num2);
2.3.5 代码调试（输出变量）
- alert 弹框 :浏览器页面弹框
var num1 = 10;
alert(num1);
- console.log() 浏览器console控制台
var num1 = 10;
var num2 = 20;
console.log(num1);
console.log(num1, num2);
- document.write() 浏览器页面中
var num1 = 10;
document.write(num1);
2.4 数据类型
2.4.1 简单数据类型
Number、String、Boolean、Undefined、Null
获取变量的类型
typeof
var age = 18;
console.log(typeof age); // 'number'
Number类型
-
数值字面量：数值的固定值的表示法（数值直接量）
110 1024 60.5
-
浮点数（小数）
-
浮点数的精度问题
浮点数 var n = 5e-324; // 科学计数法 5乘以10的-324次方 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); 不要判断两个浮点数是否相等 -
数值范围
最小值：Number.MIN_VALUE，// 这个值为： 5e-324 5乘以10的-324次方 最大值：Number.MAX_VALUE，// 这个值为： 1.7976931348623157e+308 无穷大：Infinity 无穷小：-Infinity
String类型
'abc' "abc" 单双引号引起来的一连串字符
-
字符串字面量（直接量）
'程序猿'，'程序媛', "全栈程序猿"
思考：如何打印以下字符串
我是一个 "正直" 的人
我很喜欢 "全栈 '程序猿' "
注： 转义后单双引号 只能 就近和转义后的单双引号进行配对
- 转义符
注： \b 退格符 \f又叫走纸或进纸或 换页符
var s = '我很喜欢 \"全栈 \'程序猿\' \"';
console.log(s);
- 字符串长度
length属性用来获取字符串的长度
var str = '黑马程序猿 Hello World';
console.log(str.length);
- 字符串拼接
字符串拼接使用 + 连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
- 两边只要有一个是字符串，那么+就是字符串拼接功能
- 两边如果都是数字，那么就是算术功能。
Boolean类型
- Boolean字面量： true和false，区分大小写
- 计算机内部存储：true为1，false为0
Undefined和Null
- undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
- null表示一个空，变量的值如果想为null，必须手动设置
注: 关于undefined和null是一个面试中很容易被问到的问题
2.4.2 复杂数据类型
Object 对象：保存很多数据的一种数据类型
后面详解；
题外话
如何使用谷歌浏览器，快速的查看数据类型？
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
console.log('ss',2,null,undefined,true);
2.5 注释
被注释的内容是不执行的，不管什么内容都不会运行；
单行注释
用来描述下面一个或多行代码的作用
// 这是一个变量
var name = 'hm';
多行注释
用来注释多条代码
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
总结：
JS代码的书写，变量的声明方式，数据类型，注释；
3.1 转换成字符串类型
-
toString()
var num = 5; console.log(num.toString()); -
String()
var s = null; console.log(s.toString()); console.log(String(s)); // String()函数存在的意义：有些值没有toString()， // 这个时候可以使用String()。比如：undefined和null -
拼接字符串方式
num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串
3.2 转换成数值类型
-
Number()
var a = Number('1'); var b = Number(1); var c = Number('c'); var d = Number(null); var e = Number(undefined); console.log(a,b,c,d,e); // 1 1 NaN 0 NaN // Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN -
parseInt()
var a = parseInt('1.2df'); var b = parseInt(1); var c = parseInt('c12'); var d = parseInt(null); var e = parseInt(undefined); console.log(a,b,c,d,e); //1 1 NaN NaN NaN // 如果第一个字符是数字会解析,直到遇到非数字结束 // 如果第一个字符不是数字或者符号就返回NaN -
isNaN()
语法：isNaN(n) 功能：检测n是否是“非数值” 返回值：boolean 参数：参数n可以是任何类型 说明：isNaN()在接收到一个值之后，会尝试将这个值转换为数值。 某些不是数值的值会直接转换为数值。
-
parseFloat()
var a = parseFloat('1.2df'); var b = parseFloat('1.3.4'); var c = parseFloat('c12'); var d = parseFloat(null); var e = parseFloat(undefined); console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN // parseFloat() 把字符串转换成浮点数 // parseFloat()和parseInt非常相似， // 不同之处在与parseFloat会解析第一个 . 遇到第二个.或者非数字结束 // 如果解析的内容里只有整数，解析成整数 -
+，-，-0 等运算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取负 console.log(str - 0);
总结：有3个函数可以把非数值转换为数值：Number()、parseInt()和 parseFloat()。其中Number()可以用于任何数据类型，而parse Int()和parseFloat()则专门用于把字符串转换成数值。
3.3 转换成布尔类型
- Boolean()
var a = Boolean('0');
var b = Boolean(0);
var c = Boolean('1');
var d = Boolean(null);
var e = Boolean(undefined);
var f = Boolean(NaN);
console.log(a,b,c,d,e,f); //true false true false false false
// 0、''(空字符串) 、null、 undefined 、NaN 会转换成false 其它都会转换成true
总结：
1、除0之外的所有数字，转换为布尔型都为true
2、除””之外的所有字符，转换为布尔型都为true
3、null和undefined转换为布尔型为false
JS操作符
表达式：将同类型的数据（如常量、变量、函数等），用运算符号按一定的规则连接起来的、有意义的式子称为表达式
同时，表达式中的每个数值及部分表达式，又称为 子表达式
4.1 算术运算符
+ - * / % 取余（取模）
4.2 一元运算符 *
一元运算符：只有一个操作数的运算符，一元运算会直接修改原始变量的数据；
5 + 6 两个操作数的运算符 二元运算符
++ 自身加 (自增)
-- 自身减 (自减)
-
前置++
var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2); //13 -
后置++
var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++); //12 -
猜猜看
var a = 1; var b = ++a + ++a; console.log(b); //5 var a = 1; var b = a++ + ++a; console.log(b);//4 var a = 1; var b = a++ + a++; // console.log(b); // 3 var a = 1; var b = ++a + a++; console.log(b);//4
总结
前置++：先加1，后参与运算
后置++：先参与运算，后加1
后置++ 运算的两个条件，满其一就会执行
1：整个表达式结束；2：表达式没结束但是又被使用了；
上面两个理解后，下面两个自通
前置-- ：先减1，后参与运算 g 后置-- ：先参与运算，后减1
4.3 逻辑运算符(布尔运算符) *
&& 与 左边为真则取右边，左边为假则取左边
|| 或 左边为真则取左边，左边为假则边右边
! 非 取反
var a = 1;
var b = 2;
var c = 0;
console.log(a || b); //1
console.log(b || a); //2
console.log(c && a); //0
console.log(a || c && b); //1
// JS逻辑运算中的逻辑或和逻辑与的运算结果：
// 决定整个表达式的子表达式的值
4.4 关系运算符(比较运算符)
< > >= <= == != === !==
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等
var result = '55' == 55; // true
var result = '55' === 55; // false 值相等，类型不相等
var result = 55 === 55; // true
4.5 赋值运算符
注意与数学符号的差别；
= += -= *= /= %=
例如：
var num = 0;
num += 5; //相当于 num = num + 5;
4.6 三元运算符
语法：
条件 ? 执行代码1：执行代码2
说明：
可代替简单的if语句，
如果条件成立，执行代码1，否则执行代码2
4.7 运算符的优先级
优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
// 练习1：
var s = 4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
console.log(s); //true
// 练习2：
var num = 10;
var f = 5 == num / 2 && (2 + 2 * num)
console.log(f.toString() === 22) //false
总结：
操作符的使用，基本数学运算，一元运算符自增自减及前置后置的区别，逻辑运算符及取值，关系比较运算符，赋值运算符，运算符优先级；
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
