本文链接：https://blog.csdn.net/m0_65022512/article/details/126041843

前言

JavaScript的定义：JavaScript是一种基于浏览器的，基于面向对象的实现数据交互的脚本语言。

一、使用：

1：直接在页面：<script></script>

2：外部读入方式： <script src=”**.js”></script>

二、构成：

1.ECMAscript：负责JavaScript的语法部分（核心：重点）

2.BOM: Browse Object Model(浏览器对象模型：了解)

3.DOM: Document Object Model（文档对象模型：重点）

Document的方法：

方法名称	参数	作用	描述
getElementById	id名	根据id获取单个元素	Id不能重复
getElementsByName	Name的名称	根据name获取多个元素
getElementsByTagName	标签名	获取指定标签名的多个元素

三、JavaScript输出：

alert(弹框)
document.write(输出到页面)
console.log()输出到控制台 -----相当于 System.out.print
innerHTML innerText

四、语法：

数据类型：基本类型：number string boolean undefined

引用类型：object

变量： let 变量名= 值 ; var 变量名 = 值;

五、类型转型:

parseInt(“参数”)--> 将参数转换为整数，转换到不能转换位置，如果非数字开头则返回NaN（Not a Number: 不是一个数字！）

parseInt(“参数”)--> 将参数转换为小数，转换到不能转换位置，如果非数字开头则返回NaN（Not a Number: 不是一个数字！）

Number(参数)---》转换为数字格式，注意参数必须是数字格式，否则返回NaN

//isNan(参数)：判断参数是否是数字，如果是则返回false，不是则返回true

//isNan(参数)： 判断参数是否是数字，如果是则返回false，不是则返回true
console.log(isNaN("21"));//false
console.log(isNaN("abc"));//true
console.log(isNaN(12));//false

六、对话框：

1.window.alert(Object)

2. window.prompt：提示用户输入信息，返回一个string类型；

3.Prompt(参数1,参数2)：参数1是提示信息，参数2是默认值（可以没有）

4.Confirm（“提示信息”）该函数用于提示用户确认，返回boolean（确定：true，取消：false）

七、JS循环

let arr = [1, 2, 3, 4, 5];
        let arr1 = [true, 2.33, 'abc', "hello"];


        //for循环
        for (let i = 0; i < arr.length; i++) {
            document.write(arr[i]+"<br>");
        }
        document.write("for循环"+"<hr>");


        //for in循环
        for (let m in arr) {
            document.write(arr[m]+"<br>");
        }
        document.write("for in 循环"+"<hr>");


        //forEach 循环
        arr.forEach(value => {
            document.write(value+"<br>");
        });
        document.write("forEach循环"+"<hr>");

八、事件

文本框：test的事件：

键盘：按下：keyDown-----抬起：keyUp----- 敲击：keyPress

鼠标：获取焦点：onfocus-----失去焦点：onblur

下拉框：select：onchange()

九、定时器

setTimeout()--只执行一次

setInterval()--会重复执行

clearTimeout()--停止

十、JS正则的使用

例：

function fun() {
            //验证姓名： 必须是2位以上的中文： \u4e00-\u9fa5
            let par= /^[\u4e00-\u9fa5]{2,4}$/;
            //获取要验证的值
            let name=$("t2").value;
            //判断
            if(!par.test(name)){
                $("sp2").innerHTML="<font color='red' size='2'>姓名必须是2-4个汉字</font>";
            }else{
                $("sp2").innerHTML="<font color='green'>OK</font>";
            }
        }

十一、下拉框级联案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
         function $(id) {
            return document.getElementById(id);
         }
          function init() {
               //省的初始化
               $("prov").options.add(new Option("河北","hebei"));
               $("prov").options.add(new Option('山东','shandong'));
               $("prov").options.add(new Option('山西','shanxi'));
               $("prov").options.add(new Option('河南','henan'));
          }
          function f1() {
              //清空原有
              $("city").options.length=0;
            //改变省的选择时
               let name= $("prov").value;
               console.log(name);
               switch (name) {
                     case 'hebei':
                           $("city").options.add(new Option('石家庄','sjz'));
                           $("city").options.add(new Option('唐山','ts'));
                           $("city").options.add(new Option('保定','bd'));
                           $("city").options.add(new Option('秦皇岛','qhd'));
                         break;
                     case 'shandong':
                         $("city").options.add(new Option('济南','jn'));
                         $("city").options.add(new Option('青岛','qd'));
                         $("city").options.add(new Option('烟台','yt'));
                         break;
               }
          }
          function f2() {
                //清空原有
               $("area").options.length=0;
               var city=$("city").value;
               switch(city){
                   case 'sjz':
                       $("area").options.add(new Option('新华','jn'));
                       $("area").options.add(new Option('桥西','qd'));
                       $("area").options.add(new Option('裕华','yt'));
                       $("area").options.add(new Option('长安','yt'));
                       break;
               }
          }
    </script>
</head>
<body onload="init()">
          <select id="prov" onchange="f1()"></select>省
          <select id="city" onchange="f2()"></select>市
          <select id="area"></select>区
</body>
</html>

十二、var和let的区别：

var命令：变量可以在声明之前使用，值为undefined。

let命令：它所声明的变量一定要在声明后使用，否则报错。

//计数器i只在for循坏体内有效，再循环体外引用就会报错。
for (let i = 0; i < 5; i++) {
  console.log(i); //0 1 2 3 4 
}
console.log(i); //ReferenceError: i is not defined

for (var i = 0; i <10; i++) {  
    setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
         console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
      }, 0);
}
// 输出结果
//10   共10个 
// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8  9

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。