冯东昆

HTML、CSS、JavaScript学习总结

学习总结

HTML

网站开发的主要原则是：

– 用标签元素HTML描述网页的内容结构；

– 用CSS描述网页的排版布局；

– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序

HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言。

Html是通过标签来定义的语言，代码都是由标签所组成。Html代码不用区分大小写。

Html代码由开始结束。里面由头部分和体部分两部分组成。

标签：是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”

在元素的起始标签中，可以包含“属性”来表示元素的其他特性

<标签名属性名='属性值'> 数据内容

<标签名属性名='属性值' />

多个属性时：用空格分开

Html 的命名：文件的扩展名要以.html或.html结束。

Ø 文件名中只可由英文字母、数字或下划线组成。

Ø 文件名中不要包含特殊符号，比如空格、$等

所有标记都要用尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。

任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是、
。因此，不同的标记间用回车键换行再编写是个不错的习惯。

@ title元素：文件标题声明

@ link元素和style元素常用于CSS

@ script元素用于脚本

@ meta元素元信息

@ 超链接网址基准参考点

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

@ body元素是html文件的主体元素，它包含所有要在网页上显示的各种元素。

设置页面背景:bgcolor

设置背景图片:background

设计正文颜色:text

设置页面边距:topmargin、leftmargin、

rightmargin、bottomnargin

设置显示内容与浏览器的距离

添加空格——

… 粗. … 斜 … 删 … 下划_… 下标 ^… 上标

…

地址自动倾斜

. … 大字

… 加强语气 ( 加粗

... 加强语气 ( 倾斜

段落缩进

设置水平线

向中对齐

格式：
…

插入定义列表


名称


说明


说明


说明


名称


说明


说明


说明

 …

插入无序列表


项目名称
…


项目名称
…


项目名称
…

 …

：符号标签（○●■）

type属性：disc ● ( 默认) circle ○ square ■

插入有序列表


项目名称
…


项目名称
…


项目名称
…

 …

超链接概述

链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接来实现的，在HTML文件中，超链接的建立是很简单的，但是掌握超链接的原理对网页的制作是至关重要的。在学习超链接之前，需要先了解一下“URL”，所谓URL（Uniform Resource Locator）指统一资源定位符，通常包括三个部分：协议代码、主机地址、具体的文件名

超链接标签的使用

创建超链接的标签为和，使用格式如下：

链接名称

_parent

在上一级窗口中打开，一般使用分桢的框架页会经常使用

_blank

在新窗口打开

_self

在同一个框架或窗口中打开，该项一般不用设置

_top

在浏览器的整个窗口中打开，忽略任何框架

链接路径

– 绝对路径：包含了标识Internet上的文件所需要的所有信息，包括完整的协议名称、主机名称、文件夹名称和文件名称。格式为：

通信协议://服务器地址:端口号/文件位置…/文件名

http://ww.sina.com.cn/web/index.html

相对路径：是以当前文件所在路径为起点，进行相对文件的查找。

链接到同一文档的某个部分

• 锚记标签用于使用户“跳”到文档的某个部分

• HTML 的 NAME 属性用于创建锚标记

主题名称

主题名称

为达到这种跳转效果，请在 HREF 参数中使用该标记

B 发送E-mail：在html页面中，可以建立e-mail链接，当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件，格式为：

mailto:e-mail地址?subject=邮件主题”>
描述文字

联系我

LINK 颜色的设置

• 基本格式：

• link 超链接尚被选中的文字

• alink 超链接点选但未被放开的颜色

• vlink 超链接已被点选过的颜色

插入并格式化图像

B 标签：用于在网页中插入图像内容。

– src属性：用于设置图像文件的相对或绝对URL地址。

– 共三种类型：GIF：是图形和图片的最佳格式，适用于透明或动画图形。

– JPG或JPEG：更适合存放照片

– PNG：拥有许多JPEG与GIF的共同优点，所以最近越来越流行。

通过设置width属性和height属性可以控制图像的显示宽度和高度，他们的长度单位可是百分比，也可是像素。

注意点:边框的问题.

可通过border=“0”去掉边框

属性名称 属性值 说明

Align left 图像靠左文字靠右

Right 图像靠右文字靠左

Top 文字往上靠

middle 文字靠中

bottom 文字靠下

空隙设置

Vspace 垂直上下两端和物件距离

Hspace 水平左右两端和物件距离

设置图像映射

图像地图：

map标签要和img标签联合使用。

语法说明

标记表示插入图像文件，src表示插入图像的路径；

Ø 标记表示插入图像映射；

Ø 标记表示图像映射区域；

Ø rhape属性表示映射区域形状：

 — “rect”表示矩形区域；

 — “circle”表示椭圆形区域；

 — “poly”表示多边形区域；

Ø cords表示感应区域的坐标

创建表格

 姓名

 性别

 分数

 姓名

 性别

 分数 表示行或列标题，粗体显示

.......

性别居中

COLSPAN=“n” 属性表示跨多少列

ROWSPAN=“n” 属性表示跨多少行

表格的颜色设置：

　　表格的背景色颜色值>

　　行的背景色　颜色值>

 列的背景色 颜色值>

表格的尺寸设置：

　　

• frame常见属性

 规定表格周围的哪一侧的边框是可见的。

• rules常见属性

 规定水平或垂直的分界线。

 注释：必须与 "border" 属性配合使用！

定义表格列的分组。通过此元素，您可以对列进行组合以便进行格式化。

Span:表格的直列数，而不是第几列。

定义某个表格中针对一个或多个列的属性值。您只能在表格或 colgroup 中使用此属性。


 代表第1列
 代表第2，3 两列

….
单元格间距，边距
表格嵌套
在HTML文件中，第一个

标记表示插入第一表格，第二个
标记插入在标记之间，表示在单元格中插入表格，也就是嵌套表格。
框架标签
框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页。
所有的框架标签要放在一个HTML文档中，HTML页面的文档体标签被框架集标签所取代，然后通过的子窗口标签定义每一个子窗口和子窗口的页面属性。
B 标签

 框架的基本结构<title> </head> <frameset> <frame> <frame> … </frameset> </html> <frameset cols=“框架窗口宽度,框架窗口宽度，…”> </frameset> 还可设置的属性包括： frameborder：是否显示框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显示，取值为0或no边框将会隐藏。 framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位） bordercolor：可设置边框线颜色。 scrolling：设置框架是否显示滚动条。取值为yes、no或auto。yes表示滚动条一直显示；no表示无论什么情况都不显示滚动条；auto是系统的默认值，它是根据内容来调整的，当页面长度超过浏览器窗口的范围时就会自动显示滚动条。 B <noframes>标签 如果遇到不支持框架结构的浏览器，此时就需要用到该标签来设置替换的内容，并告诉浏览者其浏览器无法打开框架页面。 <a href=“right1.html” target=“mainFrame”>新闻中心</a> 使用iframe进行页面内的页面嵌套 可以定义嵌套页面的大小、位置等 用法： <iframe name=“ifra1” scr=“abc.htm” border=“1”/> 可以通过name属性将链接的显示目标定位到 iframe框架内。 • <bgsound> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。 如下 <bgsound src="your.mid" autostart=true loop=infinite> • src="your.mid" 设定 midi 档案及路径，可以是相对或绝对 • autostart=true 是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。 • loop=infinite 是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。 • <EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支援。其参数设定多。如下 • <EMBED src="your.mid" autostart="true" loop="true" hidden="true"> • src="your.mid" 设定 midi 档案及路径，可以是相对或绝对 • autostart=true 是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。 • loop="true" 是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。 • HIDDEN="true" 是否完全隐藏控制画面，true 为是，no 为否 (内定)。 • STARTTIME="分:秒" 设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 • VOLUME="0-100" 设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。 • WIDTH="整数" 和 HIGH="整数" 设定控制画面的宽度和高度。(若 HIDDEN="no") ALIGN="center" 设定控制画面和旁边文字的对　方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。 controls="smallconsole" 设定控制画面的外貌。预设值是 console。 console 一般正常的面板　　 smallconsole 较小的面板　　 playbutton 只显示播放按钮　　 pausecutton 只显示暂停按钮　　 stopbutton 只显示停止按钮　　 volumelever 只显示音量调整钮 <Marquee>滚动的文字</Marquee> • Direction=”滚动方向”left[左]right[右]up[上]down[下] • Behavior=”滚动方式” scroll[一圈一圈绕着走] slide[只走一次] alternate[来回的走] • Loop=”滚动的循环次数” 若未指定则循环不止(loop=”infinite”) • Bgcolor=”背底颜色”Width=“宽度”Height=“高度” • onMouseOver=”this.stop()”onMouserOut=”this.start()” • Scrollamount=”速度” 数值越大速度越快 • Scrolldelay=“延时”（走一步，停一停） 表单Form • <form action=处理表单信息的服务器端应用程序 method=处理表单数据的方法(POST/GET) name=表单名称 target=打开窗口的方式> • 表单元素 • </form 文本框 • <input name=“文本框名称” type=“text” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”> – 密码框 • <input name=“文本框名称” type=“password” value=“初始值” size=“显示字符数” maxlength=“最多容纳字符数”> – 多行文本框 • <textarea name=“多行文本框名称” cols=“每行中的字符数” rows=“显示的行数”> • 初始内容 • </textarea> 单选框、复选框 – 单选框 • <input name=“单选框名称” type=“radio” value=“选择名称” checked(初始状态，如果为默认，则写checked；否则不写)> – 复选框 • <input name=“复选框名称” type=“checkbox” value=“选择名称” checked(初始状态，如果为选中，则写checked；否则不写)> 列表框 (A)、菜单式 • <select name=“列表框名称”> • <option selected(哪个为初始选择，就添加selected语句[只有一个]) value=“提交值”>列表1</option> • <option value=“提交值”>列表2</option> • <option value=“提交值”>列表3</option> • ... • </select> • (B)、列表式 • <select name=“列表框名称” size=“显示的行数” multiple(如果允许多选，则有该命令；否则没有此命令)> • <option selected(哪个为初始选择，就添加selected语句[可有多个，但没有意义]) value=“提交值”>列表1</option> • <option value=“提交值”>列表2</option> • <option value=“提交值”>列表3</option> • ... • </select> 下拉菜单 谁是 2002 年世界杯冠军？ <SELECT NAME =“myselect"> <OPTION SELECTED>西班牙</OPTION> <OPTION>法国</OPTION> <OPTION>巴西</OPTION> <OPTION>德国</OPTION> </SELECT> 按钮 • <input type=“按钮类型(reset、submit、button)” name=“按钮名称” value=“按钮显示文本”> – 隐藏域 • <input name=“名称” type=“hidden” value=“提交值”> – 浏览框 • <input name=“名称” type=“file” size=“显示字符长度” maxlength=“最大长度”> BUTTON（按钮） <INPUT name="button1" type="submit" value="提交"> <INPUT name="button2" type="reset" value="重置"> <INPUT name="button3" type="button" value="普通按钮"> <table> <tbody> <tr> <td valign="top" width="333" colspan="2" style="background:rgb(51,153,102)"> Type 属性： </td> </tr> <tr> <td valign="top"> submit： </td> <td valign="top"> 提交按钮 </td> </tr> <tr> <td valign="top"> reset： </td> <td valign="top"> 重置按钮 </td> </tr> <tr> <td valign="top"> button： </td> <td valign="top"> 普通按钮 </td> </tr> </tbody> </table> 文本框、按钮、单选按钮、复选框等都是输入元素。 <INPUT type=“?” name=“?” size=”?” value=“?” maxlength=“?” checked=“?”> Type 此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。 Name 此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。 Value 此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。 Size 此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。 Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。 Checked 此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。 <h1>CSS</h1> F CSS的基本概念 • 掌握样式表的语法规则 • 样式表的分类： – 行内样式表 – 内嵌样式表 – 外部样式表 • 掌握常用的样式 指定显示样式 ;"> F CSS基础 @ CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。 @ 样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。 @ 优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 属性 </td> <td valign="top" style="background:rgb(51,153,102)"> CSS名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top"> 颜色 </td> <td valign="top"> color </td> <td valign="top"> </td> </tr> <tr> <td valign="top" rowspan="3"> 文本属性 </td> <td valign="top"> font-size </td> <td valign="top"> 字体大小 </td> </tr> <tr> <td valign="top"> font-family </td> <td valign="top"> 字体 </td> </tr> <tr> <td valign="top"> text-align </td> <td valign="top"> 文本对齐 </td> </tr> <tr> <td valign="top" rowspan="3"> 边框属性 (用于表 单元素) </td> <td valign="top"> border-style </td> <td valign="top"> 边框样式 </td> </tr> <tr> <td valign="top"> border-width </td> <td valign="top"> 边框宽度 </td> </tr> <tr> <td valign="top"> border-color </td> <td valign="top"> 边框颜色 </td> </tr> <tr> <td valign="top" rowspan="5"> 定位属性(position) </td> <td valign="top"> top </td> <td valign="top"> 顶部边距（上边距） </td> </tr> <tr> <td valign="top"> left </td> <td valign="top"> 左边距 </td> </tr> <tr> <td valign="top"> width </td> <td valign="top"> 宽度 </td> </tr> <tr> <td valign="top"> height </td> <td valign="top"> 高度 </td> </tr> <tr> <td valign="top"> z-index </td> <td valign="top"> z 轴索引号，用于层 </td> </tr> </tbody> </table> F 使用CSS @ CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。 @ 一系列的样式组成了“样式表”。 @ CSS的语法结构： 选择符{样式属性:取值;样式属性:取值;样式属性:取值;…} CSS的基本语法 样式和样式表 1．样式 样式是由成对的属性名和属性值以冒号“：”相间组成。 2．样式表 一系列的“样式”以分号“；”相间组成为“样式表”。 根据样式代码的位置，分为三类： q 行内样式 q 内嵌样式 q 外部样式 q 行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。 例如：<table style="color:red;margin-left:200px"> … </table> 注意：在使用行内样式的过程中，建议同学们在<head>标签中添加<meta>标签，添加的<meta>标签如下： <head> <meta http-equiv="Content-Style-Type" content="text/css"> </head> 内联的样式比其他方法更加灵活。要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。使用内联CSS的网页制作者必须将text/css作为Content-Style-Type HTTP页眉. @ 内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。 例如，<head> <style type=“text/css”> td{font-size:9pt;color:red} .font105{font-size:10.5pt;color:blue} </style> </head> 注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示 内嵌样式-2 选择器 选择器分为： • HTML 选择器 • CLASS 类选择器 • ID 选择器 • 样式选择器 • HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。 • 类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。 • ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头， • 通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。 • 伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。 Id的优先级高于class 外部样式 @ 外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。 例如，<head> <link href="mystyle.css" rel="stylesheet" type=“text/css”> </head> 优点：一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。 使用LINK（链接）标签，语法： <HEAD> <LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” > </HEAD> 可以连接多个html应用到html里面 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： • 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css • 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 • 某张网页内，部分内容”与众不同“，采用行内样式 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示； CSS中的注释 样式规则的注释 样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间 常用的样式属性 • 1．文字 • 2．背景 • 3．边框线 • 4．高度和宽度 • 5．间距和边距 • 6．列表 • 7．位置和布局 指定“对象”来定义样式表的语法规则如下： 对象1, 对象2 …… { 样式表 } 下级对象 用于某一种元素中的下级元素，定义时两元素名之间用空格相间。 P em{color:blue;} 所以元素对象 *｛color：blue; CSS文字与文本 设置字体——font-family 设置字号——font-size 设置字体样式——font-style 设置字体加粗——font-weight 设置字体变体——font-variant 组合设置字体属性——font 文本的精细排版 调整字符间距——letter-spacing 调整单词间距——word-spacing 添加文字修饰——text-decoration 设置文本排列方式——text-align 设置段落缩进——text-indent 调整行高——line-height 转换英文大小写——text-transform 颜色和背景 设置颜色——color 设置背景颜色——background-color 插入背景图片——background-image 插入背景附件——background-attachment 设置重复背景图片——background-repeat 设置背景图片位置——background-position 设置文本排列方式——text-align • 语法说明 该语法中的4个属性值可以任意选择其中一个。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；justify代表两端对齐方式。 转换英文大小写——text-transform 插入背景图片——background-image 基本语法 background-image:url|none URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。第6章有绝对路径和相对路径的详细内容讲解。图片的格式一般以GIF、JPG和PNG格式为主。 Ø none是一个默认值，表示没有背景图片 插入背景附件——background-attachment 基本语法 background-attachment:scroll|fixed Ø scroll表示背景图片是随着滚动条的移动而移动。是浏览器的默认值。 Ø fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。 设置重复背景图片——background-repeat 基本语法 background-repeat:repeat|repeat-x|repeat-y|no-repeat 设置背景图片位置——background-position • 基本语法 background-position：百分比|长度|关键字 利用百分比和长度设置图片位置时，都要指定两个值，并且这两个值要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。 Ø 关键字在水平方向的主要有left、center、right，表示居左、居中和居右。关键字在垂直方向的主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。 Ø使用百分比和关键字对比说明background-position属性的属性值。 边框和边距 设计边框样式——border-style 调整边框宽度——border-width 设置边框颜色——border-color 设置边框属性——border 边距——margin-top /margin-bottom /margin-left/ margin-right/margin 填充——padding-top／padding- bottom /padding-left / padding- right /padding 设计边框样式——border-style 基本语法 border-style:样式取值 border-top-style:样式取值 border-bottom-style:样式取值 border-left-style:样式取值 border-right-style:样式取值 边框样式属性中border-style是一个复合属性，其他4个都是单个边框的样式属性，只能取一个值，而复合属性border-style可以同时取一到4个值。下面分别说明border-style属性的4个取值方法： — 取一个值：四条边框均使用这一个值。e:s — 取两个值：上下边框使用第一个值，左右边框使用第二个值，两个值一定要用空格隔开。 — 取三个值：上边框使用第一个值，左右边框使用第二个值，下边框使用第三个值，取值之间要用空格隔开。 — 取4个值：四条边框按照上、右、下、左的顺序来调用取值。取值之间也要用空格隔开。 调整边框宽度——border-width 基本语法 border-width:关键字|长度 border-top-width:关键字|长度 border-bottom-width:关键字|长度 border-right-width:关键字|长度 border-left-width:关键字|长度 边框宽度属性基本语法中的关键字说明 Ø 长度包括长度值和长度单位，不可以使用负数。长度单位可以使用绝对单位也可使用相对单位，如px、pt、cm等。 Ø 基本语法中边框宽度属性border-width是一个复合属性，可以同时设置四条边框的宽度。具体使用方法和边框样式的复合属性border-style是一样的，可以参照上一节关于border-style的讲解 设置边框颜色——border-color 基本语法 border-color:颜色关键字|RGB值 border-top-color:颜色关键字|RGB值 border-bottom-color:颜色关键字|RGB值 border-left-color:颜色关键字|RGB值 border-right-color: 颜色关键字|RGB值 颜色关键字可使用常用的16个关键字 Ø RGB值使用十六进制的RGB值和RGB函数值都行。 Ø 在使用边框颜色复合属性border-color时，如果只设置1种颜色，则四条边框的颜色一样；设置2种颜色，则边框的上下为一个颜色，左右为另一个颜色；设置3种颜色，边框的颜色顺序为上、左右、下；设置4中颜色，边框的颜色顺序为上、右、下、左。 设置边框属性——border 基本语法 border:<边框宽度>||<边框样式>||<边框颜色> border-top: <上边框宽度>||<上边框样式>||<上边框颜色> border-right: <右边框宽度>||<右边框样式>||<右边框颜色> border-bottom: <下边框宽度>||<下边框样式>||<下边框颜色> border-left: <左边框宽度>||<左边框样式>||<左边框颜色> 基本语法中每一个属性都是一个复合属性，都可以同时设置边框的宽度、样式和颜色属性。但是在用该语法定义边框属性时，每个属性间必须用空格隔开。 Ø 这五个属性语法中，只有border可以同时设置四条边框的属性。其他的只能设置单边框的属性。 边距——margin-top /margin-bottom /margin-left/ margin-right/margin • 基本语法 margin-top:长度|百分比|auto margin-bottom: 长度|百分比|auto margin-left: 长度|百分比|auto margin-left: 长度|百分比|auto margin: 长度|百分比|auto 长度包括长度值和长度单位，长度单位可以使用前面多次提到的绝对单位或相对单位。 Ø 百分比是相对于上级元素宽度的百分比，允许使用负数。 Ø auto为自动提取边距值，是默认值。 Ø margin复合属性和其他复合属性的设置方法是一样的，也可以取1到4个值来同时设置边框周围的四个边距。 填充——padding-top／padding- bottom /padding-left / padding- right /padding 基本语法 padding-top:长度|百分比 padding-bottom: 长度|百分比 padding-left: 长度|百分比 padding-right: 长度|百分比 padding: 长度|百分比 长度包括长度值和长度单位。 Ø 百分比是相对于上级元素宽度的百分比，不允许使用负数。 Ø 填充复合属性padding的取值方法，可以参照边框样式border-style的取值方法。 列表 设计列表样式——list-style-type 添加列表图像——list-style-image 调整列表位置——list-style-position 设计列表样式——list-style-type 基本语法 list-style-type:<属性值> 添加列表图像——list-style-image 基本语法 list-style-image:none|URL none表示不使用图像符号。 Ø URL指定图像的名称或者路径。 调整列表位置——list-style-position 基本语法 list-style-position:outside|inside outside表示列表符号不向内缩进，是列表的默认属性值。 Ø inside表示列表符号向内缩进 定位 定位方式——position 设置位置——top、bottom、right、left 浮动——float 清除——clear 定位方式——position 基本语法 position:static|absolute|relative static表示为静态定位，是默认设置。 Ø absolute表示绝对定位，与下一节的位置属性top、bottom、right、left等结合使用可实现对元素的绝对定位。 Ø relative表示相对定位，对象不可层叠，但也要依据top、bottom、right、left等属性来设置元素的具体偏移位置 设置位置——top、bottom、right、left • 基本语法 top:auto|长度值|百分比 bottom: auto|长度值|百分比 left: auto|长度值|百分比 right: auto|长度值|百分比 浮动——float 基本语法 float:left|right|none Ø left表示浮动元素在左边，是居左对齐的。 Ø right表示浮动元素在右边，是居右对齐的。 Ø none表示不浮动，是默认值 清除——clear 基本语法 clear:left|right|both|none 清除——clear 语法说明 Ø left表示不允许在某元素的左边有浮动元素。 Ø right表示不允许在某元素的右边有浮动元素。 Ø both表示在某元素左右两边都不允许有浮动元素。 Ø none表示在某元素左右两边都允许有浮动元素 层的应用 图层的创建——<div> 创建嵌套图层 层的属性设置 图层的创建——<div> 基本语法 <body> <div id="Layer1" style="position:absolute; left:29px; top:12px; width:165px; height:104px;"></div> </body> 在进行层的定义时，需要将层的样式同时定义，否则在网页中不会显示出来。 创建嵌套图层 基本语法 <body> <div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div> <div id="Layer1" style="position:absolute; z-index:1; left:29px; top:12px; width:165px; height:104px;"></div> </body> 图层的嵌套只要插入多个成对的<div></div>，设置好的层的样式属性就可以完成层的嵌套。 层的属性设置 • • • 图层定义常见属性 层的属性设置 基本语法 <body> <div id="Layer1" style="position:absolute; left:29px; z-index:1; top:12px; width:165px; height:104px;"></div> </body> position属性将对象从文档流中拖出，进行绝对定位； Ø left、top属性进行左边距和顶端间距的设置； Ø width、height属性进行宽度和高度设置； Ø 层叠通过z-index属性定义。 CSS层 设置层空间——z-index 设置层裁切——clip 设置层大小—度来—width、height 设置层溢出——overflow 设置层可见——visibility 设置层空间——z-index 基本语法 z-index:auto|数字 auto表示子层会按照父层的属性显示。 Ø 数字必须是无单位的整数或负数，但一般情况下都取正整数，所以z-index属性值为1的层位于最下层。 设置层裁切——clip 基本语法 clip:rect{<上>|<右>|<下>|<左>} |auto auto表示不裁切。 Ø Ø rect的4个坐标值表示所裁切矩形的4个顶点位置，其中以网页左上角为坐标（0，0），而上、右、下、左这4个坐标值则是以左上角为参照点计算的。而且任意一个坐标值都可由auto来代替，表示该边不裁切。 设置层大小—width、height • 基本语法 • width:auto|长度 • height:auto|长度 • width表示的是宽度，而height表示的是高度。 • Ø auto表示自动设置长度。 • Ø 长度包括长度值和单位。 • Ø 长度也可使用相对值中的百分比。 • 对于每个层在设置层大小时，其中只能设置宽度和高度中的一个值，另一个值则自动获得。如果两个值都设置了，则还要同时设置层溢出属性overflow。 设置层溢出——overflow 基本语法 overflow: visible/hidden/scroll/auto visible：扩大层的容纳范围，将所有内容都显示出来。 Ø hidden：隐藏超出范围的内容（超出范围的内容将被裁切掉）。 Ø scroll：表示一直显示滚动条。 Ø auto：当层内容超出了层的容纳范围时，则显示滚动条。 设置层可见——visibility 基本语法 • visibility:visible|hidden|inherit visible表示该层是可见的。 Ø Ø hidden表示该层被隐藏，是不可见的。 Ø inherit表示子层或子元素会继承父层或父元素的可见性，父级元素可见则子级元素也可见。 鼠标指针——cursor 基本语法 cursor:auto|关键字|URL（图像地址） auto表示根据对象元素的内容自动选择鼠标指针形状。 Ø URL（图像地址）表示选取自定义的图像作为鼠标指针的形状。 Ø 关键字共有16种，是系统预先定义好的鼠标指针形状，具体说明和形状见表20-2 <table> <tbody> <tr> <td valign="top" style="background:rgb(128,128,128)"> 属性 </td> <td valign="top" style="background:rgb(128,128,128)"> CSS名称 </td> <td valign="top" style="background:rgb(128,128,128)"> 说明 </td> </tr> <tr> <td valign="top" rowspan="4"> 边界属性 </td> <td valign="top"> margin-top </td> <td valign="top"> 设设置对象的上边距 </td> </tr> <tr> <td valign="top"> m margin -right </td> <td valign="top"> 设设置对象的右边距 </td> </tr> <tr> <td valign="top"> m margin -bottom </td> <td valign="top"> 设设置对象的下边距 </td> </tr> <tr> <td valign="top"> m margin -left </td> <td valign="top"> 设设置对象的左边距 </td> </tr> <tr> <td valign="top" rowspan="3"> 边框属性 </td> <td valign="top"> bbborder-style </td> <td valign="top"> 设设置边框的样式 </td> </tr> <tr> <td valign="top"> boborder-width </td> <td valign="top"> 设设置边框的宽度 </td> </tr> <tr> <td valign="top"> boborder-color </td> <td valign="top"> 设设置边框的颜色 </td> </tr> <tr> <td valign="top" rowspan="4"> 填充属性 </td> <td valign="top"> papadding-top </td> <td valign="top"> 设设置内容与上边框之间的距离 </td> </tr> <tr> <td valign="top"> papadding-right </td> <td valign="top"> 设设置内容与右边框之间的距离 </td> </tr> <tr> <td valign="top"> papadding-bottom </td> <td valign="top"> 设设置内容与下边框之间的距离 </td> </tr> <tr> <td valign="top"> papadding-left </td> <td valign="top"> 设设置内容与左边框之间的距离 </td> </tr> </tbody> </table> 伪类 • 伪类是一种特殊的类选择符，用来指定链接或者与其相关的选择符的状态；能被支持CSS的浏览器自动所识别的特殊选择符， • 伪类与选择符间用冒号相连，在CSS中，伪类对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类有四种常用形式是本章要讲解的，内容如下： • “:link”用在为访问的链接上 • “:hover”用于鼠标光标置于其上的链接 • “:active”用于获得焦点（如“被单击”）的链接上 • “:visited”用在已经访问过的链接上 • 盒子在标准流中的定位原则 • 实验1——行内元素之间的水平margin span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } • 盒子在标准流中的定位原则 – 实验2——块级元素之间的竖直margin <body> <div style="margin-bottom:50px;">块元素1</div> <div style="margin-top:30px;">块元素2</div> </body> CSS+Div 应用实例 布局 • 流体浮动布局 • 固定浮动布局 • 固定定位布局 <h1>JavaScript</h1> • Javascript是一种由Netscape的LiveScript发展而来的；是写在HTML文件中的一种基于对象和事件驱动并具有安全性能的脚本语言；区分大小写的客户端脚本语言。 • 当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。 • 提供了数据验证的基本功能。 • JS是基于对象，Java是面向对象。 • JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 • JS是弱类型，Java是强类型。 • JavaScript 是写在HTML文档中的一种基于对象（Object）和事件驱动（EventDriven)、并具有安全性能的脚本语言。 • 当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。 • JavaScript的特点 • 解释性：由浏览器直接解释执行 • 用于客户端 • 安全性:不允许直接访问本地硬盘 • 简单易用：脚本式语言最大的优点是易学易用，是一种轻量级的程序语言 • 动态性:他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的。 • 跨平台性:只要是可以解释Js的浏览器都可以执行，和操作系统无关 JavaScript的局限性：浏览器有很多种，每种对JavaScript的支持程度是不一样的，效果会有一定的差距。 • JavaScript的作用 – 校验用户输入的内容：用户输入内容的校验常分为两种 • 格式性校验：JavaScript • 功能性校验 – 有效地组织网页内容 – 动态地显示网页内容：时钟显示等 – 动画显示 • 编写JavaScript脚本：可以使用任何一种文字编辑器来编写,我们使用Dreamweaver、EditPlus、UE等。 • 执行：与HTML文档配合，将其插入到HTML文档中，然后通过浏览器执行HTML文档即可。浏览器可以是IE、firefox等。 – 使用 <script> 标签将语句嵌入文档 <html> <head> <script type=”text/javascript” > function showAlert() { alert(“web“)；} </script> </head> <body > … …</body> </html> 当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展） 注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。 – 将 JavaScript 源文件链接到 HTML 文档中 <html> <head> <script type=”text/javascript” src=“common.js“></script> </head> <body >web程序设计</body> </html> common.js文件内容 function showAlert（）{ alert（“web程序设计“）； } – 事件跟随式 <html> <head> </head> <body οnlοad=”window.alert(‘hello web’);”> <a href="javascript:alert(new Date());">abc</a> <input type=button value=test οnclick="alert(new Date());"> </body> </html> • 需注意： – JavaScript程序内容必须置于<script> </script>标签中，type=“text/javascript”用于区别其他脚本程序语言。 – 对于不支持javascript程序的浏览器，标记之间的内容就会被隐藏起来，否则就会被当做html的内容显示出来，而对于支持javascript程序的浏览器，这对标签不起任何作用。 – Javascript程序对大小写字母是敏感的，即在同一个程序语句中如果使用大写或小写字母将代表不同的意义。 – 使用注释/*多行注释*/ //单行注释 – Javascript程序在html文件中的位置没有严格的规定，但根据Javascript程序的功能和作用，一般将其置于3种位置： • 在html<body>标记中的任何位置。如果所编写的Javascript程序用于输出网页内容的，应该将Javascript程序置于html文件中需要显示该内容的位置。 • 在html<head>标记。如果所编写的Javascript程序需要在某一个html文件中多次使用，那就应该编写Javascript函数，并将函数置于html文件的<head>标记中。 • 在一个单独的js文件中。如果编写的Javascript程序需要在多个html文件中使用，或Javascript程序内容很长时。 数据类型 • JavaScript主要包括3种数据类型：简单数据类型、特殊数据类型、复合数据类型。 • 简单数据类型：数值型、字符型、布尔型 • 复合数据类型：对象、数组、函数 • 特殊数据类型：null、undefined 转义字符 <table> <tbody> <tr> <td valign="center" style="background:rgb(51,153,102)"> 字符 </td> <td valign="center" style="background:rgb(51,153,102)"> 说明 </td> <td valign="center" style="background:rgb(51,153,102)"> 示例 </td> </tr> <tr> <td valign="center" style="background:rgb(255,255,255)"> \b </td> <td valign="center" style="background:rgb(255,255,255)"> 退格符 </td> <td valign="center" style="background:rgb(255,255,255)"> alert(“这是第一句 \b 这是第二句”) </td> </tr> <tr> <td valign="center" style="background:rgb(255,255,255)"> \f </td> <td valign="center" style="background:rgb(255,255,255)"> 换页符 </td> <td valign="center" style="background:rgb(255,255,255)"> alert(“这是第一句\f 这是第二句”) </td> </tr> <tr> <td valign="center" style="background:rgb(255,255,255)"> \n </td> <td valign="center" style="background:rgb(255,255,255)"> 换行符 </td> <td valign="center" style="background:rgb(255,255,255)"> alert(“这是第一句\n 这是第二句”) </td> </tr> <tr> <td valign="center" style="background:rgb(255,255,255)"> \r </td> <td valign="center" style="background:rgb(255,255,255)"> 回车符 </td> <td valign="center" style="background:rgb(255,255,255)"> alert(“这是第一句\r 这是第二句”) </td> </tr> <tr> <td valign="center" style="background:rgb(255,255,255)"> \t </td> <td valign="center" style="background:rgb(255,255,255)"> 制表符 </td> <td valign="center" style="background:rgb(255,255,255)"> alert(“这是第一句\t 这是第二句”) </td> </tr> </tbody> </table> • 常量：不能改变的数据。可以为整型、逻辑型、字符串型等。 • 变量：在计算机内存中暂时保存数据的地方。用关键字var声明或用赋值的形式。var i；i=10；var count=10；var i，j； • 变量命名规则 – 第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）; – 后续字符可以是字母、数字、下划线或美元符； – 变量名称不能是保留字； – 字符大小写敏感； • 变量可以不声明直接使用 k=100；（k没定义就直接用） • 变量弱类型检查，且可随时改变数据类型 • 变量的数据类型及其转换 JavaScript声明变量时无需定义数据类型，因此，其变量又称为“无类型”变量，也就是说，声明后的变量名可以随时被赋值为任意类型的数据， JavaScript将会自动给予转换。 var count=1; … count=“the count of var is ”+count; • 用typeof()运算符返回表达式的数据类型var a=18; typeof(a) ---number “+”连接字符串 运算符和表达式 • 运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值 • 根据所执行的运算，运算符可分为以下类别： – 算术运算符 – 比较运算符 – 逻辑运算符 – 赋值运算符=、+=、-=、*=、/=、%= – 位运算符（很少用） – 算术运算符 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> <td valign="top" style="background:rgb(51,153,102)"> 示例 </td> <td valign="top" style="background:rgb(51,153,102)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> + </td> <td valign="top" style="background:rgb(255,255,255)"> 加 </td> <td valign="top" style="background:rgb(255,255,255)"> a = 5 + 8 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> - </td> <td valign="top" style="background:rgb(255,255,255)"> 减 </td> <td valign="top" style="background:rgb(255,255,255)"> a = 8 - 5 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> / </td> <td valign="top" style="background:rgb(255,255,255)"> 除 </td> <td valign="top" style="background:rgb(255,255,255)"> a = 20 / 5 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> * </td> <td valign="top" style="background:rgb(255,255,255)"> 乘 </td> <td valign="top" style="background:rgb(255,255,255)"> a = 5*19 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> % </td> <td valign="top" style="background:rgb(255,255,255)"> 取模－两个数相除的余数 </td> <td valign="top" style="background:rgb(255,255,255)"> 10 % 3 = 1 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> ++ </td> <td valign="top" style="background:rgb(255,255,255)"> 一元自加。该运算符带一个操作数，将操作数的值加 1。返回的值取决于 ++ 运算符位于操作数的前面或是后面 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> <td valign="top" style="background:rgb(255,255,255)"> ++x将返回 x 自加运算后的值。 x++ 将返回 x 自加运算前的值 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> - - </td> <td valign="top" style="background:rgb(255,255,255)"> 一元自减。该运算符只带一个操作数。返回的值取决于 -- 运算符位于操作数的前面或是后面 </td> <td valign="top" style="background:rgb(255,255,255)"> --x 将返回 x 自减运算后的值。 x-- 将返回 x 自减运算前的值 </td> <td valign="top" style="background:rgb(255,255,255)"> </td> </tr> </tbody> </table> 比较运算符 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 运算符 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> <td valign="top" style="background:rgb(51,153,102)"> 示例 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> = = </td> <td valign="top" style="background:rgb(255,255,255)"> 等于。如果两个操作数相等，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> a = = b </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> != </td> <td valign="top" style="background:rgb(255,255,255)"> 不等于。如果两个操作数不相等，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> Var2 != 5 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> > </td> <td valign="top" style="background:rgb(255,255,255)"> 大于。如果左边的操作数大于右边的操作数，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> Var1 > var2 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> < </td> <td valign="top" style="background:rgb(255,255,255)"> 小于。如果左边的操作数小于右边的操作数，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> Var2 < var1 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> <= </td> <td valign="top" style="background:rgb(255,255,255)"> 小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> Var2 <= 4 Var2 <= var1 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> >= </td> <td valign="top" style="background:rgb(255,255,255)"> 大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。 </td> <td valign="top" style="background:rgb(255,255,255)"> Var1 >= 5 Var1 >= var2 </td> </tr> </tbody> </table> 逻辑运算符 <table> <tbody> <tr> <td valign="center" style="background:rgb(51,153,102)"> 运算符 </td> <td valign="center" style="background:rgb(51,153,102)"> 值 </td> <td valign="center" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> 与 ( &&) </td> <td valign="top" style="background:rgb(255,255,255)"> expr1 && expr2 </td> <td valign="top" style="background:rgb(255,255,255)"> 只有当 expr1 和 expr2 同为真时，才返回真。否则，返回假。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> 或 ( || ) </td> <td valign="top" style="background:rgb(255,255,255)"> expr1 || expr2 </td> <td valign="top" style="background:rgb(255,255,255)"> 如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> 非 (!) </td> <td valign="top" style="background:rgb(255,255,255)"> !expr </td> <td valign="top" style="background:rgb(255,255,255)"> 如果表达式为真，则返回假。如果为假，则返回真。 </td> </tr> </tbody> </table> 流程控制 • 所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求： – 顺序结构：一条接一条，自上而下 – 选择结构：判断给定条件，根据不同情况做不同处理 – 循环结构：多次重复执行同一系列命令 if 语句 语法： if(条件) { JavaScript代码; } switch 语句 语法 switch (表达式) { case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; ... default : JavaScript语句; } • 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件 • JavaScript 中声明变量：var 变量名 • “+”可以用于两个数相加，还可以用于连接字符串 • parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数 • 运算符号分为算术运算符、比较运算符、逻辑运算符 • 条件语句分为if语句，if-else语句、if的嵌套 • 多分支语句switch根据表达式的值，进入不同的分支执行 循环 • for循环 • do-while • while for循环 var i; for (i=0; i<10; i++) { // 语句; } while和do－while循环 q while循环 while(循环条件) { //语句； } q do－while循环 do { //语句； }while(循环条件); • 函数实际上就是一段有名字的程序，这样，在整个程序的任何位置，只要使用该名字，就会执行由这段名字命名的程序。 内置函数 • eval 函数：用于计算字符串表达式的值 该函数可以对以字符串形式表示的任意有效的 JavaScript代码求值。eval() 函数有一个参数，该参数就是想要求值的代码。 var anExpression = "6 * 9 % 7"; var total = eval(anExpression); // 将变量 total 赋值为 5 isNaN 函数：用于验证参数是否为 NaN（非数字） isNaN(numValue) 返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。 如果值是 NaN，那么 isNaN 函数返回 true ，否则返回 false 自定义函数 • 定义函数： function 函数名([参数1,参数2，…]){ 语句; } • 调用函数： 函数调用一般和表单元素的事件一起使用，调用格式为：事件名＝“函数名” ; 参数是由函数的使用方传递到函数体中的变量，用于为函数中的操作提供相应的信息和数据。 • 参数的传递 – 按值传递：传递的只是原变量的一份拷贝，因此，如果在函数中改变了这个参数的值，原变量不会跟着改变，它将保留原有的值。 – 按地址传递：这时传递的是原变量的内存地址，即函数中的参数和原变量是同一个变量。因此在函数中改变了参数值，原变量也会随之改变。 • 参数的个数 当函数包含多个参数时，使用arguments.length可以得到使用该函数时输入的参数个数，而arguments包括了各参数内容。 • 注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。 • 说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。 其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。 例： function demo()//定义函数。 { alert(arguments.length); } demo(“hello”,123,true);//调用函数。 那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。 为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。 函数在调用时的其他写法： var show = demo();//show变量接收demo函数的返回值。 var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。 //那么该函数也可以通过show()的方式运行 变量的作用域 • JavaScript的变量分为全局变量和局部变量。全局变量是作用在全程序范围内的变量，它声明在函数体外；局部变量是定义在函数体内的变量，它仅仅在函数体内起作用。 例如， var errorMessage=“”; function checkRequired(v,label){ … … var msg=“请输入”+label; errorMessage=errorMessage+msg; } JavaScript 对象简介 • 内置对象 • 浏览器对象 • 自定义对象 • 注意：一个对象在被引用之前，必须存在。另外在JavaScript中对于对象属性和方法的引用，有两种情况： – 该对象为静态对象，表示在引用该对象的属性或方法时不需要为它创建实例； – 在引用该对象属性和方法时必须为它创建一个实例，叫做动态对象。 创建字符串有两种不同方法： • 使用 var 语句 var newstr = “这是我的字符串" • 创建 String 对象 var newstr = new String (“这是我的字符串") • 字符串相加：+或+= （字符串的连接） • 在字符串中使用特殊字符 “sdfg’ × “她说：’今天不出门’” √ 或使用转义字符 “她说：\”今天不出门\”” “\n” • 比较字符串是否相等 == != user==null || user==“” • 数字字符串和数值的相互转换 String相关函数 • 属性：length • 方法： – charAt(index): 返回指定索引位置处的字符。 – indexOf(subString[, startIndex]): 返回 String 对象内第一次出现子字符串的字符位置。 – substr(start [, length ]):返回一个从指定位置开始的指定长度的子字符串。 – substring(start, end):返回位于 String 对象中指定位置的子字符串。 – toLowerCase:返回一个字符串，该字符串中的字母被转换为小写字母。 Math 对象 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> </td> <td valign="top" style="background:rgb(51,153,102)"> 名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="center" rowspan="3"> 属性 </td> <td valign="top"> PI </td> <td valign="top"> ∏ 的值，约等于 3.1415 </td> </tr> <tr> <td valign="top"> LN10 </td> <td valign="top"> 10 的自然对数的值，约等于 2.302 </td> </tr> <tr> <td valign="top"> E </td> <td valign="top"> Euler 的常量的值，约等于 2.718。Euler 的常量用作自然对数的底数 </td> </tr> <tr> <td valign="center" rowspan="7"> </td> <td valign="top"> abs(y) </td> <td valign="top"> 返回 y 的绝对值 </td> </tr> <tr> <td valign="top"> sin (y) </td> <td valign="top"> 返回 y 的正弦，返回值以弧度为单位。 </td> </tr> <tr> <td valign="top"> cos (y) </td> <td valign="top"> 返回 y 的余弦，返回值以弧度为单位 </td> </tr> <tr> <td valign="top"> tan (y) </td> <td valign="top"> 返回 y 的正切，返回值以弧度为单位 </td> </tr> <tr> <td valign="top"> min (x, y) </td> <td valign="top"> 返回 x 和 y 两个数中较小的数 </td> </tr> <tr> <td valign="top"> max (x, y) </td> <td valign="top"> 返回 x 和 y 两个数中较大的数 </td> </tr> <tr> <td valign="top"> random </td> <td valign="top"> 返回0-1的随机数 </td> </tr> <tr> <td valign="center" rowspan="2"> 方法 </td> <td valign="top"> round (y) </td> <td valign="top"> 四舍五入取整 </td> </tr> <tr> <td valign="top"> sqrt (y) </td> <td valign="top"> 返回 y 的平方根 </td> </tr> </tbody> </table> 数学运算 Math对象 • Math.ceil(x)返回>=x的最小整数 • Math.floor(x) 返回<=x的最大整数 • Math.pow(x,y)返回x的y次方 • Math.random()返回0-1之间的随机小数 • Math.round(x)返回x的四舍五入的整数，特定精度的四舍五入见[1.1.htm] Date 对象 Data 方法的分组 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法分组 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setxxx </td> <td valign="top" style="background:rgb(255,255,255)"> 这些方法用于设置时间和日期值 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getxxx </td> <td valign="top" style="background:rgb(255,255,255)"> 这些方法用于获取时间和日期值 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Toxxx </td> <td valign="top" style="background:rgb(255,255,255)"> 这些方法用于从 Date 对象返回字符串值 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> parsexxx & UTCxx </td> <td valign="top" style="background:rgb(255,255,255)"> 这些方法用于解析字符串 </td> </tr> </tbody> </table> 用作 Date 方法的参数的整数 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 值 </td> <td valign="top" style="background:rgb(51,153,102)"> 整数 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Seconds 和 minutes </td> <td valign="top" style="background:rgb(255,255,255)"> 0 至 59 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Hours </td> <td valign="top" style="background:rgb(255,255,255)"> 0 至 23 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Day </td> <td valign="top" style="background:rgb(255,255,255)"> 0 至 6（星期几） </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Date </td> <td valign="top" style="background:rgb(255,255,255)"> 1 至 31（月份中的天数） </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Months </td> <td valign="top" style="background:rgb(255,255,255)"> 0 至 11（一月至十二月） </td> </tr> </tbody> </table> Set 方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setDate </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中月份中的天数，其值介于 1 至 31 之间。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setHours </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中的小时数，其值介于 0 至 23 之间。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setMinutes </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中的分钟数，其值介于 0 至 59 之间。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setSeconds </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中的秒数，其值介于 0 至 59 之间。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setTime </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中的时间值。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setMonth </td> <td valign="top" style="background:rgb(255,255,255)"> 设置 Date 对象中的月份，其值介于 1 至 12 之间。 </td> </tr> </tbody> </table> Get 方法： <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getDate </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中月份中的天数，其值介于 1 至 31 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getDay </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的星期几，其值介于 0 至 6 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getHours </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的小时数，其值介于 0 至 23 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getMinutes </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的分钟数，其值介于 0 至 59 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getSeconds </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的秒数，其值介于 0 至 59 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getMonth </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的月份，其值介于 0 至11 之间 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getFullYear </td> <td valign="top" style="background:rgb(255,255,255)"> 返回 Date 对象中的年份，其值为四位数 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> getTime </td> <td valign="top" style="background:rgb(255,255,255)"> 返回自某一时刻（1970 年 1 月 1 日）以来的毫秒数 </td> </tr> </tbody> </table> To 方法： <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> ToGMTString </td> <td valign="top" style="background:rgb(255,255,255)"> 使用格林尼治标准时间 (GMT) 数据格式将 Date 对象转换成字符串表示 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> ToLocaleString </td> <td valign="top" style="background:rgb(255,255,255)"> 使用当地时间格式将 Date 对象转换成字符串表示 </td> </tr> </tbody> </table> Parse 方法和 UTC 方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Date.parse (date string ) </td> <td valign="top" style="background:rgb(255,255,255)"> 用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> Date.UTC (year, month, day, hours, min., secs. ) </td> <td valign="top" style="background:rgb(255,255,255)"> Date 对象中自 1970 年 1 月 1 日以来的毫秒数 </td> </tr> </tbody> </table> 数组 • 声明数组 var 数组名 = new Array(数组大小); 例： var emp = new Array(3) • 添加元素 emp[0] = “AA"; emp[1] = “BB"; emp[2] = “CC"; 也可以声明数组并赋初值： 例： var emp=new Array(“AA”，“BB”，“CC”)； • 方案1 ： – var objArr = new Array();//创建一个空数组 – var objArr = new Array(10);//创建含10个元素的数组 – var objArr = new Array(“a”,”b”,”c”);//创建数组并初始化 • 方案2： – var objArr = [];//通方案1 – var objArr = [10];//包含一个数字10的元素，注意：和方案1不一样 – var objArr = [“a”,”b”,”c”];//通方案1 • 组合数组的创建 – var objArr = [[new Date()],”abc”,1234];//该数组包含三种数据类型，分别是对象类型,字符串类型和数字类型 • 如何引用元素：objArr[index]的形式来使用数组中的一个元素，index是元素在数组的索引，从0开始计算 • 数组的length属性：表示数组的长度 • 多维数组：js本身是没有多维数组概念，要通过组合数组来创建 – 二维数组举例1：创建2*6的二维数组 var arr = new Array(4); for(var i=0;i<4;i++) arr[i]= new Array(6); – 二维数组举例2：3*3 var arr = [[1,2,3],[4,5,6],[7,8,9]]; 常用属性 length ：返回数组中元素的个数 常用方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 方法 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> join </td> <td valign="top" style="background:rgb(255,255,255)"> 将数组中的元素组合成字符串 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> reverse </td> <td valign="top" style="background:rgb(255,255,255)"> 颠倒数组元素的顺序，使第一个元素成为最后一个，而最后一个元素成为第一个 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> sort </td> <td valign="top" style="background:rgb(255,255,255)"> 对数组元素进行排序 </td> </tr> </tbody> </table> 数组的方法 • objArr.toString():转换成字符串，并用,连接： – [1,2,3].toString() -> “1,2,3” – [“a”,”b”,”c”,[1,2,3,4]].toString() -> “a,b,c,1,2,3,4” • objArr.join(separator):将separator作为分隔符，将数组转换成字符串，当separator为逗号时等同于toString() • objArr.pop()返回数组最后一个元素值，注意：这里同时会将该元素从数据中清除，即objArr.length 减1 • objArr.push(v1,v2,…):将参数添加到数组结尾： – [1,2,3,4].push(“a”,”b”) -> [1,2,3,4,”a”,”b”] • objArr.shift():移出数组第一个元素，并返回该值 • Array对象常用的属性是length，排序方法：sort • 循环语句分为：for 循环、while循环、do-while循环 • Eval( )函数可以计算某个计算表达式的值， isNaN( )函数可用于判断是否是一个数字 • String对象的indexOf( )方法用于查找子字符串 • Math对象的random( )方法可以产生0－1的随机数 • Date对象有setxxx( )方法用于设置日期和时间，getxxx( )方法用于获得日期和时间 Window 对象 • 窗口对象window是浏览器网页的文档对象模型结构中的最高级的对象，只要网页的html标记中包含有<body>或<frameset>标记，该网页就会包含一个窗口对象。 • window对象的常用属性和方法 属性 <table> <tbody> <tr> <td valign="top" style="background:rgb(101,155,104)"> 名称 </td> <td valign="top" style="background:rgb(101,155,104)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> document </td> <td valign="top" style="background:rgb(255,255,255)"> 表示给定浏览器窗口中的 HTML 文档。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> history </td> <td valign="top" style="background:rgb(255,255,255)"> 包含有关客户访问过的URL的信息。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> location </td> <td valign="top" style="background:rgb(255,255,255)"> 包含有关当前 URL 的信息。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> name </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索窗口或框架的名称。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> status </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索窗口底部的状态栏中的消息。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> screen </td> <td valign="top" style="background:rgb(255,255,255)"> 包含有关客户端的屏幕和显示性能的信息。 </td> </tr> </tbody> </table> 方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(101,155,104)"> 名称 </td> <td valign="top" style="background:rgb(101,155,104)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> alert (“m提示信息") </td> <td valign="top" style="background:rgb(255,255,255)"> 显示包含消息的对话框。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> confirm（“提示信息”） </td> <td valign="top" style="background:rgb(255,255,255)"> 显示一个确认对话框，包含一个确定取消按钮 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> prompt（”提示信息“） </td> <td valign="top" style="background:rgb(255,255,255)"> 弹出提示信息框 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> open ("url","name") </td> <td valign="top" style="background:rgb(255,255,255)"> 打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> close ( ) </td> <td valign="top" style="background:rgb(255,255,255)"> 关闭当前窗口 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> setTimeout(”函数”,毫秒数) </td> <td valign="top" style="background:rgb(255,255,255)"> 设置定时器：经过指定毫秒值后执行某个函数 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> clearTimeout(定时器对象) </td> <td valign="top" style="background:rgb(255,255,255)"> 取消setTimeout设置 </td> </tr> </tbody> </table> open（”打开窗口的url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意组合： height：窗口高度； width：窗口宽度； top：窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； toolbar：是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable：是否允许改变窗口大小，yes或1为允许 location：是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许； screen.width---显示器屏幕的宽度 screen.height---显示屏幕的高度 定时器函数setTimeout ()的用法： setTimeout（“调用的函数名”，间隔的毫秒数） 表示过多少毫秒，就调用某个函数来执行 清除某个定时器：clearTimeout()方法。 例如：var myclock＝setTimeout（”move( )”,500）; if (…) clearTimeout（myclock）;； 定时器的使用：实现延期执行或重复执行 • window对象提供了两种方法来实现定时器： – window. setTimeout(表达式[expression],延时时间[n]) – window. setInterval(表达式[expression],延时时间[n]) 注意：expression可以是用引号括起来的代码，也可以是一个函数名（不能带任何参数的函数） • 如何取消定时器： – 取消setTimeout：window.clearTimeout(id); – 取消setInterval:window.clearInterval(id); 屏幕（screen）对象 • 屏幕对象是JavaScript运行时自动产生的对象 • 屏幕对象常用属性 – height：返回显示屏幕的高度。 – width ：返回显示器屏幕的宽度。 – availHeight ：返回显示屏幕的高度 (除 Windows 任务栏之外)。 – availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。 – colorDepth：返回目标设备或缓冲器上的调色板的比特深度（每像素中用于颜色的位数，其值为1,4,8,15,16,24,32）。 • 网页可见区域宽：document.body.clientWidth • 网页可见区域高：document.body.clientHeight • 网页可见区域宽：document.body.offsetWidth (包括边线的宽) • 网页可见区域高：document.body.offsetHeight (包括边线的宽) • 网页正文全文宽：document.body.scrollWidth • 网页正文全文高：document.body.scrollHeight • 网页被卷去的高：document.body.scrollTop • 网页被卷去的左：document.body.scrollLeft • 网页正文部分上：window.screenTop • 网页正文部分左：window.screenLeft • 屏幕分辨率的高：window.screen.height • 屏幕分辨率的宽：window.screen.width • 屏幕可用工作区高度：window.screen.availHeight • 屏幕可用工作区宽度：window.screen.availWidth Location对象 • 处理地址栏信息：location对象 – Location对象是wodow对象的子对象，包含了窗口对象的网页地址内容，即URL。例如： • window.location=“http://www.sohu.com”;//跳转到页面 • window.loaction.href=“http://www.sohu.com”;//同上 • window.location.reload();//刷新页面 • Window.location.replace(url);//用url刷新当前网页 方法1：<a href=“javascript:window.open(‘http://www.yahoo.com’,’_self’)”> window.open() </a> 方法2：<a href=“javascript:location.href=‘http://www.yahoo.com’”> location.href </a> 方法3：<a href=“javascript:location. replace(‘http://www.yahoo.com’)”> location.replace() </a> Location 对象属性 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> host </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索位置或 URL 的主机名和端口号 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> hostname </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索位置或 URL 的主机名部分 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> href </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索完整的 URL 字符串 </td> </tr> </tbody> </table> 方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> assign("url") </td> <td valign="top" style="background:rgb(255,255,255)"> 加载 URL 指定的新的 HTML 文档。 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> reload() </td> <td valign="top" style="background:rgb(255,255,255)"> 重新加载当前页 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> replace("url") </td> <td valign="top" style="background:rgb(255,255,255)"> 通过加载 URL 指定的文档来替换当前文档 </td> </tr> </tbody> </table> 历史记录（history）对象 • 历史记录对象是窗口对象下的一个子对象。它实际上是一个对象数组，包含了一系列的用户访问过的url地址，用于浏览器工具栏中的“前进”和“后退”按钮。 • 常用属性和方法 – history.length：历史对象的个数 – history.back();显示浏览器历史列表中后退一个网址的网页 – history.go(n)或者history.go(网址)：显示浏览器的历史列表中第n个网址的网页，n>0 前进 n<0 后退 – history.forward()；//显示浏览器历史列表中前进一个网址的网页 Document对象 • document文档对象是window对象的一个主要部分，它包含了网页显示的各个元素对象。 – document.write(str);//输出一行 – document.writeln(str);//输出一行，并回车 常用属性 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> alinkColor </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索文档中所有活动链接的颜色 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> bgColor </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索 Document 对象的背景色 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> body </td> <td valign="top" style="background:rgb(255,255,255)"> 指定文档正文的开始和结束 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> linkColor </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索文档链接的颜色 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> location </td> <td valign="top" style="background:rgb(255,255,255)"> 包含关于当前 URL 的信息 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> title </td> <td valign="top" style="background:rgb(255,255,255)"> 包含文档的标题 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> url </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索当前文档的 URL </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> vlinkColor </td> <td valign="top" style="background:rgb(255,255,255)"> 设置或检索用户访问过的链接的颜色 </td> </tr> </tbody> </table> 常用方法 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 名称 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> clear ( ) </td> <td valign="top" style="background:rgb(255,255,255)"> 清除当前文档 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> close ( ) </td> <td valign="top" style="background:rgb(255,255,255)"> 关闭输出流并强制显示发送的数据 </td> </tr> <tr> <td valign="top" style="background:rgb(255,255,255)"> write ("text") </td> <td valign="top" style="background:rgb(255,255,255)"> 将文本写入文档 </td> </tr> </tbody> </table> • JavaScript 程序是事件驱动程序 • onFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反 • 浏览器对象是一个分层次的结构，window是顶层根对象 • 打开窗口使用window对象的open( )方法 • 设置定时器，使用window对象的setTimeout( )方法 • location对象的back( )和forward( )方法等同于前进、后退按钮 Form对象及其元素对象 • Form对象：是文档对象的一个主要元素。Form对象中包含有许多用于收集用户输入内容的元素对象，例如，文本框、按钮等，通过这些元素对象，form将用户输入的数据传递到服务器端进行处理。 • 引用form对象 – 使用form标记中的name属性值 document.form1 document.form2 – 使用forms数组对象 document.forms[0] document.forms[1] document.forms[“form1”] • Form对象的常用属性、方法和事件 表单的onsubmit事件。事件响应调用函数doSubmit()进行验证，根据函数的返回值决定是否提交 • Form中的元素对象 form中的元素对象一般都可以与html的标记一一对应。 • 引用form中的元素对象 – 通过元素的名称 document.form1.username – 通过form的元素数组对象的方法 document.form1.elements[0] document.form1.elements[“username”] JavaScript 事件处理程序 事件处理程序的基本语法是：事件名=" JavaScript 代码函数" <INPUT type=”BUTTON” … onClick=“alert(“单击我！”);”> <INPUT type=”BUTTON” … onMouseDown=“check( )”> 表示鼠标按下时，将调用执行函数check( ) 。 JavaScript 事件 <table> <tbody> <tr> <td valign="top" style="background:rgb(51,153,102)"> 事件名 </td> <td valign="top" style="background:rgb(51,153,102)"> 说明 </td> </tr> <tr> <td valign="top"> onClick </td> <td valign="top"> 鼠标单击 </td> </tr> <tr> <td valign="top"> onChange </td> <td valign="top"> 文本内容或下拉菜单中的选项发生改变 </td> </tr> <tr> <td valign="top"> onFocus </td> <td valign="top"> 获得焦点，表示文本框等获得鼠标光标。 </td> </tr> <tr> <td valign="top"> onBlur </td> <td valign="top"> 失去焦点，表示文本框等失去鼠标光标。 </td> </tr> <tr> <td valign="top"> onMouseOver </td> <td valign="top"> 鼠标悬停，即鼠标停留在图片等的上方 </td> </tr> <tr> <td valign="top"> onMouseOut </td> <td valign="top"> 鼠标移出，即离开图片等所在的区域 </td> </tr> <tr> <td valign="top"> onMouseMove </td> <td valign="top"> 鼠标移动，表示在<DIV>层等上方移动 </td> </tr> <tr> <td valign="top"> onLoad </td> <td valign="top"> 网页文档加载事件 </td> </tr> <tr> <td valign="top"> onSubmit </td> <td valign="top"> 表单提交事件 </td> </tr> <tr> <td valign="top"> onMouseDown </td> <td valign="top"> 鼠标按下 </td> </tr> <tr> <td valign="top"> onMouseUp </td> <td valign="top"> 鼠标弹起 </td> </tr> </tbody> </table> onFocus和onBlur 事件 文本框获得鼠标焦点时（onFocus）调用的函数： 清空卡号文本框 文本框失去鼠标焦点时（onBlur）调用的函数： 判断格式是否正确 focus( )方法 再次获得焦点，即鼠标 光标回到卡号文本框 onMouseOver="src='dog2.jpg'" 表示本图片的图片名称替换为dog2.jpg。 请注意： 由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。 文本框对象 • 文本框元素用于在表单中输入字、词或一系列数字 • 可以通过将 HTML 的 INPUT 标签中的 type 设置为“text”，以创建文本框元素 文本框对象 – 事件处理程序 <table> <tbody> <tr> <td valign="center" rowspan="6"> 文 本 框 </td> <td valign="center" rowspan="3"> 事件 </td> <td valign="top"> onBlur </td> <td valign="top"> 文本框失去焦点 </td> </tr> <tr> <td valign="top"> onChange </td> <td valign="top"> 文本框的值被修改 </td> </tr> <tr> <td valign="top"> onFocus </td> <td valign="top"> 光标进入文本框中 </td> </tr> <tr> <td valign="center" rowspan="2"> 方法 </td> <td valign="top"> focus( ) </td> <td valign="top"> 获得焦点，即获得鼠标光标 </td> </tr> <tr> <td valign="top"> select( ) </td> <td valign="top"> 选中文本内容，突出显示输入区域 </td> </tr> <tr> <td valign="center"> 属性 </td> <td valign="top"> readOnly </td> <td valign="top"> 只读，文本框中的内容不能修改 </td> </tr> </tbody> </table> onFocus事件调用的函数clearText（）清空帐号文本框中的内容 onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字 onChange事件调用的函数compute( )用来计算总价 命令按钮对象 命令按钮对象是网页中最常用的元素之一 <INPUT type="submit" name="button1" value="提交"> <INPUT type="reset" name="button2" value="重置"> <INPUT type="button" name="button3" value="计算"> 按钮 - 事件处理程序 <table> <tbody> <tr> <td valign="top" style="background:rgb(101,155,104)"> 表单元素 </td> <td valign="top" style="background:rgb(101,155,104)"> 事件处理程序 </td> <td valign="top" style="background:rgb(101,155,104)"> 说明 </td> </tr> <tr> <td valign="center" rowspan="2"> 命令按钮 </td> <td valign="center"> onSubmit </td> <td valign="top"> 表单提交事件，单击“提交”按钮时产生，此事件属于<FORM>元素，不属于提交按钮 </td> </tr> <tr> <td valign="center"> onClick </td> <td valign="top"> 按钮单击事件 </td> </tr> </tbody> </table> onSubmit事件处理代码： <FORM onSubmit=”return 调用函数名”>…</FORM> 如果函数返回true，则向远程服务器提交表单； 如果函数返回false，则取消提交。 复选框对象 • 当用户需要在选项列表中选择多项时，可以使用复选框对象 • 要创建复选框对象，请使用 <INPUT> 标签 复选框 - 事件处理程序 <table> <tbody> <tr> <td valign="top" rowspan="5"> 复选框 </td> <td valign="top" rowspan="3"> 事件 </td> <td valign="top"> onBlur </td> <td valign="top"> 复选框失去焦点 </td> </tr> <tr> <td valign="top"> onFocus </td> <td valign="top"> 复选框获得焦点 </td> </tr> <tr> <td valign="top"> onClick </td> <td valign="top"> 复选框被选定或取消选定 </td> </tr> <tr> <td valign="top" rowspan="2"> 属性 </td> <td valign="top"> checked </td> <td valign="top"> 复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中 </td> </tr> <tr> <td valign="top"> value </td> <td valign="top"> 设置或获取复选框的值 </td> </tr> </tbody> </table> <PRE>是为了原样显示字符串中的换行”\n”格式 修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox 使用数组和for循环大大简化代码 单选按钮对象 • 当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象 • 要创建单选按钮对象，请使用 <INPUT> 标签 单选按钮 - 事件和属性 <table> <tbody> <tr> <td valign="center" rowspan="5"> 单选按钮 </td> <td valign="center" rowspan="3"> 事件 </td> <td valign="center"> onBlur </td> <td valign="top"> 单选按钮失去焦点 </td> </tr> <tr> <td valign="center"> onFocus </td> <td valign="top"> 单选按钮获得焦点 </td> </tr> <tr> <td valign="center"> onClick </td> <td valign="top"> 单选按钮被选定或取消选定 </td> </tr> <tr> <td valign="center" rowspan="2"> 属性 </td> <td valign="center"> checked </td> <td valign="top"> 单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中 </td> </tr> <tr> <td valign="center"> value </td> <td valign="top"> 设置或获取单选按钮的值 </td> </tr> </tbody> </table> 下拉列表框 <SELECT name="myselect" > <OPTION>--请选择开户帐号的城市--</OPTION> <OPTION value="北京市">北京市</OPTION> <OPTION value="上海市">上海市</OPTION> <OPTION value="重庆市">重庆市</OPTION> <OPTION value="天津市">天津市</OPTION> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </SELECT> 下拉列表框-事件和属性 <table> <tbody> <tr> <td valign="top" rowspan="6"> 下拉列表框 </td> <td valign="center" rowspan="3"> 事件 </td> <td valign="center"> onBlur </td> <td valign="top"> 下拉列表框失去焦点 </td> </tr> <tr> <td valign="center"> onChange </td> <td valign="top"> 当选项发生改变时产生 </td> </tr> <tr> <td valign="center"> onFocus </td> <td valign="top"> 下拉列表框获得焦点 </td> </tr> <tr> <td valign="center" rowspan="3"> 属性 </td> <td valign="center"> value </td> <td valign="top"> 下拉列表框中，被选选项的值 </td> </tr> <tr> <td valign="center"> options </td> <td valign="top"> 所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推 </td> </tr> <tr> <td valign="center"> selectedIndex </td> <td valign="top"> 返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推 </td> </tr> </tbody> </table> 表单验证 • JavaScript 最常见的用法之一就是验证表单 • 对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法 • <SCRIPT LANGUAGE="JavaScript"> • function validate( ) • { • var f=document.reg_form; • if(f.uname.value=="") • { • alert("请输入姓名"); • f.uname.focus(); 检查姓名 • return false; • } • if (f.gender[0].checked==false && f.gender[1].checked==false) • { • alert("请指定性别"); • f.gender[0].focus(); • return false; 检查性别 • • } • if ((f.password.value.length < 6) || (f.password.value == "")) • { • alert("请输入至少 6 个字符的密码！"); • f.password.focus(); • return false; 检查密码 • } • q=f.email.value.indexOf("@"); • if (q==-1) • { • alert("请输入有效的电子邮件地址"); • f.email.focus(); • return false; 检查邮件地址 • } • <FORM name="reg_form" onSubmit="return validate()" action="submit.htm"> • • if (f.age.value<1 || f.age.value> 99 || isNaN(f.age.value)) • { • alert("请输入有效的年龄！"); • f.age.focus(); • return false; 检查年龄 • } • </SCRIPT> • • OnBlur、onChange 和 OnFocus 是一些与表单对象相关的事件处理程序 • 在浏览器窗口中，如果文本框获得焦点，则会调用 onFocus 事件处理程序 • 当对象失去焦点或光标退出对象时，将执行 onBlur 事件处理程序 • 当修改文本框内容或改写下拉列表框的选项时，则会调用 onChange 事件处理程序 • JavaScript的主要功能之一是用于表单验证 </div> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1275214577931403264"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML、CSS、JavaScript学习总结)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> 周bro <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835376127372259328.htm" title="《算法》四学习——1.1节" target="_blank">《算法》四学习——1.1节</a> 进阶的Farmer <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前言买了一本算法4，每天看一点，对每个小结来个学习总结，输出驱动输入。本篇笔记针对第一章基础1.1基础编程模型1.1节总结了相关的语法、语言特性和书中将会用到的库。笔记自己在编码中容易遗漏的点&&优先级比||高在开发中习惯了加括号，所以没注意到这点，教材上也有但是忘记了二分查找中计算mid=left+(right-left)/2这样计算可以有效避免(left+right)/2溢出答疑java无穷大</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372974182592512.htm" title="网关gateway学习总结" target="_blank">网关gateway学习总结</a> 猪猪365 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/1.htm">学习总结</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/1.htm">学习总结</a> <div>一微服务概述:微服务网关就是一个系统!通过暴露该微服务的网关系统,方便我们进行相关的鉴权,安全控制,日志的统一处理,易于监控的相关功能!实现微服务网关技术都有哪些呢?1nginx:nginx是一个高性能的http和反向代理web的服务器,同事也提供了IMAP/POP3/SMTP服务.他可以支撑5万并发链接,并且cpu,内存等资源消耗非常的低,运行非常的稳定!2Zuul:Zuul是Netflix公司</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> 琪33 <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> Q_w7742 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/102.htm" title="xml解析" target="_blank">xml解析</a> 小猪猪08 <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1、DOM解析的步奏准备工作： 1.创建DocumentBuilderFactory的对象 2.创建DocumentBuilder对象 3.通过DocumentBuilder对象的parse(String fileName)方法解析xml文件 4.通过Document的getElem</div> </li> <li><a href="/article/229.htm" title="每个开发人员都需要了解的一个SQL技巧" target="_blank">每个开发人员都需要了解的一个SQL技巧</a> brotherlamp <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a> <div> 对于数据过滤而言CHECK约束已经算是相当不错了。然而它仍存在一些缺陷，比如说它们是应用到表上面的，但有的时候你可能希望指定一条约束，而它只在特定条件下才生效。使用SQL标准的WITH CHECK OPTION子句就能完成这点，至少Oracle和SQL Server都实现了这个功能。下面是实现方式： CREATE TABLE books ( id &</div> </li> <li><a href="/article/356.htm" title="Quartz——CronTrigger触发器" target="_blank">Quartz——CronTrigger触发器</a> eksliang <a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/CronTrigger/1.htm">CronTrigger</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2208295 一.概述 CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案，调度规则基于 Cron 表达式，CronTrigger 支持日历相关的重复时间间隔（比如每月第一个周一执行），而不是简单的周期时间间隔。二.Cron表达式介绍 1）Cron表达式规则表 Quartz</div> </li> <li><a href="/article/483.htm" title="Informatica基础" target="_blank">Informatica基础</a> 18289753290 <a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a><a class="tag" taget="_blank" href="/search/Monitor/1.htm">Monitor</a><a class="tag" taget="_blank" href="/search/manager/1.htm">manager</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/Designer/1.htm">Designer</a> <div>1. 1）PowerCenter Designer：设计开发环境，定义源及目标数据结构；设计转换规则，生成ETL映射。 2）Workflow Manager：合理地实现复杂的ETL工作流，基于时间，事件的作业调度 3）Workflow Monitor：监控Workflow和Session运行情况，生成日志和报告 4）Repository Manager：</div> </li> <li><a href="/article/610.htm" title="linux下为程序创建启动和关闭的的sh文件，scrapyd为例" target="_blank">linux下为程序创建启动和关闭的的sh文件，scrapyd为例</a> 酷的飞上天空 <a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a> <div>对于一些未提供service管理的程序每次启动和关闭都要加上全部路径，想到可以做一个简单的启动和关闭控制的文件下面以scrapy启动server为例，文件名为run.sh： #端口号，根据此端口号确定PID PORT=6800 #启动命令所在目录 HOME='/home/jmscra/scrapy/' #查询出监听了PORT端口</div> </li> <li><a href="/article/737.htm" title="人--自私与无私" target="_blank">人--自私与无私</a> 永夜-极光 <div> 今天上毛概课,老师提出一个问题--人是自私的还是无私的,根源是什么? 从客观的角度来看,人有自私的行为,也有无私的</div> </li> <li><a href="/article/864.htm" title="Ubuntu安装NS-3 环境脚本" target="_blank">Ubuntu安装NS-3 环境脚本</a> 随便小屋 <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div> 将附件下载下来之后解压，将解压后的文件ns3environment.sh复制到下载目录下（其实放在哪里都可以，就是为了和我下面的命令相统一）。输入命令： sudo ./ns3environment.sh >>result 这样系统就自动安装ns3的环境，运行的结果在result文件中，如果提示 com</div> </li> <li><a href="/article/991.htm" title="创业的简单感受" target="_blank">创业的简单感受</a> aijuans <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A%E7%9A%84%E7%AE%80%E5%8D%95%E6%84%9F%E5%8F%97/1.htm">创业的简单感受</a> <div> 2009年11月9日我进入a公司实习，2012年4月26日，我离开a公司，开始自己的创业之旅。今天是2012年5月30日，我忽然很想谈谈自己创业一个月的感受。当初离开边锋时，我就对自己说：“自己选择的路，就是跪着也要把他走完”，我也做好了心理准备，准备迎接一次次的困难。我这次走出来，不管成败</div> </li> <li><a href="/article/1118.htm" title="如何经营自己的独立人脉" target="_blank">如何经营自己的独立人脉</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E5%A6%82%E4%BD%95%E7%BB%8F%E8%90%A5%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8B%AC%E7%AB%8B%E4%BA%BA%E8%84%89/1.htm">如何经营自己的独立人脉</a> <div>独立人脉不是父母、亲戚的人脉，而是自己主动投入构造的人脉圈。“放长线，钓大鱼”，先行投入才能产生后续产出。现在几乎做所有的事情都需要人脉。以银行柜员为例，需要拉储户，而其本质就是社会人脉，就是社交！很多人都说，人脉我不行，因为我爸不行、我妈不行、我姨不行、我舅不行……我谁谁谁都不行，怎么能建立人脉？我这里说的人脉，是你的独立人脉。以一个普通的银行柜员</div> </li> <li><a href="/article/1245.htm" title="JSP基础" target="_blank">JSP基础</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E9%87%8A/1.htm">注释</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E5%AF%B9%E8%B1%A1/1.htm">隐式对象</a> <div> 1,JSP语句的声明 <%! 声明 %> 　　声明：这个就是提供java代码声明变量、方法等的场所。表达式 <%= 表达式 %> 　　这个相当于赋值，可以在页面上显示表达式的结果，程序代码段/小型指令　<% 程序代码片段 %> 2,JSP的注释  </div> </li> <li><a href="/article/1372.htm" title="web.xml之session-config、mime-mapping" target="_blank">web.xml之session-config、mime-mapping</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/session-config/1.htm">session-config</a><a class="tag" taget="_blank" href="/search/mime-mapping/1.htm">mime-mapping</a> <div>session-config 1.定义： <session-config> <session-timeout>20</session-timeout> </session-config> 2.作用：用于定义整个WEB站点session的有效期限，单位是分钟。 mime-mapping 1.定义： <mime-m</div> </li> <li><a href="/article/1499.htm" title="互联网开放平台（1）" target="_blank">互联网开放平台（1）</a> Bill_chen <a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a><a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E8%85%BE%E8%AE%AF/1.htm">腾讯</a> <div>现在各互联网公司都推出了自己的开放平台供用户创造自己的应用，互联网的开放技术欣欣向荣，自己总结如下： 1.淘宝开放平台(TOP) 网址：http://open.taobao.com/ 依赖淘宝强大的电子商务数据，将淘宝内部业务数据作为API开放出去，同时将外部ISV的应用引入进来。目前TOP的三条主线： TOP访问网站：open.taobao.com ISV后台：my.open.ta</div> </li> <li><a href="/article/1626.htm" title="【MongoDB学习笔记九】MongoDB索引" target="_blank">【MongoDB学习笔记九】MongoDB索引</a> bit1129 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>索引可以在任意列上建立索引索引的构造和使用与传统关系型数据库几乎一样,适用于Oracle的索引优化技巧也适用于Mongodb 使用索引可以加快查询,但同时会降低修改,插入等的性能内嵌文档照样可以建立使用索引测试数据 var p1 = { "name":"Jack", "age&q</div> </li> <li><a href="/article/1753.htm" title="JDBC常用API之外的总结" target="_blank">JDBC常用API之外的总结</a> 白糖_ <a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div> 做JAVA的人玩JDBC肯定已经很熟练了，像DriverManager、Connection、ResultSet、Statement这些基本类大家肯定很常用啦，我不赘述那些诸如注册JDBC驱动、创建连接、获取数据集的API了，在这我介绍一些写框架时常用的API，大家共同学习吧。 ResultSetMetaData获取ResultSet对象的元数据信息 </div> </li> <li><a href="/article/1880.htm" title="apache VelocityEngine使用记录" target="_blank">apache VelocityEngine使用记录</a> bozch <a class="tag" taget="_blank" href="/search/VelocityEngine/1.htm">VelocityEngine</a> <div>VelocityEngine是一个模板引擎，能够基于模板生成指定的文件代码。使用方法如下： VelocityEngine engine = new VelocityEngine();// 定义模板引擎 Properties properties = new Properties();// 模板引擎属</div> </li> <li><a href="/article/2007.htm" title="编程之美-快速找出故障机器" target="_blank">编程之美-快速找出故障机器</a> bylijinnan <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> package beautyOfCoding; import java.util.Arrays; public class TheLostID { /*编程之美假设一个机器仅存储一个标号为ID的记录，假设机器总量在10亿以下且ID是小于10亿的整数，假设每份数据保存两个备份，这样就有两个机器存储了同样的数据。 1.假设在某个时间得到一个数据文件ID的列表，是</div> </li> <li><a href="/article/2134.htm" title="关于Java中redirect与forward的区别" target="_blank">关于Java中redirect与forward的区别</a> chenbowen00 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>在Servlet中两种实现： forward方式：request.getRequestDispatcher(“/somePage.jsp”).forward(request, response); redirect方式：response.sendRedirect(“/somePage.jsp”); forward是服务器内部重定向，程序收到请求后重新定向到另一个程序，客户机并不知</div> </li> <li><a href="/article/2261.htm" title="[信号与系统]人体最关键的两个信号节点" target="_blank">[信号与系统]人体最关键的两个信号节点</a> comsci <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F/1.htm">系统</a> <div> 如果把人体看做是一个带生物磁场的导体,那么这个导体有两个很重要的节点,第一个在头部,中医的名称叫做百汇穴, 另外一个节点在腰部,中医的名称叫做命门 如果要保护自己的脑部磁场不受到外界有害信号的攻击,最简单的</div> </li> <li><a href="/article/2388.htm" title="oracle 存储过程执行权限" target="_blank">oracle 存储过程执行权限</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90/1.htm">权限</a><a class="tag" taget="_blank" href="/search/%E6%89%A7%E8%A1%8C%E8%80%85/1.htm">执行者</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%94%A8%E8%80%85/1.htm">调用者</a> <div>在数据库系统中存储过程是必不可少的利器，存储过程是预先编译好的为实现一个复杂功能的一段Sql语句集合。它的优点我就不多说了，说一下我碰到的问题吧。我在项目开发的过程中需要用存储过程来实现一个功能，其中涉及到判断一张表是否已经建立，没有建立就由存储过程来建立这张表。 CREATE OR REPLACE PROCEDURE TestProc IS fla</div> </li> <li><a href="/article/2515.htm" title="为mysql数据库建立索引" target="_blank">为mysql数据库建立索引</a> dengkane <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a> <div>前些时候，一位颇高级的程序员居然问我什么叫做索引，令我感到十分的惊奇，我想这绝不会是沧海一粟，因为有成千上万的开发者（可能大部分是使用MySQL的）都没有受过有关数据库的正规培训，尽管他们都为客户做过一些开发，但却对如何为数据库建立适当的索引所知较少，因此我起了写一篇相关文章的念头。 最普通的情况，是为出现在where子句的字段建一个索引。为方便讲述，我们先建立一个如下的表。</div> </li> <li><a href="/article/2642.htm" title="学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例" target="_blank">学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>如果看懂一个程序，分三步 1、流程 2、每个语句的功能 3、试数如何学习一些小算法的程序尝试自己去编程解决它，大部分人都自己无法解决如果解决不了就看答案关键是把答案看懂，这个是要花很大的精力，也是我们学习的重点看懂之后尝试自己去修改程序，并且知道修改之后程序的不同输出结果的含义照着答案去敲调试错误 </div> </li> <li><a href="/article/2769.htm" title="centos6.3安装php5.4报错" target="_blank">centos6.3安装php5.4报错</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/centos6/1.htm">centos6</a> <div>报错内容如下: Resolving Dependencies --> Running transaction check ---> Package php54w.x86_64 0:5.4.38-1.w6 will be installed --> Processing Dependency: php54w-common(x86-64) = 5.4.38-1.w6 for </div> </li> <li><a href="/article/2896.htm" title="JSONP请求" target="_blank">JSONP请求</a> flyer0126 <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a> <div> 使用jsonp不能发起POST请求。 It is not possible to make a JSONP POST request. JSONP works by creating a <script> tag that executes Javascript from a different domain; it is not pos</div> </li> <li><a href="/article/3023.htm" title="Spring Security（03）——核心类简介" target="_blank">Spring Security（03）——核心类简介</a> 234390216 <a class="tag" taget="_blank" href="/search/Authentication/1.htm">Authentication</a> <div>核心类简介目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和AuthenticationProvider 1.3.1 &nb</div> </li> <li><a href="/article/3150.htm" title="在CentOS上部署JAVA服务" target="_blank">在CentOS上部署JAVA服务</a> java--hhf <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/Java%E6%9C%8D%E5%8A%A1/1.htm">Java服务</a> <div> 本文将介绍如何在CentOS上运行Java Web服务，其中将包括如何搭建JAVA运行环境、如何开启端口号、如何使得服务在命令执行窗口关闭后依旧运行第一步：卸载旧Linux自带的JDK ①查看本机JDK版本 java -version 结果如下 java version "1.6.0"</div> </li> <li><a href="/article/3277.htm" title="oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date]" target="_blank">oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date]</a> ldzyz007 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>oracle &n</div> </li> <li><a href="/article/3404.htm" title="记Protocol Oriented Programming in Swift of WWDC 2015" target="_blank">记Protocol Oriented Programming in Swift of WWDC 2015</a> ningandjin <a class="tag" taget="_blank" href="/search/protocol/1.htm">protocol</a><a class="tag" taget="_blank" href="/search/WWDC+2015/1.htm">WWDC 2015</a><a class="tag" taget="_blank" href="/search/Swift2.0/1.htm">Swift2.0</a> <div>其实最先朋友让我就这个题目写篇文章的时候，我是拒绝的，因为觉得苹果就是在炒冷饭，把已经流行了数十年的OOP中的“面向接口编程”还拿来讲，看完整个Session之后呢，虽然还是觉得在炒冷饭，但是毕竟还是加了蛋的，有些东西还是值得说说的。通常谈到面向接口编程，其主要作用是把系统设计和具体实现分离开，让系统的每个部分都可以在不影响别的部分的情况下，改变自身的具体实现。接口的设计就反映了系统</div> </li> <li><a href="/article/3531.htm" title="搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS" target="_blank">搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS</a> rensanning <a class="tag" taget="_blank" href="/search/keepalived/1.htm">keepalived</a> <div>（一）Keepalived （1）安装 # cd /usr/local/src # wget http://www.keepalived.org/software/keepalived-1.2.15.tar.gz # tar zxvf keepalived-1.2.15.tar.gz # cd keepalived-1.2.15 # ./configure # make &a</div> </li> <li><a href="/article/3658.htm" title="ORACLE数据库SCN和时间的互相转换" target="_blank">ORACLE数据库SCN和时间的互相转换</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>SCN（System Change Number 简称 SCN）是当Oracle数据库更新后，由DBMS自动维护去累积递增的一个数字，可以理解成ORACLE数据库的时间戳，从ORACLE 10G开始，提供了函数可以实现SCN和时间进行相互转换；　　用途：在进行数据库的还原和利用数据库的闪回功能时，进行SCN和时间的转换就变的非常必要了；　　操作方法：　　1、通过dbms_f</div> </li> <li><a href="/article/3785.htm" title="Spring MVC 方法注解拦截器" target="_blank">Spring MVC 方法注解拦截器</a> xp9802 <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>应用场景，在方法级别对本次调用进行鉴权，如api接口中有个用户唯一标示accessToken,对于有accessToken的每次请求可以在方法加一个拦截器，获得本次请求的用户，存放到request或者session域。 python中，之前在python flask中可以使用装饰器来对方法进行预处理，进行权限处理先看一个实例,使用@access_required拦截： ? </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

_parent	在上一级窗口中打开，一般使用分桢的框架页会经常使用
_blank	在新窗口打开
_self	在同一个框架或窗口中打开，该项一般不用设置
_top	在浏览器的整个窗口中打开，忽略任何框架