JavaScripts make HTML pages more dynamic and
interactive.
The HTML <script> Tag:
The
<script> tag is used to define a client-side script, such as a
JavaScript.
The
<script> element either contains scripting statements or it points to an
external script file through the src attribute.
Common
uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
The script below writes Hello World! to the HTML
output:
Example
<script>
document.write("Hello World!")
</script>
document.write("Hello World!")
</script>
The HTML <noscript> Tag:
You can also
provide alternative info for users whose browsers don't support scripts and for
users who have disabled scripts. You do this using the <noscript> tag.
JavaScript Example:
<script
type="text/javascript">
<!--
document.write("Hello
Javascript!");
//-->
</script>
<noscript>Your browser does not support
Javascript!</noscript>
VBScript Example:
<script
type="text/vbscript">
<!--
document.write("Hello
VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>
The
<noscript> tag is used to provide an alternate content for users that
have disabled scripts in their browser or have a browser that doesn't support
client-side scripting.
The
<noscript> element can contain all the elements that you can find inside
the <body> element of a normal HTML page.
The
content inside the <noscript> element will only be displayed if scripts
are not supported, or are disabled in the user's browser:
Example
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
JavaScript can write directly into the HTML output stream:
document.write("<p>This is a
paragraph</p>");
JavaScript can react to events:
<button
type="button" onclick="myFunction()">Click
Me!</button>
JavaScript can manipulate HTML styles:
document.getElementById("demo").style.color="#ff0000";
External Script:
If you have to use
a single script functionality among many HTML pages then it is a good idea to
keep that function in a single script file and then include this file in all
the HTML pages. You can incluse a style sheet file into HTML document using
<script> element. Below is an example:
<head>
<script src="yourfile.js"
type="text/javascript" />
</head>
Internal Script:
You can write your
script code directly into your HTML document. Usually we keep script code in
header of the document using <script> tag, otherwise there is no
restriction and you can put your source code anywhere in the document. You can
specify whether to make a script run automatically (as soon as the page loads),
or after the user has done something (like click on a link). Below is an
example this would write a Hello
Javascript! message as soon
as the page loads.:
<head>
<title>Internal Script</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello Javascript!")
</script>
</body>
This will produce following result:
Advertisements
Hello Javascript!
Writing Event Handler:
It is very easy to
write an event handler. Following example explains how to write an event
handler. Let's write one simple function myAlert in the header of the document. We will
call this function when any user will bring mouse over a paragraph written in
the example.
<head>
<title>Event Handler Example t</title>
<script type="text/javascript">
function myAlert()
{
alert("I am an event handler....");
return;
}
</script>
</head>
<body>
<span onmouseover="myAlert();">
Bring your
mouse here to see an alert
</span>
</body>
Now this will produce following result:
Bring your
mouse over this line and see the result:
Advertisements
Bring your mouse here to see an alert
Hide Scripts from Older Browsers:
Athough most (if
not all) browsers these days support scripts, some older browsers don't. If a
browser doesn't support JavaScript, instead of running your script, it would
display the code to the user. To prevent this from happening, you can simply
place HTML comments around the script. Older browsers will ignore the script,
while newer browsers will run it.
JavaScript Example:
<script
type="text/javascript">
<!--
document.write("Hello
Javascript!");
//-->
</script>
VBScript Example:
<script
type="text/vbscript">
<!--
document.write("Hello
VBScript!")
'-->
</script>
Default Scripting Language:
You can specify a
default scripting language for all your script tags to use. This saves you from
having to specify the language everytime you use a script tag within the page.
Below is the example:
<meta http-equiv="Content-Script-Type"
content="text/JavaScript" />
Note that you can
still override the default by specifying a language within the script tag.
html - <!-- commenting scripts -->
Scripting languages such as
JavaScript and VBScript must be commented out as well. You will learn that it
is only once they are placed within the <script> tags that the browser
executes the scripts without causing errors.
HTML Code:
<script>
<!--
document.write("Hello World!")
//-->
</script>
With this example, we are
jumping far ahead. Just be sure you understand when to use comments and where
to look for them. They are a very useful tool for any large HTML project.
How to insert a script into an HTML document:
<!DOCTYPE
html>
<html>
<body>
<script>
document.write("Hello
World!")
</script>
</body>
</html>
How to handle browsers that do not support scripting,
or have scripting disabled:
<!DOCTYPE
html>
<html>
<body>
<script>
document.write("Hello
World!")
</script>
<noscript>Sorry,
your browser does not support JavaScript!</noscript>
<p>A
browser without support for JavaScript will show the text in the noscript
element.</p>
</body>
</html>
result:
Hello
World!
A browser without support for JavaScript will
show the text in the noscript element.HTML Script Tags:
HTML <script> Tag
Example
Write "Hello world" with JavaScript:
<script>
document.write("Hello World!")
</script>
Definition and Usage
The
<script> tag is used to define a client-side script, such as a
JavaScript.
The
<script> element either contains scripting statements, or it points to an
external script file through the src attribute.
Common uses for JavaScript
are image manipulation, form validation, and dynamic changes of content.
Tips and Notes
Note: If the "src" attribute is present, the
<script> element must be empty.
Tip: Also look at the <noscript> element for users that have disabled
scripts in their browser, or have a browser that doesn't support client-side
scripting.
Note: There are several ways an external script can be
executed:
- If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
- If async is not present and defer="defer": The script is executed when the page has finished parsing
- If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
HTML <noscript> Tag:
Example
Use of the <noscript>
tag:
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support
JavaScript!</noscript>
Definition and Usage
The
<noscript> tag defines an alternate content for users that have disabled
scripts in their browser or have a browser that doesn�t support script.
The
<noscript> element can be used in both <head> and <body>.
When used
inside the <head> element: <noscript> must contain <link>,
<style>, and <meta> elements.
The
content inside the <noscript> element will be displayed if scripts are
not supported, or are disabled in the user�s
browser.
Tips and Notes
Tip: It is also a good practice to use the comment tag to "hide" scripts from
browsers without support for client-side scripts (so they don't show them as
plain text):
<script>
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
No comments:
Post a Comment