Java零基础教学文档第四篇：HTML_CSS_JavaScript（3）
**【JavaScript】
1.JavaScript的简介
1.1 JavaScript的诞生**
在1995年前后，当时世界上的主流带宽为28.8Kbps，现在世界平均下载带宽为21.9Mbps。当时的网民，每提交一次表单，都需要等待很久才能收到服务器的回应，甚至很可能等了几分钟收到的却是说缺少了某一项。为了改善用户体验，嵌入浏览器客户端的能实现简单表单判断的脚本诞生了，这就是JavaScript。
JavaScript最早是工作于Netscape （网景公司）的 Brendan Eich为即将在1995年发行的NetscapeNavigator 2.0（NN2.0）开发的，当时叫做LiveScript。由于当时是和非常热门的Sun公司合作的，为了赶上当时的潮流——Java语言，这门语言被命名为JavaScript。
1.2 JavaScript跟Java有什么关系？
这也是外行人听到JavaScript的第一反应，也是这门语言被诟病最多的问题之一。
一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“xxxx鸟”的关系。“北大青鸟”就是傍“北大”大牌。
严格的说，没有半毛钱关系。如果非要扯上关系，也许就是两者的部分函数相同、面向对象思想、判断结构、循环语句相同等等等等，但这些显然不是Java的专利，而是编程语言的共识。
1.3 JavaScript的标准化及发展历史
JavaScript推出时，用户体验更好的NN 浏览器主宰了浏览器市场，而微软一直在追赶。在推出IE3的时候，微软发布了VBScript并以JScript为名，实际上和Netscape的JavaScript没有多大区别（用今天的话来讲就是山寨）。面对微软的竞争，Netscape和Sun公司将自己的JavaScript草案提交给ECMA（欧洲计算机制造商协会）对JavaScript进行了标准化，最后形成了ECMAScript 的第一个版本（ECMA-262）。
有意思的是，网景公司在标准化JavaScript之后，内部却出现了问题，JavaScript的研究停滞，而微软则趁机赶超，推出了IE4，内置了第一个遵循ECMA规范的JavaScript引擎，比NN提前了一年。再加上微软系统逐步占领计算机操作系统市场，其预装的IE浏览器市场份额逐渐加大，NN不断被挤占市场。然而，当微软失去了最大的对手后，它就没有了发展的动力，IE6~IE8，无论是界面渲染还是脚本执行，都互不兼容，成为浏览器史上的一朵奇葩，也是前端开发者的噩梦。
1.4 今天的JavaScript
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。
2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。
2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。
2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
2011年，Node.js诞生，使JavaScript能够开发服务器程序了。
1.5 JavaScript的概述
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言，也是世界上最流行的编程语言。javascript的出现使得网页和用户之间实现了一种实时性的，动态性的，交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。同时javascript短小精悍，在客户机上执行，大大提高了网页的浏览速度和交互能力。
JavaScript ，它包含了三大部分：ECMAScript、DOM、BOM
l ECMAScript：ECMAScript是JavaScript这门语言的核心组成，是这门语言的精髓所在。包括变量定义，垃圾回收，语法，作用域等等，需要我们去不断钻研。
l DOM：文档对象模型(document object model)。我们知道标签的嵌套，就产生了父子关系，而DOM，提供了大量的API，让我们可以轻松操作DOM树。使用DOM，我们能动态修改页面内容，调整样式等等，这也是JS多样化的一个体现。
l BOM：浏览器对象模型(brower object model)。和DOM类似，只不过主体变成了浏览器。浏览器同样提供了大量的API，其中部分对JS开放，为我们提供了操作浏览器窗口的方法。
1.6 JavaScript的特点
-
JavaScript是一种脚本语言（脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。），它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
-
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。这是我们在面向对象编程中非常喜欢看见的！
-
简单性：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型(代码结束后可以不用写分号,区分大小写，只有var一种数据类型)，并未使用严格的数据类型。 int i = 10; var i = 10; boolean flag = true; var flag = true
-
安全性：它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。（这点体会还不深）
-
动态性：javascript可以直接对用户或者客户输入做出响应，无须经过Web服务程序。他对用户的反映响应，是采用以事件驱动的方式进行的。也就是当我们按下鼠标，移动窗口，采择菜单等事件发生时响应的。
-
跨平台性：Javascript是依赖浏览器本身，与操作环境无关，只要能运行浏览的计算机，并支持javascript的浏览器就可以正确执行。
2.第一个程序
2.1 程序的书写位置
HTML 中的脚本必须位于script>与/script 标签之间。
脚本可被放置在 HTML 页面的 body 或 head 中。
【示例】：把script标签放在head中
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// ...
</script>
</head>
【示例】把script标签放在body最后面
<body>
<h1>我是一个标题标签</h1>
<script>
// ...
</script>
</body>
那些老旧的实例可能会在
注意：一个文档中可以书写多组script标签。
2.2 javaScript注释
程序中，为了便于理解、教学，我们可以写一些给人看的东西，这些内容就是注释，程序不会运行。
Ø 单行注释
<script>
// 单行注释
// 我也是一个单行注释
</script>
Ø 多行注释
<script>
/*
多行注释
多行注释
多行注释
*/
</script>
注意：使用多行注释的时候，切记不要相互嵌套。
在WebStorm中，单行注释的快捷键为：Ctrl+/，多行注释的快捷键为：Ctrl+shift+/
2.3 JavaScript输出
2.3.1 控制台输出
console.log控制台输出
<script>
console.log("Hello World!");
</script>
2.3.2 写入文档
通过JS动态的的写入文档
<script>
document.write("Hello World!
");
document.write("好开心啊");
</script>
2.4 引用外部JavaScript
外部引用就是引用HTML文件外部的JavaScript文件，这种方式可以使代码更清晰，更容易扩展。
我们可以通过HTML的script标签中的src属性来加载外部的JavaScript文件。
<head>
<meta charset="UTF-8">
<title>外部引用JavaScript</title>
<style>...</style>
<script src="js/index.js"></script>
</head>
src：指向的是外部JavaScript文件，注意JavaScript文件必须使用js为文件后缀。
如果通过script标签中的src属性来引入外部的JavaScript文件，那么标签 cript/script之间不能添加代码块。
<head>
<meta charset="UTF-8">
<title>外部引用JavaScript</title>
<style>...</style>
<!--注意：引入外部js文件的script标签中不能写代码块，因为写的代码块不会执行-->
<script src="js/index.js">
window.alert("我能弹出来吗？？？");
</script>
</head>
注意：一个文档中可以包含多组script标签，代码的执行是由上到下顺序执行的。
3.variable变量
3.1 声明变量
l 变量名必须以字母(包含大小写字母)、下划线(_)、$和数字组成，变量不能以数字开头；
l 不能使用JavaScript中的关键字作为变量名(var、true等)；
l JavaScript变量名是严格区分大小写的； wangErMaZi
l 变量命名使用“小驼峰”命名法则，第一个单词首字母小写，第二个单词起首字母大写，例如userName。
<script>
// 声明一个变量
var $num; // 正确
var 12num; // 错误
var true; // 错误
var age; // 变量名尽量取的有意义一些,一看变量的名字就知道是什么意思
var Name; // 建议小写字母开头
var userName; // 建议驼峰式命名
</script>
我们可以在一条语句中声明很多变量。该语句以var开头，并使用逗号分隔变量即可：
<script>
var age, name;
var age =20,name=”李四”;
</script>
3.2 变量赋值
我们可以先声明一个变量，然后再对这个变量赋值。
<script>
// 声明变量
var age;
var name;
// 变量赋值
age = 18; // 赋值为一个整数, 可理解为: 年龄是18岁
name = "ande"; // 赋值一个字符串, 可理解为: 名字是ande
// 注意: 单引号或双引号中的内容代表为字符串
</script>
也可以声明和赋值合在一起写, 建议写法
<script>
var age = 18;
var name = 'ande';
</script>
我们还可以在一条语句中声明和赋值多个变量。该语句以var开头，并使用逗号分隔变量即可：
<script>
var age = 18, name = 'ande';
</script>
3.3 变量类型
Java语言属于强类型语言，在强类型语言中，定义变量必须明确变量的数据类型，变量创建成功之后类型就不能改变啦，例如：
public static void main(String[] args) {
// 定义一个int类型变量
int num1 = 10;
// 定义一个double类型变量
double num2 = 1.23;
// 定义一个String类型变量
String name = "ande";
}
JavaScript属于弱类型语言，定义变量的时候，我们只需要使用var关键字修饰即可。变量的类型由赋值的数据决定，我们可以通过 “typeof 变量名”或“typeof(变量名)”来查看变量的类型。
<script>
// 此时num为数值型（number）
var num = 18;
console.log(typeof num); // 输出：number
// 对num再次赋值，此时num为字符串型（string）
num = "ande";
console.log(typeof(num)); // 输出：string
</script>
4.数据类型
JavaScript中的数据类型分为基本数据类型和引用数据类型。
基本数据类型: number、boolean、undefined、null、string
引用数据类型: Object(Array, Function, Object, Date等)，后续再讲。
4.1 基本数据类型
4.1.1 number类型
Number类型，即数值类型, 包含：整数型、浮点型、NaN(not a number)和Infinity（正负无穷大）
定义一个整型:
<script>
var age = 18;
console.log(age); // 输出：18
console.log(typeof age); // 输出：number
</script>
定义一个浮点型:
<script>
var price = 12.8;
console.log(price); // 输出：12.8
console.log(typeof price); // 输出：number
</script>
注意：因为小数的存储特点，两个小数做运算，得到的结果未必精确。
<script>
var sum = 0.1 + 0.2;
console.log(sum); // 输出：等于0.3吗???
</script>
±Infinity正无穷大和负无穷大
<script>
var max = 1/0;
console.log(max); // 输出：Infinity
console.log(typeof max); // 输出：number
var min = -1/0;
console.log(min); // 输出：Infinity
console.log(typeof min); // 输出：number
</script>
注意：在java语言中，如果分母为零，则直接抛出算数异常。
NaN全称: NOT A NUMBER。
我们可以通过isNaN()函数来判断某个变量是否为NaN，例如：如果value是NaN，则isNaN(value)返回的结果是true；如果value不是NaN，则isNaN(value)返回的结果是false。
<script>
var num = parseFloat("111a"); // Number(value), 此处是吧字符串转化为number类型
console.log(num); // 输出: NaN
console.log(isNaN(num)); // 输出: true, 判断num是不是NaN类型
console.log(typeof num); // 输出: number
</script>
4.1.2 boolean类型
boolean: 布尔类型，布尔类型只有两个值：true 和 false
true: 表示为真或条件成立
false: 表示为假或条件不成立
boolean类型常用于条件判断中，如果条件成立，则返回true；条件不成立，则返回false。
<script>
var flag1 = 5 > 3;
console.log(flag1); // 输出：true
console.log(typeof flag1); // 输出：boolean
var flag2 = 5 < 3;
console.log(flag2); // 输出：false
console.log(typeof flag2); // 输出：boolean
</script>
4.1.3 undefined类型
undefined类型只有一个值，就是undefined
表示只声明但未赋值的变量。
<script>
var num;
console.log(num); // 输出: undefined
console.log(typeof num); // 输出: undefined
</script>
4.1.4 string类型
string类型就是字符串，在JavaScript语言中，使用单引号或双引号包裹的内容，我们都称之为字符串。
<script>
// var str = "Hello Word!";
var str = 'Hello Word!';
console.log(str); // 输出："Hello Word!"
console.log(typeof str); // 输出：string
</script>
字符串简单使用：字符串的拼接，可以用“+”来做拼接。
<script>
var str1 = "Hello";
var str2 = " World!";
var str3 = str1 + str2;
console.log(str3); // 输出："Hello Word!"
</script>
4.1.5 null类型
null类型只有一个值，就是null，从逻辑角度看，null值表示一个空对象指针。
<script>
var obj = null;
console.log(obj); // 输出：null
console.log(typeof obj); // 输出：object
</script>
因为null表示的是一个空对象的指针，所以使用typeof操作符检测null会返回object的原因。
本质上这是一个bug，因为当初设计JavaScript这门语言的时候比较仓促，后来发现的时候已经好多开发者在使用了，如果修改这个bug对原有项目的代码改动极大，所以就只能将错就错了。
4.2 数据类型转换
4.2.1 1.强制类型转换
JS中常见的3种强制类型转换
Number(value)——把给定的值转换成数字(可以是整数或浮点数)
Boolean(value)——把给定的值转换成Boolean型
String(value)——把给定的值转换成字符串
4.2.1.1 Number(value)
Number(value)——把给定的值转换成数字(可以是整数或浮点数)，它转换的是整个值，而不是部分值。
<script>
console.log(Number("123.12")); // 输出: 123.12
console.log(Number("powernode")); // 输出: NaN
console.log(Number("123.12powernode")); // 输出: NaN
</script>
4.2.1.2 Boolean(value)
Boolean(value)——把给定的值转换成Boolean型。
当value其值为 0、-0、null、“”、false、undefined 或 NaN 时，那么Boolean()转换成Boolean类型的值为 false。
<script>
console.log(Boolean(-0)); // 输出: false
console.log(Boolean(null)); // 输出: false
console.log(Boolean(undefined)); // 输出: false
console.log(Boolean("")); // 输出: false
console.log(Boolean(NaN)); // 输出: false
console.log(Boolean(false)); // 输出: false
</script>
4.2.1.3 String(value)
String(value)——把给定的值转换成字符串
<script>
console.log(String(123)); // 输出: "123"
console.log(String(true)); // 输出: "true"
console.log(String(false)); // 输出: "false"
console.log(String(undefined)); // 输出: "undefined"
console.log(String(null)); // 输出: "null"
console.log(String(NaN)); // 输出: "NaN"
</script>
4.2.2 隐式类型转换
我们知道：number类型和number类型可以相加，作为数字类型的加法运算; string类型也可以和string类型相加，相当于拼接字符串。
<script>
var number = 1 + 2;
console.log(number); // 输出：3
var string = "Hello " + " World!";
console.log(string); // 输出：Hello World!
</script>
那么不同的数据类型可以相加吗? 比如string类型和number类型?
<script>
var str = "Hello World " + 2017;
console.log(str); // 输出: Hello World 2017
console.log(typeof str); // 输出: string
</script>
因为JavaScript的数据类型是非常弱的，在使用算术运算的时候，JS的引擎在运算之前把number类型悄悄的进行了隐式转换，把number类型隐式转换为string类型，然后做了string类型与string类型的拼接。
<script>
var num = 2 + true;
console.log(num); // 输出: 3
console.log(typeof num); // 输出: number
var str3 = "22" + true;
console.log(str3); // 输出: 22true
console.log(typeof str3); // 输出: string
</script>
通过上面的代码输出结果我们发现，隐式转化其实也是按照我们前一节强制转换的规则来转换的，在我们今后的JavaScript学习过程中，会经常的遇到隐式类型的转换，所以大家一定要记住强制转换之间的规则，尤其是Boolean()的隐式转换。
总结: “+”既可以表示字符串连接，又可以表示算术加，这取决于它的操作数，如果有一个为字符串的，那么就是字符串连接了。
此外，隐士转换在if逻辑分支语句中也是用非常多。
例如：判断一个对象是否存在
<script>
var obj;
if (obj) {
console.log("该对象存在");
} else {
console.log("该对象不存在");
}
</script>
思考： 以下代码输出值为? 值的类型为?
<script>
console.log(1 + 2 + "3"); // 输出：？？？ 数据类型：？？？
console.log(1 + "2" + 3); // 输出：？？？ 数据类型：？？？
var a = 11;
var b = 22;
console.log("a + b"); // 输出：？？？ 数据类型：？？？
console.log(a + "b"); // 输出：？？？ 数据类型：？？？
console.log(a + b); // 输出：？？？ 数据类型：？？？
</script>
通过隐式转换,把string转化为number
<script>
var str = "123.456";
console.log(str - 0); // 输出: 123.456
console.log(typeof(str - 0)); // 输出: number
// 也可以这样
console.log(+str); // 输出: 123.456
console.log(typeof(+str)); // 输出: number
</script>
通过隐式转换,把number转化为string
<script>
var num2 = 123.456;
console.log(num2 + ""); // 输出: 123.456
console.log(typeof(num2 + "")); // 输出: string
</script>
4.2.3 parseInt和parseFloat函数
4.2.3.1 parseInt函数
parseInt() 函数可解析一个字符串，并返回一个整数。
<script>
// 全是字母的时候
console.log(parseInt("powernode")); // 输出: NaN
// 全是数字的时候
console.log(parseInt("12.42")); // 输出：12
// 如果字母和数字都存在
console.log(parseInt("123powernode")); // 输出: 123
console.log(parseInt("123powernode234node567")); // 输出: 123
console.log(parseInt("node123")); // 输出：NaN
</script>
总结：如果参数第一个字符不是数字，返回NaN；如果参数第一个字符是数字，则返回前面找到的所有的数字字符。
注意: 开头和结尾的空格是允许的。
<script>
console.log(parseInt(" 123123powernode")); // 输出: 123
console.log(parseInt(" 123 ")); // 输出: 123
</script>
4.2.3.2 parseFloat函数
parseFloat() 函数可解析一个字符串，并返回一个浮点数。
<script>
// 全是字母的时候
console.log(parseFloat("powernode")); // 输出: NaN
// 全是数字的时候
console.log(parseFloat(123)); // 输出: 123
console.log(parseFloat(123.456)); // 输出: 123.456
// 如果字母和数字都存在
console.log(parseFloat("123.12powernode")); // 输出: 123.12
console.log(parseFloat("123.12powernode456powernode")); // 输出: 123.12
console.log(parseFloat("powernode123.1")); // 输出: NaN
</script>
总结：如果参数的第一个字符不是数字，则返回NaN；如果参数的第一个字符是数字，则返回前面找到的所有的数字字符（包含小数）。
注意:开头和结尾的空格是允许的。
<script>
console.log(parseFloat(" 123.456node")); // 返回:123.456
</script>
5.弹出框
5.1 弹出框的分类
警告框 alert, 常用。
询问框 prompt返回提示框中的值。类型为string
确认框 confirm返回true/false 。
5.2 alert警告框
alert(message)的作用是弹出一个提示框或者警告框，纯提示作用
参数 描述
message 在window上弹出的对话框中显示的纯文本
示例代码
<script>
alert("Hello World!");
</script>
因为alert是window对象的函数，也可以通过window.alert()来调用。
<script>
window.alert("Hello World!");
</script>
加粗样式5.3 prompt询问框
prompt(message)的作用是弹出一个询问框，可以让用户输入一个值。
参数 描述
message 输入文字的提示信息
示例代码
<script>
var name = prompt("您没有登录，请输入用户名：");
alert("your name: " + name);
</script>
因为prompt是window对象的函数，也可以通过window.alert()来调用。
<script>
var name = window.prompt("您没有登录，请输入用户名：");
alert("your name: " + name);
</script>
5.4 confirm确认框
confirm(message)的作用是弹出一个提示框或者警告框，纯提示作用。
参数 描述
message 确认的提示信息
示例代码
<script>
var isLogin = confirm("您确认登录吗？");
if (isLogin) {
alert("您同意登录");
}
else {
alert("您不同意登录");
// alert("您不同意登录2");
}
</script>
6.表达式与运算符
6.1 运算符的分类
1，算术运算符(+ - * / % ++ --)
2，赋值运算符(= += *= /= %=)
3，条件运算符(=== == > >= < <= != )
4，字符串运算符(+ +=)
5，逻辑运算符(&& || !)
6，三元运算符( （条件表达式1）？表达式2：表达式3 )
7，运算符优先级
6.2 赋值运算符
= 把右边的值赋值给左边。
6.3 算术运算符
6.3.1 2.1 二元运算符
加减乘除
<script>
var num1 = 7;
var num2 = 2;
console.log(num1 + num2); // 输出：9
console.log(num1 - num2); // 输出：5
console.log(num1 * num2); // 输出：14
console.log(num1 / num2); // 输出：3.5
</script>
取余，返回两个数相除之后的余数
<script>
console.log(5 % 2); // 输出：1
console.log(8 % 3); // 输出：2
console.log(5 % 1); // 输出：0
</script>
【课堂练习】
获取一个三位数的整数的个位、十位和百位
6.3.2 2.2 一元运算符
++ 自增运算符。如num++和++num，都等价于num = num + 1
num++和++num的区别
++num 先自增，后参与运算
num++ 先参与运算，后自增
– 自减运算符。如num–和–num，都等价于num = num - 1
num–和–num的区别
–num 先自减，后参加运算
num-- 先参与运算，后自减
注意：5++或++5是错误的，想想这是为什么呢？
【课堂练习】
var a = 3, b = 4; 求a++ / 3 + --b * 2 - a-- % 6 + b++ * 3 - ++b的值
6.4 赋值运算符
赋值运算符相对于比较简单，此处就不做过多的讲解。
只需要注意一点：
<script>
var x = 10;
var y = 20;
x += y; //正确
// 注意：赋值运算符之间不能加空格
x + = y; //错误
</script>
6.5 比较运算符
比较运算符常用在逻辑语句中使用，以测定变量或值是否相等。
比较运算返回一个boolean类型的值，满足条件返回true， 否则返回false。
6.5.1 等于(==)
== 只比较内容，不比较类型。只要内容的值相同，返回true，否则返回false。
<script>
console.log(10 == 10); // 输出: true
console.log(10 == 11); // 输出: false
console.log(10 == "10"); // 输出: true
console.log(10 == "9"); // 输出: false
</script>
6.5.2 全等于(===)
=== 既要比较内容,还要比较类型。只有内容和类型都相同才返回true,否则返回false
<script>
console.log(10 === 10); // 输出: true
console.log(10 === "10"); // 输出: false
</script>
注意："=“是赋值运算符，”"或“=”才是比较两个内容是否相等
6.5.3 不等于(!=)
!= 只比较内容，不比较类型。
<script>
console.log(10 != 9); // 输出: true
console.log(10 != "9"); // 输出: true
</script>
6.5.4 不全等于(!==)
!== 既要比较内容，还要比较类型。
<script>
console.log(10 !== "10"); // 输出: true
console.log(10 !== 9); // 输出: true
</script>
6.6 逻辑运算符
6.6.1 &&(逻辑与)
&&(逻辑与) 表示“而且”的意思，属于短路运算。
6.6.1.1 当值为boolean类型时
判断第一个参数, 如果第一个参数为true, 则直接返回第二个数。
<script>
console.log(true && true); // 输出: true
console.log(true && false); // 输出: false
</script>
判断第一个参数, 如果第一个参数为false, 则直接返回第一个数。
<script>
console.log(false && true); // 输出: false
console.log(false && false); // 输出: false
</script>
总结: 逻辑与对于布尔值，只要有一个false，就返回false。
判断第一个参数, 如果第一个参数为true,，则直接返回第二个数。
判断第一个参数, 如果第一个参数为false,，则直接返回第一个数。
6.6.1.2 当值为非boolean类型时
先判断第一个数, 如果第一个数为true, 则返回第二个数; 如果第一个参数为flase, 则直接返回第一个数。
注意: 值是否为true或false，是根据数值的隐式boolean转换而来的。
<script>
var str = "hello" && "world"; // 输出: "world"
var str = 0 && 2; // 输出: 0
var str = "haha" && 4; // 输出: 4
var str = "hello" && ""; // 输出: ""
var str = "" && "hello"; // 输出: ""
var str = null && {"name" : "admin"}; // 输出: null
var str = {"name" : "admin"} && null; // 输出: null
var str = undefined && "name"; // 输出: undefined
var str = "name" && undefined; // 输出: undefined
var str = NaN && "name"; // 输出: NaN
var str = "name" && NaN; // 输出: NaN
</script>
【随堂练习】
1、判断一个数是否在4（包含）~6（不包含）之间；
6.6.2 ||(逻辑或)
||(逻辑或) 表示“或者”的意思，属于短路运算。
6.6.2.1 当值为boolean类型时
判断第一个参数, 如果第一个参数为true，则直接返回第一个数
<script>
console.log(true || true); // 输出: true
console.log(true || false); // 输出: true
</script>
判断第一个参数, 如果第一个参数为false，则直接返回第二个数
<script>
console.log(false || true); // 输出: true
console.log(false || false); // 输出: false
</script>
总结: 逻辑或对于布尔值，只要有一个为true， 就返回true
判断第一个参数, 如果第一个参数为true，则直接返回第一个数
判断第一个参数, 如果第一个参数为false，则直接返回第二个数
6.6.2.2 当值为非boolean类型时
先判断第一个数, 如果第一个数为true, 则返回第一个数; 如果第一个参数为flase, 则直接返回第二个数。
注意: 值是否为true或false，是根据数值的隐式boolean转换而来的。
<script>
var str = "hello" || "world"; // 输出: "hello"
var str = null || undefined; // 输出: undefined
var str = 0 || 2; // 输出: 2
var str = "haha" || 4; // 输出: "haha"
var str = "hello" || ""; // 输出: "hello"
var str = "" || "hello"; // 输出: "hello"
var str = null || {"name" : "admin"}; // 输出: {"name" : "admin"}
var str = {"name" : "admin"} || null; // 输出: {"name" : "admin"}
var str = undefined || "name"; // 输出: "name"
var str = "name" || undefined; // 输出: "name"
var str = NaN || "name"; // 输出: "name"
var str = "name" || NaN; // 输出: "name"
</script>
【随堂练习】
1、判断一个数是否在4（包含）~6（包含）之外；
6.6.3 !(逻辑非)
!(逻辑非) 表示取反的意思
6.6.3.1 当值为boolean类型时
<script>
console.log(!true); // 输出: false
console.log(!false); // 输出: true
</script>
6.6.3.2 当值为非boolean类型时
<script>
console.log(!true); // 输出: false
console.log(!false); // 输出: true
console.log(!"哈哈"); // 输出: false
console.log(!{}); // 输出: false
console.log(!3); // 输出: false
console.log(!""); // 输出: true
console.log(!0); // 输出: true
console.log(!null); // 输出: true
console.log(!undefined); // 输出: true
console.log(!NaN); // 输出: true
</script>
6.7 三目运算
三目运算语法:
条件表达式 ? 满足条件执行 : 不满足条件执行
找出两个数中的最大值
<script>
var max = a > b ? a : b;
console.log("max: " + max);
// 或者这样
var value = a > b ? "最大值为: " + a : "最大值为: " + b;
console.log(value);
</script>
6.8 操作符优先级
7.选择结构
7.1 if语句
if…else语句完成了程序流程中的分支功能，如果其中的条件成立，则程序执行相应的语句。
if…else语句的语法如下：
if(条件){
执行语句
}else{
执行语句
}
7.2 switch语句
分支语句switch可以根据一个变量的不同取值而采取不同的处理方法，在程序设计中提供不同的分支，这样的语句叫做分支语句。
Switch语句的语法如下：
switch (expression){
case const1:
语句块1
case const1:
语句块2
……
default:
语句块N
}
在同时可以使用switch和if时推荐使用switch以获得更好的效率
8.循环结构
8.1 for循环
for (初始化部分；条件部分；更新部分){
语句块…
}
for (var i=0;i<=10;i++) {
alert(i);
}
8.2 while循环
while(条件) {
语句块；
}
var i=0;
while(i<=10){
alert(i);
i++;
}
8.3 do-while
do{
语句块；
}while(条件)
var i=0;
do{
alert(i);
i++;
}while(i<=20);
break语句是结束当前的循环，并把程序的控制权交给循环的下一条语句。
这里是结束循环，循环到此为止
continue语句是结束当前的某一次循环，但是并没有跳出整个的循环。
这里是结束一次循环，整个循环还在进行
9.字符串
string字符串是用来存储一系列的字符的集合, 用于存储和处理文本，在js中属于基本数据类型中的一种。
9.1 字符串的创建
通过字面量来创建字符串
var str1 = “hello world!”;
var str2 = ‘hello world!’;
console.log(str1); // 输出：“hello world!”
console.log(str2); // 输出：“hello world!”
注意：可以用双引号，也可以用单引号。
通过new String()的方式创建字符串
var str3 = new String(“hello powernode”);
console.log(str3); // 输出：“hello powernode”
9.2 字符串常用的属性
获取字符串的长度
var str1 = “hello world!”;
console.log(str1.length);
9.3 字符串常用的方法
9.3.1 获取指定索引的字符
string.charAt(n), n取值从0开始, 取值范围为0~length-1, 超出范围返回空字符串。
var str = “你好,武汉!”;
console.log(str.charAt(1)); // 输出：“好”
console.log(str.charAt(100)); // 输出：“”
9.3.2 字符串截取
9.3.2.1 subStr字符串截取 substring
string.subStr(start, [length])
start: 截取字符串的起始位置 (包含起始位)
length:【可选】截取字符串的长度，不设置长度默认字符串的截取从开始到结束
返回值：成功返回返回指定位置的字符串, 失败返回空字符串
9.3.2.2 slice字符串截取
string.slice(start, [end])
start: 截取字符串的起始位置(包含起始位置)
end:【可选】截取字符串的截止位置(不包含结束位置)，不设置结束位置默认字符串的截取从开始到结束
返回值：成功返回返回指定位置的字符串, 失败返回空字符串
var str = “hello world!”;
console.log(str.slice(2)); // 输出：“llo world!”
console.log(str.slice(2, 7)); // 输出：“llo w”
// 当第一个参数需求，第二个参数超出字符串长度的时候，默认截取到字符串结束位置
console.log(str.slice(2, 700)); // 输出：“llo world!”
9.3.3 大小写字母转换
9.3.3.1 toLocaleUpperCase()
var str = “hello world!”;
console.log(str.toLocaleUpperCase()); // 输出：“HELLO WORLD!”
9.3.3.2 toLocaleLowerCase()
var str = “HELLO WORLD!”;
console.log(str.toLocaleLowerCase()); // 输出：“hello world!”
9.3.4 字符串转化为数组
string.split(value), 根据value来把字符串转化为数组
var str1 = “ni-hao-ma-?”;
var arr1 = str1.split(“-”);
console.log(arr1); // 输出：[“ni”, “hao”, “ma”, “?”]
var str2 = “ni hao ma ?”;
var arr2 = str2.split(" ");
console.log(arr2); // 输出：[“ni”, “hao”, “ma”, “?”]
9.3.5 字符串编码解码
为什么要对字符串进行编码和解码？
只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。如果网址路径中包含汉字，那么就需要对中文的字符进行编码
9.3.5.1 编码
encodeURIComponent()返回编码为有效的统一资源标识符 (URI) 的字符串
var url = “http://www.baidu.com/login?username=德玛&password=不告诉你”;
var encodeURL = encodeURIComponent(url);
返回值:
http%3A%2F%2Fwww.baidu.com%2Flogin%3Fusername%3D%E5%AE%89%E5%BE%B7%26password%3D%E4%B8%8D%E5%91%8A%E8%AF%89%E4%BD%A0
9.3.5.2 解码
解码跟编码一致，把编码好的字符转化为编码前
console.log(decodeURIComponent(encodeURL));
返回值：
http://www.baidu.com/login?username=安德&password=不告诉你
console.log("encodeURI: "+encodeURI(s4));
console.log("decodeURI: "+decodeURI("http://wwww.baidu.com?txt=java%E7%AE%80%E5%8D%95%E5%90%97"));
//将其他普通字符串编码与解码
var s5 = "哈哈，你是王二麻子";
console.log("escape: "+escape(s5));
console.log("unescape: "+ unescape("%u54C8%u54C8%uFF0C%u4F60%u662F%u738B%u4E8C%u9EBB%u5B50"));
9.3.6 特殊字符处理
如何表示以下字符串呢?
“恩格斯说过：“一个民族要想站在科学的高峰，就一刻也不能没有理论思维。””
在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。
那么以上的字符串将被截为多个字符串, 要解决这个问题那么此处就需要用到转义符了。
在JavaScript 中我们可以使用反斜杠来向文本字符串添加特殊字符。
下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：
代码 输出
’ ’
" "
\ \ \
\n 换行符
\t 制表符
9.3.6.1 常见的转义字符
var str = “恩格斯说过：“一个民族要想站在科学的高峰，就一刻也不能没有理论思维。””;
输出单引号
console.log(‘好好’学习’); // 输出：好好’学习
输出反斜杠
console.log(“好好\学习\”); // 输出：好好\学习\
9.3.6.2 转义符""的妙用
假如我们需要以下的字符串，我们该怎么用字符串去表示呢？
var html = "<ul>
<li>武汉</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>重庆</li>
</ul>";
常规的解决方式：
var html = ""
+"武汉 "
+"北京 "
+"上海 "
+"广州 "
+"重庆 "
+"";
以上方式太麻烦, 我们也可以这样来实现
var html = "\
- 武汉
\
- 北京
\
- 上海
\
- 广州
\
- 重庆
\
";
document.write(html);