Scribd
Upload
20 views

Lecture 15 - HTML Javascript

This document discusses using JavaScript in HTML documents. It explains that JavaScript can be used to add interactivity to websites through functions like pop-up boxes or dropdown menus. JavaScript code can be included externally in .js files or internally within <script> tags. Event handlers are functions that are triggered by HTML events like mouse clicks, and are used to define interactive behavior. The document provides examples of including external and internal JavaScript, and using event handlers.

Uploaded by

Tanveer Ahmed Hakro
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

Lecture 15 - HTML Javascript

This document discusses using JavaScript in HTML documents. It explains that JavaScript can be used to add interactivity to websites through functions like pop-up boxes or dropdown menus. JavaScript code can be included externally in .js files or internally within <script> tags. Event handlers are functions that are triggered by HTML events like mouse clicks, and are used to define interactive behavior. The document provides examples of including external and internal JavaScript, and using event handlers.

Uploaded by

Tanveer Ahmed Hakro
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

HTML Javascript

Dr. Fareed Ahmed Jokhio


HTML Javascript
• 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.
HTML Javascript
• 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.
HTML Javascript
• 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.
HTML Javascript
• 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.
External Javascript
• Consider we define a small function using
Javascript in script.js which has following code:
• function Hello()
• {
• alert("Hello, World");
• }
• Now let's make use of the above external
Javascript file in our following HTML document:
External Javascript
• <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>
External Javascript
• This will produce following result.

• When you will click the button, you will get


the following result.
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 but inside
<script> tag.
Internal Script
• <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>
Internal Script
• This will produce following result.

• When you will click the button, you will get


the following result.
Event Handlers
• 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.
Event Handlers
• 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.
Event Handlers
• <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>
Event Handlers
• Now this will produce following result.

• When you will bring your mouse over this line,


you will see the following result.
Hide 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.
Hide Scripts from Older Browsers
• JavaScript Example:
• <script type="text/javascript">
• <!--
• document.write("Hello Javascript!");
• //-->
• </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.
The <noscript> Element
• JavaScript Example:
• <script type="text/javascript">
• <!--
• document.write("Hello Javascript!");
• //-->
• </script>
• <noscript>Your browser does not support
Javascript!</noscript>

You might also like