Java零基础教学文档第四篇：HTML_CSS_JavaScript（3）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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("<h1>Hello World!</h1>");
    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 操作符优先级
Java零基础教学文档第四篇：HTML_CSS_JavaScript（3）,Java零基础教学文档,java,html,css

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 = "<ul>"
    +"<li>武汉</li>"
    +"<li>北京</li>"
    +"<li>上海</li>"
    +"<li>广州</li>"
    +"<li>重庆</li>"
    +"</ul>";

以上方式太麻烦, 我们也可以这样来实现

var html = "<ul>\
           <li>武汉</li>\
           <li>北京</li>\
           <li>上海</li>\
           <li>广州</li>\
           <li>重庆</li>\
        </ul>";

document.write(html);文章来源地址https://www.toymoban.com/news/detail-785211.html

到了这里，关于Java零基础教学文档第四篇：HTML_CSS_JavaScript（3）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！