Exploring the Fundamentals of JavaScript for Web Development | CodeSignal Learn

Exploring the Fundamentals of JavaScript for Web Development | CodeSignal Learn

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: HTML <!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: JavaScript function showAlert() {alert('Welcome to my Web Page!');} And the connected HTML file: HTML <!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

Variables in JavaScript: `let` and `const`

Variables in JavaScript are akin to boxes storing values for potential later use. We declare variables using let, which can be reassigned, and const, which cannot. let name = 'John'; name = 'Jane'; // valid const pi = 3.14; pi = 3; // error

Entering the World of Comments in JavaScript

In any programming journey, comments serve as essential guides and reminders in your code. In JavaScript, you can add comments to your code by using // for single-line comments and /* */ for multi-line comments. Sample: // This is a single-line comment /* This is a multi-line comment */ Importantly, comments in your JavaScript code do not affect the execution of the code. They are solely for improving code readability for developers. Whether it's a single line or a block of text, comments are ignored during the code execution process, making them perfect for adding useful notes or temporarily disabling specific portions of your code. Let's keep going!

Exploring Output Methods on Web Page: `innerText` and `innerHTML`

In JavaScript, we can dynamically change the content of our webpage directly from the code. We do this using the document.getElementById('elementId').innerText or document.getElementById('elementId').innerHTML methods. Here,'elementId' is the id of the HTML element we want to update. The innerText property sets or returns the text content of the specified node, and all its descendants. If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string. On the other hand, the innerHTML property sets or gets the HTML content (innerHTML) of an element. We can use this property to get the current HTML content or replace the existing HTML content. Let's see examples of both: // For innerText document.getElementById('orbitDetails').innerText = 'Updated by JavaScript with innerText!'; // For innerHTML document.getElementById('orbitDetails').innerHTML = '<strong>Updated by JavaScript with innerHTML!<strong>'; In the first example, using innerText, we're setting the text content of the HTML element with id 'orbitDetails' to 'Updated by JavaScript with innerText!'. In the second example, using innerHTML, we're setting the HTML content of the 'orbitDetails' element to 'Updated by JavaScript with innerHTML!', which appears bold because of the <strong> tag. As we proceed in the course, we'll dive deeper into how to manipulate the DOM (Document Object Model) with JavaScript. But for now, know that we can use innerText and innerHTML to present the output of our JavaScript code directly on the webpage. Let's venture further into our JavaScript journey!

JavaScript

// For innerText
document.getElementById('orbitDetails').innerText = 'Updated by JavaScript with innerText!';

// For innerHTML
document.getElementById('orbitDetails').innerHTML = '<strong>Updated by JavaScript with innerHTML!<strong>';