JavaScript Fundamentals 01: Introduction to JavaScript

We're going to kick things off by understanding what JavaScript is, its role in web development, and how it works together with HTML and CSS. Then, you'll write your very first JavaScript script!

JavaScript Fundamentals 01: Introduction to JavaScript

Today, we're going to kick things off by understanding what JavaScript is, its role in web development, and how it works together with HTML and CSS. Then, you'll write your very first JavaScript script!

Watch the Video Version

Understanding JavaScript

Brief History and Purpose: JavaScript was created in 1995 by Brendan Eich while he was working at Netscape Communications. It was initially developed to make web pages alive, allowing them to respond to user actions without needing to reload. Today, JavaScript has evolved into a powerful programming language that powers the dynamic behavior on most websites.

Differences Between JavaScript, HTML, and CSS:

    • HTML is the backbone of the web, defining the structure of web pages.
    • CSS is the styling layer, controlling the appearance of HTML elements.
    • JavaScript adds interactivity and dynamic features to web pages, making them responsive and engaging.

Setting Up Your Environment with Replit

Replit is an online IDE that allows you to write, run, and share code in multiple programming languages, including JavaScript, without any setup on your computer. Here's how to get started:

  1. Go to Replit.com and sign up for a free account.
  2. Once logged in, click on the "+ Create" button.
  3. Select "HTML, CSS and JavaScript," for your template.
  4. Name your project (e.g., "MyFirstJavaScript") and click "Create Repl".

You'll notice that you have three files open in the Replit text editor.

In the index.html file erase the text Hello World that is in between the opening body tag and the script tag. In the example above it appears on line 12.

You can click the green run button and you'll notice the text Hello World will disappear from the webview on the right.

Your First JavaScript Script

Let's dive into coding with two simple tasks that will show the power of JavaScript in web development.

Task 1: Using document.write()

In your Repl's script.js file, write the following code:

document.write('Hello, World from JavaScript!');

Run your code using the green button again. You'll see "Hello, World from JavaScript!!" displayed in the output window. document.write() writes directly to the HTML document.

Note that document.write() is not recommended for production code. But, to get results quickly in your first script, we're using it. For the ways the pros do it, see Task 2, below.

Task 2: Using document.getElementById().innerHTML

Delete the JavaScript you created in Task 1.

Next, add a paragraph tag with an id in your HTML file. You'll add this in the between the opening and closing body tag, but above the script in your document:

<p id="demo"></p>

Now, in your JavaScript file, write:

document.getElementById('demo').innerHTML = 'Hello, JavaScript!';

Run your code again. You'll see "Hello, JavaScript!" where the paragraph tag is located. This method allows you to modify the content of an existing element on the page.

Here's how the document.getElementById() command works

After completing Task 2, you've seen document.getElementById('demo').innerHTML = 'Hello, JavaScript!'; in action, but let's break down how it actually works to give you a clearer understanding:

  1. Finding the Element: document.getElementById('demo') tells JavaScript to look through the HTML document for an element with the ID demo. IDs are unique identifiers, meaning no two elements should have the same ID in a document. This specificity allows JavaScript to precisely target the element you want to manipulate.
  2. Accessing the Element's Content: Once the element is found, .innerHTML allows you to get or set the HTML content of that element. In this case, you're setting the content, meaning you're telling the browser to replace whatever is inside the <p id="demo"></p> tag with a new string of HTML or text.
  3. Changing the Content: By assigning a value to .innerHTML (like 'Hello, JavaScript!'), you're effectively changing the content of the element on the webpage in real time. This is a powerful feature of JavaScript that allows for dynamic changes to the content of your web pages without needing to reload them.
  4. Immediate Feedback: One of the benefits of using document.getElementById().innerHTML is the immediate feedback loop it provides. As soon as the JavaScript code is executed, you can see the changes reflected on the page. This makes it an invaluable tool for interactive web development, allowing developers to create responsive, user-driven interfaces.

This method is a cornerstone of DOM manipulation in JavaScript, providing a straightforward way to interact with and modify web page content dynamically. As you become more familiar with JavaScript, you'll discover that this is just the tip of the iceberg when it comes to the capabilities of the language and its interaction with the DOM.

Understanding the Differences

  • document.write() is a straightforward way to write to the document, but it's less commonly used because it can overwrite the entire document if not used correctly.
  • document.getElementById().innerHTML is more powerful and safer, allowing you to target specific elements and change their content without affecting the rest of the document.

Your Challenge Today: Display a Predefined Name and Favorite Band

In this task, you'll practice using JavaScript's getElementById method in the simplest way possible. We'll display a predefined name and favorite band on the webpage. This will help you understand how to directly manipulate the DOM with minimal JavaScript. You can erase any code in the Replit editor before writing the new code below.

Prepare Your HTML:

Add this basic HTML structure to your project. It includes placeholders where the name and band will be displayed.

<!DOCTYPE html>
<html>
<head>
    <title>Display Name and Band</title>
</head>
<body>
    <h2>Welcome to our JavaScript mini-challenge!</h2>
    <p>Your name is: <span id="displayName"></span></p>
    <p>Your favorite band is: <span id="displayBand"></span></p>

    <script>
        // JavaScript will go here
    </script>
</body>
</html>

Insert Your JavaScript:

Within the <script> tags in your HTML, add the following JavaScript code. This code will replace the placeholders with a predefined name and band. You can replace Alex and The Beatles with your name and the name of your favorite band.

document.getElementById('displayName').innerHTML = 'Alex';
document.getElementById('displayBand').innerHTML = 'The Beatles';

Again, click Run to see the result in the browser tab.

Understanding the Task:

  • This exercise shows you the direct manipulation of the DOM using getElementById. The method is used here to find HTML elements by their ID and replace their content (innerHTML) with new text.
  • There's no need for user input or interaction. The JavaScript code runs as soon as the page loads, demonstrating the simplest form of dynamic content update.

Final Thought Today's challenge was a gentle introduction to manipulating web page content with JavaScript, focusing on the essence of dynamic content update using the getElementById method. This foundational skill is crucial as you progress and start building more interactive and complex web applications.