JavaScript Where To

❮ Prev Next ❯

This chapter will explain where to locate or link JavaScript in order to start running it.

To dive into Javascript all you need is a simple text-editor and a browser.

Step 1. Choose an HTML editor.

In windows, there are several HTML editors that web developers use for coding, such as: Notepad++, Visual Studio Code, Sublime, and WebStorm

For beginners, Notepad (PC) is a simple and easy-to-use under your accessories and Linux and mac users have a similar editor.

But if you find it difficult to setup your machine you can try our online text editor by clicking it, it is very simple and fortable to use.

Step 2. Create a Repository or Folder.

Before starting writing code you have to create a folder where your file will going to be store in order to avoid combining your file with unwanted files. name your folder with the anything for better identification but for the naming convention make sure to named it with useful name: like my website or cookies website or something very useful.

Step 3. Open your chosen HTML editor.

Launch the HTML editor that you have chosen to use for creation of website and locate the folder you have created.

Step 4. Create and Save HTML file.

Now that you have open the folder you created on your choosen text editor, to create a file move the cursor to the editor menu and click on file then new text file

After creation of the file you need to save it, to do that move the cursor to the file and right click on it you will see options, then click on rename and chnage the name to something meaningful like: index.html

Note: you can give it any name you want but must end with the extension of .html that is the only way the text editor will understand that you are going to write html

Step 5. Write your HTML code

Type or copy and paste your HTML code into the HTML editor. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

You can try our online Try it text editor to see the result immediately without facing all those issues of setting up your environment.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Welcome to CodingKoleji</h1>
        <p>Hello World!</p>
      </body>
  </html>

Step 5. Check your HTML file in a browser.

Open the folder and right-clicking on the file and choosing "Open with" and selecting a browser (e.g. Google Chrome, Opera, Firefox).

By following these steps, you can create web pages using an HTML editor, check them in a browser, and validate your HTML code to ensure its correctness.

Now that you know how to create a basic HTML file let's try start showing you how to add or link JavaScript file into the HTML file. We can do that by following two steps as follow:

  • Inline JavaScript
  • Internal JavaScript
  • External JavaScript

Inline JavaScript

Inline JavaScript can be place within the HTML open tag only and the below is the syntax of how to do that. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <button onClick="alert('Hello World')">Click Me!</button>
  </body>
</html>

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Welcome to CodingKoleji</h1>
        <button onClick="alert('Hello World')">Click Me!</button>
      </body>
  </html>

Internal JavaScript

To define a Javascript block in your web page, simply use the following block of HTML. 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <button onClick="sayHello()">Click Me!</button>
    <script>
      // you line of code
      function sayHello(){
        alert("Hello World")
      }
    </script>
  </body>
</html>

You can place these script blocks anywhere on the page that you wish, there are some rules and conventions however. If you are generating dynamic content as the page loads you will want the script blocks to appear where you want their output to be. For instance, if I wanted to say "Hello World!" I would want my script block to appear in the <body> area of my web page and not in the <head> section.

Unless your scripts are generating output as the page loads, good practice says that you should place your scripts at the very bottom of your HTML. The reason for this is that each time the browser encounters a <script> tag it has to pause, compile the script, execute the script, then continue on generating the page. This takes time so if you can get away with it, make sure the browser hits your scripts at the end of the page instead of the start.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <h1>Welcome to CodingKoleji</h1>
        <button onClick="sayHello()">Click Me!</button>
        <script>
          // you line of code
          function sayHello(){
            alert("Hello World")
          }
        </script>
      </body>
  </html>

External JavaScript

External Javascript is where things get interesting. Any time you have a block of code which you will want to use on several different web pages you should place that block in an external Javascript file.

There's nothing fancy about an external Javascript file. All it is, is a text file where you've put all your Javascript

Basically everything that would ordinarily go between the <script> tags can go in your external file.

Note that between was stressed, you can not have the <script> </script> tags themselves in your external file or you will get errors.

The biggest advantage to having an external Javascript file is that once the file has been loaded, the script will hang around the browser's cache which means if the Javascript is loaded on one page then it's almost a sure thing that the next page on the site the user visits will be able to load the file from the browser's cache instead of having to reload it over the Internet (This is an incredibly fast and speedy process).

Including an external file is basically the same as doing an in-line script, the only difference is that you specify a filename, and there's no actual code between <script> and </script> 


<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <button onClick="sayHello()">Click Me!</button>
    <script type="txt/javascript" src="script.js"></script>
  </body>
</html>

Now that we created HTML file and linked it will JavaScript file. Let's create the script.js file and put some code on it. you can do so by typing or copy the below code and paste it on your file. 


function sayHello(){
  alert("Hello World")
}

Now you can run the code on your choosing browser and click the button you will see a pop up message saying Hello Worldappear on your screen.

When the browser encounters this block it will load script.js, evaluate it, and execute it. Like in-line scripts above you can place this block anywhere you need the script to be and like internal scripts you should place these as close to the bottom of the web-page as you can get away with.

The only difference between internal Javascript blocks and external Javascript blocks is that an external Javascript block will pause to load the external file. If you discount that one thing, there's no procedural difference between the two!

❮ Prev Next ❯