Introduction to JavaScript

1. What is JavaScript?

JavaScript (often abbreviated as JS) is a lightweight, interpreted programming language with first-class functions. It is best known as the scripting language for Web pages, but it's also used in many non-browser environments like Node.js.

While HTML provides the structure and CSS provides the style, JavaScript provides the interactivity.

The Web Development Trio

HTML	CSS	JavaScript
Structure (The Skeleton)	Presentation (The Skin/Clothing)	Behavior (The Brain/Muscles)
Adds headings, paragraphs, images	Adds colors, fonts, layouts	Adds clicks, popups, data fetching
<h1>Hello</h1>	h1 { color: red; }	alert("Hello!");

2. Why Learn JavaScript?

• Most Popular: It is the most used programming language in the world.
• Versatile: You can build Websites, Mobile Apps, Desktop Apps, and even Games.
• Full Stack: With Node.js, you can use JavaScript on the server-side (Backend) too.

3. How to Add JavaScript?

There are three ways to insert JavaScript into an HTML document:

A. Inline JavaScript

JavaScript code is placed directly inside an HTML element's attribute (like onclick).

<button onclick="alert('Hello!')">Click Me</button>

B. Internal JavaScript

JavaScript code is placed inside a <script> tag within the HTML file.

<script>
    console.log("Hello from Internal JS");
</script>
        

C. External JavaScript

JavaScript code is written in a separate file with a .js extension and linked to the HTML file.

<script src="script.js"></script>

4. JavaScript Output

JavaScript does not have any built-in print object or method. However, you can output data in different ways:

• innerHTML - Writing into an HTML element.
• document.write() - Writing into the HTML output.
• window.alert() - Writing into an alert box.
• console.log() - Writing into the browser console.

Example: Changing HTML Content

Click the button below to see how JavaScript changes the text.

function changeText() {
    document.getElementById("demoText").innerHTML = "Hello JavaScript!";
    document.getElementById("demoText").style.color = "red";
}
        

5. Try It Yourself

Write your own JavaScript code below and click "Run Code" to see the result in the console output.

let message = "Hello World";
let year = 2024;

console.log(message);
console.log("Current Year: " + year);
console.log("Calculation: " + (10 + 20));
        

▶ Run Code