这篇博客记录了作者学习JavaScript的历程，从基础语法到高级特性的详细笔记。内容包括JS基础、流程控制、循环、函数、数组、ECMAScript5和6的新特性、正则表达式、DOM操作、事件处理、Cookie、AJAX、JSONP、模块化开发、设计模式和版本控制等。还涉及到PHP入门、Sass、Gulp等前后端工具。作者强调了理解并熟练掌握这些知识的重要性，并给出了实践案例和代码练习。
day1_JS基础
目录：
-
Js基础和代码规范
-
常量/变量
-
运算符
-
进制转换
目标：
今天课程完结以后，大家可以利用JS完成一些简单的数学逻辑运算。
第一节
1、什么是javascript？
JavaScript ———— 一个面向对象的跨平台
脚本语言。(高级编程语言)
什么是面向对象？
什么是跨平台？
什么是脚本？
HTML文件必须在浏览器里执行。
JS文件必须嵌入到HTML文件里才能执行。
凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。
1.1.JS和HTML、CSS的关系
如果将我们建设一个网站比作是建设一栋大楼的话。
1. html 相当于这栋楼的骨架
2. Css 相当于这栋楼的装修
3. JavaScript 相当于管理这栋楼的物业，让我们住在这个小区，有更好的入住体验。
2、JavaScript能做什么？
■网页特效（漂浮的广告）
■用户记住账户名密码
■网页游戏(围住神经猫)
■……
3、
JavaScript的历史
JavaScript 诞生于 1995 年。 它当时的目的是为了验证表单输入的验证。 因为在 JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。
1995 年， 当时工作在 Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于 “向服务器提交数据之前验证”的问题。在 Netscape Navigator 2.0 与 Sun 公司联手开发一个称之为LiveScript 的脚本语言。为了营销便利，之后更名为 JavaScript。
邪恶的后来者
因为 JavaScript1.0 如此成功，所以微软也决定进军浏览器，发布了 IE3.0 并搭载了一 个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）， 并且也提供了自己的 VBScript。
标准的重要
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：NetscapeNavigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是， JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。 随着业界担心的增加，这个语言标准化显然已经势在必行。
灵敏的微软、迟钝的网景
虽然网景开发了 JavaScript 并首先提交给 ECMA 标准化，但因计划改写整个浏览器引擎 的缘故，网景晚了整整一年才推出“完全遵循 ECMA 规范”的 JavaScript1.3。而微软早在一 年前就推出了“完全遵循 ECMA 规范”的 IE4.0。这导致一个直接恶果：JScript 成为 JavaScript 语言的事实标准。
标准的发展
在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同程度的成功和失 败）将 ECMAScript 作为 JavaScript 实现的基础。
谷歌的野心
GoogleChrome，又称 Google 浏览器，是一个由 Google（谷歌）公司开发的开放原始码 网页浏览器。他以简洁的页面，极速的浏览，一举成为全球第三大浏览器。随着移动互联网 的普及，嵌有 Android 系统的平板电脑和智能手机，在浏览器这块将大有作为。
苹果的战略
Safari 浏览器是苹果公司各种产品的默认浏览器，在苹果的一体机(iMac)、笔记本(Mac)、 MP4(ipod)、iphone(智能手机)、ipad(平板电脑)，并且在 windows 和 Linux 平台都有相应版 本。目前市场份额全球第四，但随着苹果的产品不断的深入人心，具有称霸之势。
其中幸存者 Opera 的全球市场份额第五，2%左右。它的背后没有财力雄厚的大公司，但它从“浏览 器大战”存活下来的，有着非常大的潜力。
总结：一些标准化组织
4、JavaScript入门
编辑工具和运行环境
编辑工具：写代码的工具
如：dreamweaver，editplus，Notepad++ sublime atom webStrom
运行环境：看结果的地方
如：IE，firefox，chrome。
ECMAScript：是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展
BOM： Browse Object Model，提供与浏览器交互的方法和接口
DOM： Document Object Model，提供访问和操作网页内容的方法和接口
5、编写JS及如何运行JS
JS是一种脚本语言，他可以有两种方式在html页面中进行引入， 其中一种是外联JS，另一种是内部script。
5.1.外联script的写法为
<script src="相对路径"></script>//该链接可以放在html页面的任意位置，不用和link标签一样一定放在head部分;
那么相对路径对应的应该为后缀为.js的文件。 例如：index.js
alert('hello world');//index.js中的代码
5.2.直接将js脚本写在html页面中，这样的写法要求将js脚本写在script标签中：
<script>
alert('hello world') //js脚本
</script>
【注】同样该script标签可以放在html页面任意的位置;但是一般情况下，语法规范要求我们将<script>标签放在<head>标签中。
5.3.经常性错误示范：
<script src="相对路径">
alert('hello world')；
</script>
5.4.向页面中输出内容;
document.write('这是一些内容');
标签的解析:
document.write('<strong>我似乎强壮了一些</strong>')
转义字符:
< || >
document.write('<strong>强大的</strong>');
5.5.alert
alert()使用 。 停止浏览器加载代码。
浏览器解析代码顺序。（从上到下，从左到右）；
5.5.JavaScript的注释
单行注释 //
多行注释 /* */
5.6.JavaScript标签的属性
src 表示要引入的外部文件
type 表示脚本语言的类型
【注】text/javascript表示说明这一段脚本语言是JavaScript，告诉浏览器这一段要按照JavaScript来解释执行。不写也可以。
6、变量 VS 常量/字面量/直接量
6.1. 常量
常量/直接量( 字面量 literal)
所有直接量(字面量)，就是程序中直接显示出来的数据
100 //数字字面量
'田雨飞' //字符串字面量
false //布尔字面量
【注】数据类型: 基本数据类型 (后面还会重复提到)
Number
String
Boolean
复合数据类型
6.2.变量
跑马圈地，内存详解。
变量定义/声明：
var age; //var 是关键字，age是变量名
赋值：
age = 20;
定义的同时赋值：
var age = 20；【注】声明/定义变量的同时，赋值，叫做初始化。
可以一次定义多个变量：
var name=“tianyufei", age=18，weight=108;
6.3.变量的命名
【注】用户自定义的名字叫做标识符，变量名也是标识符。
JS的标识符：
■标识符是指JS中定义的符号，例如：变量名、函数名等。
■标识符可以由任意的大小写字母、数字、下划线(_)和美元符($)组成，但是不能以数字开头，不能是js中的保留字、关键字。
■标识符区分大小写，如：age和Age是不同的变量。但强烈不建议，用同一个单词的大小写区分两个变量。
■见名思意
6.4.数据类型
Number：数字（整数，浮点数float）
Array：数组
Object：对象
布尔类型：Boolean a==b
特殊类型：Null、Undefined、NaN
如果alert(abc)一个不存在的变量，会直接报错，而不是undefined，可见undefined和真正的未定义还是有些区别的。因为它是一种特殊类型。
【注】null也是一种值，但逻辑含义是没有值，它是对象Object类型。
【注】typeof关键字
6.5.JS是弱引用语言
js是弱数据类型的语言，容错性较高。
定义时不需要定义类型，赋值赋的是啥类型就是啥类型
var temp； //temp时啥数据类型？不确定
temp= 12; //temp变量是数字类型
temp = “hello”; //temp变量变成了字符串类型
怎么运行查看变量的类型
var x=123;
alert(typeof x);
6.6.编程习惯
分号 虽然不加分号在JavaScript语法上没有问题，但是建议不要省略分号，加了分号之后可以用软件压缩。良好的变成习惯（JavaScript权威指南）上的理由。
空空格 运算符前后各空一格空格，逗号或者分号后面还有语句，空一格空格。
代码缩进 很多地方需要进行代码缩进，好的代码缩进可以帮助我们减少阅读时间，提高开发效率。 一个tab键 == 四个空格
7、运算符
算术运算符（+，-, *,/,%(取余数)）
字符串和变量的拼接(+)
关系运算符
<、>、<=、>=、==、===、!= !==
逻辑运算符
&& 与(且)、|| 或、! 非
赋值运算符a+=10;
=、+=、-=、*=、/=、%=
自增、自减
++a, a++
--a, a--
7.1.算数运算符
7.2自动数据类型转换（难点，我们后面会多次提及，帮助大家巩固）
其他数据类型转换为字符串：
var result = “你” + “好” //结果 你好 类型是string
var result = “1” + 1; //结果 11 类型是string
var result = “1” + true //结果 1true 类型是string
var result = “1” + undefined ; //结果 1undefined 类型是string
var result = “1” + null; //结果 1null 类型是string
总结：任何类型的数据和字符串类型的数据做相加（+）操作时，其他数据类型会自动的转换为字符串类型。此时的相加（+）不再是数学意义上的加法，而是表示“拼接”的意思。
其他数据类型转换为数字：
var result = 1 - “2”; //结果 1 类型是 number
var result = 1 - “我”; //结果 NaN 类型是 number
【注】NaN是一个值，这个值的类型是（number）。表现的意思是“不是一个数字”;
规则：任何数据除了和字符串做相加运算外，与NaN做算术运算的结果始终都是NaN。包括NaN本身和NaN做运算的结果也是NaN。
字符串是数值会自动的转换为数字，否则会转换为NaN
var result = 1 * “1”; //结果 1 类型是 number
var result = 1 / “1”; //结果 1 类型是 number
var result = 1 + true; //结果 2 类型是number
var result = 1 * false; //结果 0 类型是 number
true会自动的转换为1 false会自动的转换为0
var result = 1 + null ; //结果是1 类型是number
var result = 1 + undefined //结果是NaN 类型是number
null会自动的转换为0， undefined会自动的转为NaN
总结：任何其他数据除了和字符串做相加操作外，与数字类型做算术运算时，其他数据会自动的转换为数字。
其他数据转换布尔：
Boolean(数据);
数字转Boolean
非0数字->true;
0 --> false;
字符串转Boolean
非空字符串(包含空格)-> true;
空字符串 -->false
null和undefined转换Boolean
都是false
7.3.浮点数
-
认识浮点数：带小数点的数
-
计算机天生计算小数运算有Bug
7.4.强制数据类型转换
字符串转换数字类型：parseInt()、parseFloat()
parseInt() 是把其它类型转换为整型；
parseFloat();是把其它类型转换为浮点型（小数）
Number(数据); 数字
认识NaN：他是一种特殊的Number类型结果，代表意外转换的数字，NaN和任何东西都是不等的。
7.5.算数运算补充
【注】当被除数为0的时候。
正数/0 结果为 infinity （无穷大）
负数/0 结果为 -infinity（无穷小）
8、作业
必做：
今天课堂所有的例子代码，照敲两遍
1.入职薪水10K，每年涨幅入职薪水的5%，50年后工资多少？
2.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
3.小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。\u2028提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
4.给定一个三位数，分别把这个数字的百位、十位、个位算出来并显示。
9、表达式（1、表达式的值 2、表达式的功能）
由运算符和操作数（变量或常量）组成的式子
算术运算符组成的式子叫算术表达式
关系运算符组成的式子叫关系表达式或者条件表达式
逻辑运算符组成的式子叫做逻辑表达式
……
如：2+3；a+5；c>3; a&&b等；100是一个最简单的表达式。
审视表达式分两步
<1>看表达式的功能
<2>看表达式的值
10、赋值运算符
【赋值运算符】
1. 赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。
2. 复合赋值运算符通过 x=的形式表示，x 表示算术运算符。
11、一元运算符
【一元运算符】
概念：只能操作一个值的运算符叫做一元运算符。
var age = ++box; //加后取值 先执行加法运算,在取值
var height = box++; //加前取值 先取值,再执行加法运算
（了解，编程涉及不到）【其他类型应用一元运算符的规则】
var box = '89';
box++; //90,数值字符自动转换成数值
var box = 'ab';
box++; //NaN,字符串包含非数值转成NaN
var box = false;
box++; //1,false转成数值0,累加就是1
var box = 2.3;
box++; //3.3,直接加1
12、关系运算符
12.1.关系运算的规则（1）
【注】用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等 于(>=)、相等(==)、不等(!=)、全等(恒等)(===)、不全等(不恒等)(!==)
和其他运算符一样,当关系运算符操作非数值时要遵循一下规则:
1.两个操作数都是数值，则数值比较；
2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；
3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
12.2.关系运算的规则（2）
在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：
1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
2.一个操作数是字符串，则比较之前将其转成为数值再比较
3.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
4.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false
12.3关系运算（特殊值）
13、逻辑运算符
13.1.逻辑运算的短路操作
逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符： 逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
逻辑与运算符属于短路操作，顾名思义，如果第一个操作数返回是 false，第二个数不 管是 true 还是 false 都返回的 false。
和逻辑与运算符相似，逻辑或运算符也是短路操作。当第一操作数的求值结果为 true， 就不会对第二个操作数求值了。
13.2.
逻辑运算符（非）
逻辑非(NOT)：!
逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个 布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：
1.操作数是一个空字符串，返回 true；
2.操作数是一个非空字符串，返回 false；
3.操作数是数值 0，返回 true；
4.操作数是任意非 0 数值(包括 Infinity)，false；
5.操作数是 NaN，返回 true；
6.操作数是 undefined，返回 true；
14、位运算（了解）
15、复习和补充
1.字符串运算符
字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。 规则：至少一个操作数是字符串即可。
2.逗号运算符
逗号运算符可以在一条语句中执行多个操作。
15.1.运算符优先级
16、什么是进制？
我们平时所习惯的不过是一种别人规定好的规则而已，比如我们在买东西的时候，一市斤，而英国使用的是磅；
进制也是我们在数数的时候的一种习惯，我们每个人都有十个手指，我们习惯上使用的数数是十进制。但是对于计算机来说，我们必须使用二进制，那是因为组成计算机的元件，一般只有两种状态 0 1。
【注】但是二进制对于我们程序员来说阅读不是很方便，也不方便书写，所以有了八进制和十六进制。
八进制 0~7
十六进制 0~9 a b c d e f
16.1.十进制转二进制
除二取余法
16.2.二进制转八进制
-
十进制转八进制，同样可以使用 除八取余法。
-
一般情况下，我们直接使用二进制转八进制。
规则：从右往左数，每三位一组，不足三位的用0补齐，将每一组数转成十进制，这个数就是八进制数。
16.3.二进制转十六进制
-
十进制转八进制，同样可以使用 除十六取余法。
-
一般情况下，我们直接使用二进制转十六进制。
规则：从右往左数，每四位一组，不足四位的用0补齐，将每一组数转成十进制，这个数就是八进制数。
16.4.快捷的进制转换
进制转换——> 变量/常量.toString(进制数)
var num1 = 072; //八进制数 58
var num2 = 0xAF; //十六进制数 175
alert(num1.toString(10));
alert(num2.toString(10)); //将数字转成指定的进制格式。
进制转换——> 将字符串转成十进制
var str = "3a";
alert(parseInt(str, 16)); //第二个参数，指定字符串的进制格式。
16.5.进制转换的应用
基本上使用的几率很小，对编程的帮助不大，了解就好。那为什么还要学习呢？因为了解进制转换，可以帮助我们更加深入理解计算机运行原理。
16.6.进制转换练习
练习:
1.将这些二进制数字10010(2) 1100(2) 10111(2)转成10进制数字
2.转成八进制、十六进制
10010(2) 18 22 12
1100(2) 12 14 c
10111(2) 23 27 17
作业:转成八进制、十六进制
1.将下列10进制数转成二进制
193 49 81 35
11000001 110001 1010001 100011
2.将下列二进制数转成十进制数
100001001 265
11001101 205
17、console.log
18、强化练习（120分钟）
- var k=0; console.log(k++ + ++k +k +k++)
- 掌握逻辑运算的意义
- 掌握八进制、十六进制的写法
- 掌握NaN的含义
- 掌握Number函数的转换结果
19、总结
-
今天的知识，只是JS基础语法的一些认识和使用，我们还不能做更多的操作。
-
今天的知识，比较零散，繁杂，大家需要认真记忆，多加练习。
-
从今天，开始，大家要有一个目标 10W行代码。
-
今天的知识，我们不能进行大量的代码练习，所以，我们加固一下对一阶段知识的练习，去实现一个静态页面的编写。
day2_流程控制语句
目标：
-
程序的三大流程控制
-
if语句
-
Switch语句
1、程序的三大流程语句
-
我们的计算机在执行一个程序的时候，最基本的方式是一条语 句接一条语 句的执行。但不可能所有的问题都能用顺序执行方式就能解决，总会有一些跳转。
-
采用结构化的程序设计，可以大大提高开发程序的速度、提高 程序的可读性、程序运行的速度和效率。
-
结构化程序是由若干个基本结构组合而成，每一个结构可以包 含若干条语句和其它基本结构。共有三种基本结构
1.1.顺序、分支（选择/条件）、循环
-
顺序：从上朝下执行的代码就是顺序
-
选择：根据不同的情况，执行对应代码
-
循环：重复做一件事情
2、顺序结构
题目：输入两个数，然后交换这两个数，再输出它们交换后的结果
。
流程图：
分析：
顺序结构是最简单的程序结构，它是由若干个依次 执行的处理步骤组成的。如图，A语句和B语句是依 次执行的，只有在执行完A语句后，才能接着执行B 语句。
3、选择（分支/条件）语句
题目：判断一个数是偶数还是奇数。
流程图：
分析：
在处理实际问题时，只有顺序结构是 不够的，经常会遇到一些条件的判断， 流程根据条件是否成立有不同的流向。 如下图所示，程序根据给定的条件P是 否成立而选择执行A操作或B操作。这 种先根据条件做出判断，再决定执行 哪一种操作的结构称为分支结构，也 称为选择结构。
3.1.选择结构-if单分支
if(true){
//执行该语句
}
if(false){
//跳过该语句
}
【注】大括号{}：括起来来的语句是当做同一条语句进行处理。
3.2.选择结构-if双分支
if(表达式){
执行语句1
}else{
执行语句2
}
【分析】当括号内的表达式结果成立，执行执行语句1，否则执行执行语句2.
示例：
1、判断一个数是偶数还是奇数；
2、求两个数的最大数；
3、判断一个年份是闰年还是平年；
【注】能被4整除且不能被100整除，或者能被400整除;
3.3.if括号中的表达式详解
一个奇葩的问题
if(//在这个括号里会发生各种各样奇奇怪怪的事情)
例如：
if(1){
alert('看我弹出来给你看’);
}
感觉怪怪的
-
if括号里填什么来着？？？
-
1是true么？
为什么会发生这样的事情那？在一些特定情况下，计算机会进行自动类型转换。他和强制类型转换（Number）不一样，他不需要你做些什么，会自动对数据类型进行转换。
【注】在
运算中，和if（
括号中），会发生隐式类型转换。它会将if括号中的任何形式的表达式，都自动类型转换成布尔值。
3.4选择结构-if多分支语句
【执行过程】从上往下，满足哪个条件就执行其相对应的语句，都不满足时， 执行最后的else的语句，只能进入其中之一。
3.5.选择结构-案例
3.6.练习
1.判断一个整数，属于哪个范围：大于0；小于0；等于0
2.判断一个整数是偶数还是奇数，并输出判断结果
3.开发一款软件，根据公式（身高-108）*2=体重，可以有 10斤左右的浮动。来观察测试者体重
3.7.选择结构-嵌套if结构
if(表达式1){
if(表达式2){
if(表达式3){
}
}
}
注意：
1.嵌套if时，最好不要超过三层；
2.内层的每一对if...else代码 要缩进且对齐；
3.编写代码时，else要与最近的 if配对。
3.8.选择结构-if结构示例
BMI指数（即身体质量指数，简称体脂指数又称体重，英文 为Body Mass Index，简称BMI），是用体重公斤数除以身高米 数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及 是否健康的一个标准。主要用于统计用途，当我们需要比较及分 析一个人的体重对于不同高度的人所带来的健康影响时，BMI值 是一个中立而可靠的指标。
体质指数（BMI）= 体重（kg）÷身高^2（m） EX：70kg÷（1.75×1.75）=22.86
4、选择结构-switch语句
【注】表达式的结果等于哪个case的常量，则执行其后的语句，执行 完break就跳出switch结构，都不满足则执行default的语句。
break的作用：是跳出switch结构，如果没有break，则继续执行 下面分支的的语句（而不进行判断）
注意：
1. 注意switch的应用场景
2. 注意case穿透，要加break语句。
3. 每一个switch语句都需要加default语句。
4.1.多分支-switch语句例题
例题：按照考试成绩的等级，输出百分制数段.
4.2.选择结构-case穿透案例
输如月份，显示当月的天数
要求：1) 利用case穿透简化代码
4.3.选择结构-注意点
-
if后面的()不能省略，()后面不要加分号
-
if分支中即使一句话也要把{}写上
-
if嵌套不要超过三层
-
Switch语句里把default分支一定要写上，防 止在以后的维护中产生歧义
-
把执行概率更大（正常情况）放在前面（if， case）
-
if else 一般来表示两个分支或者嵌套比较 少的分支，如果分支多的话，优先使用switch。
5、补充-条件运算符
■
唯一的三目运算符，要求有三个操作数。
形式：
执行过程：先求解表达式1，若为非0（真）则求 解表达式2，若表达式1的值是0（假），则求解表达式3。
示例：求两个数的最大数
6、综合应用
-
个人所得税的计算器
【注】应缴个人所得税=（工资收入- 5000）*税率 – 速算扣除数。
2.判断一个整数，属于哪个范围：大于0；小于0；等于0
3.开发一款软件，根据公式（身高-108）*2=体重，可以有10斤左 右的浮动。来观察测试者体重是否合适
4.
.
要求：
1）点击保存按钮时，使用JS判断用户的联系电话是否为纯数字，如果用户输入有错误，使用 alert()弹框警告
2）判断用户名是否填写，如果空白，使用alert弹框警告
7、总结和拓展
day3_循环语句
目录：
-
循环的概念
-
While循环
-
do While循环
-
for循环
-
break和countinue
-
练习
1、循环的意义
为啥要循环？
计算机很笨！
笨到我们不给它编写程序去做具体的事情，它什么都不会。
计算机很快!
快到每秒钟百亿次的计算量。
发展到现在也是一样，当我们需要计算机的时候， 大多数让他干的
是重复性的工作
， 这些重复性的工作有着极其相似的代码， 比如，输出10次‘hello world’；
document.write('hello world')
document.write('hello world')
document.write('hello world')
…
这样处理起来非常的费时费力，同时也会有非常多的代码冗余，那么这时候我们应该使用到的就是js中的循环。
我们的代码可以不用循环， 但是你真的愿意写这样的代码么？ 比如打印1000次hello world。
2、
循环的概念
循环就是重复做一件事
循环结构是程序中一种很重要的结构，其特点是在给定条件成立时，反复执行某程序段，直到条件不成立为止。
分类
-
while循环
-
do…while循环
-
for循环
3、while循环
语法格式：
while(表达式)
{
语句；
}
注意：
•先判断表达式，表达式成立后执行语句。
•循环条件中使用的变量(循环变量)需要经过初始化。
•循环体中，应有结束循环的条件，否则会造成死循环。
•循环体中可以写若干句合法的javaScript代码，包括if，也可以再套个循环语句。
示例：
用
while
循环求
1
～
100
之和。
3.1.while循环练习
1.打印100以内7的倍数
2.打印100以内的奇数
3.打印100以内所有偶数的和
4.•打印图形
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
5.求出1-1/2+1/3-1/4…..1/100的和 var i=1;
6.打印出1000-2000年中所有的闰年，并以每行四个数的形式输出
4、do_while循环
语法格式：
do
{
循环语句;
}while(表达式);
注意：1.最后的分号不要忘记。
2.循环条件中使用的变量需要经过初始化。
3.循环体中，应有结束循环的条件，否则会造成死循环。
示例：
用
do
…
while
循环求
1
～
100
之和。
4.1.while和do_while的区别
*执行顺序的问题，while是先判断，do while，先执行循环体的代码，再判断。当条件第一次就不满足时，更能体现出区别。
*在开发中，while用的情况多。如果while处理逻辑比较别扭时，就需要使用do while。
5、for循环
语法格式：
for(表达式1; 表达式2; 表达式3){
语句;
}
执行过程：
1、先求解表达式1（只求一次）
2、求解表达式2，若其值为真(非0)，
则执行for语句中指定的内嵌语句，
然后求解表达式3；再求解表达式2，若为假，
则结束循环，执行for循环外的语句。
示例：
用
do
…
while
循环求
1
～
100
之和。
5.1.for循环表达式_补充
【注】
三个表达式都可以省略，但分号不能省略，省略后都可改写。
如：省略表达式
1
，需在循环外初始化循环变量。
3
个表达式都省略：
例：
for(;;)
；这是个死循环
5.2.循环嵌套
-
一个循环语句内又包含另一个完整的循环语句。
-
循环可以互相嵌套，下面几种都是合法的形式。
5.3.循环嵌套_示例
6、break关键字
* break语句功能：
1. 在switch语句中使流程跳出switch结构。
2. 在循环语句中使流程跳出当前循环。
* 强调：
1. 如果已执行break语句，就不会执行循环体中位于break后的语句。
2. 在多层循环中，一个break语句只向外跳一层。
7、continue关键字
* continue语句的功能:
只能在循环语句中使用，使本次循环结束，即跳过循环体中下面尚未执行的语句，接着进行下次是否执行循环的判断。
* 强调：
1. continue语句只能用在循环里。
2. 对于 while 和 do-while 循环，continue 语句执行之后的动作是条件判断；对于 for 循环，随后的动作是变量更新。
8、break和continue对比
9、注意点
* 选择for还是选择while
一般情况下，已知循环次数时，用for，否则用while。
* 如何造死循环：
1. while（true）{……}; 常用
2. do{…}while(true);
3. for(;;)
10、练习
1. 一个新入职，月工资为2000元的员工，每年涨上一年年工资5%，到20年时的月工资是多少？
2.山上有一口缸可以装50升水，现在有15升水。老和尚叫小和尚下山挑水，每次可以挑5升。问：小和尚要挑几次水才可以把水缸挑满？通过编程解决这个问题。
3. 打印100–200之间所有能被3或者7整除的数
4. 计算10的阶乘 (1*2*3*4*5*6*7*8*9*10 n的阶乘1*2……*n)
5。 计算1+3+5+...+99的和
6. 99乘法表 *
7. 判断一个数是不是合数。(指自然数中除了能被1和本身整除外，还能被其他的数整除（不包括0)的数。)
8. 判断一个数是不是质数。(除了1和它本身以外不再有其他的除数整除。)
9. 求出1-1/2+1/3-1/4…..1/100的和
11、拓展练习*（有难度）
-
找出所有的水仙花数，三位数，各位立方和等于该数本身。 153 = 1 ^ 3 + 5 ^ 3 + 3 ^ 3
-
输入两个数，求两个数的最大公约数 （ 能够同时整除两个数的最大数 ）思路：先找出两个数中最小的那个数
-
输入两个数，求两个数的最小公倍数 （能够同时被两个数整除的最小数）
思路：
1.先找出两个数中的最大数
2.
最大数
++
，直到找出能被两个数整除的数
(
退出循环
)
4.
输入两个数
n
，
a
，如果
n==3
，
a==2
；
输出
2 + 22 + 222
的值。（不用输出式子）
如果
n==4
，
a==3
；
输出
3 + 33 + 333 + 3333
的值。
思路：
1.
n = 3,
相加三次
,
每次相加比前一次相加的数
,
多一位
2.
每次多的这个位数的值为
a
5.
五位数中，对称的数称为回文数，找出所有的回文数。 如12321
思路：
1. 先找出五位数中的第一位和第五位数比较
2. 在找出五位数中第二位和第四位比较。
12、总结
问题
输入年、月、日，计算某一天是该年的第几天（周）
【注】做题不是目的，做题目的是练习语法和逻辑思维。前端开发。
day4_函数
目录：
-
函数的概念，及作用
-
函数的声明
-
如何执行函数（调用）
-
函数的参数（实参，形参）,返回值
-
arguments
-
作用域
-
DOM的简单操作
-
递归（拓展）
1、前言
在火影的世界中存在忍术，忍术是把强大的能量集中在一起以各种各样不同的形式发射出来。怎样使用各种各样的忍术那？通过结印。
好，我们提取一些火影忍者中的关键信息。
1. 火影忍者的故事背景有忍术存在，忍术什么样是由忍术先祖发明出来的。
2. 忍术是同过结印触发的。结印几次就触发几次；（查克拉足够的情况下）
通过这个背景我们想象一下，在JavaScript这个故事中，有一种类似忍术的东西，这种东西叫做函数，忍术先祖可以创造各种各样的忍术，同样我们也可以创造各种各样不同的函数，忍术需要结印才能触发，同样的函数需要调用才能触发。
忍术 => JS的函数(程序员写的)
结印发动忍术 => 调用函数(函数才会执行)
2、函数的概念和作用
概念：
函数就是把完成特定功能的一段代码[抽象出来]，使之成为程序中的一个[独立实体]，起个名字（函数名）。可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。
作用：
-
使程序变得简短而清晰
-
有利于程序维护
-
可以提高程序开发效率
-
提高了代码的重用性（复用性）
3、函数的分类
3.1.内置函数(系统函数、官方函数)
是官方提供好的函数，直接使用，例如：
alert()
document.write()
console.log()
parseInt() parseFloat()...
3.2.自定义函数(用户自定义的函数)
用户根据实际需求，需要自己封装一个函数。
3.3.编程中函数的概念
函数是当它被调用时执行的可重复使用的代码块。
3.4事件驱动函数
什么是事件驱动函数？
在和页面交互的过程中所调用的函数，该函数被称之为事件驱动函数。
什么是事件？
和页面交互的行为称之为事件。比如：鼠标点击某个按钮时(onclick)、鼠标浮动或离开
到某个区域时（onmouseenter、onmouseleave）、文本框获取焦点和失去焦点时(onfocus、onblur)等
事件驱动函数的使用
节点对象.on+事件名 = 事件处理程序
事件目标：节点对象，比如给某个按钮添加点击事件，该按钮就是节点对象或事件目标
事件类型：如onclick、onmouseover、onmouseout
事件处理程序： 函数
如：
var btn = document.getElementById(“btn”);
btn.onclick = function(){
//执行代码
}
案例：鼠标进入和离开切换图片。
4、函数的定义
function关键字定义一个函数
function 函数名(参数1名字, 参数2名字, …) 函数可以没有形参
{
语句/代码块;
return 返回值; 函数可以没有返回值(undefined)
}
4.1.形参、实参
函数的参数跟变量是一样使用。
形参就是在函数定义时，函数名后面的参数，不能用var修饰。
实参就是调用时，函数名后面的参数
在一般传值调用的机制中只能把实参传送给形参，而不能把形参的值反向地传送给实参。因此在函数调用过程中，形参值发生改变，而实参中的值不会变化。
例如：
function addNum(n){
n += 5;
}
var a = 10;
addNum(a);
alert(a);
4.2.arguments
javasript函数不介意传递进来多少个参数，也不在乎传进来参数是什么数据类型，在调用这个函数时也未必一定要传递两个参数，原因是 ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数（如果有参数的话）
arguments
arguments.length 参数的个数
arguments[i] 访问第i个参数
练习：向一个函数传入不定数量的数值求和。
4.3课堂练习
1.编写一个函数，计算两个数字的和、差、积、商
要求：使用传参的形式
2.编写一个函数，计算三个数字的大小，按从小到大顺序输出
3.编写一个函数，输入n为偶数时，调用函数求1/2+1/4+...+1/n,当输入n为奇数时，调用函数求/1+1/3+...+1/n
4.4函数的返回值 return
如果我们要是外部获取到函数内运行的结果,可以通过return语句跟后面的要返回的值来实现返回值。
return 返回结果；
【注】函数的返回值，就是return后面表达式的结果。
4.5.作用域
var a = 10;
function m1(){
var a = 5;
alert(a);
}
m1();
alert(a); //从下往上寻找
作用域：就是起作用的范围。或者说有效范围。
* 局部变量
局部变量就是定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，另外，形参也是局部变量。
* 全局变量
全局变量就是定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围是当前文件的任何地方。
注意：定义变量时省略var是不安全的，不过是合法的，不写var的时候会被解释是全局变量
示例：
-
判断一个年份是不是闰年
-
判断一个数是不是质数
4.6
函数的嵌套调用
函数之间允许相互调用，也允许嵌套调用。其实我们一直在用函数相互调用。
5、函数的递归调用(拓展训练)
概念：
函数还可以自己调用自己，称为递归调用。
重要性：
递归的分量，递归属于函数中比较难理解的知识，在应用开发中，虽然使用不是很频繁，但是很体现你的功底，而且，从事IT行业开发，最好要会递归，如果说现在可以不要求灵活运用的话，以后到公司中一定要会，如果面试中有人问你递归，说明，他对你要求挺高。
5.1.函数的递归调用（方法）
方法:
1.首先去找临界值，即无需计算，获得的值。
2. 找这一次和上一次的关系
3. 假设当前函数已经可以使用，调用自身计算上一次
示例：
计算1+2+3+…+100的和
输入一个n,打印n个hello world的运行结果，再写出这次的运行结果。
5.2.函数的递归调用（强调）
【注】函数的递归调用只能用于静态的数据运算，如果是动态数据，风险过高，容易崩溃。
【功用】凡是循环能做到的，递归都能做到。
5.3拓展训练（菲波那切数列）
*拓展训练
兔子繁殖问题，设有一对新生兔子，从第四个月开始他们每个月月初都生一对兔子，新生的兔子从第四个月月初开始又每个月生一对兔子
按此规律，并假定兔子没有死亡,n(n <= 20)个月月末共有多少对兔子？
6、作业
结果
-
写个函数计算所有传入参数相乘的
-
找出0-100之间7的倍数，和包含7的数，封装函数
-
弄递归实现1-n内的所有数的乘积，n传入的参数，返回值是所有数的乘积。
-
有一堆桃子不知数目，猴子第一天吃掉一半，觉得不过瘾，又多吃了一只，第二天照此办法，吃掉剩下桃子的一半另加一只，天天如此，到第 num(num <= 10) 天早上，猴子发现只剩一只桃子了，问这堆桃子原来有多少只？ （思路： n 为还剩 n 天吃完的桃子数）
-
某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上 5, 然后用除以 10 的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文
7、总结
-
循环语句，所有题，封装函数
-
作业封装函数
-
笔记复习。
-
周报 每个人都写
day5_数组
目录：
-
数组的使用
-
数组的概念
-
数组常用的函数（记忆）
-
队列/栈结构
-
数组常用的冒泡、选择排序算法
-
数组和函数的结合使用
1、为什么使用数组
当我们需要表示一组数据，或者叫做一次性定义很多相似的数字或变量时，就需要使用数组，如：表示一个班级学生的成绩， 一年十二个月的销售数据等等。
2、数组的概念
概念：数组的字面意思就是一组数据，一组(一般情况下相同类型)的数据（不一定都是数字，可以是任意数据类型）。
数组是一种数据类型。
数组的作用是：使用单独的变量名来存储一系列的值。
2.1.数组的声明
三种声明方式：
1、通过new运算符创建数组
var arr = new Array(10, 20, true, "hello");
2、省略new运算符创建数组
var arr = Array(10, 20, true, "hello");
3、直接通过常量赋值
var arr = [10, 20, true, "hello”];
注意：
var arr = new Array(10);
var arr = Array(10);
【注】上述两种写法，都是声明长
2.2使用数组元素（访问）
【注】在数组中存储的数据叫做数组的元素。
arr[0]:表示数组的第一个元素，0是下标，也叫索引
arr[1]:表示数组的第二个元素，1是下标
……
2.3数组中的几个名词
数组的长度（length属性）：
数组的元素个数 arr.length
【注】length属性，不是只读的，可以设置。
2.4.数组的下标
下标就是索引，即元素的序号，从0开始，下标最大取值是：数组的长度 length - 1。
下标可以是变量或表达式。
2.5数组的赋值
1. 给数组赋值，就是给数组的元素赋值，需要通过给数组的每个元素一一赋值。
如： arr[0] = 20; //让数组的第一个元素的值为20;
arr[1] = 12; //让数组的第二个元素的值为12;
2. 以下通过循环给数组的每个元素赋值，赋成下标的平方。
for(var i = 0; i < 10; i++){
arr[i] = i * i;
}
3.以下通过循环给数组每个元素赋值，随机数。
for(var i = 0; i < 10; i++){
arr[i] = Math.random();
}
var arr = new Array(10);
for(var i = 0; i < arr.length; i++){
arr[i] = parseInt(Math.random()*10);
document.write(arr[i]+" ");
}
// document.write(arr);
2.6数组的使用
遍历数组
普通for循环
for(var i = 0; i < 5; i++){
document.write(arr[i]);
}
for…in语句用于遍历数组或者对象的属性（快速枚举法）
for(var i in arr){
document.write(arr[i]);
}
3、数组的方法
3.1.栈方法
ECMAScript 数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可 以让数组像栈一样，可以限制插入和删除项的数据结构。栈是一种数据结构(后进先出)，也 就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发 生在一个位置——栈的顶部。ECMAScript 为数组专门提供了 push()和 pop()方法。
-
push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。
-
而 pop()方法则从数组末尾移除最后一个元素，减少数组的length值，然后返回移除的元素。
alert(box.push("盐城”)); //数组末尾添加一个元素，并且返回长度
box.pop() //移除数组末尾元素，并返回移除的元素
push
格式：数组.push(参数1, 参数2...);
功能：给数组的末尾添加元素。
返回值：插完元素以后数组的长度。
pop
格式：数组.pop()
参数：没有参数
返回值：取最后一个元素
功能：从数组末尾取下一个元素
最低0.47元/天 解锁文章
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
