@


2022-7-12学习 第七组 刘昀航

前情提要

  1. switch..case的效率问题case的后面是字面量(常量)
  2. 不要强行使用Switch
  3. 函数命名规则:小驼峰式

一、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) 第七组 刘昀航的更多相关文章

  1. 2022-7-11 javascript学习 第七组 刘昀航

    ​ JavaScript是什么? 编程语言,脚本语言,依赖于某种容器来运行. JS是运行在浏览器上的,可以帮助我们去控制页面. Vue.js   react.js    jquery.js    an ...

  2. 2022-7-9 html 第七组 刘昀航

    ​ 一.基础认知 1.1 认识网页 网页的组成: 文字.图片.音频.视频.超链接 网页背后的本质:前端程序员写的代码 前端的代码通过什么软件转换成用户眼中的页面:浏览器转化(解析和渲染) 1.2 5大 ...

  3. 2022-7-14 java_2 第七组 刘昀航

    @ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...

  4. 2022-7-10 css 第七组 刘昀航

    ​ 样式通常存储在样式表中(先定义样式表),再把样式表添加到html元素中 定义CSS样式的方式: 行内样式(内联样式) ​ ·行内样式仅针对当前标签生效,如果当前的样式不需要复用,可以用行内样式 · ...

  5. 2022-7-13 java_1 第七组 刘昀航

    @ 目录 前言 一.一些基本的指令 二.java 1.java的三个版本 2.java特点 3.运行一个java程序 三.java的数据类型 1.java基本数据类型 2.强制转换的原理 3.八种基本 ...

  6. JavaScript学习笔记(12)——JavaScript内置对象

    1.Number Javascript只有一种数字类型,可以有小数也可以没有,也可以使用科学计数法. var z=123e-5; // 0.00123 JavaScript 不是类型语言.与许多其他编 ...

  7. JavaScript学习笔记(12)——JavaScript自定义对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 12 JavaScript String对象 & Date对象

    <script> var a = "string"; var b = new String("string"); var c = new Strin ...

  9. 19 01 12 javascript 定时器 封闭函数

    定时器 定时器在javascript中的作用1.制作动画2.异步操作3.函数缓冲与节流 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setIn ...

随机推荐

  1. 【CSAPP】Architecture Lab 实验笔记

    archlab属于第四章的内容.这章讲了处理器体系结构,就CPU是怎样构成的.看到时候跃跃欲试,以为最后实验是真要去造个CPU,配套资料也是一如既往的豪华,合计四十多页的参考手册,一大包的源码和测试程 ...

  2. Git (常用命令)

    某程序猿退休后决定练习书法,于是花重金买下文房四宝.某日,饭后突生雅兴,一番磨墨拟纸 并点上上好檀香.定神片刻,泼墨挥毫,郑重地写下一行:Hello World 斯~ 有被冷到吗哈哈哈 Git常用命令 ...

  3. springboot简单发送邮件介绍

    1.新建一个springboot项目 2.所需要的的jar包: <dependency> <groupId>org.springframework.boot</group ...

  4. Python版本共存、语法、变量和数据类型

    python多版本共存 主要是把两个版本的python解释器的所在路径都加入环境变量当中,之后重新命名python解释器文件名称就好 先拷贝一个启动程序,在进行改名就好 python.exe pyth ...

  5. 基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

    我喜欢在一个项目开发模式成熟的时候,使用代码生成工具Database2Sharp来配套相关的代码生成,对于我介绍的基于SqlSugar的开发框架,从整体架构确定下来后,我就着手为它们量身定做相关的代码 ...

  6. Java注解Annotaton

    1.三种基本的Annotaton @Override : 限定某个方法,是重写父类方法 , 该注解只能用于方法 @Deprecated : 用于表示某个程序元素 ( 类 , 方法等 ) 已过时 @Su ...

  7. 组织:IEEE

    电气和电子工程师协会(IEEE,全称是Institute of Electrical and Electronics Engineers)是一个美国的电子技术与信息科学工程师的协会,是世界上最大的非营 ...

  8. 大数据分析——sklearn模块安装

    前提条件:numpy.scipy以及matplotlib库的安装 (注:所有操作都在pycharm命令终端进行) ①numpy安装 pip install numpy ②scipy安装 pip ins ...

  9. java基础题(4)

    5.4接口和抽象类 5.4.1实现抽象方法 描述: 已知抽象类Base中定义了calculate方法,该方法的计算过程依赖于sum()和avg(),而后两个方法均为抽象方法.要求定义Base的子类Su ...

  10. mysql 开启binlog日志,恢复误删的表、数据、mysql库

    linux下开启mysql的binlog日志功能 1.配置mysql配置文件my.cnf(内容如下). #配置文件储存的位置log-bin=mysql-bin#5.7以及以上版本需要配置这一行(保证唯 ...