泰牛程序员 韩顺平 PHP 大牛班 javascript课程 完整笔记

1、javascript 第第 1 章章javascript 课程介绍课程介绍.1 1.1js可以做什么?1 1.2js的一些特点（了解）1 1.3js的小故事2 1.4js运行的原理图2 1.5javascript的文档哪里找?3 1.6第一个js程序,hello,world!3 1.7一个非常简单的js加法运算4 1.8js是弱数据类型语言，变量类型有js引擎来决定.5 1.9js变量的命名规范5 第第 2 章章js 的数据类型介绍的数据类型介绍.7 2.1js的数据类型分类7 2.2举例说明7 2.3小练习8 2.4js数据类型的转换9 第第 3 章章js 的运算符的运算符.10 3.1js

2、运算符的分类:10 3.2算术运算符10 3.3关系运算符12 3.4关系运算符的小案例13 3.5逻辑运算符14 3.6关于逻辑运算的测试题15 3.7逻辑非的说明题16 第第 4 章章三大流程控制三大流程控制.17 4.1概述:17 4.2分支控制17 4.2.1if 分支.17 4.2.2if.else 双分支 .18 4.2.3多分支控制结构 if . else if .else.20 4.2.4多分支的案例.22 4.3多分支语句-swith23 4.3.1一个小的练习题.25 4.3.2关于 switch 的一个小练习.25 4.4循环控制26 4.4.1for 循环控制 .26

3、4.5for循环的练习题28 第第 5 章章函数函数.30 5.1函数的必要性30 5.2函数的基本概念33 5.3函数的基本语法33 5.4函数的调用方式34 5.4.1方式 1:.34 5.4.2形参和实参的概念.35 5.4.3函数调用和返回的说明.35 5.5变量的作用域36 5.6函数的其它说明37 5.7就是三目运算符的补充讲解37 第第 6 章章数组数组.38 6.1为什么需要数组38 6.2使用数组解决上面的问题39 6.3数组的基本概念39 6.4数组的传递方式40 6.5数组使用41 6.6数组的遍历42 6.7二维数组了解43 6.7.1关于二维数组的访问说明.43 6.

4、7.2快速入门案例.44 6.7.3快速入门案例 2.44 6.7.4二维数组的平均值.45 第第 7 章章js 的内置对象的内置对象.46 7.1概述46 7.2js内部类的分类46 7.3math对象47 7.3.1介绍:.47 7.3.2快速入门案例.48 7.4date对象49 7.4.1提出问题.49 7.4.2date 对象的快速入门.49 7.5一个string的案例50 7.6array对象51 7.7number对象53 7.8全局函数55 第第 8 章章事件及事件驱动编程事件及事件驱动编程.57 8.1概述:57 8.2js的事件驱动机制的理解57 8.3事件的分类58 8

5、.3.1鼠标事件.58 8.3.2键盘事件.58 8.3.3html 事件.58 8.3.4其它事件.58 8.4事件驱动机制编程的进一步理解案例58 8.5一个事件可以被多个函数处理61 第第 9 章章dom 编程编程.62 9.1dom的分类和介绍62 9.2dom到底和html文件是什么关系62 9.3dom编程的框架介绍63 9.4bom64 9.5dom编程的分类说明64 9.6bom 和dom的关系65 9.7dom编程的一个体验案例65 9.8window对象66 9.8.1window 对象的常用方法举例.66 9.8.2股票撤回案例.67 9.9窗口的打开和关闭67 9.10

6、window案例-登录成功后跳转到指定页面68 第 1 章javascript 课程介绍 1.1js 可以做什么? 1. 游戏 2. 网页的特性 3. web 聊天 4. 地图 php 程序员后面大量的使用 js 1.2js 的一些特点（了解） 1. js 是一个脚本编程语言 2. 脚本语言相对传统的编程语言而已，语法和规则相对没有那么严格。 3. js 是解释执行。即 js 在执行的时候，不会编译成二进制代码。而是将 js 代码调 入引擎，然后解释执行. 4. js 的主要的作用，可以对网页的元素动态编程 体验案例: 代码 ： 5. js 文件是和其它编程语言一起使用(html, php ,

7、 jsp , ) 1.3js 的小故事 1.4js 运行的原理图 1.5javascript 的文档哪里找? 1.6第一个 js 程序,hello,world! 1.7一个非常简单的 js 加法运算 补充说明：在 js 中，我们查看一个数据的类型可以使用 typeof 变量名 ,或者 typeof(变量名); 1.8js 是弱数据类型语言，变量类型有 js 引擎来决定. 1.9js 变量的命名规范 (1) 变量变量可以由任意顺序的大小字母、下划线, 美元符号($)组成，但不能以数字开 头，不能是 javascript 中的保留关键字 (2) javascript 变量是区分大小写 (3) ja

8、vascript 程序的注释 /*/ 或者 /注释 案例说明: 如何使用 firefox 中对 js 代码进行调式 使用快捷接 ctrl+shift+j 弹出我们的 js 的提示信息 第 2 章js 的数据类型介绍 2.1js 的数据类型分类 (1) 基本数据类型：数值类型整数、浮点型，布尔型(true , false) , 字符串 (2) 复合数据类型： 数组, 对象 (3) 特殊数据类型：null undefined; 2.2举例说明 2.3小练习 2.4js 数据类型的转换 第 3 章js 的运算符 3.1js 运算符的分类: (1) 算术运算符 x = 5 + 6; (2) 赋值运算符

9、 x = 7; (3) 比较运算符 x 5; (4) 逻辑运算符 x 6 就是先 自加，再赋值, 如果是 a+ ，则是 先赋值 在自加 3. - 分为 前 - 和 后- 4. 如果是前 - 比如 -a; 就是先 自减，再赋值, 如果是 a- ，则是 先赋值在自 减 3.3关系运算符 强调：= = 等于 = = = 全等 3.4关系运算符的小案例 3.5逻辑运算符 案例: 小结： 1. 在逻辑运算中，0、false、null、undefined、nan 均表示 false 2. 在逻辑运算中，非 0 表示 ture , 比 1 ,或者 -4 3.6关于逻辑运算的测试题 3.7逻辑非的说明题 第

10、4 章三大流程控制 4.1概述: 顺序控制：没有加控制，默认就是从上到下，从左到右的执行顺序. 分支控制: 根据不同的情况，来执行不同的语句 循环控制: 更加用户的输入，来反复的执行某段代码. 4.2分支控制 4.2.1 if 分支 基本语法: if(条件判断) /语句块. 说明:当条件判断为真时，则执行内的代码,否则不执行. 快速入门案例: 编写一个程序,可以输入人的捐款,如果该同志 的捐款大于 1000 元,则输出 “你的捐款大于 1000,为您爱心点赞!” 代码 ： 流程图 ： 4.2.2 if.else 双分支 基本语法 if(条件判断 a) /语句块 a else /语句块 b: 说

11、明：如果判断条件 a 成立，则执行语句块 a,否则，执行语句块 b. 快速入门案例: 流程图: 4.2.3 多分支控制结构 if . else if .else. 基本语法: if(条件判断 a) /语句块 a else if(条件判断 b) /语句块 b else if(条件判断 c) /语句块 c else /语句块 c 说明：条件判断 a 成立,则执行/语句块 a., 如果判断条件 b 成立，则执行 b 语句 块，如果所有的判断条件都不成立，就执行 else 的语句块. 快速入门： 代码 ： 流程图: 4.2.4 多分支的案例 4.3多分支语句-swith 基本语法: switch(表达

12、式) case 常量/变量: 语句块; break; case 常量/变量: 语句块; break; case 常量/变量: 语句块; break; . default: 语句块; break; 快速入门案例: 小结: 1. 选择 switch 还是 if else 答：如果是判断某几个值的范围，比如 a b, 选择使用 switch, 如果是一个 范围比较，我们选择使用 if. else if .else 4.3.1 一个小的练习题 4.3.2 关于 switch 的一个小练习 4.4循环控制 4.4.1 for 循环控制 基本语法是 for(var i = 0; i 值; i+) 语句;

13、for(循环初值循环初值;循环条件循环条件;步长步长) 语句语句;/循环体循环体 快速入门案例快速入门案例: 执行分析过程 如何使用 firebug 来进行调试功能 4.5for 循环的练习题 代码如下: 第 5 章函数 5.1函数的必要性 举例一个案例: 输入两个数,再输入一个运算符(+,-,*,/)，得到结果 代码 ： 从这个案例，我们提出一个新的问题? 请思考,如果在另外的 html 文件比如 a.html,b.html,c.html 中也需要完成: 入两个数,再输入一个运算符(+,-,*,/)，得到结果. 又该怎么办? 提出一个解决方案-函数 建议： 当一段代码重复使用，超过 3 次以

14、上，我们应该考虑封装成函数 使用函数来解决上面的问题 fun.js 在需要的文件中，比如 xxx.html 5.2函数的基本概念 概念: 为完成某一个功能的程序指令(语句)的集合. 分类: 自定义函数，系统函数 5.3函数的基本语法 5.4函数的调用方式 在调用函数的时候，需要在后面写上 分号; 这里说一下,js 代码在页面中的使用的方式： 5.4.1 方式 1: 基本语法是: 函数名(实参 1, 实参 2, .); 比如: 5.4.2 形参和实参的概念 我们可以这样来区分 ： 当我们定义一个函数时，则该函数的()内的，我们称为形参. 当我们调用一个函数时，我们传入的参数，已经确定了，则我们讲

15、这个传入的值， 称为实参 5.4.3 函数调用和返回的说明 说明: 1. 对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如： alert(“res=“ + sum(2,3); 2. 没有返回值的函数，则返回 undefined。 举例说明: 3. 关于函数 return 的说明 (1) 是否有返回，由程序员的业务逻辑 (2) 返回的数据类型，可以是数值，字符串，数组或其他 5.5变量的作用域 全局变量和局部变量的小结: 1. 全局变量可以在函数外使用，也可以在函数内部使用 2. 局部变量只可以在函数内部使用 3. 全局变量有三种方式 , 看上面的代码 4. 局部变量的定义有一种,

16、 在函数内， var 变量名 = 值; 5. 全局变量的隐式定义，我们要避免，这样代码更干净. 5.6函数的其它说明 5.7就是三目运算符的补充讲解 第 6 章数组 数组: 就是把多个数据放在一起管理，就是数组。 6.1为什么需要数组 代码: 思考: 上面的问题是，如果乌龟很多，就没有玩了。-数组. 6.2使用数组解决上面的问题 代码 ： 6.3数组的基本概念 6.4数组的传递方式 结论是： js 中，数组是引用传递: 在一个案例说明数组的引用传递 6.5数组使用 如果我们使用数组，其实就是使用数组的元素: 数组名下标名 ; 比如 a10; 表示访问 a 数组的第 11 个元素. 数组的使用案

17、例 6.6数组的遍历 6.7二维数组了解 概念: 一维数组的元素，又是数组，这样的数组，就是二维数组。 6.7.1 关于二维数组的访问说明 6.7.2 快速入门案例 6.7.3 快速入门案例 2 6.7.4 二维数组的平均值 第 7 章js 的内置对象 7.1概述 7.2js 内部类的分类 说，在 js 中有提供好的类，我们成为内部类array, string , number , boolean, date, math, 通过类，我们可以创建对应的实例，这个实例我们称为一个对象。该对象有对 应的属性和方法。 说明了一下静态类和动态类的特性 7.3math 对象 7.3.1 介绍: 7.3.2

18、 快速入门案例 7.4date 对象 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. 如果我们需要取出从第几个位置开始，取多少个字符，则使用 substr 7.6array 对象

19、数组的基本介绍: 案例 1-讲解 array 的基本用法: 关于数组的一个作业: 7.7number 对象 快速入门案例 案例说明 7.8全局函数 encodeuri 和 decodeuri 在以前 http:/?index.php?name=泰牛 isnan eval 案例 第 8 章事件及事件驱动编程 8.1概述: 8.2js 的事件驱动机制的理解 8.3事件的分类 8.3.1 鼠标事件 8.3.2 键盘事件 8.3.3 html 事件 8.3.4 其它事件 8.4事件驱动机制编程的进一步理解案例 代码: 8.5一个事件可以被多个函数处理 第 9 章dom 编程 9.1dom 的分类和介绍

20、 dom 包括 html dom 、xml dom 和 css dom ,event dom 9.2dom 到底和 html 文件是什么关系 new document 我的标题 点击跳转到泰牛 该文档，对应额 dom 树是如下的情况 ： 9.3dom 编程的框架介绍 9.4bom bom 是浏览器对象模型,将浏览器的各个组件看成对象，: 主要提供了访问和操作 浏览器各组件(比如 window、history、location、navigator、screen、document)的 方法。因为 document 对象占的比例很大。因此 doucment 编程的核心就是 bom 的 核心。 9.5

21、dom 编程的分类说明 9.6bom(浏览器对象模型) 和 dom 的关系 9.7dom 编程的一个体验案例 9.8window 对象 window 对象是全局对象，在使用它的方法和属性时，不需要带 window. 可以直 接使用其方法和属性. 9.8.1 window 对象的常用方法举例 setinterval 和 clearinterval / settimeout / cleartimeout 小闹钟 9.8.2 股票撤回案例 9.9窗口的打开和关闭 window.open(url, 窗口名 _self _blank, 设置窗口的样式); window.close(); 9.10 win

22、dow 案例-登录成功后跳转到指定页面 思路 ： 编写 login.html loginok.html manage.html login.html loginok.html manage.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.1histroy 的常