1.1 Your first JavaScript file¶

What is JavaScript?¶

It is a scripting language. You can write programs and run them on any browser by using JavaScript.

info (1): Scripting languages do not need a compiler.

info (2): Compiler is a program that processes statements written in a particular programming language and turns them into machine language.

What is a JavaScript file?¶

A JavaScript file is a simple text file with js extension.

Examples for JavaScript file names:

script.js
file.js
jquery.js
whateverYouWant.js

How to create a JavaScript file?¶

Simply create a new text file, and name it anything you want with js extension. We will create a JavaScript file with the name script.js

Okay, how to run a JavaScript file?¶

First, create an HTML file: JavaScript needs a browser to run. Let's create a simple HTML file (name it index.html):

Note (1): Make sure to have index.html and script.js in the same folder/directory.

<!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>Your first JavaScript file</title>
    </head>
    <body>
    </body>
</html>

Second, Link JavaScript File Now we need to link the JavaScript we have just created script.js to our newly created index.html.

We can do it by adding a script tag to our index.html.

1- Open script tag before closing body tag in index.html:

....
<script>
</body>

2- Add the src attribute to the script tag:

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

3- Add the name of the JavaScript, we created before, to the src attribute:

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

4- Close the script tag:

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

5- Our file will be like this:

<!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Your first JavaScript file<title>
    </head>
    <body>
      <script src="script.js"></script>
    </body>
  </html>

Third, Add some code to the script.js: Add the following code to the script.js file (and save it):

alert("Hi there, I come from the JavaScript file you have just created");

Now open the index.html file in the browser. WOW! A pop-up will show up saying: Hi there, I come from the JavaScript file you have just created. You have successfully written your first JavaScript code, Congratulation!

Well, How does it work?

The web browser reads the HTML file index.html line by line.
When it finds the <script> tag, it loads the file mentioned in the src attribute script.js.
It reads the code in the script.js line by line.
It executes the code alert. The alert shows a pop-up in the browser with the message mentioned enclosed in the quotation marks alert('Message')
It is just as simple as that.

info (3): In fact, every browser has a program that can read and execute JavaScript codes. This program is called an engine. In the Chrome web browser, this engine is called V8.

JavaScript code in the HTML file¶

We can include JavaScript code in the HTML file. Let's edit our index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Your first JavaScript file</title>
  </head>
  <body>
    <script>
      alert("Hi there, I come from the JavaScript file you have just created");
    </script>
  </body>
</html>

Notice that the src attribute is removed from the script tag. And the alert line is added inside the script tag. Open index.html in the browser and you will get the same result as before.

How does it work?

The web browser reads the HTML file index.html line by line.
When it finds the <script> tag, it loads the code inside the script tag.
It reads that code line by line.
It executes the code alert.

Another way to run JavaScript code¶

Are you being lazy? You do not want to add any script tag to any HTML file. Well!

1- Open any website like Google.

2- Right-click anywhere on the page, and click on inspect.

3- A new panel will be displayed on the page, select the console tab.

4- You can see blinking cursor below, write your code there:

alert("Hi there, I come from the JavaScript file you have just created");

5- Press enter and the pop-up shows up.

6- Great, right?! Now refresh the page. All the code is gone!!

Important: It is useful to test your code in the console. But keep in mind, this code will not be saved. Every time you refresh the page, you will lose everything you have written in the console.