JavaScript 第一个程序
欢迎来到JavaScript的世界!在这篇教程中,我们将一起创建和运行你的第一个JavaScript程序。通过这个简单的入门教程,你将了解JavaScript的基本结构、如何显示输出,以及如何在浏览器中运行代码。
JavaScript 简介
JavaScript是一种轻量级的、解释型的编程语言,最初被设计用来为网页添加交互性。现在,它已经成为世界上使用最广泛的编程语言之一,不仅可以在浏览器中运行,还可以在服务器端和其他各种环境中使用。
JavaScript与Java没有直接关系,尽管它们的名字听起来相似。JavaScript的名字是早期营销策略的产物,因为当时Java很流行。
准备开发环境
开始编写JavaScript最简单的方式是使用浏览器。你只需要:
- 一个文本编辑器(如记事本、Visual Studio Code、Sublime Text等)
- 一个现代网页浏览器(如Chrome、Firefox、Edge等)
创建第一个JavaScript程序
让我们创建一个经典的"Hello, World!"程序:
步骤1:创建HTML文件
首先,我们需要创建一个HTML文件来包含我们的JavaScript代码:
<!DOCTYPE html>
<html>
<head>
<title>我的第一个JavaScript程序</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
// 这里将写我们的JavaScript代码
</script>
</body>
</html>
步骤2:添加JavaScript代码
在<script>
标签中添加以下代码:
// 在控制台输出消息
console.log("Hello, World!");
// 显示一个警告框
alert("欢迎学习JavaScript!");
// 在页面中写入内容
document.write("<p>这是我的第一个JavaScript程序</p>");
步骤3:运行程序
将HTML文件保存为first-javascript.html
,然后在浏览器中打开它。你会看到:
- 一个显示"欢迎学习JavaScript!"的弹窗
- 页面上显示"这是我的第一个JavaScript程序"
- 如果你打开浏览器的开发者工具(通常按F12),在控制台(Console)选项卡中可以看到"Hello, World!"消息
JavaScript 输出方式详解
在上面的例子中,我们使用了三种不同的方式来输出信息:
1. console.log()
console.log("Hello, World!");
这种方法将消息输出到浏览器的控制台,主要用于调试目的。用户通常看不到这些消息,除非他们打开了开发者工具。
2. alert()
alert("欢迎学习JavaScript!");
这会显示一个弹出对话框,包含指定的消息和一个"确定"按钮。这是一种向用户显示重要信息的简单方式。
3. document.write()
document.write("<p>这是我的第一个JavaScript程序</p>");
这种方法直接向HTML页面写入内容。需要注意的是,如果在页面加载完成后使用document.write()
,它会覆盖整个页面内容。
JavaScript 在HTML中的位置
JavaScript可以放在HTML文档的不同位置:
内部JavaScript
就像我们的例子一样,直接在HTML文件中使用<script>
标签:
<script>
console.log("这是内部JavaScript");
</script>
外部JavaScript
对于更大的项目,最佳实践是将JavaScript代码放在单独的文件中:
<script src="myscript.js"></script>
然后在myscript.js
文件中编写JavaScript代码:
console.log("这是外部JavaScript文件");
alert("从外部文件加载的代码");
使用外部JavaScript文件有几个好处:
- 分离HTML和JavaScript代码
- 提高代码的可维护性
- 浏览器可以缓存JavaScript文件,提高加载速度
实际案例:交互式问候
让我们创建一个稍微复杂一点的例子,用户可以输入自己的名字,然后收到个性化的问候:
<!DOCTYPE html>
<html>
<head>
<title>交互式JavaScript程序</title>
</head>
<body>
<h1>JavaScript交互实例</h1>
<script>
// 提示用户输入名字
let userName = prompt("请输入你的名字:");
// 根据用户是否输入名字,显示不同的问候语
if (userName) {
document.write("<h2>你好," + userName + "!欢迎学习JavaScript!</h2>");
} else {
document.write("<h2>你好,访客!欢迎学习JavaScript!</h2>");
}
// 在控制台显示当前时间
let currentTime = new Date();
console.log("当前时间是:" + currentTime);
</script>
</body>
</html>
这个例子展示了:
- 使用
prompt()
函数获取用户输入 - 使用条件语句(
if-else
)实现简单的逻辑 - 使用
Date()
对象获取当前时间 - 使用字符串连接操作符(
+
)组合文本
JavaScript 语法基础
通过这个简单的程序,我们已经接触到了一些JavaScript的基本语法:
-
注释:使用
//
添加单行注释javascript// 这是一个单行注释
-
变量声明:使用
let
关键字声明变量javascriptlet userName = "小明";
-
函数调用:使用函数名加括号调用函数
javascriptalert("Hello");
console.log("Hello"); -
条件语句:使用
if-else
进行条件判断javascriptif (条件) {
// 如果条件为真,执行这里的代码
} else {
// 如果条件为假,执行这里的代码
}
JavaScript 执行顺序
JavaScript代码是从上到下按顺序执行的。例如:
console.log("第一行");
console.log("第二行");
console.log("第三行");
这段代码会在控制台依次输出:
第一行
第二行
第三行
总结
恭喜你!你已经成功创建并运行了你的第一个JavaScript程序。我们学习了:
- JavaScript的基本介绍
- 如何在HTML中嵌入JavaScript代码
- JavaScript的三种主要输出方式:
console.log()
、alert()
和document.write()
- 如何使用内部和外部JavaScript
- 如何创建一个简单的交互式程序
- JavaScript的基本语法元素
练习
为了巩固所学知识,尝试以下练习:
- 修改"Hello, World!"程序,让它同时在控制台和页面上显示当前日期。
- 创建一个程序,提示用户输入两个数字,然后显示它们的和。
- 尝试将JavaScript代码移到外部文件中,并确保它仍然正常工作。
- 创建一个程序,根据当前时间向用户显示不同的问候语(例如早上好、下午好、晚上好)。
进一步学习
随着你继续学习JavaScript,以下资源可能对你有所帮助:
- MDN Web Docs的JavaScript指南
- 在线JavaScript编辑器如CodePen或JSFiddle
- JavaScript交互式学习平台如freeCodeCamp
在下一课中,我们将探索JavaScript的数据类型和变量。继续加油!