HTML - JavaScript：初学者指南

你好，有抱负的网页开发者们！我很高兴能成为你们在这个激动人心的HTML和JavaScript世界中的向导。作为一个教授编程超过十年的人，我可以向你保证，你将会享受到一段美好的时光。让我们一起跳进去，共同揭开网页开发的神秘面纱！

HTML - Javascript

JavaScript是什么？

在我们深入研究之前，让我们先了解一下JavaScript是什么。JavaScript是一种强大的编程语言，它让网页充满生机。它是互联网的魔法棒，让静态的HTML页面跳动、交互并响应用户的操作。

想象一个网站就像一栋房子。HTML是结构——墙壁、屋顶和地基。CSS是油漆和装饰。那么JavaScript呢？它是电力、管道以及所有让房子功能化和互动化的酷炫小玩意！

语法

JavaScript就像任何语言一样，有一套自己的规则。让我们来分解一下基础：

变量

变量就像用来存储信息的容器。下面是如何声明它们：

let myName = "Alice";
const myAge = 25;
var myHobby = "编程";

在这个例子中：

let 用于可以改变的变量。
const 用于不会改变的变量。
var 是一种较老的声明变量的方式，但现在更推荐使用 let 和 const。

函数

函数是可重用的代码块。它们就像是程序的食谱：

function greet(name) {
console.log("你好，" + name + "！");
}

greet("Bob"); // 输出：你好，Bob！

这个函数接收一个 name 作为输入，并打印一个问候。就像一个友好的机器人向任何人问好！

条件语句

这些帮助你的代码做出决策：

let temperature = 22;

if (temperature > 30) {
console.log("外面很热！");
} else if (temperature > 20) {
console.log("天气不错！");
} else {
console.log("有点冷。");
}

这段代码检查温度，并根据温度的温暖程度给出不同的信息。就像教会你的计算机成为一个天气评论员！

在HTML中使用JavaScript的例子

现在，让我们看看如何在我们的HTML页面中使用JavaScript。主要有三种方法：

1. 行内JavaScript

这就好比低声给出一个快速指令：

<button onclick="alert('你好！')">点击我</button>

当你点击这个按钮时，它会显示一个弹出窗口说“你好！”。这种方式快速简单，但不太适合更大的脚本。

2. 内部JavaScript

这就好比给你的HTML页面装上了一个大脑：

<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
<script>
function changeColor() {
document.body.style.backgroundColor = "浅蓝色";
}
</script>
</head>
<body>
<button onclick="changeColor()">改变颜色</button>
</body>
</html>

这个脚本会在你点击按钮时将页面背景改为浅蓝色。就像给你的网页赋予了变色龙的能力！

3. 外部JavaScript

这就好比给你的网页一个可以参考的独立大脑：

<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greet()">说你好</button>
</body>
</html>

在 myscript.js 中：

function greet() {
alert("来自外部文件的你好！");
}

这种方式可以让你的HTML保持干净，JavaScript保持有序。就像把你的工具放在工具箱里而不是散落在房子周围。

HTML `<noscript>` 元素

有时，JavaScript可能在用户的浏览器中不可用或被禁用。这时 <noscript> 元素就派上用场了：

<script>
document.write("你好，JavaScript正在工作！");
</script>
<noscript>
<p>哦不！你的浏览器不支持JavaScript或者它被关闭了。</p>
</noscript>

这就好比有一个备用计划。如果JavaScript在工作，用户会看到第一条信息。如果不行，他们会看到第二条。始终做好准备是好的！

JavaScript方法表

让我们看看一些你经常会用到的JavaScript方法：

方法	描述	示例
`alert()`	显示一个弹出消息	`alert("你好，世界！");`
`console.log()`	打印到浏览器控制台	`console.log("这是一个日志");`
`document.getElementById()`	通过ID查找HTML元素	`let elem = document.getElementById("myDiv");`
`addEventListener()`	给元素附加一个事件处理程序	`button.addEventListener("click", function() { alert("点击了！"); });`
`setTimeout()`	在延迟后执行一个函数	`setTimeout(function() { console.log("延迟消息"); }, 2000);`