Scribd
Upload
15K views22 pages

Java Script: An Introduction

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML and allows altering web pages in response to user actions. JavaScript is not Java - it was developed by Netscape, only runs in browsers, and is not a full programming language but has a similar syntax. JavaScript is an interpreted, loosely typed, object-based scripting language that is easy to learn and use for quick development of simple programs. It supports common data types, variables, operators, and can capture and validate user input through forms.

Uploaded by

1MS18CS146 Rahil M Harihar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
15K views22 pages

Java Script: An Introduction

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML and allows altering web pages in response to user actions. JavaScript is not Java - it was developed by Netscape, only runs in browsers, and is not a full programming language but has a similar syntax. JavaScript is an interpreted, loosely typed, object-based scripting language that is easy to learn and use for quick development of simple programs. It supports common data types, variables, operators, and can capture and validate user input through forms.

Uploaded by

1MS18CS146 Rahil M Harihar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

Java Script

AN INTRODUCTION
What is JavaScript?
 JavaScript was designed to add interactivity to HTML
pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming
language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts
execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a license

Introduction to Java Script
 It Introduce Client-Side scripting which makes web page
more dynamic and interactive.
 Alter a web page in response to user actions.
 React to user events.
 Capturing user inputs is typically done through a form –
need for client side form validation.
 JavaScript is not Java.
– Developed by Netscape, not Sun.
– Only executed in a browser.
– Is not a full-featured programming language.
– However, the syntax is similar.
 Unlike Java, which needs compilation; JavaScript is
dynamic and is interpreted in run-time.
Java script characteristics

 Javascript is a scripting language


 Scripting languages provide easy to access functionality
 Javascript syntax is similar to “C“
 Javascript is object based and not object oriented
 Javascript doesn’t allow inheritance and sub classing
 It is object based in that it depends on a collection of built-in objects for
functionality
 You can also create your own objects
 Javascript is event driven
 Javascript is platform independent
 Designed to be embedded within HTML
 Run by popular browsers
 Javascript enables quick development
Why Java Script?

 Interpreted language
 Can be embedded in HTML file or can be
included as an external file
 Easy to learn
 Quick development
 Designed for simple, small programs
 Performance
 Procedural capabilities
 Event handling
 Debugging support
 Platform independence/Architecture neutrality
Differences (JavaScript is not java)
 Java was developed by Sun Microsystems while JavaScript was
developed by Netscape.

 JavaScript is a high-level scripting language whereas Java is an


Object Oriented Programming language.
 JavaScript is easy to learn and use whereas Java is comparatively
difficult.
 In case of Java programming language the code is first written and
then compiled. In JavaScript the script can be executed without any
compilation.
 JavaScript as conveyed can be directly embedded or placed in HTML
but it is not possible in case of Java. One cannot write Java code
directly into HTML.
Capturing user input
 Web site interactivity starts from being able to capture the user input
 <FORM> tag can be used in HTML to create a user input form
 The HTML objects used in HTML form creation are Text, TextArea,
Radio Buttons, Push Buttons, Check Boxes and so on
 These can be passed as values to the type attribute of <INPUT> tag
 Once the form is coded, Javascript code can be embedded to perform
input validation. Javascript code can appropriately handle errors in
input
 Once the input form is submitted to the server, the code on the server
processes it further and sends back a HTML document, that may be
dynamically generated
 The HTML <script> tag is used to insert a JavaScript into an HTML
page.
Simple Program
<html> Scripting language
Type of the file
<head><title>My Java Script-page</title>
<script type="text/javascript">
<!--
document.write("Welcome to JavaScript World");
// -->
</script>
</head>
<body></body>
</html>
Note : Comment (<!-- -->) hide from older web browsers which do not support scripting)
Steps to write java script
 Insert javascript command between <script
type="text/javascript"> and </script>
 JavaScript-lines ends with a semi-colon. (optional)
 Two locations for JavaScript serves different purposes
(internal)
 JavaScript in the head element will react to user input and be called
from other locations (advisable)
 JavaScript in the body element will be executed once as the page is
loaded
 Call the script, using the "src" attribute, from any of your
pages. <script src=“hello.js"></script> The external script
cannot contain the <script> tag. (External).
 Capital letters are different from non-capital letters.
document.write
 Prints string on the web page
document.write(”String”);
Example
<script type="text/javascript">
document.write("WOW!!!");
</script>
 Not only String , but HTML tags can include in “”

Example
<script type="text/javascript">
document.write("<h1>Printing Line with h1 tag inside js</h1>");
</script>
 Can insert special characters (like " ' ; &) with the backslash

<script type="text/javascript">
document.write("<h1 style= \"color:red\"> Printing line with red color
inside js </h1>");
</script>
Windows dialog boxes using <alert>
 Dialogs typically display important messages to users
browsing the web page.
 It pop-up on the screen to grab the users attention.
 A predefined dialog <alert> called alert dialog is used for
dialog boxes.
 alert is a method of windows object.
Example
<script type="text/javascript">
alert("Hello Java Script");
document.write("Welcome to JavaScript World");
</script>
Note : Dialogs displays plain text
They do not render XHTML
Windows dialog boxes using confirm
box
The confirm box is a box that pops up with both an
OK and a Cancel button. The confirm box is used
to verify acceptance from the user. If the user
accepts, then the user presses the OK button and
the confirm box returns with a true value. If the
user rejects with the Cancel button, then the
confirm box returns false value.
General syntax for a confirm box is
confirm (“textmessage”)
Example for confirm box
<html> The confirm box pops up with the
message:
<body>
<script type="text/javascript"> Wish to accept or Cancel
if (confirm("Wish to accept or Cancel"))
{          Showing two buttons (OK and Cancel)
alert ("True value returned") that the user can choose from. If the
} user presses OK in the confirm box then
the value returned would be true,
else
executing the if block of statements. This
{          results in the alert box popping up with
alert ("False value returned") the message.
}
</script> True value returned.
</body>
</html> If the user presses the Cancel button in
the confirm box then the value returned
would be false, executing the else block
of statements. This results in the alert
box popping up with the message

False value returned.


Dynamic web page using <prompt>
 Obtaining user input with prompt dialogs.
 This allows user to input a value that script can use.
<html>
<head><title>My Java Script-page</title></head>
<script type="text/javascript">
var name;
name=prompt("Enter your name : ","name");
document.writeln("Hello "+name);
</script>
<body>
</body>
</html>
JavaScript data types & variables
JavaScript has five primitive data types
string : "foo" 'howdy do' "I said hi'." ""
number : 12 3.14159 1.5E6
Boolean : true false
undefined
null

assignments are as in C++/Java


message = “hello";
<html>
<head>
pi = 3.14159;
<title>Data Types and Variables</title>
</head> variable names are sequences of letters,
<body> digits, and underscores: start with a letter
<script type="text/javascript">
x = 1024;
document.write("<p>x = " + x + "</p>"); variables names are case-sensitive
x = "foobar";
document.write("<p>x = " + x + "</p>");
you don't have to declare variables, will
</script> be created the first time used
</body>
</html> variables are loosely typed, can assign
different types of values
Variables
 Use var for creating variable in javascript.
 Variable can contain any type of data, from string to
Boolean.
 The variable name cannot be “reserved word” and first
char must be alphabetic letter or underscore.
 Note : day ,Day,DAY and dAy ,would all be
different. (Case Sensitive).
 Untyped!
 Example:
var foo;

 Can be created automatically by assigning a value:


foo=1; blah="Hi Dave";
Other Primitive Types

 Null (trivial type)


 A single value, null
 null is a reserved word
 A variable that is used but has not been declared
nor been assigned a value has a null value
 Using a null value usually causes an error
 Undefined (trivial type)
 A single value, undefined
 However, undefined is not, itself, a reserved word
 The value of a variable that is declared but not
assigned a value
Java operators

 standard Java operators are provided in JavaScript (same as


C++)
 +, -, *, /, %, ++, --, …
 ==, !=, <, >, <=, >=
 &&, ||, !
Simple program to add two numbers using
java script
Program Explanation
 parseInt function converts it string argument to an integer values.
 User can type anything in the text field of prompt dialog.
 If user types non integer value or clicks Cancel button, a runtime logic
error will occur, and sum of the two values will appear in the document as
NaN (Not a Number).
Exercise (10 mins)

 Write a Javascript to multiply three numbers and print the


result on the web page along with numbers.

You might also like