尚学堂—htm_css_javascript.ppt

HTML,WEB第一语言,课程内容及学习周期,HTML介绍HTML细节文件结构文字图片链接表格表单多窗口特殊字符,在不是很熟悉HTML的情况下，学习加练习的时间应该在48个小时对于已经熟悉HTML的读者可以略过本章本章内容针对程序员进行设置，不是培养设计师,HTML简介,HyperTextMarkupLanguage超文本(文字+图片+音视+链接)标记语言(浏览器根据标记显示内容)来自于SGML(标准通用标记语言)专注于在Web上传递信息是写给浏览器的语言历史HTML1.0HTML2.0(IETF制定)HTML4.0(最终版)W3CIETFInternetEngineeringTaskForceHTTP协议RFC等RFC2616Http1.1RFC1521MIMEW3CWorldWideWebConsortium()HTMLXML等XHTML符合XML标准的HTMLDHTMLDynamicHTML（X）HTML/CSS/JavaScript的综合运用,HTML语法标记,标记(标签或元素)的形式内容Eg.文字Eg.Eg.位于尖括号内，可以具有属性值属性值必须“”或，不写也可以解析，但是不推荐（不符合XHTML）有开始必须有结束(XHTML)标签不能嵌套不区分大小写但应该养成良好的编程习惯，推荐都用小写,Html文档结构,典型HTML我会努力的！,01.html,head中的常用标签,文字“文字”将显示在浏览器标题栏上：用于设置一些头信息定义CSS格式用于定义脚本，Eg.Javascript,http-equiv指明下面要设置的项目content指明该项目设置的内容,02.html,标签,色彩值“#rrggbb”Eg.红绿蓝数字值body其他属性textlinkalinkvlinkbgcolorleftmargintopmargin,03.html,04.html,锚点标签-,在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置,链接标签-,超级链接，跳转到另一文件文字当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。连接到文件的特定部分Href=“url#point”链接到url的point部分在url文档中用标识Target见“框架“部分,05.html06.html,路径问题,本地路径c:dir1dir2绝对路径,07.html,相对于URL地址,URLURIURN,URLUniformResourceLocator（统一资源定位符）网络协议主机名端口号资源名（定位标记）:80/index.html#top带有参数的url及url编码问题见Servlet/JSP部分URNUniformResourceName持久可用的资源标准名称例如邮箱名mashibing2004URIUniformResourceIdentifier包含URL和URN,URI_URL_URN.html,分隔线-,语法Size高度Align对齐方式，可以取left或rightNoshade无阴影效果颜色Eg.,08.html,标题字体大小-,#=1、2、3、4、5、6按标题级别用黑体字显示标题内容自动插入空行最大最小,09.html,字体设置,face定义字体size1234567实际8101214182436（pixels）Color可以使用预定义的名字,也可以使用数字red、blue、black通常是打字机风格字体通常是引用方式（斜体）强调（通常是斜体加粗体）,10.html,设置文字显示,11.html,特殊字符,12.html,可以使用,文字的布局,分段落现实分块显示符号列表数字列表换行不换行保留原有格式跑马灯效果,13.html,对齐align,取值:leftrightcentertopmiddlebottom对齐到中间,14.html,图片,Src图片路径，一般使用相对路径Alt图片无法显示时显示的文字Border边框的厚度Align=leftrighttopmiddlebottom图文混排时用于和图片的对齐,15.html,图片与链接见DreamWeaver演示,表格重点掌握,%或像素值,表头（可选）,单元格,topmiddlebottom,跨行,跨列,16.html,table的属性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight,表单重点掌握,作用收集用户信息数据库查询收发email用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础-,的属性Method(getpost)Get发送较少数据（256byte），显示在url中，url/userinfo?username=张三属性2:值201.html,CSS的调用方式,在Head中调用(01.html)在Body中调用(02.html)调用css文件(03.html/03.css)CSS的优先级问题按照最靠近元素的定义来显示(04.html)如果两个css文件冲突,以后面的为准,CLASSfont-family:serifPA06_2.html注释：/*这是注释*/,字体属性,例：07.html,颜色与背景属性,例：08.html,文本属性,例：09.html,Em:12pixels的M常用于印刷的单位,装饰超链接伪类选择符,对链接的修饰A:link未访问时的状态A:visited访问过后的状态A:active鼠标点中不放时的状态A:hover鼠标划过时的状态10.html,边距属性,例：11.html,填充属性,例：12.html,边框属性,例：13.html,图文混排,例：14.html,列表属性,例：15.html,鼠标属性,例：16.html,定位属性,例：17.html18.html,滤镜属性,例：19.html,CSS布局CSS框架,DreamWeaver,认识DreamWeaver练习使用DreamWeaver用DreamWeaver画表格和表单用DreamWeaver来应用CSS,JavaScript,WEB魔术师,本章内容的学习周期,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript介绍Javascript语言,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,程序开发分为客户端、服务器端,客户端开发的好处减少客户端到服务器端的往返。表单验证服务器端开发的好处web应用的核心逻辑集中管理胖客户端、瘦客户端,客户端编程的主要技术,javascript（最主要的）vbscriptjscriptappletactivex组件plug-in技术（价值在于：让专家级程序员开发新型语言）flash技术的最新发展jsdk包含的plug-inyahoo的工具条百度搜索伴侣CNNIC网络实名等3721,学习资料,msdnjscript参考CoreGuideJS15.zipCoreReferenceJS15.zipJavaScript手册中文.chmJavaScript2005-Wrox-ProfessionalJavascriptForWebDevelopers.pdf,JavaScriptandECMAversions,JavaScript和Java的区别,基于对象和面向对象解释和编译强变量和弱变量JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型x=1234;/数值型变量y“4321”;/字符型变量代码格式不一样嵌入方式不一样,JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能由Netscape公司利用Sun的Java开发它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。客户端的JavaScript必须要有浏览器的支持JavaScript(ECMAScript)基础语法DOMDocumentObjectModelBOMBrowerObjectModelJavaScript/jscript/ECMAScriptavaScript是由Netscape公司开发.它的前身是LiveScriptMicrosoft发行jscript用于internetexplorer最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。,ECMAScript,ECMAScript并不与任何具体浏览器相绑定一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）：核心（ECMAScript）文档对象模型（DOM）；浏览器对象模型（BOM）。,在网页中加入JavaScript,通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间(1.htm)也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名(2.htm)原则上，放在之间。但视情况可以放在网页的任何部分(3.htm)一个页面可以有几个、=、=、=(7.htm)逻辑运算与：strVariable=strVariable.big().big().big().big().big().big().big().big().big();strVariable=strVariable.bold();strVariable=strVariable.link();document.write(strVariable);Thisisastringobject,substring、indexOf,substring(start,end)返回字符串的子字符串案例：substring.htmindexOfcharactor,fromIndex字符搜索案例：indexOf.htm,Math对象,常用方法：abs()绝对值sin(),cos()正弦余弦值asin(),acos()反正弦反余弦tan(),atan()正切反正切round()四舍五入sqrt()平方根pow(x,y)x的y次方,案例：Math.htm,Date对象,创建方式：myDate=newDate();日期起始值:9年月日:主要方法getYear():返回年数setYear():设置年数getMonth():返回月数setMonth():设置月数getDate():返回日数setDate():设置日数getDay():返回星期几setDay():设置星期数getHours():返回小时数setHours():设置小时数getMinutes():返回分钟数setMintes():设置分钟数getSeconds():返回秒数setSeconds():设置秒数getTime():返回毫秒数setTime():设置毫秒数,案例：Date.htm,JavaScript基本语法函数,函数的使用利用function来定义一个函数(18.htm)传入参数(19.htm)传出值(20.htm),函数的参数传递,preloadTreeImages(1.gif,2.gif,3.gif);functionpreloadTreeImages()for(vari=0;iarguments.length;i+)varimg=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/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),JavaScript的对话框,警告框(alert)：出现一个提示信息21.htm询问框(prompt)：返回输入的值22.htm确认框(confirm)：根据不同的选择，返回true/false23.htm,使用eval,不使用evalalert(3+2);-32使用eval的上下文环境alert(eval(3)+eval(2);-5eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它,eval_1.htm,Eval_2.htm,javascripthijacking,函数劫持通过替换js函数的实现来达到劫持这个函数调用的目的,hook.htm,this指的是当前的对象,24.htm函数调用时使用thisobject.htm自定义对象,随时可以增加属性,方法class.htm定义类,对象,forinIn后跟一个对象，对此对象中的所有元素循环一次(25.htm25_1.htm)with为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象(26.htm)new用于生成一个新的对象(27.htm),TryCatch,trydocument.writeln(Beginnngthetryblock)document.writeln(Noexceptionsyet)/Createasyntaxerroreval(6+*3)document.writeln(Finishedthetryblockwithnoexceptions)catch(err)document.writeln(Exceptioncaught,)document.writeln(Errorname:+)document.writeln(Errormessage:+err.message),窗口中的对象和元素(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,BrowserObjectModel,技巧：setTimeout、setInterval,/vara=window.setInterval(alert(Hello,world),2000);vara=window.setTimeout(alert(Hello,world),2000);,趣味JavaScript程序,黑客帝国(ex1/mat