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.
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.
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, XML1<!DOCTYPE html> 2<html> 3<body> 4<h2>My First Web Page</h2> 5<p>Click "OK" for a welcome message.</p> 6<button onclick="alert('Welcome to my Web Page!')">OK</button> 7</body> 8</html>
For external JavaScript, we write our JavaScript code in a separate file and link it to our HTML file.
Here is the external.js file:
JavaScript1alert('Welcome to my Web Page!')
And the connected HTML file:
HTML, XML1<!DOCTYPE html> 2<html> 3<body> 4<h2>My First Web Page</h2> 5<p>Click "OK" for a welcome message.</p> 6<button onclick="external.js">OK</button> 7</body> 8</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.
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.
JavaScript1let name = 'John'; 2name = 'Jane'; // valid 3 4const pi = 3.14; 5pi = 3; // error
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:
JavaScript1// This is a single-line comment 2 3/* 4This is a 5multi-line comment 6*/
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!
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:
JavaScript1// For innerText 2document.getElementById('orbitDetails').innerText = 'Updated by JavaScript with innerText!'; 3 4// For innerHTML 5document.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!
Congratulations! You've embarked on the journey of becoming a web developer. You've grasped JavaScript's role in web development, learned how to implement internal and external JavaScript, declared variables using let and const, and understood the use of comments in JavaScript.
Upcoming are hands-on exercises to reinforce your knowledge. So let's dive into some engaging practices, bearing in mind that all exceptional web developers started their journey right here—at the beginning!