泰牛程序员 韩顺平 PHP 大牛班 javascript课程 完整笔记.doc
javascript第 1 章JAVASCRIPT课程介绍11.1js可以做什么?11.2js的一些特点（了解）11.3js的小故事21.4js运行的原理图21.5javascript的文档哪里找?31.6第一个js程序,hello,world!31.7一个非常简单的js加法运算41.8js是弱数据类型语言，变量类型有js引擎来决定.51.9js变量的命名规范5第 2 章JS的数据类型介绍72.1js的数据类型分类72.2举例说明72.3小练习82.4js数据类型的转换9第 3 章JS的运算符103.1js运算符的分类:103.2算术运算符103.3关系运算符123.4关系运算符的小案例133.5逻辑运算符143.6关于逻辑运算的测试题153.7逻辑非的说明题16第 4 章三大流程控制174.1概述:174.2分支控制174.2.1if分支174.2.2if.else双分支184.2.3多分支控制结构 if . else if .else.204.2.4多分支的案例224.3多分支语句-swith234.3.1一个小的练习题254.3.2关于switch的一个小练习254.4循环控制264.4.1for循环控制264.5for循环的练习题28第 5 章函数305.1函数的必要性305.2函数的基本概念335.3函数的基本语法335.4函数的调用方式345.4.1方式1:345.4.2形参和实参的概念355.4.3函数调用和返回的说明355.5变量的作用域365.6函数的其它说明375.7就是三目运算符的补充讲解37第 6 章数组386.1为什么需要数组386.2使用数组解决上面的问题396.3数组的基本概念396.4数组的传递方式406.5数组使用416.6数组的遍历426.7二维数组了解436.7.1关于二维数组的访问说明436.7.2快速入门案例446.7.3快速入门案例2446.7.4二维数组的平均值45第 7 章JS的内置对象467.1概述467.2js内部类的分类467.3Math对象477.3.1介绍:477.3.2快速入门案例487.4Date对象497.4.1提出问题497.4.2Date对象的快速入门497.5一个string的案例507.6Array对象517.7Number对象537.8全局函数55第 8 章事件及事件驱动编程578.1概述:578.2js的事件驱动机制的理解578.3事件的分类588.3.1鼠标事件588.3.2键盘事件588.3.3html事件588.3.4其它事件588.4事件驱动机制编程的进一步理解案例588.5一个事件可以被多个函数处理61第 9 章DOM编程629.1dom的分类和介绍629.2dom到底和html文件是什么关系629.3dom编程的框架介绍639.4bom649.5dom编程的分类说明649.6bom 和dom的关系659.7dom编程的一个体验案例659.8window对象669.8.1window对象的常用方法举例669.8.2股票撤回案例679.9窗口的打开和关闭679.10window案例-登录成功后跳转到指定页面68第 1 章 javascript课程介绍1.1 js可以做什么?1. 游戏2. 网页的特性3. web聊天4. 地图PHP程序员后面大量的使用 js1.2 js的一些特点（了解）1. js是一个脚本编程语言2. 脚本语言相对传统的编程语言而已，语法和规则相对没有那么严格。3. js是解释执行。即js在执行的时候，不会编译成二进制代码。而是将js代码调入引擎，然后解释执行.4. js的主要的作用，可以对网页的元素动态编程体验案例:代码 ：5. js文件是和其它编程语言一起使用(html, php , jsp , )1.3 js的小故事1.4 js运行的原理图1.5 javascript的文档哪里找?1.6 第一个js程序,hello,world!1.7 一个非常简单的js加法运算补充说明：在js中，我们查看一个数据的类型可以使用 typeof 变量名 ,或者typeof(变量名);1.8 js是弱数据类型语言，变量类型有js引擎来决定.1.9 js变量的命名规范(1) 变量可以由任意顺序的大小字母、下划线, 美元符号($)组成，但不能以数字开头，不能是JavaScript中的保留关键字(2) JavaScript变量是区分大小写(3) JavaScript程序的注释 /*/ 或者 /注释案例说明:如何使用firefox 中对js代码进行调式使用快捷接 ctrl+shift+J 弹出我们的js的提示信息第 2 章 js的数据类型介绍2.1 js的数据类型分类(1) 基本数据类型：数值类型整数、浮点型，布尔型(true , false) , 字符串 (2) 复合数据类型： 数组, 对象(3) 特殊数据类型：null undefined;2.2 举例说明2.3 小练习2.4 js数据类型的转换第 3 章 js的运算符3.1 js运算符的分类: (1) 算术运算符x = 5 + 6;(2) 赋值运算符x = 7;(3) 比较运算符x > 5;(4) 逻辑运算符x > 6 && x<10(5) 三目运算符3.2 算术运算符举例说明:学习看代码的一种方法->图解法小结:1. + 分为 前 + 和 后 +2. 如果是前 + 比如 +a; 就是先 自加，再赋值, 如果是 a+ ，则是 先赋值在自加3. - 分为 前 - 和 后-4. 如果是前 - 比如 -a; 就是先 自减，再赋值, 如果是 a- ，则是 先赋值在自减3.3 关系运算符强调：= = 等于 = = = 全等3.4 关系运算符的小案例3.5 逻辑运算符案例:小结：1. 在逻辑运算中，0、""、false、null、undefined、NaN均表示false2. 在逻辑运算中，非0 表示ture , 比 1 ,或者 -43.6 关于逻辑运算的测试题3.7 逻辑非的说明题第 4 章 三大流程控制4.1 概述: 顺序控制：没有加控制，默认就是从上到下，从左到右的执行顺序.分支控制: 根据不同的情况，来执行不同的语句循环控制: 更加用户的输入，来反复的执行某段代码.4.2 分支控制4.2.1 if分支基本语法:if(条件判断)/语句块.说明:当条件判断为真时，则执行内的代码,否则不执行.快速入门案例:编写一个程序,可以输入人的捐款,如果该同志的捐款大于1000元,则输出 “你的捐款大于1000,为您爱心点赞!”代码 ：流程图 ：4.2.2 if.else双分支l 基本语法if(条件判断A)/语句块Aelse/语句块B:说明：如果判断条件A成立，则执行语句块A,否则，执行语句块B.快速入门案例:流程图:4.2.3 多分支控制结构 if . else if .else.基本语法:if(条件判断A)/语句块Aelse if(条件判断B)/语句块Belse if(条件判断C)/语句块Celse/语句块C说明：条件判断A成立,则执行/语句块A., 如果判断条件B成立，则执行B语句块，如果所有的判断条件都不成立，就执行else的语句块.快速入门：代码 ：流程图:4.2.4 多分支的案例4.3 多分支语句-swith基本语法:switch(表达式)case 常量/变量:语句块;break;case 常量/变量:语句块;break;case 常量/变量:语句块;break;.default:语句块;break;快速入门案例:小结:1. 选择switch还是 if else答：如果是判断某几个值的范围，比如 "a" "b", 选择使用 switch, 如果是一个范围比较，我们选择使用if. else if .else4.3.1 一个小的练习题4.3.2 关于switch的一个小练习4.4 循环控制4.4.1 for循环控制基本语法是for(var i = 0; i < 值; i+)语句;for(循环初值;循环条件;步长) 语句;/循环体 快速入门案例:执行分析过程如何使用firebug来进行调试功能4.5 for循环的练习题代码如下:第 5 章 函数5.1 函数的必要性举例一个案例:输入两个数,再输入一个运算符(+,-,*,/)，得到结果代码 ：l 从这个案例，我们提出一个新的问题?请思考,如果在另外的html文件比如a.html,b.html,c.html中也需要完成: 入两个数,再输入一个运算符(+,-,*,/)，得到结果. 又该怎么办?l 提出一个解决方案-函数建议： 当一段代码重复使用，超过3次以上，我们应该考虑封装成函数l 使用函数来解决上面的问题fun.js在需要的文件中，比如 xxx.html5.2 函数的基本概念概念: 为完成某一个功能的程序指令(语句)的集合.分类: 自定义函数，系统函数5.3 函数的基本语法5.4 函数的调用方式在调用函数的时候，需要在后面写上 分号; 这里说一下,js代码在页面中的使用的方式：5.4.1 方式1:基本语法是:函数名(实参1, 实参2, .);比如:5.4.2 形参和实参的概念我们可以这样来区分 ： 当我们定义一个函数时，则该函数的()内的，我们称为形参.当我们调用一个函数时，我们传入的参数，已经确定了，则我们讲这个传入的值，称为实参5.4.3 函数调用和返回的说明说明: 1. 对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert(“res=“ + sum(2,3);2. 没有返回值的函数，则返回undefined。举例说明:3. 关于函数return的说明(1) 是否有返回，由程序员的业务逻辑(2) 返回的数据类型，可以是数值，字符串，数组或其他5.5 变量的作用域全局变量和局部变量的小结:1. 全局变量可以在函数外使用，也可以在函数内部使用2. 局部变量只可以在函数内部使用3. 全局变量有三种方式 , 看上面的代码4. 局部变量的定义有一种, 在函数内， var 变量名 = 值;5. 全局变量的隐式定义，我们要避免，这样代码更干净.5.6 函数的其它说明5.7 就是三目运算符的补充讲解第 6 章 数组数组: 就是把多个数据放在一起管理，就是数组。6.1 为什么需要数组代码:思考: 上面的问题是，如果乌龟很多，就没有玩了。-数组.6.2 使用数组解决上面的问题代码 ：6.3 数组的基本概念6.4 数组的传递方式结论是： js中，数组是引用传递:l 在一个案例说明数组的引用传递6.5 数组使用如果我们使用数组，其实就是使用数组的元素:数组名下标名 ; 比如 a10; 表示访问 a数组的第11个元素.l 数组的使用案例6.6 数组的遍历6.7 二维数组了解概念: 一维数组的元素，又是数组，这样的数组，就是二维数组。6.7.1 关于二维数组的访问说明6.7.2 快速入门案例6.7.3 快速入门案例26.7.4 二维数组的平均值第 7 章 js的内置对象7.1 概述7.2 js内部类的分类说，在js中有提供好的类，我们成为内部类Array, String , Number , Boolean, Date, Math, 通过类，我们可以创建对应的实例，这个实例我们称为一个对象。该对象有对应的属性和方法。l 说明了一下静态类和动态类的特性7.3 Math对象7.3.1 介绍:7.3.2 快速入门案例7.4 Date对象7.4.1 提出问题d = new Date()获取当前时间，year=Date.getFullYear()获取当前年，month=Date.getMonth()获取当前月，day=Date.getDate()获取当前日期，然后d year-month-day 00:00:00来判断7.4.2 Date对象的快速入门7.5 一个string的案例小结:1. 如果我们需要取出从第几个位置，到第几个位置的字符串，则使用substring 2. 如果我们需要取出从第几个位置开始，取多少个字符，则使用substr7.6 Array对象数组的基本介绍:案例1-讲解array的基本用法:关于数组的一个作业:7.7 Number对象l 快速入门案例l 案例说明7.8 全局函数l encodeURI 和 decodeURI在以前 ?index.php?name=泰牛&no=sn 001;l isNaNl eval l 案例第 8 章 事件及事件驱动编程8.1 概述: 8.2 js的事件驱动机制的理解8.3 事件的分类8.3.1 鼠标事件8.3.2 键盘事件8.3.3 html事件8.3.4 其它事件8.4 事件驱动机制编程的进一步理解案例代码:8.5 一个事件可以被多个函数处理第 9 章 dom编程9.1 dom的分类和介绍dom包括 html dom 、xml dom 和css dom ,event dom9.2 dom到底和html文件是什么关系<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> New Document </title> </head> <body> <h1>我的标题</h1> <a href="">点击跳转到泰牛</a> </body></html>该文档，对应额dom树是如下的情况 ：9.3 dom编程的框架介绍9.4 bombom是浏览器对象模型,将浏览器的各个组件看成对象，: 主要提供了访问和操作浏览器各组件(比如 window、history、location、navigator、screen、document)的方法。因为 document对象占的比例很大。因此doucment编程的核心就是bom的核心。9.5 dom编程的分类说明9.6 bom(浏览器对象模型) 和dom的关系9.7 dom编程的一个体验案例9.8 window对象window对象是全局对象，在使用它的方法和属性时，不需要带window. 可以直接使用其方法和属性.9.8.1 window对象的常用方法举例setInterval 和 clearInterval / setTimeout / clearTimeoutl 小闹钟9.8.2 股票撤回案例9.9 窗口的打开和关闭window.open("url", "窗口名 _self _blank", "设置窗口的样式");window.close();9.10 window案例-登录成功后跳转到指定页面思路 ： 编写 login.html loginOk.html manage.htmllogin.htmlloginOk.htmlmanage.html第 10 章 document对象10.1 概述：document对象是dom的编程核心，内容很多，涉及的知识点很杂，而且不同的浏览器还存在兼容性问题。这里我们主要对document核心内容和框架做一个介绍.10.2 document的案例10.3 关于css的属性和js dom编程中对css属性的对应关系10.4 document的计算器10.5 History对象(了解)简述:该对象保存了用户访问浏览器的记录，通过这个对象，我们可以去访问改用曾经访问过的某个页面，比如向前，或者向后。10.5.1 histroy的常用方法10.5.2 举例说明 ：代码 ：test.htmlb.html10.6 location对象概述: 即:该对象包含客户端当前的URL信息。,主要的用处是可以重新加载当前页面，还可以指定或者设置新的url地址10.6.1 举例-定时刷新本页面和定时跳转代码:10.7 navigatorl 常用的方法和属性l 案例:代码:10.8 screen对象该对象包含了关于浏览器屏幕的信息案例:如果同学们希望看到更多信息for(var key in screen)document.write(key + " " + screenkey);10.9 event对象event是操作或者运行时，会产生. event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。10.9.1 事件绑定的方式第一个方式，就是前面讲过.<input type="button" value="点击" onclick="test()" >第二个方式，先获取到该对象，然后绑定.l 事件绑定的另外一种方式10.10 event 对象10.10.1 第一个案例-星星点灯实现的思路:1. 响应用户点击的事件2. 获取到用户点击的横坐标和纵坐标3. 把星星放到页面代码:10.10.2 控制输入框中，只能输入六个数字第 11 章 html+javascript+css的综合应用实例11.1 第一个功能登录页面代码:11.2 注册页面代码:看源代码:11.3 使用js来完成隐藏和显示功能思考：1. 我们可以获取到div，然后通过display属性来控制显示和隐藏2. 图片的显示可以通过 .src 来修改代码 ：11.4 删除指定行的内容思路:代码:
