JavaScript Tutorial: First Steps

on

 

Introduction

JavaScript is a powerful programming language used to make web pages interactive. It allows developers to create dynamic content, manipulate HTML elements, and respond to user actions. This tutorial will cover JavaScript fundamentals to help you get started.

What is JavaScript?

JavaScript is a scripting language that runs in web browsers. It enables interactive elements such as animations, form validation, and real-time updates.

How to Add JavaScript to HTML

There are three ways to add JavaScript to an HTML document:

1. Inline JavaScript

JavaScript can be added directly inside an HTML tag using the onclick attribute.

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

2. Internal JavaScript

JavaScript code can be placed within a <script> tag inside the <head> or <body> section.

<script>
    alert("Hello, World!");
</script>

3. External JavaScript

JavaScript can be written in a separate .js file and linked to the HTML file.

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

Content of script.js:

alert("Hello, World!");

JavaScript Syntax and Basics

JavaScript follows a simple syntax:

let message = "Hello, JavaScript!";
console.log(message);

Variables

Variables store data values. They can be declared using var, let, or const.

let name = "John";
const age = 25;
var city = "New York";

Data Types

JavaScript has different data types:

let number = 10;       // Number
let text = "Hello";   // String
let isTrue = true;     // Boolean
let value = null;      // Null
let notDefined;        // Undefined

JavaScript Operators

Operators perform operations on values.

let a = 10;
let b = 5;
console.log(a + b); // Addition
console.log(a - b); // Subtraction
console.log(a * b); // Multiplication
console.log(a / b); // Division

JavaScript Control Structures

Conditional Statements

let age = 18;
if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

Loops

For Loop

for (let i = 0; i < 5; i++) {
    console.log("Iteration " + i);
}

While Loop

let count = 0;
while (count < 5) {
    console.log("Count: " + count);
    count++;
}

Functions

Functions allow code reuse.

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice"));

JavaScript Events

JavaScript can respond to user interactions.

<button onclick="sayHello()">Click Me</button>
<script>
    function sayHello() {
        alert("Hello, User!");
    }
</script>

Document Object Model (DOM)

JavaScript can manipulate HTML elements dynamically using the DOM.

Changing Content

document.getElementById("demo").innerHTML = "New Content!";

Changing Styles

document.getElementById("demo").style.color = "red";

Adding and Removing Elements

let newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";
document.body.appendChild(newElement);

Conclusion

This tutorial introduced JavaScript basics, including syntax, variables, functions, events, and DOM manipulation. JavaScript is essential for web development, and learning more about ES6, AJAX, and frameworks like React will take your skills further.

You can also learn more about Web Programming here:

- CSS

- HTML


Happy coding!

Comments

Post a Comment