html-css-javascript讲义.ppt

1、HTML,WEB第一语言,课程内容及学习周期,HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 ,在不是很熟悉HTML的情况下，学习加练习的时间应该在48个小时 对于已经熟悉HTML的读者可以略过本章 本章内容针对程序员进行设置，不是培养设计师,HTML简介,Hyper Text Markup Language 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3C IE

2、TF Internet Engineering Task Force HTTP协议 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C World Wide Web Consortium () HTML XML等 XHTML 符合XML标准的HTML DHTML Dynamic HTML （X）HTML / CSS / JavaScript的综合运用,HTML语法标记,标记(标签或元素)的形式 内容 Eg. 文字 Eg. Eg. 位于尖括号内，可以具有属性值 属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合XHTML） 有开始必须有结束(X

3、HTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯，推荐都用小写,Html文档结构,典型HTML我会努力的！ ,01.html,head中的常用标签,文字 “文字”将显示在浏览器标题栏上 ：用于设置一些头信息 定义CSS格式 用于定义脚本，Eg. Javascript,http-equiv指明下面要设置的项目 content指明该项目设置的内容,02.html, 标签, 色彩值 “#rrggbb” Eg. 红绿蓝数字值 body其他属性 text link alink vlink bgcolor leftmargin topmargin,03.html,04.html,锚点标签-

4、, 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置,链接标签-,超级链接，跳转到另一文件 文字 当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识 Target 见“框架“部分,05.html06.html,路径问题,本地路径 c:dir1dir2 绝对路径 相对路径 images/01.jpg ././images/01.jpg /images/01.jpg =

5、 http:/mysite/images/01.jpg Eg. Eg. ,07.html,相对于URL地址,URL URI URN,URL Uniform Resource Locator（统一资源定位符） 网络协议 主机名 端口号 资源名（定位标记） :80/index.html#top 带有参数的url 及 url编码问题 见Servlet / JSP部分 URN Uniform Resource Name 持久可用的资源标准名称 例如邮箱名 URI Uniform Resource Identifier 包含URL和URN,URI_URL_URN.html,分隔线-,语法 Size 高度

6、 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色 Eg. ,08.html,标题字体大小-, #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 最大 最小,09.html,字体设置, face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36（pixels） Color可以使用预定义的名字,也可以使用数字 red、blue、black 通常是打字机风格字体 通常是引用方式（斜体） 强调（通常是斜体加粗体）,10.html,设置文字显示,11.html,特殊字符,12.html,可以使用,文字的

7、布局, 分段落现实 分块显示 符号列表 数字列表 换行 不换行 保留原有格式 跑马灯效果 ,13.html,对齐align, 取值:left right center top middle bottom 对齐到中间,14.html,图片, Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom图文混排时用于和图片的对齐,15.html,图片与链接 见DreamWeaver演示,表格重点掌握, ,%或像素值,表头（可选）,单元格,top middle bottom,跨行,跨列,16.

8、html,table的属性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight,表单重点掌握,作用 收集用户信息 数据库查询 收发email 用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础-, 的属性 Method (get post) Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三 属性2:值2 01.html,CSS的调用方式,在Head中调用(01.html) 在Body中调用(02.html) 调用

9、css文件(03.html/03.css) CSS的优先级问题 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准,CLASS font-family:serif P A 06_2.html 注释： /*这是注释*/,字体属性,例：07.html,颜色与背景属性,例：08.html,文本属性,例：09.html,Em:12pixels 的 M常用于印刷的单位,装饰超链接 伪类选择符,对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html,边距属性,例

10、：11.html,填充属性,例：12.html,边框属性,例：13.html,图文混排,例：14.html,列表属性,例：15.html,鼠标属性,例：16.html,定位属性,例：17.html 18.html,滤镜属性,例：19.html,CSS布局 CSS框架,DreamWeaver,认识DreamWeaver 练习使用DreamWeaver 用DreamWeaver画表格和表单 用DreamWeaver来应用CSS,JavaScript,WEB魔术师,本章内容的学习周期,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，jav

11、ascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript介绍 Javascript语言,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,程序开发分为客户端、服务器端,客户端开发的好处 减少客户端到服务器端的往返。 表单验证 服务器端开发的好处 web应用的核心逻辑集中管理 胖客户端、瘦客户端,客户端编程的主要技术,javascript（最主要的） vbscript jscript a

12、pplet activex组件 plug-in技术（价值在于：让专家级程序员开发新型语言） flash技术的最新发展 jsdk包含的plug-in yahoo 的工具条 百度搜索伴侣 CNNIC网络实名等 3721,学习资料,msdnjscript参考 CoreGuideJS15.zip CoreReferenceJS15.zip JavaScript手册中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf,JavaScript and ECMA versions,JavaScript和Jav

13、a的区别,基于对象和面向对象 解释和编译 强变量和弱变量 JavaScript中变量声明，采用其弱类型。 即变量在使用前不需作声明，而是解释器在运行时检查其数据类型 x=1234; /数值型变量 y“4321”; /字符型变量 代码格式不一样 嵌入方式不一样,JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能 由Netscape公司利用Sun的Java开发 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。 客户端的JavaScript 必须要有浏览器的支持 JavaScri

14、pt (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版本。现在的主流浏览器都支持这种版本。,ECMAScript,

15、ECMAScript并不与任何具体浏览器相绑定 一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）： 核心（ECMAScript） 文档对象模型（DOM）； 浏览器对象模型（BOM）。,在网页中加入JavaScript,通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间 (1.htm) 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 (2.htm) 原则上，放在之间。但视情况可以放在网页的任何部分 (3.htm) 一个页面可以有几个/Script，不同部分的方法和变量，可以共享。 (

16、4.htm),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;),控制字符,JavaScript中有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。 b :表示退格符。 f :表示换页。 n :表示换行符。 r :表示回车符。 t :表示Tab符号。 :表示单引号本身。

17、:表示双引号本身。,类型转换,var a=3; var b=10; var c=true; alert(a+b); alert(b+c); alert(a+c);,JavaScript基本语法,变量 JavaScript是一门弱类型的语言，所有的变量定义均以var来实现 JavaScript的变量建议先定义，再使用 JavaScript区分大小写 虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做 (5.htm) 数组定义 var arr = new Array(3); 通过arr.length取得数组的长度 (6.htm) 注释的写法和java的一样,数组,使用方式： my

18、array=new Array(num) myarray=new Array(value1,value2) aa = new Array(3); aa20 = 444; document.write (aa20); num不设定，则按数组默认的最大长度自动设定。例如： aa = new Array(); aa20 = 444; document.write (aa.length); ,JavaScript基本语法运算符,算术运算 +、-、*、/ 、=、=、= (7.htm) 逻辑运算 与： strVariable = strVariable.big().big().big().big().bi

19、g().big().big().big().big(); strVariable = strVariable.bold(); strVariable = strVariable.link(); document.write(strVariable); This is a string object,substring、indexOf,substring(start,end) 返回字符串的子字符串 案例：substring.htm indexOfcharactor,fromIndex 字符搜索 案例：indexOf.htm,Math对象,常用方法： abs() 绝对值 sin() , cos()

20、 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方,案例： Math.htm,Date对象,创建方式： myDate = new Date(); 日期起始值:9年月日: 主要方法 getYear(): 返回年数 setYear(): 设置年数 getMonth(): 返回月数 setMonth():设置月数 getDate(): 返回日数 setDate():设置日数 getDay(): 返回星期几 setDay():设置星期数 getHours():返回小时数 se

21、tHours():设置小时数 getMinutes():返回分钟数 setMintes():设置分钟数 getSeconds():返回秒数 setSeconds():设置秒数 getTime() : 返回毫秒数 setTime() :设置毫秒数,案例： Date.htm,JavaScript基本语法函数,函数的使用 利用function来定义一个函数 (18.htm) 传入参数 (19.htm) 传出值 (20.htm),函数的参数传递,preloadTreeImages(1.gif,2.gif,3.gif); function preloadTreeImages() for (var i =

22、 0; i arguments.length; i+) var img = document.createElement(img); img.src = argumentsi; div1.appendChild(img); ,JavaScript事件处理,onFocus：在用户为了输入而选择select、text、textarea等时 (onFocus.htm) onBlur：在select、text、password、textarea失去焦点时 (onBlur.htm) onChange：在select、text、textarea的值被改变且失去焦点时 (onChange.htm/Selec

23、tionChange.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) onSubm

24、it：出现在用户通过提交按钮提交一个表单时 (onSubmit.htm),JavaScript的对话框,警告框(alert)：出现一个提示信息 21.htm 询问框(prompt)：返回输入的值 22.htm 确认框(confirm)：根据不同的选择，返回true/false 23.htm,使用eval,不使用eval alert (3+2); -32 使用eval的上下文环境 alert (eval(3) + eval(2); -5 eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它,eval_1.htm,Eval_2.htm,javascript hijacki

25、ng,函数劫持 通过替换js函数的实现来达到劫持这个函数调用的目的,hook.htm,this指的是当前的对象,24.htm 函数调用时使用this object.htm 自定义对象,随时可以增加属性,方法 class.htm 定义类,对象,forin In后跟一个对象，对此对象中的所有元素循环一次 (25.htm 25_1.htm) with 为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象 (26.htm) new 用于生成一个新的对象 (27.htm),TryCatch,try document.writeln(Beginnng the try block) do

26、cument.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: + ) document.writeln(Error message: + err.message) ,窗口中的对象和元素(BOM),window 当前窗口（28.h

27、tm） 新开窗口（29.htm） 通过本地窗口控制新开窗口 (30.htm) location 获取或设置现有文档的URL (31.htm) history 先前访问过的URL的历史列表 常用方法：back()，go(number) (32.htm/33.htm) document 当前的文档对象 document.write()：向客户端浏览器输出内容 document.formName：可以用这个方法得到表单名称 document.referrer,Browser Object Model,技巧：setTimeout、setInterval, /var a = window.setInterval(alert(Hello,