Lecture 8 - Java Script
Lecture 8 - Java Script
JAVA SCRIPT
Outline
• Introduction
• Executing JavaScript’s
• JavaScript Objects
• Java Script Coding
• Java Variables
• Java Script Functions
• Javascript Pop up Boxes
• JavaScript event Handlers
Introduction
What is Java?
• Java is a popular programming language, created in 1995.
• It is owned by Oracle, and more than 3 billion devices run Java.
• It is used for:
1. Mobile applications (specially Android apps)
2. Desktop applications
3. Web applications
4. Web servers and application servers
5. Games
6. Database connection
7. And much, much more!
Why Use Java
• Java works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc.)
• It is one of the most popular programming language in the world
• It is easy to learn and simple to use
• It is open-source and free
• It is secure, fast and powerful
• It has a huge community support (tens of millions of developers)
• Java is an object oriented language which gives a clear structure to
programs and allows code to be reused, lowering development costs
• As Java is close to C++ and C#, it makes it easy for programmers to switch
to Java or vice versa
What is Java Script ?
• It is a scripting language that adds programmatic capabilities on the
client end.
• It is an Object Based language unlike its counterpart the normal Java
Object oriented language.
• It solely employs the use of objects, properties of objects and method
in programming.
• Similar to other scripting languages Java Script is light weight. It does
not require a compiler because it is an interpreted language.
Example of Java Script
• JavaScript’s may be embedded directly into HTML or linked as an external file.
Note:-
Having learnt JavaScript however its capabilities will only be limited by your
creativity
JavaScript’s Capabilities
The following are some of the capabilities of JavaScript’s extracted from the
w3c website.
1. JavaScript gives HTML designers a programming tool - HTML authors are
normally not programmers, but JavaScript is a scripting language with a
very simple syntax! Almost anyone can put small "snippets" of code into
their HTML pages.
2. JavaScript can put dynamic text into an HTML page - A JavaScript state-
ment like this: document.write("<h1>" + name + "</h1>") can write a
variable text into an HTML page.
3. JavaScript can react to events - A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a
user clicks on an HTML element.
JavaScript’s Capabilities
4. JavaScript can read and write HTML elements - A JavaScript can read
and change the content of an HTML element.
5. JavaScript can be used to validate data - A JavaScript can be used to
validate form data before it is submitted to a server. This saves the
server from extra processing.
6. JavaScript can be used to detect the visitor’s browser - A JavaScript
can be used to detect the visitor’s browser, and - depending on the
browser - load another page specifically designed for that browser.
7. JavaScript can be used to create cookies - A JavaScript can be used to
store and retrieve information on the visitor’s computer
JavaScript an Object Based Language
• JavaScript is an Object based scripting (OBS) language.
• It allows you to define your own objects and make your own variable
types.
• Similarly it come with a large number of inbuilt objects for use some
of these include the date object, the string object, the window object
e.t.c.
• In object oriented theories Objects are entities that have properties
and are associated with a number of methods. For instance a string
object may have a property such as the length.
• Consider that example bellow of such an object
<script type="text/JavaScript">
var txt="Welcome To JavaScript’s!";
document.write(txt.length);
</script>
• In the following example we are using the length property of the
String object to return the number of characters in a string which in
this case is 24 counting all the characters in the string:
• Similarly Objects are associated to methods that represent the
functions the object will perform.
• Consider another example of a script that is making use of two
methods
• In the following example we are using the to UpperCase() method of
the String object to display a text in uppercase letters and the write
method of the document to display a web output.
• <script type="text/JavaScript">
var str ="Welcome to JavaScript Programming!";
document.write(str.toUpperCase());
</script>
• The output of the code above will be:
WELCOME TO JAVASCRIPT PROGRAMMING!
Embedded Java scripts: JavaScript Placement
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
Java Variables
• Variables are containers for storing data values.
• In Java, there are different types of variables, for example:
• String - stores text, such as "Hello". String values are surrounded by double
quotes
• int - stores integers (whole numbers), without decimals, such as 123 or -
123
• float - stores floating point numbers, with decimals, such as 19.99 or -19.99
• char - stores single characters, such as 'a' or 'B'. Char values are surrounded
by single quote
• boolean - stores values with two states: true or false
Variables
• JavaScript variables are used to hold values or expressions.
• A variable can have a short name, like x, or a more descriptive name, like
car name.
Rules for JavaScript variable names:
1. Variable names are case sensitive (y and Y are two different variables)
2. Variable names must begin with a letter or the underscore character
3. Note: Because JavaScript is case-sensitive, variable names are case-
sensitive.
4. Creating variables in JavaScript is most often referred to as "declaring"
variables.
Variables
• You can declare JavaScript variables with the var statement:
var x;
var carname;
• After the declaration shown above, the variables are empty (they
have no values yet).
• However, you can also assign values to the variables when you
declare them:
var x=5;
varcarname="Volvo";
Java Script Functions
• Similar to other programming a function is a small program that performs
given tasks.
• To keep the browser from executing a script when the page loads, you can
put your script into a function.
• A function contains code that will be executed by an event or by a call to
the function.
• You may call a function from anywhere within a page (or even from other
pages if the function is embedded in an external .js file).
• Functions can be defined both in the <head> and in the <body> section of a
document. However, to assure that a function is read/loaded by the
browser before it is called, it could be wise to put functions in the <head>
section.
Java Script Functions
Syntax
functionfunctionname(var1,var2,...,varX)
{
some code
}
• The parameters var1, var2, etc. are variables or values passed into the function.
• The { and the } defines the start and end of the function <html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
Java Script Functions
</head>
<body>
<form>
<input type="button" value="Click me!“ onclick="displaymessage()" />
</form>
</body>
</html>
Java Script Functions - Example 2
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Javascript Pop up Boxes
• The hallmark of JavaScript lies in the ability of javascript pop ups
1. Alert Box
• An alert box is often used if you want to make sure information
comes through to the user.
• When an alert box pops up, the user will have to click "OK" to
proceed.
Alert box- Syntax
alert("sometext"); i.e.
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
Javascript Pop up Boxes
2. Confirm box
• A confirm box is often used if you want the user to verify or accept
something.
• When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
• If the user clicks "OK", the box returns true. If the user clicks "Cancel",
the box returns false.
Confirm box - Syntax
• confirm("sometext"); i.e.
<<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
Confirm box - Syntax
else { document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm
box" />
</body>
</html>
Javascript Pop up Boxes
3. Prompt box
• A prompt box is often used if you want the user to input a value
before entering a page.
• When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
• If the user clicks "OK" the box returns the input value. If the user
clicks "Cancel" the box returns null.
• Syntax
prompt("sometext","defaultvalue");
JavaScript event Handlers
• One of the most important features provided by JavaScript is the
ability to detect and react to events that occur while a document is
loading, rendering, and being browsed by the user.
• The JavaScript code that handles these events may be placed within
the <script> tag, but more commonly, it is associated with a specific
tag via one or more special tag attributes.
• For example, you might want to invoke a JavaScript function when the
user passes the mouse over a hyperlink in a document. The
JavaScript-aware browsers support a special "mouse over" event-
handler attribute for the <a> tag called onMouseOver to do just that:
<a href="doc.html" onMouseOver="status=’Click me!’; return true">
JavaScript event Handlers
• onAbort*
• <img>
• onBlur
• <a><area><body><button><frameset>
• <input><label><select><textarea>
• onChange
• <input><select><textarea>onClickMosttagson
• DblClickMosttagsonError*
• <img>
JavaScript event Handlers
• onFocus
• <a><area><body><button><frameset>
• <input><label><select><textarea>
• onKeyDownMost- tagsonKeyPressMost tags
• onKeyUp-Most tagsonLoad
• <body><frameset><img>*
• onMouseDown- Most tags
• onMouseMove -Most tags
• onMouseOut-Most tags
• onMouseOver-Most tags
• onMouseUp -Most tags
• onReset
JavaScript event Handlers
• <form>onSelect
• <input><textarea>
• onSubmit
• <form>onUnload
• <body><frameset
The mouse-related events
• The onClick ,onDoubleClick, onMouseDown and onMouseUp attributes refer to
the mouse button.
• If you need to detect both halves of a mouse click as separate events, use
onMouseDown and onMouseUp. When the user presses the mouse button, the
onMouseDown event occurs. The onMouseUp event happens when the user
releases the mouse button.
• The onMouseMove ,onMouseOut, and onMouseOver events happen when the
user drags the mouse pointer. The onMouseOver event occurs when the mouse
first enters the display region occupied by the associated HTML ele-ment.
• After entry, onMouseMove events are generated as the mouse moves about
within the element. Finally, when the mouse exits the element, on-MouseOut
occurs.
• For some elements, the onFocus event corresponds to onMouseOver, and on-
Blur corresponds to onMouseOut.
The keyboard events
• Only three events currently are supported by the HTML 4 and XHTML
standards relating to user keyboard actions:
1. The onKeyDown event occurs when the user depresses a key on the
keyboard;
2. onKeyUp happens when the key is released.
3. The onKeyPress attribute is triggered when a key is pressed and
released. Usually, you’ll have handlers for either the up and down
events, or the composite keypress event, but not for both.
Document events
• Most of the document-related event handlers relate to the actions and
states of form controls.
• For instance, onReset and onSubmit happen when the user activates the
respective reset or submit button.
• Similarly, onSelect and onChange occur as users interact with certain form
elements.
• There also are some document-related event handlers that occur when
various document elements get handled by the browser.
• For instance, the onLoad event may happen when a frameset is complete,
or when the body of an HTML or XHTML document gets loaded and
displayed by the browser.
• Similarly, onUnload occurs when a document is removed from a frame or
window.
Task
Write a JavaScript statement to accomplish each of the following tasks
• Declare variables sum and x.
• Assign 1 to variable x.
• Assign 0 to variable sum
• Add variable x to variable sum and assign the result to variable sum Print “The sum is” followed by the value
of variable sum
Solution:
i. Declare variables sum and x. - var x; var sum;
ii. Assign 1 to variable x. x=1 ; or var x = 1;
iii. Assign 0 to variable sum. sum =0 ; or var sum =0;
iv. Add variable x to variable sum and assign the result to variable sum. sum = xAssignments + sum;
v. Print “The sum is” followed by the value of variable sum.
• document.write(“The sum is”+sum);
Revision Questions
1. Giving examples, explain the following terms
• Objects
• Properties
• Methods
2. Describe the role of JavaScript in HTML
3. Write a simple script that demonstrates the role stated above
4. Highlight any four events that may be captured by JavaScript