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

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

作者:互联网

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数据类型

  1. JS的简单数据类型:
    数字(number):整数,正数,负数,小数
    布尔型(boolean):true or false (1 0)
    字符串(string):“aaa”,“some chinese”
    空(null):没有值
    undefined:未定义

  2. 变量(开发中使用变量 而尽可能少使用字面量,在 JavaScript 新版本中,推出了两个新方式代替 var 定义):
    let:变量用let声明,无法重复使用
    const:有let的特点,const声明的变量就是一个常量

  3. JS的复杂数据类型:
    使用数组函数

    使用new 关键字

    使用字面量的方式

  4. 函数:

  5. 弹窗:
    alert(); 警告弹窗

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

逻辑判断/流程控制

  1. 运算符:
    (1)算数运算符

    (2)赋值运算符

    (3)比较运算符

    (4)逻辑运算符

    (5)三元运算符(三目运算符)

例题实操

(1)求a和b的最大值

(2)求4个数的最大值,用三元运算符

注意!

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

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

字符串拼接

2.逻辑判断:
(1)if...else...
(面试题)

语法:

(2)switch...case
语法:

循环

  1. For循环:

    For循环的特殊写法:

    (1)For循环中的 i 可以看作是一个局部变量 (可以在for中使用)
    (2)循环条件是可以根据实际情况更改的
    (3)当修改循环条件时,要确保循环可以向着终点
    (4)开发中,要避免死循环
    例题实操:


  2. For in 循环(能做的事情较少,只能做遍历操作):
  3. While 循环:

    例题实操:

    (1)初始化条件
    (2)判断条件
    (3)执行循环体
    (4)自增
  4. do...while 循环:

注意!

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

总结

内置的函数

  1. Array:
    (1)concat() 连接
    (2)join() 设置分隔符连接数组为一个字符串
    (3)pop() 删除数组的最后一个元素
    (4)sort() 排序,从小到大排序
  2. 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