原js笔记

最新推荐文章于 2024-06-01 15:02:59 发布

Pwsifeng

最新推荐文章于 2024-06-01 15:02:59 发布

阅读量2.6k

点赞数 5

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Pwsifeng/article/details/122413767

版权

s原生JS笔记

电话：17339853876（微信同号）

二阶段学习内容

1、B/S架构（web结构）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)]

2、前端工程师的工作

人机交互
前后端交互

3、HTML、CSS、JS的作用和关系

一个网页由三部分组成：HTML、CSS、Javascript

HTML：结构（静态）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcgduT0k-1641803458641)(img1628929543099.png)]
CSS ：表现（静态，有"动画"）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYw5VF4O-1641803458641)(img1628929550052.png)]
javascript：行为（交互）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s481JdLj-1641803458645)(img1628929558088.png)]

4、二阶段学习的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mraWz6sB-1641803458645)(img1628928753710.png)]

第一天、javascript的基本语法

本节课的目标：

1、明白js在web开发中的位置（B/S架构图）
2、明白js在web前端中的作用（html是结构，css是表现，js是行为）
3、Js代码的基本格式和标签
4、Js的变量，数据类型，运算符（算术，关系，逻辑），表达式，运算过程中的隐式转换和显式转换，十六进制和八进制，转义字符

一、 JS简介，JS和H5的关系

1）、简介:

JavaScript一种在浏览器中解释运行的脚本语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，
是广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML（HTML5）网页增加动态功能。

如：表单验证、漂浮的广告、客户端的显示、网页游戏、地图搜索、股市信息查询、web聊天。。。

2）、历史：

1994年：网景公司(Netscape)发布了Navigator浏览器0.9版，只能浏览网页，没法交互。后来，才出现了全新的语言：liveScript。

liveScript ==> javaScript => ECMAScript(规范)

1999年：ES3，JavaScript 的第三版

2019年：出现了 ES5

2010年：出现了 ES6（里程碑的版本），以后，每年增加一次版本。

3）、组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BBhdOSCx-1641803458646)(img1628929675141.png)]

ECMAScript：

是一种由Ecma国际(前身为欧洲计算机制造商协会),定立ECMA-262标准化的脚本程序设计语言。规定了 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等。
BOM：

定义了 JavaScript 操作浏览器的接口，提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法。
DOM：

定义了 JavaScript 操作 HTML 文档的接口，提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法。

二、编写及运行JS

1、编写

在网页里写JS代码的位置有三种：

1）、行内式

和CSS的行内是一样的，但是JS的行内写法真的很少用，几乎不用。

2）、内部式

和css写在一对style标签一样，JS是写在一对script标签里

<script>    
       alert("我用来弹出消息框！") ;
</script>

注：

1、script标签，可以写在HTML中任意位置，可出现多个。但建议写在最后（body标签的末尾）

2、JS大小写敏感

3、每句话后面写上分号，虽然不是必须的，但是建议写上，可以提高性能

3）、外部式

和CSS的外部引入文件是同样的道理

新建JS文件，如：demo01.js

引入：

<script  src="demo1.js"  ></script>

注意：

1、引入js文件时，使用script标签的双标写法，

2、不要在script标签中间写代码，如果要写，另起一对script标签

2、注释

单行注释
多行注释 /* /
文档注释 /* */

3、运行顺序

Javascript和HTML代码在同一个文件中写，它们的执行顺序是从上朝下，谁在前先执行谁。

4、编辑工具和运行环境

编辑工具：写代码的工具
如：dreamweaver，editplus，Notepad++，sublime，vscode，hbuild，webstrom
运行环境：看结果的地方
如：IE，firefox，chrome

三、语法：变量

1、概念：

变量用来在计算机中存储和表示数据。是会根据程序的执行而变化的量（数学中学过自变量和因变量）

2、定义（声明）：

var age; var 是关键字，age是变量名

3、赋值：

age = 20; 20是数据，"="是赋值

4、定义的同时赋值：

var age = 20；

5、使用变量：

alert(myname);

age = age+1；

注：

1、变量必须先赋值再使用

2、可以一次定义多个变量：
var myname=“刘德华”, age=18，weight=138;

6、变量的命名规则及关键字：

1）、变量命名规则
变量名由数字、字母以及下划线组成，但不能以数字开头
不要使用关键字及保留字
2）、变量命名规范：
尽量使用有意义的单词作为变量名（望文知义），有驼峰命名法和西班牙命名法（以小写字母b,f,i,s开头表示类型，后接大写开头的有意义的单词）等等，JS官方使用的是驼峰命名法。

3）、关键字及保留字

关键字：

break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、debugger、function、this、with、default、if、throw、delete、in、try、

保留字：

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、Native、synchronized、class、float、package、throws、const、goto、private、transient、
debugger、implements、protected、volatile、double、import、public、

四、语法：JS的数据类型

1、概念：

数据：
在计算机的世界里，数据是指所有能输入到计算机并被计算机程序处理的符号的介质的总称，是表示和记录事物的。如：数字，字母，符号、文字、语音、图像、视频等
数据类型
在计算机中对数据进行了分类，不同类型的数据有不同的运算。

2、js的数据类型

基本类型：

Number类型（数字）

  包含整数± 9007199254740992 和浮点数（小数）±1.7976931348623157 × 10的308次方。

String类型（字符串）

用双（单）引号括起来的一串字符。如：“hello”,“12”,‘hi’

Boolean类型（布尔）

  布尔有两种取值true和false，表示真和假。非0代表真，0代表假。

Undefined类型（未定义）

Undefined类型只有一个值undefined，它是变量未被赋值时的值。
Null类型（空）

Null类型也只有一个值null 。Null类型的语义是"一个空的对象引用"，注意和空字符串区别开。

引用类型

Object类型（对象）
JavaScript中最为复杂的类型就是Object，它是一系列属性的无序集合。

3、如何判断变量的类型

typeof 运算符

结果是字符串。

var age=20;

alert(typeof age);

alert(typeof typeof age);

4、javascript是弱类型的语言

1）变量声明时不需要指明类型
var age;
age=20;
2）变量的类型在使用中可变
age=“年龄:”+age;

注：JS变量的类型由其存放的数据类型确定

五、语法：运算符

计算机编程语言的三大运算符：算术，关系，逻辑。

1、算术运算符

+:加法
-：减法
*：乘法
/：除法
%：取余，求余数 (保留整数)

由算术运算符组成的式子叫算术表达式，结果是数值类型

2、关系运算符

> ：大于
>= ：大于等于
<  ：小于
<= ：小于等于
== ：等于
!= ：不等于
=== ：恒等
!== ：不等于

由关系运算符组成的式子叫关系表达式，关系表达式返回的结果是布尔类型

和=的区别：

=== :恒等,如果两个数据的类型不一样,肯定不等.

== :等同,如果两个数据的类型不相同,但是值一样(还有很多内涵)

会做类型的转换(隐式转换)

3、逻辑运算符

&& : 与，运算规则: 一假则假, 全真为真(两个为真就是真).

|| ：或，运算规则: 一真则真, 全假为假(两个为假就是假).

！ ：非，运算规则: 真是假,假是真.

逻辑短路:

当逻辑运算符前面的值能够决定整个表达式的结果.那么,逻辑运算符后面的式子不再进行运算

4、赋值运算符

=  : 把赋值号右边的值赋给左边

复合赋值运算符：
+= ：加并且赋值，如：x += y  等价于： x = x+y;
-= : 减并且赋值，如：x -= y  等价于： x = x-y;
*=
/=
%=

5、自增自减

++：自加一，对变量自加1
      如： 
        var x =1;  
        x++;等价于：x = x+1;
        console.log(x);2

--：自减一，对变量自减1
        var x =1;  
        x--;等价于：x = x-1;
        console.log(x);0

运算符的优先级：

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

6、字符串连接符

+：在字符串的操作中，表示连接字符串

var str="java";
str = str + "script" ;
结果是	javascript

var str1="苹果单价:";
var str1=str1+5;	把数值类型与字符串类型连接，结果会得到字符串类型
结果是	苹果单价:5

六、语法：类型转换

1、隐式（自动）转换

概念：

不同的数据类型参与运算时，JS会先把数据类型转成一致的，然后进行运算，这叫作隐式（自动）转换。这个转换不需要程序员参与。

转换规则：

1）、字符串与数值类型：

字符串加数字，数字就会转成字符串。

var str2 = "hello "
str2 = str2 + 2; 先把数字2 转成 字符串 "2"，然后再进行拼接（这是隐式转换）
console.log(str2);

数字与字符串进行减（乘，除，大于，小于）运算时，字符串转成数字。两个字符串也会转成数字。

2）、其它的类型的隐式转换先不用着急，后续可以看这篇文章：

https:blog.csdn.net/jiang7701037/article/details/86538545

2、显式（手动）转换

1）、概念：

程序员按需进行手动转换，需要程序员自己进行转换。

2）、其它类型转数字类型：
parseInt()：把其它类型转成整型

parseFloat()：把其它类型转成浮点型（小数）

Number()：把其它类型转成数字型

转换规则：

1） parseInt 和parseFloat 会按顺序一个个转字符串中的字符，直到碰到转不成数字的字符为止，如果第一个字符就转不成数字将返回NaN。
2） parseInt 认为小数点不能转， parseFloat 会转换遇到的第一个小数点。
3）Number对整个字符串进行转换，根据有没有包含一个小数点来确定转换为整数还是浮点，有任意字符不能转成数字时将返回NaN。

 var num1 = "20";
 var num2 = 5;
 document.write(Number(num1)+num2);

面试题：请问parseInt()，parseFloat(),Number()的区别?

https:blog.csdn.net/jiang7701037/article/details/80739820

注：NaN表示"不是数字",但是仍是数值类型， not a number，NaN是Number类型。

3）、其它类型转字符串:

变量.toString()：有一些数据类型不能使用 toString() 方法，比如 undefined 和 null
String(变量)：所有数据类型都可以

var num = 10;
var str =  num.toString();
document.write(typeof str);string

4）、其它转布尔

  Boolean(变量)。

在 js 中，只有 ’ '、0、null、undefined、NaN，这些是 false，其余都是 true

七、十六进制和八进制

进制：又叫进位制，逢几进一。

1、八进制：

概念：

逢八进一，有效数字是:0,1,2,3,4,5,6,7

表示：

JS中八进制的是以"0"（零）打头的数字；如： 012,06,025等；
var num1=012;

2、十六进制：

概念：

逢十六进一，有效数字是:0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F 其中A-F表示10-15；

表示：

JS中十六进制的数以"0x"打头，如0xA, 0X1B
var num2=0x1B;

3、进制转换

parseInt可以把2-36之间的进制数转换成十进制：

如：console.log(parseInt(“101”,2))把101当作二进制，
如：console.log(parseInt(“FF”,16))把"FF"当作十六进制，

八、扩展案例：

需知：

如何点击按钮调用js的代码(第一周周五会讲)：

<body>
  <input type="button" value="点我" onclick="testf()" />
</body>
<script> 

function testf() {
   
      
  alert("hi");
      
}
</script>

如何在js中获取文本框的内容(第二周会讲)：

document: 文档，表示当前网页

document.getElementById(“num1”): 就是id为num1的标签（如：文本框）

document.getElementById(“num1”).value: 就是文本框的值。

1、交换两个数

步骤：

1，添加两个文本框和一个按钮，分别设置id值为text1、text2、btn1、
2，编写函数function test1(){}，给按钮添加属性οnclick=“test1()”
3，在函数test1中编写交换文本框内容的代码
a)使用document.getElementById().value;分别取得两个文本框的内容，赋值给两个变量num1,num2
b)定义临时变量temp1存储num1的值
c)将num2的值赋给num1
d)将temp1的值赋给num2
e)使用document.getElementById().value=num1将交换后的值显示在文本框中

2、在文本框输入两个数，完成运算

九、转义字符

1、概念：

在任何计算机语言中，

1）、总有一些字符代表特殊意义，如果要使用这些字符本身时，需要用到转义字符。

2）、有些字符没有用键盘直接表示，也得用转义。

2、HTML中的转义字符

在html中，"<" 表示标签的开始符号， “>” 表示标签的结束符号，

表示段落

如要在页面上显示

,则这样写：

&lt;p&gt;

在html中，&copy; 就是 版权符号

3、JS中的转义字符

转义字符的格式：以反斜杠开头，后面跟字符本身。

js中常见的转义字符：

" 表示双引号；
' 表示单引号
/  表示 反斜杠。
  表示 反斜杠。
n 就是回车。

十、作业：

1，课堂案例敲两遍
2，判断类型（要区分出整形和浮点型）
3，为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

4，小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。

提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)

5，给定一个数，把它保留3位小数，百度搜索：toFixed()。

6，var k=0; alert(k++ + ++k +k +k++); 结果是？

7、0.2+0.3==0.5 的结果是true还是false

8，扩展：使用文本框和按钮实现加减乘除、求余五种运算;

要求： 1）使用parseInt方法类型转换。
2）计算结果使用Math.round方法四舍五入

注：文本框取到的value值是字符串类型，需要转成数字

第二天、逻辑分支语句

本节课的目标：

1 程序运行的三大结构（逻辑）：顺序，选择，循环
2 if的单分支，双分支，多分支，嵌套
3 switch结构，break的作用，case穿透
4 三元运算符（表达式）

一、程序逻辑的三大结构

程序逻辑的三大结构：顺序，选择，循环；

顺序结构：从上朝下执行的代码就是顺序
选择（分支）结构：根据不同的情况，执行对应代码
循环结构：重复做一件事情

除顺序结构外，其余两种程序结构由流程控制语句实现。

选择（分支）结构的程序由条件分支语句实现。

二、条件分支语句if

1、单分支

if(条件){
   
    语句   
}

示例：偶数（单分支）

2、双分支

if(条件){
   
    条件满足时执行的语句
}eles{
   
    条件不满足时执行的语句
}

示例：

1）、闰年（双分支）

2）、逢七过的数（双分支）

3、多分支

if(条件1){
   
    条件1满足时执行的语句
}eles if(条件2){
   
    条件1不满足，条件2满足时执行的语句
}else{
   
    条件1,条件2都不满足时执行的语句
}

示例：

1）、计算输入的y值并输出到文本框。

x (x<1)
y = 2x+1 (1≤x＜10)
5x-17 (x≥10)

2）、多分支（BMI，也可以使用输入石头剪刀布来判断输赢）

4、if嵌套

if(条件1){
       
    条件1满足时执行的语句
}eles{
   
    if(条件2){
   
        条件1不满足，条件2满足时执行的语句
    }else{
   
        条件1,条件2都不满足时执行的语句
    }
}

示例：

1）、计算输入的y值并输出到文本框。

x (x<1)
y = 2x+1 (1≤x＜10)
5x-17 (x≥10)

示例：

输入成绩判定，输出到文本框
如果你的成绩在85—100之间，显示A
如果你的成绩在70—84之间，显示B
如果你的成绩在60—69之间，显示C
如果你的成绩小于60，显示D

三、switch结构

语法：
	switch(表达式){
   
		case 表达式1:分支语句一;break;
		case 表达式2:分支语句二;break;
		case 表达式3:分支语句三;break;
		…
		case 表达式n:分支语句n;break;
		default:默认分支语句;break;
	}

执行过程：
   1、switch表达式的值和case表达式的值进行比较，两值相等就执行case对应的分支语句。
   2、分支语句可以有任意多个，如果没有任何case表达式的值与switch表达式值相等就执行default的默认分支语句。
   3、因为执行完分支语句后不会自动退出switch语句，会继续执行后续的分支语句，这叫做switch(case)的穿透，为避免穿透，需要在每条分支语句后添加break，跳出switch语句。

示例：

1）、输入数字显示星期几

2）、switch五分制（成绩等级）

四、三元运算符

三元运算符，又叫三目运算符。

普及概念：

操作数：运算符数，数据
运算符：+ -
表达式：由操作数和运算符构成的式子就是表达式。
单目运算符：此运算符只需要一个操作数，如：！ ++ –
双目运算符：此运算符需要两个操作数，如：+ - && ||
三目运算符：此运算符需要三个操作数，如：?:
一元表达式：由单目运算符和一个操作数组成式子。如： i++;
两元表达式：由双目运算符和二个操作数组成式子。如： a+b;
三元表达式：由三目运算符和三个操作数组成式子。如： a>b?a:b;

语法格式：

表达式1？表达式2：表达式3

1、根据表达式1执行的结果，来决定执行表达式2还是表达式3。
2、表达式1结果是true执行表达式2，最终返回表达式2的结果。
3、表达式1结果是false执行表达式3，最终返回表达式3的结果。

 var num1=3,num2=5,y="";
 y=num1>num2?"第一个大":"第二个大";
 alert(y);

五、规范：

1，所有的括号成对输入
2，所有的引号成对输入
3，一句话占一行(不要多句话写在一行)
4，最后的花括号单独占一行，花括号所在的行的里面不要写代码（左花括号的右边，和右花括号的左边不要写代码）
5，缩进对齐：
a) 同级对齐
b) 子一级比上一级缩进4个空格

六、条件分支的注意点：

1，if分支中即使一句话也要把{}写上
2，if嵌套不要超过三层
3，Switch语句里把default分支一定要写上，防止在以后的维护中产生歧义
4，把执行概率更大（正常情况）放在前面（if，case）
5，if else 和 switch：
if else 一般来表示两个分支或者嵌套比较少的分支，如果分支多的话，用switch。

七、作业：

1，课堂案例敲一遍
2，输入一个整数，判断大于0小于0还是等于0
3，国内BMI:开发一款软件，根据公式（身高-108）*2=体重，可以有10斤左右的浮动。来观察测试者体重是否合适
提示：输入身高算体重，然后判断算出的体重和输入的体重差值在正负10斤以内，可使用Math.abs(),
4，输入一个数判断是奇数还是偶数，并输出结果
5，输入一个年份判断是否是闰年
6，输入成绩转成成绩等级（A,B,C,D,E），使用if和switch两种写法完成
7，输入年和月份显示当月天数
8，输入数字显示星期几
9，根据会员积分，计算折扣大小（积分10000以上，打5折；积分8000-10000之间，打6折；积分6000-8000打7折；积分6000以下打8折）

10，加减乘除计算器

11、国际BMI

扩展：

输入年，月，日，求出该日期是当前年的第几天

个人所得税的计算器

第三天、循环语句

本节课的目标：

循环的概念
while循环语句
do while 循环语句
for循环语句
break和continue
死循环和循环嵌套

一、循环的概念:

1、循环就是重复执行一段代码，是一种最能发挥计算机优势的程序结构。

2、循环结构的代码由循环体、循环变量、和循环条件组成。

3、当循环变量满足循环条件时会重复执行循环体内的代码，直到循环变量不满足循环条件时就终止循环，接着执行循环结构后的代码。

4、JS中有while、do while、for三种循环。

二、while循环语句

1、语法：

while(表达式){
   	
	循环体;
}

当表达式成立时，会一直执行循环体的代码，直到表达式不成立。
所以，循环体中，必然有一句话是朝着表达式越来越不成立的方向发展，否则就是死循环

示例：从1加到100

要点：
1，循环变量要先初始化。
2，每次循环前判断表达式，表达式成立后执行循环体语句。
3，循环体中，应有结束循环的条件(有个代码朝着循环条件不满足的方向靠近)，否则会造成死循环。
4，当不确定循环多少次时可用死循环。
5，循环体中可以写若干句合法的javaScript代码，包括if，也可以再套个循环语句。

示例：

输出100以内的奇数
输出100以内所有偶数的和
输出100以内7的倍数

三、do while循环语句(不常用)

1、语法：

 do{
   

     循环体;

}while(表达式);
当表达式成立时，会一直执行循环体的代码，直到表达式不成立。

示例：从1加到100

2、while和do while的区别：

do while先循环一次，后判断循环条件。也就是说无论如何都会执行一次循环体。

四、for循环语句（最常用的）

1、语法：

for(表达式1；表达式2；表达式3){
   
   循环体;
}

表达式1初始化循环变量，
表达式2判断循环条件，
表达式3改变循环变量的值。
如：
var sum = 0;
for(var i=1;i<=100;i++){
   
	sum = sum + i;
}
利用三个表达式把循环控制与循环体分离，结构更加清晰。是使用最多的循环语句。

请问for循环执行完毕后，循环变量的值是多少？

示例：

输出100以内的奇数
输出100以内所有偶数的和
输出100以内7的倍数

五、continue

1、continue只能在循环语句（循环体）中使用

2、作用是：使本次循环结束，即跳过循环体中continue下面尚未执行的语句，接着进行下次是否执行循环的判断。

示例：输出100以内的奇数，不包含3的倍数

示例：

1，求出1-1/2+1/3-1/4+1/5…1/100的和（加奇减偶）。
2，一个新入职，月工资为10K的员工，每年涨工资5%，50年后的月工资是多少？
3，山上有口缸，可以装50升水，现有15升，小和尚下山挑水，每次挑5升，几次挑满。
4，打印1000-2000年间的闰年，每行打印4个。
5，打星星
۞۞۞۞۞

۞۞۞۞۞

六、break

1，在switch语句中使流程跳出(终止) switch结构。
2，在循环语句中使流程跳出(终止)当前循环。
注意：
1，如果已执行break语句，就不会执行循环体中位于break后的语句。
2，在多层循环中，一个break语句只向外跳一层。

示例：
判断一个数是不是合数。（能被1和自身以外的数的整除）
判断一个数是不是素数(质数)。

七、死循环

死循环：循环条件永远满足
while(true){

}

do{

}while(true);

for(;😉{

}

八、循环嵌套

1，一个循环内包含完整的另一个循环语句。
2，被包含的循环语句叫内循环，包含别的循环的循环语句叫外循环。
3，外循环每执行一次循环，内循环都会完全执行所有循环次数。
4，循环嵌套的总执行次数是外循环次数乘以内循环次数。

注：可使用浏览器的调试功能（打断点）一步步查看循环嵌套的执行

示例：

打印矩形
打印左直角三角形
打印左直角梯形
打印99乘法表

九、作业：

1，课堂案例敲一遍
2，打印100-200之间所有能被3或者7整除的数
3，求1！+2！+3！+。。。+10！
4，打印100-999之间的水仙花数（153==1³⁺⁵3+3^3）
5，打印100-200间所有的素数
6，打印三角形
7，打印梯形
8，一球从5米高度自由落下，每次落地后反跳回原高度的30%；经过几次弹起，篮球弹起高度小于0.1米。
9，64格棋盘，第一格放一粒芝麻，重0.00001KG，第二格放两粒芝麻，第三格放4个芝麻，求棋盘上芝麻总重。

扩展作业:

1、斐波那契数列：1，1，2，3，5，8 。。。。从第三项开始每项都等于前两项之和。
提示：
我们假设n1是第一项，n2是第二项，最初n1=1,n2=1；然后n1=1,n2=2；再然后n1=2,n2=3;其实从第二个式子起n1等于前一次的n2，n2等于前一次的n1+n2，一直都是这个规律。

2、找数字：求所有满足条件的四位数abcd：
（1）这四位数是11的倍数；
（2）a, b, c, d均是小于10的互不相同的自然数；
（3）b + c = a；
（4）bc是完全平方数（bc=n的平方）。
3、求Sn=a+aa+aaa+……+aa……a之值,其中a、n是文本框输入的两个数字。

第四天、函数

本节课的目标：

函数的概念

函数语法

函数的参数

函数的返回值

匿名函数

函数的两种定义方式

一、函数的概念：

1、概念：

函数就是把完成特定功能的一段代码抽象出来，使之成为程序中的一个独立实体，起个名字（函数名）。

可以在同一个程序或其他程序中多次重复使用（通过函数名调用）。

2、作用：

使程序变得更简短而清晰
有利于程序维护
可以提高程序开发的效率
提高了代码的重用性(复用性)

二、函数的语法格式：

1、函数的定义

function 函数名([形参列表]){
   
	
	函数体
    
	[return 返回值;]
    
}

普及：程序行业里，描述格式时，使用方括号，表示可选。

2、函数的调用

函数名([实参列表])

示例：无参函数的使用

输出100以内的奇数
输出100以内所有偶数的和
输出100以内7的倍数
判断一个数是不是质数
判断一个年份是不是闰年
根据年月计算当月天数

三、函数的参数

1、形参

又叫形式参数。函数定义时，写在圆括号内的参数列表。和定义的局部变量是同样的意思。

2、实参

又叫实际参数，函数调用时，写在圆括号内的数据。

示例：

判断一个数是不是质数
判断一个年份是不是闰年
根据年月计算当月天数
编写一个函数，计算两个数字的和、差、积、商
编写一个函数，计算三个数字的大小，按从小到大顺序输出

四、函数的返回值

1、概念：

在函数内使用return语句返回函数执行的结果，我们在调用函数时用一个变量来接收函数返回的结果。

2、return的作用：

返回函数的执行结果，只能返回一个值
结束函数的执行，（即：当执行到return后，函数将直接退出，return后如果还有代码将不再执行）

示例：

判断一个数是不是质数
判断一个年份是不是闰年
根据年月计算当月天数
编写一个函数，计算两个数字的和、差、积、商

五、函数的分类

1、函数分类（从定义函数的角度）：

1）、内置函数

是官方提供的函数，直接使用,如：alert()、Math.pow()等。
isNaN()判断是不是数字。（NaN：not a nubmer）
注：通过JS帮助文档可以查阅JS所有内置函数的使用。

2）、自定义函数：
程序员自己编写的函数

六、封装自定义函数：

1、函数的三个要素（封装函数的要素）

1、功能：
2、参数：完成一件事情的已知条件。
3、返回值：结果。

2、定义函数的注意点：

1、形参，不要在函数内部重新定义
2、函数内部尽量不要出现输出语句（alert，document.write），但是console.log是可以的
3、return后面只能出现一个值（即函数只能返回一个值）

注：编写好的函数代码只有通过调用才会执行，不调用的时候不会执行。

示例：

1．编写生成n位数字验证码的函数

七、匿名函数

函数可以当成值存储在变量里，通过变量名来调用，调用时必须加圆括号。

var fun1 = function(){
   
    alert("我是匿名函数");
};	匿名函数声明

fun1();							匿名函数调用

var fun2= function(num1,num2){
   
    return num1+num2;
};	匿名函数声明
var num3=fun2(1,2);					匿名函数调用
alert(num3);

八、函数的两种定义方式：

1、声明式

function 函数名(参数){
   
	函数体
}

2、（赋值）表达式

var 变量名 = function(){
   
	函数体
}

九、作业

1，编写一个函数，计算m到n之间所能组成的奇数（奇数的每位数字不能相同）个数，m和n必须是个位数，
比如：计算0-3之间能组成的奇数个数（所有奇数：01,21,03,13,23,31）

2，某公司用电话传递数据（如：6234），需要加密，规则如下
a，每位数字都加上5然后用除以10的余数代替（如：1789）
b，将第一和第四位交换，第二和第三位交换（如：9871）
编写函数，输入原文，输出密文

第五天、函数（下）

本节课目标：

js编译执行

变量作用域

变量的声明提升（面试）

事件调用函数

递归

一、JS的编译和执行

javascript代码在运行时有(预)编译和执行两个阶段，在预编译阶段会对函数和变量进行处理，对所有的声明(未赋值)变量会赋值为undefined，变量的声明提升，对所有的声明函数也会赋值为函数的定义等等。

在执行阶段会按照代码顺序，一行行的翻译并执行代码。

编辑代码（写代码）：源代码-----------（预编译）------------》编译（翻译）：机器代码---------------》执行：看到结果。

预编译阶段会做的事情：

1、（变量，函数）声明提升

2、定义的变量没有赋值时，会默认赋值为undefined

3、优化

二、变量的作用域

变量的作用域：就是变量起作用的范围。或者说有效范围。

1、局部变量

局部变量就是定义在函数内部的变量，这个变量只能在函数内部使用，即作用域范围只是函数内部，另外，形参也是局部变量。

function fn(){
   
    fn2();
    console.log("fn里面，fn2_a",fn2_a);不能使用fn2里的局部的变量的
}

function fn2(){
   
    var fn2_a = 100;局部变量，
    console.log("fn2里面，fn2_a",fn2_a);
}

2、全局变量

全局变量就是定义在函数外部的变量，这个变量在任何函数中都有效，即作用域范围是当前文件的任何地方。不但在任何函数中都可以使用，而且值是共享。即A函数改变值后，B函数拿到的就是改后的值。就像共享单车一样。

1)、全局变量，又叫共享变量

 

var global_n = 250;

function fn(){
   
    global_n = 100;
    console.log("fn里：global_n",global_n);100
    fn2();
}

function fn2(){
   
    console.log("fn2里：global_n",global_n);100
}

2)、当全局变量和局部变量重名时

在函数内部使用的是局部变量，这叫就近原则

var age = 250;

function fn(){
   
    var age = 100;
    console.log("fn里：age",age);100，就近原则。
}

什么时候使用全局变量：

1、当在若干个函数里使用同名变量g，并且，A函数中改了g的值，B函数中要使用改后的值，使用全局变量。如果，A函数中改了g的值，其它函数中并不使用，那么，根本不需要定义成全局变量。

三、变量的声明提升

在预编译阶段，声明的变量，总是会被提升，提升到变量的作用域的顶端（如：函数体的顶端）。

1、声明的变量会被提升作用域范围的顶端。

    function fn(){
   
        
        console.log(a);
        var a ;
    }

     预编译阶段：会把以上代码中 var a ，提升到函数体的第一行。即：在编译之前，以上代码，会被处理成：

    function fn(){
   
        var a;
        console.log(a);
    }

2、提升的是声明，不是赋值。

function fn(){
   
        console.log(a);
        var a = 100;定义（声明）变量，并且赋值；        
    }

    预编译后，以上代码被改为：

    function fn(){
   
        var a;
        console.log(a);
        a = 100;定义（声明）变量，并且赋值；        
    }

请注意，变量赋值并没有被提升，只是声明被提升了。

3)、当全局变量和局部变量重名并且碰到了声明提升

var age = 250;
function fn(){
   
    console.log(age);250，undefined。
    var age = 100;
    console.log(age);100
}

 以上代码经过预编译后，成为以下代码：

var age = 250;
function fn(){
   
    var age;
    console.log(age);undefined;
    age = 100;
    console.log(age);100
}

四、事件调用函数

事件：发生并得到处理的操作

我们把事件和自定义函数建立起对应关系，当事件发生时就去调用我们的函数。

我们已经学习了onclick事件，还有onload, onfocus、onblur等等。
onload:标签（页面）加载完成(页面完全打开)
onfocus:获得焦点（简单理解为，光标进入）
onblur:失去焦点（简单理解为，光标离开）

五、递归函数

1、概念：

JS函数可以相互调用，这叫嵌套调用。
JS函数也能调用自己，调用自己的函数叫做递归函数，递归函数就是特殊的嵌套调用函数。
递归，递的是参数，归的是返回值
注意：递归函数中肯定有一个分支是不调用自己的

示例：5的阶乘


 1! = 1;
 2! = 2*1!;
 3! = 3*2!
 4! = 4*3!;
 5! = 5*4！

 n的阶乘 = n*(n-1)的阶乘

封装一个函数，求n的阶乘
 参数：n
 返回值：就是阶乘的结果

function jieCheng(n){
     
    if(n==1 || n==0){
     
        return 1;
    }

    var result =  n*jieCheng(n-1);

    return result;
}

示例：斐波那契数列：1，1，2，3，5，8 ……从第三项开始每项都等于前两项之和


 需求：求斐波那契数列中的第n个数。
 1，1，2，3，5，8 ……从第三项开始每项都等于前两项之和

 一、循环的方式做：

                n1    n2    n3
   n1    n2     n3
    1，   1，    2，   3，   5，  8 ……从第三项开始每项都等于前两项之和
          n1    n2    n3


 功能:求斐波那契数列中的第n个数。
 参数:n
 返回值：第n个数

function feiBoNaQi(n){
   
    if(n<=2){
   
        return 1;
    }

    var n1 = 1;
    var n2 = 1;
    for(var i=3;i<=n;i++){
   
        var n3 = n1+n2; 2;  3;
        n1 = n2; 新的n1
        n2 = n3; 新的n2;
    }
    return n3;
}

function fn(){
   
     一、输入
    var n = Number(document.getElementById("n").value);

     二、运算
    var num = feiBoNaQi(n);

     三、输出
    console.log(num);
}


 二、递归的写法：
/*
                n1    n2    n3
   n1    n2     n3
    1，   1，    2，   3，   5，  8 ……从第三项开始每项都等于前两项之和
          n1    n2    n3

 功能:求斐波那契数列中的第n个数。
 参数:n
 返回值：第n个数

function feiBoNaQi(n){3
   if(n<=2){
      return 1;
   }
   return feiBoNaQi(n-1)+feiBoNaQi(n-2);
}

function fn(){
     一、输入
    var n = Number(document.getElementById("n").value);

     二、运算
    var num = feiBoNaQi(n);

     三、输出
    console.log(num);
}

*/

示例：求两个数的最大公约数

首先确定如何求最大公约数，我们采用欧几里得算法(辗转相除法)，算法描述如下：

例：48 , 57
57%48=9 大数对小数求余
48%9=3 小数对上次的余数求余，重复这个过程直到余数为0
9%3=0 余数为0时，此次求余的小数就是最大公约数


 需求：求两个数的最大公约数
 功能：求两个数的最大公约数
 参数:
    第一个数:m
    第二个数:n
 返回值:m和n的最大公约数

 12  12  6    4   3   2   1
 20           4       2    1
  一、循环的方式
 function maxGongYue(m,n){
   
      1、求两个数的最小数
     var min = m<n?m:n;
      2、从大到小循环，第一个能够整除m和n的数就是最大公约数
     for(var i=min;i>=1;i--){
   
         if(m%i==0 && n%i ==0){
   
             return i;
         }
     }   
 }

 二、欧几里得算法
 例：48 , 57

 m    n  = y
 48 % 57 = 48


 m    n = y
 57 % 48 = 9     大数对小数求余

 48 % 9 = 3      小数对上次的余数求余，重复这个过程直到余数为0
 9 % 3 = 0	   余数为0时，此次求余的小数就是最大公约数

 function maxGongYue(m,n){
   57,48
     do{
   
       var y = m%n; y = 9   3
       m = n;  48
       n = y;  9
     }while(y>0);
     return m;
 }

 三、递归写法

 m和n的最大公约数就是 n 和 m%n 的最大公约数
 function maxGongYue(m,n){
   57,48
     if(n==0){
   
         return m;
     }
     return maxGongYue(n,m%n);
 }

function maxGongYue(n1,n2){
   
	var n3=n1%n2;
	if(n3==0){
   
		return n2;
	}
	return gys(n2,n3);
}

六、作业

1，编写函数，输入n，n为偶数时调用函数求1/2+1/4+。。。1/n
n为奇数时调用函数求1/1+1/3+。。。1/n
2，页面输入数字，点击按钮用函数求阶乘

3、把本周讲的案例，封装成函数，单独写在一个tools.js的文件里。

第六天、数组

本节课的目标：

数组概念及定义
数组的遍历
数组常用的官方方法（函数）
二维数组的了解
排序（重点）
基本（值）类型和引用（地址）类型的区别（重点）
对象的初步了解

一、数组的概念及定义

1、概念：

数组就是：一组数（据），是数据的集合。数组里可以放置任何类型的数据，包括数组、对象，函数等等。

一个变量只能存储一个数据，如果我们要保存一个班级所有人员的成绩，那么，就需要定义若干个变量，这是非常夸张的一件事情，这时候我们就需要数组来存储这样的数据。

2、定义数组：

1）、构造函数的方式

第一种写法：

 var arr = new Array(7);    定义了一个7个元素的数组，没有给元素赋值

第二种写法：

 var arr = new Array(12,23,34)  定义了一个3个元素的数组，元素的值分别是12,23，34
 var names = new Array("王翠霞","李彤","张亚飞");定义了一个3个元素的数组

2）、直接量

var arr = [12,23,34];	等价于： var arr = new Array(12,23,34)

3、数组中的名词

1）、元素：

数组中保存的每个数据，叫作元素。

2）、长度

数组中保存的元素个数，叫作长度。使用数组的属性length

      ```js
      var arr = [12,23,34];	
      arr.length;   数组的元素个数，3.
      ```

3）、下标

下标就是序号。从0开始。访问数组中的每个元素时，使用下标。下标也叫索引。下标的最大取值：length-1
下标可以是变量，表达式

格式：数组名[下标]

var arr = [12,23,34];	
arr[0]; 就是数组的第一个元素，12；
arr[1]; 就是数组的第二个元素，23；
var i=0;
arr[i];就是arr[0]
arr[i+1];就是arr[1]

二、数组的遍历

循环访问数组的每一个元素就叫做数组的遍历。

1、for循环

var arr1=[1,2,3,4,5,6];
for(var i=0;i<arr1.length;i++){
   
	console.log(arr1[i]);
}

2、for in 方式：

var arr1=[1,2,3,4,5,6];
for(var i in arr1){
   
	console.log(arr1[i]);
}

示例：

1、创建一个数组，给元素赋值1到100。

2、求一个班级的最高成绩（最大数）

3、求一个班级的最低成绩（最小数）

4、求一个班级的平均成绩

5、把一组数进行倒置

6、创建一个数组，从2开始给元素赋偶数值（到100结束），按顺序每5个求一次平均值放在另一个数组并输出。

三、数组的常用官方方法(函数)

学习官方方法，就是看官方文档（这个技能我们必须要掌握）

对数组的操作包括以下几类：

给数组添加元素（增）：push(), unshift(),splice()
从数组中删除元素（删）:pop(), shift(),splice()
修改数组中的元素（改）:splice(),reverse(),sort()
从数组中查询：slice()，indexOf()
不会改变元素数组的内容的函数：concat(),slice()

1、push() 方法

功能：推，向数组的末尾添加一个或多个元素，并返回新的长度（尾加）

参数：添加的元素（可以是一个，也可以是多个）

返回值：新的数组长度

var arr1=[1,2,3];
var len = arr1.push(7);	向数组末尾添加元素,并返回数组的新长度
alert(len);			输出4

 实际应用：
 班级里有新的学生进入
 var arr =['张三疯','张四风','张武峰'];
 有新学生要进入
arr.push("宝宝");
var t = arr.push("宝宝的宝宝");
console.log(arr);
console.log(t);

2、pop() 方法

功能：删除并返回数组的最后一个元素（尾删）。弹，弹出最后一个元素，和push是相反的操作。

参数：无

返回值：被删除的元素

var arr1=[1,2,3,7];
x=arr1.pop();	删除最后一个元素并返回被删除的元素
alert(x);		输出7

 实际应用：
 班级里有学生留级，删除留级的学生。

3、unshift() 方法

功能：向数组的开头添加一个或多个元素，并返回新的长度（头加），跟push（）位置不同，push是从后面插入；unshift是从前面插入

参数：添加的元素（可以是一个，也可以是多个）

返回值：新的数组长度

var arr1=[1,2,3];
x=arr1.unshift(8,9);	向数组开头添加了两个元素，并返回新长度
alert(x);			输出5

4、shift() 方法

功能：方法把数组的第一个元素从其中删除，并返回第一个元素的值（头删）

参数：无

返回值：删除的元素

var arr1=[1,2,3];
x=arr1.shift();	删除第一个元素并返回被删除的元素
alert(x);		输出1

5、 splice(下标，长度，新的元素)：

功能：splice函数可以完成添加元素，也可以完成删除元素，可以在指定位置添加元素，可以在指定位置删除，

参数：

下标：既是添加元素的下标，也是删除元素的下标

长度：删除元素的长度（你要删除几个元素）

新的元素：添加的元素(可选参数)

返回值：被删除的元素。

 示例：
     1、仅仅只做添加
    /*
    var arr=[12,23,34,45,56];
    arr.splice(2,0,100);
    console.log(arr); [12,23,100,34,45,56]
    */
     2、用splice 和push对比
    /*
    var arr=[12,23,34,45,56];    
     arr.splice(5,0,100);
    arr.push(100);
    console.log(arr);
    */
    
     3、仅仅只做删除
    
    var arr=[12,23,34,45,56];    
     var t = arr.splice(2,1);
     console.log(arr);
     console.log(t);
    var t = arr.splice(2,2);
    console.log(arr);
    console.log(t);

     4、用splice模拟pop
     var arr=[12,23,34,45,56];   
     arr.splice(4,1);
     console.log(arr);
    
     5、用splice模拟shift
        下标：既是添加元素的下标，也是删除元素的下标
        长度：删除元素的长度（你要删除几个元素）
        新的元素：添加的元素
     var arr=[12,23,34,45,56];   
     arr.splice(0,1);
     console.log(arr);

6、reverse函数：

功能：对数组的元素进行翻转。第一个元素和倒数第一个元素交换，第二个元素和倒数第二个元素交换，以此类推……

   如：1,2,3,4,5 翻转后：5,4,3,2,1

   如：1,2,3,4 翻转后：4,3,2,1

参数：无

返回值：翻转后的数组(会改变原始数组)

    var arr=[1,2,3,4];
    var t = arr.reverse();
    console.log(arr);
    console.log(t);

7、自行研究的方法：

sort()、slice()、concat()、join()

四、二维数组的了解

数组的每个元素也是个数组，这就是二维数组。

如：定义一个两行四列的数组

var arr = [
    	[1,2,3,4],
    	[5,6,7,8]
]

示例：

通过循环为一个5X5的二维数组a赋值1到25，然后输出该数组的左下半三角

五、排序算法（数组的应用）

1、冒泡法排序

思路：

相邻两个数进行比较，如果前一个数大于后一个数，那么就交换，否则不交换，以此类推，一轮下来，最大的数，沉到了最下面。依次类推，n个数做n-1的循环。最终数组的数排成了从小到大的顺序。

冒泡排序的思路（数组的应用）：
相邻两个数进行比较，如果前一个数大于后一个数，那么就交换，否则不交换

如：[5,3,7,1,2,6]
 一共几个数 6个数；做5次循环
/*
 第一轮，把最大数放在了最后
 i=0;
 做了几次比较：5次比较，也是循环
   j=   0           1                2         3
       
        5           3                3         3         3     3               
        3           5                5         5         5     5        
        7           7                7         1         1     1         
        1           1                1         7         2     2         
        2           2                2         2         7     6         
        6           6                6         6         6     7 
   arr[0]>arr[1]  arr[1]>arr[2]   arr[2]>arr[3]
  arr[j]>arr[j+1] arr[j]>arr[j+1]


 第二轮，把次大的数，放在了倒数第二个位置
 i=1
 做了几次比较：4次比较，也是循环
j=  0            1             2             3

	3            3             3             3    3
    5            5             1             1    1
    1            1             5             2    2
    2            2             2             5    5
    6            6             6             6    6

 第三轮，把第三大的数，放在了倒数第三个位置
 i=2
 做了几次比较：3次比较，也是循环

    3   1   1   1 
    1   3   2   2
    2   2   3   3
    5   5   5   5

*/

代码：


function testf(){
   
    var arr=[9,8,3,7,6];

    for(var i=0;i<arr.length-1;i++){
   
        for(var j=0;j<arr.length-1-i;j++){
   
            相邻两个数，进行比较，如果前一个大于后一个，则交换。
            if(arr[j]>arr[j+1]){
   
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }            
        }
    }
    console.log(arr);
}

2、选择法

思路：

先在所有数中，找到最小的数，放在第一个位置。再在剩下的数中找到最小的，放在第二个位置。依次类推，n个数，做n-1次循环。最终数组的数排成了从小到大的顺序。

 9 , 8, 3, 7, 6
 选择法排序：
 1）、找最小数
 2）、交换(放在最前面)

 i=0;
1）、找最小数：从下标0开始朝最后一个数，找最小数
2)、交换：最小数和 arr[i];
 min = 3;

 3,  8,  9, 7, 6

i=1
1）、找最小数：从下标1开始朝最后一个数，找最小数
2)、交换：最小数和 arr[i];

3,  6, 9,7,8 

i=2;
1）、找最小数：从下标2开始朝最后一个数，找最小数
2)、交换：最小数和 
 3, 6, 7, 9, 8

i=3;
 3, 6, 7, 8, 9

代码：


function testf(){
   
    var arr=[9,8,3,7,6];

    for(var i=0;i<arr.length-1;i++){
   
        1、找最小数（哪个位置上的数最小，就是求小数的下标）
        var min = arr[i];假定最小数
        var minIndex = i;下标,最小数的下标。
        for(var j=i+1;j<arr.length;j++){
   
            if(arr[j]<min){
   
                min = arr[j];
                minIndex = j;
            }
        }
        
        2、交换
        var temp = arr[minIndex];
        arr[minIndex] = arr[i];
        arr[i] = temp;
    }

    console.log(arr);
}

六、基本（值）类型和引用（地址）类型的区别

普及：

cpu：程序逻辑和计算是靠 cpu 做的

内存：数据是靠内存存的。即，变量的值都在内存中存储着呢。

内存分区：

栈区（堆栈区）: 局部变量，形参。

堆区：存放的都是new出来的数据。

全局/静态区: 全局变量和静态变量。

只读区：分为常量和代码区。

1、内存的区别

基本（值）类型：

占据内存：基本类型的变量对应的内存存储的是值，只占用一块内存区域。

**取值：**直接取值

包括：number，string，boolean，null，undefined
引用（地址）类型：

占据内存：引用类型的变量对应的内存存储的是地址，占用两块内存区域（一块存的是地址，一块存的是数据）。

**取值：**间接取值，先找地址，根据地址找数据（值）。

包括：Object，Array，Date，RegExp，Function等等

2、赋值的区别

基本类型：

赋的是值（对应的内存内容）

引用类型

赋的是地址（对应的内存内容）

记住：不管是什么类型的变量，通过变量名，获取的都是变量名对应的内存的内容（基本类型是值，引用类型是地址）

var arr = [12,23,34]; new了一块空间   

arr和arr[0]不是同一块空间。

arr里存的是地址

arr[0]存的是值

var arr2 = [12,23,34];又new了一块空间
arr == arr2 false;，因为arr和arr2所存储的内容（地址）是不同的
arr[0] ==  arr2[0];true，因为arr[0]和arr2[0]所存储的内容（值）是一样的。

3、作为函数参数的区别

函数传参相当于赋值（把实参的值赋给形参），所以：

基本类型：

传的是值

引用类型

传的是地址

优点：

1)、在被调用的函数内部，可以改变主调函数里的数据

2)、节约了内存。

七、对象的了解（重要但不紧急）

概念：

对象是用来描述复杂的数据的，是引用类型。

对象包括：官方对象和自定义对象。

在javascript中可以使用JSON（JavaScript Object Notation, JS 对象标记）表示对象，就是花括号里的键值对。

定义：

var 对象名 = {
   
    属性名1：属性值1,
    属性名2：属性值2,
    属性名3：属性值3
    ……
}

语法要点：

1、花括号

2、键名（属性名）要有双引号

3、键值（属性名和属性值）之间是冒号

4、键值对之间用逗号分隔

5、属性值可以是任意类型的，包括数组，函数，json对象

如：

 var mimi={
   
 	"name":"咪咪"，
 	"age": 2，
 	"color":"虎皮"，
 	"hobby":""fish"，
 	"action": function(){
    
        alert("喵~~");
    }
 };

八、作业、

1，随机生成5位以内的数，然后输出该数字有多少位，每位分别是什么？
2，编写函数map(arr)把数组中的每一位数字都增加30%。

3，编写函数has(arr,n)判断数组中是否存在n这个元素，返回布尔类型。

4，编写函数norepeat(arr)将数组的重复元素去掉，并返回新数组(面试题)。
5，随机点名程序
提示：把人名都放进数组，随机产生一个下标，根据下标取出一个人名

6、完成一个其它进制转换成十进制的函数(convert(‘123’,8):表示把8进制的123转成10进制)
7、完成一个十进制转换成其它进制的函数(convert(512,2) :表示把十进制的512转成2进制))
8、把写的关于数组的示例封装成函数。

9、冒泡排序
10，选择排序

11，有一个从小到大排好序的数组。现输入一个数，要求按原来的规律插入数组中。（可用splice函数）

12，用JSON创建对象存储学生信息，包括学号、身份证、年龄、性别、专业等信息，同时包含一个方法自我介绍，用来输出对象所有信息。

13，计算总成绩，按总成绩排名。统计各单科成绩第一名，输出其成绩与学号。

学号语文数学英语总成绩备注
1 105 62 118
2 89 78 120
3 86 64 80
4 78 99 91
5 107.5 97 70
6 112 61 92
7 101 79 104
8 71 72 105
9 56 68 61
10 98 83 77

第七天、ES5新增的数组的方法和字符串

本节课目标：

ES5数组新方法

字符串概念和定义

字符集

字符串常见API

一、 ES5数组新方法

https:developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

1、indexOf

**功能：**查找元素，在数组中查找一个数出现的第一个下标

**参数：**要查找的元素

**返回值：**要查找元素的下标，如果找不到，那就是 -1

	var arr1 = [12,23,34,45,56,67,23];
	
	console.log(arr1.indexOf(23));	结果是1

	console.log(arr1.indexOf(45));	结果是3

	console.log(arr1.indexOf(100));	结果是-1

2、forEach

**功能：**对数组的每个元素做某个处理（函数的方式）。即：对数组的每个元素要做遍历，遍历时做的事情，是由参数（回调函数）决定。

**参数：**回调函数，该回调函数的参数有三个（数组元素，元素索引（可选），数组本身（可选））

**返回值：**无

示例：

1、
var arr1 = [12,23,34,45,56,67];
arr1.forEach(alert);使用官方函数alert，让数组的每个元素都alert一次

2、
var arr1 = [12,23,34,45,56,67];
arr1.forEach(arrInc);调用自定义函数arrInc，让数组的每个元素都加1

function arrInc(num,index,arr){
   
	arr[index] = num+1;	每个元素都加1
}

3、map

**功能：**把原始数组的每个元素进行某种处理后，产生（映射）一个新的数组。map不会改变原始数组的内容

**参数：**回调函数，

该回调函数的参数有三个（数组元素内容，元素索引（可选），数组本身（可选））

该回调函数的返回值是处理后的结果。

**返回值：**新的数组，经过回调函数处理过的数组

示例：

var arr1 = [12,23,34,45,56,67];
var arr2 = arr1.map(arrSqr);

function arrSqr(num){
   
	return num*num
}

4、filter

功能：过滤的意思，根据条件过滤数组的元素，filter的回调函数需要返回的是boolean类型的值（满足条件）。

**参数：**回调函数，该回调函数的参数有三个（数组元素内容，元素索引（可选），数组本身（可选））

**返回值：**新的数组，存放”满足回调函数中条件的数组元素“

示例：

var arr1 = [-12,23,-34,45,-56,67];
var arr2 = arr1.filter(eqZero);	过滤掉所有小于等于0的数，留下大于0的数
	
function eqZero(num){
   
	return num>0;
}

5、every

**功能：**方法用于检测数组所有元素是否都符合指定条件。

**参数：**回调函数，该回调函数的参数有三个（数组元素内容，元素索引（可选），数组本身（可选））

**返回值：**true：都满足；false：不是都满足

示例：

var scores = [81, 75, 51, 60];
function gt(num) {
   
      return num>=60;
}
scores.every(gt); 结果是false。不是所有人都及格（大于等于60）

还记得判断质数的那个需求吗？

6、some

**功能：**方法用于检测数组中的元素是否至少有1个元素满足指定条件（函数提供）

**参数：**回调函数，该回调函数的参数有三个（数组元素内容，元素索引（可选），数组本身（可选））

**返回值：**true：有一些满足；false：都不满足

示例：

var scores = [81, 75, 95, 86];
function gt(num) {
   
     return num>=90;
}
scores.some(gt); 结果是true。包含大于等于90的成绩

二、字符串的定义和创建

1、概念：

字符串就是一串字符，由双（单）引号括起来。字符串是 JavaScript 的一种基本的数据类型。

2、定义：

1)、字面量的方式：

var str=‘亲’； 定义一个字符串变量str，内容为‘亲’                     基本类型

2）、构造函数的方式：

js
var str = new String(“hello”);  定义一个字符串变量str，内容为hello，   引用类型

用new产生的变量都是引用类型的变量，也叫对象。

3、示例用法：


var s1 = "string";
var s2 = new String("string");
 
console.log(typeof(s1)); 输出的是 string 
console.log(typeof(s2)); 输出的 object

三、字符串的常用属性和函数

1、字符串的属性

**length：**表示字符串的长度；

如 : var str=“how are you”;
alert(str.length);

2、字符串的函数（方法）

charAt(3) 获取下标为3的字符
charCodeAt(3) 获取下标为3的字符的编码
String.fromCharCode(94) 编码转换成字符
该方法是 String 的静态方法，所以用String调用，
例：String.fromCharCode(98,99);

字符串的查找方法
indexOf(“abc”) 查找字符串第一次出现的位置，如果没找到返回-1
lastIndexOf(“abc”) 查找字符串最后一次出现的位置，如果没找到返回-1

var str="hello world hello JS"
str.indexOf("h");0
str.lastIndexOf("h")12

跟正则相关的几个函数

1、search(正则对象) ：正则匹配 (返回索引位置，没有找到就返回-1)

2、match () 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。将匹配的内容存入数组（后期讲正则表达式详讲）

3、replace 替换字符串
如： var str=“how are you”;
document.write(str.replace(“are”,“old are”));
这里的替换只能执行一次，不能够进行全局匹配，而且区分大小写，如果需要全局匹配，则应使用正则表达式： str.replace(/are/gi,“old are”) ：表示把str中所有的are，全部替换为 old are，g表示进行全局匹配，i表示匹配的时候忽略大小写；
截取字符串：
1、slice（start,end）提取字符串的某个部分，并以新的字符串返回被提取的部分。
两个参数表示截取的开始下标和结束下标。
2、substring(start,stop) 提取字符串中介于两个指定下标之间的字符，并以新的字符串返回被提取的部分。
两个参数表示截取的开始下标和结束下标。

区别， slice参数支持负数（从后往前算），substring不支持。
字符串分割：
1、split 根据分隔符、拆分成数组
var str=“aaa1bbb1cc1d1”;
var arr=str.split(“1”);
2、大小写转换：
toLowerCase、toUpperCase

四、字符编码

ASCII（美国信息交换标准代码）是基于拉丁字母的一套电脑编码系统，主要用于显示现代英语和其他西欧语言。
GBK 共收录了21003个汉字，英文使用单字节编码，兼容ASCII编码，中文部分采用双字节编码。
Unicode为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
UTF-8是一种针对Unicode的可变长度字符编码。用在网页上可以统一页面显示中文简体繁体及其它语言。

五、和=

===（恒等）

一、如果类型不同，就[不相等] false
二、如果类型相同，值也相同，那就相同 true

1、如果两个都是数值，并且是同一个值，那么[相等]。

2、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]

3、如果两个值都是true，或者都是false，那么[相等]。
4、如果两个值都是null，或者都是undefined，那么[相等]。
5 、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。

==（等同）
1、如果两个值类型相同，进行 === 比较。

2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较

a、如果一个是null、一个是undefined，那么[相等]。

b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

d、任何其他组合，都[不相等]。

六、作业

1，敏感词过滤。（用户输入的内容中的敏感词替换为*）
例：“今天有个SB在旁边大喊大叫，影响了我的操作。”，
过滤后“今天有个在旁边大喊大叫，影响了我的作。”。
思路：把敏感词汇放在数组里：var arr=[‘SB’,’cab’,’nnd’]; 可以不用正则
2，密码格式要求。（必须包含字母、数字、特殊字符，长度6个字符以上）
3，留言过滤。（不能重复发言不能包含敏感词）
4，统计字符串中每个字符的个数。（原始字符串是：“aabccdeefffaaaa”,结果是：a2 b1 c2 d1 e2 f3 a4）
5，数字字母混合验证码。（例：6yF3）
6，统计字符串中每个字符的个数，并去掉连续重复的字符。（原始：“aabccdeefff”,统计后是：a2 b1 c2 d1 e2 f3，取重后是：abcdef）

第八天、Math和Date

本节课目标：

Math对象

数学运算相关知识回顾（三角函数）

日期对象

日期函数

使用定时器

一、Math对象的方法：

Math 对象用于执行数学任务。

Math对象的常用函数：

Math.round(3.6) 四舍五入
Math.random() 返回0-1之间的随机数
Math.max(num1, num2) 返回较大的数
Math.min(num1, num2) 返回较小的数
Math.abs(num) 绝对值
Math.ceil(19.3) 向上取整“20”
Math.floor(11.8) 向下取整“11”
Math.pow(x,y) x的y次方
Math.sqrt(num) 开平方

示例：

1、随机数

任意两个整数之间的随机数=取整（小数+随机数*（大数-小数））
parseInt(1+Math.random()*10);

	function getRandomNum(min,max){
   
		var cha=max-min;
		var rund=Math.random()*cha;
		return min+parseInt(rund);
	}

2、十进制转16进制或8进制的函数

十进制转其他：
var x=110;
alert(x);
alert(x.toString(8));
alert(x.toString(32));
alert(x.toString(16));

二、三角函数

Math.sin();正弦；

Math.cos();余弦；

https:developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

三、日期对象的定义：

1、概念：

Date对象用于处理日期和时间，Date对象记录着从1970年1月1日00:00:00开始以来的毫秒数。

2、定义：

1）、无参

var myDate=new Date() ; Date 对象自动使用当前的日期和时间作为其初始值。

2）、有参：创建Date对象同时指定日期和时间：

new Date(“month dd,yyyy hh:mm:ss”);
new Date(“month dd,yyyy”);
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);

四、日期对象的官方方法：

获取时间：　
　　 getFullYear() 返回年份　　
getMonth() 返回月份值，从0开始
getDate() 返回天
getHours() 返回小时数
　getMinutes() 返回分钟数
　getSeconds() 返回秒数
　getDay() 返回星期几，从0开始(星期天是0)

getTime() 返回完整的时间，毫秒数

设置时间：
　　
setYear() 改变年份

setMonth() 改变月份，从0开始

setDate() 改变Date对象的日期
　　setHours() 改变小时数
　　　　setMinutes() 改变分钟数
　　　　setSeconds() 改变秒数
　　
　　　　setTime() 改变完整的时间，毫秒数
字符串转换时间戳：

Date.parse(日期字符串或日期对象) 返回自1970年1月1日起至参数日期止的毫秒数
返回值：指定日期的毫秒数

如：
var t = Date.parse(“8 26,2021 11:34:00”);
console.log(t);1629948840000
Date转换为字符串：

toDateString() 把 Date 对象的日期部分转换为字符串。

toTimeString() 把 Date 对象的时间部分转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。

toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。

toUTCString() 根据世界时，把 Date 对象转换为字符串。

五、封装日期函数

输出自己的日期格式
转换周几为汉字
计算两个日期天数差
计算两个日期的月份差 (year2-year1)*12+(month2-month1);
计算两个日期的年分差

六、定时器：

1、间隔固定时间，周期性执行

setInterval（回调函数，毫秒数）

功能：设置每隔指定的毫秒数执行一次回调函数，返回定时器编号。体现是周期性不停重复的完成一件事情

参数：

回调函数，

设定的时间

返回值：

定时器的编号

clearInterval（定时器编号）清除定时器设置。

2、超过指定时间执行一次

setTimeout（回调函数，毫秒数）

功能：设置在指定的毫秒数后执行一次回调函数。体现的是延迟完成一件事情

参数：

回调函数

设定的时间

返回值：定时器编号

clearTimeout （定时器编号）

清除定时器设置。

注：因为只执行一次回调函数，所以为达到不停执行回调函数的效果必须在回调函数中再次设置。

七、作业：

编写函数获得随机的颜色字符串（#20cd4f）；
倒计时和正计时
数码时钟

第九天、BOM和DOM

本节课目标：

BOM

onload事件与匿名函数

DOM

表格操作

一、BOM

概念：

BOM是Browser Object Model的缩写，浏览器对象模型，把浏览器的组成部分在JS里叫作对象。

作用：

可以用JS操作浏览器窗口的每个部分。

Window对象：

 window 对象表示浏览器中打开的窗口。

window对象是全局最大的对象：

1）、var声明的全局变量，就是window对象的属性(window对象可以省略)

2）、声明的全局函数，就是window对象的方法(window对象可以省略)

Window对象官方属性：

document对象：文档（网页）
history对象：历史（浏览器的浏览历史）
Location对象：地址信息
Screen对象：屏幕相关
name 浏览器窗口的名字
status 设置窗口状态栏的文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRIECvG2-1641803458647)(imgimage-20210826223133558.png)]

window.Location 对象

包含有关当前 URL 的信息。（了解即可）

location对象的属性

href属性控制浏览器地址栏的内容（相当于在浏览器中输入网址打回车）
hostname 设置或返回当前 URL 的主机名。

location对象的方法
reload()方法刷新页面（相当于F5）
reload(true) 刷新页面，不使用缓存 (相当于ctrl+F5)

window.history对象

history对象包含用户(在浏览器窗口中)访问过的 URL。（了解即可）

属性：
length：返回浏览器窗口历史列表中的 URL 数量。
方法：
back()：加载 history 列表中的前一个 URL。（相当于后退按钮）
forward()：加载 history 列表中的下一个 URL。（相当于前进按钮）
go()：加载 history 列表中的某个具体页面，或者要求浏览器移动到指定的页面数量（负数为后退，正数为前进）（go(1)相当于forward() go(1)相当于back(-1)）

window对象的方法

alert(“”) 显示带有一段消息和一个确认按钮的警告框。
confirm(“”) 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt(“”) 显示可提示用户输入的对话框。
open(“url”,”name”,”打开窗口的设置”) 打开一个新的浏览器窗口或查找一个已命名的窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口

window对象的事件

onload：窗口内容加载完毕，触发（调用函数）

window.onload = function(){
     
    document.getElementById("num").value = "hi";
}

onscroll：窗口滚动时，触发（调用函数）

 onscroll:当窗口的页面滚动了的时候，调用函数
window.onscroll = function(){
     
    console.log("滚了");
}

onresize：窗口调整大小时，触发

 onresize：窗口调整大小时，调用函数
window.onresize = function(){
     
    console.log("窗口大小发生了变化");
}

二、onload事件与匿名函数

onload 事件会在页面或图像加载完成后立即发生。

支持的标签：, , , , , ,

例：

1，<body onload=“alert(‘页面加载完毕。');">
                      
2，<body onload=“jiazaiwanbi()">

	function jiazaiwanbi(){
   
		alert(“页面加载完毕。”);
	}

3，window.onload=jiazaiwanbi;

4，window.onload=function(){
   
            alert(“页面加载完毕。”);
}

三、DOM

概念：

DOM（Document Object Model），文档（网页）对象模型。网页中的每个标签在JS中都是对象。

作用：

可以用JS操作网页的每个标签和内容，属性。
DOM定义了表示和修改文档所需的对象、对象的行为、属性以及这些对象之间的关系

节点：

HTML的标签在JS中是对象，在DOM树（的世界里）叫节点。(在DOM（树）的世界里，一切皆节点)：
- 整个文档是一个文档节点（document）(document.documentElement:根节点HTML标签)
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
对象之间的关系叫做Node (节点)层次：
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。
HTML标签是根（root）节点。节点之间都存在着父子（parent child）、同胞（sibling）的关系。

DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iAMaWQz-1641803458648)(imgimage-20210826225211626.png)]

节点操作

节点的查找（获取）
节点的增
节点的删
节点的改

查询元素节点

1、通过选择器获取元素节点

getElementById()
功能：根据HTML标签的id，获取节点
返回值：dom对象（dom节点）
getElementsByTagName()
功能：获取相同标签名的元素节点，
返回值：返回节点集合（等同为数组），使用下标的方式来获取dom元素。
getElementsByName()
获取相同name属性的元素节点，不是所有标签都有name属性，（低版本浏览器会有兼容性问题）
getElementsByClassName()
获取相同class属性的节点列表（IE8及以下不支持）

2、通过层级关系访问节点（包括文本节点和元素节点）

parentNode 父节点。
childNodes 当前节点包含的所有子节点(文本和元素节点都有)。
firstChild 当前节点的第一个子节点。
lastChild 当前节点的最后一个子节点。
previousSibling 访问前一个同胞节点。
nextSibling 访问后一个同胞节点。

**注：**childNodes中的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。包含在childNodes 列表中的每个节点相互之间都是同胞节点。

**注：**列表中第一个节点的 previousSibling 属性值为 null ，而列表中最后一个节点的 nextSibling 属性的值同样也为 null。

3、节点的类型

子节点中包含文本节点和元素节点。

通过nodeType属性来判断节点类型，1 代表元素节点，2 代表属性节点，3 代表文本节点

示例：文本节点与元素节点过滤


传入父节点和需要的节点的类型，返回符合要求的子节点
		function filternode(node,

最低0.47元/天解锁文章

原js笔记

s原生JS笔记

二阶段学习内容

1、B/S架构（web结构）

2、前端工程师的工作

3、HTML、CSS、JS的作用和关系

4、二阶段学习的内容

第一天、javascript的基本语法

本节课的目标：

一、 JS简介，JS和H5的关系

1）、简介:

2）、历史：

3）、组成部分

二、 编写及运行JS

1、编写

2、注释

3、运行顺序

4、编辑工具和运行环境

三、语法：变量

1、概念：

2、定义（声明）：

3、赋值：

4、定义的同时赋值：

5、使用变量：

6、变量的命名规则及关键字：

四、语法：JS的数据类型

1、概念：

2、js的数据类型

3、如何判断变量的类型

4、javascript是弱类型的语言

五、语法：运算符

1、算术运算符

2、关系运算符

3、逻辑运算符

4、赋值运算符

5、自增自减

运算符的优先级：

6、字符串连接符

六、语法：类型转换

1、隐式（自动）转换

2、显式（手动）转换

七、十六进制和八进制

1、八进制：

2、十六进制：

3、进制转换

八、扩展案例：

需知：

1、交换两个数

2、在文本框输入两个数，完成运算

九、转义字符

1、概念：

2、HTML中的转义字符

3、JS中的转义字符

十、作业：

第二天、逻辑分支语句

本节课的目标：

一、程序逻辑的三大结构

二、条件分支语句if

1、单分支

2、双分支

3、多分支

4、if嵌套

三、switch结构

四、三元运算符

五、规范：

六、条件分支的注意点：

七、作业：

第三天、循环语句

本节课的目标：

一、循环的概念:

二、while循环语句

三、do while循环语句(不常用)

四、for循环语句（最常用的）

五、continue

六、break

七、死循环

八、循环嵌套

九、作业：

第四天、函数

本节课的目标：

二、编写及运行JS

2)、当全局变量和局部变量重名时

六、基本（值）类型和引用（地址）类型的区别