首页 > 编程语言> > 2022-07-11~07.12 第四小组张家毓学习笔记 JavaScript

2022-07-11~07.12 第四小组张家毓学习笔记 JavaScript

2022-07-12 22:34:14 作者：互联网

JavaScript （JS）

JS概述

JavaScript：编程语言，脚本语言，依赖于某种容器来运行。

JS是运行在浏览器上的，可以帮助我们去控制页面。
Vue.js react.js jquery.js angular.js node.js（前端的服务器语言）

JS解释器：
火狐（spidermonkey）Chrom、node（v8）Safari（JavaScriptcore）cdge（chakra）

JS写在body结束标签的上方（确保在执行js的时候要加载的元素已经加载完了）

外部引入js：

JS数据类型

JS的简单数据类型：
数字（number）：整数，正数，负数，小数
布尔型（boolean）：true or false （1 0）
字符串（string）：“aaa”，“some chinese”
空（null）：没有值
undefined：未定义
变量（开发中使用变量而尽可能少使用字面量，在 JavaScript 新版本中，推出了两个新方式代替 var 定义）：
let：变量用let声明，无法重复使用
const：有let的特点，const声明的变量就是一个常量
JS的复杂数据类型：
使用数组函数

使用new 关键字

使用字面量的方式
函数：

弹窗：
alert(); 警告弹窗

            confirm();
            //let result = confirm(xxx)
            //有返回值的 确认按钮和取消按钮 代表true和false
            prompt(); 带有文本框的弹窗
            //有返回值 值就是文本框内输入的内容

            prompt("ENTER YOUR USERNAME","DESCRIPTION")
            //DESC 可有可无

逻辑判断/流程控制

运算符：
（1）算数运算符

（2）赋值运算符

（3）比较运算符

（4）逻辑运算符

（5）三元运算符（三目运算符）

例题实操

（1）求a和b的最大值

（2）求4个数的最大值，用三元运算符

注意！

+号的特殊性：除了可以进行加法计算之外，连接符
如果先入为主的认定 +号为连接符，那它就一直是连接符

‘- * / %’：可以进行类型转换，如果不行，结果为 NaN

字符串拼接

2.逻辑判断：
（1）if...else...
（面试题）

语法：

（2）switch...case
语法：

循环

For循环：

For循环的特殊写法：

（1）For循环中的 i 可以看作是一个局部变量 (可以在for中使用)
（2）循环条件是可以根据实际情况更改的
（3）当修改循环条件时,要确保循环可以向着终点
（4）开发中，要避免死循环
例题实操：
For in 循环（能做的事情较少，只能做遍历操作）：
While 循环：

例题实操：

（1）初始化条件
（2）判断条件
（3）执行循环体
（4）自增
do...while 循环：

注意！

do...while 和 while 的区别：do...while: 先执行一次，再判断，无论条件是否成立，都至少执行一次
while: 如果条件不成立，一次都不执行
死循环：

总结

内置的函数

Array：
（1）concat() 连接
（2）join() 设置分隔符连接数组为一个字符串
（3）pop() 删除数组的最后一个元素
（4）sort() 排序，从小到大排序
Global：
（1）isNaN() 判断一个值是否 “不是数字”
（2）parseFloat() 把一个整数转换成小数
（3）parseInt() 把一个小数转换成整数
（4）number() 把一个值转换成 number 类型
（5）string() 把其他类型转换成字符串
3.String：
（1）charAt() 取出指定位置的字符
（2）indexOf() 判断指定的字符是否存在，如果存在返回下标，如果不存在返回 -1
（3）lastIndexOf() 从后往前找
（4）replace() 替换字符串
（5）split() 拆分字符串，得到一个数组
（6）subString() 字符串的截取
4.Math：
（1）celi()向上取整
（2）floor()向下取整
（3）round()四舍五入
（4）random()生成一个零到一的随机数
（5）tan() sin cos cot
（6）E PI
5.Date：
（1）newDate()获取当前系统时间
（2）getDate()返回当前日期的日
（3）getHours()返回当前时间中的时（0~23）
（4）getMinutes()返回时间中的分
（5）getSeconds()返回时间中的秒
（6）getTime()获取系统当前时间
（7）getYear()获取年

利用Document抓取HTML元素

1.传统方法：

2.新方法：

事件 HTML标签互动

1.事件：事件就是当我们和HTML标签元素发生交时产生的行为

2.事件使用示例：
（1）

（2）做一个登陆界面：

注：xxx.value 代表的才是“值”

（3）判断 + innerHTML 使用示例：

例题实操

1.输入年月日判断这一天是这一年的第几天：
（1）if写法：

（2）switch写法：

2.省市区三级联动：

<body>
    <select  id="sheng" onchange="setshi()">
        <option value="">---请选择省----</option>
        <option value="jl"  >吉林省</option>
        <option value="ln" >辽宁省</option>
    </select>
    <select id="shi" onchange="setshi1()">
        <option>--请选择市----</option>
    </select>
    <select id="qu">
        <option>--请选择区----</option>

    </select>
    <script>
        function setshi(){
            let sheng=document.querySelector('#sheng').value;
            let shi=document.querySelector('#shi');
            let qu=document.querySelector('#qu')
            shi.innerHTML='<option>---请选择市----</option>'
            qu.innerHTML='<option>--请选择区----</option>'

            let htm=shi.innerHTML;
            if(sheng == 'jl'){
                //追加
                htm += '<option value="cc">长春市</option><option value="sp">四平市</option>';
                shi.innerHTML=htm;
            }
            if(sheng=='ln'){
                htm += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
                shi.innerHTML=htm;
            }
        }
        function setshi1(){
            let shi=document.querySelector('#shi').value;
            let qu=document.querySelector('#qu');
            qu.innerHTML='<option>--请选择区----</option>'
            let htm=qu.innerHTML;
            if(shi=='cc'){
                htm+='<option value="cyq">朝阳区</option><option value="ngq">南关区</option>'
                qu.innerHTML=htm;
            }if(shi=='sp'){
                htm+='<option value="fmq">丰满区</option><option value="gxq">高新区</option>'
                qu.innerHTML=htm;
            }if(shi=='dl'){
                htm+='<option value="jq">郊区</option><option value="zxq">中心区</option>'
                qu.innerHTML=htm;
            }if(shi=="sy"){
                htm+='<option value="shq">三环区</option><option value="ehq">二环区</option>'
                qu.innerHTML=htm;
            }
        }
    </script>
</body>

标签：11,qu,07,htm,JavaScript,innerHTML,JS,let,shi
来源： https://www.cnblogs.com/JJJyu/p/16471949.html

2022-07-11~07.12 第四小组 张家毓 学习笔记 JavaScript

JavaScript （JS）

目录

JS概述

JS数据类型

逻辑判断/流程控制

例题实操

注意！

循环

注意！

总结

内置的函数

利用Document抓取HTML元素

事件 HTML标签互动

注：xxx.value 代表的才是“值”

例题实操

2022-07-11~07.12 第四小组张家毓学习笔记 JavaScript