External javascript in html
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 written
using Javascript or VBScript.
You can write various small functions, called event
handlers, using any of the scripting language and then you can trigger those
functions using HTML attributes. Now a days only Javascript and associated
frameworks are being used by most of the web developers, VBScript is not even
supported by various major browsers.
You can keep
Javascript code in a separate file and then include it whereever it’s needed,
or you can define functionality inside HTML document itself. Let's see both the
cases one by one with suitable examples.
External
Javascript If you are going to define a functionality which will be used in
various HTML documents then it’s better to keep that functionality in a
separate Javascript file and then include that file in your HTML documents. A
Javascript file will have extension as .js and it will be included in HTML
files using <Script> tag
.
<html>
<head>
<title>Javascript External
Script</title>
<script
src="/html/script.js"
type="text/javascript"/></script>
</head>
<body>
<input
type="button" onclick="Hello();" name="ok"
value="Click Me" />
</body>
</html>
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
but inside <script> tag
<!DOCTYPE html>
<html>
<head>
<title>Javascript Internal Script</title>
<base href="http://www.tutorialspoint.com/"
/>
<script type="text/javascript">
function Hello(){
alert("Hello,
World");
}
</script>
</head>
<body>
<input type="button"
onclick="Hello();" name="ok" value="Click Me"
/>
</body>
</html>
EventHandler()
Event
handlers are nothing but simply defined functions which can be called
against
any mouse or keyboard event. You can define your business logic
inside
your event handler which can vary from a single to 1000s of line code.
Following
example explains how to write an event handler. Let's write one
simple
function EventHandler() in the header of the document. We will call this
function
when any user brings mouse over a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base
href="http://www.tutorialspoint.com/" />
<script type="text/javascript">
function EventHandler(){
alert("I'm
event handler!!");
}
</script>
</head>
<body>
<p onmouseover="EventHandler();">Bring
your mouse here to see an alert</p>
</body>
</html>
Scripts from Older
Browsers
Although most (if not
all) browsers these days support Javascript, but still
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,
you can simply place
HTML comments around the script as shown below.
JavaScript Example:
<script type="text/javascript">
<!--
document.write("Hello
Javascript!");
//-->
</script>
VBScript Example:
<script
type="text/vbscript">
<!--
document.write("Hello
VBScript!")
'-->
</script>
The <noscript> Element
You can also provide alternative info to the
users whose browsers don't
support scripts and for those users who have
disabled script option their
browsers. You can do this using the
<noscript> tag.
Join our telegram channel=
Indianhtmlandcss
Learning made easy, html CSS and JavaScript for web designing and development..
https://t.me/onlinehtmlcss
Comments