DAY-2
External
JavaScript files in HTML
There
is a flexibility given to include JavaScript code anywhere in an HTML document.
However the most preferred ways to include JavaScript in an HTML file are as
follows −
·
Script in <head>...</head> section.
·
Script in <body>...</body> section.
·
Script in <body>...</body> and
<head>...</head> sections.
·
Script in an external file and then include in
<head>...</head> section.
JavaScript in <head>...</head> section
If you want to have a
script run on some event, such as when a user clicks somewhere, then you will
place that script in the head as follows −
<html>
<head>
<scripttype="text/javascript">
<!--
functionsayHello(){
alert("Hello World")
}
//-->
</script>
</head>
<body>
<inputtype="button"onclick="sayHello()"value="Say Hello"/>
</body>
</html>
This code will produce the following results –
Click here for the result
Say Hello
|
JavaScript in
<body>...</body> section
If you need a script to
run as the page loads so that the script generates content in the page, then
the script goes in the <body> portion of the document. In this case, you
would not have any function defined using JavaScript. Take a look at the following
code.
<html>
<head>
</head>
<body>
<scripttype="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
This code will produce the following results –
Hello World
This is web page body
JavaScript in <body>
and<head> Sections
You can put your
JavaScript code in <head> and <body> section altogether as follows
−
<html>
<head>
<scripttype="text/javascript">
<!--
functionsayHello(){
alert("Hello World")
}
//-->
</script>
</head>
<body>
<scripttype="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<inputtype="button"onclick="sayHello()"value="Say Hello"/>
</body>
</html>
This code will produce the following results –
Hello World
Say Hello
|
JavaScript in External File
Ø Writing JavaScript within HTML code sometimes creates
confusion, and changing HTML files may also affect JavaScript files. So better
to segregate HTML and JavaScript files, so that chanes in one file does not
affect other files.
Ø Importing an external file is relatedly painless.
First the file you are importing must be vslid JavaScript and only JavaScript.
Second the file must have the file extension “.js”. lastly you must know the
location of the file.
Ø To include an external JavaScript file in your HTML
codethe script tag used
with its src attribute.
<html>
<head>
<scripttype="text/javascript"src="filename.js"></script>
</head>
<body>
.......
</body>
</html>
Ø For example, you can keep the following content
in myjs.js file and then
you can use sayHello function
in your HTML file after including the filename.js file.
The external myjs.js file contents are:
functionsayHello(){
alert("Hello World")
}
HTML &JavaSript code:
<html>
<head>
<scriptsrc="myjs.js"></script>
</head>
<body>
<input type=”button”
onclick=”sauHello()” value-“Click Me!”>
</body>
</html>
Now
this HTML file imports myjs.js file and as a result it can access sayHello()
function from HTML button element.
Practical:
Write
a JavaScript code to use external java script files in HTML and display the
information with java script ?
No comments:
Post a Comment
Give your valuable feedback