JavaScript Course — Part 1/3

[clique aqui para ler em português]

What is JS?

JavaScript is a programming language that helps to manipulate information on the WEB.

History

JavaScript was created in just 10 days, in May 1995, by Brendan Eich at the service of Netscape. at first the language was called Mocha, and then it was called LiveScript. soon afterwards Netscape received a trademark license from Sun and changed the name back to JavaScript, using a marketing strategy to popularize the language, but ended up confusing many people by making them think that javascript was based on java. In 1997, JavaScript was submitted to ECMA (European Computer Manufacturers Association) to create a specification. The name JavaScript was already patented by Sun Microsystems (today Oracle) and could not be used. Therefore, the name composed of ECMA and JavaScript was used, resulting in ECMAScript. Even with that name, the language is still affectionately known as JavaScript. ECMAScript is only used to refer to language versions.

Vanilla JS

There are several js frameworks, and every day something new appears, that’s why they made a little joke by creating a ‘framework’ called vanilla.js, which in the end is nothing more than pure JavaScript, and showing that not always the best path is using a library or framework, sometimes creating functionality purely with JavaScript, is much simpler and faster.

The joke

There is a website that calls Vanilla JS as a framework, presenting it as light and fast.

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

In English there is the expression “Vanilla something”, it is used to refer to the most common version of something.
Because the vanilla flavor is the most common among cookies and sweets.

Tools

Browsers:

• Chrome;
• Firefox;
• Microsoft Edge;
• Opera;
• Internet Explorer;
• Safari;
• etc…

Editors:

• Visual Studio Code;
• Notepad++;
• Sublime Text;
• Atom;
• Brackets;
• etc…

Adding JavaScript to the page

JavaScript is inserted on your page using the <script> element, it has two ways to be inserted, internally and externally.

Internal JavaScript

The internal JavaScript is used inside the <script> tag, as follows:

<script>
alert('ok');
</script>

External JavaScript

To use externally, we also use the <script> tag but we add the src attribute to define where our script file is located.

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

Strategies for loading scripts

There are several problems involving loading scripts in the correct order. Unfortunately, nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate some elements of the page, your code will not work if JavaScript is loaded and executed before HTML elements are even available, we have some solutions for that.
The first way is to add an event that only runs after the entire document is loaded.

document.addEventListener("DOMContentLoaded", function() {
});

This is an event listener, which listens and waits for the “DOMContentLoaded” event to come from the browser, which means that the HTML body is fully loaded and ready. The JavaScript code inside that block will not be executed until the event is fired, so the error will be avoided.

Using external JavaScript, we can use a modern JavaScript feature to solve this problem: This is the defer attribute, which tells the browser to continue rendering HTML content once the <script> tag has been reached.

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

In this case, both script and HTML will load simultaneously and the code will work.

Note: In the external case, we do not need to use the DOMContentLoaded event because the defer attribute solves the problem. We don’t use defer as a solution for internal examples because defer works only with external scripts.

An old-fashioned solution to this problem was to place the script element at the very bottom of the page (before the </body> tag). With that, the scripts would load right after all the HTML content. The problem with this type of solution is that the script’s loading / rendering would be completely blocked until all the HTML content was analyzed. On larger scale sites, with many scripts, this solution would cause a big performance problem and slow the site down.

Asynchronous vs Deferred (async and defer)

The async attribute (Asynchronous)

The async attribute is used to indicate to the browser that the script can be executed asynchronously. HTML parsing will not be paused when it finds this script element — your request will occur in parallel and its execution can happen any time the script is completely loaded.

<script async src="script.js">

This attribute is only available for scripts located in external files. When an external script contains this attribute, the file can be requested while the HTML is being analyzed. Once finished, the HTML analysis is paused and the script is executed.

The defer attribute (Deferred)

The defer attribute tells the browser to execute the script only when the HTML analysis is finished.
As with async, with defer the script is downloaded asynchronously, but its execution occurs only when the entire rendering process is complete, as the name of this attribute informs (to defer = postpone), it “ postpones ”something, which in this case refers to the execution of the script.

<script defer src="script.js">

The script will be requested asynchronously, its download will be completed and, only when the analysis of the HTML document is finished, it will be executed. Even if the full script download takes place before the full HTML parsing, it will not run until after.
If you have multiple script elements with the defer attribute.

<script defer src="jquery.js">
<script defer src="bootstrap.js">

They will be requested in parallel and executed in the declared sequence.

Normal execution, async or defer?

After understanding and analyzing each situation, the question remains: when should we use normal execution, async or defer? As always, it depends on the situation! And we have other points to consider too!

Where is the script element located?

The script element with async and defer makes the most difference when they are not located at the end of the HTML document. The analysis of HTML documents happens from left to right, from top to bottom, starting with the first declared element until when it is closed. If an external script is located just before the / body element, the use of async and defer attributes becomes redundant. As the document analysis is almost complete at that time, these script elements do not have much to block.

Doesn’t this script depend on others?

If the external scripts you are loading do not depend on other files and / or do not have any dependencies of their own, the async attribute is usually quite useful. Since you don’t have to worry too much at what time it will run, loading it asynchronously is the right option!

JavaScript execution order

When the browser finds a block of JavaScript code, it usually runs in order, from top to bottom. This means that you need to be careful about the order in which you put things.

Server side vs Client side

You can also hear the terms server side (server-side) and client side (client-side), especially in the context of web development. Client-side codes are executed on the user’s computer — when a web page is viewed, the client-side code is downloaded, executed and displayed by the browser.
Server-side codes, on the other hand, are executed on the server and the result of the execution is downloaded and displayed in the browser. Examples of popular server-side languages ​​include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example, in the popular Node.js environment.

Dynamic vs Static

The word dynamic is used to describe both client-side and server-side JavaScript — this word refers to the ability to update the display of a web page and app to show different things in different circumstances, generating new content as requested. Server-side code dynamically generates new content on the server, pulling data from a database, while client-side JavaScript dynamically generates new content within the client’s browser, such as creating a new HTML table with data received from the server and showing the table on a web page displayed to the user. The meanings are slightly different in the two contexts, but related, and both (JavaScript server-side and client-side) generally work together.
A web page without dynamic updates is called static — it only shows the same content all the time.

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊