JavaScript基础

Att@ckxu2025-05-272025-05-29

介绍

脚本语言，可用于HTML和web，可以插入HTML页面

JS组成三部分

ECMScript：脚本程序设计语言(JavaScript的核心)

BOM：浏览器对象模型（Browser Object Model)

DOM：文档对象模型（Document Object Model)

JS功能：

表单的验证：

以往处理方式：表单提交一>服务端判断数据一>返回结果

使用JS处理方式：用户输入一>提交之前检查数据合法性一>获取到数据结果一>最终提交内容

运行在服务端：例如提供http服务、实现文件操作等
实现小游戏
实现网页特效：例如选项卡、幻灯片等

JS应用到页面中的三种方法：

行内应用

在HTML代码中嵌入JS代码，不使用script标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS行内应用</title>
</head>
<body>
  <input type="button" value="button" onclick="alert('hello JS');">
</body>
</html>

内部应用（内嵌）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS内部应用</title>
</head>
<body>
  <!-- script标签用于执行脚本代码，默认的type值为"text/javascript"，指定按照js的语法执行 -->
  <script type="text/javascript">
    // window.alert 等价于 alert
    window.alert('hello JS');
  </script>
</body>
</html>

外部应用（外联）
1. 先创建一个JS文件

alert('hello JS');

2. 在HTML文件中引用这个JS文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS外部应用</title>
</head>
<body>
  <script type="text/javascript" src="./hello.js"></script>
</body>
</html>

数据类型

var声明变量

console.log（）在控制台打印输出（右键网页源代码->控制台）

typeof 为JS中内置语句，用来查看变量保存的值的数据类型

数字

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>数字类型</title>
</head>
<body>
  <script type="text/javascript">
    // 变量为容器，容器中保存的数据类型是什么格式，就代表的是什么数据类型
    var a = 10; // 申明一个变量a，保存的值为数字类型
    // typeof 为 JS 中的内置语句，用来查看变量保存的值的数据类型
    console.log(typeof a);

    var height = 1.78;
    console.log(typeof height);

    var money = -1000;
    console.log(typeof money);
    // 数字类型的数据可以进行数学运算
    // = 号代表为赋值操作，将 = 号右侧的表达式运算的结果赋值给 = 号左侧的变量
    money = money + 2000;
    console.log("计算之后的结果为：",money);//，也可以是+

    // 进行除法运算
    console.log(money/31);

    // 当被除数为0时，结果无意义，显示为 Infinity
    console.log(money/0);

    // NAN 表示不是一个数字 Not A Number
    // "a" 不是数字类型的数据
    console.log("a" * 10);//NAN
    console.log(a * 10);
  </script>
</body>
</html>

字符串

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    // 使用双引号包裹
    var name = "爱新觉罗溥仪";
    // 使用单引号包裹
    var name2 = '溥仪';
    console.log(typeof name,typeof name2);
  </script>
</body>
</html>

//单双引号混合使用
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    var info = '"PHP"是世界上最好的语言！';
    console.log(info);
    var info2 = "'HTML'是超文本标记语言！";
    console.log(info2);
  </script>
</body>
</html>

//转义字符
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>字符串类型</title>
</head>
<body>
  <script type="text/javascript">
    // 使用双引号时，里面的单引号不借助转义字符
    var name = "My name's Ryan";
    console.log(name);

    // 使用单引号时，需要借助转义字符来输出单引号
    var name2 = 'My name\'s Ryan';
    console.log(name2);

    // 其他转义字符的使用
    var info = '勒索\t病毒通常使用非对称和对称加密算法组合的形式来加密文件，\n绝大部分勒索病毒均无法通过技术手段解密，一般无法溯源，危害巨大。';
    console.log(info);
  </script>
</body>
</html>

常见转义字符

布尔

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>布尔类型</title>
</head>
<body>
  <script type="text/javascript">
    // 手动指定变量的值为真，可以作为标识符使用
    var n1 = true;
    console.log(typeof n1); // boolean
    // 使用运算符获取布尔值
    var a = 10;
    var b = 20;
    // 判断a是否大于b，如果a大于b，结果为真，否则结果为假
    console.log(a > b); // false
  </script>
</body>
</html>

undefined

undefined类型只有一种值，就是undefined.。一般是申明变量没有初始化就为undefined

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>undefined</title>
</head>
<body>
  <script type="text/javascript">
    // 只是申明了a变量
    var a; // => undefined
    console.log(a); // undefined
    a = 10;
    console.log(a); // 10
  </script>
</body>
</html>

null

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>null</title>
</head>
<body>
  <script type="text/javascript">
    var a = null;
    console.log(null == a);
    console.log(typeof a);
  </script>
</body>
</html>

运算符

赋值

算数

+ 类似于Java的字符串拼接

自减运算符与之相同，类似于c语言

总结：一与++符号在前表示先运算后赋值；在后面表示先赋值后运算

字符串

比较

比较运算符得到的结果为布尔型

逻辑

三元

类似c语言

流程控制

if、for、switch、while、do while 都与c语言相同

事件

事件，即用户在客户端上进行某一个行为（操作），该行为会触发某一段代码的执行，就叫某某事件。例如用户点击某个地方，就显示一个弹窗，此操作就触发了某一个事件，执行了事件对应的事件处理程序。

事件处理程序即为JS代码

<html各种标签 属性 on事件名称="JS代码（事件处理程序）" />

事件处理程序

直接在HTML中编写JS代码

例：

点击就会触发alert弹窗

代码可读性较差

使用函数作为事件处理程序

触发hello函数

常用事件

页面事件

onload：当页面被载入之后所执行的代码，页面载入即浏览器已经分析出HTML结构（页面载入后就执行）
onresize：当页面的尺寸发生变化时所执行的代码

onload

针对 body 标签使用

<!DOCTYPE html>//这段代码的意义为当页面载入后打印id为content的内容“content”
<html lang="en">//要注意 此时script标签要在body标签下面
  <head>				//（代码从上往下执行，要先有content，才能调用）
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <div id="content">content</div>
  </body>
  <script>
    console.log(document.getElementById('content'))
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function init() {
        console.log(document.getElementById('content'));
      }
    </script>
  </head>
  
  <body onload="init()">
    <div id="content">content</div>
  </body>
  
</html>

onresize

当我们改变页面大小时会执行JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function init() {
        console.log(document.getElementById('resize'));
      }
    </script>
  </head>
  <body onload="init()" onresize="alert('hh')">
    <div id="resize">resize</div>
  </body>
</html>

焦点事件

对于表单中文本框使用

onfocus：获得焦点时触发
onblur：失去焦点时触发

onfocus

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

  </head>
  <body>
    <input type="text" value="aa" onfocus="getFocus()">
  </body>
  <script>
    function getFocus() {
      alert("获取焦点")
    }
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

  </head>
  <body>
    <input type="text" value="aa" onfocus="getFocus(this)">
  </body>
  <script>
    function getFocus(obj) {
      obj.value='';
    }
  </script>
</html>

onblur

失去焦点，可用来判断数据的合法性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

  </head>
  <body>
    <form action="" method="post" name="form">
      用户名<input type="text" name="username" id="username"><br/>
      密码<input type="password" name="password" id="password"><br/>
      <input type="button" name="button" value="提交" id="btn">
    </form>
    <script>
      //获取元素
      var form=document.forms['form'];
      var username=form.elements['username'];
      var password=form.elements['password'];

      //验证（用失去焦点验证）
      username.onblur=function () {
        var len=this.value.length;
        if (len ==0){
          alert("请输入用户名");
        }else if (len<4||len>18){
          alert("用户名长度为4-18位")
        }
      }
      password.onblur=function (){
        var len=this.value.length;
        if (len ==0){
          alert("请输入密码");
        }else if (len<4||len>18){
          alert("密码长度为4-18位")
        }
      }

    </script>
  </body>
</html>

当点击文本框后，再点击页面空白处，即为失去焦点（该代码为文本框）

点击事件

并不是针对按钮才可以使用，针对div、p等标签都可以使用

onclick：单击事件
ondblclick：双击事件，也会触发单击事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点击事件</title>
</head>
<body>
  <div style="border: 1px solid #333; width: 100px; height: 100px" onclick="clickme()" ondblclick="dblclick()">点击事件</div>
</body>
</html>
<script type="text/javascript">
  function clickme(){
    console.log('鼠标单击');
  }
  function dblclick(){
    console.log('鼠标双击');
  }
</script>

鼠标事件

onmouseover：鼠标滑入时触发的事件
onmouseout：鼠标滑出时触发的事件
onmousedown：鼠标被按下时触发的事件
onmouseup：鼠标的抬起事件
onmousemove：鼠标滑动事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <div style="border: 1px solid #333 ;width: 100px;height: 100px "onmouseover="over()" onmousemove="move()" onmouseup="up()"onmousedown="down()"onmouseout="out()">鼠标事件</div>
  <body>

  </body>
  <script !src="">
    function move() {
      console.log("鼠标滑动");
    }
    function up() {
      console.log("鼠标抬起");
    }
    function down() {
      console.log("鼠标按下");
    }
    function over() {
      console.log("鼠标滑入div");
    }
    function out() {
      console.log("鼠标滑出div");
    }

  </script>
</html>