2022.07.12 第三小组 陈迪 学习笔记
1、循环 4种循环
1、for语法
1.let i=0;初始化条件，当i=0时,循环开始,只走一次，第一次循环开始之前
2.i<10;判断条件，会和初始化条件配合循环的执行，
3.循环体，循环在重复做什么事情
4.i++ 循环条件.每次循环体执行完毕让i产生变化
面试题，for循环执行步骤
a.i可以看做一个局部变量
b.循环条件是可以根据实际情况更改的
c.当修改循环条件时，要确保循环可以向着终点前进
d.在开发中，尽量避免死循环，严重可能会导致死机
判断一个数在数组中是否存在，如果存在，返回下标
如果不存在，返回-1
当变量的作用域出现了重叠，不要出现重名
尤其是全局和局部
function exists(num,array){
let index=-1;
for(let i=0;i<array.length;i++){
if(array[i]==num){
index=i;
}
}
return index;
}
conlose.log(exists(100,arr));
//打印输出数组中所有元素
//长度：数组中有多少元素
//注意区分长度和下标（索引)
//console.log(arr[0]);
// console.log(arr[arr.length-1]);
//取出数组中的最后一个元素，不能是undefined
//把数组中的每个元素都操作一遍，数组的遍历（迭代)
let max=arr[0];
for(let i=o;i<arr.length;i++){
if(max<arr[i]){
max=arr[i];
}
}
conlose.log("最大值为：");
let arr=[1,2,3,4,5];
2、for in语法
for in语句，能做的事情较少，只能做便遍历操作
可以理解为a是arr数组的下标通过映射给a
for(let a in arr){
console.log(arr[a]);
}
3、while语法
let a=10;初始化条件
a<100循环判断条件
a++ 循环条件
while循环的执行流程
1 初始化条件
2 判断条件
3 执行循环体
4 自增
let a=10;
while(a<100){
conlose.log(a);
a++;
}
/*2022年公司10个人
每年以百分之十比重招人
哪一年公司人数突破100人
*/
function count(){
let a=10;
let year=2022;
while(a<100){
year+=1;
a=a*1.1;
}
return year+"年突破"+a;
}
console.log(count());
4、do while语法
do...while循环
let a 初始化条件
do做什么事
log循环体
a<100判断条件
a++循环条件
let a=10;
do{
console.log(a);
a++;
}while(a<100);
5、for循环与while循环比较
while循环 pk for循环
初始化条件不好控制 每个for循环的初始化条件隔离开的
循环条件不好控制 每个for循环的a++隔离开的
写函数时，返回值便于管理
6、while与do while比较
do...while先执行一次，在判断，无论条件成不成立，至少执行一次
while：如果条件不成立，一次都不走
7、死循环：
```html
for(;😉{}
while(true){}
do{}while(true);
```
2、JS内置函数
1、Array：
1.concat()连接
2.join()设置分隔符连接数组为一个字符
3.pop()删除最后一个元素
4.sort()排序，从小到大排序
*/
```js
let arr=[1,23,4,5];
let arr1=[2,3];
arr.pop();
arr.pop();
let a=ar.join(",");
arr.concat(arr1);
arr.sort();
console.log(arr);
```
2、Global:
1.isNaN():判断一个值是不是数字
2.parseFloat():把一个整数转换成小数
3.parseint():把一个小数转成整数，取整
4.number():把一个值转成number类型
5.string():把其他类型转成字符串110 120 119
3、string：
1.charAt(1):取出指定位置的字符
2.indexof('a'):判断指定的字符是否存在，如果存在，输出下标，如果不存在，输出-1
3.lastIndexof('a'):从后往前找
4.replace('a','b'):替换字符串
5.split('-'):根据-去拆分字符串，得到一个数组
6.substring(1,6):字符串截取
4、Math：
1.ceil()向上取整
2.floor()向下取整
3.round()四舍五入
4.random()随机 生成一个0-1的随机数
5.三角函数：tan() sin() cos() cot()
6.E pi(π)
5、Date
1.new Date():获取系统当前时间
2.getDate():返回日期的日
3.getHours():返回时间中的时
4.getMinutes():返回时间中的秒
5.gettime():获取系统当前时间
3、引用
let divs =document.getElementById('div1');
let divs =document.getElementsByClassmate();
let divs =document.getElementsByTagmate();
新写法：
let div=document.querySelector('#div1');//括号里是选择器，加#或者...
let divs=document.querySelectorAll('#div1');
div.innerText="我是加粗的";
console.log(div.dnnerText);
div.innerHTML="我是加粗的";
console.log(div.dnnerHTML);
<script>
let input=document.querySelector("input");
input.value="我是JS放进文本框的";
</script>
4、抓取
根据id去抓取HTML元素
let div1=document.getElementById("div1");
console.log(div1);
根据class抓取HTML元素，得到的是一堆元素
let divs=document.getElementByClassName("divs");
console.log(divs[0]);
根据tag抓取HTML元素，得到的是一堆元素
let divs=document.getElementByTagName("divs");
console.log(divs[0]);
新方法：
1.根据选择器去抓取一个元素(id)
let div = document.querySelector('.div2');
console.log(div);
2.根据选择器去抓取全部因素(class/tag)
let divs = document.querySelectorAll('.div1');
console.log(div);
let div = document.querySelector("div");
获取元素内部的文本，不会获取HTML标签
console.log(div.innerText);
获取元素内部所有内容，包括HTML标签
console.log(div.innerHTML);
5、事件
事件就是当我们和HTML标签元素发生交互时产生的行为
onclick:单击事件
ondblclick：双击事件
onblur：失去焦点
onfocus：获得焦点
onchange:改变
onload：加载
例1
<input type="text"onchange="change()">
<!--不要双引套双引，单套双或者双套单-->
<button type="button"onclick="jump()">按钮</button>
<select type="text">
<option>吉林省</option>
<option>辽宁省</option>
</select>
<script>
function jump(){
alert("按钮被点击了,,,");
}
function change(){
console.log("省份改变");
}
<script>
例2：
账号：
密码:
<script>
//需求：当用户名=admin.密码==123456时.提示登陆成功
//否则，提示用户名或密码错误
/*思路：给按钮添加单击事件
当点击按钮时，获取用户名和密码框输入的值.
然后进行判断，if()登录成功else用户名或密码错误；
*/
function jump(){
let text=document.querySelector("#username");
let password=document.querySelector("#password");
if(text.value=="admin"&&password.value =="123456"){
alert("登录成功")
}else{
alert("用户名或密码错误")//alert弹窗
}
}
</script>
例3
用户名：
作业
<select id="sheng" onchange="setshi()">
<option>--请选择省--</option>
<option value="jl">吉林省</option>
<option value="ln">辽宁省</option>
</select>
<select id="shi"onchange="setqu()">
<option>--请选择市--</option>
</select>
<select id="qu">
<option>--请选择区--</option>
</select>
</script>
function setshi(){
/*
思路：
1.抓取省的下拉菜单，知道你选择了哪个省
2.判断选择了哪个省
3.构建市的下拉菜单选项
4.抓取市的下拉菜单
区的注意事项：
1.初始状态没有选项
2.选择了省，区没有选项
3选择了省，选择了市，选择了区，切换了一下省
*/
let sheng=document.querySelector("#sheng").value;
//要保留市原有的内容
let shi=document.querySelector("#shi");
qu.innerHTML=null;
shi.innerHTML=null;
shi.innerHTML= '<option>--请选择市--</option>';
qu.innerHTML= '<option>--请选择区--</option>';
let html=shi.innerHTML;
let html1=qu.innerHTML;
if(sheng=="jl"){
//追加
html+='<option value="cc">长春市</option><option value="sp">四平市</option>';
shi.innerHTML=html;
}
if(sheng=="ln"){
html+='<option value="sy">沈阳市</option><option value="dl">大连市</option>';
shi.innerHTML=html;
}
}
function setqu(){
let shi=document.querySelector("#shi").value;
let qu=document.querySelector("#qu");
qu.innerHTML=null;
qu.innerHTML= '<option>--请选择区--</option>';
let html1=qu.innerHTML;
if(shi=="cc"){
html1+='<option value="cy">朝阳区</option><option value="jt">九台区</option>';
qu.innerHTML=html1;
}
if(shi=="sp"){
html1+='<option value="tx">铁西区</option><option value="td">铁东区</option>';
qu.innerHTML=html1;
}
if(shi=="sy"){
html1+='<option value="sq">市区</option><option value="hp">和平区</option>';
qu.innerHTML=html1;
}
if(shi=="dl"){
html1+='<option value="zs">中山区</option><option value="xg">西岗区</option>';
qu.innerHTML=html1;
}
}
</script>
心得体会：
今天是第一天学习，进度有点跟不上，而且基础差，跟上老师的进度有点困难，自己做题也有点吃力，不过幸亏有同学的帮助，让我可以完成老师布置的作业。还需要巩固复习今天学到的知识，找时间补上之前的课程，希望在接下来的学习中可以慢慢赶上进度，提高自己。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」