自制笔记 | JavaWeb——JavaScript（持续更新...）-优快云博客

本文详细介绍了JavaScript的引入方式、基础语法、函数、对象及事件监听等内容。引入方式有内部脚本和外部脚本；基础语法涵盖变量、数据类型、运算符等；介绍了Array、String等对象的使用；还说明了事件监听的绑定方式和常见事件，帮助开发者掌握JS基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

引入方式
基础语法
函数
对象
- Array
- String
- JSON
- BOM
- DOM
事件监听

JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

引入方式

1.内部脚本：将JS代码定义在HTML页面中

① JavaScript代码必须位于<script></script>标签之间
② 在HTML文档中，可以在任意地方，放置任意数量的<script>
③ 一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
    alert("HelloJavaScript")
</script>

2.外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

① 外部JS文件中，只包含JS代码，不包含<script>标签
② <script>标签不能自闭合（即不能<script src="js/demo.js"/>）

<script src="js/demo.js"></script>

基础语法

书写语法：

① 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

② 每行结尾的分号可有可无

③ 注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */

④ 大括号表示代码块

//判断
if(count == 3) {
    alert(count);
}

输出语句：

① 使用window.alert()写入警告框（window可以省略）
② 使用document.write()写入HTML输出（即在浏览器页面展示）
③ 使用console.log()写入浏览器控制台

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    document.write("Hello JavaScript"); //写入HTML，在浏览器展示
    console.log("Hello JavaScript"); //写入浏览器控制台
</script>

变量：

① JavaScript中用var关键字（variable的缩写）来声明变量

② JavaScript是一门弱类型语言，变量可以存放不同类型的值

③ 变量名需要遵循如下规则：
组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

var a = 20;
a = "张三";

特点：
① 作用域比较大，全局变量
② 可以重复定义

{
    var x = 1;
    var x = "A";
}
alert(x);

注意事项：
① ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字在所的代码块内有效，且不允许重复声明
② ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

数据类型：

JS中分为：原始类型和引用类型（主要指对象）

原始类型：
① number：数字（整数、小数、NaN(Not a Number)）
② string：字符串，单双皆可
③ boolean：布尔。true，false
④ null：对象为空
⑤ undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型：

alert(typeof 3); //number

alert(typeof "A"); //string

alert(typeof true); //boolean

alert(typeof null); //object，实际是个bug，这里可理解为对象的占位符

var a;
alert(typeof a); //undefined

运算符：

① 算数运算符：+，-，*，/，%，++，–
② 赋值运算符：=，+=，-=， *=，/=，%=
③ 比较运算符：>，<，>=，<=，!=，== ，===（全等运算符）

== 与 ===：== 会进行类型转换，===不会进行类型转换

var age = 20;
var _age = "20";
var $age = 20;

alert(age == _age); //true
alert(age === _age); //false
alert(age === $age); //true

类型转换：

字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12（从前往后判断，当遇到第一个不是数字的字符时，就不会再继续往后判断） 
alert(parseInt("A45")); //NaN

其他类型转为boolean：
① Number：0和NaN为false，其他均转为true
② String：空字符串为false，其他均转为true
③ Null和undefined：均转为false

流程控制语句：

① if…else if…else…
② switch
③ for
④ while
⑤ do…while

函数

函数（方法）是被设计为执行特定任务的代码块

JavaScript函数通过function关键字进行定义，语法为：

function functionName(参数1, 参数2...) {
    //要执行的代码
}

注意：
① 形式参数不需要类型。因为JS是弱类型语言
② 返回值也不需要定义类型，可以在函数内部直接使用return返回值即可

调用：函数名称(实际参数列表)

示例：

function add(a, b) {
    return a + b;
}

var result = add(10, 20);

定义方式二：

var functionName = function(参数1, 参数2) {
    //要执行的代码
}

调用方式不变

注意事项：JS中，函数调用可以传递任意个数的参数，但是多的参数不会被接收

var result = add(10, 20, 30, 40);

对象

Array

JS中Array对象用于定义数组

定义：

var 变量名 = new Array(元素列表); //方式一
var 变量名 = [元素列表]; //方式二

var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];

访问：

arr[索引] = 值;

注意事项：JS中的数组相当于Java中的集合，数组的长度是可变的，而JS是弱类型，所以可以存储任意的类型的数据

var arr = [1, 2, 3, 4];
arr[10] = 50;

console.log(arr[10]); //50
console.log(arr[9]); //undefined

arr[9] = "A";
arr[8] = true;

属性：

属性	描述
length	设置或返回数组中元素的数量

方法：

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的值
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

箭头函数（ES6）：是用来简化函数定义语法的。具体形式为：(...) => (...)，如果需要给箭头函数起名字：var xxx = (...) => (...)。类似于Java里的lambda表达式

示例：

var arr = [1, "我的", 3, 4];
arr[10] = NaN;
arr.forEach(function(e) { //NaN会被打印，但是undefined不会
    console.log(e);
})

//ES6：箭头函数：(...)=>{...} —— 简化函数定义
arr.forEach((e) => {
    console.log(e);
})

//push方法，可以有多个参数
arr.push(7, 8, 9);
console.log(arr);

//splice方法，第一个参数表示删除的起始位置，第二个参数表示删除的个数
arr.splice(2, 2);
console.log(arr);

String

定义：

var 变量名 = new String("..."); //方式一
var 变量名 = "..."; //方式二

var str = new String("Hello String");
var str = "Hello String";

属性：

属性	描述
length	字符串的长度

方法：

方法	描述
charAt()	返回在指定位置的字符
indexOf()	检索字符串
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符

示例：

var str = "小璐乱撞";

//charAt
console.log(str.charAt(0));

//indexOf
console.log(str.indexOf("乱"));

//trim
var s = str.trim();
console.log(s);

//substring，第一个参数表示开始索引，第二参数表示结束索引（含头不含尾）
console.log(s.substring(1, 3));

JSON

js自定义对象：

定义格式：

var 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表) {}
    //简化写法
    函数名称(形参列表) {}
};

调用格式：

对象名.属性名
对象名.函数名()

示例：

var user = {
    name: "小璐乱撞",
    age: 10,
    gender: "male",
    /* eat: function() {
        alert("吃饭");
    } */
    //简化写法
    eat() {
        alert("吃饭");
    }
}

alert(user.name);
alert(user.eat());

JSON：

概念：JavaScript Object Notation，JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本（本质是一个字符串）

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

JSON用途

格式：

{
    "name": "Tom",
    "age": 20,
    "gender": "male"
}

与自定义对象的定义方式的区别在于，属性名需要放在双引号（不可以是单引号）内

定义：

var 变量名 = '{"key1": value1, "key2": value2}';

value的数据类型为：
① 数字（整数或浮点数）
② 字符串（在双引号中）
③ 逻辑值（true或false）
④ 数组（在方括号中）
⑤ 对象（在花括号中）
⑥ null

JSON字符串转为JS对象：

var jsObject = JSON.parse(jsonStr);

JS对象转为JSON字符串：

var jsonStr = JSON.stringify(jsObject);

示例：

var jsonStr = '{"name": "小璐乱撞", "age": 18, "gender": true, "addr": ["北京", "深圳", "上海"]}';

var jsonObject = JSON.parse(jsonStr);
alert(jsonObject.addr);

var jsonStr2 = JSON.stringify(jsonObject);
alert(jsonStr2);

BOM

Browser Object Model，浏览器对象模型，允许JS与浏览器对话，JS将浏览器的各个组成部分封装为对象

组成：
① Window：浏览器窗口对象
② Navigator：浏览器对象
③ Screen：屏幕对象
④ History：历史记录对象
⑤ Location：地址栏对象

Window：

获取：直接使用Window，其中window.可以省略

window.alert("Hello Window")
alert("Hello Window")

属性：
① history：对History对象的只读引用
② location：用于窗口或框架的Location对象
③ navigator：对Navigator对象的只读引用

方法：
① alert()：显示带有一段消息和一个确认按钮的警告框
② confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
③ setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
④ setTimeout()：在指定的毫秒数后调用函数或计算表达式

示例：

//confirm
var flag = confirm("您确定删除该记录吗？");
alert(flag); //确认：true，取消：false

//setInterval，第一个参数是要执行的函数，第二个参数是延迟的时间（单位是ms）
setInterval(function() {
    console.log("111");
}, 3000);

//setTimeout，参数和setInterval一样
setTimeout(function() {
    alert("666");
}, 3000);

Location：

获取：使用window.location获取，其中window.可以省略

属性：
href：设置或返回完整的URL。例如：location.href = "https://www.baidu.com";设置了href的值后，浏览器会跳转到对应的页面

DOM

Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象：
① Document：整个文档对象
② Element：元素对象（标签）
③ Attribute：属性对象
④ Text：文本对象
⑤ Comment：注释对象

JS通过DOM，就能够对HTML进行操作：
① 改变HTML元素的内容
② 改变HTML元素的样式（CSS）
③ 对HTML DOM事件作出反应
④ 添加和删除HTML元素

DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core Dom - 所有文档类型的标准模型
① Document：整个文档对象
② Element：元素对象（标签）
③ Attribute：属性对象
④ Text：文本对象
⑤ Comment：注释对象

2.XML DOM - XML文档的标准模型

3.HTML DOM - HTML文档的标准模型
例如：Image：<img>、Button：<input type='button'>

DOM操作获取元素对象：

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document对象中提供了以下获取Element元素对象的函数：

① 根据id属性值获取，返回单个Element对象

var h1 = document.getElementById('h1');

② 根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

③ 根据name属性值获取，返回Element对象数组

var hobbys = document.getElementsByName('hobby');

④ 根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

得到元素对象后，就可以查阅参考手册，来使用其中的属性和方法

DOM案例：

DOM案例

<body>
    <img id="h1" src="img/alibaba.jpg"> <br><br>

    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影 
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1.点亮灯泡：src属性值
    var img = document.getElementById('h1');
    img.src = "img/huawei.jpg";
	
    //2.将所有div标签的内容后都加上：very good（红色字体） -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>";
    }

    //3.使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;
    }
</script>

事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：
① 按钮被点击
② 鼠标移动到元素上
③ 按下键盘按键

事件监听：JS可以在事件被侦测到时执行代码

事件绑定：

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>
    function on() {
        alert('我被点击了');
    }
</script>

方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
    document.getElementById('btn').onclick = function() {
        alert('我被点击了');
    }
</script>

常见事件：

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完全加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到元素之上
onmouseout	鼠标从某元素离开

注意：失去焦点和获得焦点中的焦点指的是元素被选中时的焦点（例如输入框中的光标）

案例：

事件监听案例

<body>
    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" > 
    <input type="button"  value="熄灭" >

    <br> <br>

    <input type="text" id="name" value="ITCAST" >
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" class="check" > 
    <input type="button" value="反选" class="check">
</body>

<script>
    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    var img = document.getElementById('light');
    var inputs = document.getElementsByTagName('input');
    inputs[0].onclick = function() {
        img.src = "img/on.gif";
    }
    inputs[1].onclick = function() {
        img.src = "img/off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    var text = document.getElementById('name');
    text.onfocus = function() {
        text.value = text.value.toLowerCase();
    }
    text.onblur = function() {
        text.value = text.value.toUpperCase();
    }


    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    var hobbies = document.getElementsByName('hobby');
    var checkBtns = document.getElementsByClassName('check');
    checkBtns[0].onclick = function() {
        for (let i = 0; i < hobbies.length; i++) {
            const check = hobbies[i];
            check.checked = true;
        }
    }
    checkBtns[1].onclick = function() {
        for (let i = 0; i < hobbies.length; i++) {
            const check = hobbies[i];
            check.checked = false;
        }
    }
</script>