Web笔记(126页).doc

《Web笔记(126页).doc》由会员分享，可在线阅读，更多相关《Web笔记(126页).doc（116页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、- * HTML/JavaScript *HTMLHTML(超文本标记语言) *纯文本格式，内含文本信息和文本标记 *标记大小写不敏感 *后缀.html或.htm >或 >& &或 & "或 "有序列表 无序列表 *.* 分隔线大家好常见的块级元素：会自动换行一般用于布局、.行内元素：除块级元素之外一般用于信息提示帧： 框架 -不能写在body里面如： -将该窗口划分为row行scols列 -将该窗口划分为row行scols列 如： CSS (1)什么是CSS?cascading style sheet 级联样式表，用于为html或者xml添加外

2、观，即展示的效果。 在web标准（w3c）当中，建议一个页面，应该这样设计： 页面的内容，即数据-html文档。 页面的效果，即外观-css文档（或xslt）。 页面的行为，即动态的效果-ECMAsript=javascript (2)为什么要使用CSS？ css定义了页面展示的效果，html负责提供数据，这样可以将页面中的数据与显示效果 分开，便于页面的维护。比如：多个页面引用了同一个样式文件，那么，对样式文件的 修改会影响到所用的页面。 (3)css的基本语法： A、css的选择器 1）基本(标签)选择器 标签名 -依据标签名来选择施加样式的对象 属性名1：属性值1； 属性名2：属性值2；

3、 . “css样式可以被继承，即子标签会继承父标签的样式。”-就近原则 2) clss选择器 对一类标签施加样式 .选择器的名称 或者：标签名.选择器的名称 属性名1：属性值1； 属性名2：属性值2； . 3）id选择器 (只能用一次，代码中id唯一) #选择器的名称 属性名1：属性值1； 属性名2：属性值2； . 4) 选择器的扩展 第一种扩展方式： 派生选择器 例如：#content pcolor:blue id选择器：对id=content中的p标签 li spanfont-color:red 标签选择器：对li标签中的span标 签管用 第二种扩展方式： 可以对选择器进行组合，这些选择

4、器就可以共享样式 例如：h1,h2,h3color:green 对h1、h2、h3标签都管用 5)浏览器对css的支持程序不一致。 B、css引入的方式： 方式一：将CSS样式写入到一个.css文件当中，然后使用 外部样式 引入 方式二：将css样式写入到html文件内部。 内部样式 XXXXXXX 方式三：将css样式直接定义在html标签里面。内联样式 -采用html标签的style属性来定义的样式 C、css样式的优先级 从低到高：外部样式内部样式内联样式 D、“css样式可以被继承，即子标签会继承父标签的样式。”-就近原则 (4)两个重要的css属性 position: static

5、(默认值)浏览器会依据从上到下，从左到右来摆放 absolute 参照父元素，偏移。lefttop relative 先按默认方式摆放，然后再偏移。 如： #d1position:absolute; left:30px; top:50px; #d2position:relative; left:30px; top:50px; display: block (默认值)按块元素的方式显示 inline 按行内元素的方式显示 none 不显示。 如： #d1display:none; JavaScript (1)什么是Javascript? 网景公司开发的一种客户端脚本语言（不需要编译，直接在浏览器

6、端执行）。 其作用是： A、在客户端生成动态页面 B、在客户端做数据的验证（与业务无关，比如：非空验证、格式验证） C、通过调用浏览器所提供的XmlHttpRequest对象，向服务器发关异步请求。 （ajax核心技术之一） (2)javascript可以做什么？ javascript可以对一个html页面如下操作： *增加html节点（浏览器读取一份html文档，其实质是将该文档加载到内存，转换 成一棵dom树）， *删除html节点、 *修改html节点的属性、 *修改html节点的样式等等。 (3)javascript的语言基础 A、数据类型 基本类型：number 数字 boolean

7、 布尔类型 string 字符串 null 空 undefined 未定义 如：var i=3; 任何类型都可以由var来定义 i=abc;/js中的数据类型在运行时确定，并且可以随时改变其数据类型。 js基于事件来进行编程：当用户对浏览器当中的某个组件：比如：按钮执行某种操作（ 点击），或者浏览器本身，比如当浏览器加载完html文档）也会产生相应事件。然后， 事件会触发事先绑定的代码，该代码会执行，用来处理该事件。 以上过程可以称为绑定事件处理代码 B、复合类型： 数组： 函数： 对象：js中，所有的对象都是Object的子对象，不支持继承与多态。 如何创建对象： 第一种方式：var obj

8、=new Object(); obj.name=zs;/可以动态地为一个对象增加新 的属性和方法 第二种方式：function person(name,age) . var p=new person(zs,22) /js没有类的严格的定义，函数相当于java语言 中的一个类，该函数也是该类的唯一构造器。 C、运算符： = 比较数据类型再比较值。其他与java类似。 D、流程控制： for in循环，可以遍历js对象的属性。其他与java类似。 (4)js的代码可以写在哪些地方？ A、写在一个单独的文件里，该文件以.js结尾。 B、写在html文件里。 function sayHello()al

9、ert(hello2); C、写在html标签里。 test2 (5)dom 1)什么是dom？document object model 即文档对象模型，w3c定义，它的作用是将一个结构文档（xml,html）转变成一棵树 ，通过对树的操作（节点的增删改查）来实现对文档的操作。 dom 模型提供了对节点的增删改查的api,程序通过api的调用，来实现节点的处理（ 包括重新生成新的结构化文档）。 2)浏览器如何处理html文档 浏览器读取html文档后，会按照w3c所定义的w3c dom 模型将其转化成一棵内存当中 的树，然后按照树中的数据显示html,js通过对树中节点的操作，来实现交互页面

10、。 3)w3c dom 模型的结构 Node Document HTMLDocument -表示整个HTML文档 HTMLBodyElement -表示HTML 的实例 Element HTMLElement HTMLFormElement - HTMLInputElement HTMLSelectElement HTMLOptionElement HTMLDivElement HTMLTableElement HTMLTableCaptionElement HTMLTableRowElement HTMLTableCellElement . 4)dom 的操作 A、查询 document.g

11、etElementById();-依据html标签的id号查询。 document:是HtmleDocumentElement的实例，代表当前整个html文档， document可以直接使用，严格来说，应这样写：window.document. 或者遍历不建议使用，因为浏览器不兼容 parentNode -找到父节点 previousSibling -上一个兄弟节点 nextSibling -下一个兄弟节点 childNodes firstChild lastChild 不兼容：FileFox:会将空白当作节点来处理，而IE：忽略空白 getElementsByTagName(tagName)

12、;-返回当前节点之下所有名叫tagName的标签。 B、创建 document.createElement(Tag) document.createTextNode(text); C、添加 somenode.appendChild(Node)将Node节点添加到somenode的孩子节点的末尾 somenode.insertBefore(NewNode,refNode)将NewNode节点插入到refNode节点 之前 somenode.replaceChild(newNode,refNode)以newNode替换refNode D、删除 removeChild 案例： 表单验证 就是在表单提

13、交给服务器之前，先对表单中的数据进行数据格式的验证（包括非 空验证、数据格式等等）。 onblur焦点失去事件 5)如何禁止浏览器的一些默认行为： 表单： 默认情况下，点击“提交”，浏览器会将表单中的数据提交给服务器 改变方式 ： -提交事件 链接： 默认情况下，点击“链接”，浏览器会跳转到链接所指向的地址 改变方式 ： 6)html domDHTML A、html dom:在w3c dom出现之前，浏览器使用html dom模型。大部分浏览器同时支 持html dom和w3c dom。 B、几个主要的dom对象 1、window对象 open() 返回值为要打开的这个窗口对象句柄 打开一个新

14、的窗口，例如： window.open (1.html, new, height=100, width=200, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no)； 1.html 弹出窗口的文件名； new 弹出窗口的名字；如果该参数指定了一个已经存在的窗口， 则 open() 方法不再创建一个新窗口，而只是返回对指定窗口的句柄(引用) 即新的html页面会将旧的html页面覆盖。 close() 关闭窗口 返回值为窗口对象句柄 document属性 获得Docu

15、ment对象 location属性获得Location对象 alert()弹出一个警告对话框 confirm()弹出一个选择对话框，返回用户是否确认。 prompt()弹出一个供用户输入信息的对话框，返回用户输入信息。 setTimeout(f1,1000) 用于在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 可取消由 setTimeout() 方法设置的 timeout。 setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。 该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval()返回的 I

16、D 值可用作 clearInterval() 方法的参数 clearInterval（) 该方法可取消由 setInterval() 设置的 timeout。 其参数必须是由 setInterval() 返回的 ID parent属性框架中，父窗口window.parent opener属性打开当前窗口的窗口2、document 方法： write(str)直接向页面输出数据 getElementById(id) 属性： forms 返回所有的表单 3、location 属性： href:代表浏览器访问的地址。 4、select(下拉列表或者多选框) selectedIndex 属性 可设置或

17、返回下拉列表中被选选项的索引号 options 返回包含 元素中所有 的一个数组。 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。 如果把 options 数组中的一个元素设置为 null，那么选项就会从Select 对象中删除. select对象可以认为挂着一系列的Option对象。在内在当中，对应的节点就是Option: selected属性（true:表示该选择被选上了，false:反之） onchange 当改变选择时调用。 可以通过 new Opti

18、on(desc,value)的方式，来创建一个选项。 案例： 菜单 级联下拉列表 移动多选框 5、表格 属性 rows rows 集合返回表格中所有行的一个数组，该集合包括 、 和 中定义的所有行。 tBodies tBodies 返回包含表格中所有 tbody 的一个数组。 tFoot 返回表格的 TFoot 对象。如果不存在该元素则返回null。 tHead 返回表格的 THead 对象。如果不存在该元素则返回null。 方法 insertRow() insertRow(index) 方法用于在表格中的指定位置插入一个新行。 返回一个 TableRow，表示新插入的行。 该方法创建一个新的

19、 TableRow 对象，表示一个新的 标记， 并把它插入表中的指定位置。 deleteRow() deleteRow(index) 方法用于从表格删除指定位置的行。 TableRow对象有如下属性和方法TableRow为insertRow()返回的tableRow 属性 cells cells 返回包含行中所有单元格的一个数组 方法 deleteCell() deleteCell(index) 方法用于删除表格行中的单元格（ 元素）。 insertCell() insertCell(index) 方法用于在 HTML 表的一行的指定位置 插入一个空的 元素。 返回一个 TableCell 对

20、象，表示新创建并被插入的 元素 7)事件 1、js如何处理事件？ A、当用户点击某个组件，（比如按钮），也就是说用户对浏览器中的组件做了某 些操作，浏览器会产生事件。 B、浏览器自身也会自动产生事件（比如：当浏览器加载完整个html文档）。 2、如何处理？ 绑定相应的事件处理代码。（相当于注册一个监听器）； A、将事件处理代码绑定到html元素之上。 B、将事件处理代码绑定到dom对象之上。-缺点：无法传参数 obj.onclick=事件处理代码。 优点：实现html代码与js代码的分开 例： function f1() var obj=document.getElementById(a1);

21、 . test var obj=document.getElementById(a1); obj.onclick=f1; C、使用浏览器特定的绑定方式。不能保持浏览器的兼容性 3、事件对象 A.获得事件对象的方式 IE: 支持全局事件对象，即可以直接使用event Firefox: 不支持全局事件对象，需在方法里传参(event) -IE也支持 event.clientX event.clientY -鼠标点击的坐标 B.通过事件对象获得事件源即产生该事件的组件 IE: event.srcElement Firefox: event.target 判断浏览器的版本： if(window.nav

22、igator.userAgent.indexOf(MSIE)!=-1) /是IE else if(navigator.userAgent.indexOf(Firefox)!=-1) /是Firlfox 为了兼容也可以不判断浏览器的版本，可以直接： var srcObj=e.srcElement | e.target; alert(srcObj.innerHTML); 4、事件冒泡机制 子节点抛出的事件对象会向上抛出给父节点。若父节点还有父节点则再上抛 取消事件冒泡 e.cancelBubble=true; 5、常见的事件 onclick 鼠标单击ondblclick 鼠标双击onfocus 获

23、得焦点onblur 失去焦点onchange 内容改变onload 元素加载显示onunload 页面关闭onmouseout 鼠标移出onmouseover 鼠标移动 8、js框架 prototype $(a1)相当于document.getElementById(a1); $F(a1)相当于document.getElementById(a1).value; $(id1,id2,.)一个存放了所有document.getElementById()的数组 可用于多个复选框 练习： 使用prototype重写表单验证、级联下拉列表、移动多选框 * Servlet/JSP *1、什么是Servl

24、et? sun公司开发的一种用于扩展web服务器功能的一种组件技术。该组件要求实现Servlet接 口，并且在符合Servlet规范的web服务器中运行。2、组件和容器： (1)什么是组件？ 按照特定规范开发的程序，该程序不用考虑一些基础服务(比如：网络通讯问题、多 线程.),只需要实现业务逻辑。 特点： 必须依赖于容器才能运行。 必须符合规范。 (2)什么是容器？ 也是一个按照特定规范开发的程序，实现了基础服务，并提供组件的运行环境。 (3)组件+容器：这种编程模式的优点： A、简化编程：因为基础服务代码不用再写了，容器已经实现； B、组件不依赖于特定的容器，可以在符合规范的任意一种容器上都

25、能运行。3、tomcat 开源的servlet容器，它实现了web服务器的大部分功能。 tomcat的安装 (1)解压缩到主目录 (2)配置环境变量 JAVA_HOME:jdk安装的目录 CATLINA_HOME:tomcat安装的目录 (3)启动和关闭服务器 启动： cd CATALINA_HOME/bin sh startup.batWindows / startup.shLinux 检测是否启动成功 http:/localhost:8888 关闭： windows:shutdown linux/unix:sh shutdown.sh4、开发一个Servlet step1:写一个java类

26、，实现Servlet接口或者继承HttpServlet类。 step2:编译(依赖Servelt相关的jar包:servlet-api.jar) step3:定义一个目录结构： appname(任意的一个名字) WEBINF(必须是这个名字，包括大小写) classes(必须是这个名字，放.class文件) lib(必须是这个名字，但是是可选.3的，lib里放servlet运行时依赖的 jar文件即服务器也就是servlet容器没有该jar文件) web.xml(必须按照规范来写) step4:部署(将第三步定义的目录结构copy to 服务器特定的目录webapps文件夹， 或者也可以将第三

27、步定义的目录结构使用jar命令打成一个.war的包，然 后再copy to 服务器特定的目录) step5:启动服务器 step6:访问Servlet: http:/服务器的IP:服务器的port/appname/url-patternservlet url5、Servlet是如何运行的? 浏览器发送请求到达服务器，服务器会将请求中的数据打包成一个请求对象是 HttpServleRequest接口的实现类的一个实例，该对象里包含了请求中的数据，方便 Servlet从请求中获取数据。同时还会创建一个响应对象是HttpServletResponse接口 的实现类的实例。接下来，服务器会依据请求路径

28、查看web.xml文件，找到相应的 Servlet。创建该Servlet实例并调用service方法。Servlet可以从请求对象中获取数 据。并将执行的结果通过响应对象进行输出。6、Http协议 (1)什么是http协议？ hypertext transport protocal 超文本传输协议 定义了浏览器与web服务器之间数据传输的过程与数据格式。 (2)传输的过程： 浏览器向服务器发送连接请求。 浏览器与服务器之间建立连接。 浏览器向服务器发送数据。 服务器处理请求，并发送回应。 服务器关闭连接。 浏览器如果要再发送请求数据，需要重新建立新的连接。 (3)数据格式 请求数据（请求数据包） A、请求行 请求方式(get/post) 请求路径 协议的版本号(1.0/1.1) B、若干消息头 消息头：指的是浏览器与服务器之间事先约定的一些通讯的规则，由w3c来定 义。比如：浏览器可以通过cookie消息头，向服务器发送cookie。 C、实体内容 放置请求数据（请求方式是post）