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的特点

  1. JavaScript是一种脚本语言(脚本语言又被称为扩建的语言,或者动态语言,是一种编程语言,用来控制软件应用程序,脚本通常以文本(如ASCII)保存,只在被调用时进行解释或编译。),它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

  2. JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。这是我们在面向对象编程中非常喜欢看见的!

  3. 简单性:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型(代码结束后可以不用写分号,区分大小写,只有var一种数据类型),并未使用严格的数据类型。 int i = 10; var i = 10; boolean flag = true; var flag = true

  4. 安全性:它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。(这点体会还不深)

  5. 动态性:javascript可以直接对用户或者客户输入做出响应,无须经过Web服务程序。他对用户的反映响应,是采用以事件驱动的方式进行的。也就是当我们按下鼠标,移动窗口,采择菜单等事件发生时响应的。

  6. 跨平台性: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 操作符优先级
Java零基础教学文档第四篇:HTML_CSS_JavaScript(3)_第1张图片

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);

你可能感兴趣的:(Java零基础教学文档,java,html,css)