JavaScript

Introduction

Classes in JavaScript are just a different way of representing constructor functions and methods from “prototype objects”, but without fundamentally changing the inheritance mechanism itself. Background class inheritance is the well-known mechanism of “method delegation” through the “prototype chain of inheritance”.
In JavaScript, the reserved word “class” only indicates that the query is a special type of function, which, unlike a regular function, cannot be called (invoke), but can only be used with the reserved word “new”.
This functionality was introduced into the language with the ES2015 standard, with the intention of improving readability and facilitating the writing of object-oriented programs. When defining the appearance of the syntax, the designers of the standard were guided by the idea of ​​creating such a syntax that will resemble the syntax of most “class” languages”, and thus help programmers who already program in a “class” language” to more easily adopt the JavaScript syntax.
If in the following examples we compare parts of the code written with different syntaxes, we can see that the class syntax is better readable compared to the ES5 syntax:

Example: ES5 syntax

Example: Class Syntax

The layout of the class is very similar to the object creation syntax according to the ES5 standard, although it is more readable due to fewer lines and unnecessary parts removed:

NOTE:
Unlike other “class languages”, creating objects in Javascript (even when using classes) is not static ie. is not immutable after the object‘s declaration. In JavaScript, an object after instantiation remains “bound” to the class, with its “prototype object” through the chain of inheritance. Therefore, if we subsequently add or change a method in the class itself, that change will be felt by every object instantiated on the basis of that class.

Introduction

Prototypal inheritance (eng. prototypal inheritance) is a type of inheritance where an object inherits properties directly from another object (not from a template, ie class). There are two basic mechanisms that enable prototypical inheritance:

1. Concatenative inheritance
   This process is based on directly copying the properties of one or more objects to a new object. It should be noted that in order to copy a property, it is necessary that the property’s enumerable descriptor be set to true. This mechanism is also accepted with the ES2015 standard, with the help of the “Object.assign()” method.
   
   var o1 = { a: 1, b: 1, c: 1 }; var o2 = { b: 2, c: 2 }; var o3 = { c: 3 }; var velikiObjekat = Object.assign({}, o1, o2, o3); console.log(velikiObjekat); // { a: 1, b: 2, c: 3 }

   1 2 3 4 5 6

   var o1 = { a: 1, b: 1, c: 1 }; var o2 = { b: 2, c: 2 }; var o3 = { c: 3 };   var velikiObjekat = Object.assign({}, o1, o2, o3); console.log(velikiObjekat); // { a: 1, b: 2, c: 3 }

2. Prototype delegation
   This process is based on the principle that properties and methods are inherited through a “chain of related prototype objects” (eng. “prototype chain”).

NOTE:
In the framework of the ES2015 standard, a syntax for creating objects via classes is presented, however, this is only an aesthetic change, because in the background, all work related to inheritance is performed according to the previously mentioned mechanism “prototype delegation”.

Algorithm for method selection when working with arrays

With the help of the following snippet written by Sarah Drasner, we arrive at the appropriate method using a simple algorithm:

See the Pen Array Explorer by Web programming (@chos) on CodePen.

Introduction

Ajax stands for “Asynchronous JavaScript + XML” (although JSON is mostly used today), and represents a group of technologies intended for dynamic creation of Web pages. By using AJAX, we improve the quality of interactivity with the user, with the desire to make it as similar as possible to desktop applications (according to the speed of interaction). The idea behind Ajax is that the page on which the Web application takes place is loaded only once, and that all further communication with the server is performed asynchronously without blocking the interface and without reloading the entire page. Asynchronous behavior means that after the user interacts with the interface, the request to the server is accepted by JavaScript and the XMLHttpRequest object, which in the background sends requests to the server and displays the results when they are available, while the user can continue working in the meantime.

Ajax is not without flaws, since Ajax pages are dynamically generated the biggest problem for sites is search engine optimization. Search engines often cannot interpret the site well, which leads to problems in indexing the sites. A similar problem exists with page traffic analysis tools, because a user can spend a whole day on one Ajax page, and classic traffic analysis tools will interpret this as one page view.

Read more

Definition

Cross Domain Data Request is a specific request for data, because the data is not on the domain (protocol or port) from which the request originates.

The default behavior of servers is to not allow access to data from other servers, and the main reason for this prohibition is the ability to perform advanced requests (POST, PUT and DELETE etc.) which can lead to various security issues. Therefore, AJAX requests are prohibited by default, and this restriction is known as “the same origin policy“ (Serb. polisa common origin).
However, some types of resources are not subject to this ban, because browsers allow access to them by default. Resources that are not located on the domain from which the request originates are allowed to be called only through “src” or “href” attributes of the following HTML elements: <script>, <img>, <video>, <iframe>.

There are also solutions for requests where the ban “the same origin policy” applies, but this implies the use of specific mechanisms. This article is about those mechanisms.

Read more

Introduction

In this article, I tried to collect JavaScript code snippets (eng. code snippets), which can be useful in everyday work with DOM. Almost all snippets are written in two versions, using only plain JavaScript or with the help of the jQuery library.

Document Ready

The following examples show an “event listener” that waits for the moment when the DOM is loaded so that JavaScript can manipulate it. The same would be obtained if the JavaScript code were placed at the end of the body, i.e. before the closing “body” tag itself.

• plain JS
• jQuery
• jQuery in WordPress

Document Load

The load event is “triggered” only when the entire page with all CSS styles, images…

is loaded

• Plain JS
• jQuery

Introduction

JavaScript is a specific programming language, and compared to other languages, it sometimes solves problems in a different way than expected, but that doesn’t mean that way is wrong. Behind every “weird” decision regarding language syntax is a good reason why the JavaScript development team chose it. In order to understand the specifics of the language, it is necessary to thoroughly study the syntax and principles of the language. There are a small number of illogicalities that I still can’t “digest” so easily, but nobody is perfect and neither is JavaScript. It is considered that programmers who come into contact with JavaScript as a second language have a little more trouble to adapt, because they expect the same principles as in their favorite programming language but do not find them here either. In this article, I’ve collected potential (un)forced errors that a mere JavaScript mortal can make. The article will be updated regularly as I make mistakes 🙂