Print bookPrint book

Submodule 6.2: Simple JavaScript file

Site: ΕΛ/ΛΑΚ Moodle
Course: Web Design and Digital Content Production
Book: Submodule 6.2: Simple JavaScript file
Printed by: Guest user
Date: Thursday, 21 November 2024, 10:48 PM

Description

  • JavaScript in HTML file
  • alert interaction
  • Variables
  • prompt interaction
  • Comments in JavaScript
  • Developer tools (console)

Table of contents

Where do we put JavaScript code in the HTML code;

JavaScript can be connected to the HTML file using three different ways:

  • Write your JavaScript at the head of the HTML document
  • Write your JavaScript at the end of the body of the HTML document
  • Use an external sheet and reference your JavaScript either at the head or at the end of the body of the HTML document
In the HTML file

When we use the first or the second way, we need to wrap our code inside script tags, <script>.. </script>.

In general, when we write our JavaScript directly at the HTML is preferable to put it at the end of the body rather than at the head. This is because we want our page to have completed the loading so the JavaScript can function properly.

<!DOCTYPE html>
<html>
  <head>
        . . . <script> load JavaScript libraries here </script>. . .
  </head>
  <body>
        . . . <script> your JavaScript code typically goes at the end of body </script>. . .
  </body>
</html>

External file

When we use an external sheet we do NOT put the script tags. We just write our JavaScript. Again we prefer to reference our JavaScript at the end of the HTML body.

<!DOCTYPE html>
<html>
  <head>
        . . . <script> load JavaScript libraries here </script>. . .
  </head>
  <body>
        . . . <script type="text/javascript" src="js/myscript.js"></script>. . .
  </body>
</html>

Over the three available ways, the 3rd one, usage of an external sheet, is the preferable way.
One reason for that is because, with this, we separate markup from code. Moreover, it is easier to read the files and do changes. Also, it helps the page to load more quickly.

For more information: https://www.w3schools.com/js/js_whereto.asp

The "alert" JavaScript file

We will put our code on the head of the HTML file:

It is the simple interaction "alert".

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of alert()</title>
    <script>
        alert("Hello world");
    </script>
  </head>
  <body>
  </body>
</html>

Copy and paste the code into your editor to see the output. Save the file in the folder "temporaryFiles". Next, use the the Live preview in the editor or open the file (Ctrl+O) in your Chrome. 

alert popup

Variables. The "prompt" interaction

What is a variable in JavaScript?

You can imagine variables as boxes.

Variables as boxes
You can create a variable and put something in it.
Just like if you have a box and you put something on it.
You can take that out any time you want and use it. Later you can put something else in the box.

This is exactly what we do with variables. We use variables all the time in JavaScript so soon you will become very familiar with them.
Variables are symbolized with “var” followed by a name of your choice. The name by definition can be anything you want. However, in general, we use names that describe our actions.
Names cannot start with a number and are case sensitive. This means that var name is NOT the same with var Name.

Example

We will use three things, a variable, and two JavaScript methods. 
JavaScript methods are actions that can be performed on objects.  Here we will use the prompt() andthe document.write() methods.

  • With the prompt() method a box is displayed were the user writes his input.
  • With the document.write() method we can write something on the document.

So, in this case, we will use prompt() together with document.write() method to welcome a visitor to our page. Notice that we use double quotes "" for text but not for variables.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Example of prompt()</title>
   </head>
   <body>
     <h3> Example of prompt()</h3>
     <script>
         var visitorName;
         visitorName = prompt("What is your name?");
         document.write(" Welcome to my page " +visitorName + "!" );
     </script>
   </body>
</html>

Copy and paste the code into your editor to see the output. Save the file in the folder "temporaryFiles". Next, use the the Live preview in the editor or open the file (Ctrl+O) in your Chrome. 

For more information: https://www.w3schools.com/js/js_variables.asp

Comments in Javascript

There are two ways to write comments in our JavaScript code.
The first way is to use // your comments .
The above can be used to comment only one line of code. Everything that is between the two tags will be ignored by JavaScript.

The second way is to use /* your comments */.
We use this when we want to comment multiple lines. Again, everything between the two tags is ignored by JavaScript.

For more information: https://www.w3schools.com/js/js_comments.asp

Developer tools (console)

Why do we need console?


The console is a very useful tool to find an error in our code.
In general, in JavaScript, as in any language, we can make syntax errors. This happens very often even to very experience programmers.

Browsers try to hide the error. This is because is not useful for a user to know that there is an error.
However, JavaScript stops running when it hits the section that contains the error.

As programmers, we want to know where the error happened or what error we have, in order to fix it. This is where we need the console.

Example

Copy and paste the following code into your editor to see the output. Save the file in the folder "temporaryFiles". Next, open the file (Ctrl+O) in your Chrome.  

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of alert()</title>
    <script>
        alert("Hello world";
    </script>
  </head>
  <body>
  </body>
</html>

Where can we find the console?

  • Go to Chrome.
  • Right click and chose “Inspect”. Chose the “Console” box. You are now in the console.

What do you see in the browser?

  • Nothing. The browser hides the errors.
  • Use the console in the developer tools to find the error.
  • What is the error? 
    Uncaught SyntaxError: missing ) after argument list
    .Notice that the console shows the file and the line where the error appears!
  • Fix the error in order for the code to work properly.

The console is an amazingly useful tool and you can do various operations with it.
For example, go to the console and write 5+5 or alert(“Hi”) and hit enter. What do you see?

Exercise

Exercise

  1. Open your editor, create a new file and save it as exersice06.2.html in the folder "Exercises".
  2. You have to use two variable and two prompt() interactions.
  3. Modify and save the file. The browser's output should be as shown in the following image:

Solution: