一、JavaScript 中的几个重要概念
1.JavaScript 基础语法
1.1标识符
所谓标识符,就是指给变量、函数、属性或函数的参数起名字。
标识符可以是按照下列格式规则组合起来的一或多个字符:
1.第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )。
2.其它字符可以是字母、下划线、美元符号或数字。
3.按照惯例,ECMAScript 标识符采用驼峰命名法。
4.标识符不能是关键字和保留字符。
1.2 关键字
1.3区分大小写
JavaScript 严格区分大小写,所以 Hello 和 hello 是两个不同的标识符。
为了避免输入混乱和语法错误,建议采用小写字符编写代码
2.JavaScript的注释
2. 1单行注释
单行注释以双斜杠//
开头,//
之后的所有内容都会看作是注释的内容,对//
之前的内容则不会产生影响
2. 2多行注释
多行注释以 /*
开头,并以 */
结尾,出现在 /*
和 */
之间的所有内容都会看作是注释的内容
3.JavaScript的输出
3.1页面输出
用于在网页中输出内容
document.write("三月请对我好一点");
3.2控制台输出
用于在控制台输出语句
console.log("111");
3.3弹出窗口输出
用于在浏览器中弹出警告
alert('未满18岁禁止访问!')
二、JavaScript 基本语法
1.JS 变量定义和赋值
1.1变量的声明: 使用var关键字声明一个变量
//声明变量
var boy;
var girl;
1.2变量的赋值: 使用=为变量赋值
//为变量赋值
boy="jack";
girl="lily";
1.3声明和赋值同时进行:
//声明的同时并赋值
var myAge = 16;
var myHight = 188;
2.let 和 const 关键字
1.let是Es6新引入的关键字,用来代替var关键字,ES6是指2015年推出的ECMAScript的语法
let不允许在一个代码块里有变量和他取一样的名字,但是允许修改同一个变量值
一个{}就是一个代码块
2.let和var声明的变量可以改变
const声明的变量不能改变,即常量
const必须要在声明的时候赋值
3.变量声明的区别
(1)初始化要求不同
使用var和Let声明变量时可以先不初始化,而使用const声明变量时必须初始化
(2)重复声明不同
使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致而使用const声明的变 量,在整个运行过程中不能修改初值,
(3)对块级作用域的支持不同
使用一对花括号括起来的代码称为一个代码块所谓块级作用域
就是指变量起作用的范围是当前代码块,离开当前代码块,变量就失效了
使用var声明的变量支持全局作用域,使用Let和const声明的变量支持块级作用域。
三、JS 数据类型
1.类型分类
1) String 类型
字符串(String)类型是一段以单引号''
或双引号""
包裹起来的文本,例如 ‘123’、“abc”。需要注意的是,单引号和双引号是定义字符串的不同方式,并不是字符串的一部分。
let dem01="a";
2) Number 类型
数值(Number)类型用来定义数值,JavaScript 中不区分整数和小数(浮点数),统一使用 Number 类型表示,如下例所示:
let age=18;
console.log(age);
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MAX_VALUE+2);//Infinity(无穷大)
Infinity:用来表示正无穷大的数值,一般指大于 1.7976931348623157e+308 的数;
-Infinity:用来表示负无穷大的数值,一般指小于 5e-324 的数;
NaN:即非数值(Not a Number 的缩写),用来表示无效或未定义的数学运算结构,例如 0 除以 0
3) Boolean 类型
布尔(Boolean)类型只有两个值,true(真)或者 false(假),在做条件判断时使用的比较多,您除了可以直接使用 true 或 false 来定义布尔类型的变量外,还可以通过一些表达式来得到布尔类型的值
let flag1= true;
let flag2= false;
4) Null 类型
Null 是一个只有一个值的特殊数据类型,表示一个“空”值,即不存在任何值,什么都没有,用来定义空对象指针
5) Undefined 类型
Undefined 也是一个只有一个值的特殊数据类型,表示未定义。当我们声明一个变量但未给变量赋值时,这个变量的默认值就是 Undefined
6) Symbol 类型
Symbol 是 ECMAScript6 中引入的一种新的数据类型,表示独一无二的值,Symbol 类型的值需要使用 Symbol() 函数来生成
2数据类型的检测
isNaN 检验是否是一个非数字
如果是数字类型则为false
如果是非数字类型为true
console.log(isNaN(a));
console.log(isNaN(11));
console.log(isNaN("a"));
console.log(isNaN("NaN"));//true
布尔类型true会在运算中转换为数字1
布尔类型false会在运算中转换为数字0
加号遇上字符串做拼接使用
console.log(2+"true");//2true
console.log(typeof(2+"true"));//string
3.数据类型的转换
1.数据类型转换为布尔类型
字符串和数字类型都会转换为布尔类型的true
空字符串转换为布尔类型为false,空格字符串转换为true
数字0转为布尔类型false
NaN转为布尔类型false
underfind转为布尔类型false
null转为布尔类型false
var a=Boolean("a");
console.log(a);
console.log(Boolean(""));//false
console.log(Boolean(" "));//true
2.将数据转换为字符串类型
使用String()或toString()进行转换
let num=true;
console.log(num);
let num2=String(num);
console.log(num2);//1字符串类型1
3. 将数据转换为数字型数据
Number()用于将数据转换为数字型数据
console.log(Number(""));//0
console.log(Number(" "));//0
console.log(Number(" "));//0
console.log(Number(" "));//NaN
console.log(Number(false));//0
console.log(Number(true));//1
console.log(Number("true"));//NaN
四、JS 运算符汇总
1. 算术运算符
算数运算符用来执行常见的数学运算,例如加法、减法、乘法、除法等
2. 赋值运算符
赋值运算符用来为变量赋值
//加等于/加并赋值
a += b;//a=a+b
console.log(a);//30
console.log(b);//20
a -= b;//a=a-b;
console.log(a);//10
console.log(b);//20
a *= b;
a /= b;
a %= b;
a **= b;
// != 不等于
console.log(4 != 5);//true
console.log(4 != 4);//false
//== 等于差不多相等
console.log(4 == "4");//true
//===全等于
console.log(4 === "4");//false
3. 字符串运算符
JavaScript 中的 +
和 +=
运算符除了可以进行数学运算外,还可以用来拼接字符串,其中:
+
运算符表示将运算符左右两侧的字符串拼接到一起;+=
运算符表示先将字符串进行拼接,然后再将结果赋值给运算符左侧的变量。
console.log(1+null);//1
console.log(1+true);//2
console.log(1+false);//1
console.log("12"-0);//12
console.log(undefined*null);//NaN
console.log(Infinity++);//infinity
console.log(1+"1");//11
console.log(1+"null");//1null
console.log(null+"undefined");//nullundefind
4. 自增、自减运算符
5. 比较运算符
// != 不等于
console.log(4 != 5);//true
console.log(4 != 4);//false
//== 等于差不多相等
console.log(4 == "4");//true
//===全等于
console.log(4 === "4");//false
==和!=在比较不用数据类型时,会将比较的数据转换为相同类型数据
===和!==不会进行数据类型转换
6. 逻辑运算符
&& 逻辑与运算符 一假则假
|| 逻辑或运算符 一真则真
! 逻辑非运算符
console.log(true && true);//true
console.log(false && true);//false
console.log(true && false);//false
console.log(false &&false);//false
console.log(true || true);//true
console.log(true || false);//true
console.log(false || false);//false
console.log(0 ||null);//false
console.log(0 ||null);//false
console.log(!(2>1));//false
7. 三元运算符
条件表达式 ? 表达式1:表达式2
如果条件表达式的值为true,则返回表达式1的执行结果
如果条件表达式的值为false,则返回表达式2的执行结果
var age=prompt("请输入你的年龄")
console.log(age);
var res = age >=18 ? "你已经是一名成年人 ": "你还是个宝宝"
document.write(res)
8.运算符优先级
小括号>一元运算符 > 比较运算符 > 逻辑运算符(逻辑与 > 逻辑或) > 赋值运算符
五、流程控制
1.选择结构
1. if(条件表达式){代码段}
let age=prompt("请输入年龄")
if(age>=18){
document.write("你可以进入网站")
}else{
document.write("no")
}
2.if...else语句(双分支)
if(条件表达式){代码段1} else {代码段2}
let age=prompt("请输入年龄")
if(age>=18){
document.write("你可以进入网站")
}
3. if...else if...else语句(多分支)
if(条件表达式1){
条件表达式1的结果
}else if(条件表达式2){
条件表达式2的结果
}else if(条件表达式3){
条件表达式3的结果
}
2.循环结构
1.for语句
for(初始化变量;条件表达式;操作表达式){
循环体
}
for(var i=0; i<=100 ;i++){
console.log(1);
}
2.while语句
while(条件表达式){循环体}
var i=1;
while(i<=100){
console.log(i);
i++
}
3.do...while语句
do{循环体}while(表达式)
while语句先判断条件表达式的值,再判断条件表达式的值再执行循环体
do...while语句会无条件进行1次循环体,然后再判断条件表达式的值
再根据判断的值是否进行循环
let sum =1;
do{
console.log(sum);
sum++
} while(sum<=100)
3.跳转语句
1.break语句
for(var i=1;i<=5;i++){
console.log(吃);
break;
}
console.log();
break语句立即跳出整个循环,循环结束语句
2.continue
for(var n=1;n<=5;n++){
if(i==3){
console.log();
continue;
}
} console.log("吃")
continue语句用来立即跳出本次循环,也就是跳过continue语句后面的代码
继续下一次循环
4.循环嵌套
var n = prompt('输入金字塔的行数');
for (var i = 1; i <= n; i++) {
for (var k = 1; k <= n - i; k++) {
document.write(" ");
}
for (var j = 1; j <= 2 * i - 1; j++) {
document.write("❤");
}
document.write("<br/>");
}
var n = prompt("你想要造多少层金字塔?")
// 如果输入不是数字,就转化为NaNA
//确保用户输入的是纯数字
n = Number(n) && parseInt(n)
// console.log(Number(null));//0
// console.log(parseInt(null));//NaN
// console.log(parseInt("123.a"));//123
//console.log(Number("123.a"));//NaN
//逻辑与符号必须均满足Number和parseInt的效果
//如果有一方不满足,n的结果就是NaN
//那么isNaN(n)的值就为true。
if (isNaN(n)) {
1819
alert("请输入一个数字")
}
var str = ""
// 循环行数
for (var i = 1; i <= n; i++) {
// 循环空格
var black = n - i
for (var k = 0; k < black; k++) {
Str += " "
}
// 循环爱心
var star = i * 2 - 1
for (var j = 0; j < star; j++) {
str += "♥"
str += "\n"
}
console.log(str);
}
\n"是换行的转义符
六.数组
1.初始数组
数组是一种复杂数据类型
用于讲一组数组集合在一起
通过一个变量就可以访问一组数据
数组之间用逗号隔开
数组中的"索引/下标",是从0开始计算的
//声明数组
let c =["ok","yes","no"]
//打印数组
console.log(c2);
//打印数组长度
console.log(class02.length);//3
//打印数组中下标为1的元素
console.log(c[0]);//ok
console.log(c[1]);//yes
//数组可以是任意类型的元素,字符串、 数字 、数据
let a=[1,2,3]
let b=['string',NaN,null,underfined]
2.创建数组
1.以new Array()的方式创建数组
var arr=new Array();
console.log(arr);// Array(0)
var arr=new Array(5);
console.log(arr);// empty(5)
var arr=new Array("aaa","bbb","ccc");
console.log(arr);
2.使用数组字面量创建数组
var mood=['sad',,,,,,'happy']
console.log(mood.length);//7
3.数组的基本操作
1.获取元素长度
数组名.length
2.修改数组长度
数组名.length=number
var arr = [0, 1, 2, 3, 4];
console.log(arr.length);
arr.length = 5;
console.log(arr);[0, 1, 2, 3, 4, empty]
arr.length = 3;
console.log(arr);//[0,1,2]
3.添加数组长度
arr[4] = 3;
console.log(arr);//[0,1,2,empty.3]
4.修改数组元素
arr[0] = 1;
console.log(arr);//[1,1,2,empty.3]
5.删除数组元素
//delete 数组名[index]删除数组中的某个元素值
delete arr[3];
console.log(arr);//[1,empty,2,empty.3]
6.遍历数组
let arr1 = [10, 20, 30, 40, 50, 60]
var sum = 0;
for (var i = 0; i < arr1.length; i++) {
sum += arr1[i]
//arr[0] 10 sum+10=0+10=10
//arr[1] 20 sum+20=10+20=30
//arr[2] 30 sum+30=30+30=60
}
console.log(sum);//210
let sorce = [97, 65, 43, 99, 60, 58, 36, 72, 85, 77]
var max = 0
var min = 100
for (var i = 0; i < score.length; i++) {
if (max < score[i]) {
max = score[i]
}
if (score[i] < min) {
min = scorel[i]
}
}
console.log(max);
console.log(min);
7.新增数组元素
//push在数组后添加元素
let arr3 =[1,2,3,4]
arr3.push=(5)
console.log(arr3);//[1,2,3,4,5]
//unshift在数组前添加元素
arr3.unshift(-2,-1,0)
console.log(arr3);//[-2,-1,0,1,2,3,4,5,6]
var arr4=[0,-5,19,50,2,7,10,11,-6,8,2]
var arr5=[]
for(let i=0; i<arr4.length;n++){
console.log(arr[i]);
if(arr4[i]>10){
arr5.push(arr4[i])
}
}
console.log(arr5);
4.二维数组
// 二维数组指的是数组元素的值是一个一维数组
var arr = [80, 100, 75]
var arr1 = [
[80, 100, 75],
[90, 67, 66],
[99, 87, 85]
]
//访问二维数组
console.log(arr1[0]);//[80,100,75]
console.log(arr1[0][0]);//80
//遍历二维数组arr1
for(let i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
for (let j = 0; j < arr1.length; j++) {
console.log(arr1[i][j]);
}
}
//二维数组倒置
var arr1 = [
[1, 2, 3], [4, 5, 6], [7, 8, 9],]
var arr2 = []
// 遍历原数组的行
for (var i = 0; i < arr1[0].length; i++) {
//根据原数组的行,设置新数组的列
arr2[i] = [];
// 遍历原数组的列
for (var j = 0; j < arr1.length; j++) {
//j是原数组的列 i是数组的行!
// 颠倒位置
arr2[i][j] = arr1[j][i]
}
}
console.log(arr2);
5.数组迭代方法
1.map数组遍历器
let arr=[23,32,70,101,107]
let res=[]
for (let a=0; a<arr.length;a++){
res[a] =arr[a]+1
}
console.log(res);
//map:利用某种规则映射得到一个新数组
//map()中需要传入一个回调函数作为参数
//在回调函数中定义需要map数组遍历方法做什么事情
//arr.map((元素,下标)=>(return新元素)
let res1=arr.map(function (value,index){
//回调函数中一定要return
return value +1 //让每个元素+1
})
console.log(res1);
let res2=arr.map(function (value,index){
return value *2
})
console.log(res2);
2.filter数组过滤器
let arr = [-10, 0, 10, 20, 30]
let res = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
res.push(arr[i])
}
}
console.log(res);
//filter:用于筛选数组中满足条件的元素,返回筛选后的新数组
//arr.filter((value,index)=>(筛选条件))
//filter形成的新数组的长度!==原数组长度
//回调函数执行次数 == 数组长度
let res2 = arr.filter((value, index) => {
return value > 10
})
console.log(res2);
let arr1=[-40,35,9,26,0,99,77]
let res3 = arr1.filter((value, index) => {
return value%2==0
})
console.log(res3);
3.forEach数组遍历
forEach也是用于遍历数组
数组.forEach(function(vaule,index,arr){算法})
回调函数的执行次数=原数组长度
forEach没有返回值,不需要return
let arr = [1, 2, 3, 4, 5, 6]
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum);
let sum1 = 0
// arr.forEach(function(value){
// sum1+=value
// })
arr.forEach(value => sum1 += value)
console.log(sum1);
4.some
Some用于判断数组元素是否符合条件
回调函数的执行次数! ==原数组长度
some函数返回一个布尔值
只要有一个元素符合函数体的判断条件,就返回true
如果没有一个元素符合函数体的判断条件,则返回fase
let year=[2001,2002,2003,2005]
let arr2 = year.some((item, index) => {
return item %4==0 &&item%100!=0
})
console.log(arr2);
5.every
some和every通历函数后返回的都是一个布尔类型的值,
如果有元素满足条件,some的值为true
当全部元素满足条件,every的值为true
let arr = [1, 2, 3, 4, 5, 6]
let res =arr.every(function (item){
return item>0
})
console.log(res);
let res1 =arr.every( (item) =>item>0
)
console.log(res1);
6.findindex
findindex用于返回第一个符合元素的下标
var arr = [9, 4, 0, -1, 3, -2, 7]
var index= arr.findIndex(function(b){
return b>0
})
console.log(index);
7.reduce
var arr = [66, 44, 33, 22]
var a = 0;
var b = 0;
for (let i = 0; i < arr.length; i++) {
a += arr[i]
}
b = a / arr.length
console.log(b);
var sum = arr.reduce( (sum, value) => {
return sum += value
})
var avg = sum / arr.length
console.log(sum);
console.log(avg);
console.log(index);
七.函数
1.初识函数
1. 函数的定义
函数用于封装完成一段特定功能的代码
相当于将一条或多条语句组成的代码块包裹起来
用户在使用时只需要关心参数和返回值,就能完成特定功能,而不用了解具体的实现
2.函数格式
function name(params){
}
function值这是一个函数语句
name是函数名
params是函数参数
{}内函数的具体功能
3. 函数的返回值
函数的返回值是指函数在调用后获得的数据
在定义函数时,可以为函数指定一个返回值,函数的返回值可以是任意类型的数据
在Js中使用return语句得到返回值并退出函数
{return 表达式}
2.函数内外变量的作用域
1.全局变量
在函数体外声明的变量或者在函数体内省略var关键字声明的变量
var a = 10
function demo() {
console.log(a);//a为全局变量,在函数体内可以被访问
}
demo()
console.log(a);//a为全局变量,在函数体外也可以被访问
2.局部变量
在函数体内利用var关键字声明的变量
function demo1(params) {
var b = 10 //b是var关键字声明的变量,为局部变量
console.log(b);//函数内部定义的局部变量b,可以在函数内部被访问
3. 块级变量
在es6标准中,新增的let关键字声明的变量为块级变量
一个花括号{}为一个块级
if (true) {
// let sex = 男;//let声明的变量sex为块级变量
console.log(sex);//块级变量sex可以在()内部被访问
}
//consoLe.log(sex);//块级变量sex不可以在外部被访问
for (leti = 0; i < 5; i++) {
console.Log("循环内部" + i);
}
console.log("循环外部" + i);// i is not defind
4.js三种作用域
全局作用域:被全局变量所拥有:在{}外声明的变量
局部作用:被局部变量所拥有:在函数内定义的变量
块级作用域:被块级变量所拥有:在分支语句或者循环大括号中定义的变量
5.变量提升
//通过var声明的变量,在申明并赋值语句之前就可以被访问到
console.log(d);//undefined
var d = 20;
//因为变量提升,所以67-68行代码的执行效果,其实是71-73行。
var d;
console.log(d)
var d = 20;
3.函数进阶
1.封装函数
var fn = function sum(num1, num2) {
//在函数内部封装了一个打印语包
//调用此函数,就会执行打印语句
console.log(num1 + num2)
}
//sum(1.2)//3
fn(1, 2)//3
function sum(num1, num2) {
//在数内部求的一个和
//并将求得的和返回出去
//让函数外部可以拿到
return num1 + num2
}
console.log(sum(1, 2));
var fn = function sum(num1, num2) {
return num1 + num2
}
console.log(fn(1, 2));
2.匿名函数
var fn1 = function (num1, num2) {
return num1 + num2
}
console.log(fn1(1, 2));
3.前头函数
删除function关键字
在参数和函数体中间放上"=>"
var fn2 = function (num1, num2) {
console.log(num1 + num2);
}
fn2(1, 2)
//当函数体只有一句话时,可以省略大括号
var fn3 = (numl, num2) => console.log(num1 + num2);
fn3(1, 2)
//当函数只有一句代码并且函数的执行结果就是函数的返回值
//可以省略函数的大括号和return关键字
var fn4 = (numl, num2) => num1 + num2
console.log(fn4(1,2));
//当参数只有1个时,可以省略函数外部的小括号
var fn5 = numl => num1 + num2
console.log(fn5(12));
4.回调函数
//函数fn作为参数传递给参数cal
//然后在函数cal中调用函数fn
//此时,fn就是回调函数
function cal(numl, num2, fn) {
return fn(numl, num2)
}
console.log(cal(10, 20, function (a, b) {
return a + b
}));//17
console.log(cal(10, 20, function (a, b) {
return a * b
}));//200
console.log(cal(10, 20, function (a, b) {
return a % b
}));
//在cal函数中设置了回调函数后
//可以根据调用时传递的不同的函数参数(相加函数、相乘函数
//去实现不同的功能
//实现了函数的定制化
5.定时器函数
//setInterval()
//Interval:间隔,间隙
//“时间间隔“一到,代码就会热行一次
//setInterval(function,time)
// setInterval(function () {
// console.log("该上课了");
// }, 5000)
//setTimeout()
// 用来指某个函数或某段代码在多少毫秒以后执行
//setTimeout(function,time)
// setTimeout(function(){
// console.log("抢票");
// },3000)
//定时器函数属于异步代码。
//setTimeout指定的代码,必须等同步代码执行完毕后执行
// console.log(1);
// setInterval(function () {
// console.log(2);
// }, 0)
// console.log(3);
console.log("A");
setTimeout(function(){
console.log("B");
},20)
console.log("C");
setTimeout(function(){
console.log("D");
},0)
6.函数嵌套与作用域链
// 函数嵌套
var i = 10;
function fn1() {
var i = 20;
function fn2() {
function fn3() {
console.log(i);
}
fn3()
}
fn2()
}
fn1()
// 变量访问规则:就近原则
// 当在一个作用域中访问变量时,首先看当前作用域有没有声明
// 如果有则访问,没有则往上级作用域查找
// 直到达到顶端作用域没有时,程序报错
7.闭包函数
闭包的作用:解决变量污染问题,让变量被函数保护起来
// let count = 0;
// setInterval(function () {
// console.log(count++);
// }, 1000)
// 在这段代码中,count是一个很常用的变量名。
// 为了避免和其他位置的代码起冲突,可以使用一个函数将上面的代码包裹起来
function fn(){
let count = 0;
setIntervai(function(){
console.log(count++);
},1000);
}
//内部函数setInterval访问外部函数 fn定义的局部变量count
function fn(){
let count = 0;
function add() {
console.log(count++);
}
setIntervai(add, count)
}
// 内部函数add访问外部函数fn定义的局部变量count。
8.递归函数
递归函数是一个函数间接或直接的调用自身
// function func(){
// console.log(1);
// func()
// }
//需求:设置一个函数getSum()
//如果传入进去的是n
//return sum=n+(n-1)+(n-2)+..+ 1
//n=5
//sum = 5+4+3+2+1=15
// 循环写法
function getSum(n) {
var sum = 0
for (var i = 0; i <= n; i++) {
sum += i
}
console.log(sum);
}
getSum(5)
// 循环写法二
function getSum2(n) {
var sum = 0;
for (var n; n >= 0; n--) {
sum += n;
}
console.log(sum);
}
getSum(5)
//递归写法
function getSum3(n) {
//当n=1时
if (n == 1) {
return 1;
}
// 当前数组+比自己小1的数字
return n + getSum3(n - 1)
}
console.log(getSum3(5));
// 需求:设置一个函数,求阶乘(循环写法)
//传入一个n,返回n*(n-1)*(n-2)*...*1
function fn(n) {
var mulSum = 1;
for (var i = 1; i <= n; i++) {
//假设n=3;i=1 i=2 i=3
mulSum *= i
}
return mulSum
}
console.log(fn(4));//4*3*2*1=24
// 需求:设置一个函数,求阶乘(递归写法)
//传入一个n,返回n*(n-1)*(n-2)*...*1
function fn1(n) {
var mulsum = 1;
//设置终点
if (n === 1) {
return 1
}
return n * fn1(n - 1)
}
//n=4; 4*fn1(3); 4*3*fn1(2); 4*3*2*fn1(1); 4*3*2*1=24
console.log(fn1(4));
//斐波那契数列(每一项等于前两项之和)
// 求斐波那契数列(循环写法)
function getValue(n) {
var arr = [1, 1]
for (var i = 2; i < n; i++) {
//某一个数等于它前面两个数之和
//比如下标i = 6(下标为6)的数8 = 5(下标为5)+3(下标为4)
//i是下标,arr[i]对应的是数组值
arr[i] = arr[i - 1] + arr[i - 2]
}
console.log(arr);
return arr[arr.length-1]
}
console.log(getValue(10));
// 求斐波那契数列(递归写法)
function getValue(n) {
//设置终点
if(n===1 || n===2){
return 1
}
//未到终点
return getValue(n-1) + getValue(n-2)
}
console.log(getValue(10));
//n=4(需要知道在数组中第4个数是多少)
//getValue(4)=getValue(3)+getValue(2)
//getValue(4)=getValue(2)+getValue(1)+1
//getValue(4)=1+1+1
八.对象
1.介绍对象
1.对象(obiect)是什么
对象是一种复杂数据类型
(复杂数据类型的内容存储在堆内存中,地址存储在栈内存中
2.对象作用
以键值对的形式存储多个数据
3.对象
let obj = {
name: "张三",
age: 30,
sex: "男",
gfs: ["小花”“小美”,“小爱"],
sayHi: function () {
console.log("瓦达西见一个爱一个")
}
}
console.log(obj);//(name:'张三',age:30,sex:'男'}
console.log(obj.name);//'张三'
console.log(obj.age);//30
console.log(obj.sex);//'男
console.log(obj.gfs);//['小花','小美','小爱']
console.log(obj.sayHi);
console.log(obj.sayHi());
4.对象新增
obj.bf = "李四"
console.log(obj);
5.对象修改
obj.bf = "王五"
console.log(obj);
6.对象删除
delete obj.age
console.log(obj);
7.对象通历
//遍历数组:for(let i=0; i < arr.length;i++){}
//遍历对象:for-in循环:for(let key in 对象名) {对象名[key]}
let score={
math:99,
history:80,
geology:70,
english:60
}
for (let key in score ){
console.log(key);// 打印属性名
console.log(score[key]);// 打印属性值
}
2.Math对象
// 1.内置对象:由JS作者提前编写好的对象,里面存储了一些属性方法,直接使用即可,
//2:Math数学对象、Date日期对象
//计算一个边长为5的圆的周长
const pi = 3.14
const r = 5
const C = 2 * pi * r
console.log(C);
//a.员周率:Math.Pi
console.log(Math.PI);
const c = 2 * Math.pI * r
console.log(c);
//b.绝对值:Math.abs()
console.log(Math.abs(-3.5));//3.5
//c.找最大/最小值:Math.ax/Math.min()
console.log(Math.max(1, 9, 5, 6, 3, 4, 6, 2));//9
console.log(Math.min(1, 9, 5, 6, 3, 4, 6, 2));//1
//d.幕运算:Math.pow(x,y)求x的y次方
console.log(Math.pow(2, 10));//1024
//e.四舍五入: Math.round()
console.log(Math.round(3.5));//4
console.log(Math.round(3.2));//3
console.log(Math.round(-3.5));//-3
console.log(Math.round(3.6));//-4
//f.向上取整:Math.ceil()
console.log(Math.ceil(3.1));//4
console.log(Math.ceil(-3.1));//-3
//g.向下取整:Math.floor()
console.log(Math.floor(-1.8))//-2
//h.生成0-1之间的随机小数:Math.random()
console.log(Math.random());
//生成一个0-100之间的随机整数
console.log(100*Math.random());
3.Date对象
时间戳:从1970年1月1日零时零分零秒到现在的毫秒数
//人以下三种写法都会得到时间戳
console.log(Date.now());
console.log(+new Date);
console.log(new Date().getTime());
1.获取年份
console.log(new Date().getFullYear());
console.log(new Date().getMonth());//范围0-11
console.log(new Date().getDate());//范围1-31
console.log(new Date().getDay());//范围0-6,星期天是0
console.log(new Date().getHours());
console.log(new Date().getMinutes());
let a = new Date().getFullYear();
let b = new Date().getMonth();
let c = new Date().getDate();
let d = new Date().getDay();
document.write("今天是" + a + "年" + b + "月" + c + "日")
2.设置年份
date.setFullYear(1998)
date.setMonth(8)
date.setDate(1)
3.获取年份
var year = date.getFullYear()
var month = date.getMonth()
var day = date.getDate()
4.打印年份
console.log(year);
console.log(month);
console.log(day);
4.Array对象
1.push(element) 在数组末尾添加一个元素
var course = ["web", "java"]
course.push("JavaScript")
console.log(course);//['web','java','JavaScript']
2.unshift(element)在数组开头添加一个元素
course.unshift("计算机基础")
console.log(course);//[计算机基础,'web','java',javaScript]
3.pop()删除数组中最后一个元素
course.pop()
console.log(course);//[计算机基础',‘web','java']
4.shift()删除数组第一个元素
course.shift()
console.log(course);//['web','java']
5.splice(start, deletCount)
arr.splice(3, 2)//从下标为3的数(4)开始,删掉后面两个数字
console.log(arr);//[1,2,3,6,7]
6.splice(start,deleteCount,item1,item2,item3)
arr.splice(4, 0, 999, 888, 777)//从下标为4的数字(6)开始,往后面满加一些元素
console.log(arr);//[1,2,3,6,999,888,777,7]
7.reverse():颠倒数组中元素的索引
var arr1 = [1, 2, 3, 4, 5, 6, 7]
arr1.reverse();
console.log(arr1);//[7,6,5,4,3,2,1]
5.String对象
1. 创建字符串对象
var str = new String("apple")
console.log(str);//{"apple"
2.数组类型检测
console.log(typeof (str));//object
var str1 = "banana"
console.log(typeof (str1));//string
3.根据字符串返回索引
// indexOf() 返回在字符串中首次出现的索引,没有则返回-1
// lastIndexOf() 返回在字符串中最后一次出现的索引,没有则返回-1
var str = "helloworld"
console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//6
// 根据索引返回字符串
// chatAt
console.log(str.charAt(7));//"r"
4.字符串截取
// slice (start)
console.log(str.slice(5));//"world"
// slice (start,end)//从start的下标截取到end的下标
console.log(str.slice(1, 4));//"ell"
console.log(str);//helloworld //截取不会改变原数组
5.字符串连接
// concat()
var str1 = "hello"
var str2 = ",world"
str1.concat(str2)
console.log(str1.concat(str2));//hello,world
6.大小写转换
//toUpperCase() 转化为大写
//toLowerCase() 转化为小写
console.log(str1.toUpperCase());//HELLO
console.log("HELLO".toLowerCase());//hello
7.替换
// replace(str1,str2) 将str2替换str1
console.log(str)//helloworld
console.log(str.replace("world", "js"));//hellojs
8.字符串分隔(将字符串转化为数组)
// split(分隔符)
console.log(str.split(""));//['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
console.log(str.split());//['helloworld']
console.log(str.split("o"));// ['hell', 'w', 'rld']
九.DOM(上)
1.获取元素案例1-隔行变色
HTML 部分
<button id="btn">点我呀,给你点颜色看看</button>
<!-- ul>li{给你点黄色看看}*5 -->
<ul>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
</ul>
JS 部分
1.获取元素
<script>
let btn = document.getElementById("btn")
console.log(btn);
let liList = document.getElementsByTagName("li")
console.log(liList);
//document.getElementByID("id属性值")根据ID属性获取元素
//document.getElementByTagName("标签名")根据标签名获取元素
2.注册事件
btn.onclick = function () {
3.事件处理
//3.1遍历liList数组
for (let i = 0; i < liList.length; i++) {
//当遍历的i是偶数时
if (i % 2 == 0) {
console.log("黄色");
liList[i].style.backgroundColor = "yellow"
//当遍历的i是奇数时
} else {
console.log("绿色");
liList[i].style.backgroundColor = "green"
}
}
}
// 元素对象,事件属性 = 事件处理函数
// element.onlick(单击事件)=function(){}
// 元素样式操作
// Element.style.样式属性值="样式属性值"
// backgroundColor 设置元素的背景颜色
</script>
2.获取元素案例2-微博评论框
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.count {
color: red;
}
</style>
</head>
<body>
<div class="box">
<!-- textarea多行文本框 -->
<!-- placeholder占位符 -->
<!-- maxlength最大输入数 -->
<textarea id="area" cols="30" rows="10" placeholder="说点什么吧" maxlength="140"></textarea>
</div>
<span class="count">0</span>
<span>/</span>
<span>140</span>
<script>
// 1.获取元素
let area = document.querySelector("#area")
let count = document.querySelector(".count")
console.log(area);
console.log(count);
//根据CSS选择器获取元素
//document.querySelector("#id名")通过id选择器获取元素对象
//document.queryselector(".类名")通过class类选择器获取元素对象
//2.注册事件
//元素对象.事件属性=事件处理函数
// element.oninput(输入事件)=function(){}
area.oninput = function () {
//area.value.length//在输入框内输入的内容的长度
console.log(area.value.length);
count.innerHTML = area.value.length
}
// 设置内容
// element.innerHTML ="HTML内容'
3.获取元素案例3-开关灯
<body>
<input type="button" value="关灯" id="btn">
<script>
//1.获取按钮
//document.getElementByID("id属性值")根据ID属性获取元素
let btn = document.getElementById("btn")
//2.注册事件
//元素对象.事件属性=事件处理函数
// element.oninput(输入事件)=function(){}
btn.onclick = function () {
// body标签具有唯一性,可以直接通过点语法获取
document.body:获取文档中的body元素
let body = document.body
if (this.value == "关灯") {
body.style.backgroundColor = "black"
this.value = "开灯"
} else {
body.style.backgroundColor = "white"
this.value = "关灯"
}
}
// 元素样式操作
// element.style.样式属性名 =“样式属性值'
// backgroundColor 设置元素的背景颜色
</script>
4.元素内容操作案例1-真香
<div id="text">
我王境泽就是饿死,死外边,从这里跳下去,也不会吃你们一点东西
</div>
<input type="button" value="王子变形记" id="btn" οnclick="changeText()">
<script>
function changeText(){
// var text= document.getElementById("text")
// console.log(text);
document.getElementById("text").innerHTML ="真香"
}
</script>
5.元素内容操作案例2-显示实时时间
<style>
p {
font-size: 50px;
text-align: center;
}
span {
font-weight: bolder;
color: blue;
}</style>
<body>
<p>现在是<span id="clock"> 11:10:20</span></p>
<button οnclick="a()">按钮</button>
<script>
//这个函数对时间进行处理,如果的得到时间是一个个位数
//就进行一个十位数的补零操作
function time(t) {
if (t < 10)
t = "0" + t
return t
}
function a() {
//通过内置对象获取当前时间
let arr = new Date();
console.log(arr);
let arr3 = arr.getHours() + ":" + arr.getMinutes() + ":" + arr.getSeconds()
console.log(arr3);
let arr2 = time(arr.getHours()) + ":" + time(arr.getMinutes()) + ":" + time(arr.getSeconds());
console.log(arr2);
document.getElementById("clock").innerHTML = arr2
}
//定时器函数
//每隔1秒执行一a函数
setInterval(a, 1000)
</script>
6.元素样式操作案例1-改变盒子大小
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
let box=document.getElementById("box")
var i=0;
box.οnclick=function(){
++i
if(i%2){
this.style.width = '500px';
this.style.height = '500px';
this.innerHTML="大"
}else{
this.style.width = '100px';
this.style.height = '100px';
this.innerHTML="小"
}
}
</script>
7.元素样式操作案例2-单击按钮改变颜色
<body>
<button >按钮1</button>
<button >按钮2</button>
<button >按钮3</button>
<button >按钮4</button>
<button >按钮5</button>
<script>
var btns =document.getElementsByTagName("button")
console.log(btns);
for (var i=0; i<btns.length;i++){
btns[i].οnclick=changeColor
}
function changeColor(){
for (var j=0;j<btns.length;j++){
if(btns[j]==this){
console.log(this);
this.style.backgroundColor="pink"
}else{
btns[j].style.backgroundColor="grey"
}
}
}
</script>
</body>
8.元素样式操作案例3-一闪一闪亮晶晶
<div id="star">
<img src="./star.jpg" alt="">
</div>
<script>
let star = document.querySelector("#star")
// onmouseover 鼠标移入事件
star.onmouseover = function () {
// display =“none" 元素被隐藏
star.style.display = "none"
}
// onmouseout 鼠标移出事件
star.onmouseout = function () {
star.style.display = "block"
}
</script>
9..元素样式操作案例4-我方了
<div class="box"></div>
<button class="btn">我圆了</button>
<button class="btn">我方了</button>
<script>
var box=document.getElementsByClassName("box")
//获取所有标签名为btn的元素,得到一个数组
var btn=document.getElementsByClassName("btn")
console.log(box);
console.log(btn);
//btn数组中,第0个元素是“我圆了“按钮
btn[0].οnclick=function(){
console.log(box[0].classList);//div盒子的类名是box
// element.classList.add("类名")添加类名
box[0].classList.add("changeBox")
console.log(box[0].classList);//div盒子的类名是box和changeBox
}
btn[1].οnclick= function(){
//element.classList.remove("类名")移除类名
box[0].classList.remove("changeBox")
}
</script>
10.元素样式操作案例5-标签栏切换效果的副本
<body>
<div class="tab-box">
<div class="tab-head">
<div class="tab-head-div current">标签一</div>
<div class="tab-head-div">标签二</div>
<div class="tab-head-div">标签三</div>
<div class="tab-head-div tab-head-r">标签四</div>
</div>
<div class="tab-body">
<div class="tab-body-div current"> 内容一 </div>
<div class="tab-body-div"> 内容二 </div>
<div class="tab-body-div"> 内容三 </div>
<div class="tab-body-div"> 内容四 </div>
</div>
</div>
<script>
//1获取元素
//1.1获取所有的标签元素
let tabs = document.getElementsByClassName("tab-head-div")
console.log(tabs);
//1.2获取所有的内容元素
let divs = document.getElementsByClassName("tab-body-div")
console.log(divs);
//2.1遍历标签数组元素对象
for (let i = 0; i < tabs.length; ++i) {
//2.2为每一个标签元素设置事件
//onmouseover鼠标移入事件
tabs[i].onmouseover = function () {
//this指向鼠示移入的标签元素
//console.log(i);
//2.3编辑内容数组元素对象
for (let j = 0; j < divs.length; ++j) {
console.log(i);
console.log(j);
//3.1如果正在点击第一个标签元素
if (tabs[j]==this) {
//3.2就给相应的数组添加current类名
//给标签添加current类名,元素增加白色背景
tabs[j].classList.add("current")
//给内容栏添加current类名,元素被显示
divs[j].classList.add("current")
}else{
tabs[j].classList.remove("current")
divs[j].classList.remove("current")
}
}
}
}
</script>
</body>
11.元素属性操作案例1-我哭了我装了
<img src="./我哭了.jpg" width="600px" height="400px" alt="" id="pic">
<script>
//1.获取图片
let pic = document.getElementById("pic")
//2.设置事件
pic.onmouseover = function () {
this.src = "./我装的.jpg"
}
pic.onmouseout = function () {
this.src = "./我哭了.jpg"
}
</script>
12.元素属性操作案例2-404
<body>
<input type="text" value="请输入内容">
<button>搜索</button>
<script>
///1.获取元素
let input = document.querySelector("input")
let btn = document.querySelector("button")
//.2.注册事件
btn.onclick = function (){
input.value = "禁止访问"
btn.disabled=true
}
</script>
</body>
13.元素属性操作案例3-显示和隐藏密码
<div class="box">
<input type="text" id="pwd">
<img src="./open.jpg" alt="" id="eye">
</div>
<script>
//1.获取元素
let pwd = document.getElementById("pwd")
let eye = document.getElementById("eye")
//2.注册事件
eye.onclick = function () {
if (pwd.type = -"text"){
console.log(111);
pws.type = "password"
eye.src="./close.jpg"
}else{
pwd.type = "text"
eye.src = "./open.png"
}
}
//3.完成事件处理函数
</script>
14.元素属性操作案例4-隔行变色plus
<body>
<ul>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
<li>给你黄色看看</li>
<li>给你绿色看看</li>
</ul>
<script>
let liList = document.querySelectorAll("li")
console.log(liList);
for (let i = 0; i < liList.length; i++) {
liList[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green"
//onmouseenter鼠标移入事件
liList[i].onmouseenter = function () {
this.setAttribute("bgc", this.style.backgroundColor)
console.log(this.getAttribute("bgc"));
//element.setAttribute("属性","值")设置属性
//element.getAttribute("属性","值") 获取属性
this.style.backgroundColor="red"
}
//onmouseleave鼠标移出事件
liList[i].οnmοuseleave=function(){
//取出自定义属性的值赋值给背景颜色
this.style.backgroundColor=this.getAttribute("bgc")
}
}
</script>
</body>
十.DOM (下)
1.节点操作案例1-删除水平线
JS部分
<title>删除水平线——删除节点</title>
</head>
<body>
<h1>JavaScript程序设计</h1>
<hr />
<h2>什么是JavaScript</h2>
<p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p>
<hr />
<h2>第一部分 JavaScript概述</h2>
<p>JavaScript的发展历史</p>
<input type="button" value="删除水平线" οnclick="delhr()" />
<script>
function delhr() {
let hrs = document.querySelectorAll("hr")
for (let i = 0; i < hrs.length; i++) {
var hr = hrs[i]
//node.parentNode获取父节点
console.log(hr.parentNode);
//node.previoussibling获取上一个兄弟节点
console.log(hr.previousSibling);
//node.previousElementsibling获取上一个兄弟节点元素
console.log(hr.previousElementSibling);
//node.previousSibling获取下个兄弟节点
console.log(hr.nextSibling);
//node.previousElementsibling获取下一个兄弟节点元素
console.log(hr.nextElementSibling);
//移除节点
//node.removeChild(child)
//node表示父节点,child表示node中需要被移除的字节点
hr.parentNode.removeChild(hr)
}
}
</script>
</body>
2.节点操作案例2-简易留言板
CSS部分
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
border: 3px solid seagreen;
width: 700px;
}
h1 {
text-align: center;
color: yellowgreen;
}
ul {
margin-top: 50px;
width: 500px;
height: 200px;
border: seagreen 3px dashed;
margin: 30px auto;
list-style: none;
}
li {
width: 400px;
padding: 5px;
background-color: #eee;
font-size: 14px;
margin: 15px auto;
}
li a {
float: right;
}
textarea {
width: 400px;
height: 50px;
border: 3px solid seagreen;
outline: none;
resize: none;
display: block;
margin: 20px auto 5px;
}
.sub {
display: block;
background-color: seagreen;
color: seashell;
width: 200px;
height: 30px;
margin: 10px auto;
}
.remove {
float: right;
}
JS部分
<body>
<h1>留言板</h1>
<ul></ul>
<textarea name="" id="" placeholder="请输入你的留言"></textarea>
<button class="sub">发布 </button>
<script>
let btn = document.querySelector(".sub")
let text = document.querySelector("textarea")
let ul = document.querySelector("ul")
btn.onclick = function () {
if (text.value == "") {
alert("你没有输入任何内容")
return false
} else {
//创建节点
//document.createElement("标签名
var li = document.createElement("li")
li.innerHTML = text.value
//5.实现删除功能
//5.1 创建删除按钮节点
let button = document.createElement("button")
//5.2 添加节点
// appendChild() 将一个节点添加到父节点的所有子节点的末尾
li.appendChild(button)
//5.3为按钮增加文字
button.innerHTML = "删除"
//5.4 为按钮设置类名,从而增加右浮动的样式
button.className = "remove"
//5.5实现按钮的删除功能
button.onclick = function () {
//点击钮,整个li项被删除
//node,removeChild(child)
//node表示父节点,child表示node中需要被移除的子节点
ul.removeChild(this.parentNode)
}
// 3.2漆加节点
// insertBefore()将一个节点添加到父节点的指定节点的前面
// 第一个参数要添加的节点
// 第二个参数父节点中的指定的子节点
ul.insertBefore(li, ul.children[0])
//4.将文本框内容清空
text.value = ""
}
}
</script>
</body>
3.常用事件案例-输入内容不能为空
<style>
.box{
display: flex;
flex-direction: column;
}
.input{
width: 100px;
}
button{
width: 100px;
margin-top: 5px;
}
</style>
<body>
<div class="box"></div>
用户名:<input type="text" id="user" class="input">
密 码:<input type="password" id="pwd" class="input">
<button>登录</button>
</div>
<script>
//onfocus当获得焦点时触发
//onblur当失去焦点时触发
document.getElementById("user").οnblur=blur
document.getElementById("pwd").οnblur=blur
function blur(){
if(this.value===""){
alert("请注意:输入的内容不能为空")
}
}
</script>
</body>
4.常用事件案例2-下拉菜单
CSS部分
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 50px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
border: 1px solid black;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
JS部分
<link rel="stylesheet" href="./04-常用事件案例2-下拉菜单.css">
</head>
<body>
<body>
<nav class="nav">
<li>
<a href=""> 微博</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">留言板</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">电话</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="">邮箱</a>
<ul type="circle">
<li><a href="">私信</a></li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<script>
let a = document.getElementsByTagName("a")
let ul = document.getElementsByTagName("ul")
for (var i = 0; i < a.length; i++) {
a[i].onmouseover = function () {
let arr = this.parentNode.getElementsByTagName("ul")
arr[0].style.display = "block"
}
a[i].onmouseout = function () {
let arr1 = this.parentNode.getElementsByTagName("ul")
arr1[0].style.display = "none"
}
}
</script>
</nav>
</body>