JavaScript介绍

JavaScript是弱类型语言， Java和C++是强类型语言

JS可以通过src属性引用外部js文件(包括在通过互联网访问到的存放在其他服务器上的js文件)也可以通过在 <script> 标签内书写js代码使用，但只能是二选一的 不能同时使用

JavaScript变量

变量类型

类型 名称 作用
数值类型 number int, short, long long, float, double
字符串类型 string String, StringBuilder, char[]
对象类型 object
布尔类型 boolean
函数类型 function

可以使用js提供的函数typeof()得到当前变量的类型

变量的特殊值

特殊值 意义
undefined 未定义   所有js变量未赋予初始值的时候默认值都为undefined
null 空值
NAN 全称：Not A Number   非数字 非数值

使用一个string类型的变量乘一个int类型的变量对js来说语法上是允许的 (效果不是和Python一样string重复多遍) 而是得到NAN值

定义变量的格式

var   <变量名> ;
Var   <变量名>   =   <值> ;

JavaScript变量运算

特殊的关系（比较）运算

运算符 效果 区别 举例
== 等于 只对变量的字面值进行比较 类型不相等的变量会自动进行类型转换 “12” == 12 值为true
=== 全等于 不但要求字面值相等还需要其变量类型一致 “12” === 12 值为false

逻辑运算

运算符 效果
与运算 &&
或运算 ||
取反运算 !

注意：在js中所有类型的变量都能当作boolean类型来使用(与C++类似)，其中0, null , undefined, “”(空串) 都被认为是 false

注意：在JS中 “与运算” 会返回第一个不为true的值 例如 true && null 返回 null ， true && "" 返回 "" ，true && undefined 返回 undefined 否则返回 true ，同理在 “或运算” 将返回第一个不为false 的值 否则返回false。

JavaScript的数组

声明：

1
let arr = [];

JS中的数组具有自动扩容的性质，并且能存储不同数据类型的元素，只要通过下标赋值那么最大的下标就会给数组进行扩容，这称为跳跃赋值 (不规范) ，跳跃式读取 (读取超过数组容积的数据) 会读到 undefined 值但是不会改变数组的容积

JavaScript的函数

函数声明的两种方法

  1. 使用 function 关键字来定义函数

    使用格式：

    1
    2
    3
    function <函数名> (<形参列表>){
    	<函数体>
    }

  2. 使用函数来赋值变量

    使用格式：

    1
    2
    3
    let <函数名> = function (<形参列表>){
        <函数列表>
    }

  • 注意函数在 主体 中可以随处声明 ，但是声明后并并不会被调用

  • 在形参列表中不需要表示 var 或 let 因为这样做不能限定参数的数据类型故只需要在形参列表中写上变量名即可。在函数头上也不需要标明函数的返回类型，同样也是标明了无意义的只需要在函数体内 return <变量名/值> 即可

函数重载问题

JS中不允许函数重载 (函数名相同但形参列表不同)， 使用相同的函数名会使得前一个被后一个覆盖 (这里关系到函数指针的问题)

隐形参数问题

在一个函数内传入多于函数形参列表的值该函数会使用 “隐形参数” (arguments) 直接获取全部的形参 并且 隐形参数 是默认存在的 这类似于Java中的可变长参数是以一个数组的形式存在，在函数内可直接使用 arguments 来使用函数得到的 隐形参数

这里可以弱弱地解释为什么JS没有函数重载的功能

示例代码：

1
2
3
4
5
6
7
8
9
10
function sum(num1, num2){
    let ans = 0;
    for (const t of arguments) {
        if(typeof t == "number"){
            ans += t;
        }
    }
    return ans;
}
sum(1, 2, 3, 4); // 10

JavaScript对象

对象的定义

使用格式：

1
2
3
4
5
6
7
let <变量名> = {
	<属性名> : <值> ,
	<属性名> : <值> ,
    <函数名>: function(){},
    ...
    <属性名> : <值> ;
};

JavaScript中的事件

JS中的事件是指电脑的输入设备与页面进行交互的响应。

常见的事件

事件名 含义 作用
onload 加载完成事件 页面加载完成之后，常用于做JS代码初始化操作
onclick 单击事件 常用语按钮的点击响应操作
onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后的操作
onsubmit 表单提交事件 常用于表单提交到服务器前，验证所有表单项是否合法

事件的注册（绑定）

含义：告诉浏览器当事件响应后要执行哪些操作代码，这就叫做事件的注册或事件的绑定

静态注册事件：

含义：通过HTML标签的时间属性赋予事件响应后的代码，这种方式叫做静态注册

动态注册事件：

含义：先通过js代码得到标签的 dom 对象，然后再通过 <dom对象>、.<事件名> = function(){} 这种形式的赋予事件响应后的代码的方式叫做动态注册

动态注册的基本步骤：

  1. 获取标签对象
  2. 使用 <dom对象>、.<事件名> = function(){} 定义对象的事件响应代码

onload事件

在浏览器解析完页面后就会自动触发的事件

  • 静态注册

    在 HTML 文件 的 body 标签处使用一般通过在标签处引用已经定义好的JS函数使用

    1
    <body onload="onload_function()">

  • 动态注册

    写法固定：在头部的 <script> 中只用 window.onload = <函数> 即可

    1
    window.onload = onload_function;

onclick、onblur、onchange、onsubmit 事件

鼠标点击触发事件onclick;

失去焦点事件onblur;

内容发生改变事件onchange;

表单提交事件onsubmit.

  • 静态注册

    在需要添加 onclick 事件的标签中引用已经定义好的JS函数即可

    1
    <button onclick="onclick_function()">按钮</button>

  • 动态注册

    1. 获取标签对象

      使用document.getElementByXXX()获取标签对象

      其中 document 是 JavaScript语言提供的一个对象用于表示整个页面内容文档， 使用 doucument 对象中提供的 getElementByXXX 函数就可通过锁定 XXX 的方式获取标签对象

    2. 通过 <标签对象>.<事件名> = <函数> 实现事件动作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    window.onload = function() {
        let obj_buttom = document.getElementById("Buttom");
        let obj_buttoms = document.getElementsByClassName("Buttom");

        obj_buttom.onclick = function(){
            console.log("这是一个动态注册的通过id筛选对象的onclick事件");
        }

        for (const t of obj_buttoms) {
            t.onclick = function(){
                console.log("这是一个动态注册的通过类名筛选的对象的onclick事件")
            }
        }
    }

像失去焦点（onblur 一般用于文本 / 密码输入框）事件，内容发生改变（onchange 可以用于下拉列表）事件，表单提交（onsubmit ）事件

在提交表单中使用onsubmit事件使用 return false; 可以使得表单提交终止。

1
2
3
<form action="http://localhost:5500"  method="get" onsubmit="return <函数>;">
    <input type="submit" value="静态注册">
</form>

或者在动态注册的时候在函数内直接 return false