web前端工作报告

1 / 14 web 前端工作报告 的基本类型： Undefined:只有一个值 undefined，它是变量未被赋值时的值，在 JS 中全局对象有一个 undefined 属性表示undefined，事实上 undefined 并非 JavaScript 的关键字，可以给全局的 undefined 属性赋值来改变它的值。 Null:只有一个值 null,但是 JavaScript 为它提供了一个关键字null 来表示这个唯一的值。 Null 类型的语义是一个空的对象引用。 Number:NaN是其一个特殊的属性值， typeof NaN / number ); String:其正式解释是一个 16 位无符号整数类型的序列，它实际上用来表示以 UTF-16 编码的文本信息。 Boolean:有两种取值 true 和 false。 0、 NaN、空字符串、 null、undefined 转化为 false，其余的全部为 true。 Object:最为复杂的类型就是 Object，它是一系列属性的无序集合， Function 是实现了私有属性 call的Object， JavaScript 的宿主也可以提供一些特别的对象。typeof *3,344+/ Object 关于 null 和 undefined： null 是关键字； undefined不是关键字， undefined 是 Global 对象的一个属性 。 2 / 14 运算时 null 与 undefined 都可以被类型转换为false，但不等值于 false： ; / true,true ; / false ; / false ; / true null instanceof Object /false typeof null/Object 的类型转换 手动的转换有： Number;Boolean;String;以及parseInt,parseFloat,toString,valueOf 等等。 自动的转换：如果 +操作符的一个操作数是字符串，则会将另一个操作数转换为字符串，一元操作符 *、 -将操作数转换为数字，一元操作符！将操作数转换为布尔值并取反。 hello +5 / hello5 hello +null / hellonull 5 *5/25 hello *5/NaN X+ /等价于 String +X 或者 X-0/等价于 Number !X/等价于 Boolean 3 / 14 属性 四个参数：上右下左 三个参数：上、左右、下 两个参数：上下、左右 一个参数：四周 4.关于 float 问题，浮动元素后跟非浮动元素的情况。 后边非浮动元素若为行内元素且因为定位产 生重叠时，行内元素边框、背景和内容都在该浮动元素之上显示，若为块级元素且因为定位产生重叠时，该块级元素边框和背景在该浮动元素之下显示，只有内容在浮动元素之上显示。 【有示例】。 Clear 属性规定元素的哪一侧不允许其他浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素增加上外边距实现的。在 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除 ，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 5.绝对定位、相对定位与浮动定位 绝对定位： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包4 / 14 含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 相对定位： relative 生成 相对定位的元素，相对于其正常位置进行定位。设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 浮动定位：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 示例代码就是最外层的 div 是 relative，里面的就是 absolute。 6.关于 DOM 元素 利用 DOM， JS 可以相对简单地寻找、访问和操纵 HTML元素， 从而动态地改变 HTML 页面的内容和外观。节点常用的属性有 parent Node, childNodes, firstChild, lastChild, previousSibling, nextSibling。 7.关于函数 定义顺序：函数的定义与其他的语句的定义不再同5 / 14 一个时间轴上面，计算机在开始执行语句之前，会先查找所有的 function 的定义，然后保存。所以在函数后面定义的调用语句可以调用到定义在前面的函数。 局部变量与全局变量：局部变量只适合于函数的参数和函数内部已 var 关键字定义的变量。如果没有定义同名的局部变量，函数内部则可能访问全局变量。 闭包：首先要知道在 js 中，函数在一旦定义的时候就会产生自己的一个作用域，而此后这个函数的执行也是要依赖于这个作用域的。闭包的最常用的编程模式就是在一个函数中嵌套另一个函数，然后将这个嵌套的函数作为返回值返回，当然外部函数中的局部变量也就存在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访问控制。但是缺点在于增大了内存的开支。而且其所派生的子类将不能访问其私有属性，破坏了继承性。因此还是需要三 思而行。 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的保护函数内部的变量，另一个就是让在内存中维持变量。 我写的闭包主要用于实现一些插件，因为有一些变量需要避免被全局变量污染。 可选参数： Js 不会限制传入函数的参数数目。如果传入的参数过多，多余的参数会被忽略掉。如果过少，缺失的参数会默认为 undefined。 6 / 14 apply 和 call 的区别：相同点 :两个方法产生的作用是完全一样的。 不同点 :方法传递的参数不同， apply call 原型：所 有对象都有一个原型，对象可以共享其原型的属性，但是这种共享是单向的，即原型的属性影响对象，改变对象确不会影响到原型。原型污染：使用 for/in 遍历对象的时候，会同时得到本来的属性和原型的属性，可以使用 HasOwnPorperty 方法来判断。 匿名函数：一般用来写已加载就需立即执行的函数。同时为了避免受全局变量的影响，在一个不是很熟悉的页面增加 Javascript 时非常有效。 和 Span 有何区别？ 答：两者最明显的区别在于 DIV 是块元素，而 SPAN是行内元素。所谓块元素，是 以另起一行开始渲染的元素，行内元素则不需另起一行， 当然这一点也可以通过设置 display 来改变。 9. CSS+DIV 开发 Web 页面的优势有哪些？ 答： 1） 2） 3） CSS+DIV，这个网页设计模式中， DIV 承担了网页的内容， CSS 承担了网页的样式。这样就使网页的内容和7 / 14 样式的分离开来。有利于页面的维护升级。 有助于提高搜索引擎亲和力 有助于页面的重构 与 setTimeout 的区别？ 答： setTimeout 方法是定时 程序，也就是在什么时间以后干什么。干完了就拉倒。 setInterval 方法则是表示间隔一定时间反复执行某操作。 及其优缺点： 答： Asynchronous JavaScript and XML，这样的一个职位的主要职责是与交互设计师、 视觉设计师协作，根据设计图用 HTML 和 CSS 完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。一般对网页重构工程师都有如下的要求，熟悉 PS，对 SEO 搜索引擎优化有所了解，因此，作为一个网页重构工程师，必须懂得比一般软件开发人 员更多的技术。 Web 前端开发则更偏重与软件开发，根据网站的可用性分析，和用户反馈改进网站的前端优化。利用javascript， flash 结合 html+css 技术开发出用户体验更好的网站页面。例如腾讯 QQ 空间的图片浏览功能，就是前端开发工程师开发的功能之一，还有各种信息网站的幻灯片效果， ajax 技术等。 Web 前端开发会设计到前端的架构设计，跟底层的数据传输等，所以有志于这个方向发展的同学，编程能力一定要过关，同事对网站后台语言也要有一定的了解。 当前，前端开发的技术更新速度非常快，因此要求8 / 14 从业人员必须及时了解前端开发的最新技术，了解前端世界的发展动向，否则很容易就陷入过时技术无用武之地的局面。 Web 前端开发历史 在 web 发展初期， HTML 技术只能展示简单的页面，维护和更新也相当麻烦，所描述的信息结构能帮助设计师分离出表现和内容，使站点的构建和维护更加容易。因此以CSS+DIV 为主要技术的页面重构技术开始崭露头角。同时促进了前端开发领域的发展。 前端开发早在 web 标准出现的时候就初见端倪，但真正有较大的发展则在 javascript 逐渐为 web 前端开发的成熟语言后。随着的深入人心和各种相应产品：视频网站，SNS，网页游戏，博客，微薄等陆续出现，人们对网页的各种需求不断增大，要求也越来越苛刻， javascript 被委以重任，以 javascript 为标志的的 web 前端开发逐渐进入加速发展的轨道。 Web 前端开发现状 到目前为止， web 前端开发正处于发展的高峰期。由于各互联网公司都注意到站点的可用性问题，为了加强其产品的用户体验，吸引用户，各种以用户体验的团队开始如雨后春笋般 出现，只要稍稍留意一下，你就会发现，几乎每个大的互联网公司，都有属于自己的互联网团队，例如：9 / 14 淘宝网的淘宝 UED，百度旗下的百度 UFO，腾讯的 ISD和 CDC等等。这些团队性质大都相似，以提高用户体验为第一目标。例如百度 UFO 的对本身团队的定位： 我们始终坚持以用户为核心，将提升产品体验做为终极目标。我们秉承减法设计、从简出发的理念，完成百度 WEB 产品的视觉、交互设计、前端开发，用户研究、内容优化等工作。我们提供基于研究、设计与前端技术的一体化解决方案，使产品更加友好、易用， 以进一步提升产品影响力和品牌满意度。我们希望通过 UFO 泛用户体验平台更好的与同行交流，一同探讨，从而推动行业发展。 而职位分类也和类似：网页设计师，前端开发工程师，用户体验分析师，交互设计师等。主要集中于，设计，可用性，前端开发。前端开发是 UED 团队的唯一偏重软件开发的职位， 要求也日趋增多，技能要求主要有： -精通 JavaScript、 Ajax 等 Web 开发技术 - 精通 HTML/XHTML、 CSS 等网页制作技术，熟悉页面架构和布局 -对算法、数据结 构以及后台开发有一定了解 - 熟悉 W3C 标准，对表现与数据分离、 Web 语义化等有深刻理解 而不同地方对对前端开发的职位的需求，也有明显的地域差异，到目前为止，对前端开发的人才需求主要集中10 / 14 在杭州，北京，上海等地区，南方地区相对较少。只有腾讯等较大的互联网企业对此有需求，虽然网易的总部在广州，但是前端开发等相关职位也只是集中在杭州的研究院招聘，这种现状的形成有各种因素，可能在短时间内也难以解决，作为广州的前端开发者们，需要将眼睛放到整个中华地区，这样才能找到更理想的工作岗位。 百度 UFO 团队前端开发职责分析 一般的中小型互联网公司，前端开发工程师的主要职责大多集中与页面重构，简单的或者单个的 JS 功能实现，大中型的互联网公司，如百度等，则专注于百度各产品线 Web端功能设计、开发和实现，百度各产品线易用性改进和 Web界面技术优化 ， Web 前沿技术研究和新技术调研。 Web 端功能设计和开发，很大程度上是围绕 JS 的开发进行，而这种优化和研究，如果没有对 JS 深厚的技术功底，是很难进行底层开发的，不是简单地以来 jquery 来实现各种效果，而是针对易用性改造而进行的有目标地 底层功能开发。 Web 前沿技术研究和新技术调 研则要求开发这对前段开发技术的新技术有着敏锐的洞察力，能迅速判断那种技术将会成为将来的主流，并且不断了解国内外的最新动态。 前端开发体会 前端开发是一个较新的职业，它是在的热潮下成熟11 / 14 起来的，要求开发者掌握较综合的技能，除了必要的软件开发技术，还要对可用性有一定的了解，而又对设计有一定要求，因此，对与数字媒体技术专业的学生来说，有着天然的优势，是最适合不过的职位之一。 但是对于数字媒体技术专业的学生，如果要在未来的就业中掌握主动权，单靠专业优势是远远不够的，还需要有深厚的技术功力，例如 HTML+CSS 技术，是必须要完全掌握精通的， javscript 更是要不断深耕细作，在专业达到一定的深度后，才有能力在应聘中游刃有余，所向披靡。 同时，在学习研究的过程中，要不断增加自己的项目经验，为自己增加筹码，由于前端开发行业的特殊性，数字媒体技术的学生在大二就可以开始在社会中寻找工作经验了，一些学校项目，工作室项目，社会兼职实习等，都是这些经验的重要来源。前端开发是需要在不断实践中学习的，只有一定的项目经验，才能在 学习中得以扩展深入，否则很多单纯意义上的学习更像纸上谈兵，没有意义。 Web 前端开发的未来 在不久的将来，前端开发的技术将会经历一场变革，以和 HTML5 为新技术力量会成为前端开发的中坚。即使以后，在前端开发领域，技术也不会停滞，即使 HTML5 成为现实，也会有更新的技术出现，丰富互联网的世界，因此我们必须保持对最新技术的关注。 12 / 14 目前，前端开发技术刚刚走向成熟，在未来的几年里，相信其人才需求量还会进一步增长，但是任何需求都有饱和的时候，对人才需求饱和也是前端开发真正成熟的 标志，在未来，前端开发者们会有更广阔的发展空间，更大的挑战，更高的舞台等我们去展示实力。 Web 前端技术实验报告 课程名称： Web 前端技术 实验名称： html