2022-07-12 第八组 于凤琳 javasript（js）学习笔记
上午：
四种循环
1.for循环
结构：
点击查看代码
for(let i = 0;i < 10;i++){
// 循环体
console.log(i);
}
for循环的特殊写法：
点击查看代码
for(;;){
}
for(let i = 0;;){
}
for(let i = 0;;i++){
}
for(let i = 0; i < 10;){
}
for循环的语法：
1.let i = 0;初始化条件，当i=0时，循环开始，只走一次，第一次循环开启之前初始化
2.i < 10;判断条件，会和初始化条件配合循环的执行，决定了循环什么时候停止
3.循环体，循环在重复做什么事情
4.i++ 循环条件，每次循环体执行完毕让i产生变化
面试题：for循环的执行步骤
a.i可以看做是一个局部变量
b.循环条件是可以根据实际情况更改的
c.当修改循环条件时，要确保循环可以向着终点前进去改变
d.我们在开发中，尽量避免死循环
当变量的作用域出现了重叠，不要出现重名的情况尤其是全局和局部，变量最好不好重名。
例题1.判断一个数在数组中是否存在，如果存在，返回它的下标
如果不存在，返回-1
点击查看代码
function exists(num,array){
let index = -1;
for(let i = 0;i < array.length;i++){
if(array[i] == num){
index = i;
}
}
return index;
}
console.log(exists(100,arr));
2.for in 语句
for in语句，能做得事情较少，只能做遍历操作。可以理解为a是arr数组的下标通过映射给a
点击查看代码
<body>
<script>
let arr = [1,2,3,4,5];
for(let a in arr){
console.log(arr[a]);
}
</script>
</body>
3.while循环
while循环的执行流程：
1.初始化条件
2.判断条件
3.执行循环体
4.自增
while循环与for循环的比较
while循环： 1. 初始化条件不好控制 2. 循环条件不好控制 3. 写函数时，返回值便于管理
for循环： a. 每个for循环的初始化条件都是隔离
例子1. 今年是2022年。今天我们公司有10个人，每年公司会以百分之10的比重招人。问：哪一年公司人数突破100人。
点击查看代码
function count(){
let year = 2022;
let sum = 10;
while(sum <= 100) {
sum *= 1.1;
year++;
}
return year + "年人数超过了100人，人数是：" + sum;
}
// 需求就是最后我要打印输出哪一年超过了100人，人数是：xxxx
console.log(count());
4.do...while循环
- let a 初始化条件
- log循环体
- a > 100判断条件
- a++循环条件
do...while和while的区别：
do...while先执行一次，再判断。无论条件是否成立，至少执行一次
while：如果条件不成立，一次都不走
点击查看代码
let a = 10;
while(a == 10){
}
do {
console.log(a);
a++;
} while (a > 100);
js内置的一些函数
Array数组中： 1.concat（）连接函数
2.join() 设置分隔符连接数组为一个字符串
3.pop()删除最后一个元素
4.sort()排序，从小到大排序
Globle整体的综合的：1.isNaN()
2. parseFloat：把一个整数转换成小数
3.pareInt;把一个整数转换成小数 不是四舍五入 就是把小数部分去掉
4.number（）把一个值转变成number类型
5.string（）把其他类型转变成字符串
string：1.charAt（1）：去除指定位置的字符
2.indexof('a')判断指定给的字符是否存在 如果存在返回下标 如果不存在返回-1
3.lastIndexof('a')从后往前找
4.replace（‘a’，‘b’）替换字符串
5.split（‘-’）根据-去拆分字符串，得到一个数组 与string对应
6.substring（1，6）字符串截取
Math：1.ceil（）向上取整 数变大了
2.floor（）向下取整 变小了
3.round（）四舍五入 变大了
4.random（）随机生成一个0-1的随机数 包括0不包括1 是小数
5.三角函数 tan()
6.E PT 两个常量
Date:1.new.Date()获取系统当前日期
2.getDate()返回时间中的日值是1-31
3.getHours（）返回时间中的小时0~23
4.getMinutes（）返回时间中的分
5.getSeconds()返回时间中的秒
6.get
下午：
js是网络脚本是写在网页上的要和html配合起来
想要找到网页上的div元素由于id是元素的唯一标识，只有通过id才能找到唯一确定的元素，要是通过其他途径（根据标签 name cass）找,找到的就是一堆div元素。
这时要找到div元素就要用到一个对象document（DOM文档）javas当中有两个大类一个是DOM(是document的文档对象模型) BOM。这节课主要讲DOM。整个网页都可以叫做文档，网页上所有的标签都可以叫做文档。通过id就可以找到网页上的标签。
以下就用三种方式来获取网页上的元素（让js与html有联系）
- 传统的写法
点击查看代码
<body>
<!-- 通过id去获取HTML元素 id是唯一标识只能获取一个 -->
<div id="div1">我是div</div>
<script>//具有返回值，返回值是div
let div = document.getElementById('div1');
console.log(div);
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
// 通过class类来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
let divs= document.getElementsByClassName('aaa');
console.log('divs');
//如果想要拿到一个那就用
//console.log(divs[0])；
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
// 通过tag标签来获取HTML元素，会有很多个成一个集合，我们把他们看成数组
let divs= document.getElementsByTagName('div');
console.log('divs');
//如果想要拿到一个那就用
//console.log(divs[0])；
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
//获取元素的属性
let div= document.getElementById('div1');
console.log(div.id);
</script>
</body>
- 新的写法
- 第一种
点击查看代码
<body>
<div id="div1" class="aaa">我是div</div>
<script>
//新写法 通过(标签，id#，类.)选择器来获取HTML元素,只能抓到**一个**元素
let div=document.querySelector('div');
console.log(div);
</script>
</body>
- 第二种
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div1" class="aaa">我是div2</div>
<script>
//新写法 通过(标签，id，类)选择器来获取HTML一堆元素
let div3=document.querySelectorAll('div');
console.log(div3[0]);
</script>
</body>
提出问题：拿到这些元素要干什么？
答：获取元素内部的文本，改变这个元素的内容 可以使用innerText和innerHTML来改变元素的内容
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div2" class="aaa">我是div2</div>
<script>
//获取元素后我们可以获得内部文本并修改元素文本的内容
let div=document.querySelector('#div1');
// div.innerText="我是js生成的";
console.log(div.innerText);
</script>
</body>
点击查看代码
<body>
<div id="div1" class="aaa">我是div1</div>
<div id="div2" class="aaa">我是div2</div>
<script>
//获取元素后我们可以获得内部文本并修改元素文本的内容,innerHTML认识标签，innerText不认识标签
let div=document.querySelector('#div1');
div.innerHTML="<b>我是加粗的</b>";
</script>
</body>
往这里放值
.假设有一个文本框，想要往文本框里放东西，应该怎么办？
1.我们得先拿到文本框（这里是通过标签选择器来获取）2.用标签引用value
点击查看代码
<body>
<input type="text" id="=username">
<script>
let input=document.querySelector('input');
input.value="我是js放进文本框的";
</script>
</body>
事件
事件就是当我们和HTML标签元素发生交互时产生的行为。
- 单机事件：onclick
- 双击事件：ondbclick
- 失去焦点：onblur一般出用在文本框中
- 获得焦点：onfocus一般出用在文本框中
- 改变： onchange 当元素内容发生改变的时候，所触发的事件
- 加载： onload 在元素加载的时候所触发的事件 一般加在body上
现页面上有一个按钮，有一个需求：点击按钮就会有一个弹窗添加事件单机事件
今天只讲一种添加事件的方式——在标签中添加onclick....
当设置了对应的事件之后会执行目标函数。
例子1：一点击按钮就会执行函数跳出一个弹窗
点击查看代码
<body>
<input type="text" id="=username">
<button type="button" onclick="">按钮</button>
<script>
function jump(){
alert('按钮被点击了');
}
</script>
</body>
点击查看代码
<body>
<input type="text" id="=username" onblur="valid()" onfocus="get()">
<!-- <button type="button" onclick="jump()">按钮</button> -->
<script>
// function jump(){
// alert('按钮被点击了');
// }
function valid(){
console.log('失去了焦点');
}
function get(){
console.log('获得了焦点');
}
</script>
</body>
例子3. onchange 当元素内容发生改变的时候，所触发的事件
例子4.onload 在元素加载的时候所触发的事件 一般加在body上
点击查看代码
<body onload="load()">
<!-- 不要出现双引套双引，要么双引套单引，要么单引号套双引号 -->
<input type="button" ondblclick="jump(1)" value="按钮">
<script>
function jump(a){
alert('按钮被点击了.....'+a);
}
</script>
</body>
例子5.需求：当用户名admin，密码123456时，提示登录成功！ 否则，提示用户名或密码错误
点击查看代码
<body>
<p>
账号：<input type="text" id="username">
</p>
<p>
密码：<input type="password" id="password">
</p>
<p>
<input type="button" value="登录" onclick="get()" >
</p>
<script>
// 需求：当用户名==admin，密码==123456时，提示登录成功！
// 否则，提示用户名或密码错误
/* 思路：给按钮添加单击事件
当点击按钮时，获取用户名和密码框输入的值，
然后进行判断，if()登录成功else用户名或密码错误！
15分钟！
*/
function get(){
let user= document.querySelector('#username').value;
let pass= document.querySelector('#password').value
if (user=="admin"&&pass==123456) {
alert('登录成功');
} else {
alert('用户名或密码错误');
}
}
</script>
</body>
例子6.需求：在用户名的文本框中输入用户名，
如果用户名为admin，则在span中显示用户名已被占用
否则，显示用户名可用！
点击查看代码
<body>
用户名：<input type="text" id="username" onblur="valid()">
<span></span>
<script>
/*
分析：
需要给文本框添加onchange，onblur，出发函数
需要向span中写入内容！innerText innerHTML
*/
function valid(){
let username = document.querySelector("#username").value;
let span = document.querySelector("span");
if(username == "admin"){
// 用户名已被占用
span.innerText = "用户名已被占用！"
}else {
// 用户名可用
span.innerText = "用户名可用！";
}
}
</script>
</body>
浙公网安备 33010602011771号