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

《泰牛程序员 韩顺平 PHP 大牛班 javascript课程 完整笔记》由会员分享，可在线阅读，更多相关《泰牛程序员 韩顺平 PHP 大牛班 javascript课程 完整笔记（92页珍藏版）》请在装配图网上搜索。

1、泰牛程序员 PHP 学院 htpp:/ 第 I 页 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 的运算符的运算

2、符.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循环控制26泰牛程序员 PHP 学院 htpp:/ 第 II 页

3、4.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快

4、速入门案例.446.7.3快速入门案例 2.446.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对象53泰牛程序员 PHP 学院 htpp:/ 第 III 页 7.8全局函数55第第 8 章章事件及事件驱动编程事件及事件驱动编程.578.1概述:578.2JS的事件驱动机制的理解578.3事件的分

5、类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案例-登录成功后

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

7、其它编程语言一起使用(html, php , jsp , )1.3js 的小故事1.4js 运行的原理图泰牛程序员 PHP 学院 htpp:/ 第 3 页 1.5javascript 的文档哪里找?1.6第一个 js 程序,hello,world!泰牛程序员 PHP 学院 htpp:/ 第 4 页 1.7一个非常简单的 js 加法运算补充说明：在 js 中，我们查看一个数据的类型可以使用 typeof 变量名 ,或者typeof(变量名);泰牛程序员 PHP 学院 htpp:/ 第 5 页 1.8js 是弱数据类型语言，变量类型有 js 引擎来决定.1.9js 变量的命名规范(1) 变量变量可

8、以由任意顺序的大小字母、下划线, 美元符号($)组成，但不能以数字开头，不能是 JavaScript 中的保留关键字(2) JavaScript 变量是区分大小写(3) JavaScript 程序的注释 /*/ 或者 /注释案例说明:泰牛程序员 PHP 学院 htpp:/ 第 6 页 如何使用 firefox 中对 js 代码进行调式使用快捷接 ctrl+shift+J 弹出我们的 js 的提示信息泰牛程序员 PHP 学院 htpp:/ 第 7 页 第 2 章js 的数据类型介绍2.1js 的数据类型分类(1) 基本数据类型：数值类型整数、浮点型，布尔型(true , false) , 字符串

9、 (2) 复合数据类型： 数组, 对象(3) 特殊数据类型：null undefined;2.2举例说明泰牛程序员 PHP 学院 htpp:/ 第 8 页 2.3小练习泰牛程序员 PHP 学院 htpp:/ 第 9 页 2.4js 数据类型的转换泰牛程序员 PHP 学院 htpp:/ 第 10 页 第 3 章js 的运算符3.1js 运算符的分类: (1) 算术运算符x = 5 + 6;(2) 赋值运算符x = 7;(3) 比较运算符x 5;(4) 逻辑运算符x 6 & x图解法泰牛程序员 PHP 学院 htpp:/ 第 12 页 小结:1. + 分为 前 + 和 后 +2. 如果是前

10、 + 比如 +a; 就是先 自加，再赋值, 如果是 a+ ，则是 先赋值在自加3. - 分为 前 - 和 后-4. 如果是前 - 比如 -a; 就是先 自减，再赋值, 如果是 a- ，则是 先赋值在自减3.3关系运算符泰牛程序员 PHP 学院 htpp:/ 第 13 页 强调：= = 等于 = = = 全等3.4关系运算符的小案例泰牛程序员 PHP 学院 htpp:/ 第 14 页 3.5逻辑运算符案例:泰牛程序员 PHP 学院 htpp:/ 第 15 页 小结：1. 在逻辑运算中，0、false、null、undefined、NaN 均表示 false2. 在逻辑运算中，非 0 表示 tur

11、e , 比 1 ,或者 -43.6关于逻辑运算的测试题泰牛程序员 PHP 学院 htpp:/ 第 16 页 3.7逻辑非的说明题泰牛程序员 PHP 学院 htpp:/ 第 17 页 第 4 章三大流程控制4.1概述: 顺序控制：没有加控制，默认就是从上到下，从左到右的执行顺序.分支控制: 根据不同的情况，来执行不同的语句循环控制: 更加用户的输入，来反复的执行某段代码.4.2分支控制4.2.1 if 分支基本语法:if(条件判断)/语句块.说明:当条件判断为真时，则执行内的代码,否则不执行.快速入门案例:编写一个程序,可以输入人的捐款,如果该同志的捐款大于 1000 元,则输出 “你的捐款大于

12、 1000,为您爱心点赞!”代码 ：泰牛程序员 PHP 学院 htpp:/ 第 18 页 流程图 ：4.2.2 if.else 双分支 基本语法泰牛程序员 PHP 学院 htpp:/ 第 19 页 if(条件判断 A)/语句块 Aelse/语句块 B:说明：如果判断条件 A 成立，则执行语句块 A,否则，执行语句块 B.快速入门案例:流程图:泰牛程序员 PHP 学院 htpp:/ 第 20 页 4.2.3 多分支控制结构 if . else if .else.基本语法:if(条件判断 A)/语句块 Aelse if(条件判断 B)/语句块 Belse if(条件判断 C)/语句块 Celse泰

13、牛程序员 PHP 学院 htpp:/ 第 21 页 /语句块 C说明：条件判断 A 成立,则执行/语句块 A., 如果判断条件 B 成立，则执行 B 语句块，如果所有的判断条件都不成立，就执行 else 的语句块.快速入门：代码 ：流程图:泰牛程序员 PHP 学院 htpp:/ 第 22 页 4.2.4 多分支的案例泰牛程序员 PHP 学院 htpp:/ 第 23 页 4.3多分支语句-swith基本语法:switch(表达式)case 常量/变量:语句块;break;case 常量/变量:语句块;break;case 常量/变量:语句块;break;.default:语句块;break;快速

14、入门案例:泰牛程序员 PHP 学院 htpp:/ 第 24 页 小结:1. 选择 switch 还是 if else答：如果是判断某几个值的范围，比如 a b, 选择使用 switch, 如果是一个范围比较，我们选择使用 if. else if .else泰牛程序员 PHP 学院 htpp:/ 第 25 页 4.3.1 一个小的练习题4.3.2 关于 switch 的一个小练习泰牛程序员 PHP 学院 htpp:/ 第 26 页 4.4循环控制4.4.1 for 循环控制基本语法是for(var i = 0; i 值; i+)语句;for(循环初值循环初值;循环条件循环条件;步长步长) 语句语

15、句;/循环体循环体 快速入门案例快速入门案例:泰牛程序员 PHP 学院 htpp:/ 第 27 页 执行分析过程如何使用 firebug 来进行调试功能泰牛程序员 PHP 学院 htpp:/ 第 28 页 4.5for 循环的练习题代码如下:泰牛程序员 PHP 学院 htpp:/ 第 29 页 泰牛程序员 PHP 学院 htpp:/ 第 30 页 第 5 章函数5.1函数的必要性举例一个案例:输入两个数,再输入一个运算符(+,-,*,/)，得到结果代码 ：泰牛程序员 PHP 学院 htpp:/ 第 31 页 从这个案例，我们提出一个新的问题?请思考,如果在另外的 html 文件比如 a.htm

16、l,b.html,c.html中也需要完成: 入两个数,再输入一个运算符(+,-,*,/)，得到结果. 又该怎么办? 提出一个解决方案-函数建议： 当一段代码重复使用，超过 3 次以上，我们应该考虑封装成函数 使用函数来解决上面的问题fun.js泰牛程序员 PHP 学院 htpp:/ 第 32 页 在需要的文件中，比如 xxx.html泰牛程序员 PHP 学院 htpp:/ 第 33 页 5.2函数的基本概念概念: 为完成某一个功能的程序指令(语句)的集合.分类: 自定义函数，系统函数5.3函数的基本语法泰牛程序员 PHP 学院 htpp:/ 第 34 页 5.4函数的调用方式在调用函数的时候

17、，需要在后面写上 分号; 这里说一下,js 代码在页面中的使用的方式：5.4.1 方式 1:基本语法是:函数名(实参 1, 实参 2, .);比如:泰牛程序员 PHP 学院 htpp:/ 第 35 页 5.4.2 形参和实参的概念我们可以这样来区分 ： 当我们定义一个函数时，则该函数的()内的，我们称为形参.当我们调用一个函数时，我们传入的参数，已经确定了，则我们讲这个传入的值，称为实参5.4.3 函数调用和返回的说明说明: 1. 对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert(“res=“ + sum(2,3);2. 没有返回值的函数，则返回 undefined。

18、举例说明:3. 关于函数 return 的说明(1) 是否有返回，由程序员的业务逻辑泰牛程序员 PHP 学院 htpp:/ 第 36 页 (2) 返回的数据类型，可以是数值，字符串，数组或其他5.5变量的作用域全局变量和局部变量的小结:1. 全局变量可以在函数外使用，也可以在函数内部使用2. 局部变量只可以在函数内部使用3. 全局变量有三种方式 , 看上面的代码4. 局部变量的定义有一种, 在函数内， var 变量名 = 值;5. 全局变量的隐式定义，我们要避免，这样代码更干净.泰牛程序员 PHP 学院 htpp:/ 第 37 页 5.6函数的其它说明5.7就是三目运算符的补充讲解泰牛程序员

19、PHP 学院 htpp:/ 第 38 页 第 6 章数组数组: 就是把多个数据放在一起管理，就是数组。6.1为什么需要数组代码:思考: 上面的问题是，如果乌龟很多，就没有玩了。-数组.泰牛程序员 PHP 学院 htpp:/ 第 39 页 6.2使用数组解决上面的问题代码 ：6.3数组的基本概念泰牛程序员 PHP 学院 htpp:/ 第 40 页 6.4数组的传递方式结论是： js 中，数组是引用传递:泰牛程序员 PHP 学院 htpp:/ 第 41 页 在一个案例说明数组的引用传递6.5数组使用泰牛程序员 PHP 学院 htpp:/ 第 42 页 如果我们使用数组，其实就是使用数组的元素:数组

20、名下标名 ; 比如 a10; 表示访问 a 数组的第 11 个元素. 数组的使用案例6.6数组的遍历泰牛程序员 PHP 学院 htpp:/ 第 43 页 6.7二维数组了解概念: 一维数组的元素，又是数组，这样的数组，就是二维数组。6.7.1 关于二维数组的访问说明泰牛程序员 PHP 学院 htpp:/ 第 44 页 6.7.2 快速入门案例6.7.3 快速入门案例 2泰牛程序员 PHP 学院 htpp:/ 第 45 页 6.7.4 二维数组的平均值泰牛程序员 PHP 学院 htpp:/ 第 46 页 第 7 章js 的内置对象7.1概述7.2js 内部类的分类说，在 js 中有提供好的类，我

21、们成为内部类Array, String , Number , Boolean, Date, Math, 通过类，我们可以创建对应的实例，这个实例我们称为一个对象。该对象有对应的属性和方法。 说明了一下静态类和动态类的特性泰牛程序员 PHP 学院 htpp:/ 第 47 页 7.3Math 对象7.3.1 介绍:泰牛程序员 PHP 学院 htpp:/ 第 48 页 7.3.2 快速入门案例泰牛程序员 PHP 学院 htpp:/ 第 49 页 7.4Date 对象7.4.1 提出问题d = new Date()获取当前时间，year=Date.getFullYear()获取当前年，month=Da

22、te.getMonth()获取当前月，day=Date.getDate()获取当前日期，然后 d year-month-day 00:00:00 来判断7.4.2 Date 对象的快速入门泰牛程序员 PHP 学院 htpp:/ 第 50 页 7.5一个 string 的案例泰牛程序员 PHP 学院 htpp:/ 第 51 页 小结:1. 如果我们需要取出从第几个位置，到第几个位置的字符串，则使用 substring 2. 如果我们需要取出从第几个位置开始，取多少个字符，则使用 substr7.6Array 对象数组的基本介绍:泰牛程序员 PHP 学院 htpp:/ 第 52 页 案例 1-讲解

23、 array 的基本用法:关于数组的一个作业:泰牛程序员 PHP 学院 htpp:/ 第 53 页 7.7Number 对象 快速入门案例泰牛程序员 PHP 学院 htpp:/ 第 54 页 案例说明泰牛程序员 PHP 学院 htpp:/ 第 55 页 7.8全局函数 encodeURI 和 decodeURI在以前 http:/?index.php?name=泰牛&no=sn 001; isNaN eval 案例泰牛程序员 PHP 学院 htpp:/ 第 56 页 泰牛程序员 PHP 学院 htpp:/ 第 57 页 第 8 章事件及事件驱动编程8.1概述: 8.2js 的事件驱动机

24、制的理解泰牛程序员 PHP 学院 htpp:/ 第 58 页 8.3事件的分类8.3.1 鼠标事件8.3.2 键盘事件8.3.3 html 事件8.3.4 其它事件8.4事件驱动机制编程的进一步理解案例泰牛程序员 PHP 学院 htpp:/ 第 59 页 代码:泰牛程序员 PHP 学院 htpp:/ 第 60 页 泰牛程序员 PHP 学院 htpp:/ 第 61 页 8.5一个事件可以被多个函数处理泰牛程序员 PHP 学院 htpp:/ 第 62 页 第 9 章dom 编程9.1dom 的分类和介绍dom 包括 html dom 、xml dom 和 css dom ,event dom9.2

25、dom 到底和 html 文件是什么关系 New Document 我的标题 点击跳转到泰牛 该文档，对应额 dom 树是如下的情况 ：泰牛程序员 PHP 学院 htpp:/ 第 63 页 9.3dom 编程的框架介绍泰牛程序员 PHP 学院 htpp:/ 第 64 页 9.4bombom 是浏览器对象模型,将浏览器的各个组件看成对象，: 主要提供了访问和操作浏览器各组件(比如 window、history、location、navigator、screen、document)的方法。因为 document 对象占的比例很大。因此 doucment 编程的核心就是 bom 的核心。9.5dom

26、 编程的分类说明泰牛程序员 PHP 学院 htpp:/ 第 65 页 9.6bom(浏览器对象模型) 和 dom 的关系9.7dom 编程的一个体验案例泰牛程序员 PHP 学院 htpp:/ 第 66 页 9.8window 对象window 对象是全局对象，在使用它的方法和属性时，不需要带 window. 可以直接使用其方法和属性.9.8.1 window 对象的常用方法举例setInterval 和 clearInterval / setTimeout / clearTimeout 小闹钟泰牛程序员 PHP 学院 htpp:/ 第 67 页 9.8.2 股票撤回案例9.9窗口的打开和关闭w

27、indow.open(url, 窗口名 _self _blank, 设置窗口的样式);window.close();泰牛程序员 PHP 学院 htpp:/ 第 68 页 9.10 window 案例-登录成功后跳转到指定页面泰牛程序员 PHP 学院 htpp:/ 第 69 页 思路 ： 编写 login.html loginOk.html manage.htmllogin.html泰牛程序员 PHP 学院 htpp:/ 第 70 页 loginOk.htmlmanage.html泰牛程序员 PHP 学院 htpp:/ 第 71 页 第 10 章 document 对象10.1 概述：docum

28、ent 对象是 dom 的编程核心，内容很多，涉及的知识点很杂，而且不同的浏览器还存在兼容性问题。这里我们主要对 document 核心内容和框架做一个介绍.10.2 document 的案例泰牛程序员 PHP 学院 htpp:/ 第 72 页 10.3 关于 css 的属性和 js dom 编程中对 css 属性的对应关系10.4 document 的计算器泰牛程序员 PHP 学院 htpp:/ 第 73 页 泰牛程序员 PHP 学院 htpp:/ 第 74 页 10.5 History 对象(了解)泰牛程序员 PHP 学院 htpp:/ 第 75 页 简述:该对象保存了用户访问浏览器的记录

29、，通过这个对象，我们可以去访问改用曾经访问过的某个页面，比如向前，或者向后。10.5.1histroy 的常用方法10.5.2举例说明 ：代码 ：泰牛程序员 PHP 学院 htpp:/ 第 76 页 test.htmlb.html泰牛程序员 PHP 学院 htpp:/ 第 77 页 10.6 location 对象概述: 即:该对象包含客户端当前的 URL 信息。,主要的用处是可以重新加载当前页面，还可以指定或者设置新的 url 地址10.6.1举例-定时刷新本页面和定时跳转代码:泰牛程序员 PHP 学院 htpp:/ 第 78 页 10.7 navigator 常用的方法和属性 案例:代码:

30、泰牛程序员 PHP 学院 htpp:/ 第 79 页 10.8 screen 对象该对象包含了关于浏览器屏幕的信息案例:泰牛程序员 PHP 学院 htpp:/ 第 80 页 如果同学们希望看到更多信息for(var key in screen)document.write(key + + screenkey);10.9 event 对象event 是操作或者运行时，会产生. event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。10.9.1事件绑定的方式泰牛程序员 PHP 学院 htpp:/ 第 81 页 第一个方式，就是

31、前面讲过.第二个方式，先获取到该对象，然后绑定.泰牛程序员 PHP 学院 htpp:/ 第 82 页 事件绑定的另外一种方式10.10 event 对象10.10.1第一个案例-星星点灯泰牛程序员 PHP 学院 htpp:/ 第 83 页 实现的思路:1. 响应用户点击的事件2. 获取到用户点击的横坐标和纵坐标3. 把星星放到页面代码:10.10.2控制输入框中，只能输入六个数字泰牛程序员 PHP 学院 htpp:/ 第 84 页 泰牛程序员 PHP 学院 htpp:/ 第 85 页 第 11 章 html+javascript+css 的综合应用实例11.1 第一个功能登录页面代码:泰牛程序员 PHP 学院 htpp:/ 第 86 页 11.2 注册页面代码:看源代码:11.3 使用 js 来完成隐藏和显示功能泰牛程序员 PHP 学院 htpp:/ 第 87 页 思考：1. 我们可以获取到 div，然后通过 display 属性来控制显示和隐藏2. 图片的显示可以通过 .src 来修改代码 ：11.4 删除指定行的内容泰牛程序员 PHP 学院 htpp:/ 第 88 页 思路:代码:泰牛程序员 PHP 学院 htpp:/ 第 89 页