20220712 第二小组 罗大禹 学习笔记
作者:互联网
JavaScript
今日重点
- 循环
- 选取元素
- 事件
学习心得
- 使用循环时,一些小细节没有注意到,导致无法运行,通过检查代码,更改后,成功运行。
- 使用之前的知识点时,有些记不牢,需要查看笔记。要多加翻阅笔记加深印象
学习内容
重点1 四种循环
1. for循环(理解)
点击查看代码
语法:
for(let i =0;i<10;i++){
/*循环体*/
}
执行流程:
1.let i =0;初始化条件,当i=0时,循环开始 (初始化条件只走一次,在第一次循环开启之前)
2.i<10;判断条件,会和初始化条件配合循环的执行。决定了循环什么时候停止。若无法停止为死循环
3.循环体:循环在重复做啥事
4.i++ 循环条件,每次循环体执行完毕,可以使i产生变化
注意:
a.i可以看作一个局部变量,即只在该for循环里有用
b.循环条件是可以根据实际情况更改的
c.当修改循环条件时,要确保循环可以向着终点(满足判断条的)前进
d。我们在开发中,尽量避免死循环
例子:
<script>
let arr = [10,5,7,-5,100,257];
// 打印输出数组中的所有元素
// 数组有一个属性length-长度
// 长度:数组中有多少个元素
// 注意区分长度和下标(索引),最大下标=最大长度-1
for(let i = 0;i < arr.length;i++){
console.log(arr[i]);
}
// 取出数组中的最后一个元素,不能是undefined
console.log(arr[arr.length-1]);
</script>
for循环练习
点击查看代码
<script>
//练习:判断一个数在数组中是否存在,如果存在,返回它的下标
// 若不存在,返回-1
// 当变量的作用域出现了重叠,不要出现重名的情况
// 尤其是全局和局部,变量最好不要重名
let arr = [10, 5, 7, -5, 100, 257];
function cun(num,array){
let index = -1;
for(let i = 0;i < array.length;i++){
if(array[i] == num){
index=i;
}
}
return index;
}
console.log(cun(100,arr));
</script>
2. for in(了解)
点击查看代码
<script>
let arr = [1,2,3,4,5,];
// for in语句,能做的事情比较少,只能做遍历操作
// 可以理解为a是arr数组的下标通过映射给a
for(let a in arr){
console.log(a);
}
</script>
3.while循环(了解)
点击查看代码
语法:
let a = 10
while(a<100){
a++;
}
while循环
let a = 10; 初始化条件
a<100 循环判断条件
打印输出 循环体
a++循环条件
while循环的执行流程
1.初始化条件
2.判断条件
3.执行循环体
4.自增(循环条件)
while循环 pk for循环
初始化条件不好控制 每个for循环的初始化条件都是单独的
循环条件不好控制 每个for循环的循环条件都是隔离的
写函数时,返回值便于管理
<script>
/*练习
今天是2022年我们公司有10个人
每年公司会议百分之十的比重招人
问,哪一年,公司人数突破一百人
*/
function count(){
let year = 2022;
let sum = 10;
while(sum<=100){
sum*=1.1;
year++;
}
return year + "年人数超过了100人,人数是:" + sum ;
}
console.log(count());
</script>
4. do...while循环(了解)
点击查看代码
语法:
let a = 10;
do{
a++;
console.log(a);
}while(a > 100);
do...while循环的执行流程
1.let a 初始化循环
2.do 做啥事
3.log循环体
4.a>100判断条件
do...while和while的区别
do...while先执行一次再判断。无论条件是否成立,至少执行一次
while:如果条件不成立,一次都不走
死循环标准
点击查看代码
死循环:
for(;;){}
while(true){}
do{
}while(true);
重点2 选取元素(了解)
1. 老写法
点击查看代码
<script>
<div class="div1" id="div1">
<div class="div2" id="div2">我是div2</div>
</div>
//1.根据id去抓取html元素
let div1 = document/*文档*/.getElementById("div1");
console.log(div1);
//2.根据class抓取html元素,得到的是一堆元素
let divs = document.getElementsByClassName("div1");
console.log(divs[0]);
//3.根据tag(标签)抓取html元素,得到的依然是一堆元素
let divs = document.getElementsByTagName('div');
console.log(divs[0]);
</script>
2. 新写法
点击查看代码
</script>
<div class="div1" id="div1">
<div class="div2" id="div2">我是div2</div>
</div>
//1.根据选择器去抓取一个元素,抓取从上到下遇到的第一个
let div = document.querySelector('.div2');
console.log(div);
//2.根据选择器去抓取全部元素
let divs = document.querySelectorAll('div');
console.log(divs[1]);
let div = document.querySelector("div");
//获取元素内部文本(文字),不会获取html标签
console.log( div.innerText);
//获取元素内部的所有内容,包括HTML标签
console.log( div.innerHTML);
// 更改div里的内容
div.innerText = "我是JS来的";
div.innerHTML = "<h1>我是JS来的</h1>";(会识别标签)
</script>
3. 事件(理解)
1.事件
点击查看代码
onclick:单击事件
ondblclick:双击事件
onblur:失去焦点(一般用于文本框)
onfocus:获得焦点
onchange:改变(下拉框)
onlode:加载(一般放在body上)
例子:
//当设置了对应的事件后,会执行目标函数
<button type="button" onclick="jump('你好')">按钮</button>
<script>
function jump(a){
alert("被Q了" + a);
}
</script>
2. 事件练习
点击查看代码
<script>
// 需求:当用户名==admin,密码==123456时,弹出弹窗,提示登陆成功
// 否则用户名或密码错误
/*
当点击按钮时,获取用户名和密码框输入的值
然后判断,if()登陆成功else用户名或密码错误
*/
function am(){
let username = document.querySelector('#username').value;
let password = document.querySelector('#password').value;
if(username == "admin" && password == "123456"){
alert("登陆成功");
}else{
alert("用户名或密码错误");
}
}
</script>
4. 内置函数(了解)
点击查看代码
Array(数组):
1.concat()连接
2.join('-')设置分隔符连接数组为一个字符串
3.pop()删除最后一个元素
4.sort()排序,从大到小排序
5.reverse()对数组数据的倒序排序
Global(全局函数):
1.isNaN():判断一个值是不是数字
2.parseFloat():把一个整数转换成小数
3.parseInt():把一个小数转成整数,取整(砍掉小数)
4.number():把一个值转成number类型
5.string():把其他类型转成字符串110 120 119
String(字符串):
1.charAt():取出指定位置的字符
2.indexof():判断指定的字符是否存在,若存在返回下标,若不存在返回-1
3.lastindexof():从后往前找
4.replace('a','b'):替换字符串(把字符串中的a全换成b)
5.split('-'):根据横线去拆分字符串,得到一个数组
6.substring(1,6):字符串的截取(从下标为1的位置截取到下标为6的位置)
Math:
1.ceil()向上取整
2.floor()向下取整
3.round()四舍五入
4.random()随机,生成一个0-1的随机数
5.tan() sin() cos cot
6.E(e) PI(派Π)
Date:
1.new Date();获取系统当前日期
2.getDate():返回日期的日 1~31
3.getHours():返回时间的小时0~23
4.getMinutes():返回事件中的分
5.getSeconds():返回时间中的秒
6.getTime():获取系统当前时间
7.getYear():获取年
标签:20220712,arr,console,log,笔记,while,let,大禹,div 来源: https://www.cnblogs.com/ldydj/p/16472010.html