Professional Documents
Culture Documents
Table of Content
Lesson Content Page
Lesson 1 Introduction 1
1.1 What is JavaScript ? 1
1.2 Client-side JavaScript 1
1.3 Advantages of JavaScript 2
1.4 Limitations of JavaScript 2
1.5 JavaScript Development Tools 3
1.6 Where is JavaScript Today? 3
1.6.1 JavaScript in Internet Explorer 4
1.6.2 JavaScript in Firefox 4
1.6.3 JavaScript in Chrome 4
1.6.4 JavaScript in Opera 5
1.6.5 Why study Javascript? 5
1.7 Exercise 6
i
JAVASCRIPT
ii
JAVASCRIPT
LESSON 1 INTRODUCTION
JavaScript is a lightweight, interpreted programming language. It is designed for creating
network-centric applications. It is complimentary to and integrated with Java. JavaScript is
very easy to implement because it integrates with HTML. It is open and cross-platform.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has
been embedded in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.
1
JAVASCRIPT
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and
other actions that the user initiates explicitly or implicitly.
2
JAVASCRIPT
All the modern browsers come with built-in support for JavaScript. Frequently, you may need
to enable or disable this support manually. This chapter explains the procedure of enabling
and disabling JavaScript support in your browsers: Internet Explorer, Firefox, chrome, and
Opera.
3
JAVASCRIPT
4
JAVASCRIPT
<html>
<body>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
Now, if the user's browser does not support JavaScript or JavaScript is not enabled, then the
message from </noscript> will be displayed on the screen.
5
JAVASCRIPT
1.7 Excercise
Try the first javascript code in your text editor.
<html>
<body>
</body>
</html>
6
JAVASCRIPT
<script ...>
JavaScript code
</script>
7
JAVASCRIPT
8
JAVASCRIPT
2.5.1 Example
The following example shows how to use comments in JavaScript.
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
9
JAVASCRIPT
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
</body>
</html>
10
JAVASCRIPT
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
To use JavaScript from an external file source, you need to write all your JavaScript source
code in a simple text file with the extension ".js" and then include that file as shown above.
For example, you can keep the following content in filename.jsfile and then you can
use sayHello function in your HTML file after including the filename.js file.
function sayHello() {
alert("Hello World")
}
2.10 Exercise
1) State the types of method to include javascript in the HTML code.
2) Please write down the methods of using javascript.
11
JAVASCRIPT
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
12
JAVASCRIPT
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>
13
JAVASCRIPT
When you click on the click me! button, a line of red sentence will display without loading,
this is the usefulness of javascript.
Besides, Javascript can validate data.
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
14
JAVASCRIPT
</body>
</html>
15
JAVASCRIPT
<script>
window.alert(5 + 6);
</script>
</body>
</html>
<script>
document.write(5 + 6);
</script>
</body>
</html>
16
JAVASCRIPT
Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
<script>
console.log(5 + 6);
</script>
</body>
</html>
17
JAVASCRIPT
3.8 Exercise
1. Create a code that can produce a change of picture from red to yellow.
2. Validate a number from 10 to 20 using javascript validation code.
18
JAVASCRIPT
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
19
JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<h1>JavaScript Numbers</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
</script>
</body>
</html>
20
JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
21
JAVASCRIPT
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
22
JAVASCRIPT
23
JAVASCRIPT
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
//document.getElementById("demo").innerHTML = pi;
document.getElementById("demo").innerHTML = person;
//document.getElementById("demo").innerHTML = answer;
</script>
</body>
</html>
24
JAVASCRIPT
<h1>JavaScript Operators</h1>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
25
JAVASCRIPT
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
1 + (Addition)
Adds two operands
Ex: A + B will give 30
2 - (Subtraction)
Subtracts the second operand from the first
Ex: A - B will give -10
3 * (Multiplication)
Multiply both operands
Ex: A * B will give 200
4 / (Division)
Divide the numerator by the denominator
Ex: B / A will give 2
5 % (Modulus)
Outputs the remainder of an integer division
Ex: B % A will give 0
6 ++ (Increment)
Increases an integer value by one
Ex: A++ will give 11
7 -- (Decrement)
Decreases an integer value by one
Ex: A-- will give 9
Note Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give "a10".
26
JAVASCRIPT
5.2 Exercise
The following code shows how to use arithmetic operators in JavaScript.
<html>
<body>
<script type="text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and then try...
</body>
</html>
27
JAVASCRIPT
Output:
a + b = 43
a - b = 23
a / b = 3.3
a%b=3
a + b + c = 43Test
a++ = 33
b-- = 10
Set the variables to different values and then try...
28
JAVASCRIPT
29
JAVASCRIPT
Do you wonder why we do not have type="text/javascript" inside the <script> tag?
This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all
modern browsers!
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
30
JAVASCRIPT
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the
next chapter of this tutorial.
$(document).ready(function(){
});
This is to prevent any jQuery code from running before the document is finished loading (is
ready).
It is good practice to wait for the document to be fully loaded and ready before working with
it. This also allows you to have your JavaScript code before the body of your document, in the
head section.
Here are some examples of actions that can fail if methods are run before the document is fully
loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){
});
Use the syntax you prefer. We think that the document ready event is easier to understand
when reading the code.
31
JAVASCRIPT
$("#show").click(function(){
$("p").show();
});
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
32
JAVASCRIPT
Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the
following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show()
method completes (you will learn more about callback functions in a later chapter).
The following example demonstrates the speed parameter with hide(). By following the code
below, you can see the speed of hiding the sentence:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
</body>
</html>
33
JAVASCRIPT
<button>Toggle</button>
</body>
</html>
34
JAVASCRIPT
6.5 Exercise
1. Run your own jQuery file
2. Then run a simple hide and show program just like what u have learnt just now.
35