Home >Web Front-end >JS Tutorial >How to Print \'Hello, World!\' in JavaScript
How to Print \'Hello, World!\' in JavaScript
- DDDOriginal
- 2024-09-18 11:54:02491browse
Welcome to another installment of our JavaScript journey! In this blog post, we'll cover one of the most fundamental tasks in programming: printing "Hello, World!" to the screen. This simple exercise is a great way to get started with JavaScript and understand the basics of how the language works. Let's dive in!
Printing "Hello, World!" in JavaScript
Printing "Hello, World!" is a classic example used to introduce new programming languages. In JavaScript, you can achieve this in several ways, depending on the environment you're working in. We'll cover the most common methods: using the browser console and displaying the message on a web page.
Method 1: Using the Browser Console
The browser console is a powerful tool for testing and debugging JavaScript code. You can access the console in most modern web browsers by pressing F12 or Ctrl Shift I (Windows/Linux) or Cmd Opt I (Mac).
Steps:
- Open your web browser and press F12 or Ctrl Shift I (Windows/Linux) or Cmd Opt I (Mac) to open the developer tools.
- Navigate to the "Console" tab.
- Type the following JavaScript code and press Enter:
console.log("Hello, World!");
Explanation:
- console.log() is a built-in JavaScript function that outputs a message to the browser console.
- The string "Hello, World!" is the message you want to display.
Method 2: Displaying on a Web Page
If you want to display "Hello, World!" on a web page, you'll need to write some HTML and JavaScript code. Here's how you can do it:
Steps:
- Create a new HTML file (e.g., index.html).
- Open the file in a text editor and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
</head>
<body>
<h1 id="message"></h1>
<script>
document.getElementById("message").innerText = "Hello, World!";
</script>
</body>
</html>
Explanation:
- The declaration defines the document type and version of HTML.
- The element is the root element of the HTML document.
- The element contains meta-information about the document, such as the character set and title.
- The element contains the content of the web page.
- The element with the id attribute message is where the "Hello, World!" message will be displayed.
- The
- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills