Introduction to JavaScript, JavaScript language guide

This lesson is an introduction to JavaScript language with propose numerous scripts for each topic covered. Learning the basics of JavaScript with this tutorial will therefore be very simple, creative and fun!

JavaScript is an interpreted language. This means that it is not compiled, but each command is executed directly in the browser of the client (that is, of whoever is visiting the web page).

JavaScript is, in fact, a language used in client-side web programming, while in server-side web programming, languages such as PHP, Python, Ruby or Perl are used.

Introduction to JavaScript

JavaScript is a fast and performing language and integrates perfectly with HTML5. It is object-oriented and event-oriented, albeit in a different way than languages such as Java or C ++.

In fact, JavaScript is said to be prototype oriented, because each object inherits functionality from another object called a prototype.

The success of JavaScript is also due to the presence of numerous libraries and frameworks such as jQuery, Vue, React, AngularJS etc .., which allow you to develop powerful web applications.

In the following lessons of the JavaScript tutorial, present on the Creative Coding platform, we will study applications that use some JavaScript libraries and frameworks.

We mention some of the most important frameworks:

Bootstrap – https://getbootstrap.com/ it is used for CSS but the DATA API can be integrated.

Pure – https://purecss.io/

Backbone.js – https://backbonejs.org/

AngularJS – https://angularjs.org/

Ember – https://emberjs.com/

Canjs – https://canjs.com/

Why insert JavaScript inside HTML pages?

There can be many reasons:

Validate forms (html modules);
Manage events within a page;
Add effects to the pages (such as slideshow, photogallery);
Open additional windows, especially for advertising purposes;
Create a responsive menu for mobile devices;

For this and many other reasons it is necessary to learn JavaScript!

How is JavaScript inserted into an HTML page?

We continue the introduction to the JavaScript language with the ways of inserting on the page.

There are three input modes:

directly in the html page as code blocks enclosed in the script tag;
or in an external JavaScript sheet which is then linked to the html page (the recommended mode for most of the time);
finally also in online mode, that is, within the html tag (no longer in use).

First mode – insertion in the same html page

The JavaScript code is included in the web page with the tag often after the opening of and before it closes , but it can also be inserted elsewhere on the page.

We also use the type attribute which indicates the type of code you are using, in our case text / javascript, as shown in the example below:

<script type="text/javascript">...</script>

Between the opening and closing tags we insert the functions that must be performed and which will then be called up in the html page.

<script type="text/javascript">
   function nomeFunzione(parametri){
     ...
   }
</script>

Second way – insert in an external file

In this case you insert the link to the external file, most of the time, before closing the body, in order to guarantee the loading of the DOM.

We always use the script tag with the type attribute and the src attribute where we indicate the path to the file.

<script type='text/javascript' src='script.js'></script>

Third way – online insertion

This mode is no longer in use, but it is useful to know that the code can be inserted, for example, in an html tag. Here is a simple example:

<h1 onclick="changeText('Coding Creativo')">....</h1>

Let’s continue our JavaScript tutorial by making another simple usage example:

!DOCTYPE html>
<html lang="it">
  <head>
    <title>Coding Creativo</title>
    <script type="text/javascript">
        window.alert("Benvenuto su coding creativo");
    </script>
  </head>

 <body>
   <header>
     <h1>Coding Creativo</h1>
     <h2>Coding while having fun</h2>
   </header>

   <article>
     <h2>
       <a name="scratch">Scratch</a>
     </h2>
     <p>
      Scratch is a free programming environment and is ideal for learning coding.<br>The graphical interface is very intuitive and simple to use. <br>On the website <a href="https://www.codingcreativo.it">Coding Creativo</a> you will find many examples and exercises on scratch ...
    </p>
   </article>
   <footer>
     <p>Made by Coding creativo</p>
    </footer>

 </body>
</html>

We save our page and we will see the message as shown in the figure below.

As soon as we click OK, our website will open. So in this way we have inserted a simple window that is displayed before the site is opened (this practice, however, is not widely used, but only serves as a first simple example!).