1. 简单的dom操作
//defer
//async
// 都是在属于异步加载,要配合src属性一起使用
// defer 页面html解析的时候,遇到script标签,同时加载与解析,页面加载完成后,再执行js
// async 页面html解析的时候,遇到script标签,同时加载与解析,若js加载完成后立即执行
//现有元素,再获取元素
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn");
//获取与设置操作
oBtn.onclick = function () {
//获取
var strVal = oTxt.value;
console.log(strVal);
console.log(typeof strVal);
//设置操作
oTxt.value = "大家好上午好!"
}
2. 简易计算器
<input id="n">
<select id="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input id="m">
<button id="btn">=</button>
<input id="res">
//1.定义一个计算的方法
function calc(num1, num2, opt) {
var res;//用于接受结果
switch (opt) {
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
case "%":
res = num1 % num2;
break;
default:
break;
}
return res;
}
//2.获取需要的dom元素
var oN = document.getElementById("n");
var oOpt = document.getElementById("opt");
var oM = document.getElementById("m");
var oBtn = document.getElementById("btn");
var oRes = document.getElementById("res");
oBtn.onclick = function () {
var num1 = Number(oN.value);
var num2 = Number(oM.value);
var str = oOpt.value;
oRes.value = calc(num1, num2, str);
}
3. 递归
//1.什么是递归?
// 函数自己调用自己,要有临界点(结束条件)
// function fn() {
// console.log("1111");
// fn()
// }
// fn();
//5的阶乘是多少?
function fn(n) {
if (n == 1) {
return 1;
}
return n * fn(n - 1);
}
console.log(fn(5));;
// 1, 计算1+2+3+…+100的和
function fn1(n) {
if (n == 1) {
return 1
}
return n + fn1(n - 1)
}
console.log(fn1(100));
// 2, 输入一个n,打印n个hello world
function fn2(n) {
console.log("hello world");
if (n == 1) {
return;
}
fn2(n - 1)
}
fn2(5)
练习:(兔子数)
月份
1个月大小 2个月大小 3个月大小 4个月大小 总计
1 1 0 0 0 1
2 0 1 0 0 1
3 0 0 1 0 1
4 1 0 0 1 2
5 1 1 0 1 3
6 1 1 1 1 4
7 2 1 1 2 6
8 3 2 1 3 9
9 4 3 2 4 13
10 6 4 3 6 19
.
.
20 ?
19=13+6
6=4+2
fn(n)=fn(n-1)+fn(n-3)
function fn(n) {
if (n == 1 || n == 2 || n == 3) {
return 1
}
return fn(n - 1) + fn(n - 3);
}
// console.log(fn(20)); //872
console.log(fn(100)); //872
// console.log(fn(20)); //872
4. 数组
// empty
//一. 什么是数组?
// 它是就是一组数据,js的数组的成员可以是任意类型,它是可以动态扩容
// var arr=[11,"11",true,null,[]]
//二.数组的创建方式?
//1).构造函数创建数组
// 如果Array里有一个参数,并且是数值类型,表示数组的初始值长度
// 如果有2个参数,那就是数组的成员有2个
var arr = new Array(10);
console.log(arr);
//2).数组字面量的表达式 (推荐语法)
var arr = [];
arr.length = 10;
console.log(arr);
//3).???
var arr = Array(10);
console.log(arr);
//三.数组有一个length属性
// length属性是可以被修改的
var arr = [11, 22, 33, 44];
arr.length = 1;
arr.length = 4;
console.log(arr);
//四.数组可以通过下标进去取值与赋值
// 下标,又叫做索引,索引是从0开始
// 0 1 2 3
var arr = [11, 22, 33, 44];
// 根据下标获取值
console.log(arr[2]);
// 根据下标修改值
arr[2] = "刘德华";
console.log(arr);
//五.数组的方法
//1. pop() 删除数组的最后一位,返回被删除的元素,它会改变原来的数组
var arr = [11, 22, 33, 44];
var res = arr.pop();
console.log(arr);
console.log(res);
//2.push() 往数组的最后位置添加元素(1或多个),返回数组的新长度
var arr = [11, 22, 33, 44];
var res = arr.push("王响", "游超");
console.log(res);
console.log(arr);
//3.shift() 删除数组的第一位成员,返回被删除的成员
var arr = [11, 22, 33, 44];
console.log(arr.shift());
console.log(arr);
//4.unshift() 往数组的第1个位置,添加1个或多个成员,返回数组的新长度
var arr = [11, 22, 33, 44];
console.log(arr.unshift("AA", "BB"));
console.log(arr);
//5.sort 排序,它默认是根据ASCII码,进行比较
// 0-9 48-57
// a-z 97-122
// A-Z 65-90
var arr = [2, 9, 7, 11, 4, 6, 8,];
arr.sort(function (a, b) {
// return a - b; 升序
return b - a; //降序
})
console.log(arr);
//6.reverse() 倒序
var arr = ["AA", "BB", "CC", "DD"];
arr.reverse()
console.log(arr);
//7.slice() 它包含开始位置,不包含结束位置
// 0 1 2 3 4
var arr = [11, 22, 33, 44, 55]; //33-44
var res = arr.slice(2, 4);
console.log(res);
console.log(arr);
//8.splice()
// 2个删除,删除 返回被删除的元素,并且是一个新数组
var arr = [11, 22, 33, 44, 55, 66];
console.log(arr.splice(3, 1));
console.log(arr);
// 3个参数, 第2个参数是0,插入 ,1或1以上,替换
var arr = [11, 22, 33, 44, 55, 66];
arr.splice(3, 0, "张巧", "易玲");
console.log(arr);
//1或1以上,替换
var arr = [11, 22, 33, 44, 55, 66];
arr.splice(3, 2, "邹老师");
console.log(arr);
//9.concat();合并 会返回一个新的数组
var arr1 = [11, 22, 33];
var arr2 = ['AA', "BB", 'CC'];
var arr3 = arr1.concat(arr2, "邹老师", 99)
console.log(arr3);
//10.join() 默认是 用 ","隔开,返回字符串
var arr = [2022, 12, 12];
// 2022-12-12
// 2022/12/12
console.log(arr.join());
console.log(arr.join("-"));
console.log(arr.join("/"));
//总结:会改变原来数组的方法有哪些?
//会改变:pop,push,shift,unshift,sort,reverse,splice
//不改变:slice,concat,join()
//实现数组的拷贝(浅)
var arr = [11, 22, 33];
//方式1 concat()
var arr1 = arr.concat();
console.log(arr1);
console.log(arr);
//方式2 slice()
var arr = [11, 22, 33];
var arr1 = arr.slice(0)
console.log(arr1);
数组的练习1
var arr = [];
arr.length = 10;
for (var i = 0; i < arr.length; i++) {
arr[i] = parseInt(Math.random() * 100)
}
console.log(arr);
console.log("----------------------");
//数组的遍历方式有2种(目标)
//for
var arr = [11, 22, 33, 44, 55];
arr.length = 20
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//for..in
var arr = [11, 22, 33, 44, 55];
arr.length = 20
console.log(arr);
for (var key in arr) {
console.log(key, arr[key]);
}
//for和forin的区别?
// for是根据数组的length长度,来决定遍历的次数
// forin 是根据内容来遍历次数
// forin还能遍历,下标不是数值,for只能遍历下标为数值
//数组是特殊的对象
var arr = [11, 22, 33];
arr["aa"] = 88;
arr["bb"] = 99;
console.log(arr);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
for (var key in arr) {
console.log(key, arr[key]);
}
数组的练习2
// 1, 求数组中所有元素的和
var arr = [11, 22, 33, 44, 55];
var result = 0;//用于统计结果
for (var i = 0; i < arr.length; i++) {
result += arr[i];
}
console.log(result);
// 2, 让数组中的元素交换位置（重要）
var arr = [11, 22];
var temp = arr[0];// 11
arr[0] = arr[1]; // [22,22];
arr[1] = temp;
console.log(arr);
// 3, 求数组的最大数和最小数（重要）
var arr = [3, 7, 5, 2, 8, 6];
//假设第1个事最大的
var max = arr[0];
var min = arr[0];//假设第一个是最小的
for (var i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
if (min > arr[i]) {
min = arr[i]
}
}
console.log(max);
console.log(min);
// 4, 求数组的最小数的下标（重要）
var arr = [3, 7, 5, 2, 8, 6];
var min = arr[0];//假设第一个是最小的
var minIndex = 0;
for (var i = 1; i < arr.length; i++) {
if (min > arr[i]) {
min = arr[i];
minIndex = i;
}
}
console.log(minIndex);
// 1, 不改变原数组, 取出数组[3,2,4,5,8,6,3,9]中的[5,8,6].
var arr = [3, 2, 4, 5, 8, 6, 3, 9]; // 3 6
console.log(arr.slice(3, 6));
// 2, 在数组[1,2,3,4,6,7,8]中对应的位置插入5, 变成[1,2,3,4,5,6,7,8]
var arr = [1, 2, 3, 4, 6, 7, 8];
arr.splice(4, 0, 5)
console.log(arr);
// 3, 将数组 ["我","是","一","只","笨","鸟"] 改成
// ["我","是","一","只","聪","明","鸟"], 并打印出: "我是一只聪明鸟"
var arr = ["我", "是", "一", "只", "笨", "鸟"];
arr.splice(4, 1, "聪", "明");
console.log(arr.join(""));
// 4, 删除数组[20,23,21,34,54,55,32]中的倒数第二个和倒数第三个元素
var arr = [20, 23, 21, 34, 54, 55, 32];
arr.splice(4, 2);
console.log(arr);
// 1, 将数组[1, 5, 6, 3, 2, 8, 9, 4] 降序排序
var arr = [1, 5, 6, 3, 2, 8, 9, 4];
arr.sort(function (a, b) {
return a - b;
})
console.log(arr);
// 2, 请将数组[1,46,74,3,5,5]中的元素右移1位
var arr = [1, 46, 74, 3, 5, 5]
arr.unshift(arr.pop());
console.log(arr);
// 3, 插数:在数组[1,46,74,3,5,5]的下标为2的位置插入一个数字8，
// 结果为[1,46,8,74,3,5,5]
var arr = [1, 46, 74, 3, 5, 5];
arr.splice(2, 0, 8);
console.log(arr);
5. css(伪类empty的应用)
.box {
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
color: white;
display: block;
}
.box:not(:empty) {
background-color: red;
}
<div class="box"></div>
效果:
作业:
// 2, 写个函数计算所有传入参数相乘的结果(参数数量不定)
function fn() {
var res = 1;
for (var i = 0; i < arguments.length; i++) {
res *= arguments[i];
}
return res;
}
console.log(fn(1, 2, 3, 4, 5));
// 3, 写个函数实现加减乘除运算(两个操作数, 一个操作符)
function calc(num1, num2, opt) {
var res;//用于接受结果
switch (opt) {
case "+":
res = num1 + num2;
break;
case "-":
res = num1 - num2;
break
case "*":
res = num1 * num2;
break;
case "/":
res = num1 / num2;
break;
case "%":
res = num1 % num2;
break;
default:
break;
}
return res;
}
// 4, 写个函数实现n的阶乘
function fn4(n) {
var res = 1;
for (var i = 1; i <= n; i++) {
res *= i;
}
return res;
}
// 5, 找出0-100之间7的倍数，和包含7的数字
function fn5() {
for (var i = 0; i <= 100; i++) {
if (i % 7 == 0 || i % 10 == 7 || parseInt(i / 10) % 10 == 7) {
console.log(i);
}
}
}
fn5();
复习:
1.什么是js?
与网页进行交互的脚步语言,有一定的逻辑性
2.js的组成有哪些?
ECMASCRIPT,DOM,BOM 3.js变量命名规则?
1).只能是数字,字母,下划线,$
2).不能以数字开头
3).不能是关键字,保留字
4).严格区分大小写
5).驼峰命名法
大驼峰:类,构造函数
小驼峰:变量,形参
6).语义化 4.声明变量使用什么关键字?变量的默认值是什么?
var / undefined 5.js的数据类型有哪些? (提示:目前有7个)
值类型: string,number,boolean,undefined,null,object,bigint
引用类型: object(Array,Function,Date..)
6.检查基本数据类的关键字是什么?
typeof
7.说一说什么是强制转换与隐式换行?
强制转换:
String(), Number(), Boolean(), parseInt(), parseFloat()
隐式转换
-,*,/,%,==
8.其他类型转bool类型的规则?
1).非空字符串为true,空字符串为false
2).非0为true,0和NaN为false
3).object始终为true,只要不为null
4).null和undefined始终为false
9.进制转换的方法有哪些,分别是什么?
toString()
parseInt()
10.js的三大流程是什么?
顺序,分支,循环
11.js的break和continue的区别?
break 可以用在分支和循环中,中断整个循环
continue
只能在循环中实现,表示结束当次循环,不会结束整个循环
关键字后面的代码不会被执行
12.什么是函数?
将特定的代码片段,抽取成员一个独立运行的实体,就是函数
13.函数的好处?
提高代码的可读性
重复使用,提高效率
方便维护
14.创建函数的方式有几种?分别语法是什么? 有3种,分别是
普通函数 function 函数名称(){}
匿名函数 var fn=function(){}
构造函数创建函数 var fn=new Function("参数","代码体");
15.函数的6个细节分别是什么?
1.必须使用function关键字
2.函数要遵循变量命名规则
3.形参
是一个局部变量,是一个占位,它的默认是undefined,只能函数内部使用
4.return 该关键字在函数中,可有可无,如果没有,函数默认返回是undefined,它还可以返回指定结果,并且终止函数
5.实参 是一种具体值,在函数调用的时候,才能确定形参的类型
6.函数调用 ,函数名称+小括号
16.说一说arguments是什么?有什么作用?
1.它是一个伪数组,它可以通过下标取值,它也有length属性
2.它只能在函数内部出现,并使用
3.它用于动态接受参数
17.作用域和作用域链的区别?
作用域: 函数的作用范围,分为:全局作用域和局部作用域
作用域链: 访问某个变量的是,优先在当前的函数内部查找,如果内部函数没有
就向外部函数查找,如果外部函数没有,就像外出...就开始向全局找,如果全局(window)
没有就报错
18.js特殊的类型和特殊的值分别是哪些?
null和undefined
NaN
