JavaWeb02-CSS,JS(Java真正的全栈开发)

css&javascript

一.CSS

1.CSS介绍

CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。

把样式添加到HTML中,可以将网页内容与显示相分离。(可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。)

外部样式表通常存储在 CSS 文件中,可以极大提高工作效率

一个HTML元素可以被不同位置的样式进行修饰,多个样式根据一定规则层叠为一个(123举例)

2.CSS书写规则

基本语法

Css规则主要由两部分组成 1.选择器 2.一条或多条声明

a.选择器主要作用是为了确定需要改变样式的HTML元素

b.每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开,多条声明用分号(;)隔开.

如图:

值的单位

书写注意事项

如果值为若干单词,则要给值加引号

多个声明之间使用分号(;)分开

class与id名称对大小写敏感,其他属性对大小写不敏感

选择器{

属性1:值1;

属性2:”Times new roma”;

属性3:值31 值32;

}

3.导入CSS

内联样式表

用法:

在相关的标签内使用样式(style)属性。style 属性可以包含任何 CSS 属性

例如:

<div style="border:1px solid #ff0000">div内联样式表</div>

注意:

该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

内部样式表

用法:

在head标签中加入style标签,然后在style的标签体中再对多个标签的样式进行修改。

例如:

<style type="text/css">

div{

border:1px dashed #ff00ff;

}

</style>

注意:

这种方式只适用于当前页面

外部样式表

用法:

1.css文件,文件里存放的都是样式

例如:

myStyle.css文件里有如下内容

span{

border: 10px double #0000ff

}

2.通过head标签里的link标签,导入myStyle.css文件

例如:

<link rel="stylesheet" href="myStyle.css" type="text/css">

@import导入

这种方式也是外部导入。

用法:

1.css文件,文件里存放的都是样式

例如:

myStyle.css文件里有如下内容

span{

border: 10px double #0000ff

}

2.在head标签中加入style标签,然后通过style标签导入

<style type="text/css">

@import "myStyle2.css";

</style>

注意:

关于@import与引用外部样式表的区别:

1.@import这种方式导入的css,会在整个页面加载后,才会加载样式。如果网络不好情况下,会先看到无样式修饰的页面,闪烁一下后,才会看到有样式修饰的页面。而使用外部样式表,会先装载样式表,这样看到的就是有样式修饰的页面。

2.@import不支持通过javascript修改样式,而link支持。

优先级问题

最近原则:不同的导入方式中,如果有属性一样的样式,那个方式里此html元素近就用那种方式定义的样式.

4.CSS选择器

css选择器主要是用于选择需要添加样式的html元素。对于css来说,它的选择器有很多,我们主要介绍以下几种:

id选择器

要求:

html中的标签有id属性,并且有值.例如 <xxx id=”y1”>

css中使用#引入,它引用的是id属性中的值.例如 #y1{...}

类选择器

要求:

html中的标签有class属性,并且有值.例如 <xxx class=”yy1”>

css中使用.引入,它引用的是class属性中的值.例如 .yy1{...}

元素选择器

这是最常见的选择器,简单说,文档中的元素就是选择器.例如:div{...}

属性选择器

要求:

html的标签中必须有某个属性,不论属性是什么 例如 <input type=”text”>

css中定义时候使用 标签名[属性=属性值] 例如 input[type=”text”]{...}

伪类

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。

在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}/* 未访问的链接 */

a:visited {color: #00FF00}/* 已访问的链接 */

a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

a:active {color: #0000FF}/* 选定的链接 */

注意:

在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

伪类名称对大小写不敏感。

5.CSS属性

字体

Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母)

常用属性:

font:简写属性,作用是把所有针对字体的属性设置在一个声明中。

格式:{font :风格 异体 粗细 尺寸/行间距 字体系列}

例如:{ font: italic bold 12px/20px arial,sans-serif}

font-family:定义字体系列

具体字体的名称,例如:font-family:隶书。

通常字体系列名称:例如 font-family:"serif","sans-serif","cursive","fantasy","monospace"

“,”的意思是指如果本地没有该字体系列,再使用下一个

font-size:定义字体的尺寸 例如 font-size:40px

font-style:定义字体风格 例如 font-style:italic

文本

CSS 文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

常用属性

color:定义文本颜色 例如 color:#ffff00

text-align:定义文本对齐方式 例如:text-align:center

text-decoration 向文本添加修饰。例如text-decoration:underline(下划线)

letter-spacing:定义字符间隔

word-spacing:定义字间隔

背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。

常用属性:

background:简写属性,作用是将背景属性设置在一个声明中

格式:{background: 颜色 url(图片路径) 重复 滚动 位置}

例如: {background: #00FF00 url(bgimage.gif) no-repeat fixed top}

background-color:定义背景颜色

background-image:定义背景图片 background-image:url(xx.jpg)

background-position:定义背景图片的起始位置 background-position:10% 5%;

background-repeat:定义背景图片是否重复及如何重复 background-repeat:no-repeat

尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

常用属性:

width:设置元素的宽度

height:设置元素的高度

列表

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

常用属性:

list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。

格式:{list-style : 图片 类型 位置}

例如:{list-style : url(liebiao.jpg) square inside}

list-style-type:定义列表项标志的类型

list-style-position:定义列表项标志的位置 常用值:inside ,outside

list-style-image:定义列表项标志为图象



表格

CSS 表格属性可以帮助您极大地改善表格的外观

常用属性:

border-collapse:定义是否把表格边框合并为单一的边框。常用值:collapse,separate

border-spacing:定义分隔单元格边框的距离

caption-side:定义表格标题的位置常用值:top,bottom

轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

常用属性:

outline:在一个声明中设置所有的轮廓属性

格式:{outline:颜色 样式 宽度}

例如:{outline:#00FF00 dotted thick;}

outline-style:定义轮廓的样式 常用值:solid(实线) ,dashed(虚线) ,double(双线)...

outline-color:定义轮廓的颜色

outline-width:定义轮廓的宽度 常用值:thin ,thick ,14px...

定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

常用属性:

position:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。

top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量

right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移

left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

分类

CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

常用属性

float:定义元素在哪个方向浮动

clear:设置一个元素的侧面是否允许其它的浮动元素

cursor:当指向某元素之上时显示的指针类型

display:定义是否显示及如何显示元素 常用值 none和inline

visibility:定义元素是否可见或不可见。 常用值 hidden和visible

6.CSS框模型

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

常用属性:

border:简写属性,用于把针对于四个边的属性设置在一个声明。

格式:{border:宽度 样式 颜色}

例如:{border:1px solid red;}

border-color:简写属性,定义元素边框中可见部分的颜色,或为四个边分别设置颜色。

border-style:用于定义所有边框的样式,或者单独为各边设置边框样式。

border-width:简写属性,用于为元素的所有边框设置宽度,或则单独地为各边边框设置宽度

border-top:简写属性,用于把上边框的所有属性设置到一个声明中

border-right:简写属性,用于把右边框所有属性设置到一个声明中

border-bottom:简写属性,用于把下边框的所有属性设置到一个声明中

border-left:简写属性,用于把左边框的所有属性设置到一个声明中。

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

常用属性:

margin:简写属性,在一个声明中设置所有外边距属性

margin-top:定义元素的上外边距

margin-right:定义元素的右外边距

margin-bottom:定义元素的下外边距

margin-left定义元素的左外边距

注意:在使用margin来定义所有外边距时,可以使用值复制。

如果缺少左外边距的值,则使用右外边距的值。

如果缺少下外边距的值,则使用上外边距的值。

如果缺少右外边距的值,则使用上外边距的值。

内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

常用属性:

padding:简写属性,作用是在一个声明中设置元素的所有内边距属性

padding-top:定义元素的上内边距

padding-right:定义元素的右内边距

padding-bottom:定义元素的下内边距

padding-left:定义元素的左内边距。

二.javaScript

1.javaScript介绍

1992 年,Nombas 公司开发 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言,后更名为ScriptEase。

1995 年 Netscape网景公司的Brendan Eich,开发Netscape Navigator 2.0浏览器内置的 LiveScript脚本语言,Netscape Navigator 2.0 即将正式发布前,Netscape 将其更名为 JavaScript

同时,微软进军浏览器,发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript

3 种不同的 JavaScript 版本同时存在。1997 年,第 39 技术委员会(TC39)推出 ECMA-262标准,该标准定义了名为 ECMAScript 的全新脚本语言。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。

ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样(简称js):

js组成:

一个完整的js实现是由下面三个不同部分组成的:

ECMAScript (js的核心,描述了js的基础语法和基本对象)

DOM(文件对象模型)

BOM(浏览器对象模型)

:

js简介:

javaScript是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。

脚本语言:脚本语言又被称为扩建的语言,或者动态语言,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译

javaScript是可插入 HTML 页面的编程代码,可由所有的现代浏览器执行。

javaScript与 Java 是两种完全不同的语言

JavaScript是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。

JavaScript是基于对象,Java是面向对象。

JavaScript只需解释就可以执行,Java需要先编译成字节码文件,再执行

JavaScript是弱类型,Java是强类型。

JavaScript与java一样都区分大小写

js作用:

通过js可以改变html内容,改变html样式,进行验证输入等。

2.导入js

在html页面中直接插入javascript

在<script> 和 </script> 之间的编写JavaScript代码.

格式:

<script type=”text/javascript”>

js代码

</script>

老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

引入外部的javascript

有时,我们希望在若干个页面中运行JavaScript,同时不在每个页面中写相同的脚本。

我们就可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。然后通过<script type=”text/javascript”>标签的src属性引入.

格式:

<script type=”text/javascript” src=”外部js路径”></script>

注意:

<script>存放的位置.一般建议放在<head>标签体中.由于js是解释性语言,

外部的js文件中不能包含<script>标签。

<script>标签如果使用了src属性,标签体内的代码不再解析.

3.js基础-变量声明

javascript中的变量与我们在java中的变量一样。

在javascript中使用用 var 运算符(variable 的缩写)加变量名定义

格式:

var 变量名 =初始化值;

var 变量名;

变量名=初始化值;

javascript 变量名称的规则和我们java中的规则一样:

变量必须以字母 ,下划线或者$开始

区分大小写

不能是关键字

见名知意(js是弱类型,因此整数类型建议iXxx,boolean类型建议bXxx ,数组建议 aXxx等等)

注意:

1.变量声明不是必须的.

2.变量如果要声明,var可以省略,建议不要省略

3.每行结尾的分号可有可无,有的浏览器不兼容,建议不要省略

4.js基础-数据类型

在ECMAScript中,变量可以存在两种数据类型,即原始类型与引用类型。

原始类型

ECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String.

我们先来了解下这5中原始类型.

Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。当函数无明确返回值时,返回的也是值 "undefined".

Null类型也只有一个值 null,即它的字面量。值undefined实际上是从值null派生来的,因此 ECMAScript 把它们定义为相等的。例如:alert(null == undefined); 输出"true"

Boolean 类型有两个值 true 和 false.

Number 类型,在js中任何数字都看成是Number类型,不论整数,还是浮点数,当然表示八进制首数字必须是0,十六进制使用0x开始等.数字的最大值:Number.MAX_VALUE,数字的最小值:Number.MIN_VALUE.

String类型是唯一没有固定大小的原始类型,字面量是由双引号(")或单引号(')声明的,没有字符类型概念.String 类型还包括几种字符字面量,像转义字符.

ECMAScript提供了typeof 运算符来判断一个值或变量是否在某种类型的范围内。可以用这个运算符判断一个值或者变量是否表示一种原始类型:如果它是原始类型,还可以判断它表示哪种原始类型。

typeof 运算符有一个参数,就是要检查的变量或值

例如: typeof 变量或值

对变量或值调用 typeof 运算符将返回下列值之一:

undefined - 如果变量是 Undefined 类型的

boolean - 如果变量是 Boolean 类型的

number - 如果变量是 Number 类型的

string - 如果变量是 String 类型的

object - 如果变量是一种引用类型或 Null 类型的

注意:您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

引用类型

引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。从传统意义上来说,ECMAScript 并不真正具有类。ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。对象是由 new 运算符加上要实例化的对象的名字创建的

var obj=new Object();

Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.

可以使用instanceof运算符来判断对象的类型。

5.js基础-类型转换

ECMAScript为开发者提供了大量的类型转换方法。大部分类型具有进行简单转换的方法,还有几个全局方法可以用于更复杂的转换。布尔值、数字和字符串的原始值它们是伪对象,这意味着它们实际上具有属性和方法。

转换成字符串

toString()方法.

例如:

true.toString(); 9.9.toString();

注意:

null和undefined类型,调用toString()会出错.

转换成数字

ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。前者尝试着把值转换成整数,后者尝试这把值转换成浮点数。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。

例如:

alert(parseInt(“9.9”));//9

alert(typeof parseInt(“9.9”));//number

alert(parseFloat(“9.9.8hello”)); //9.9

alert(typeof parseFloat(“9.9.8hello”)); //number

强制类型转换

使用强制类型转换可以访问特定的值。ECMAScript 中提供了三种强制类型转换:

把给定的值转换成Boolean类型

把给定的值转换成数字

把给定的值转换成字符串

测试Boolean型的强制类型转换

alert(Boolean(undefined));

alert(Boolean(null));

alert(Boolean(new Object));

alert(Boolean(""));

alert(Boolean("hello"));

alert(Boolean(0));

alert(Boolean(2));

非空对象,非空字符串,非零数字结果都为true;其余为false

测试强制转换成数字类型

alert(Number(""));

alert(Number(" "));

alert(Number("9"));

alert(Number("9.9"));

alert(Number(null));

alert(Number(true));

alert(Number(false));

alert(Number("9kuai9"));

alert(Number("chaoshi"));

alert(Number(new Object()));

alert(Number(undefined));

测试强制转换成字符串

alert(String(null));

alert(String(undefined));

alert(String(50));

alert(String(true));

6.js基础-运算符与表达式

ECMAScript 运算符分类:

一元运算符

位运算符

逻辑运算符

算术运算符

关系运算符

等性运算符

条件运算符

赋值运算符

逗号运算符

一元运算符

delete

delete 运算符删除对以前定义的对象属性或方法的引用。

面对对象中可能使用,在JS框架有涉及,一般情况下不使用。

例如:

var o = new Object;

o.name = "David";

alert(o.name);//输出 "David"

delete o.name;

alert(o.name);//输出 "undefined"

注意:delete 运算符不能删除开发者未定义的属性和方法。

例如,下面的代码将引发错误:delete o.toString;

void (函数时使用)

void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值,例如,从 HTML 的 <a> 元素调用 JavaScript 函数时。要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果

需求:点击超链接,打开一个新的窗口

正确编写:

<a href="javascript:void(window.open('about:blank'))">Click me</a>

错误编写:

<a href="javascript:window.open('about:blank')">Click me</a>

现象:点击链接,屏幕上显示 "[object]"。

分析:window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串

++和--

一元加法和一元减法

一元加法数字无任何影响:

var iNum = 20;

iNum = +iNum;

alert(iNum);//输出 "20"

但对字符串却有有趣的效果,会把字符串转换成数字。

var sNum = "20";

alert(typeof sNum);//输出 "string"

var iNum = +sNum;

alert(typeof iNum);//输出 "number"

当一元加法运算符对字符串进行操作时,它计算字符串的方式与 parseInt() 相似,主要的不同是只有对以 "0x" 开头的字符串(表示十六进制数字),一元运算符才能把它转换成十进制的值。因此,用一元加法转换 "010",得到的总是 10,而 "0xB" 将被转换成 11。

一元减法就是对数值求负(例如把 20 转换成 -20):

var iNum = 20;

iNum = -iNum;

alert(iNum);//输出 "-20"

位运算符

| & ~ >> >>> <<

ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数)。在 ECMAScript 中,所有整数字面量默认都是有符号整数(32位).和java基本一样.

逻辑运算符 && || !

! (not运算符)

!运算符返回的一定是 Boolean 值。

!运算符的行为如下:

如果运算数是对象,返回 false

如果运算数是数字 0,返回 true

如果运算数是 0 以外的任何数字,返回 false

如果运算数是 null,返回 true

如果运算数是 NaN,返回 true

如果运算数是 undefined,返回true

&&

&&运算的运算数可以是任何类型的.

如果运算数都是boolean类型,和java一样。

如果某个运算数不是原始的 Boolean 型值,&&运算并不一定返回 Boolean 值

例如:

alert(false&&"abc");

alert(true&&"abc");

alert("abc"&&true);

alert("abc"&&false);

alert("abc"&&"bcd");

alert(null&&true);

alert(NaN && true);

alert(NaN&&null);

alert(null&&NaN);

alert(undefined&&true);

alert(false&&undefined);

alert(undefined&&undefined);

结论:

一旦前面的表达式能确定了最终结果,那么最终的结果,就是能这个表达式的结果,后面的表达式也不再进行运算了.否则,最终结果为最后面这个表达式的结果.

||

||运算的运算数可以是任何类型的,

如果都是boolean类型,和java一样。

如果某个运算数不是原始的 Boolean 型值,||运算并不一定返回 Boolean 值

例如:

alert(false||"abc");

alert(true||"abc");

alert("abc"||false);

alert("abc"||true);

alert("abc"||"bcd");

alert(null||false);

alert(null||true);

alert(null||undefined);

alert(undefined||null);

alert(undefined||undefined);

alert(NaN||true);

alert(NaN||false);

alert(NaN||NaN);

alert(NaN||null);

结论:

一旦前面的表达式能确定了最终结果,那么最终的结果,就是能这个表达式的结果,后面的表达式也不再进行运算了.否则,最终结果为最后面这个表达式的结果.

算术运算符

+-*/% 与java基本相同

加法特殊行为

某个运算数是 NaN,那么结果为 NaN。

-Infinity 加 -Infinity,结果为 -Infinity。

Infinity 加 -Infinity,结果为 NaN。

+0 加 +0,结果为 +0。

-0 加 +0,结果为 +0。

-0 加 -0,结果为 -0。

不过,如果某个运算数是字符串,那么采用下列规则:

如果两个运算数都是字符串,把第二个字符串连接到第一个上。

如果只有一个运算数是字符串,把另一个运算数转换成字符串,结果是两个字符串连接成的字符串。

减法特殊行为

某个运算数是 NaN,那么结果为 NaN。

-Infinity 减 Infinity,结果为 NaN。

-Infinity 减 -Infinity,结果为 NaN。

Infinity 减 -Infinity,结果为 Infinity。

-Infinity 减 Infinity,结果为 -Infinity。

+0 减 +0,结果为 +0。

-0 减 -0,结果为 -0。

+0 减 -0,结果为 +0。

某个运算符不是数字,那么结果为 NaN。

乘法特殊行为

如果结果太大或太小,那么生成的结果是 Infinity 或 -Infinity。

如果某个运算数是 NaN,结果为 NaN。

Infinity 乘以 0,结果为 NaN。

Infinity 乘以 0 以外的任何数字,结果为 Infinity 或 -Infinity。

Infinity 乘以 Infinity,结果为 Infinity。

除法特殊行为

如果结果太大或太小,那么生成的结果是 Infinity 或 -Infinity。

如果某个运算数是 NaN,结果为 NaN。

Infinity 被 Infinity 除,结果为 NaN。

Infinity 被任何数字除,结果为 Infinity。

0 除一个任何非无穷大的数字,结果为 NaN。

Infinity 被 0 以外的任何数字除,结果为 Infinity 或 -Infinity。

取模(余)特殊行为

如果被除数是 Infinity,或除数是 0,结果为 NaN。

Infinity 被 Infinity 除,结果为 NaN。

如果除数是无穷大的数,结果为被除数。

如果被除数为 0,结果为 0。

关系运算符

关系运算符有>,<, >=, <= ,它们的运算结果返回的是一个boolean值

数字比较:和java一样

字符串比较:ASCII大小进行比较,区分大小写

字符串形式的数字和数字比较:字符串数字转成数字,然后比较大小

字符串和数字比较:字符串无法转成数字,字符串将转成NaN,最终结果为false

等性运算符

在 ECMAScript 中,等号由双等号(==)表示,当且仅当两个运算数相等时,它返回 true。非等号由感叹号加等号(!=)表示,当且仅当两个运算数不相等时,它返回 true。为确定两个运算数是否相等,这两个运算符都会进行类型转换。

规则:

值 null 和 undefined 相等。

在检查相等性时,不能把 null 和 undefined 转换成其他值。

如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。

如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。

即使两个数都是 NaN,等号仍然返回 false,因为根据规则,NaN 不等于 NaN

如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。

如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。

如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。

如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。

例如:

alert(null == undefined)
alert("NaN" == NaN)
alert(5 == NaN)
alert(NaN == NaN)
alert(NaN != NaN)
alert(false == 0)
alert(true == 1)
alert(true == 2)
alert(undefined == 0)
alert(null == 0)
alert("5" == 5)

全等号和非全等号

两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

全等号由三个等号表示(===),只有在无需类型转换运算数就相等的情况下,才返回 true。

例如:

var sNum = "66";
var iNum = 66;
alert(sNum == iNum);
alert(sNum === iNum);

非全等号由感叹号加两个等号(!==)表示,只有在无需类型转换运算数不相等的情况下,才返回 true。

var sNum = "66";
var iNum = 66;
alert(sNum != iNum);//输出 "false"
alert(sNum !== iNum);//输出 "true"

条件运算符(三目运算符)

和java中相同

赋值运算符

= += -= *= /=等和java中相同

逗号运算符

用逗号运算符可以在一条语句中执行多个运算。

var iNum1 = 1, iNum = 2, iNum3 = 3;

逗号运算符常用变量声明中。

7.js基础-条件语句

if语句

javascrip中的if语句,与我们在java中使用基本相同,

例如:

if (i > 30) {
alert("大于 30");
}else {
alert("小于等于 30");
}

switch语句

switch语句也与我们在jdk1.7中使用基本相同,它可以直接判断字符串类型,case后面可以跟变量.

例如:

var BLUE = "blue", RED = "red", GREEN = "green";
switch (sColor) {
case BLUE: alert("Blue");
break;
case RED: alert("Red");
break;
case GREEN: alert("Green");
break;
default: alert("Other");
}

8.js基础-循环语句

在javascript中也存在循环语句for while do-while,基本与在java中使用相同.

for示例

var iCount = 6;
for (var i = 0; i < iCount; i++) {
alert(i);
}

注意:在声明变量归我们使用var

while示例

var i = 0;
while (i < 10) {
i += 2;
}

do-while示例

var i = 0;
do {
i += 2;
} while (i < 10);

注意:在while后面的分号

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

动画(20171030)

11410
来自专栏PHP在线

jquery事件

parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用...

34170
来自专栏finleyMa

解决setTimeout中的this指向问题

在setInterval和setTimeout中传入函数时,函数中的this会指向window对象。

34750
来自专栏前端知识分享

第138天:Web前端面试题总结(编程)

2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

12730
来自专栏天天

选择器与css的一些用法

8910
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— DOM:四个常用的方法

 终于开始复习DOM的知识了,这一阵忙乎论文,基本都没好好看技术的书。   记得去年实习的时候,才开始真正的接触前端,发现原来JS可以使用的如此灵活。 ...

20250
来自专栏Java帮帮-微信公众号-技术文章全总结

JS之文档对象模型DOM

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> ...

31360
来自专栏小壮和前端

js写2048游戏代码

42020
来自专栏吴裕超

js行内式遇到的一些问题 DOM对象和jq对象转换的问题

这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但...

32050
来自专栏九彩拼盘的叨叨叨

学习纲要:ES6系列:箭头函数和对象方法简写

9620

扫码关注云+社区

领取腾讯云代金券