css

来源：互联网发布：米兰理工大学知乎编辑：程序博客网时间：2024/06/06 17:57

CSS与JavaScript

CSS

u CSS介绍

u 导入css

u Css选择器

u CSS属性

u CSS框模型

综合案例

u Html+css案例

Javascript基本介绍与使用

u Javascript介绍

u 导入js方式

u Javascript基础语法-变量声明

u Javascript基础语法-数据类型

u Javascript基础语法-运算符与表达式

u Javascript基础语法-类型转换

u Javascript基础语法-条件语句

u Javascript基础语法-循环语句

【学习目标】

掌握css的作用与基本使用

了解常用属性

掌握css选择器。

【内容:css】

css介绍

1. css是什么

CSS 指层叠样式表 (Cascading Style Sheets)

l 样式定义如何显示 HTML 元素

l 样式通常存储在样式表中

l 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

l 外部样式表可以极大提高工作效率

l 外部样式表通常存储在 CSS 文件中

l 多个样式定义可层叠为一

2. css作用

1. 样式表解决了html的内容与表现分离

2. 使用样式表极大的提高了工作效率。

3. css书写规则

u 基本语法

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

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

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

如图:

u 值的单位

u 书写注意事项

1. 如果值为若干单词，则要给值加引号

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

3. css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感

导入css ★★★

我们介绍以下几种导入css方式:

内联样式表

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何 CSS属性

例如:

<div style=”border:1px solid black”>这是一个DIV</div>

注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用

内部样式表

我们可以使用<style>标签在html文档的<head>中来定义样式表。

例如:

这种方式，样式只适合应用于一个页面

外部样式表

如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。

我们可以在html页面上使用<link>标签来导入外部样式表。

例如:

浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。

下面是mystyle.css文件的内容:

@import导入

这种方式也是外部导入。

使用方式如下：

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

1. @import这种方式只有firefox支持，而ie不支持。

2.@import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。

而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。

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

优先级问题

内联样式表>内部样式表>外部样式表

css选择器

css选择器主要是用于选择需要添加样式的html元素。

对于css来说，它的选择器有很多，我们主要介绍以下几种:

id选择器

Id选择器使用#引入，它引用的是id属性中的值。

类选择器

类选择器使用时,需要在类名前加一个点号(.)

元素选择器

这是最常见的选择器，简单说，文档中的元素就是选择器

属性选择器

如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器

伪类

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

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

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

css属性

字体

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

常用属性:

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

l font-family:定义字体系列

l font-size:定义字体的尺寸

l font-style:定义字体风格

文本

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

常用属性

l color:定义文本颜色

l text-align:定义文本对齐方式

l letter-spacing:定义字符间隔

l word-spacing:定义字间隔

背景

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

常用属性:

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

l background-color:定义背景颜色

l background-image:定义背景图片

l background-position:定义背景图片的起始位置

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

尺寸

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

常用属性:

l width:设置元素的宽度

l height:设置元素的高度

列表

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

常用属性:

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

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

l list-style-position:定义列表项标志的位置

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

表格

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

常用属性:

l border-collapse:定义是否把表格边框合并为单一的边框。

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

l caption-side:定义表格标题的位置

轮廓

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

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

常用属性:

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

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

l outline-style:定义轮廓的样式

l outline-width:定义轮廓的宽度

定位

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

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

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

常用属性:

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

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

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

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

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

分类

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

常用属性

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

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

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

l display:定义是否及如何显示元素

l visibility:定义元素是否可见或不可见。

CSS框模型

盒子模型

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

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

边框

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

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

常用属性:

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

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

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

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

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

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

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

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

外边距

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

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

常用属性:

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

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

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

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

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

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

n 如果缺少左外边距的值，则使用右外边距的值。

n 如果缺少下外边距的值，则使用上外边距的值。

n 如果缺少右外边距的值，则使用上外边距的值。

内边距

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

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

常用属性:

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

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

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

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

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

【笔试面试题】

1. css基本语法是什么

2. css导入方式有几种

3. 外部导入与@import有什么区别

4. Css选择器的作用是什么,并说出常见三种选择器。

5. display=none与visibility=hidden有什么区别

【重点总结】

1. css是什么及其作用

2. css导入方式

3. css选择器及基本语法

4. 可以查询帮助文档，看懂css代码就可以

【第二阶段】

【学习目标】

掌握css样式，可以完成简单的css样。

【内容:HTML+CSS综合案例】

显示商品信息

案例分析 :

在设置各部分样式前，我们需要对页面上的元素进行一些整体设计，如整个页面的字体，文本对齐方式，背景等。

.main{

/*设置外边距，下面有30px距离*/

margin:0px 0px 30px 0px;

/*背景色*/

background-color:#ffffff;

/*字体大小*/

font-size:12px;

/*文字颜色*/

color:#000000;

/*文本对齐方式*/

text-align:center;

/*垂直对齐方式*/

vertical-align:top;

/*设置行高*/

line-height:150%;

/*设置字体*/

font-family: Arial, Helvetica, sans-serif;

}

/*设置a标签字体12px颜色 #0066FF*/

a {

font-size: 12px;

color: #0066FF; /*#1E33F7*/

}

/*设置未访问的超连接无下划线*/

a:link {

text-decoration: none;

}

/*设置访问后的连接颜色为#0066ff也无下划线*/

a:visited {

text-decoration: none;

color: #0066FF;

}

/*设置鼠标移到超连接上无下划线颜色为#990099*/

a:hover {

text-decoration: none;

color: #990099; /*颜色变换*/

}

/*设置选定的超连接无下划线，颜色为#0066ff*/

a:active {

text-decoration: none;

color: #0066FF;

}

/*设置所有td标签*/

td{

text-align:left;

vertical-align:top;

font-size:12px;

}

/*设置所有的hr标签*/

hr{

/*颜色*/

color:#cccccc;

/*高度*/

height:1px;

/*上外边距5px*/

margin-top:5px;

/*下外边距5px*/

margin-bottom:5px;

/*分隔线如果超出框架部分隐藏*/

overflow:hidden;

}

/*设置h1*/

h1{

font-size:14px;

color:#000000;

margin-bottom:5px;

font-weight:bold;

display:inline;

text-align:left;

}

设置head部分样式

Css代码

#head{

/*设置head这个div宽度为100%*/

width:100%;

}

.headtab{

width:100%;

}

.headta td{

/*设置td内边距上10px右50px下25px左135px*/

padding:10px 50px 25px 135px;

}

Html代码

<tr>

</td>

<a>购物车</a>|

<a>帮助中心</a>|

<a>我的帐户</a>|

<a>新用户注册</a>|

</td>

</tr>

</table>

</div>

设置menu部分样式

Css代码

#menu{

width:100%;

background-color:#1c3f09;/*设置背景色*/

border-top-width:4px;/*设置上边框宽度4px*/

border-top-style:solid; /*设置上边框样式实线*/

border-top-color:#82b211; /*设置上边框的颜色 #82b211*/

text-align:center;

font-size:14px;

padding:10px 0px 10px 0px;

}

/*#menu下的a标签样式设置*/

#menu a{

font-size:14px;

color:#ffffff; /*超连接文字颜色*/

font-weight:bold; /*超连接字体加粗*/

padding:10px 10px 10px 10px; /*超连接内边距*/

}

#menu a:link {

text-decoration: none;

font-weight: bold;

}

#menu a:visited {

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

#menu a:hover {

text-decoration: none;

color: #999999; /*颜色变换*/

font-weight: bold;

}

#menu a:active {

text-decoration: none;

color: #FFFFFF;

font-weight: bold;

}

Html代码

<tr>

<td>

<a href="#" style="color:yellow">全部商品目录</a>

</td>

</tr>

</table>

</div>

设置search部分样式

Css代码

/*设置search样式*/

#search{

width:100%;

text-align:center;

color:#ffffff;

font-weight:bold;

padding:5px 0px 5px 0px;

background-color:#b6b684;

}

/*设置search中的文本框样式*/

.inputtxt{

width:130px;

height:18px;

border:1px solid #999999;

}

Html代码

<tr>

</td>

</tr>

</table>

</div>

设置content部分样式

Css代码

/*content整体设置*/

#content{

width:900px; /*宽度900px*/

margin-top:10px; /*上外边距*/

/*左右外边浏览器默认*/

margin-right:auto;

margin-left:auto;

}

.contentlist{

background-color:#fcfdef;

border:1px solid #cccccc;

width:99%;

margin-left:5px;

}

.contentlist td{

padding:20px;

}

.booklist{

width:100%;

}

.booklist td{

text-align:center;

width:25%;

padding:10px;

}

Html代码

<tr>

<td>

旅游 >

图书列表

</div>

<tr>

<td>

<hr>

<h1>计算机类</h1>共xxx种商品

<hr>

<div>

<div>

<tr>

<td>

<div>

<img src="bookcover/101.jpg" width="130"

height="197">

</div>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<img src="bookcover/102.jpg" width="130"

height="197">

</div>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<img src="bookcover/103.jpg" width="130"

height="197">

</div>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

</tr>

</table>

<tr>

<td>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<td>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<td>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

<td>

<div>

书名:xxx<br>

售价:xxx

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

设置foot部分样式

Css代码

#foot{

width:100%;

background-color:#efeedc;

margin-top:15px;

}

Html代码

<tr>

</td>

<a><font color="#747556">CONTACT US</font></a>

</td>

</tr>

<tr>

</font>

</td>

</tr>

</table>

</div>

添加分页条码并设置样式

Css代码

#pagediv{

width:600px;

text-align:center;

margin:5px;

padding:5px;

}

#pagediv ul{

margin:5px;

padding:5px;

font-size:14px;

}

#pagediv li{

margin:1px;

padding:1px;

display:inline;

list-style-type:none;

}

#pagediv a,#pagediv a:visited {

padding: 5px;

border: 1px solid #9aafe5;

text-decoration: none;

color: #2e6ab1;

}

#pagediv a:hover,#pagediv a:active {

padding: 5px;

border: 1px solid #2b66a5;

color: #000000;

background-color: lightyellow;

}

#pagediv li.currentpage{

font-weight:bold;

padding:5px;

border:1px solid navy;

background-color:#2e6ab1;

color:#ffffff;

}

#pagediv li.nextpage{

font-weight:bold;

padding:5px;

}

#pagediv li.disablepage{

padding: 5px;

border: 1px solid #929292;

color: #929292;

}

Html代码

<ul>

</ul>

</div>

注册页面

案例分析 :

对于注册页面，我们的head menu search foot部分内容只需要与显示商品信息页面中一样设置就可以，主要是对content内容进行设置

设置content部分

Css代码

/*注册页面content部分整体设计*/

#content{

width:900px;

background-color:#fcfdef;

border:1px solid #eeeddb;

margin-right:auto;

margin-left:auto;

}

/*设置边框*/

.upline{

border-bottom-width:1px;

border-bottom-style:dashed;

border-bottom-color:#b0bec7;

padding-top:5px;

padding-bottom:5px;

margin:20px;

}

/*设置文本框样式*/

.txtinput{

margin-left:10px;

font-size:12px;

width:150px;

height:18px;

border:1px solid #a4b4bd;

}

/*设置文本域样式*/

.txtarea{

margin-left:10px;

font-size:12px;

width:350px;

height:75px;

border:1px solid #a4b4bd;

}

Html代码

<tr>

<h1>新会员注册</h1>

<tr>

<td>

<font color="#999999">请输入有效的邮箱地址</font>

</td>

</tr>

<tr>

<td><font color="#999999">用户名至少六位</font></td>

</tr>

<tr>

<td><font color="#999999">密码至少六位</font></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tr>

<td style="text-align:right;width:20%">输入校验码</td>

</tr>

<tr>

<a href="#">看不清换一张</a>

</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</div>

【笔试面试题】

无

【重点总结】

可以看懂两个示例的css代码

【第三阶段】

【学习目标】

了解javascript是什么及其作用

了解javascript的数据类型

了解javascript中的类型转换

掌握javascript中的运算符

掌握javascript中的控制语句

【内容:javascript基本介绍与使用】

Javascript介绍

javascript是什么

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

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

l JavaScript 是可插入 HTML页面的编程代码。

l JavaScript 插入 HTML页面后，可由所有的现代浏览器执行。

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

javascript作用

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

javascript历史

Netscape（网景）发明了JavaScript

1997年由来自由来自 Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39锤炼出了 ECMA-262，该标准定义了名为ECMAScript 的全新脚本语言。

从此，Web浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript作为 JavaScript实现的基础。

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

javascript组成

javascript的核心ECMAScript描述了语言的语法和基本对象。

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

导入js方式

在html页面中直接插入javascript

如需在 HTML 页面中插入JavaScript，请使用<script> 标签。

例如:

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

注意:<script>标签可以出现在html页面的任意位置，但实际操作中，一般会写在<head>标签中。.

引入外部的javascript

有时，你也许希望在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。

为了达到这个目的，你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。例如:

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

在导入外部js文件的<script>标签中不能在写javascript代码。

例如:

Javascript基础语法-变量声明

变量是用于存储信息的容器

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

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

JavaScript 变量名称的规则：

变量对大小写敏感（y 和Y 是两个不同的变量）

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

注意：由于 JavaScript对大小写敏感，变量名也对大小写敏感。

Javascript基础语法-数据类型

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

原始类型

原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如: 10 “abc”

Ø ECMAScript有五种原始类型

l String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明。

l Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。

l Boolean 它有两个值true和false.

l Undefined:该类型只有一个值undefined.表示的是未初始化的变量

l Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.

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

l undefined - 如果变量是 Undefined类型的

l boolean - 如果变量是 Boolean类型的

l number - 如果变量是 Number类型的

l string - 如果变量是 String类型的

l 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运算符来判断对象的类型。

Javascript基础语法-类型转换

ECMAScript为开发者提供了大量的类型转换方法。

大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。

Boolean 值、数字和字符串的原始值它们是伪对象，这意味着它们实际上具有属性和方法。

Ø 转换成字符串

toString()方法.

Ø 转换成数字

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

Ø 强制类型转换

使用强制类型转换可以访问特定的值。

ECMAScript 中提供了三种强制类型转换：

1. 把给定的值转换成Boolean类型

2. 把给定的值转换成数字

3. 把给定的值转换成字符串

测试Boolean型的强制类型转换

测试强制转换成数字类型

测试强制转换成字符串

Javascript基础语法-运算符与表达式

Ø 一元运算符

++ 自加 --自减 void运算符

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

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

如果把这行代码放入 HTML页面，点击其中的链接，即可看到屏幕上显示 "[object]"。这是因为window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果，可以用void 运算符调用window.open() 函数：

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

这使 window.open()调用返回 undefined，它不是有效值，不会显示在浏览器窗口中。

提示：请记住，没有返回值的函数真正返回的都是 undefined。

Ø 逻辑运算符

逻辑运算会有三种 NOT AND OR

在学习各种逻辑运算符之前，让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。

参数类型

结果

Undefined

false

Null

false

Boolean

结果等于输入的参数（不转换）

Number

如果参数为 +0, -0 或 NaN，则结果为false；否则为true。

String

如果参数为空字符串，则结果为 false；否则为true。

Object

true

l 逻辑NOT运算符

n 如果运算数是对象，返回 false

n 如果运算数是数字 0，返回true

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

n 如果运算数是 null，返回true

n 如果运算数是 NaN，返回true

n 如果运算数是 undefined，发生错误

l 逻辑AND运算会

运算数 1

运算数 2

结果

true

false

true

false

l 逻辑OR运算符

运算数 1

运算数 2

结果

true

false

true

false

true

false

Ø 加性运算符

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

-Infinity 加 -Infinity，结果为-Infinity。

Infinity 加 -Infinity，结果为NaN。

+0 加 +0，结果为+0。

-0 加 +0，结果为+0。

-0 加 -0，结果为-0。

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

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

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

Ø 关系运算符

关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。

l 常规比较

n 如果是数学，那么比较与我们在java中操作一样。

n 如果是两个字符串使用关系运算符操作，那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序，在前的字母比在后的小，所有的小写字母都大于大写字母。

l 比较数字或字符串

n 如果两个数字字符串比较，例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.

n 如果一个是数字一个是字符串，那么会将字符串转换成数字在进行比较。

Ø 等性运算符

ECMAScript提供了两套等性运算符：等号与非等号用来处理原始值，全等号与非全等号来处理对象。

执行类型转换的规则如下：

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

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

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

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

在比较时，该运算符还遵守下列规则：

· 值 null和 undefined相等。

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

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

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

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

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

Ø 三元运算符

在js中也存在三元运算符，与java中使用方式一样。例如:

var max = (num1 > num2) ? num1 :num2;

这个表达式描述的就是如果num1大于num2，那么max的值就是num1,返回之max的结果就是num2.

Ø 赋值运算符

简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量

每种主要的算术运算以及其他几个运算都有复合赋值运算符：

乘法/赋值（*=）

除法/赋值（/=）

取模/赋值（%=）

加法/赋值（+=）

减法/赋值（-=）

Ø 逗号运算符

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

var a=1,b=2,c=3;

Javascript基础语法-条件语句

Ø if语句

javascrip中的if语句，与我们在java中使用基本相同，例如:

if (i > 30) {

alert("大于 30");

}else {

alert("小于等于 30");

}

Ø switch语句

switch语句也与我们在jdk1.7中使用相同，也就是说，它可以直接判断字符串类型

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

}

Javascript基础语法-循环语句

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

【笔试面试题】

Javascript中2==”2”与2===”2”的结果是什么，为什么？

【重点总结】

Javascript中的数据类型

Javascript中的运算符

Javascript中的控制语句

【总结】

对于css我们只需要掌握其基本语法结构与选择器，其它的做为了解，在开发中可以看懂css代码，并完成简单的修改就可以。

Javascript在现在的web开发中应用越来越多，对于javascript希望大家回以重视，希望大家可以将所有的javascript内容掌握。

【课后作业】

问答题

什么是css,作用是什么？

怎样在html中导入css?

Css的语法结构是什么样的？

Css选择器的作用是什么，并例举出三种常用的css选择器

什么是javascript，作用是什么？

怎样在html中导入javascript?

Javascript中怎样声明一个变量？

简述javascript中的数据类型

操作题

完成案例1-显示商品信息

完成案例2-注册窗口

阅读全文

0 0