Introduction and Overview

Welcome to your first step toward mastering JavaScript. In today's journey, we're exploring JavaScript, a dynamic language that brings static web pages to life. You'll learn about its role in web development, its two types of implementation, and the use of let and const variables. Additionally, we'll delve into the process of creating JavaScript comments.

Introduction to JavaScript

JavaScript (JS) is a high-level language that adds interactivity to websites. Just as a wizard infuses life into inanimate objects, JavaScript enlivens static web pages, making games, real-time updates, and interactive graphics possible on websites.

JavaScript orchestrates the activity of HTML and CSS, just like a puppet master controlling the strings. Using the Document Object Model (DOM), JavaScript interacts with HTML elements to read or modify HTML content. Additionally, JavaScript can control CSS styles and alter the appearance of elements based on user interaction.

Internal vs. External JavaScript

JavaScript code can be embedded directly within an HTML file, known as internal JavaScript. Alternatively, it can be sourced from an external .js file, referred to as external JavaScript.

Here's an example of internal JavaScript, where an alert pops up when the "OK" button is clicked:

<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>Click "OK" for a welcome message.</p>
<button onclick="alert('Welcome to my Web Page!')">OK</button>
</body>
</html>

For external JavaScript, we write our JavaScript code in a separate file and link it to our HTML file using a <script> tag.

Here is the external.js file:

function showAlert() {
    alert('Welcome to my Web Page!');
}

And the connected HTML file:

<!DOCTYPE html>
<html>
<body>
  <h2>My First Web Page</h2>
  <p>Click "OK" for a welcome message.</p>

  <!-- load the external script -->
  <script src="external.js"></script>

  <!-- call the function defined in external.js -->
  <button onclick="showAlert()">OK</button>
</body>
</html>

Whether to use internal or external JavaScript depends on the specific needs of a project. Internal JavaScript can be beneficial for quick prototyping or smaller projects with simple scripts. However, external JavaScript is better suited to larger projects with complex scripts. External scripts, cached after the first load, improve performance and maintain a cleaner HTML file.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal