Script Tag: Html Web Development Tutorial Series Part 18

HTML script element

The Script Tag

The HTML script tag, AKA, script ELEMENT defines client-side scripts (Javascript). Javascript is used for many things in web development like form validation, manipulating IMAGES, and dynamic content. It can be used in two ways–either the script tags hold scripting statements or it points to an external script file through the use of the src ATTRIBUTE. Javascript enables web developers to create dynamic and interactive websites. Scripts can be placed anywhere inside of the document, but when the browser runs into a script; it will switch into a “Javascript Mode”. After the code inside of the script tags is executed, the browser will then continue to read and render the rest of the page. Remember, the browser reads HTML from top to bottom. So, placement of the script is important. You will want to avoid things like; a button that will do nothing when clicked by the user because the javascript hasn’t executed yet. In the exercise below, we will run a script in the middle of the HTML body element.

index.html EXAMPLE 1: SCRIPT ELEMENT INSIDE BODY

HTML script element inside body element

DISPLAYED PAGE EXAMPLE 1-1: BEFORE BUTTON IS CLICKED

HTML script tags inside of body element displayed page

DISPLAYED PAGE EXAMPLE 1-2: AFTER BUTTON IS CLICKED

HTML script tag inside of body element displayed page 1-2

Some COMMENTS were added to the exercise to better explain the code. We begin by adding a few HEADINGS, P ELEMENTS, and a button. The button will change the text in the paragraph immediately above it. We do this by using the ID attribute with a value of “exercise” in the opening tag of the p element. The button has an onclick attribute with a value of “myFunction();“. This attribute will initiate the Javascript function named myFunction when the button is clicked. Finally, in between the script tags, we have our Javascript function. The function selects the HTML element by using the document.getElementById(“id”) method. And as we discussed, the id is “exercise”. That goes in between the parenthesis. .innerHTML is a property used to insert content to a specified id of an element. Javascript! is the content that we are inserting. NOTE: There are other ways of targeting HTML elements. The document.getElementById(“id”) method is one of the most common ways.

Referring to the Displayed Page 1-1 image, you can see the paragraph above the button says “What programming language are we using to change the content of this paragraph?”. After the “Click for answer!” button is clicked, triggering the Javascript function, the paragraph’s text changes to “Javascript!”, as seen in image 1-2. NOTE: This isn’t a Javascript tutorial. So, don’t worry about fully understanding the programming. The purpose of this lesson is to get you better acquainted with how scripts are run in HTML documents, and how the script element is used.

You should use an external script file when you want to run some Javascript in several pages within a website. The src (source) attribute is used to point to the external file. FYI, The <noscript> tag defines an alternate content for browsers that don’t support Javascript or for users that have scripts disabled in their browser. See the images below, for an example.

index.html EXAMPLE 2: SCRIPT ELEMENT: LINK TO AN EXTERNAL SCRIPT FILE

HTML script tag: external script file

myscripts.js EXAMPLE 2: CREATE AN EXTERNAL SCRIPT FILE

External Javascript file

DISPLAYED PAGE EXAMPLE 2-1: BEFORE BUTTON IS CLICKED

HTML script tag using external script file displayed page

DISPLAYED PAGE EXAMPLE 2-2: AFTER BUTTON IS CLICKED

external script after executed displayed page

In the above exercise, the HTML is cleaned up a bit. The script tags and function are removed from the body element. In the HEAD ELEMENT, we add a script tag that links to an external Javascript file named “myscripts.js“. Next, we create this document by selecting “File”, “new”, and “save”. The file name is myscripts.js, and if you’re using the same WEBSITE FOLDER SETUP as this tutorial series; it is saved in the “my-website” folder. Don’t forget to click the “save as type” and select Javascript file in the save menu. The script that was removed from index.html gets pasted into this .js document. NOTE: A Javascript file does not have <script> tags in it. It is saved as a .js file, so it’s already established that it is script. When we run the index.html document , we have the exact same result as in Example 1, but our script is running from an external file. If you were running this script in multiple pages; you wouldn’t want to type it over and over again for each. This is one of the main reasons for using an external script file.

The URL for the script element’s src attribute can point at either a file within the same website (relative URL) or another website (absolute URL). There will be more information on this in a Javascript tutorial. That finishes up this lesson on the HTML script element. You should have a good understanding of how it works; when to run a script directly inside of the HTML code; and when to run from an external file. Javascript is used for many things in web development. Things like special effects, animations, client-side control, server-side programs, and even game development are done with this awesome object-oriented programming language. Thanks for reading, we’ll see you next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>The Script Element</title>
<script src="myscripts.js"></script>
</head>
<body>

<h1>The Script Element</h1>
<p>This is a simple paragraph element.</p><br />

<!-- THE "exercise" id IS HOW WE TARGET THIS PARAGRAPH'S TEXT TO BE CHANGED-->
<p id="exercise">What programming language are we using to
change to content of this paragraph?</p>

<!-- THE BUTTON BELOW USES THE onclick ATTRIBUTE TO RUN THE myFunction FUNCTION -->
<button type="button" onclick="myFunction()">Click for answer!</button>

<br />
<h1>Another heading element</h1>
<p>Another paragraph element.</h1>

</body>
</html>

myscripts.js Source Code


function myFunction() {
document.getElementById("exercise").innerHTML = "Javascript!";
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: