Js基础使用
【输出语句】
alert("输入警告标语")该代码用于在浏览器中弹出警告
console.log("输入想在控制台输出的信息")该代码用于在控制台输出信息
document.write("输入在网页页面所需信息")该代码用于在网页上输出内容
[输入语句]
用于需要在网页中弹出一个输入框时
prompt("请输入需要输入的内容")在网页中弹出确认框
confirm("输入需要输入的信息")✳小节案例
<script>
prompt("输入你的年龄")
confirm("你果真满了二十四岁吗")
alert("未满二十四岁禁止入内")
document.write("404 错误...")
console.log("Not Found")
</script>JS代码引入方式
<-- 行内式 -->
<-- onclick点击事件 -->
<button onclick="">请点我</button>在引号中加入 window.alert('')标签可以在点击后弹出内容
✳ eg.
<button onclick="window.alert('输入想要显示的内容')">请点我</button><-- 嵌入式 -->
<script>window.alert("内部样式")</script>嵌入式通常指的是将JavaScript代码直接嵌入到HTML文件中
<-- 链入式 -->
适用于将外部代码链入html中
<script src="./03-外链式.js"></script>JS基本语法
1.变量
[先声明后赋值]
1--声明变量（我们声明变量时应使用驼峰取名法，见名知意）
var boy;
var girl;
console.log(boy);
console.log(girl);如果控制台显示undefined则是表示该变量时未定义的
2--为变量赋值
boy="joker";
girl="lily";
console.log(boy);
console.log(girl);[声明的同时赋值]
var myAge=16;
var myHeight=185;
✳小节案例
var name= prompt('请输入你的名字')
console.log(name)
alert("欢迎"+name+'来到JavaScript世界')
document.write('希望'+name+'成为Javascript高手')2.let声明变量
→ 知识科普
let是Es6新引入的关键字，用来替代var关键字
(Es6指2015年推出的ECMAScript语法)
使用var声明变量，可以多次赋值，但是结果只与最后一个赋值有关。
var boyFriend="蔡徐坤"
var boyFriend="马嘉祺"
var boyFriend="黄明浩"
console.log(boyFriend)let不允许在一个代码块里有变量和他取一样的名字，但是允许修改同一个变量值。
let girlFriend="陈立农"
girlFriend="宋亚轩"
girlFriend="林彦俊"
console.log(girlFriend)一个花括号{}就是一个代码块
{ let girlFriend="糖果超甜"}3.const声明变量
在上一节可知let和var声明的变量可以改变
const声明变量不能改变，即常量
要记住书写的方式
正确写法
const a=3.14
console.log(a);错误写法
const a=3.1415926535
a=3.15
console.log(a);
const b；这个写法也是错误的
const必须在声明的时候就赋值
2.数据类型
1.数据类型分类
简单数据类型存储在栈内存中。
复杂数据类型在堆内存中，但是地址在栈内存
2.基本数据类型
[Boolean-布尔型]
let flag1=true;
let flag2=false;得出来的结果只有“true”和“false”
只有以上书写方式是正确的
[number-数字类型]
let age=18;
let date="0306"
console.log(age);
console.log(date);上面的是定义数字类型，下面的则是定义字符串，不要搞混了
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MAX_VALUE*2);//Infinity（无穷大）在定义一个最大值后再乘以二得出来的是无穷大
var a=3-"b"
console.log(a);得出来的结果为NaN，这个也属于数字类型，意思是非数字的
isNAN判断一个是否是数字
是则false 不是则true
[string-字符串]
let demo1="字符串"
let demo2=`字符串`
let demo3='字符串'
let demo4="老师说今天晚上不上课"
console.log("111\'222");有多种方法可以定义字符串
[undefined-未定义的]
表示声明变量未定义
let grade;
console.log(grade);[null-空]
var a=null;
console.log(a);3.数据类型检测
前面提到的isNaN 检测是否是一个非数字
typeof() 数据检测，用于检测数据的类型
在需要识别的数据前加上typeo再将需要识别的数据用括号括起来
eg
console.log(typeof("123"));这个识别出来的结果是字符串类型
其中有一个特殊的是null类型
console.log(typeof(null));这个得出类的是 object
boolean类型true，会在运算中转化为1
boolean类型false，会在运算中转化为0
演示：
console.log(2-true);//1
console.log(typeof(2-true));//number加号在这里有点特殊，在与字符串在一起时做拼接使用
console.log(2+"true");//2true
console.log(typeof(2+"true"));//string4.数据类型转换
将数据类型转化为布尔类型
Boolean()
字符串和数字都会转化为true
空字符串转化为false
打一个空格是true
数字类型转化为false
undefined转化为false
var a=Boolean("a")
console.log(a);//true
console.log(Boolean(123)); //true
console.log(Boolean("")); //false
console.log(Boolean(" ")); //true
console.log(Boolean("0")); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(Infinity)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false将数据转化为字符串类型
使用String（）或者toString()进行转化
let num2=String(num);
console.log(num2);将数据转化为数字类型
undefined转化为数据类型为NaN
Number（）用于将数据转化为数字类型
console.log(Number(123));//数字类型123
console.log(Number("123"));//字符串转化为数字类型123
console.log(Number(""));//转化为0
console.log(Number(" "));//转化为0 什么都没有的转化为0
console.log(Number(null));//0
console.log(Number(undefined));//undefined转化为数据类型为NaN
console.log(Number(false));//0
console.log(Number(true));//1
console.log(Number("true"));//NaN
console.log(Number("123."));//123.1
console.log(Number("123.a"));//NaN3.运算符
1.算数运算符
先定义两个变量
let a=10;
let b=20;加法运算：
console.log(a+b);//30减法运算：
let c=b-a;
console.log(c);//10乘法运算：
console.log(c*b);//200除法运算：
b=b/a;
console.log(b);//2取模运算 取余数：
console.log(26%5);//1
幂运算：
console.log(2**10);//1024
运算过程为//2*2*2*2*2*2*2*2*2*2自增运算：
（加号在前在后的算法是不一样的）
eg：
m=5;
n=++m;
console.log(m);//6
console.log(n);//6
m=5;
n=m++;
console.log(m);//6
console.log(n);//5
var x=1;y=2;
console.log(++x);//2
console.log(x);//2
console.log(y++);//2
console.log(y);//3自减算法：
（与加法一样，减号的先后运算方式也不一样）
eg：
q = 2;
p=--q;
console.log(q);//1
console.log(p);//1
q=2;
p=q--;
console.log(q);//1
console.log(p);//2
var d=10;s=10
console.log(++d);//11
console.log(d);//11
console.log(d--);//11
console.log(d);//102.字符串运算符和隐式转化
字符串运算：
加号遇到字符串，做拼接使用。
console.log(1+"1");//11
console.log(1+"null");//1null
console.log(null+"undefined");//nullundefined隐式转换：
当两个数据类型不同时，JS会按照既定的规则进行转换。
console.log(1+1);//2
console.log(1+null);//1
console.log(1+true);//2
console.log(1+false);//1
console.log("12"-0);
console.log(undefined*null);//NaN
console.log(Infinity ++);//Infinity3.赋值运算符
赋值：
let a=10;
let b = 20;
let c = a + b ;
加等于/减等于赋值+-
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;//200
console.log(a);
a /=b;
console.log(a);
a %=b;
console.log(a);
a **=b;
console.log(a);4.比较运算符
!=不等于
console.log(4!=5);//ture
console.log(4!=4);//false得出的结果是boolean类型的
==等于
console.log(4=="4");//ture===全等于
console.log(4==="4");//false在这里需要记清楚等号个数的作用
一个等号是赋值，两个等号是等于，三个等号是全等于
==和！=在比较不同数据类型时，会将数据转化为相同数据类型，
===和！==不会进行数据类型转换。
5.文字运算符
&& 逻辑与运算符 一假则假
|| 逻辑或运算符 一真则真
! 逻辑非运算符 真作假来假一真
console.log(3>2&&2>1);//true
console.log(3<2&&2>1);//false
console.log(3<2&&2<1);//false
console.log(3>2||2>1);//true
console.log(3<2||2>1);//true
console.log(3<2||2<1);//false
console.log(0||null);//false
console.log(0||4<3);//false
console.log(!true);//false
console.log(!(2>1));//false
console.log(!(2<1));//true6.三元运算符
条件表达式 ? 表达式1:表达式2
如果条件表达式为true则返回条件1的执行结果
如果条件表达式为false则返回条件2的执行结果
eg：
var age = prompt("请输入你的年龄")
var res = age >=18 ?"你已经是个优秀的成年人了":"小屁孩"
document.write(res)7.运算符优先级
小括号 > 一元运算符 >算数运算符 > 比较运算符 > 逻辑运算符 (逻辑与 > 逻辑或) > 赋值运算符 > 逗号运算符
eg：
let a = 3 > 5 && 2 < 7 && 3==4
console.log(a);//false
let b = 3 > 5 || 2 < 7 && 3==="3"
console.log(b);//false
let c = 2 == "2"
console.log(c);//true
let d = !c && ( b || a )
console.log(d);//false
4.流程控制
1.选择结构
1 .if语句
结构为：
if (条件表达式){代码段}
let age =prompt("请输入你的年纪")
if (age>=18) {
document.write("你可以进来"）2.if...else语句(双分支)
结构为：
if (条件表达式){代码段}lese{代码段2}
eg：
let age =prompt("请输入你的年纪")
if (age >=18) {
document.write("允许进入")
} else {
document.write("非法访问")
}3.3.if...else if...else语句(多分支)
结构为：
if (条件一) {
/ document.write("条件表达式一的结果")
} else if (条件二) {
} else {
document.write("条件表达式二的结果")
}
eg：
let ach =prompt("请输入你的成绩")
if (ach<20) {
document.write("退学不要读了")
} else if (ach<40&&ach>=20) {
document.write("留级")
} else if (ach<60&&ach>=40) {
document.write("成绩不合格，回去补考")
} else if (ach<70&&ach>=60) {
document.write("成绩合格")
} else if (ach<80&&ach>=70) {
document.write("成绩还行")
} else if (ach>=80&&ach<100) {
document.write("成绩优秀")
} else if(ach==100) {
document.write("可以拿奖学金")
}
数组
初识数组
数组是一种复杂数据类型。
用于讲一组集合在一起。
通过一个变量就可以访问一组数据。
数组之间通过逗号分隔
数组中的"搜索/下标"，是从0开始计算的。
声明数组
let class02 =["tom",'lily','tony']
打印数组
console.log(class02);
打印数组长度
console.log(class02.length);//3
打印数组中下标为x的元素
console.log(class02[0]);//'tom'
console.log(class02[1]);//'lily'
数组可以是任意类型的元素，例如字符串、数字、数组
let arr1 = [1,2,3,4,5,6]
let arr2 =['string',NaN,null,undefined,arr1]
console.log(arr2); 创建数组
1.以new Array()方式创建数组
var arr =new Array ();
console.log(arr);//Array(0)
var arr =new Array (5);
console.log(arr);//(empty*5)
arr =new Array ("tom",'lily','bob');
console.log(arr);
2. 使用数组字面量创建数组
var mood =['sad',,,,,,,'happy']
console.log(mood.length);//8
console.log(mood[7]);//happy
console.log(mood[6]);//undefined
console.log(mood[0]);//sad数组的基本操作
1.获取元素长度
数组名.length
2.修改数组长度
数组名.length =number
var arr = [0,1,2,3]
console.log(arr.length);//4
arr.length =5
console.log(arr); //[0,1,2,3,empty]
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[1];
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
arr[3] 40 sum+40 = 40+60=100
arr[4] 50 sum+50 = 50+100=150
arr[5] 60 sum+60 = 60+150=210
}
console.log(sum);//210
需求:
let score =[97,65,43,90,60,58,36,72,85,77]
找到班上的最高分和最低分
var max = min = score[0];
for(var i= 1;i< score.length; i++){
if(score[i] > max){
max = score[i]
}
if(score[i] < min){
min = score[i]
}
}
console.log(max);//99
console.log(min); //36 7.新增数组元素
push在数组后添加元素
let arr3 = [1,2,3,4]
arr3.push(5,6)
console.log(arr3); //[1,2,3,4,5,6]
unshift在数组前添加元素
arr3.unshift(-2,-1,0)
console.log(arr3);//[-2,-1,0,1,2，3,4，5，6] 需求:将数组中大于10的元素筛选出来
var arr4 =[0,-5,19,50,2,0,7,10,11,-6,8,2]
var arr5 =[]
for(let i =0;i< arr4.length; i++){
console.log(arr4[i]);
if(arr4[i]>10){
arr5.push(arr4[i])
}
}
console.log(arr5);
需求:数组去0,形成一个新数组
var arr6=[]
for(let i =0;i< arr4.length; i++){
console.log(arr4[i]);
if(arr4[i]!=0){
arr6.push(arr4[i])
}
}
console.log(arr6);
需求:将数组['一','二','三','四','五']反转,
反转后的数组为['五','四','三','二','一']
var arr7 =['一','二','三','四','五'];
var arr8 =[];
for(var i =0; i<arr7.length;i++){
arr8[arr7.length-1-i] =arr7[i]
}
console.log(arr8);二维数组
二维数组指的是数组元素的值是一个一维数组
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 (var i =0; i<arr1.length;i++) {
for(var j =0; j<arr[i].length;j++){
console.log(arr[i][j]);
}
}
二维数组倒置
var arr =[
['a','b','c'],
['d','e','f'],
['g','h','i'],
['j','k','l']
];
var res =[
[],
[],
[]
];
遍历行
for(var i =0; i<arr.length; i++){
遍历列
for(var j =0; j<arr[i].length;j++){
res[j][i] =arr[i][j]
}
}
console.log(res);需求:计算出每一位同学的总成绩
var stu =[
[88,70,60,60],
[66,46,60,80],
[90,70,88,93],
];
var sum =0;
for(var i =0; i<stu.length; i++){
var sum =0;
for(var j =0; j<stu[i].length;j++){
sum += stu[i][j]
}
console.log('第'+(i+1)+'位的学生的总成绩是'+sum);
}函数
初识函数
[函数定义]
函数用于封装完成一段特定功能的代码。
相当于将一条或多条语句组成的代码块包裹起来。
用户在使用时只需要关心参数和返回值，就能完成特定的功能，而不用了解具体的现实
[内置函数]
console.log(isNaN("number"));//true
console.log(parseInt('15.99'));//15[自定义函数]
提高代码的复用性，降低程序维护的难度。
[函数格式]
function name(params) {
}
function指这是一个函数语句
name是函数名
params是函数参数
{}内放函数的具体功能
[无参函数]
封装函数
function demo() {
console.log('我是一个函数');
}
使用函数
demo()
demo() [有参函数]
function sum (a,b){
console.log(a+b);
}
sum(1,2)
sum(88888,99999) 需求:定义一个函数total，调用函数时传入price价格、num数量 ，
就可以计算并在页面上打印函数的总价all。
function total (price,num){
var all =price *num;
document.write("商品的总价为"+all+"元")
}
total(9999,12)
total(6666,3)[函数的返回值]
函数的返回值是指函数在调用后获得的数据
在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任意类型的数据
在JS中使用return语句得到返回值并退出函数
{return 表达式}
function total01 (price,num){
all =price *num;
return all
}
console.log(total01(9999,12));需求:定义一个函数maxNum，求任意两数的最大值。
function maxNum(a,b){
if (a>b) {
console.log("最大值"+a);
}else{
console.log("最大值"+b);
}
}
maxNum(5,9) 需求：定义一个函数getSum，可求出任意数组中每个项的和
function getSum(arr){
let sum = 0;
for(let i = 0;i<arr.length;i++){
sum += arr[i]
}
//返回值
return sum
}
console.log(getSum([1,2,3,4,5]));
console.log(getSum([5,6,7,8,9,10,11,12,13])); 需求:判断数组是不是所有元素都是正数，是则返回true，不是则返回false
function number (arr1){
for(let i = 0;i<arr1.length;i++){
if(arr1[i]<0){
res = false;
break
}
}
return res;
}
console.log(number([1,2,3,4,-1,-2])); 需求:找出数组中元素为10的下标，有则返回该下标，没有则返回-1
function find(arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] == 10) {
return i;
}
}
return -1;
}
var arr = [1,2,3,4,5];
var arr1=[6,7,8,9,10];
console.log(find(arr));
console.log(find(arr1));
let arr=[1,2,3,4,5]//-1
let arr1 =[6,7,8,9,10]
function getIndex(arr){
声明变量存储下标
let index=-1
for(var i=0;i <arr.length; i++){ console.log(arr[i]);
if(arr[i]=== 10){index = i;
break
}
}
}
return index
console.log(getIndex(arr));//-1
var index= getIndex(arr1)
console.log(index);//4 [获取函数调用时传递所有参数]
function num (a,b){
console.log(a,b);
}
num(1,2) //1,2
num(1,2,3,4,5) //1,2
num(1) //1 undefined
...扩展运算符
function num1(...nums) {
console.log(nums);
}
num1(1,2,3,4,5) //[1, 2, 3, 4, 5]
num1(1,undefined,3) //[1, undefined, 3] arguments对象
在开发时，如果不确定形参的个数，可以不设置形参
在函数体中直接通过arguments对象获取函数调用时传递的实参
function num2() {
console.log(arguments);
console.log(arguments.length);
}
num2(1,2,3,4,5)
num2(1,2,3)
需求:定义一个sum函数
1.通过arguments对象来获取所有实参数
2.并获取具体的实参值
3.对所有实参进行求和
function sun(){
console.log(arguments);
var sum =0
for(var i =0; i<arguments.length;i++){
console.log(arguments[i]);
sum +=arguments[i]
}
console.log(sum);
}
sum(1,2,3)
sum(1,2,3,4,5)函数内外变量的作用域
[变量]
全局变量:在函数体外声明的变量或者在函数体内省略var关键字声明的变量
var a =10
function demo (){
console.log(a);//a为全局变量，在函数体内可以被访问
}
demo()
console.log(a);//a为全局变量，在函数体外也可以被访问
局部变量:在函数体内利用var关键字声明的变量
function demo1 (){
var b =10
console.log(b); 函数内部定义的局部变量b，可以在函数体内访问
c =20; c是省略var关键字声明的变量，为全局变量
console.log(c);全局变量c，可以在函数内部被访问
}
demo1() 10
console.log(b); b is notdefined 不可以在函数外访问局部变量b
console.log(c); 可以在函数外访问到全局变量c
块级变量:在ES6标准中，新增的let关键字声明的变量为块级变量
一个花括号{}为一个块级
if(true){
let sex = '男' let声明变量sex为块级变量
console.log(sex); 块级变量sex可以在{}内部被访问
}
// console.log(sex); 块级变量sex不可在{}外被访问
for(let i =0 ; i<5; i++){
console.log("循环内部"+i);
}
console.log("循环外部+i");i is not defined
【js三种作用域】
全局作用域:被全局变量所拥有:在{}外声明的变量
局部作用域:被局部变量所拥有:在函数内定义的变量
块级作用域:被块级变量所拥有:在分支语句或者循环大括号中定义的变量
可以访问到var声明的全局变量demo,
但是demo目前没有赋值，为undefined
console.log(demo);//undefined
let声明的全局变量//不允许在变量初始化前被访问console.log(test);
Cannot access 'test' before initializatio
var demo = 7
let test = 10 全局变量
function fun(){
console.log(demo);7
console.log(test);10
}
fun()
console.log(demo);7
console.log(test);10
[变量提升]
console.log(a);undefined
let a =20;
通过var声明的变量，在声明并赋值语句之前就可以访问
console.log(d);//undefined
var d =20;
因为变量提升，所以80-81的代码执行效果与85-87一样
var d;
console.log(d);
var d =20;函数进阶
[函数表达式]
封装一个sum函数，在函数内可以求得变量num1和变量num2的和
var fn = function sum (num1,num2){
在函数内部封装了一个打印语句
调用函数，就会执行打印语句
console.log(num1+num2);
}
sum(10,20) 30
fn(10,20)
var fn1 = function sum1(num1,num2){
在函数内部求了一个和
并将求得的和返回去
让函数外部可以拿到
return num1+num2;
}
console.log(sum1(10,20)); 30
console.log(fn1(10,20)); 30
匿名函数
var fn3 = function(num1,num2){
console.log(num1+num2);
}
fn3(10,20)
var fn4 = function sum1(num1,num2){
return num1+num2;
}
console.log(fn4(10,20)); 30
[箭头函数]
删除function关键字
在参数和函数体中间放上"=>"
var fn5 = (num1,num2) => {
console.log(num1+num2);
}
fn5(10,20)
当函数体只有一句话时，可以省略大括号
var fn6 = (num1,num2) => console.log(num1+num2);
fn6(10,20)
当函数体只有一个代码时，并且函数的执行结果就是函数的返回值
可以省略函数的大括号和return关键字
var fn7 = (num1,num2) => num1+num2;
console.log(fn1(10,20)); 30
当函数只有1个时，可以省略函数外部的小括号
var fn8 = num1 =>num1+num1
console.log(fn8(10)); 20回调函数
函数fn作为参数传递给参数cal
然后在函数cal中调用函数fn
此时，fn就是回调函数
function cal (num1,num2,fn) {
return fn(num1,num2)
}
console.log(cal(10,20,function(a,b){
return a+b
})); 30
console.log(cal(10,20,function(a,b){
return a*b
})); 200
//练习:调用cal函数，完成num1和num2的取模运算
console.log(cal(20,10,function(a,b){
return a%b
})); 0定时器函数
setInterval()
Interval:间隔,间隙
"时间间隔"一到，代码就会执行一次。
setInterval(function(){
console.log("该上课了");
},5000)
setTimeout()
用来指某个函数或某段代码在多少毫秒以后执行
setTimeout(function,time)
setTimeout(function(){
console.log("要抢票了");
},3000)
定时器函数属于异步代码
setTimeout指定的代码，必须等同步代码执行完成后执行
console.log(1);
setTimeout(function(){
console.log(2);
},0)
console.log(3); 132
console.log("A");
setTimeout(function(){
console.log("B");
},20)
console.log("C");
setTimeout(function(){
console.log("D");
},0) ACDB函数嵌套与作用域链
[函数嵌套]
var i =10;
function fn1 (){
var i =20;
function fn2 (){
function fn3 (){
console.log(i);
}
fn3()
}
fn2()
}
fn1()闭包函数
闭包 (close) :闭包是一种代码形式，内部函数访问外部函数的局部变量。
举例: js函数A中有一个函数B，函数B访问了函数A里面定义的局部变量，此时就产生了闭包。
变量所在的函数就是闭包函数，在这里，A就是闭包函数。
外部函数
function outer (){
外部函数定义的局部变量
let n =10
内部函数
function inner(){
内部函数要访问外部函数定义的局部变量
console.log(n);
}
inner()
}
outer() 闭包函数的作用:解决变量污染问题，让变量被函数保护起来。
let count = 0;
setInterval(function(){
console.log(count++);
},1000)
在这段代码中，count是一个很常用的变量名。
为了避免和其他位置的代码冲突，可以使用一个函数将上面的代码包裹起来
function fn () {
let count = 0;
setInterval(function(){
console.log(count++);
},1000);
}
内部函数setIntrval访问外部函数fn定义的局部变量count
function fn () {
let count = 0;
function add(){
console.log(count++);
}
setInterval(add,count)
}网页计算器
<!-- 以下是HTML部分 -->
<p>整数1: <input type="text" id="num1"></p>
<p>整数2: <input type="text" id="num2"></p>
<p>
>
<!-- onclick按钮点击事件 -->
<input type="button" value="相加" onclick="cal(add)">
<input type="button" value="相减" onclick="cal(sub)">
<input type="button" value="相乘" onclick="cal(mul)">
<input type="button" value="相除" onclick="cal(div)">
</p>
<p>结果: <input type="text" id="result"></p>
以下是JS部分
function add(num1,num2){
return num1+num2
}
function sub(num1,num2){
return num1-num2
}
function mul(num1,num2){
return num1*num2
}
function div(num1,num2){
if(num2===0){
alert("除数不能为0")
return ""
}
return num1/num2
}
function cal(){
通过ID"num1"得到HTML中名字叫"num1"的输入框的值
var num1 =document.getElementById("num1").value
var num2 =document.getElementById("num2").value
var result = document.getElementById("result")
result.value = func(num1,num2)
}
递归函数
递归函数是一个函数间接或直接的调用自身
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
循环写法1
function getSum1(n){
var sum =0
for(var i=0 ; i<=n;i++){
sum +=i
}
return sum
}
console.log(getSum2(5)); 15
循环写法2
function getSum(n){
var sum =0
for(var n ; n>=0;n--){
sum += n
}
return sum
}
console.log(getSum(5)); 15 递归写法
function getSum3(n){
当n=1时;
if(n==1){
return 1;
}
当前数组+比自己小1的数字
return n +getSum3(n-1)
}
console.log(getSum3(5));//15 需求:设置一个函数，求阶乘(循环写法)//传入一个n，返回n*(n-1)*(n-2)*...*1
需求:设置一个函数，求阶乘(递归写法)//传入一个n，返回n*(n-1)*(n-2)*...*1
求斐波那契数列(循环写法)
求斐波那契数列(递归写法)
循环写法一:
function fn(n){
var mulSum =1
for(var i=1 ; i<=n;i++){
mulSum *=i
}
return mulSum
}
console.log(fn(4));//24
循环写法二:
function fn2(n){
var mulSum =1
for(var n ; n>0;n--){
mulSum *= n
}
return mulSum
}
console.log(fn2(4));//24 递归写法:
function fn3(n){
设置终点
if(n===1){
return 1;
}
return n *fn3(n-1)
}
console.log(fn3(4));//24 斐波那契数列(每一项等于前两项之和)
1,1,2,3,5,8,13,21,34,55,89
斐波那契数列(循环写法):
function getValue(n){
var arr =[1,1]
for(var i=2;i<n;i++){
某一个等于前两个数之和
比如下标i=6（下标为6）的数是8+5（下标为5）
i是下标，arr[i]对应的是数组值
arr[i]=arr[i-1]+arr[i-2]
}
console.log(arr);
return arr[arr.length-1]
}
console.log(getValue(10)); 斐波那契数列(递归写法):
function getValue2(n){
设置终点
if(n===1 || n===2){
return 1
}
return getValue2(n-1)+getValue2(n-2)
}
console.log(getValue2(10)); 55对象
介绍对象
1.对象是什么:对象是一种复杂数据类型
(复杂数据类型的内容储存在堆内存中，地址存储在栈内存中)
2.对象作用: 以键值对的形式存储多个数据
需求: 存储一个人的信息 (姓名 年龄 性别)
1.使用简单数据类型
let name ="张三"
let age =30;
let sex ="男"
(好处: 阅读性高 弊端:冗余)
2.使用数组
var people=["张三",39,"男"]
好处:(一个变量存储多个数据 弊端:阅读性不高) 3.对象
let obj={
键: 值
name:"张三",
age:30,
sex:'男',
gfs:["小花","小美","小爱"],
sayHi:function(){
}
}
3.1 对象查询
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());
3.2 对象新增
obj.bf="李四"
console.log(obj);
3.3 对象修改
obj.bf="王五"
console.log(obj);
对于对象的属性，如果有这个属性，是修改属性值;如果没有这个属性，是新增。
3.4 对象删除
delete obj.age
console.log(obj);
3.5 对象遍历
遍历数组: for (let i=0; i<arr.lenght; 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]); 打印属性值
}Math对象
1.内置对象:由JS作者提前编写好的对象，里面储存了一些属性方法，直接使用即可。
2. Math数学对象,Date日期对象
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));
c.找最大/最小值:Math.max()/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之间的随机整数:Math.
console.log(Math.round(100*Math.random()));Math对象案例
当点击btn按钮时，会触发function函数
btn.onclick = function(){
生成0-1之间的随机数
var rand=Math.random()
设置抽奖范围/人数
var total =100;
设置抽奖等级
var level =0;
设置抽奖结果
var number =0;
抽奖过程
将number转化为一个0-100之间的整数
number = Math.round(Math.random()*100)
抽奖结果
if(number==1)
level =1;
else if(number==2 || number==3)
level =2;
else if(number>3 && number<8)
level =3
if(level){
alert("恭喜声 你获得了"+level+"等奖")
} alert("谢谢参与!")
}Date对象
时间戳:从1970年1月1日零时零分零秒到现在的毫秒数
以下三种写法都会得到时间戳
console.log(Date.now());
console.log(+new Date);
console.log(new Date().getTime());
获取年份
console.log(new Date().getUTCFullYear());
获取月份
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()); 获取内置Data对象
var date =new Date();
设置年份
date.setFullYear(2005)
date.setMonth(1)
date.setDate(21)
获取年份
var year=date.getUTCFullYear()
var month=date.getMonth()
var date=date.getDate()
打印年份
console.log(year);
console.log(month);
console.log(date);
document.write(year+"年"+month+"月"+date+"日"+"是我出生的日子") 参数time是自己的出生时间
function count(time){
得到当前时间时间戳
var nowTime = new Date()
得到过生日时间时间戳
var overTime = new Date(time)
将即将过生日的时间剪去现在的时间，得到一个生日倒计时
%1000 是将亳秒数转化为秒数
var times = (overTime-nowTime)/1000
console.log(times);
一天=24小数=60分钟=60秒
var day = parseInt(times / 60 / 60 / 24)//天数
console.log(day);//243
小时//%用于取余数，就是计算完之间70天之后，剩下的小时数
var hours = parseInt(times / 60 / 60 % 24)//小时
console.log(hours);//14
分钟
var mins = parseInt(times / 60 %60)//分钟
console.log(mins);//17
秒数
var sec = parseInt(times % 60 )//秒数
console.log(sec);//54
alert("距离生日还有"+day+"天"+hours+"小时"+mins+"分钟"+sec+"秒")
}Array对象
var course = ["web","java"]
push()在数组末尾添加一个元素
course.push("javaScript")
console.log(course); //["web","java","JavaScript"]
unshift() 在数组开头添加一个元素
course.unshift("计算机基础")
console.log(course); //['计算机基础', 'web', 'java', 'javaScript']
pop()删除数组中最后一个元素
course.pop()
console.log(course); //['计算机基础', 'web', 'java']
shift()删除数组第一个元素
course.shift()
console.log(course);//['web','java']
splice (start,deleteCount)
var arr =[1,2,3,4,5,6,7]
arr.splice(3,2) //从下标为3的数(4)开始， 删掉后面2个数字
console.log(arr); //[1,2,3,6,7]
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]
reverse():颠倒数组中元素的索引
var arr1 =[1,2,3,4,5,6,7]
arr1.reverse()
console.log(arr1); //[7, 6, 5, 4, 3, 2, 1] sort
升序排序
var arr2 =[19,45,20,0,18,73]
arr2.sort(function(a,b){
return a-b
})
console.log(arr2); //[0, 18, 19, 20, 45, 73]
降序排序
var arr3 =[19,45,20,0,18,73]
arr3.sort(function(a,b){
return b-a
})
console.log(arr3); // [73, 45, 20, 19, 18, 0]String对象
创建字符串对象
var str=new String("apple")
console.log(str); // ('apple')
访问字符串长度
console.log(str.length); //5
数据类型检测
console.log(typeof(str)); //object
var str1="banana"
console.log(typeof(str1)); //string
根据字符串返回索引
indexOf() 返回字符串中首次出现的索引，没有则返回-1
lastIndexOf(element) 返回字符串中最后一次出现的索引，没有则返回-1
var str="helloworld"
console.log(str.indexOf("o")); //4
console.log(str.lastIndexOf("o")); //6
根据索引返回字符串
chatAt
console.log(str.charAt(7)); //'r' 字符串截取
slice (start)
console.log(str.slice(5)); //"word"
slice(start,end) 从start的下标截取到end的下标
console.log(str.slice(1,4)); //"ell"
console.log(str); //helloword 截取不会改变原数组
字符串连接
concat()
var str1="hello"
var str2=",world"
console.log(str.concat(str2)); //helloword,word 大小写转换
toUpperCase 转化为大写
tolowerCase 转化为小写
console.log(str1.toLocaleUpperCase()); //HELLO
console.log("HELLO".toLowerCase()); //hello
替换
replace(str1,str2)
console.log(str); //helloworld
console.log(str.replace("world","JS")); //helloJS
字符串分隔(将字符串转化为数组)
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']
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
