2022-7-12 javascript(2) 第七组 刘昀航
@
2022-7-12学习 第七组 刘昀航
前情提要
- switch..case的效率问题case的后面是字面量（常量）
- 不要强行使用Switch
- 函数命名规则：小驼峰式
一、for循环
for循环的执行步骤：
1.let i = 0;初始化条件，当i = 0时，循环开始
2.i<10；判断条件,会和初始化条件配合循环的执行
3.循环体，循环在做什么事
4.i++ 循环条件，每次循环体执行完毕让i产生了变化
for (let i = 0; i < 10; i++) {
console.log(i)
}
练习：
找出数组的最大值：
for (let i = 0; i < arr.length; i++) {
if(arr[i]>max){
max = arr[i]
}
}
console.log(max)
判断一个数在数组中是否存在，如果存在返回他的下标，如果不存在，返回-1
function ishave(num, arr) {
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (num == arr[i]) {
index = i
}
}
return index;
}
二、for in循环
1.for in语句，能做的事情很少，只能做遍历操作
2.可以为a是arr数组的下标通过映射给a
代码如下（示例）：
let arr = [1,2,3,4,5]
for (const key in arr) {
console.log(key)
}
三、while 和 do...while循环
1.while
1.初始化条件
2.判断条件
3.执行循环体
4.自增
代码如下（示例）：
let a = 0;
while(a<100){
a++;
console.log('哈哈哈')
}
练习：
问题：公司有10个人，每年增10%，哪一年突破100人，今年2022年
let people = 10;
let year = 0;
while(people<101){
people = people*1.1
year++;
}
console.log(2022+year+'年突破100人')
do... while
do{
console.log(a);
a++;
}while(a<100);
``
四、内置函数
Array:
1.concat()连接
2.join()设置分隔符连接数组为一个字符串
3.删除最后一个元素
4.pop()删除最后一个元素
5.sort()排序，从小到大排序
Global:
1.isNaN():判断一个值是不是数字
2.parseFloat():把一个整数转化为小数
3.parsetInt():把一个小数转化为整数(去掉小数点)
4.number():把一个值转成number类型
5.string():把其他类型转换为字符串
String:
1.charAt():取出指定位置的字符
2.判断指定的字符是否存在，如果存在返回下标
3.lastIndexOf('a'):从后往前找
4.replace('a','b'):把一个值转成number类型
5.split('-')根据-去拆分字符串，得到一个数组
6.substring(1,6):字符串截取
Math:
1.ceil():向上取整
2.floor():向下取整
3.round():四舍五入
4.ramdom()随机：生成一个0-1的随机数
Date:
1.new Date();获取系统当前时间
2.getDate():返回日期的日
3.getHours():返回时间中的2-23
4.getMinutes():返回时间中的分
5.getSeconds():返回时间的秒
五、抓取html元素的方法
- getElementById --通过id抓取元素
- getElementsByClassName --通过class抓取元素
- getElementsByTagName --通过标签名抓取元素
- querySelector --根据选择器抓取第一个元素
- querySelectorAll --根据选择器获取所有元素
六、事件
事件就是我们和html标签元素发生交互时产生的
- onclick:单击事件
- ondblclick：双击事件
- onblur:失去焦点
- onfocus:获得焦点
练习：
1.模仿登录案例
<p>用户名：<input type="text" id="username"></p>
<p>密码：<input type="password" id="password"></p>
<p><input type="button" onclick="yanzheng()" value="登录"></p>
<script>
function yanzheng(){
let username = document.getElementById('username').value
let password = document.getElementById('password').value
if(username == 'admin'&& password ==123456){
alert('登录成功！')
}
alert('登录失败！')
}
</script>
2.校验用户
用户名：<input type="text" id="username" onblur="tishi()">
<span id="aaa"></span>
<script>
function tishi(){
let username = document.getElementById('username').value;
let span1 = document.getElementById('aaa')
if(username == 'admin'){
span1.innerText = "该用户已存在！"
}else{
span1.innerText ="该用户可用"
}
}
</script>
3.三级联动
<body>
<select id="sheng" onchange="setShi()">
<option value="">---请选择省---</option>
<option value="jl">吉林省</option>
<option value="ln">辽宁省</option>
</select>
<select id="shi" onchange="setQu()">
<option value="">---请选择市---</option>
</select>
<select id="qu">
<option value="">---请选择区---</option>
</select>
<script>
function setShi() {
let sheng = document.getElementById('sheng').value;
let shi = document.getElementById('shi');
let qu = document.getElementById('qu');
let html = shi.innerHTML;
if (sheng == 'jl') {
html = '<option value="cc">长春市</option><option value="sp">四平市</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
shi.innerHTML = html;
}
if (sheng == 'ln') {
html = '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
shi.innerHTML = html;
}
qu.innerHTML="<option >--待选择--</option>"
}
function setQu() {
let shi = document.getElementById('shi').value;
let qu = document.getElementById('qu');
let html = qu.innerHTML;
if (shi == 'cc') {
html = '<option value="sy">双阳区</option><option value="jy">净月区</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
qu.innerHTML = html;
}
if (shi == 'sp') {
html = '<option value="yt">伊通满族自治县</option><option value="td">铁东区</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
qu.innerHTML = html;
}
if (shi == 'sy') {
html = '<option value="hu">皇姑区</option><option value="sjt">苏家屯区</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
qu.innerHTML = html;
}
if (shi == 'dl') {
html = '<option value="zx">中山区</option><option value="xg">西岗区</option>';
// 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
qu.innerHTML = html;
}
}
</script>
</body>
2022-7-12 javascript(2) 第七组 刘昀航的更多相关文章
- 2022-7-11 javascript学习 第七组 刘昀航
JavaScript是什么? 编程语言,脚本语言,依赖于某种容器来运行. JS是运行在浏览器上的,可以帮助我们去控制页面. Vue.js react.js jquery.js an ...
- 2022-7-9 html 第七组 刘昀航
一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...
- 2022-7-14 java_2 第七组 刘昀航
@ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...
- 2022-7-10 css 第七组 刘昀航
样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中 定义CSS样式的方式: 行内样式(内联样式) ·行内样式仅针对当前标签生效,如果当前的样式不需要复用,可以用行内样式 · ...
- 2022-7-13 java_1 第七组 刘昀航
@ 目录 前言 一.一些基本的指令 二.java 1.java的三个版本 2.java特点 3.运行一个java程序 三.java的数据类型 1.java基本数据类型 2.强制转换的原理 3.八种基本 ...
- JavaScript学习笔记(12)——JavaScript内置对象
1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...
- JavaScript学习笔记(12)——JavaScript自定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 12 JavaScript String对象 & Date对象
<script> var a = "string"; var b = new String("string"); var c = new Strin ...
- 19 01 12 javascript 定时器 封闭函数
定时器 定时器在javascript中的作用1.制作动画2.异步操作3.函数缓冲与节流 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setIn ...
随机推荐
- 关于Mysql索引的数据结构
索引的数据结构 1.为什么使用索引 概念: 索引是存储索引用于快速找到数据记录的一种数据结构,就好比一本书的目录部分,通过目录中对应的文章的页码,便可以快速定位到需要的文章,Mysql 中也是一样的道 ...
- 基本命令学习 -（3）Linux压缩和解压缩命令汇总
关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 前言 Linux下的压缩和解压缩工具比较多,有时经常记不住,这里给大家汇总一下,方便大家查阅. ...
- Python自定义排序及我实际遇到的一些题目实例
写在前面,本文主要介绍Python基础排序和自定义排序的一些规则,如果都比较熟悉,可以直接翻到第三节,看下实际的笔试面试题中关于自定义排序的应用. 一.基础排序 排序是比较基础的算法,与很多语言一样, ...
- .NET混合开发解决方案10 WebView2控件调用网页JS方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- 通过Go实现AES加密和解密工具
本文包含如下两个内容: AES加密介绍及实现原理 Go实现AES加密和解密工具 AES加密介绍及实现原理 AES( advanced encryption standard)使用相同密钥进行加密和解密 ...
- 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商
一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...
- windows 文件hash校验，字符串加密，base64转换工具
对下载的文件使用hash校验验证文件完整性 1 import hashlib 2 def md5(): 3 md5_value = hashlib.md5() 4 with open('C:\Inte ...
- 【多线程】线程礼让 Thread.yield()
线程礼让 Thread.yield() 礼让线程,让当前正在执行的线程暂停,但不阻塞 : 将线程从运行状态转为就绪状态 : 让cpu重新调度,礼让不一定成功!看CPU心情. 代码示例: /** * @ ...
- 103_Power Pivot 透视表中空白标签处理及百分比
焦棚子的文章目录 请点击下载附件 1.案例来源于不断变化的需求 事实表:销售表 维度表:城市表 销售表和城市建立多对一的关系 如图1: 图1 2.插入透视表 如图2: 图2 3.问题 1.销售表中,城 ...
- Hadoop: 单词计数(Word Count)的MapReduce实现
1.Map与Reduce过程 1.1 Map过程 首先,Hadoop会把输入数据划分成等长的输入分片(input split) 或分片发送到MapReduce.Hadoop为每个分片创建一个map任务 ...