XM笔试总结web编程

- 中国最先进的大学生互动求职平台 2010XM_笔试总结_web编程1，W3CW3C（World Wide Web Consortium，http:/www.w3.org/）创建于 1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体，它的主任Tim Berners-Lee（http:/www.w3.org/People/Berners-Lee/）在1989年发明了Web。推行的主要规范：HTML，CSS，XML，XHTML和DOM（Document Object Model）。Web标准化的好处：1）加速开发2）易于维护，增加机会3）拓展访问渠道4）节约带宽成本5）提高用户体验6）转变被证明是值得的2，请问一份标准的HTML文档有哪几个必须的HTML标签？3，html事件如何添加？事件是能被对象识别的动作，事件可以由用户操作、程序代码或系统行为来触发。HTML文档中的每个元素都是一个拥有属性、方法和事件的对象，称为文档对象。当触发一个文档对象中的某个事件时，该对象能够按照某种方式做出响应，但具体的响应过程需要由程序员编写脚本代码来实现，这种过程称为事件过程。常用的四种方法（VB）：通过过程名调用事件过程通过控件的属性调用事件过程在标记中直接编写脚本语句标记设置FOR/EVNET属性调用事件过程 Javascript中常用2）3）方法，VBscript用1）2）3）4）方法。4，web标准网站有什么好处？网站标准的目的就是： 提供最多利益给最多的网站用户 确保任何网站文挡都能够长期有效 简化代码、降低建设成本 让网站更轻易使用，能适应更多不同用户和更多网路设备 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。采用网站标准的好处-对网站浏览者的好处： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 所有页面都能提供适于打印的版本 -对网站所有者的好处： 更少的代码和组件，轻易维护 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，天天节约超过两兆字节（terabytes）的带宽。 更轻易被搜寻引擎搜索到 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。5，用html实现如下表格：三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并               Key points：table没有定义border，则看不明显边界；没有定义width,height则根据内容自动调整大小。Td格子里面没有内容，则不会显示格子的边界，可考虑加一个空格，即 Td里面定义colspan和rowspan表示该格子占用的行数和列数；6，HTML 语言中，设置表格中文字与边框距离的标签是什么？cellpadding：格子中文字与边框的距离cellspacing：格子与格子之间的距离7，在HTML中，如何在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件？发送反馈信息8，在HTML中，如何实现每隔60秒自动刷新页面的功能？9，在HTML的标签中，valign 属性的不能取的值是（C）（选择一项）top B、middle C、center D、bottom10，要在网页中显示“欢迎访问我的主页！”，要求字体为隶书、字体大小为6。PFONT SIZE=6 FACE =“隶书” 欢迎访问我的主页！/FONT11，要在表单中创建一个多行文本输入框，初始值为：这是一个多行文本框。TEXTAREA NAME=“text”COLS=20 ROWS=5这是一个多行文本框/TEXTAREA12，要在网页中显示下列内容：售票员说：定价：￥68 售票员说："定价：¥68 "13，网页测试需要做些什么？页面是否美观，链接是否准确，能否兼容不同浏览器14，李白诗词 的作用是什么？跳转到poem.htm的锚记点“李白”处15，在一个htm页面中导入在同一目录下的“StyleSheet1.css”样式表？1）import StyleSheet1.css;2）16，实现鼠标悬停时，超级链接无下化线？用CSS实现： a:hover text-decoration:none;17，ID为left的DIV标签，用CSS设置DIV的左边为红色实线？#leftborder-left:1px #FF0000 solid;18，CSS选择器：1）简单选择器（仅描述html的元素） body background-color:red; 2）id选择器(html元素的id属性，唯一) #myid background-color:red; 3）class选择器(html元素的class属性) .myclass background-color:red; 4）多个html元素共用一个样式的定义 body,table,tr,td background-color:#000000; 19，css 中id和class如何定义,哪个定义的优先级别高? 如class定义一个html元素没有边框,而id定义这个元素有边框,结果呢?id定义的优先级级别高，所以会有边框。20，如何指定div元素中样式类为c1,字体大小为9pt 的css样式?1)在css文件中定义类c1.c1FONT-SIZE: 9pt; 2)设置div使用该样式。21，简述ajax的原理.Ajax：Asynchronous JavaScript and XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。Ajax的工作原理相当于在用户和服务器之间加了-个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。AJAX的使用特点：1）基于web标准（standards-based presentation）XHTML+CSS的表示；2）使用 DOM（Document Object Model）进行动态显示及交互；3）使用 XML 和 XSLT 进行数据交换及相关操作；4）使用 XMLHttpRequest 进行异步数据查询、检索；5）使用 JavaScript 将所有的东西绑定在一起。22，js中如何定义class？1）工厂方式 function Car() var ocar = new Object; ocar.color = blue; ocar.doors = 4; ocar.showColor = function() document.write(this.color) ; return ocar; var car1 = Car(); var car2 = Car(); 调用此函数时将创建新对象，并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然也可以通过给它传递参数来改版这种方式。function Car(color,door) var ocar = new Object; ocar.color = color; ocar.doors = door; ocar.showColor = function() document.write(this.color) ; return ocar; var car1 = Car(red,4); var car2 = Car(blue,4); car1.showColor() /output:red car2.showColor() /output:blue 2）构造函数方式 function Car(color,door). this.color = color; this.doors = door; this.showColor = function(). alert(this.color) ; var car1 = new Car(red,4); var car2 = new Car(blue,4); 可以看到构造函数方式在函数内部没有创建对象，是用this关键字。因为在调用构造函数时已经创建了对象，而在函数内部只能用this来访问对象属性。 现在用new来创建对象，看起来像那么回事了！但是它同工厂方式一样。每次调用都会为对象创建自己的方法。 3）原型方式 该方式利用了对象的prototype属性。首先用空函数创建类名，然后所有的属性和方法都被赋予prototype属性。 function Car() Car.prototype.color = red; Car.prototype.doors = 4; Car.prototype.showColor = function(). alert(this.color); var car1 = new Car(); var car2 = new Car(); 在这段代码中，首先定义了一个空函数，然后通过prototype属性来定义对象的属性。调用该函数时，原型的所有属性都会立即赋予要创建的对象，所有该函数的对象存放的都是指向showColor()的指针，语法上看起来都属于同一个对象。 但是这个函数没有参数，不能通过传递参数来初始化属性，必须要在对象创建后才能改变属性的默认值。 原型方式有个很严重的问题就是当属性指向的是对象时，如数组。 function Car() Car.prototype.color = red; Car.prototype.doors = 4; Car.prototype.arr = new Array(a,b); Car.prototype.showColor = function() alert(this.color); var car1 = new Car(); var car2 = new Car(); car1.arr.push(cc); alert(car1.arr); /output:aa,bb,cc alert(car2.arr); /output:aa,bb,cc 这里由于数组的引用值，Car的两个对象指向的都是同一个数组，所以当在car1添加值后，在car2中也可以看到。联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象，是用构造函数定义对象的非函数属性，用原型方式定义对象的方法。 function Car(color,door) this.color = color; this.doors = door; this.arr = new Array(aa,bb); Car.prototype.showColor() alert(this.color); var car1 = new Car(red,4); var car2 = new Car(blue,4); car1.arr.push(cc); alert(car1.arr); /output:aa,bb,cc alert(car2.arr); /output:aa,bb 4）动态原型方式 动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。 function Car(color,door) this.color = color; this.doors = door; this.arr = new Array(aa,bb); if(typeof Car._initialized = undefined) Car.prototype.showColor = function() alert(this.color); ; Car._initialized = true; 动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次 5）混合工厂方式 它的目的师创建假构造函数，只返回另一种对象的新实例。 function Car() var ocar = new Object(); ocar.color = red; ocar.doors = 4; ocar.showColor = function() alert(this.color) ; return ocar; 与工厂方式所不同的是，这种方式使用new运算符。以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式，此外，动态原型方式也很流行。在功能上与构造函数/原型方式等价。 23，innerText与innerHTML？innerHTML，是在块中加html代码；innerText 在块中加文字。 (注意大小写) 例子：如果 innerHTML 属性设置为 Hello ,则 字符不会分别转换为 & lt; 和 & gt;.呈现的输出仍将是： Hello .浏览器将检测 标记并用粗体显示“Hello”文本.如果 innerText 属性设置为 Hello ,则 符号分别转换为 & lt; 和 & gt;.呈现的输出将是：& lt; b & gt; Hello & lt; /b & gt;.& lt; 和 & gt; 实体将向浏览器指示这些字符将显示在页上.浏览器将不检测 标记并用粗体显示该文本.显示在页上的文本是： Hello .24，javascript判断浏览器类型？1）方法一：function CheckBrowser() var cb = Unknown; if(window.ActiveXObject) cb = IE; else if(navigator.userAgent.toLowerCase().indexOf(firefox) != -1) cb = Firefox; else if(typeof document.implementation != undefined) & (typeof document.implementation.createDocument != undefined) & (typeof HTMLDocument != undefined) cb = Mozilla; else if(navigator.userAgent.toLowerCase().indexOf(opera) != -1) cb = Opera; return cb; 2）方法二：if (window.XMLHttpRequest) /Mozilla, Safari,.IE7 alert(Mozilla, Safari,.IE7 ); if(!window.ActiveXObject)/ Mozilla, Safari,. alert(Mozilla, Safari); else alert(IE7); else alert(IE6); 25，javascript对象：1）核心对象：2）窗口对象3）表单对象：4）文档对象：浏览器对象：对象层次图示：26，window的常用方法：alert，prompt，confirmsetTimeout，clearTimeout，setInterval，clearIntervalmoveTo，moveBy，resizeTo，resizeByScroll，scrollTo，scrollByOpen，closeBack,forward，stopBlur，focusFind,printcaptureEvents ，disableExternalCapture，enableExternalCapture ，handleEvent，releaseEvents 实例：1）navigate： 将网页导航到一个指定的URL,如:window.navigate();2）setInterval 指定浏览器在多长时间就执行某个函数中的内容,function aa()alert(aa); window.setInterval(aa,100);指浏览器每隔100毫秒打印出一个对话框3）setTimeout 设置浏览器过多长时间以后去执行某个操作,公执行一次.如:function aa()alert(aa); window.setTimeout(aa,100);指浏览器过100毫秒后打印出一个对话框4）clearInterval 取消setInterval方法设置的效果5）showModalDialog 产生一个模态的窗口,该窗口是没有任务栏和地址栏的 showModelessDialog 产生一个非模态的窗口,该窗口是没有任务栏和地址栏的27，window的常用属性：closed：窗口是否已经关闭？defaultStatus：窗口状态栏上显示的默认信息。document：当前document对象。frames：当前窗口中所有的frame组成的数组。history：窗口浏览URL历史信息数组。innerHeight，innerWidth：窗口内容区大小（px）length：frame的数量。Location：当前URL的信息。Locationbar：浏览器窗口的地址栏。menubar：浏览器窗口的菜单栏。Name：窗口名字。Opener：打开该窗口的父窗口。outerHeight，outerWidth：窗口整体大小pageXOffset，pageYOffset：当前坐标位置（px）；Self：自己Status：状态栏信息。Top：最顶层窗口Window：当前窗口。28，document对象常用方法：write，writelnOpen，closegetSelection4）captureEvents，handleEvent， releaseEvents，routeEventdocument.write() /动态向页面写入内容document.createElement(Tag) /创建一个html标签对象document.getElementById(ID) /获得指定ID值的对象document.getElementsByName(Name) /获得指定Name值的对象document.body.appendChild(oTag)29，web前端优化机制？1）内容上的优化：1）尽量减少 HTTP 请求有几种常见的方法能切实减少 HTTP 请求：1) 合并文件，比如把多个 CSS 文件合成一个； 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；3) 图像地图 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.2）减少 DNS 查找3）避免重定向 比如对 Web 站点子目录的后面添加个 /，就能有效避免一次重定向。 与 二者之间是有差异的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能消除使得 Ajax 可缓存响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是Cache 。其它的一些优化规则对这一条也是有效的。 5）延迟载入组件 (Post-load Components)6）预载入组件 (Preload Components)7）减少 DOM 元素数量 (Reduce the Number of DOM Elements)8）切分组件到多个域 (Split Components Across Domains)主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。9）最小化 iframe 的数量 (Minimize the Number of iframes)10）杜绝 http 404 错误2）面向Server端：1）使用 CDN (Use a Content Delivery Network)2） 添加 Expires 或 Cache-Control 信息头3）压缩内容 (Gzip Components)4）设置 Etags (Configure ETags)5）尽早刷新 Buffer (Flush the Buffer Early)6）对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)XMLHttpRequest POST 要两步，而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL长度是 2K。 3）面向cookie1）缩小 Cookie (Reduce Cookie Size)根据 RFC 2109 的描述，每个客户端最多保持 300 个 Cookie，针对每个域名最多 20 个Cookie (实际上多数浏览器现在都比这个多，比如 Firefox 是 50 个) ，每个 Cookie 最多 4K，注意这里的 4K 根据不同的浏览器可能不是严格的 4096 。别扯远了，对于 Cookie 最重要的就是，尽量控制 Cookie 的大小，不要塞入一些无用的信息。2）针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)这个话题在此前针对 Web 图片服务器的讨论中曾经提及。这里说的 Web 组件(Component)，多指静态文件，比如图片 CSS 等，Yahoo! 的静态文件都在 上，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名 () 的影响。30，IE与FF在CSS设置方面有什么不同？例举说明1）FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行2）FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中3）FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width4）FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式5）cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以31，javascript闭包？Closure，所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。简单来讲，ECMAScript 允许使用内部函数即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。 闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。比如，在对函数调用的过程中，将一个对内部函数对象的引用指定给另一个对象的属性。或者，直接将这样一个（内部）函数对象的引用指定给一个全局变量、或者一个全局性对象的属性，或者一个作为参数以引用方式传递给外部函数的对象。保护函数内的变量安全。以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。 闭包使用：1）在内存中维持一个变量。依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。 2）通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）3）私有属性和方法在Constructor外是无法被访问的。function exampleClosureForm(arg1, arg2) var localVar = 8; function exampleReturned(innerArg) return (arg1 + arg2)/(innerArg + localVar); /* 返回一个定义为 exampleReturned 的内部函数的引用 -:- */ return exampleReturned;var globalVar = exampleClosureForm(2, 4);32，javascript跑马灯RandomRunHouse msgArray = new Array(4); msgArray0 = 欢迎光临; msgArray1 = 白日依山静，黄河入海流; msgArray2 = 人道是，三国周郎赤壁; msgArray3 = EmailTo: kof_he; var msg = ; var flag = true; var addOne = 1; var space = 50; var addTwo = 0; function randomMessage() if ( flag = true ) / 判断次句跑马灯是否跑完，跑完则重新随机获得语句 msg = msgArrayMath.floor( Math.random() * msgArray.length ); flag = false;/ 表示跑马灯已开始，下次调用此函数则不在随机获得语句，直到跑马灯结束 if ( addOne msg.length ) / 在状态栏中先一个字一个字递加的把msg字符串显示出来 window.status = msg.substring( 0, addOne ); addOne+; else var scroller = ; for ( i = 0; i space + msg.length ) addOne = 0; addTwo = 0; flag = true; setTimeout( randomMessage(), 100 ); 33，javascript浅复制与深度复制浅复制(影子克隆):只复制对象的基本类型,对象类型,仍属于原来的引用. 深复制(深度克隆):不仅复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的. 例子： New Document 深度clone方法1：object.prototype.clone=function() if(typeOf(this)!=object)return this; if(this=null)return this; var newObj=new Object(); for(var i in this) newObji=thisi.clone; return(newObj);深度clone方法2：function clone(obj)function clone();clone.prototype=obj;return new clone();34，浏览器中用javascript如何取得用户系统当前的时间？var now=new Date();var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();document.write(当前时间是:+hour+:+min+:+sec);35，JavaScript脚本为Array对象添加一个indexOf方法。Array.prototype.indexOf=function(item,i) i|i=0; var length=this.length; if(i0)i=length+i; for(;ilength;i+) if(thisi=item)return(i); return(-1);36，请问CSS中的margin和padding有哪些异同？如何选择使用哪个？margin是外边距，padding是内边距。设置边框以外的间距使用margin，设置边框以内与内容content的间距，使用padding！37.写一个网页版的comboBox,即可以下拉选择又可以文本框输入的组合文本框。var inputs=document.getElementsByTagName(input);for (var i=0;iinputs.length;i+) if (inputsi.type=text&inputsi.className=combobox) var input=inputsi; var items=input.item.split(,); var select=document.createElement(select); for(i=0;iitems.length;i+) option=document.createElement(option) ; option.value=i; option.text=itemsi; select.options.add(option); select.style.position=absolute;select.style.width=input.clientWidth+20+px;select.style.clip=rect(auto auto auto +input.clientWidth+px) ;select.onchange=function() var input=this.nextSibling; input.text=this.text; input.select(); input.focus();var parent=input.parentNode;parent.insertBefore(select,input); 38，用javascript调用CSS中的属性：1）CSS文件中存在如下style：.newsBody padding: 0 20 0 20; 2）网页代码中有： 3）在javascript中可以使用document.getElementById(newsBody).style.Padding来调用CSS属性。39，ActionScript与JavaScript的交互？ActionScript提供了外部API，那就是ExternalInterface 类，通过ExternalInterface类可以实现ActionScript 和 Flash Player 容器之间的直接通信。1）在JavaScript中调用ActionScript方法在 Flash Player 中，可以使用 HTML 页中的JavaScript来调用 ActionScript 函数。 ActionScript 函数可以返回一个值，JavaScript 会立即接收它作为该调用的返回值。第一步：在ActionScript 中调用addCallback()把ActionScript 注册为可从容器调用。 成功调用 addCallBack() 后，容器中的 JavaScript 代码可以调用在 Flash Player 中注册的ActionScript方法。addCallBack定义如下：addCallback(functionName:String, closure:Function):voidfunctionName参数就是在Html页面中脚本调用的方法名。closure参数是要调用的本地方法，这个参数可以是一个方法也可以是对象实例。 第二步：那么在Html页面中，先获得SWF对象的引用，也就是用声明的Swf的对象，比如说是testJs。然后就可以用以下方式调用ActionScript中的方法。function callActionScript() alert(document.getElementById(“testJs”).sayHelloWorld(“奎跃翔“); 2）在ActionScript中调用 JavaScript在ActionScript中调用JavaScript最简单的方法是使用ExternalInterface()，可以使用此API调用任意JavaScript，传递参数，获得返回值，如果调用失败，ActionScript抛出一个异常。mx:Application xmlns:mx=”htt