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!