【Web Development】03JavaScript 基础和事件

曦樂～2026-11-14 8:44

JavaScript 是一门运行在浏览器（也可在 Node）里的、动态的、基于原型的脚本语言，用来让网页 "动" 起来并支撑整个前后端开发生态。

JavaScript Basics

html 复制代码 
<script>
    function sayHi(){
        alert("Hi");
       }
</script>

一、 JS 代码引入位置

  1. 写在 HTML 的<head>标签内部：页面加载就加载 JS；
  2. 写在<body>末尾（</body>之前） ：推荐写法，HTML 元素加载完成后再执行 JS；
  3. 外部独立 JS 文件 ：通过引入，代码与页面分离。外部JS文件直接写函数function sayHi(){ alert("Hi"); }

基础输出调试：alert()弹出弹窗；console.log()在浏览器控制台打印内容调试代码。

二、 基础语法规则

  1. 语句用**分号;**结尾；
  2. 注释：//单行注释、/*多行注释*/，注释不会被执行；
  3. 变量声明：var（旧版）、let（块级作用域）、const（常量）；标识符区分大小写；
  4. 变量命名规范：下划线命名student_name；驼峰命名studentName。
html 复制代码 
var studentName = "John";
var x, y;
x = 5;
y = x + 2;

三、基础数据类型

  1. Number 数字 ：整数、小数；算术运算符+ - * / %取模；
  2. String 字符串 ：用单引号' '或双引号" "包裹；+实现字符串拼接；
    • 类型转换：Number(字符串)转数字；.toString()数字转字符串；
    • 表达式从左向右运算，数字遇到字符串会转为字符串拼接；
    • 字符串常用方法：.length长度；.toUpperCase()转大写；.toLowerCase()转小写；.indexOf()查找下标；.includes()判断是否包含字符；.slice()截取子串。
  3. Boolean 布尔 ：true真 / false假；配合比较运算符== != > < >= <=；搭配if‑else、for循环做分支与循环逻辑。
html 复制代码 
//字符串拼接
var firstName, lastName, fullName;
firstName = "John"; // using double quotes
lastName = 'Lee'; // using single quotes
fullName = firstName + " " + lastName;
alert(fullName);//alert弹出警告框

//数字、字符串转换
var ageString = "19";
var age = Number(ageString); // age is the number 19

var age = 19;
var ageString = age.toString(); // ageString is the string "19

//不同位置值的表达，左边计算、右边拼接
var x;
x = 2016 + "hhh"; //2016hhh
alert(x);
x = 2016 + 1 + "hhh"; //2017hhh
alert(x);
x = "hhh" + 2016; //hhh2016
alert(x);
x = "hhh" + 2016 + 1; //hhh20161
alert(x);

四、DOM：JS 修改网页内容

核心三步修改页面元素：

  1. HTML 标签设置唯一id属性；id = ""

  2. 获取 DOM 元素对象；var a = document.getElementById("id值")；

  3. 根据元素类型修改内容：a.属性 =""；

    元素类型 修改属性
    div、span（普通容器） .innerHTML = "内容"
    input 输入框 .value = "内容"
    img 图片 .src = "图片路径"

修改 span 文本 innerHTML

html 复制代码 
<!-- HTML部分 -->
<button onclick="cat()">Cat</button>
<button onClick="dog()">Dog</button>
<br /> <br />
<span id="display"></span>

<script>
//点击dog按钮执行
function dog(){
    //通过id获取页面上的span元素
    var displaySpan = document.getElementById("display");
    //修改span内部的HTML文本
    displaySpan.innerHTML = "Woof woof woof!";
}

//点击cat按钮执行
function cat(){
    var displaySpan = document.getElementById("display");
    displaySpan.innerHTML = "Meao meao meao!";
}
</script>

修改input输入框 value

html 复制代码 
<button onClick="cat()">Cat</button>
<button onClick="dog()">Dog</button>
<br /> <br />
<input type="text" id="display" />

<script>
function cat(){
    //获取输入框元素
    var displayField = document.getElementById("display");
    //input表单元素使用.value赋值
    displayField.value = "Meao meao meao!";
}

function dog(){
    var displayField = document.getElementById("display");
    displayField.value = "Woof woof woof!";
}
</script>

修改img图片 src

html 复制代码 
<button onClick="cat()">Cat</button>
<button onClick="dog()">Dog</button>
<br /> <br />
<img id="display" />

<script>
function cat(){
    //获取img标签
    var image = document.getElementById("display");
    //修改图片源文件路径
    image.src = "cat.png";
}

function dog(){
    var image = document.getElementById("display");
    image.src = "dog.png";
}
</script>

点击计数器（变量保存状态）

html 复制代码 
<!-- HTML -->
<img src="dog.png" onClick="dog()" />
<img src="cat.png" onClick="cat()" />
<br /> <br />
Dog click count: <span id="dogDisplay">0</span>
<br />
Cat click count: <span id="catDisplay">0</span>

<script>
//全局变量，保存点击计数
var dogClick = 0;
var catClick = 0;

//点击狗狗图片
function dog(){
    dogClick = dogClick + 1; //计数+1
    var dogSpan = document.getElementById("dogDisplay");
    dogSpan.innerHTML = dogClick; //更新页面显示
}

//点击猫咪图片
function cat(){
    catClick = catClick + 1;
    var catSpan = document.getElementById("catDisplay");
    catSpan.innerHTML = catClick;
}
</script>

切换两张图片位置

html 复制代码 
<img id="left" src="dog.png" />
<button onClick="switchImage()">Switch</button>
<img id="right" src="cat.png" />

<script>
//状态变量记录图片顺序 dog‑cat / cat‑dog
var position = "dog-cat";

function switchImage(){
    if(position == "dog-cat"){
        //现在是狗左猫右 →切换成猫左狗右
        position = "cat-dog";
        var leftImage = document.getElementById("left");
        leftImage.src = "cat.png";
        var rightImage = document.getElementById("right");
        rightImage.src = "dog.png";
    }else{
        //现在是猫左狗右 →切回狗左猫右
        position = "dog-cat";
        var leftImage = document.getElementById("left");
        leftImage.src = "dog.png";
        var rightImage = document.getElementById("right");
        rightImage.src = "cat.png";
    }
}
</script>

单张图片来回切换

html 复制代码 
<img id="animal" src="dog.png" onClick="changeImage()" />

<script>
//状态变量记录当前显示什么动物 dog / cat
var animal = "dog";

function changeImage(){
    if(animal == "dog"){
        // 当前是狗 →变成猫
        animal = "cat";
        var image = document.getElementById("animal");
        image.src = "cat.png";
    }else{
        // 当前是猫 →变回狗
        animal = "dog";
        var image = document.getElementById("animal");
        image.src = "dog.png";
    }
}
</script>

五、 内置对象

Date 日期对象
html 复制代码 
<script>
//创建Date对象的几种方式
var d1 = new Date();                  // 获取当前系统日期时间
var d2 = new Date(86400000);          //毫秒数，从1970‑01‑01 UTC开始
var d3 = new Date("2000-01-30");      //日期字符串
var d4 = new Date("2000-01-30T10:00:00");
var d5 = new Date(2000, 0, 1);        //年，月(0=1月，11=12月)，日，时，分，秒

//获取时间组件
var now = new Date();
alert("now is " + now);
alert("getDate 返回几号(1‑31): " + now.getDate());
alert("getDay 返回星期(0周日‑6周六): " + now.getDay());
alert("getFullYear 四位年份: " + now.getFullYear());
alert("getHours 小时0‑23: " + now.getHours());
alert("getMinutes 分钟: " + now.getMinutes());
alert("getMonth 月份0‑11: " + now.getMonth());
alert("getSeconds 秒数: " + now.getSeconds());
alert("getTime 时间戳(毫秒): " + now.getTime());

//设置时间
var tomorrow = new Date();
tomorrow.setDate(now.getDate() + 1); //日期+1 →明天

var hundredDaysAgo = new Date();
hundredDaysAgo.setDate(now.getDate() - 100); //往前100天

alert(tomorrow);
alert(hundredDaysAgo);
</script>
  • 构造方式：时间毫秒数、日期字符串、new Date(year,month,day...)；⚠️月份 0‑11（0 代表 1 月）；
  • get 系列：获取年、月、日、小时、星期；set 系列：设置时间；可以计算昨天、明天、多少天之前的日期。
Array 数组
  • 定义：var arr = [a,b,c]；下标从 0 开始；
  • .length获取数组长度；for 循环遍历数组；
  • 常用方法：.push()尾部新增元素；.indexOf()查找元素下标；.splice()删除 / 插入数组元素。
html 复制代码 
<script>
//数组定义
var subjects = ["ISIT206", "MATH121", "CSCI301"];

subjects[1] = "LOGIC101";  //修改下标1位置的元素
subjects[3] = "LAW201";    //新增下标3元素

alert(subjects[0]); //取下标0元素

//数组长度 .length
//for循环遍历数组
for(var i = 0; i < subjects.length; i++){
    alert(subjects[i]);
}

//空数组，循环存入平方数
var square = [];
for(var i = 0; i < 10; i++) {
    square[i] = i*i;
}

//push() 在数组末尾追加元素
var square2 = [];
for(var i = 0; i < 10; i++) {
    square2.push(i*i);
}

//indexOf查找元素下标，找不到返回‑1
var subjArr = ["ISIT206", "MATH121", "CSCI301", "PHY211"];
var index = subjArr.indexOf("MATH121");

// splice(start, 删除数量,插入元素)
// splice(起始索引，删除几个，要插入的数据)
var removedSubjects = subjArr.splice(1, 2); //从下标1开始，删除2个元素
var removedSubjects2 = subjArr.splice(1, 0, "CSIT884"); //不删除，在下标1插入CSIT884
</script>

JavaScript Events（JS 事件）

事件：用户或者浏览器发生动作（点击、鼠标移入、输入、页面加载），绑定函数，事件触发自动运行函数，实现交互。例如onClick="func()"。

1. 常见事件

事件 触发时机
onClick 鼠标点击元素（按钮、图片等）
onLoad 资源加载完成；写在 body 上代表整个网页全部加载完毕
onFocus 输入框 / 下拉框获得焦点（光标进入）
onBlur 输入框失去焦点（光标离开）
onChange 失去焦点，并且输入框 / 下拉框值发生改变才触发
onSelect 选中文本框里面的文字
鼠标系列：onMouseDown按下、onMouseUp松开、onMouseOver移入、onMouseOut移出 鼠标在元素上操作
onSubmit 表单提交；用于表单校验。返回false阻止表单提交；返回true允许提交

事件写在对应标签<>里面调用，触发效果定义写在<scrip>的函数里面，例如：

html 复制代码 
<span id="demo" onMouseDown="mouseDown()" onMouseUp="mouseUp()">
Mouse Events
</span>

<script>
// 鼠标按下的时候执行
function mouseDown() {
    var demoSpan = document.getElementById("demo");
    demoSpan.innerHTML = "Release Me";
}
// 鼠标松开的时候执行
function mouseUp() {
    var demoSpan = document.getElementById("demo");
    demoSpan.innerHTML = "Thank You";
}
</script>

2. 浏览器弹窗交互框

confirm 确认框 ：confirm("提示文字")；用户点 OK 返回true，Cancel 返回false，用于确认用户操作。

复制代码 
var res = confirm("是否继续？");
if(res){ /*确认逻辑*/ }else{ /*取消逻辑*/ }

prompt 输入弹窗 ：prompt("提示","默认值")；OK 返回输入的字符串；Cancel 返回null，获取用户输入文本。

相关推荐
deli00716 分钟前
HTTPS 的锁是怎么挂上的？TLS 1.3 握手 6 步实测
前端
郝学胜-神的一滴16 分钟前
LangChain Skill 实现（渐进披露 On-Demand Skill，LangChain 官方 Deep Agent Skill 模式)
开发语言·python·langchain·numpy
程序员大阳23 分钟前
副队长ES6+教程(1)--ES6+初识
前端·ecmascript·es6
码云社区37 分钟前
智慧物业系统选型指南：房屋档案、账单管理与报修协作
前端·javascript·vue.js·智慧物业
程序员Query1 小时前
day01-认识Go语言 + golang环境的安装
开发语言·后端·golang
deli0072 小时前
2GB 文件传一半断网实测：HTTP 断点续传只补 15MB
前端
§ꦿCFོ༉10 小时前
嵌入式八股文—C语言入门学习(四)
c语言·开发语言·学习
投图匠11 小时前
十种不同风格的 CTP接口 框架
开发语言·python
treasure14013 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04几个好用的ip纯净度检测网站05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战07GitHub 镜像站点08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09苹果iPA游戏软件资源下载网站10Dify：一站式AI应用开发平台全解析与Windows部署指南