JavaScript入门教程，你的第一行js代码与开发者工具
JavaScript入门教程，将以如何从第一行js代码开始使用JavaScript与开发者工具实战。
本文将手把手教你如何编写并运行你的第一行JavaScript代码，并介绍开发过程中最重要的工具——浏览器开发者工具。
1. 准备工作：认识开发者工具
几乎所有现代浏览器都内置了强大的“开发者工具”（DevTools）。它是你调试代码、查看页面结构、分析网络请求的瑞士军刀。
- 如何打开？ 在浏览器页面中按下键盘上的
F12键，或者右键点击页面，选择“检查”。 - 找到控制台（Console）： 在DevTools中，找到并点击“Console”标签页。这里是你的“JavaScript沙盒”，你可以直接在这里输入代码并立即看到执行结果，非常适合测试代码片段。
2. 嵌入JavaScript的三种方式
有三种主要方式可以将JavaScript引入到HTML页面中。
方式一：内联方式（不推荐，仅作了解）
将代码直接写在HTML元素的属性中，如 onclick。
<button onclick="alert('你点击了我！')">点击我</button>这种方式不利于代码的维护和复用，应尽量避免。
方式二：内部脚本
使用 <script>标签将代码包裹，直接写在HTML文件内部。
<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
</head>
<body>
<h1>欢迎</h1>
<script>
// 这里是JavaScript代码
console.log("页面加载完毕！");
</script>
</body>
</html>方式三：外部脚本（最佳实践）
将JavaScript代码写在一个独立的 .js文件中，然后用 <script>标签的 src属性引入。这种方式最利于代码组织和维护。
index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
</head>
<body>
<h1>欢迎</h1>
<!-- 引入外部的JS文件 -->
<script src="myScript.js"></script>
</body>
</html>myScript.js文件：
// 这里是独立的JS文件
console.log("这是来自外部文件的消息！");3. 你的第一个程序：Hello, World!
让我们用两种方式实现经典的“Hello, World!”程序。
方法A：在控制台中
- 打开浏览器开发者工具（F12），进入Console标签页。
- 在光标处输入以下代码，然后按回车：
console.log("Hello, World!"); - 你会立即在下方的控制台看到输出结果。
console.log()是一个用于在控制台打印信息的关键函数，是调试和学习的利器。
方法B：在HTML页面中
创建一个HTML文件，包含以下代码：
<!DOCTYPE html>
<html>
<body>
<button onclick="sayHello()">点我打招呼</button>
<script>
function sayHello() {
alert("Hello, World!");
}
</script>
</body>
</html>用浏览器打开这个HTML文件，点击按钮，你就会看到一个弹出对话框。alert()函数会创建一个简单的消息弹窗。
4. 代码注释
注释是写在你代码中的笔记，不会被浏览器执行。它们用于解释代码的用途，对团队协作和日后维护至关重要。
- 单行注释： 以
//开始。// 这是一行注释，下面的代码用于计算总和 let sum = 1 + 2; - 多行注释： 包裹在
/*和*/之间。/* 这是一个多行注释。 这里可以写更详细的说明。 作者：你 日期：2023-10-27 */
总结
通过以上学习，我们已经成功迈出了第一步！学会了如何使用开发者工具的控制台，了解了引入JavaScript的几种方式，并写出了第一个程序。记住，console.log()是你学习路上的好朋友。