nbhkdz.com冰点文库

尚学堂html+css+javascript教程课件ppt

时间:2016-06-25


尚学堂 手把手教程

JAVA V3.0 http://www.bjsxt.com

HTML

WEB第一语言

http://www.bjsxt.com

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

课程内容及学习周期
? HTML介绍 ? HTML细节 ?文件结构 ?文字 ?图片 ?链接 ?表格 ?表单 ?多窗口 ?特殊字符 ?…… ? 在不是很熟悉HTML的情况下, 学习加练习的时间应该在4—8个小时 ? 对于已经熟悉HTML的读者可以略过 本章 ? 本章内容针对程序员进行设置,不是 培养设计师

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

HTML简介 ? Hyper Text Markup Language
? ? ? ? ? ? 历史 ? 超文本 (文字+图片+音视+链接…) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 HTML1.0 – HTML2.0 (IETF制定) – HTML4.0(最终版) W3C
? IETF – Internet Engineering Task Force ? HTTP协议 RFC等 ? RFC2616 Http1.1 RFC1521 MIME ? W3C – World Wide Web Consortium (www.w3.org) ? HTML XML等

? XHTML
? 符合XML标准的HTML

? DHTML ?Dy’namic HTML
? (X)HTML / CSS / JavaScript的综合运用

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

HTML语法标记
? 标记(标签或元素)的形式 ? <元素名>内容</元素名>
? Eg. <font>文字</font>

? <元素名/>
? Eg. <img src=―…‖/>

? <元素名>
? Eg. <br>

? 位于尖括号内,可以具有属性值 ? 属性值必须“” 或 ?‘,不写也可以解析, 但是不推荐(不符合 XHTML) ? 有开始必须有结束(XHTML) ? 标签不能嵌套 ? 不区分大小写 ? 但应该养成良好的编程习惯,推荐都用小写
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

Html文档结构 ? <html> <head> <title> 典型HTML </title> </head> <body> 我会努力的! </body> </html> ? <!-- 中间的内容为注释 -->

01.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

head中的常用标签
? <title>文字</title> ? ―文字”将显示在浏览器标题栏上 ? <meta>:用于设置一些头信息
? ? ? ? ?

"http-equiv"指明下面 要设置的项目 "content"指明该项目 设置的内容

<meta http-equiv=―content-type‖ content=―text/html;charset=gb2312‖> <meta http-equiv=―refresh‖ content=―3;url=http://www.foo.com‖> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> ? <meta name="generator | author | copyright" content="…..">

? <style>…</style>定义CSS格式 ? <Script language=―‖>…</Script> ? 用于定义脚本,Eg. Javascript

02.html
<link> <base>标签
版权所有:尚学堂科技

尚学堂
<body>

手把手教程

http://www.bjsxt.com

<body bgcolor=―#‖ --背景色 background="img_url" --背景图片 </body>
? 色彩值 “#rrggbb‖ ? Eg. <body bgcolor=―#ffffff‖ > 红绿蓝数字值 ? <body background=―img_url‖ --图片地址 >

03.html

04.html

? body其他属性 text link alink vlink bgcolor leftmargin topmargin…

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

锚点标签--<a>
? <a name="AnchorName"> ? 在该位置定义名字为AnchorName的锚,就是给这个位置起了个名 字,别人可以用这个名字直接链接到该文件的这个位置

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

链接标签--<a>
? 超级链接,跳转到另一文件 <a href=―url‖ target=―TargetWindow‖>文字 </a> ? 当鼠标点击“文字”时,TargetWindow的内容将会跳转到“url‖,不指定 target时在本窗口跳转。 ? 连接到文件的特定部分 ? Href=―url#point‖ ? 链接到url的point部分 ? 在url文档中用<a name=―point‖></a>标识 ? Target 见“框架“部分 05.html 06.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

路径问题 ? 本地路径 ? "c:\dir1\dir2\…" ? 绝对路径 ? "http://www.foo.com/img_url.jpg ? 相对路径
? "images/01.jpg" ? "../../images/01.jpg" ? "/images/01.jpg" = "http://mysite/images/01.jpg

? Eg. <a href=―‖></a> ? Eg. <img src=―‖/>
相对于URL地址

07.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

URL URI URN
? URL ? Uniform Resource Locator(统一资源定位符)
? 网络协议 + 主机名 + 端口号 + 资源名(定位标记) ? http://www.bjsxt.com:80/index.html#top ? 带有参数的url 及 url编码问题 见Servlet / JSP部分

? URN ? Uniform Resource Name ? 持久可用的资源标准名称
? 例如邮箱名mashibing2004@sina.com

? URI ? Uniform Resource Identifier ? 包含URL和URN

URI_URL_URN.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

分隔线--<hr>
? 语法 ? <hr size=―pixels‖ align=―align‖ width=―pixels‖ color=―#‖ noshade> ? Size 高度 ? Align 对齐方式,可以取left或right ? Noshade 无阴影效果 ? 颜色 ? Eg. <hr noshade color=―#ff00ff‖ width=―600‖ size=―8‖ align=―left‖>

08.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

标题字体大小--<h#> ? ? ? ? ? <h#>…</h#> #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 <h1>最大 <h6>最小

09.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

字体设置 ? <font face=―‖ size=―‖ color=―‖>…</font> ? face定义字体 ? size 1 2 3 4 5 6 7
? 实际 8 10 12 14 18 24 36(pixels) ? <font size=―+1‖> ? <font size=―-1‖>

10.html

? Color可以使用预定义的名字,也可以使用数字
? red、blue、black…

? <tt></tt>通常是打字机风格字体 ? <cite></cite>通常是引用方式(斜体) ? <em></em>强调(通常是斜体加粗体)
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

设置文字显示 名称
黑体 斜体 下划线 中划线

HTML代码
<b></b> <i></i> <u></u> <s></s>

闪烁 上标
下标

<blink></blink> <sup></sup>
<sub></sub> 11.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

特殊字符 &lt; <

&gt; &reg &amp; &nbsp; &copy; &trade; &quot;
12.html

>
注册商标 &

空格 copyright
商标?



可以使用&#xx来显示字符,xx为字符的unicode码 dreamweaver & &#21326; 版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

文字的布局
? <p>…</p> ? 分段落现实 ? <div>…</div> <span>…</span> ? 分块显示 ? <ul>…</ul> ? <li type=―disc circle square‖>… ? 符号列表 ? <ol>…</ol> ? <li>… ? 数字列表 ? <br> 换行 ? <nobr>…</nobr> 不换行 ? <pre></pre>保留原有格式 ? <marquee></marquee>跑马灯效果 ? <blockquote></blockquote> ? <dl><dt><dd>

13.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

对齐—align ? ? ? ? ? <h1 align=―‖> <div align=―‖> <table align=―‖> <hr align=―‖> ……

14.html

? 取值:left right center top middle bottom

? <center>……</center> ? 对齐到中间

版权所有:尚学堂科技

尚学堂
图片

手把手教程

http://www.bjsxt.com

? <img src=―‖ align=―‖ alt=―‖ border=―‖> ? Src 图片路径,一般使用相对路径 ? Alt 图片无法显示时显示的文字 ? Border 边框的厚度 ? Align = left right top middle bottom 图文混排时用于和图片的对齐

15.html
图片与链接 - 见DreamWeaver演示
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

表格—重点掌握
? <table width=―‖ align=―‖ border=―‖> <tr> <th width=―‖ align=―‖>…</th> <th>…</th>… %或像素值 </tr> <tr> <td width=―‖ align=―‖ valign=―‖>…</td> <td rowspan=―‖ colspan=―‖ bgcolor=―‖>…</td> …… </tr> </table> 跨行 跨列 top middle bottom

table的属性: bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height 表头(可选)

单元格

16.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

表单—重点掌握 ? 作用 ? 收集用户信息 ? 数据库查询 ? 收发email ? …… ? 用户不仅仅是信息的被动接受者,还可以通过表单成为信息 的主动发出者

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

表单基础--<form>
? <form>……</form> ? <form>的属性 ? Method (get post)
? Get 发送较少数据(256byte),显示在url中,url/userinfo?username= 张三&password=hehe ? Post数据长度无限制,不会显示在url中

? Action
? Form中数据交给服务器端哪个程序进行处理 ? Eg. <form method=―post‖ action=―user.jsp>……</form>

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

位于表单中的输入标签 ? 位于<form>之中,接收用户输入 ? 格式:<input type=―‖ name=―‖> ? type:
? text radio checkbox password hidden select submit reset button textarea image

? name:
? 提交到服务器端的变量的名字

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

表单中的输入标签
? 文本框 text ? <input type=―text‖ name=―‖ value=―‖ maxlength=―‖ size=―‖>
? maxlength – 最大字符长度 ? size – 文本框宽度(字符)

? 密码区域—特殊的单行文本输入框 password ? <input type=―password‖ name=―‖ value=―‖ size=―‖ maxlength=―‖> ? 单选按钮 ? <input type=―radio‖ name=―‖ value="" checked>
? 典型用法 : 同一名字,不同的值 ? 错误的用法 : 不同的名字

? 复选框 ? <input type=―checkbox‖ name=―‖ value=―‖ checked>
? 典型的用法 : 同一name,不同的value

? 隐藏域 ? <input type=―hidden‖ name=―‖ value=―‖>
? 不显示在网页中 ? 通常用作向下一个页面传输已知信息或表单的附加信息

版权所有:尚学堂科技

尚学堂
select

手把手教程

http://www.bjsxt.com

? 列表框 ? <select name=―‖ size=―‖ multiple> <option value=―‖ selected>…</option> <option value=―‖>…</option> …… </select>
? Multiple 表示多重列表框,可以多选 ? Selected 被选中

中间的值会被提交 所以不要含有空格

? 多行多列文本框
? <textarea rows=―‖ cols=―‖ wrap=―‖>…</textarea> ? Rows: 行数 ? Cols: 列数 ? Wrap: ? Off : 不换行 ? Soft: 自动换行,并且如果行末有英文单词,会将整个单词移到下一行 ? Hard: 自动换行,但会截断行末的单词

版权所有:尚学堂科技

尚学堂
button

手把手教程

http://www.bjsxt.com

? <input type=button name=―‖ value=―‖> ? 按下该按钮没有反映 ? <input type=submit name=―‖ value=―‖> ? 按下该按钮,该form中所有的输入信息将被提交到服务器 ? <input type=reset name=―‖ value=―‖> ? 按下该按钮,该form中所有的输入部分将被重置 ? <input type=―image‖ src=―‖> ? 点击图片提交
Label标签

与输入元素相关联 见DreamWeaver演示
版权所有:尚学堂科技

尚学堂
框架

手把手教程

http://www.bjsxt.com

? <frameset rows=―row1,row2…‖ cols=―col1,col2…‖> <frame name=―‖ src=―‖ noresize> <frame name=―‖ src=―‖ scrolling=―‖> …… </frameset> 18.html ? 嵌套 ? <frameset cols=―20%,*‖> Pixels or % <frame name=―left‖ src=―a.htm‖> <frameset rows=―40%,*‖> <frame name=―righttop‖ src=―b.htm‖> <frame name=―rightbottom‖ src=―c.htm‖> yes no auto </frameset> </frameset> <noframes></noframes> <iframe></iframe> 19.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

链接、表单与框架
? <a href=―‖ target=―‖>…</a> ? <form action=―‖ target=―‖>…</form> ? Target: ? Frame name ? _blank 新窗口 ? _self 本窗口 ? _parent 父窗口(本窗口的上一级窗口) ? _top 浏览器窗口

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

HTML网上行 ? 比老师更加渊博的老师 – 互联网 ? 打开网页 ? IE菜单—查看—源文件 ? IE菜单—文件—另存为 ? 学习其他的优秀的HTML设计 ? 可以查看CSS ? 可以查看Javascript ? 读代码应该直奔目的地 ? 没必要背过HTML标签

版权所有:尚学堂科技

尚学堂 手把手教程

JAVA V3.0 http://www.bjsxt.com

CSS

HTML美容师

http://www.bjsxt.com

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

课程内容
? CSS介绍 ? CSS细节 ?CSS的各种属性 ? 视熟悉程度,应掌握在1-6个小时左 右,当然了,我们培养的是程序员, 这个时间足够了?

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

CSS定义
? CSS—Cascade Style Sheet层叠样式表 ? 1998/5/12,CSS level2成为W3C标准 ? 用来装饰HTML/XML的标记集合 ? 特点: ? 样式表由样式规则组成,以告诉浏览器如何显示一个文档 ? 每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选 择符所接受的样式 ? 每个元素可以定义多个属性,每个属性带有一个值,共同的描述选择 符如何呈现

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

CSS样式 ? 样式规则格式: ? 选择符{属性:值} ? 单一选择符的复合样式声明应该用分号分割: ? 选择符{属性1:值1; 属性2:值2} ? 01.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

CSS的调用方式
? 在Head中调用(01.html) ? 在Body中调用(02.html) ? 调用css文件(03.html/03.css) ? CSS的优先级问题 ? 按照最靠近元素的定义来显示(04.html) ? 如果两个css文件冲突,以后面的为准

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

CLASS & ID ? 类选择符:Class ? 一个选择符能有不同的Class,因而允许同一个选择符具 有不同的样式(05.htm) ? 不同的选择符也可以同时定义一样的样式(06.htm) ? ID选择 ? 06_1.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

CSS组合/注释 ? 可以一次性定义多个选择符的样式 ? H1,H2,H3{color:red;font-family:serif} ? P A{} ? 06_2.html ? 注释: ? /*这是注释*/

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

字体属性
属性 font-family font-style font-variant font-weight 含义 字体 字体样式 小体大写 字体粗细 属性值 各种字体 italic、oblique small-caps bold、bolder、lighter…

font-size color

字体大小 字体颜色

absolute、relative、% 颜色值

例:07.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

颜色与背景属性
属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 含义 颜色 背景色 背景图案 背景图案重复方式 背景的滚动 背景图案初始位置 属性值 颜色值 颜色值 图片路径 Repeat-x | repeat-y | norepeat Scroll | fix % | n em | top | left | right | bottom …

例:08.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

文本属性
属性 word-spacing letter-spacing text-decoration vertical-align text-transform text-align text-indent 含义 单词间距 字母间距 装饰样式 垂直方向位置 转为其他形式 对齐 缩进 属性值 n em n em

Em:12pixels 的 'M' 常用于印刷的单位

underline| overline| line-through| blink sub| super |top |text-top| middle| bottom| text-bottom capitalize| uppercase| lowercase left| right| center| justify n em| %

line-height

行高

pixels、n em、%

例:09.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

装饰超链接 伪类选择符
? 对链接的修饰 ? A:link 未访问时的状态 ? A:visited 访问过后的状态 ? A:active 鼠标点中不放时的状态 ? A:hover 鼠标划过时的状态 ? 10.html

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

边距属性
属性 margin-top margin-right margin-bottom margin-left 含义 上边距 右 下 左 属性值 n em | % n em | % n em | % n em | %

例:11.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

填充属性
属性 padding-top padding-right padding-bottom padding-left 含义 上填充 右 下 左 属性值 n em | % n em | % n em | % n em | %

例:12.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

边框属性
属性
Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top |right|bottom|left

含义
上边框宽度 右 下 左 四边 边框颜色 边框样式

属性值
n em | thin | medium | thick 同上 同上 同上 同上 Color Dotted | dash | solid | double | groove | ridge | inset | outset

上(右|底|左)所 Border-width | border-style | color 有属性

例:13.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

图文混排
属性 Width Height Float clear 含义 宽度 高度 文字环绕 去除文字环绕 属性值 n em | % n em Left | right Left | right | both

例:14.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

列表属性
属性 Display White-space List-style-type 含义 是否显示 空白部分 项目编号 属性值 Block | inline | list-item | none Pre | nowrap | normal(是否合并) Disc|circle|square|decimal|lower-roman|upperroman|lower-alpha|upper-alpha|none Img-url Inside | outside Keyword | position | url

List-style-image List-style-position List-style

项目前图片 第二行位置 全部属性

例:15.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

鼠标属性
属性值 Auto Crosshair Default Hand Move E-resize Ne-resize Nw-resize 含义 自动 "+" 默认 手形 移动 右箭头 右上 左上 属性值 N-resize Se-resize Sw-resize S-resize W-resize Text Wait help 含义 上箭头 右下 左下 下箭头 左箭头 "I" 沙漏 帮助

例:16.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

定位属性
属性 Position Left | top Width | height Clip Overflow Z-index visibility 含义 位置 横向|纵向位置 宽度|高度 剪切 内容超出时 立体效果 可见性 属性值 Absolute|relative|static N em | % 同上 Shape | auto Visible | hidden | scroll | auto Integer Inherit | visible | hidden

例:17.html

18.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

滤镜属性
属性值 Alpha Blur Chroma Dropshadow Fliph Flipv Glow 含义 半透明 模糊 指定颜色透明 投射阴影 水平翻转 垂直翻转 光效 属性值 Invert Light Mask Shadow Wave Xray Grayscale 含义 底片 灯光投影 透明膜 阴影 波纹 X射线 灰度

例:19.html
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

? CSS布局 ? CSS框架

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

DreamWeaver
? ? ? ? 认识DreamWeaver 练习使用DreamWeaver 用DreamWeaver画表格和表单 用DreamWeaver来应用CSS

版权所有:尚学堂科技

尚学堂 手把手教程

JAVA V3.0 http://www.bjsxt.com

JavaScript

WEB魔术师

http://www.bjsxt.com

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

本章内容的学习周期
? 视熟悉程度,应该在4—16小时左右,可以达到入门并熟悉常用操作的目 的,例如:打开新窗口、判断表单输入等。当然了,javascript是一门独 立的语言,如果应用的好,可以作出很多丰富多彩的效果,甚至游戏。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

课程内容
? Javascript介绍 ? Javascript语言 ? 视熟悉程度,应该在4—16小时左右, 可以达到入门并熟悉常用操作的目的, 例如:打开新窗口、判断表单输入等。 当然了,JavaScript是一门独立的语 言,如果应用的好,可以作出很多丰 富多彩的效果,甚至游戏。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

程序开发分为客户端、服务器端
? 客户端开发的好处 ? 减少客户端到服务器端的往返。
? 表单验证

? 服务器端开发的好处 ? web应用的核心逻辑集中管理 ? 胖客户端、瘦客户端

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

客户端编程的主要技术
? ? ? ? ? ? javascript(最主要的) vbscript jscript applet activex组件 plug-in技术(价值在于:让专家级程序员开发新型语言) ? flash技术的最新发展 ? jsdk包含的plug-in ? yahoo 的工具条 ? 百度搜索伴侣 ? CNNIC网络实名等 ? 3721

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

学习资料
? ? ? ? ? msdn?jscript参考 CoreGuideJS15.zip CoreReferenceJS15.zip JavaScript手册-中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript and ECMA versions
JavaScript version Relationship to ECMA version

JavaScript 1.1 ECMA-262, Edition 1 is based on JavaScript 1.1.
JavaScript 1.2 ECMA-262 was not complete when JavaScript 1.2 was released. JavaScript 1.3 JavaScript 1.3 is fully compatible with ECMA-262, Edition 1. JavaScript 1.4 JavaScript 1.4 is fully compatible with ECMA-262, Edition 1. JavaScript 1.5 JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript和Java的区别
? 基于对象和面向对象 ? 解释和编译 ? 强变量和弱变量
? JavaScript中变量声明,采用其弱类型。 ? 即变量在使用前不需作声明,而是解释器在运行时检查其数据类型 x=1234; //数值型变量 y=“4321”; //字符型变量

? 代码格式不一样 ? 嵌入方式不一样

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript
? JavaScript是一种描述式语言,它与HTML结合起来,用于增强功能,并提高与最终用于之 间的交互性能 ? 由Netscape公司利用Sun的Java开发 ? 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似,但是,它只是函数式 的语言。 ? 客户端的JavaScript 必须要有浏览器的支持 ? JavaScript (ECMAScript) ? 基础语法 ? DOM ? Document Object Model ? BOM ? Brower Object Model ? JavaScript/jscript / ECMAScript ? avaScript是由Netscape公司开发 .它的前身是Live Script ? Microsoft发行jscript用于internet explorer ? 最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种 脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览 器都支持这种版本。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

ECMAScript
? ECMAScript并不与任何具体浏览器相绑定 ? 一个完整的JavaScript实现是由以下3个不同部分组成的(见图1-1): ? 核心(ECMAScript) ? 文档对象模型(DOM); ? 浏览器对象模型(BOM)。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

在网页中加入JavaScript
? 通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束,将 JavaScript代码放到<Script>…</Script>之间 ? (1.htm) ? 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作 为扩展名 ? (2.htm) ? 原则上,放在<head></head>之间。但视情况可以放在网页的任何部分 ? (3.htm) ? 一个页面可以有几个<Script>…</Script,不同部分的方法和变量,可以共 享。 ? (4.htm)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript的数据类型
? The primary (primitive) data types are: ? String ? Number ? Boolean ? The composite (reference) data types are: ? Object ? Array ? The special data types are: ? Null ? Undefined (var a;)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

控制字符
? JavaScript中有些以反斜杠(\)开头的不可显示的特殊字符。通常称为控 制字符。 ? \b :表示退格符。 ? \f :表示换页。 ? \n :表示换行符。 ? \r :表示回车符。 ? \t :表示Tab符号。 ? \' :表示单引号本身。 ? \" :表示双引号本身。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

类型转换

Operation Add a number and a string Add a Boolean and a string Add a number and a Boolean

Result The number is coerced into a string. The Boolean is coerced into a string. The Boolean is coerced into a number.
var a=3; var b="10"; var c=true; alert(a+b); alert(b+c); alert(a+c);
版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript基本语法
? 变量 ? JavaScript是一门弱类型的语言,所有的变量定义均以var来实现 ? JavaScript的变量建议先定义,再使用 ? JavaScript区分大小写 ? 虽然JavaScript可以不需定义即可直接使用变量,但不建议这么做 ? (5.htm) ? 数组定义 ? var arr = new Array(3); ? 通过arr.length取得数组的长度 ? (6.htm) ? 注释的写法--》和java的一样

版权所有:尚学堂科技

尚学堂
数组

手把手教程

http://www.bjsxt.com

使用方式: ? myarray=new Array(num) ? myarray=new Array(value1,value2…) <Script language="JavaScript"> aa = new Array(3); aa[20] = 444; document.write (aa[20]); </Script>

? num不设定,则按数组默认的最大长度自动设定。例如:
<Script language="JavaScript"> aa = new Array(); aa[20] = 444; document.write (aa.length); </Script>

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript基本语法—运算符
? 算术运算 ? +、-、*、/ ? >、<、=、>=、<=、== ? (7.htm) ? 逻辑运算 ? 与:&& ? 或:|| ? 非:! ? (8.htm) ? 字符串运算符 ? 连接运算:+ (9.htm) ? 取子集:substring(index1,index2) (10.htm) ? 条件表达式 ? 条件?A:B (11.htm)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

substring 方法
? 返回位于String对象中指定位置的子字符串。 ? strVariable.substring(start,end) ? "String Literal".substring(start,end) ? 参数 ? start
? 指明子字符串的起始位置,该索引从 0 开始起算。

? end
? 指明子字符串的结束位置,该索引从 0 开始起算。

? 说明 ? substring方法将返回一个包含从start到最后(不包含end)的子字符串的字 符串。 ? substring方法使用start和end两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3)和strvar.substring(3, 0)将返回相同的子字符串。 ? 如果start或end为NaN或者负数,那么将其替换为0。 ? 子字符串的长度等于start和end之差的绝对值。例如,在strvar.substring(0, 3)和strvar.substring(3, 0)返回的子字符串的的长度是 3。

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript基本语法—控制语句
? if语句 ? if(条件) else if(条件1) else…(12.htm) ? while语句 ? while(条件)… ? 13.htm ? switch 语句 ? switch(i) case i1:… casei2:… default:… ? (14.htm) ? for ? 15.htm ? do…while ? 16.htm ? while ? 17.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript内置类型
? typeof 返回值有六种可能: "number," "string," "boolean," "object," "function," 和 "undefined." ? typeof 操作符
typeof.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

字符串对象 ? 属性:length ? 方法: ? 字体控制:
big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor()

? 字符串:
toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

big()、bold()、link()
<script language=javascript> var strVariable = "This is a string object"; strVariable = strVariable.big().big().big().big().big().big().big().big().big(); strVariable = strVariable.bold(); strVariable = strVariable.link("http://www.microsoft.com"); document.write(strVariable); </script> <BR>This is a string object

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

substring、indexOf
? substring(start,end) 返回字符串的子字符串 案例:substring.htm ? indexOf[charactor,fromIndex] 字符搜索 案例:indexOf.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

Math对象 常用方法:
? ? ? ? ? ? ? abs() 绝对值 sin() , cos() 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方
案例: Math.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

Date对象

? 创建方式: myDate = new Date();
? 日期起始值:1970年1月1日00:00:00 ? 主要方法 ? getYear(): 返回年数 setYear(): 设置年数 ? getMonth(): 返回月数 setMonth():设置月数 ? getDate(): 返回日数 setDate():设置日数 ? getDay(): 返回星期几 setDay():设置星期数 ? getHours():返回小时数 setHours():设置小时数 ? getMinutes():返回分钟数 setMintes():设置分钟数 ? getSeconds():返回秒数 setSeconds():设置秒数 ? getTime() : 返回毫秒数 setTime() :设置毫秒数

案例: Date.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript基本语法—函数
? 函数的使用 ? 利用function来定义一个函数 (18.htm) ? 传入参数 (19.htm) ? 传出值 (20.htm)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

函数的参数传递
preloadTreeImages("1.gif","2.gif","3.gif"); function preloadTreeImages() { for (var i = 0; i < arguments.length; i++) { var img = document.createElement("img"); img.src = arguments[i]; div1.appendChild(img); } }

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript事件处理
? ? ? ? ? onFocus:在用户为了输入而选择select、text、textarea等时 ? (onFocus.htm) onBlur:在select、text、password、textarea失去焦点时 ? (onBlur.htm) onChange:在select、text、textarea的值被改变且失去焦点时 ? (onChange.htm/SelectionChange.htm) onClick:在一个对象被鼠标点中时(button,checkbox,radio,link,reset,submit,text,textarea等) ? (onClick.htm) onLoad:出现在一个文档完成对一个窗口的载入时 ? (onLoad.htm) onUnload:当用户退出一个文档时 ? (onload.htm) onMouseOver:鼠标被移动到一个对象上时 ? (onMouse.htm) onMouseOut:鼠标从一个对象上移开时 ? (onMouse.htm) onSelect:当form对象中的内容被选中时 ? (onSelect.htm) onSubmit:出现在用户通过提交按钮提交一个表单时 ? (onSubmit.htm)

?
? ?

?
?

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

JavaScript的对话框
? 警告框(alert):出现一个提示信息 ? 21.htm ? 询问框(prompt):返回输入的值 ? 22.htm ? 确认框(confirm):根据不同的选择,返回true/false ? 23.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

使用eval
? 不使用eval ? alert ("3"+"2"); ? --〉32 ? 使用eval的上下文环境 ? alert (eval("3") + eval("2")); ? --〉5

eval_1.htm

? eval()函数可以把一个字符串当作一个JavaScript表达式一样 去执行它
Eval_2.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

javascript hijacking
? 函数劫持 ? 通过替换js函数的实现来达到劫持这个函数调用的目的

hook.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

this指的是当前的对象
? 24.htm ? 函数调用时使用this ? object.htm ? 自定义对象,随时可以增加属性,方法 ? class.htm ? 定义类

版权所有:尚学堂科技

尚学堂
对象

手把手教程

http://www.bjsxt.com

? for…in ? In后跟一个对象,对此对象中的所有元素循环一次 ? (25.htm 25_1.htm) ? with ? 为一段代码建立一个缺省的对象,任何无对象的属性引用,都将使用 该缺省的对象 ? (26.htm) ? new ? 用于生成一个新的对象 ? (27.htm)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

Try…Catch…
try{ document.writeln("Beginnng the try block") document.writeln("No exceptions yet") // Create a syntax error eval("6 + * 3") document.writeln("Finished the try block with no exceptions")

} catch(err){ document.writeln("Exception caught, ") document.writeln("Error name: " + err.name) document.writeln("Error message: " + err.message) }

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

窗口中的对象和元素(BOM)
? window ? 当前窗口(28.htm) ? 新开窗口(29.htm) ? 通过本地窗口控制新开窗口 (30.htm) ? location ? 获取或设置现有文档的URL (31.htm) ? history ? 先前访问过的URL的历史列表 ? 常用方法:back(),go(number) ? (32.htm/33.htm) ? document ? 当前的文档对象
? document.write():向客户端浏览器输出内容 ? document.formName:可以用这个方法得到表单名称 ? document.referrer

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

Browser Object Model

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

技巧:setTimeout、setInterval
<script language=javascript> //var a = window.setInterval("alert('Hello, world')", 2000); var a = window.setTimeout("alert('Hello, world')", 2000); </script> <input type=button value="停止" onclick=clearTimeout(a);>

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

趣味JavaScript程序
? ? ? ? ? ? ? 黑客帝国(ex1/matrix.htm) 鼠标跟随(ex2/mouseTrace.htm) 找相同图片游戏(ex1/game/game.htm) 飘浮的云(ex1/floating.htm) 打字效果(ex1/printer.htm) TicTacToe游戏(ex1/tictactoe.htm) 星球大战(ex1/starcraft/)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

实用JavaScript程序
? ? ? ? ? ? ? ? 图片下拉列表(ex2/DropDown/) 相互关联的列表(ex2/relative.htm) 抽屉式菜单(ex2/drawer.htm) 滑入式菜单(ex2/slip.htm) 滚动下拉菜单 (ex2/pulldown.htm) 日历(ex2/calendar) 输入判断js函数(ex2/pd.*) window.open教程(window.open.htm)

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

确实要删除该条记录吗
<script language="javascript"> function a_onclick() { var cv cv=window.confirm('确实要删除该条记录吗?') if(cv==true){return true} else{return false} } </script>

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

程序优化
function a_onclick_new() { event.returnValue=window.confirm('确实要删除该条记录吗?') }
confirmdel.htm

版权所有:尚学堂科技

尚学堂

手把手教程

http://www.bjsxt.com

学习HTML / CSS / JavaScript的方法
? ? ? ? google Alert() 重点掌握表单输入的判断 prototype.js是由Sam Stephenson写的一个javascript类库 ? Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. ? 《不可多得的Javascript(AJAX)开发工具 - Aptana》 ? 掌握基本知识 ? 学会照猫画虎

版权所有:尚学堂科技


尚学堂html+css+javascript教程课件ppt_图文.ppt

尚学堂html+css+javascript教程课件ppt_其它课程_高中教育_

尚学堂_马士兵_HTML_CSS__JavaScript_图文.ppt

搜试试 5 悬赏文档 全部 DOC PPT TXT PDF XLS ...尚学堂_马士兵_HTML_CSS__JavaScript_计算机软件及...(ex2/pd.*) window.open教程(window.open.htm) ...

html+css+javascript教程课件ppt(j)_图文.ppt

html+css+javascript教程课件ppt(j) - 尚学堂 手把手教

尚学堂html+css+javascript教程课件ppt_图文.ppt

尚学堂html+css+javascript教程课件ppt - 尚学堂 手把手教

尚学堂J2SEHTMLCssJS(最新)概要_图文.ppt

尚学堂J2SEHTMLCssJS(最新)概要_计算机软件及应用_IT...用DreamWeaver来应用CSS Javascript: finally getting ...window.open教程(window.open.htm) 确实要删除该条...

马士兵html_css_javascript.ppt1_图文.ppt

马士兵html_css_javascript.ppt1 - 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第一语言 http://ww...

html+css+javascript_图文.ppt

html+css+javascript_工学_高等教育_教育专区。html+css+javascript课件 尚学堂 手把手教程 HTML WEB第一语言 http://www.bjsxt.com 版权所有:尚学堂科技 手把手...

尚学堂-马士兵-html-css-javascript讲义_图文.ppt

尚学堂-马士兵-html-css-javascript讲义 - 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第一语言 http://...

马士兵-html-css-javascript讲义_图文.ppt

马士兵-html-css-javascript讲义_工学_高等教育_教育专区。马士兵老师-html-css-javascript讲义 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第...

马士兵html css javascript_图文.ppt

马士兵html css javascript_IT/计算机_专业资料。马士兵html css javascript PPT 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第一语言 第一...

尚学堂J2SEHTMLCssJS(最新)_图文.ppt

尚学堂J2SEHTMLCssJS(最新)_经管营销_专业资料。...(X)HTML / CSS / JavaScript的综合运用 HTML语法...window.open教程(window.open.htm) 确实要删除该条...

html+css+javascript_图文.ppt

html+css+javascript - 尚学堂 手把手教程 JAVA V3.

尚学堂-马士兵-html-css-javascript讲义.ppt

HTML,CSS,Javascript经典讲义,尚学堂,马士兵HTML,CSS,Javascript经典讲义,尚学堂,马士兵隐藏>> 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第一...

马士兵html%2Bcss%2Bjavascript_图文.ppt

马士兵html%2Bcss%2Bjavascript_理学_高等教育_教育专区。html,css,javascript,马士兵。尚学堂 尚学堂 手把手教程 JAVA V3.0 http://www.bjsxt.com HTML WEB第一...

HTML+CSS+JavaScript_图文.ppt

HTML+CSS+JavaScript - 尚学堂 手把手教程 JAVA V3.

尚学堂马士兵JavaScript学习笔记.doc

搜试试 5 悬赏文档 全部 DOC PPT TXT PDF XLS ...') } 学习 HTML / CSS / JavaScript 的方法 ...尚学堂马士兵Oracle教程... 17页 免费 尚学堂-马...

尚学堂徐一涵Web前端视频教程免费学习_页面设计_教学视....doc

帮助去网页搜索 全部 DOC PPT TXT PDF XLS ...HTMLCSS以及JavaScript/ajax,现在最新的高级版本HTML...第1章 Web前端视频教程01 01_尚学堂_徐一涵_Web...

网页基础三部曲html_css_js.ppt

格式:ppt 关键词:暂无1/2 相关文档推荐 ...尚学堂J2SEHTMLCssJS(最新... 102页 免费 html 89...html+css+javascript 93页 免费如要投诉违规内容,请到...

尚学堂课程顺序.txt

HTML_CSS_JAVASCRIPT CSS HTML HTML_CSS_JAVASCRIPT ...(尚学堂).ppt telnet-server-0.17-25.i386.rpm ...尚学堂科技_马士兵_JAVA视频教程_JDK5.0_下载-安装-...

尚学堂JSP&Servlet_图文.ppt

搜试试 5 悬赏文档 全部 DOC PPT TXT PDF XLS ...尚学堂JSP&Servlet_IT/计算机_专业资料。Servlet&JSP...客户端浏览器需要得到包含HTML,CSS,JS 的代码,然后...