跳到主要内容

JavaScript 第一个程序

欢迎来到JavaScript的世界!在这篇教程中,我们将一起创建和运行你的第一个JavaScript程序。通过这个简单的入门教程,你将了解JavaScript的基本结构、如何显示输出,以及如何在浏览器中运行代码。

JavaScript 简介

JavaScript是一种轻量级的、解释型的编程语言,最初被设计用来为网页添加交互性。现在,它已经成为世界上使用最广泛的编程语言之一,不仅可以在浏览器中运行,还可以在服务器端和其他各种环境中使用。

备注

JavaScript与Java没有直接关系,尽管它们的名字听起来相似。JavaScript的名字是早期营销策略的产物,因为当时Java很流行。

准备开发环境

开始编写JavaScript最简单的方式是使用浏览器。你只需要:

  1. 一个文本编辑器(如记事本、Visual Studio Code、Sublime Text等)
  2. 一个现代网页浏览器(如Chrome、Firefox、Edge等)

创建第一个JavaScript程序

让我们创建一个经典的"Hello, World!"程序:

步骤1:创建HTML文件

首先,我们需要创建一个HTML文件来包含我们的JavaScript代码:

html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个JavaScript程序</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>

<script>
// 这里将写我们的JavaScript代码
</script>
</body>
</html>

步骤2:添加JavaScript代码

<script>标签中添加以下代码:

javascript
// 在控制台输出消息
console.log("Hello, World!");

// 显示一个警告框
alert("欢迎学习JavaScript!");

// 在页面中写入内容
document.write("<p>这是我的第一个JavaScript程序</p>");

步骤3:运行程序

将HTML文件保存为first-javascript.html,然后在浏览器中打开它。你会看到:

  1. 一个显示"欢迎学习JavaScript!"的弹窗
  2. 页面上显示"这是我的第一个JavaScript程序"
  3. 如果你打开浏览器的开发者工具(通常按F12),在控制台(Console)选项卡中可以看到"Hello, World!"消息

JavaScript 输出方式详解

在上面的例子中,我们使用了三种不同的方式来输出信息:

1. console.log()

javascript
console.log("Hello, World!");

这种方法将消息输出到浏览器的控制台,主要用于调试目的。用户通常看不到这些消息,除非他们打开了开发者工具。

2. alert()

javascript
alert("欢迎学习JavaScript!");

这会显示一个弹出对话框,包含指定的消息和一个"确定"按钮。这是一种向用户显示重要信息的简单方式。

3. document.write()

javascript
document.write("<p>这是我的第一个JavaScript程序</p>");

这种方法直接向HTML页面写入内容。需要注意的是,如果在页面加载完成后使用document.write(),它会覆盖整个页面内容。

JavaScript 在HTML中的位置

JavaScript可以放在HTML文档的不同位置:

内部JavaScript

就像我们的例子一样,直接在HTML文件中使用<script>标签:

html
<script>
console.log("这是内部JavaScript");
</script>

外部JavaScript

对于更大的项目,最佳实践是将JavaScript代码放在单独的文件中:

html
<script src="myscript.js"></script>

然后在myscript.js文件中编写JavaScript代码:

javascript
console.log("这是外部JavaScript文件");
alert("从外部文件加载的代码");
提示

使用外部JavaScript文件有几个好处:

  • 分离HTML和JavaScript代码
  • 提高代码的可维护性
  • 浏览器可以缓存JavaScript文件,提高加载速度

实际案例:交互式问候

让我们创建一个稍微复杂一点的例子,用户可以输入自己的名字,然后收到个性化的问候:

html
<!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>

这个例子展示了:

  1. 使用prompt()函数获取用户输入
  2. 使用条件语句(if-else)实现简单的逻辑
  3. 使用Date()对象获取当前时间
  4. 使用字符串连接操作符(+)组合文本

JavaScript 语法基础

通过这个简单的程序,我们已经接触到了一些JavaScript的基本语法:

  1. 注释:使用//添加单行注释

    javascript
    // 这是一个单行注释
  2. 变量声明:使用let关键字声明变量

    javascript
    let userName = "小明";
  3. 函数调用:使用函数名加括号调用函数

    javascript
    alert("Hello");
    console.log("Hello");
  4. 条件语句:使用if-else进行条件判断

    javascript
    if (条件) {
    // 如果条件为真,执行这里的代码
    } else {
    // 如果条件为假,执行这里的代码
    }

JavaScript 执行顺序

JavaScript代码是从上到下按顺序执行的。例如:

javascript
console.log("第一行");
console.log("第二行");
console.log("第三行");

这段代码会在控制台依次输出:

第一行
第二行
第三行

总结

恭喜你!你已经成功创建并运行了你的第一个JavaScript程序。我们学习了:

  • JavaScript的基本介绍
  • 如何在HTML中嵌入JavaScript代码
  • JavaScript的三种主要输出方式:console.log()alert()document.write()
  • 如何使用内部和外部JavaScript
  • 如何创建一个简单的交互式程序
  • JavaScript的基本语法元素

练习

为了巩固所学知识,尝试以下练习:

  1. 修改"Hello, World!"程序,让它同时在控制台和页面上显示当前日期。
  2. 创建一个程序,提示用户输入两个数字,然后显示它们的和。
  3. 尝试将JavaScript代码移到外部文件中,并确保它仍然正常工作。
  4. 创建一个程序,根据当前时间向用户显示不同的问候语(例如早上好、下午好、晚上好)。

进一步学习

随着你继续学习JavaScript,以下资源可能对你有所帮助:

在下一课中,我们将探索JavaScript的数据类型和变量。继续加油!