HTML JavaScript Basics

JavaScript is a powerful, client-side programming language that allows developers to create dynamic and interactive web pages. In this guide, we’ll cover the basics of integrating JavaScript with HTML and explore fundamental concepts.

1. Adding JavaScript to HTML

a. Inline JavaScript

JavaScript can be added directly within HTML elements using the onclick, onmouseover, and other event attributes.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline JavaScript</title>
</head>
<body>
  <button onclick="alert('Hello, World!')">Click Me</button>
</body>
</html>

Try It Now

b. Internal JavaScript

JavaScript can be included within a <script> tag inside the HTML <head> or <body>.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal JavaScript</title>
  <script>
    function showMessage() {
      alert('Hello from Internal JavaScript!');
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

Try It Now

c. External JavaScript

External JavaScript files are linked using the <script> tag with a src attribute.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External JavaScript</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

Try It Now

External JavaScript File (script.js):

function showMessage() {
  alert('Hello from External JavaScript!');
}

Try It Now

2. Basic JavaScript Syntax

a. Variables

Variables store data that can be used and manipulated. Use let, const, or var to declare variables.

Example:

let name = 'John';
const age = 30;
var isStudent = true;

Try It Now

b. Data Types

JavaScript supports different data types: string, number, boolean, object, array, undefined, null.

Example:

let str = 'Hello';
let num = 100;
let bool = true;
let obj = {name: 'John', age: 30};
let arr = [1, 2, 3];
let und = undefined;
let nll = null;

Try It Now

c. Functions

Functions are reusable blocks of code that perform a specific task.

Example:

function greet(name) {
  return 'Hello, ' + name;
}

console.log(greet('John'));

Try It Now

3. Events and Event Handlers

Events are actions that can be detected by JavaScript, such as clicks, mouse movements, or key presses.

Example: Button Click Event:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Events</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

Try It Now

4. DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents, allowing JavaScript to manipulate the structure, style, and content of a web page.

a. Selecting Elements

You can select elements using methods like getElementById, querySelector, and getElementsByClassName.

Example:

let element = document.getElementById('myElement');

Try It Now

b. Changing Content

You can change the content of an HTML element using the innerHTML or textContent properties.

Example:

<p id="demo">This is a paragraph.</p>
<script>
  document.getElementById('demo').innerHTML = 'Content changed!';
</script>

Try It Now

c. Changing Styles

You can change the style of an element using the style property.

Example:

<p id="styled">This text will change color.</p>
<script>
  document.getElementById('styled').style.color = 'blue';
</script>

Try It Now

5. Basic JavaScript Operators

Operators are used to perform operations on variables and values.

a. Arithmetic Operators

  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)

Example:

let result = 5 + 3; // result is 8

Try It Now

b. Comparison Operators

  • == (Equal to)
  • != (Not equal to)
  • > (Greater than)
  • < (Less than)

Example:

let isGreater = 5 > 3; // true

Try It Now

c. Logical Operators

  • && (AND)
  • || (OR)
  • ! (NOT)

Example:

let isTrue = (5 > 3) && (2 < 4); // true

Try It Now

6. Conditional Statements

Conditional statements are used to perform different actions based on different conditions.

Example:

let age = 18;

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

Try It Now

7. Loops

Loops allow you to execute a block of code multiple times.

a. for Loop

Example:

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

Try It Now

b. while Loop

Example:

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

Try It Now

8. Arrays and Objects

a. Arrays

Arrays are used to store multiple values in a single variable.

Example:

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // Apple

Try It Now

b. Objects

Objects store collections of key-value pairs.

Example:

let person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

console.log(person.firstName); // John

Try It Now

9. JavaScript Best Practices

  • Use const and let: Prefer const for variables that don’t change and let for variables that do.
  • Write Descriptive Names: Use clear and descriptive variable and function names.
  • Keep Code DRY: Avoid duplication of code (Don’t Repeat Yourself).
  • Use Strict Mode: Enable strict mode for safer coding ('use strict';).

Conclusion

JavaScript is an essential part of modern web development, allowing for interactive and dynamic user experiences. Understanding the basics, such as how to include JavaScript in HTML, manipulate the DOM, and use fundamental programming constructs, is crucial for building functional web applications.