JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 6. Inserting JavaScript Code

Up to this point, you are now familiar with the basics of JavaScript. Now, you will need to learn how to integrate your script in your web page. Also, starting at this chapter, you will need to use your text editor.

The subsequent chapters will be teaching you on how to take advantage of code blocks such as functions, conditional statements, and loop blocks. Of course, you can still use the developer console.

Anyway, proceed into learning on how to integrate your future scripts in your web pages.

Where to Place JavaScript

Primarily, JavaScript scripts are placed inside web pages’ HTML codes. It is common that scripts are inserted inside script tags. There are other ways to insert your JavaScript code within your page, of course.

Within the Page

In case your script is too short, you can just insert it inside the script tag in your document. Usually, the script tag is placed inside the head tag. However, script tags can be placed inside your html’s body or even at the end of the document.

Note: The location of the script in the page can change your script’s behaviour.

Within Your Server as a Separate File

If your script is too long, you can place your script inside a .js file within your server. If you save it in a separate file, you will not need to put script tags on it, by the way.

To integrate that script into your web page, you can simply link it in your script tag by indicating its location in the src attribute. For example:

<!DOCTYPE html>

<html>

<head>

<title> A Sample Web Page </title>

</head>

<body>

Insert Page Content Here

</body>

</html>

Of course, just like with the previous method, you are free to place the script in any part of your HTML document.

The main advantages of using this method are that your web page document will not be too cluttered with scripts and you can easily reuse or reintegrate your script into multiple pages without doing some nitty-gritty work of copy pasting your code in each web page that needs your script.

Also, you can update the script without worrying that you might mess up your HTML codes in your pages. And if ever you become accustomed in using server-side scripting to generate dynamic content, putting your script apart from your content will be a huge convenience.

Within Content Delivery Networks (CDNs) as a Separate File

If you are worried about your website’s performance and page load issues, then placing your JavaScript files in a Content Delivery Network (also called Content Distribution Network) can help you reduce latency in your website, especially if you are receiving a lot of traffic in the web.

Content Delivery Networks are servers or computers with a sole purpose of providing commonly accessed content and files for websites. Usually, they are sub-domain sites that often have a domain prefix of cdn.

Aside from that, most JavaScript frameworks are best used with CDNs. Fortunately, big companies like Google cooperate with some of the most popular frameworks in JavaScript (i.e., jQuery).

Sample Web Page File

For now, forget about practicing JavaScript codes within your page. Start with a simple web page file just like the one below.

Code Sample: 1 (HTML TEMPLATE)

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Practice File</title>

</head>

<body>

<h1>JavaScript Practice File</h1>

<p>This is an example paragraph in your web page.</p>

</body>

</html>

Copy this code in your notepad and save it as an .htm file in your computer. You do not need to upload this web page copy yet on the Internet. You can just open it on Google Chrome and your JavaScript codes will work — just like with regular HTML creation.

By the way, for easier navigation and referencing, all example codes within this book will be accessible through the table of contents.

Sample JavaScript Usage

You’re going to start to learn some practical use of JavaScript. And for starters, you will learn how to insert popup boxes in your webpage. Copy this example:

Code Sample: 2 (WINDOWS.ALERT)

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Practice File</title>

window.alert(“Hello World!”);

</script>

</head>

<body>

<h1>JavaScript Practice File</h1>

<p>This is an example paragraph in your web page.</p>

</body>

</html>

When you save this file and open it on your browser, it will load the page and a popup box that says, “Hello World!” will appear. This popup box is usually called as message box, popup box, or alert window by web developers. For clarity in this book, it will be called as alert window.