JavaScript - Hello World 程序

上一页
下一页

“Hello， World！” 通常是程序员在学习一门新的编程语言时编写的第一个程序。JavaScript “Hello World” 是一个简单的程序，一般用来演示语言的基本语法。该程序将使用不同的 JavaScript 方法来打印 “Hello World”。

使用 document.write（）

在 JavaScript 中，打印 “Hello World” 的最简单方法是使用 document.write（） 方法。document.write（） 方法将内容（文本字符串）直接写入 HTML 文档或网页。让我们看看以下内容 -


<script>
	 	document.write("Hello World)	
</script>

我们应该在 <script> 和 </script> 标签中编写 document.write（）。我们可以将 <script> 放在 <head> 或 <body> 部分。

例

让我们尝试编写一个 JavaScript 程序，将 “Hello World！” 打印到文档或网页上。在下面的程序中，我们将 JavaScript 代码放在 <head> 部分。你可以尝试将 JavaScript 部分放在 <body> 部分并执行程序。


<html>
<head>
	 	<script>
	 	 	 document.write("Hello World");
	 	</script>
</head>
<body>
</body>
<html>

使用 alert（） 方法

我们可以使用窗口 alert（） 方法在对话框中打印 “Hello Word”。

alert（） 是一个窗口方法，它指示浏览器显示带有消息的警报框。我们可以编写 alert 而不向它传递任何消息。


<script>
	 	alert("Hello World")
</script>

我们可以将 alert（） 方法编写为 window.alert（）。由于 window 对象是一个全局范围的对象，我们可以跳过 “window” 关键字。

例

让我们尝试一个在警报框中显示 “Hello World” 的示例。尝试通过将 <script> 部分放在 <body> 部分中来执行程序。


<html>
<head>
	 	<script>
	 	 	 alert("Hello World");
	 	</script>
</head>
<body>
</body>
<html>

使用 console.log（）

console.log（） 是将消息打印到 Web 控制台的一种非常方便的方法。在浏览器中调试 JavaScript 代码非常有用。让我们看看 console.log（） 将 “Hello World” 打印到 Web 控制台的简单应用程序。


<script>
	 	Console.log("Hello World")
</script>

我们可以使用 console.log 打印字符串或 JavaScript 对象。在上面的代码片段中，我们已将 “Hello World” 作为字符串参数传递给 console.log（） 方法。

例

让我们尝试用 HTML 编写一个完整的 JavaScript 程序。


<html>
<head>
	 	<script>
	 	 	 console.log("Hello World");
	 	</script>
</head>
<body>
	 	<p> Please open the console before clicking "Edit & Run" button </p>
</body>
<html>

它将在 Web 控制台中生成以下消息 -

Hello World

使用 innerHTML

HTML 元素的 innerHTML 属性定义元素的 HTML 内容。我们可以使用此属性来显示 Hello World 消息。通过更改元素的 innerHTML 属性，我们可以在 HTML 文档或网页中显示消息。

要使用元素的 innerHTML 属性，我们需要先访问该元素。我们可以使用 document.getElementById（） 方法来访问元素。让我们看一个完整的示例。

例

在下面的示例中，我们定义了一个 id 为 “output” 的 div 元素。我们使用 document.getElementById（“output”） 访问此元素。然后我们更改 innerHTML 属性并显示我们的消息 “Hello World”。


<html>
<head>
	 	<title>Using innerHTML property</title>
</head>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 document.getElementById("output").innerHTML = "Hello World";
	 	</script>
</body>
<html>

 

打印本页
上一页
下一页