Scribd
Upload
5 views

HTML Scripts

This document provides an introduction to web design focusing on HTML scripts, specifically JavaScript. It explains how to embed scripts within HTML documents, the importance of placing scripts correctly for performance, and how to link external JavaScript files. Additionally, it covers the <noscript> element for users without JavaScript support, ensuring alternative content is displayed.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

HTML Scripts

This document provides an introduction to web design focusing on HTML scripts, specifically JavaScript. It explains how to embed scripts within HTML documents, the importance of placing scripts correctly for performance, and how to link external JavaScript files. Additionally, it covers the <noscript> element for users without JavaScript support, ensuring alternative content is displayed.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

INTRODUCTION TO WEB DESIGN

DCIS1204
SEMISTER TWO
YEAR ONE
HTML SCRIPTS

A script is a small piece of program that can add interactivity to your website. For example, a script
could generate a pop-up alert box message, or provide a dropdown menu. This script could be
Javascript or VBScript.
You can write your Event Handlers using any of the scripting language and then you can trigger
those functions using HTML attributes.
How to Add Scripts
The <script> element is used to embed script or reference to an executable script within an HTML
document. Scripts are usually nested within the <head> element to ensure that the script is ready to
run when it is called. However, there is no restriction, and the script could be placed anywhere in
the document.
If you need the same scripts to be available for many web pages, then you should place scripts into
a separate file, then call it from the HTML document.
You can insert the following piece of code with the <script> tag into your HTML code:
HTML SCRIPTS

Embedding JavaScript
To embed JavaScript in an HTML file, just add the code as the content of a <script> element.
The JavaScript in the following example write a string of text to a web page.
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Embedding JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
</body>
</html>
HTML SCRIPTS

NOTE:Ideally, script elements should be placed at the bottom of the page, before the closing body
tag i.e. </body>, because when browser encounters a script it pauses rendering the rest of the page
until it parses the script that may significantly impact your site performance.
Calling External JavaScript File
You can also place your JavaScript code into a separate file (with a .js extension), and call that file
in your HTML document through the src attribute of the <script> tag.
This is useful if you want the same script available to multiple documents. It saves you from
repeating the same task over and over again and makes your website much easier to maintain.
Syntax
<script type="text/javascript" src="scripts.js"></script>
HTML SCRIPTS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking External JavaScript</title>
</head>
<body>
<div id="greet"></div>
<script src="hello.js"></script>
</body>
</html>
HTML SCRIPTS

Note: When the src attribute is specified, the <script> element must be empty. This simply means
that you cannot use the same <script> element to both embed the JavaScript and to link to an
external JavaScript file in an HTML document.
NB: JavaScript files are normal text files with .js extension, such as "hello.js". Also, the external
JavaScript file contains only JavaScript statements; it does not contain the <script>...</script>
element like embedded JavaScript.

The HTML noscript Element


The <noscript> element is used to provide an alternate content for users that have either disabled
JavaScript in their browser or have a browser that doesn't support client-side scripting.
This element can contain any HTML elements, aside from <script>, that can be included in the
<body> element of a normal HTML page.
HTML SCRIPTS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript>
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
HTML SCRIPTS

NB: The content inside the noscript element will only be displayed if the user's browser doesn't
support scripting, or scripting is disabled in the browser.

You might also like