Javascript Introduction

This article aims to make a simple and not extremely formal introduction to this scripting language that has become one of the foundations of every web application. You may have heard of this name, but you have no idea what it is or what it is for, right? So this article is meant for you to simply understand how it works and how to make your first script in this language.

Firstly, the term JavaScript has nothing to do with the Java programming language, this is a big mess made by the web development community, especially those who have never worked with technology, but let’s skip historical contexts and discourses on how the name came about. Let’s get down to business.

The JavaScript language is a Client Side language, that is, it runs on the user’s computer. This is one of the most important definitions of this language, as it explains a lot!

When we access a web page, we have a sequence of events, or rather a flow of communication between our computer and the server where the page is.

Obviously the flow represented in figure 1 is only didactic, but it gives us an idea of ​​what happens when we type the address www.devmedia.com.br, for example. Let’s explain:

You type the address in your browser, from there, will be communicated the server where this page is, requesting to be sent the relevant files;
The server will interpret this request and will return the requested page in text format, containing the HTML and JavaScript code that is embedded on this page;
Your computer receives this code, interprets it, and if necessary requests images, more files and media being referenced within the received HTML.
But what is the point of knowing this? Quite simply, the fact that your computer receives some code and interprets already explains what is a Client Side language, or in Portuguese, client side.

When we work with web applications, we have two types of programming language, which are Client Side and Server Side.

JavaScript is a Client-like language because the user is interpreting and generating the results, and thus problems begin to emerge. Have you ever wondered how many different types of operating systems, browsers, connections, and hardware there are? Yes, this has serious problems, since not all browsers interpret JavaScript the same way, I dare say that not all browsers interpret JavaScript.

By now we have learned the obvious: JavaScript depends on the user’s computer to function properly. It is interpreted by the browser, or browser, that our user is using, understood? Yes, this concept is extremely important, believe me!

What does JavaScript do anyway?

JavaScript can interact with virtually every element of an HTML page, work with variables, generate results, change the appearance of elements, and the best without reloading the page. There are entire applications made using only JavaScript, and I dare say these applications will become increasingly common over time and the evolution of this language.

It wasn’t very clear, did it? This concept will improve as we exercise, practice and especially programming.

Hands-on!

Have you read any articles about JavaScript or some other programming language? Then you should know that it is almost a tradition for us to start anything by saying “Hello World” or the famous “Hello World”. Never read and didn’t know it? Well now you know, so we’ve already learned something else, so let’s do our own “Hello World!”.

To get started, we don’t need to install any specific programs. As I use Windows, I will use Notepad, but you can use the text editor of your choice. There are specific tools for coding JavaScript, but our focus is just to understand how it works and create a simple script.

<html>
  <head>
    <title>Artigo 01 - Olá World!</title>
    <script language="javascript" type="text/javascript">
      alert('Olá World!');
    </script>
  </head>
  <body>
  </body>
</html>

Well, let’s explain the source code of our example.

Note that our JavaScript code is within the <head> </head> tags of our page, this is important as this code is executed before anything is shown on screen, but over the course of the course we will see that this may differ. ;

All that is within the <script> </script> tags is our JavaScript code, in our case only the alert statement (“Hello World”);

For browser compatibility reasons, use the language = “javascript” and “type” properties, as shown in the example;

Our example is limited to calling the alert () function of JavaScript, this is one of the simplest functions that JavaScript has and is responsible for calling an alert window on the page, useful when we need to pass a brief message to our user;
Don’t you understand what “TAGs” mean? It would be very important to study a little bit about HTML (yes, good old HTML) before proceeding with the articles, this is a valuable tip!

Conclusion

This article is not intended to turn anyone into a professional programmer, but is intended to give an overview of how JavaScript works, as well as to demonstrate that it can be simple to build a practical example without large computational resources.

Going forward you can broaden your studies, seeking to understand the most varied resources available by this language.

Leave a Reply