1、资源下载：www.aifuzhu.top随着各大互联网公司设立了 Web 前端开发工程师、设计工程师等职位，web 前端越来越得到互联网企业的认可。而且其重视程度与地位也随着浏览器 端的富客户端的体现而日益提高。 眼前对 HTML5 的未来和走向，业内的预测是会和Flash、Silverlight 等相结合，从而取代传统的客户端应用程序。而实现这个目标的客户端核 心工作是有 Web 前端工程师来完成的。 从另一个角度，对于 web 产品来说，交互和用户体验是产品的第一价值，这部分价值的体现就是在 web 前端。可以说 web 前端是一个 web 产品的长相和谈 吐、行为。下面就简单的说明一下
2、web 前端的组成部分。1. UI 设计部分这是 web 产品化的第一步。这个部分通常在稍大型的公司里，被单独设立为一个部门或者一些人来工作。主要是要掌握 Photo, AI,可以很快的将创意转化为平面设计图，并制作 PNG 等小图片。 同时，UI 设计还要预包含用户交互设计的元素，如何和用户交互的基本原型等。2. HTML/CSS,页面静态化这是 web 产品化的 2 步，就是将 UI 设计师的设计图切成静态页面。这里的“切” 不是单纯的切，而是使用 css 里面背景色和边框样式等方式对设计原稿 进行解读，并形成符合 web 标准的 html 代码。这里 web 前端还需要将图片、html
3、页面以及 css 样式进行合理的文件分布安排等3.Javascript, AS 客户端动态化这是 web 产品化的 3 步，工程师使用 DOM 操作、AJAX ，实现数据和服务端的通信以及本地样式的切换。同时，由于 Javascript、 AS 是一门动态语言，所以这部分的编码要求 web 前端工程师有较好的编码习惯，能写高效率的 OOP 代码，并对代码进行压缩上线以降低带宽消耗等。4.Flash、Silverlight、Video 多媒体化这部分针对不同 web 产品有不同的要求，通常要求是可以使用 Flash 和 web、Server进行交互，并对 Flash 进行设计与开发。5.PHP、
4、Java 等 CGI, 服务端通信基本知识和编码这部分主要是更好的使用 Ajax 等技术，了解服务端的工作方式将更有利于 web 前端工程师工作的开展。通常优秀的 web 前端工程师都是对服务端的一 种开发语言很了解。6web 开发脚本开发环境用什么、调试用什么试过 aptana，现在就用 editplus调试肯定用 firebug，ie 下看页面 DOM 用 IEInspectorweb 前端产品的开发流程答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后 png 或者 psd 出效果图，切出需要的小图片，然后手写代码 div+css 构造出 页面，然后根据功能写脚本参考
5、126 邮箱首页，将所有小图片放到一个图片中，通过 css 的background-position 实现页面，还是为了优化，减少 http 连接数规避 javascript 多人开发函数重名问题答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。资源下载：www.aifuzhu.topIE、FF 下面 CSS 的解释区别答： 1.png 透明背景， FF 下面没有问题，IE 需
6、要用滤镜通道2.z-index 在 IE、 FF 下面的解释问题，IE 会认为第一个 z-index=03.长字符串，word-wrap:break-all 可以解决 IE，但是 FF 需要 overflow:hidden 才行冯舒娅补充：1、有些标签在 ff 中不能用，比如 button2、滤镜3、鼠标 cursor:hand cursor:pointer4、div 的高度自适应5、对 box 模型解析不一样6、ul、 ol 的 padding 和 margin7www.aifuzhu.topIE 都能识别*，标准浏览器（如 FF）不能识别* ；IE6 能识别*，但不能识别 !importa
7、nt；IE7 能识别*，也能识别 !important；FF 不能识别*，但能识别 !important；例如 style=”*width:10px;!important width:20px;”这样在 IE6 下宽度为 10px,在 IE7 下宽度时 20pxweb 前端技术的展望答：javascript ajax；flash AS；Flex；Silverlight4 用脚本写去除字符串的前后空格String.prototype.trim = function(mode)/前后去空格if (mode=left) return (this.charAt(0) = ” “ elseif (mod
8、e = right) return (this.charAt(this.length - 1) = ” “ else return this.trim(left).trim(right);附上 javascript 正则表达式的基本知识：g: 全局匹配i: 忽略大小写 匹配一个输入或一行的开头，/a/匹配”an A”，而不匹配”An a”$ 匹配一个输入或一行的结尾，/a$/匹配”An a”，而不匹配”an A”* 匹配前面元字符 0 次或多次，/ba*/将匹配 b,ba,baa,baaa+ 匹配前面元字符 1 次或多次，/ba*/将匹配 ba,baa,baaa? 匹配前面元字符 0 次或 1
9、 次，/ba*/ 将匹配 b,ba(x) 匹配 x 保存 x 在名为$1$9 的变量中x|y 匹配 x 或 y资源下载：www.aifuzhu.topn 精确匹配 n 次n, 匹配 n 次以上n,m 匹配 n-m 次xyz 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)xyz 不匹配这个集合中的任何一个字符b 匹配一个退格符b 匹配一个单词的边界B 匹配一个单词的非边界cX 这儿，X 是一个控制符，/cM/匹配 Ctrl-Md 匹配一个字数字符，/d/ = /0-9/D 匹配一个非字数字符，/D/ = /0-9/n 匹配一个换行符r 匹配一个回车符s 匹配一个空
10、白字符，包括 n,r,f,t,v 等S 匹配一个非空白字符，等于/nfrtv/t 匹配一个制表符v 匹配一个重直制表符w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字 )，包括下划线，如w匹配”$5.98中的 5，等于a-zA- Z0-9W 匹配一个不可以组成单词的字符，如W匹配”$5.98中的$，等于a-zA-Z0-9举例：验证 emailvar myReg = /_a-z0-9+(_a-z0-9+.)+a-z0-92,3$/;if(myReg.test(strEmail) return true;1. 如何显示/ 隐藏一个 DOM 元素？更改元素的 css s
11、tyle，设为 display: none。此外还可以将 visibility 设为 hidden，透明度设为 0，或长、宽设为 0。. 7 m: r9 n$ u7 k R w2 R) t$ n7. body width: 600px6 ) P$ z5 f/ b8. html, body margin: auto; padding: 09. div.wrap text-align:center; margin: 0; padding: 010. N2 d X14. 15. 复制代码3. CSS 中 margin 和 padding 的区别$ Q Z% 6 f0 J: x5 W t5 xretu
12、rn typeof(obj) = ”string”;$ B8 P9 B c ?: A5. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“年还剩天时分 秒”这个看我论坛右上角的就知道了0 O0 f G- i- a q) 3 t# j$ _1 R题目貌似有问题，应该是减少数据量吧。; B9 l/ h6 u5 X) x l最显著的方法是启用 GZIP 压缩。此外保持好的编码习惯，避免重复和 css、JavaScript 代码，多余的 HTML 标签和属性。0 J“ h/ T! y6 X v1 W/ x6 D7. 补充代码，是鼠标单击后 Button1 到 Button2
13、的后面, c5 0 ) # p( - var parent = this.parentNode; parent.removeChild(this); parent.appendChild(this);$ Q2 _5 x4 g8 k, e“ r2 b8. Linux 中，将 a、b 打包为 back.tar，命令是（ ）不知道。; l n3 u3 p4 _6 9. Flash、Ajax 各自的优缺点，在使用中如何取舍？ # h1 L% |/ p8 WFlash 的缺点是需要客户端安装 Flash 插件，比较大，且更改了默认的 HTML 页面行为；但可以方便地实现很多特效及动画，且具有较高权限。A
14、jax 的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是 DOM API 提供的，权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。此外，二者都不能被搜索引擎索引（Google 已支持 Flash 文本的索引），不利于 SEO。我的建议是重要和关键部分直接用 HTML，交互部分可以使用 Ajax，复杂的动画可采用Flash。1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为 5-20var reg = /a-zA-Za-zA-Z_0-94,19$/;资源下载：www.aifuzhu.topreg.test(“a1a_a1a_a1a_
15、a1a_“);2，截取字符串 abcdefg 的 efgvar str = “abcdefg“;if (/efg/.test(str) var efg = str.substr(str.indexOf(“efg“), 3);alert(efg);3，判断一个字符串中出现次数最多的字符，统计这个次数/将字符串的字符保存在一个 hash table 中，key 是字符，value 是这个字符出现的次数var str = “abcdefgaddda“;var obj = ;for (var i = 0, l = str.length; i l; i+) var key = stri;if (!obj
16、key) objkey = 1; else objkey+;/*遍历这个 hash table，获取 value 最大的 key 和 value*/var max = -1;var max_key = “;var key;for (key in obj) if (max 获取 outerHMTL div background:#0000FF;width:100px;height:100px; span background:#00FF00;width:100px;height:100px; p background:#FF0000;width:100px;height:100px; 资源下载：
17、www.aifuzhu.topSPANDIV SPANP function getOuterHTML(id)var el = document.getElementById(id);var newNode = document.createElement(“div“);document.appendChild(newNode);var clone = el.cloneNode(true);newNode.appendChild(clone);alert(newNode.innerHTML);document.removeChild(newNode);getOuterHTML(“a“);8，编写
18、一个方法 求一个字符串的字节长度假设：一个英文字符占用一个字节，一个中文字符占用两个字节function GetBytes(str)var len = str.length;var bytes = len;for(var i=0; i 255) bytes+;return bytes;alert(GetBytes(“你好,as“);9，编写一个方法 去掉一个数组的重复元素var arr = 1 ,1 ,2, 3, 3, 2, 1;Array.prototype.unique = function()var ret = ;var o = ;var len = this.length;for (v
19、ar i=0; i（2）构造函数function Animal(name, color) this.name = name;this.color = color;（3）var btn = document.getElementById(“text“);btn.onclick = function() alert(this.value); /此处的 this 是按钮元素（4）CSS expression 表达式中使用 this 关键字div element12，如何显示/隐藏一个 DOM 元素？el.style.display = “;/显示 el.style.visibility= “visi
20、ble “;el.style.display = “none“;/隐藏 el.style.visibility= “hidden “;el 是要操作的 DOM 元素区别：visibility 设置为 hidden 时，元素依然占有原来的位置13，JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现String 类型有两种生成方式：(1)Var str = “hello world”;(2)Var str2 = new String(“hello world”);function IsString(str)return (typeof str = “string“
21、| str.constructor = String);var str = “;alert(IsString(1); /falsealert(IsString(str); / truealert(IsString(new String(str); / true资源下载：www.aifuzhu.top14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“年还剩天 时 分秒” 倒计时function counter() var date = new Date();var year = date.getFullYear();var date2 = new Date(year
22、, 12, 31, 23, 59, 59);var time = (date2 - date)/1000;var day =Math.floor(time/(24*60*60)var hour = Math.floor(time%(24*60*60)/(60*60)var minute = Math.floor(time%(24*60*60)%(60*60)/60);var second = Math.floor(time%(24*60*60)%(60*60)%60);var str = year + “年还剩“+day+“天“+hour+“时“+minute+“分 “+second+“秒“;
23、document.getElementById(“input“).value = str;window.setInterval(“counter()“, 1000);15，补充代码，鼠标单击 Button1 后将 Button1 移动到 Button2 的后面 function moveBtn(obj) var clone = obj.cloneNode(true);var parent = obj.parentNode;parent.appendChild(clone);parent.removeChild(obj);16，JavaScript 有哪几种数据类型资源下载：www.aifuzh
24、u.top简单：Number，Boolean，String，Null，Undefined复合：Object，Array，Function17，下面 css 标签在 JavaScript 中调用应如何拼写，border-left-color ，-moz-viewportborderLeftColormozViewport18，JavaScript 中如何对一个对象进行深度 clonefunction cloneObject(o) if(!o | object != typeof o) return o;var c = function = typeof o.pop ? : ;var p, v;f
25、or(p in o) if(o.hasOwnProperty(p) v = op;if(v else cp = v;return c; 19，如何控制 alert 中的换行n alert(“pnp”);20，请实现，鼠标点击页面中的任意标签，alert 该标签的名称（注意兼容性）鼠标点击页面中的任意标签，alert 该标签的名称 div background:#0000FF;width:100px;height:100px; span background:#00FF00;width:100px;height:100px; p background:#FF0000;width:100px;he
26、ight:100px; document.onclick = function(evt)var e = window.event | evt;var tag = e“target“ | e“srcElement“;alert(tag.tagName);资源下载：www.aifuzhu.top;SPANDIV SPANP 21，请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：var url = “http:/ parseQueryString(url)var params = ;var arr = url.split(“?“
27、);if (arr.length 这是第一条这是第二条这是第三条内部函数被定义它的函数的外部区域调用的时候就产生了闭包。(function A() var index = 0;var ul = document.getElementById(“test“);var obj = ;for (var i = 0, l = ul.childNodes.length; i var msg=“这是一个跑马灯效果的 JavaScript 文档“;var interval = 100;var spacelen = 120;var space10=“ “;var seq=0;function Scroll()
28、 len = msg.length;window.status = msg.substring(0, seq+1);seq+;if ( seq = len ) seq = spacelen; window.setTimeout(“Scroll2();“, interval );elsewindow.setTimeout(“Scroll();“, interval ); function Scroll2() var out=“;for (i=1; i= len ) seq = 0; ;window.setTimeout(“Scroll2();“, interval ); Scroll();资源下
29、载：www.aifuzhu.top例子 2：调用编程篇编写一个方法 求一个字符串的字节长度new function(s) if(!arguments.length|!s) return null; if(“=s) return 0; var l=0;for(var i=0;i255) l+=2; else l+; alert(l); (“hello world!“); 如何控制 alert 中的换行alert(“hellonworld“);解释 document.getElementById(“ElementID“).style.fontSize=“1.5em“设置 id 为 ElementI
30、D 的元素的字体大小为 1.5 个相对单位Em 为相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。1em=16px按照格式 xxxx 年 xx 月 xx 日 xx 时 xx 分 xx 秒动态显示时间 要求不足 10 的补 0function tick()var d=new Date();var t=function(a)return a编写一个方法 去掉一个数组的重复元素Array.prototype.strip=function() if(this.length元素的 alt 和 title 有什么异同？alt 作为图片的替
31、代文字出现，title 是图片的解释文字图片存在只有 alt 图片的解释文字只有 title 图片的解释文字两者都有 图片的解释文字两者都没有 图片既没有替代文字，也没有解释文字图片不存在只有 alt 图片既有替代文字，又有解释文字只有 title 图片没有替代文字，只有解释文字两者都有 图片既有替代文字，又有解释文字两者都没有 图片既没有替代文字，也没有解释文字当然不同的浏览器处理方式也会不一样border-color-left、 marin-left、-moz-viewport 改写成 JavaScript 格式border-color-left:borderLeftColormarin-
32、left:marinLeft-moz-viewport:MozViewport用 css、html 编写一个两列布局的网页，要求右侧宽度为 200px，左侧自动扩展。CSS:#rightfloat:right;width:200px;资源下载：www.aifuzhu.top#leftmarin-right:200px;HTML:Linux 题目：批量删除当前目录下后缀名为 .c 的文件，如 a.c、b.crm *.c如何提高网页的运行速度内容与形式分离，模块化开发，优化 CSS减少页面文档大小尽量减少图片的使用或注意图片的大小，优化图片：格式、质量、图片长宽标志减少响应的次数，用 Ajax网址后面加一个“/”
