首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaWeb02-CSS,JS(Java真正的全栈开发)

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

作者头像
Java帮帮
发布2018-03-19 10:37:43
2.5K0
发布2018-03-19 10:37:43
举报

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后面的分号

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-01-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Java帮帮 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档