JavaScript - Hello World

Ethan D. -

Writing Your First JavaScript Code

To write JavaScript code, create an HTML file that includes a <script> tag. This tag lets you add JavaScript code within your HTML document.

Example: Simple HTML file with a <script> tag

<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript Code</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

The JavaScript code is inside the <script> tag. The console.log() function displays the message "Hello, World!" in the browser's console.

The console.log() function is a built-in JavaScript function that outputs a message to the web console. It's useful for debugging and testing your code. You can pass one or more arguments to console.log(), separated by commas, and it will show them in the console.

Embedding JavaScript in HTML

Here are two ways to include JavaScript code in your HTML file:

  1. Inline JavaScript: Write JavaScript code directly within the <script> tag in your HTML file, as shown in the previous example. This is good for small scripts or when you want to keep the JavaScript code with the HTML.

  2. External JavaScript files: Separate your JavaScript code into an external file with a .js extension and link it to your HTML file using the <script> tag with the src attribute. This is better for larger projects or when you want to reuse the same JavaScript code in multiple HTML files.

Example: Linking an external JavaScript file

<!DOCTYPE html>
<html>
<head>
  <title>My First JavaScript Code</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

The JavaScript code is in a separate file named script.js, and it is linked to the HTML file using the <script> tag with the src attribute.

It's best to put your <script> tags near the end of the <body> section in your HTML file. This lets the HTML content load first, making your web page seem to load faster. But if your script needs to work with elements in the HTML, make sure those elements are loaded before the script runs.

When organizing your JavaScript code, keep it modular and easy to maintain. If you have a large project, break your code into separate files based on what they do or what features they are for. This makes it easier to manage and update your code as your project grows.

Running and Testing the Code

To run and test your JavaScript code, open the HTML file that contains the code in a web browser. You can do this by double-clicking the HTML file or by right-clicking it and selecting "Open with" and then choosing your preferred browser.

Once the HTML file is open in the browser, you can use the browser's developer tools to view the console output. This is where you can see the results of your console.log() statements and any other output from your JavaScript code.

To open the developer tools in most browsers, right-click anywhere on the web page and select "Inspect" or "Inspect Element". This will open a panel with various tabs, one of which is the "Console" tab. Click on the "Console" tab to view the output from your JavaScript code.

If you don't see your expected output in the console, or if you see error messages, you may need to debug your code.

Check for Syntax Errors

Make sure your JavaScript code is free of typos and follows the correct syntax. Missing semicolons, brackets, or quotation marks can cause errors.

Check the Browser Console for Error Messages

The console will display error messages that can help you pinpoint the issue in your code. Look for the line number where the error occurred and the error description.

Use console.log() Statements Strategically

Insert console.log() statements at different points in your code to see if the code is running as expected. This can help you narrow down where the issue is occurring.

Example: Using console.log() for debugging

function calculateSum(a, b) {
  console.log("Input values: " + a + ", " + b);
  let sum = a + b;
  console.log("Sum: " + sum);
  return sum;
}

Test Your Code in Different Browsers

Sometimes, JavaScript code may work differently in different browsers. Test your code in multiple browsers to ensure compatibility.

Use Online Resources and Communities

If you're stuck on an error or can't figure out why your code isn't working, search online for solutions or post your question on developer forums or communities like Stack Overflow.

Debugging Tips

  • Read error messages carefully, they often provide clues to the issue
  • Use the debugger statement to pause code execution and inspect variables
  • Isolate the problematic code by commenting out sections until you find the culprit