JavaScript- Introduction
What it is and what it does?
What it is? What it does?
It is NOT Java Allows interactive
It is NOT Server-side computing at the
programming client level
Users can see code Supported by IE,
It is a client-side Netscape, firefox etc.
Dynamically changes
programming tool
It is embedded within HTML
Reacts to events
an HTML page
Read and write HTML
JavaScript is case-
sensitive elements
Validates data
Hello World Example
<html>
<body>
<script type="text/javascript">
[Link]("<h1>Hello World! This is
Me</h1>");
</script>
</body>
</html>
Begins with <script type="text/javascript"> and ends with </script>
Another Hello World Example
<html>
<body>
<script type="text/javascript">
alert("Hello World");
</script>
</body>
</html>
Where can you put JavaScript?
You can have more than one <script>
element
Can be placed anywhere inside body or head
of the html document.
Commands in javascript are case sensitive.
Exercise 10: [Link]
<html>
<body>
<script type="text/javascript">
confirm("Do you want to copy the files?");
</script>
</body>
</html>
Note the difference between ALERT and COFIRM
How to put comments?
<html>
<body>
<script type="text/javascript">
// This is single line comments
/* this is multi-line comments especially if
you like to babble along */
[Link]("Hello Me");
</script>
</body>
</html>
Learn to comment your scripts
Creating an interactive page
Use of event programming.
An event is anything that happens to an
object or element of an object.
Click on a button: click event
Select some text: select event
Mouse hovering over: mouseover event
When an event happen, we need to have an
event handler.
Let us create a simple button
<html>
<body>
<h1> Hey you are in luck. Do you need a date for
valentine’s day? </h1>
Type of GUI Button
<form> Identifier
<input type="button" name="button1"
value="Yes! I need a date"/>
</form>
The text that
appear
</body> on the button
</html>
Add event programming - body.
<body>
<h1> Hey you are in luck.. Do you need a date
for valentine’s day? </h1>
<form>
<input type="button" name="button1"
value="Yes! I need a date"
onclick="displayMyMessage()"/>
</form>
</BODY>
</HTML>
Event Handler: onclick="displayMyMessage() "
Add event programming - head.
<HTML>
<HEAD>
<TITLE>Interactive Web Page</TITLE>
<script type="text/javascript">
function displayMyMessage(){
alert("Sorry! Can’t help you today!");
}
</script>
</HEAD>
displayMyMessage: This is a javaScript function declared inside the “head” section
Declaring functions in head
Most event programming handlers activate
some form of javascript functions that is
declared in the “head”
We’ll start to do that immediately.
Good Practice.
You declare the function, and you write a
series of instructions of “what to do”
In this case, we are just “displaying” a
message with a “alert” box.
Exercise 11: [Link]
Make a page that have
two buttons. <head>
<title>Interactive Web Page</title>
<script type="text/javascript">
It also has two function displayMyMessage1(){
javascript functions }
declared.
function displayMyMessage2(){
If you press on one }
button, one of the </script>
functions will be called </HEAD>
(activated). If you press
the other button, the
other function will be
called instead.
