CLASS IX(2023-24)
COMPUTER SCIENCE
Chapter 3
Introduction to JavaScript
3.1 Introduction to JavaScript
3.2 Advantages and Disadvantages of JavaScript
3.3 Adding JavaScript in an HTML Page
3.4 Syntax Conventions
3.5 Using Variables
3.6 Datatypes
3.7 Type Casting
3.7.1 Conversion functions
Chapter 3 Introduction to JavaScript
Learning Objectives
• History of JavaScript
• Advantages and disadvantages of JavaScript
• Syntax of JavaScript
• Internal and external scripts
• Writing the first sample script
• Using HTML tags in script
• Escape sequences
• Comments
Introduction to JavaScript
JavaScript was first developed by the Netscape Company,
with the name "Live Script".
After the release of Java, Netscape began to work with Sun,
in order to create a script with a similar syntax and
semantics of Java, and for marketing reasons the name of
the new scripting language was changed to "JavaScript”.
Microsoft created its own implementation, "JScript"
FEATURES OF JAVASCRIPT
• JavaScript is not Java - The two languages have been created by
different companies, the reason of these similar names is just
marketing.
• JavaScript is dependent on the environment - JavaScript is a
scripting language; the software program which is actually running is
the web browser
• JavaScript is an interpreted language - the script code will be
interpreted by the browser before being executed.
• JavaScript is a flexible language - In JavaScript we can declare a
variable before knowing the type of data it is going to store
• JavaScript is based on objects
• JavaScript code is event driven that responds to events generated
by user or system.
• JavaScript can be included in HTML – makes a web page dynamic,
allows inserting scripts that run within the web page, specifically in
the user's browser, thus easing traffic between server and client. Eg.
a page for collecting data from the user can add JavaScript scripts to
validate the accuracy of introduction and then the server sends only
data to be processed correctly.
• Provides features and commands to help with mathematical
operations, string manipulation, sounds, images, objects and browser
windows, checking URL links and data entries of the forms.
Introduction to JavaScript
Advantages
JavaScript is executed on the client side - the code is executed on the
user's processor instead of the web server thus saving bandwidth thus easing
traffic between server and client.
JavaScript is a relatively easy language
The JavaScript language is relatively easy to learn that is close to English. It uses
the DOM (Document Object Model) that provides plenty of prewritten functionality
to the various objects on pages.
JavaScript is relatively fast to the end user
As the code is executed on the user's computer, results and processing is
completed almost instantly depending on the task as it does not need to be
processed in the site's web server and sent back to the user consuming local as
well as server bandwidth.
Extended functionality to web pages – we can embed javascript code
to add functionality to a HTML page
Introduction to JavaScript
Disadvantages
Security Issues
JavaScript snippets, once appended onto web pages execute
on client machines immediately and therefore can also be
used to exploit the user's system. Malicious code can still be
executed .
JavaScript rendering varies
Different layout engines may render JavaScript differently
resulting in inconsistency in terms of functionality and
interface.
Requirements for JavaScript
Text editor
Web browser
Javascript Syntax
•Case-sensitive
•Semicolon is command separator
Adding JavaScript in an HTML page
INTERNAL JAVASCRIPT FILE
JavaScript code is written in the <HEAD> section.
<script>
</script>
There are 2 ways of inserting the javascript code
<script type="text/JavaScript">
.
</script>
OR
<script language = "JavaScript">
.
.
</script>
Sample Javascript code
<head>
<script language=“JavaScript">
alert("hello friends");
</script>
</head>
The single quotes (') and double quotes (" ") for
strings.
Sample JavaScript code
<head>
<script language=“JavaScript">
document.write(“This is my first JavaScript code");
</script>
</head>
Using HTML tags in Javascript code
<head>
<script language=“JavaScript">
document.write("<H1>"+"hello"+"</H1>");
</script>
</head>
VARIABLES
In a script (or program) we use constants and variables to store data.
The variables are the named memory locations which can be used for calculations
and temporary storage of results.
To create variables use the keyword var and value can be assigned to a variable
using = operator
var keyword is optional
var name = value;
Example :
var x = 5;
You can change its value just using the variable name :
x = “HELLO”;
JavaScript has no fixed types of data. A variable can hold different data
types at different times depending on context. This is called dynamic
typing feature of Javascript.
EG. y=20;
y=“APEEJAY”
Rules for naming variables
Rules for naming variables, arrays,
functions
The first character must be a letter, an underscore (_)
or $ sign.
The first character cannot be a number.
The name should not contain blank space.
D o n o t u s e re s e r v e d w o rd s t h a t a re p a r t o f t h e
JavaScript language.
Simple program to add two numbers
<html>
<head>
<script type="text/JavaScript">
var a,b;
a=parseInt(prompt("enter a number"));
b=parseInt(prompt("enter a number"));
c=a+b
document.write(c);
</script>
</head>
<body>
</body>
</html>
Simple program to print simple interest.
<html>
<head>
<script type="text/JavaScript">
var p,r,t,si;
p=parseInt(prompt("enter a principle amount"));
r=parseInt(prompt("enter a rate of interest"));
t=parseInt(prompt("enter a time taken"));
si=p*r*t/100
document.write(si);
</script>
</head>
<body>
</body>
</html>
EXTERNAL JAVASCRIPT FILE
We can also place the Javascript code in a separate JavaScript file,
that will have the ".js" extension
ADVANTAGE
Reusability of code :
• we can use the same code in multiple HTML pages.
• In case of a necessary change in the JavaScript code, we just need
to modify the data in a single file (the one with the extension ".js"),
DISADVANTAGE
A".js" external file we can't use HTML tags.
EXTERNAL JAVASCRIPT FILE
EMBEDDING EXTERNAL .js FILE
<html>
<head>
<script src="code.js" type="text/JavaScript"></script>
</head>
<body>
</body>
</html>
The "code.js" contains:
document.write("This is my first JavaScript code ")
