搜档网
当前位置:搜档网 › javascript开发班-完整版

javascript开发班-完整版

javascript开发班-完整版
javascript开发班-完整版

基础部分

JS入门:事件、原理、属性、样式、函数、if判断

JS入门:style和行间样式、函数传参、属性操作两种方式

字符串和变量、字面量和变量

提取行间事件、onload、byTagName、数组

循环、全选、选项卡、innerHTML、字符串连接

调试工具的使用、如何调试JS

变量类型、typeof、JS常见类型

类型转换、parseInt、NaN、隐式转换

作用域、闭包、命名规范、运算符、流程控制

变量遮蔽

JS中的随机数、随机颜色、随机范围、随机不重复

函数返回值

深入理解函数返回值

定时器:interval、timeout、时钟、QQ资料框、自动播放选项卡、京东商城侧边栏arguments、字符串操作、数组操作、Json

循环外i的问题、函数定义和调用的区别、不变的变量

DOM操作基础:创建、添加、删除

BOM基础:窗口操作、UA、location

BOM应用:滚动、scrollTop、offset、clientHeight、浏览器类型检测

事件对象:冒泡、clientX、keyCode、ctrl/alt/shift、默认行为、拖拽

QQ邮箱闪烁提示、回放路径的拖拽

树形菜单、多级右键菜单

JS入门字符串变量函数返回值定时器DOM操作基础BOM应用事件对象javascript入门

中级部分

批量设置样式:json、cssText、with

location、hash、query的处理,刷新保存页码

Date对象应用:setFullYear/Month等,时间戳、倒计时

Date高级应用

闭包的应用、封闭命名空间

ajax无刷新数据加载:创建、发送、接收、字符集和缓存

DOM应用:firstChild/lastChild、nextSibling/previousSibling

操作属性的第三种方式、自定义属性的获取、src的相对路径

offsetParent、计算元素的页面绝对位置

图片延迟加载——迅雷

简易瀑布流——花瓣

横向瀑布流——百度

DOM与innerHTML、innerHTML的bug

天猫、淘宝吸顶导航条

天猫、京东placeholder输入框

永远在页面中的右键菜单、提示图片

图片预加载、Image对象的使用

Image对象批量加载

运动基础、匀速运动、运动框架、侧边栏、淡入淡出

缓冲运动、页面提示框

多物体运动框架、万能运动框架、链式运动框架、完美运动框架布局转换、淘宝幻灯片

运动应用:划动提示层、百度百科数字框、新浪滚动微博

永远在页面中放大的图片

无缝滚动

手风琴幻灯片、淘宝网无缝滚动幻灯片

this的错法、完美拖拽

完美封装可重用代码

完美拖拽、吸附拖拽、带框拖拽

程序思想——如何找思路,如何找规律,如何思考

碰撞检测、模拟窗口拖拽大小

窗口拖拽大小的封装和重用

自定义滚动条、鼠标滚轮

事件绑定、DOM事件流

cookie基础

高级部分

ajax高级应用:用户注册和登录、表单提交

后台接口的使用、接口文档

编写AJax的基本步骤

Jsonp跨域的方法——百度下拉提示

script标签的怪异特性、callback的使用

Jsonp标签的管理

封装可重用的Jsonp方法

ajax制作简易新浪微博:后台、接口、分页、顶、页码

其他常见数据格式及用法:CSV、XML

JS中的预解析机制、script出错时的处理机制

预解析相关面试题

递归及其各种应用

递归相关面试题

递归的性能问题、递归的优化

栈溢出的原因和处理

引用、复制

JS中的异常:try...catch的使用

try的嵌套和性能问题

抛出异常、Exception对象、异常和返回值的区别及用途

JS变量生存周期、垃圾回收机制

闭包与JS垃圾回收

闭包的用法、保存i的值

JS性能优化——健壮性、维护性、性能的平衡

性能瓶颈的识别——性能检测工具的使用:Chrome profiles、YSlow等

JS阻塞加载、图片延迟加载、网络性能优化、压缩、CDN的使用

JS执行性能优化:DOM操作、循环、数组优化、局部变量、eval、parseInt、系统函数、字符串连接、正则等

实例:苹果Dock栏

实例:chrome自定义首页

实例:官网作品页(IE版)

实例:imgAreaSelect组件的编写

实例:颜色选择器组件

实例:输入字数统计

正则表达式:RegExp对象、search方法、忽略大小写

match方法和全局匹配、量词的问题、replace方法

字符类、转义字符、行首行为、中文、单词边界、括号

正则应用:可重用的表单校验

自动表单校验、批量表单校验

表格操作:tBodies、tHead、tFoot、rows、cells

表格搜索、排序

自定义表单组件

DOM文本节点:创建、兼容、应用

firstChild怪异问题、childNodes的问题

实例:google日历

domReady事件:优点、DOMContentLoaded、defer、onload

事件队列、封装ready事件函数

事件委托(事件代理):冒泡的使用、srcElement属性、target属性、this的检测

call的使用——解决this指向问题

mouseleave事件——作用、封装,彻底解决mouseout冒泡的问题

运动高级:弹性运动、碰撞运动

弹性应用:滑动导航

面对对象

面向对象基础:什么是面向对象、对象的组成、OOP的特点、this的本质、Object对象工厂方式构造对象、原型(prototype)、混合法构造JS对象、实例:面向对象的选项卡JQuery基础:$、选择器、获取元素、添加事件

JQuery的选择器:层级、属性、伪类等

样式和属性操作:css、attr方法、JQuery的链式操作和可选参数

鼠标事件:click、hover、toggle

JQuery特效:slideDown/slideUp、fadeIn/fadeOut

JQuery动画:animate、stop、速度控制、二级菜单

mouseleave和mouseenter事件的使用

实例:JQuery选项卡

JQuery的DOM操作:创建、添加、插入、包裹、删除

JQuery的事件操作:冒泡、默认事件、事件绑定、事件委托、事件对象

JQuery中的大小、位置:height()/width()、outerHeight()、position()、offset() JQuery中的其他操作:each、和DOM元素的转换、class操作、html()

JQuery工具:$.browser、$.trim()

JQuery的Ajax:$.get()、$.ajax()

实例:JQuery拖拽、JQuery留言板

JQuery的各种bug

JQuery插件的使用:fancybox

编写JQuery插件:静态方法、extend()

实例:自定义JQuery插件——选项卡、自定义组件

ZQuery基础:ZQuery选择器、elements、$原理

ZQuery事件:click、hover、toggle

ZQuery方法:CSS、attr、eq、index、find、链式操作、冒泡和默认事件ZQuery的DOM操作、ZQuery插件机制

面向对象继承、命名空间

模块化

J S算法基础:时间复杂度和空间复杂度

数据结构基础:线性和随机、线性表、O表示法、数据结构基本操作

线性表和排序:4大排序算法、适用范围、蜕变和劣化、移动操作开销

树和排序:树的查找、添加和平衡

散列:空间换取时间、空间利用率和算法效率

图:路径算法、预处理和随机处理

模块的规划、接口

模块的加载、依赖、循环依赖

模块作用域和export

script加载和同步、请求合并、压缩代码

模块的重用和冲突

MVC基础:3层模型和耦合度

耦合的问题和消除

数据独立性、独立数据模型

设计模式:优点、常见模式

自定义事件、事件队列管理、事件的传递、事件对象和参数、监听模式的问题数据队列的管理、反向监听和解耦合、模块独立性

HTML5和NodeJS

HTML5新特性:文档头、编码、新的语义标签

JS的query选择器:伪类、层级、属性

JS本地存储、session存储

HTML5表单:新的input type、和手机的结合、placeholder、表单校验

页面文件拖拽、fileReader、geoLocation

canvas、绘制图形、图片的加载和绘制、webGL的使用

HTML5中的video、audio

HTML5离线应用

JS桌面提醒

webSocket的作用和优点

webWorder多线程

webSql页面数据库

HTML5的应用范围、兼容IE6

CSS3基础:兼容、浏览器前缀、和JS配合、自定义动画CSS3:圆角、阴影、阴影叠加、rgba、渐变、渐变应用

CSS3 mask:图形蒙版、文字蒙版

CSS3 transform:旋转、缩放、倾斜、位移

各种CSS3应用和实例

PHP基础:变量、函数、传参、返回值、echo

数组、字符串、字符串连接

引号的问题、字符串中的变量、跨行字符串

常用操作:push、pop、substring等

PHP中的面向对象:class、parent、继承、方法和属性

PHP的表单操作:GET、POST、COOKIE和FILE

NodeJS基础:优缺点、错误处理、基本语法、环境安装

运行NodeJS程序、常用DOS命令(和Linux命令)console.log的用法

DOM、BOM方法

编写自己的服务器:HTTP模块、模块的引入、创建服务、监听处理请求:request对象和response对象

客户端信息:request对象的属性和拆分

write、文件名和404

异步通信

文件操作

Javascript综合应用小案例

按需求弄了一个取词以及标红的小应用。 先上demo :/ 很多平时常用的东西,都用上了,所以拿出来说说。 一、代码 View Code 以上是所有js代码,比较长,下面将列举一些比较突出的点(望高人多多指点)。 二、代码分析 1.获取文本 getSelectionText: function(){ if(window.getSelection) { return window.getSelection().toString(); } else if(document.selection && { return; } return ''; } 这个在以前(JavaScript操控光标,你会么?)的文章里也说过,就不赘述了。 2.创建控制框 createBtn: function(evt){ var button = document.createElement("div"), //...csses= { "height" : "30px", "line-height" : "30px", "position": "absolute", "top": y + 10 + "px", "left": x + 10 + "px", "cursor": "pointer", "border": "1px solid #000", "background": "#EEE", "padding": "2px 8px", "border-radius": "3px" }; for(i in csses){

if(csses.hasOwnProperty(i)){ cssList += i + ":" + csses[i] + ";"; } } =cssList; button.innerHTML = "添加到关键词列表"; button.setAttribute("id", "btn"); //...} 这里有一点我想说说,在写js的时候,会经常涉及到对DOM对象style的处理,如果不想额外加入一个plugins.css之类的文件,可以像上面一样,将样式放置在一个对象中,然后利用for in将其写入,本来开始我用的是 obj.style[i] = csses[i]; 不知道为什么,在IE下报错了,后来便用cssText代替。 效果: 3.标红 //关键词标红 setRed: function(str){ var content = this._("article"), temp = '(' + str + ')'; reg = new RegExp(temp,'g'); content.innerHTML = , "$1"); } 这里主要就是正则表达式的事情了,正则的话,推荐两篇文章 ?一篇是司徒正美的,讲的比较全面,比较系统。点我链接过去→ ?一篇是30分钟搞定正则,这个讲说是对所有语言,JS的话正则这一块还不是特别完善和强大。点我链接过去→ 哈哈,相信用过正则的人不需要我来解释这个$1了吧,他的意思就是匹配到的第一个。 当然,删除标红和这个原理是差不多的。 //删除标红 rmRed: function(str){ var content = this._("article"), temp = "()"; reg = new RegExp(temp,'g i'); content.innerHTML = , str); }

javascript 内置函数和对象

实验项目三内置函数和对象 【学时数】 2 (45 分钟× 2=90 分钟) 【实验内容】 1 、JavaScript 内置函数的应用 2 、JavaScript 内置对象的应用 【实验参考】 《网页设计与制作》………………………………………………………… 重庆大学出版社 《网页标题制作技巧与实例》……………………………………………… 清华大学出版社 《javascript 入门与提高》……………………………………………… 清华大学出版社 《javascript 宝典》……………………………………………………… 电子工业出版社 【实验设备】 计算机,投影机 【实验目的与要求】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验重点】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验难点】 1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合:对于javascript 内置函数和对象相关细节,大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个javascrip 内置函数和对象的程序案例,学生跟着教师一起完成javascript 程序的编写,同时完成教师布置的思考题,教师实施指导。 第一步:演示JavaScript 内置函数的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。(20 分钟左右)第二步:演示JavaScript 常用内置对象的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。(35 分钟左右) 【实验过程】 实验内容一:JavaScript 内置函数的应用

理解JavaScript中函数的使用

理解JavaScript中函数的使用 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。 JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写?它所遵循的语法是什么呢?下面将介绍这些内容。 认识函数对象(Function Object) 可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在JavaScript解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。 函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的:通过执行new Array()这样的语句返回一个对象,JavaScript内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。 在JavaScript中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过new Function()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray: var myArray=[]; //等价于 var myArray=new Array();

JavaScript图形实例:蝴蝶结图案

JavaScript图形实例:蝴蝶结图案 1.长短瓣相间的蝴蝶结 设定曲线的坐标方程为: b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ)); x1=b*cos(θ); x2=b*cos(θ+π/8); y1=b*Math.sin(θ); y2=b*Math.sin(θ+π/8); (0≤θ≤2π,2≤n≤5) 在0~2π区间中从θ=0开始,每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2),并将求得的两点连成一条线段,这样,可以得到一个长短瓣相间的蝴蝶结图案。 编写如下的HTML代码。 长短瓣相间的蝴蝶结 eval( )内置函数的用法:计算字符串表达式的值。

JavaScript实例集

JavaScript实例集日期星期的显示 这段程序放在与之间