1. 嵌入方式：
JavaScript 代码可以通过以下方式嵌入到 HTML 文档中：
内联脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript in Browser</title>
</head>
<body>
<h1>Hello, World!</h1>
<!-- 内联脚本 -->
<script>
alert("Hello from inline script!");
</script>
</body>
</html>
外部脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript in Browser</title>
<!-- 外部脚本 -->
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
2. 浏览器解析和执行：
当浏览器加载包含 JavaScript 代码的网页时，它会按照以下步骤执行：
- HTML 解析： 浏览器解析 HTML 文档，构建 DOM（文档对象模型）。
- CSS 解析： 解析样式表，构建 CSSOM（样式对象模型）。
- JavaScript 解析和执行： 在遇到 <script> 标签时，浏览器会停止解析 HTML，执行 JavaScript 代码。对于外部脚本，浏览器会发起请求获取脚本文件并执行。
3. 代码执行流程：
浏览器中 JavaScript 代码的执行是单线程的，即一次只能执行一个任务。以下是代码执行的基本流程：
- 同步执行： 顺序执行代码，逐行执行。
- 异步执行： 处理异步任务，如事件处理、定时器等。
4. DOM 操作：
JavaScript 主要通过 DOM 来操作页面元素。DOM 是浏览器提供的一种接口，允许 JavaScript 修改页面的结构、样式和内容。
// 例子：通过 JavaScript 修改页面元素
document.getElementById('myElement').innerHTML = 'New Content';
5. 事件处理：
JavaScript 可以监听和响应用户的事件，如点击、悬停、键盘输入等。
// 例子：点击按钮时弹出提示框
document.getElementById('myButton').addEventListener('click', function() {
alert('Button Clicked!');
});
6. AJAX 请求：
JavaScript 可以通过异步请求获取服务器数据，从而更新页面内容而不刷新整个页面。
// 例子：使用 Fetch API 发送异步请求
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
总体来说，JavaScript 在浏览器中的执行使得开发者可以创建更动态、交互丰富的网页应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3508/JavaScript