Introduction to JavaScript: Basics, Inclusion Methods, Selectors, Events, and DOM Manipulation

1. JavaScript Overview

JavaScript (JS) is a scripting language that runs in browsers, follows ECMAScript syntax, and can manipulate the Browser Object Model (BOM) and Document Object Model (DOM).

2. Including JavaScript

Three inclusion methods are demonstrated: inline (using event attributes), internal (script block), and external (script src attribute).

<style>
    #box, #wrap, #temp, #res {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-top: 10px;
    }
</style>
<!--1. Inline: code placed directly in an element's event attribute-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<script>
    // id is the unique identifier of an element
    temp.onclick = function () {
        this.style.width = "400px"; // this => temp
    };
</script>
<div id="res"></div>
<!--3. External script file-->
<script src="js/1.js"></script>

3. Simple Click Event

An external script (js/1.js) attaches a click handler to the element with id "res" that changes its height, background color, and border radius.

res.onclick = function () {
    this.style.height = "100px"; // this => res
    this.style.backgroundColor = "yellow";
    this.style.borderRadius = "50%";
};

4. JavaScript Selectors

Examples of selecting elements by id, class, and tag, and using DOM methods such as getElementById , getElementsByClassName , getElementsByTagName , as well as CSS‑style selectors with querySelector and querySelectorAll .

var box = document.getElementById('box');
var boxes = document.getElementsByClassName('box1');
var divs = document.getElementsByTagName('div');
var div = document.querySelector('.bb');
var divsAll = document.querySelectorAll('body .box1.bb');

5. Event Handling

Assigning an event handler directly to an element's event property, e.g., box.onclick = function () { this.style.color = 'red'; };

var box = document.querySelector('.box');
box.onclick = function () {
    this.style.color = 'red';
};

6. Manipulating the Document

Typical workflow: select an element, bind an event, and within the handler modify content ( innerText , innerHTML ), styles, or class names. Adding a class requires a leading space when concatenating strings.

var box = document.querySelector('.box');
box.onclick = function () {
    // modify content
    // this.innerText = "innerText"; // plain text
    // this.innerHTML = "
innerHTML
"; // HTML parsed

    // modify style (inline style has highest priority)
    // this.style.color = "green";
    // this.style.fontSize = "12px";

    // modify class name
    // this.className = "box1"; // replaces existing classes
    this.className += " box1"; // add new class, keep existing ones
    // clear class name
    this.className = ""; // removes all classes
};

7. Computed Styles

Using getComputedStyle to retrieve the final computed CSS values of an element, such as its font size.

.box { font-size: 100px; }
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize); // "100px"