Extensions with JavaScript

Introduction to the creation of JavaScript code for DOM manipulation

1. Selectors - Selecting DOM nodes
2. Manipulation
   1. Classes
   2. CSS properties
   3. Node attributes
3. Dynamic functionalities
   1. Events
   2. Time of execution

This introduction is intended to show that it is now very easy to use JavaScript without a framework, such as jQuery. This kind of usage not only offers the advantage of faster execution, but also independence from external resources. These slow down the loading of the page and are potential sources of errors, for example if the page is not loaded completely.

If you have no basic knowledge of JavaScript at all, the "Mozilla Developer Network (MDN) Web Docs" offer a good introduction, which is available in English as well as mostly in German. Other good tutorials can be found on the pages of selfhtml.

Selectors - Select DOM nodes

In principle, elements (or DOM nodes) can be selected in the same way as with CSS. For performance reasons, however, you should try to limit yourself to classes or IDs.

var elementWithId = document.getElementById('id');

When selecting elements based on a class, the return value is always in the form of an array, since - unlike IDs - classes may be assigned more than once. If one is sure that only one element with the given class exists, one can simply save the first element of the array. The same applies to the selection of elements based on their HTML tag with getElementsByTagName.
The order of the elements in the array is always the same as the order of the corresponding DOM nodes in the DOM.

// Selection of several elements by their class
var elementsWithClass = document.getElementsByClass('class');
// Selection of the first selection
var firstElementWithClass = document.getElementsByClass('class')[0];
// Selection based on the HTML tag
var elementsWithTag = document.getElementsByTagName('p');

If elements are to be selected with a CSS-like selector, there are two possibilities. One is querySelector, which returns the first hit, and the other is querySelectorAll, which returns all hits.
More about possible selectors can be found in the chapter CSS Selectors of MDN Web Docs.

// Selection of an element with query selector
var firstElementWithQuery = document.querySelector('#id.class');
// Selection of several elements
var elementWithQuery = document.querySelectorAll('#id.class');

In order to select one or more elements on the whole page, one uses – as described above – the respective methods of the document. Once you have selected an element and saved it temporarily, you can make a further selection in its child nodes and thus reduce the selection and make it easier.

// Selection of all <p> elements in firstElementWithQuery
var allPTags = firstElementWithQuery.getElementsByTagName('p');

Manipulation

Classes

Classes offer a simple possibility to select elements as well as to change the appearance of elements via previously defined CSS rules. To operate with the classes of an element, the classList attribute can be used.

// Selection of the "exampleDiv"
var exampleDiv = document.getElementByID('example');
// Saving of all classes of the "exampleDiv"
var exampleDivClasses = exampleDiv.classList;

exampleDiv.classList.add('testClass');

exampleDiv.classList.remove('testClass');

if (exampleDiv.classList.contains('testClass')) {
    console.log('Contains class!');
}

CSS properties

In general, styles should be defined using CSS, but if it is necessary to define them directly for an element, the methods of the style attribute are useful. This can be used to define any style information possible in the browser.

exampleDiv.style.setProperty('background-color', '#00FF00');
var exampleDivBackgroundColor = exampleDiv.style.getPropertyValue('background-color');
exampleDiv.style.removeProperty('background-color');

Node attributes

When dealing with attributes, there are four basic functions getAttribute, setAttribute, removeAttribute and hasAttribute. To get a complete list of attributes you can use the attributes attribute of a selected element.

if (exampleDiv.hasAttribute('hidden')) {
    exampleDiv.removeAttribute('hidden');
}

If custom attributes are needed, e.g. to bind data to an element, the data-* attributes offer a way to do this with valid HTML. In addition to the attribute functions, the dataset attribute of a selected element can be used to add or read out content.

exampleDiv.dataset['time'] = Date.now();
console.log('The following time was stored in the element:', new Date(exampleDiv.dataset['time']));

<div id="example" data-time="1581340000000"></div>

Dynamic functionalities

Events

In order to execute actions when clicking or other user interactions, you can bind events to selected elements. Depending on the selected element, there are different event types. In the MDN Web Docs you can find a complete overview of all event types. Common events are:

• click: Can be applied to almost any element and is triggered when the user clicks on the selected element.
• scroll: Can be applied to any element with "overflow" and is triggered when the user scrolls.
• focus: Can be applied to any focusable element and is triggered when the user focuses on the element}.

exampleDiv.addEventListener('click', function(event) {
    // actions when the element has been clicked
});

exampleButton.addEventListener('click', function(event) {
    event.preventDefault();
    // actions when the element has been clicked
});

function buttonClickFunction(event) {
    event.preventDefault();
    // actions when the element has been clicked
}

exampleButton.addEventListener('click', buttonClickFunction);
exampleButton.removeEventListener('click', buttonClickFunction);

Time of execution

Especially when manipulating DOM nodes, it is necessary that the DOM is completely loaded and calculated by the browser. Only then is it guaranteed that all required elements can be selected and changed via JavaScript.
Um den richtigen Zeitpunkt der Ausführung des eigenen To find the right time to execute your own code you can use the following helper function:

function executeWhenReady(callback) {
    if (
        document.readyState === 'complete' ||
        document.readyState === 'interactive'
    ) {
        // if document is completely loaded & interpreted call callback
        setTimeout(callback, 1);
    } else {
        // if not, bind callback to the loading event
        document.addEventListener('DOMContentLoaded', callback);
    }
}

This function executes the passed function directly if the DOM is ready and if not, as soon as the DOMContentLoaded event is triggered.

executeWhenReady(function() {

    exampleDiv.style.setProperty('background-color', '#00FF00');

    // other operations that rely on the fully
    // interpreted DOM …
});

jQuery extension

1. Notation
2. Execution only when page is fully loaded
3. Using jQuery without conflicts

Web authors can use the JavaScript library jQuery to program dynamic effects on web pages quite easily and across browsers or to make web applications more comfortable. Furthermore, jQuery offers an easy way to select HTML elements and extends JavaScript for manipulation with some useful helper functions. For the use of jQuery, a stable version of this library is included with TUCAL.

Since the possibilities of jQuery are very diverse, a look at the official documentation should be taken for a complete description of all functions.

Notation

To select HTML elements the following syntax is used:

// either
jQuery(selector)
// or
$(selector)

Functions can then be applied to selected elements:

$('div.example').removeClass('example');

Execution only when page is fully loaded

A fundamental problem with writing JavaScript code arises from the timing of execution. To ensure that the HTML document is fully loaded and thus all required elements are present and displayed before the scripts are executed, jQuery already provides a method. Therefore, there is no need to define a separate function for this:

$(function() {
    // remaining code …
});

Using jQuery without conflicts

If other libraries are included, conflicts may occur with the $ variable reserved by jQuery. Therefore jQuery offers the function noConflict(), with which the variable $ can be unbound.

$.noConflict();
// jQuery can then be further called with "jQuery", e. g.:
jQuery(function() {
    var test = jQuery('div.example');
});