Java script

JavaScript
Introduction
1
JavaScriptIntroduction

What is Java Script ?
• JavaScript is a client-side scripting language.
• A scripting language is a lightweight programming
language.
• JavaScript is programming code that can be inserted
into HTML pages.
• JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
• Java Script can enhance the dynamics and
interactive features of your page by allowing you to
perform calculations, check forms, write interactive
games, add special effects, customize graphics
selections, create security passwords and more. 2

What is Java Script ?
• JavaScript is used in Web site development to such
things as:
 check or modify the contents of forms
 change images
 open new windows and write dynamic page content.
 to make DHTML by CSS.
 This allows you to make parts of your web pages
appear or disappear or move around on the page
3

Java Script Vs Java
JavaScript Java
Interpreted (not compiled)
by client.
Compiled on server before
execution on client.
Object-based. Code uses
built-in, extensible objects,
but no classes or inheritance.
Object-oriented. Applets
consist of object classes with
inheritance.
Code integrated with, and
embedded in, HTML.
Applets distinct from HTML
(accessed from HTML
pages).
Variable data types not
declared (loose typing).
Variable data types must be
declared (strong typing).
Secure. Cannot write to hard
disk.
Secure. Cannot write to hard
disk.
4

ECMA Script
• The responsibility for the development of a
scripting standard has been transferred to an
international body called the European
Computer Manufacturers Association
(ECMA).
• The standard developed by the ECMA is
called ECMAScript, though browsers still
refer to it as JavaScript.
• The latest version is ECMA-262, which is
supported by the major browsers. 5

Writing a Java Script Program
• The Web browser runs a JavaScript program
when the Web page is first loaded, or in
response to an event.
• JavaScript programs can either be placed
directly into the HTML file or they can be
saved in external files.
• placing a program in an external file allows
you to hide the program code from the user
• source code placed directly in the HTML
file can be viewed by anyone 6

Writing a Java Script Program
• A JavaScript program can be placed
anywhere within the HTML file.
• Many programmers favor placing their
programs between <head> tags in order to
separate the programming code from the
Web page content and layout.
• Some programmers prefer placing programs
within the <Body> of the Web page at the
location where the program output is
generated and displayed.
7

How to use/implement Java Script?
• We can implement Java script in our web
page by following three ways-
1. Inside the head tag
2. Within the body tag
3. In an external file (with extension .js)
8

Implementing Java Script
1. Inside HEAD Tag:
Syntax:
<HTML>
<HEAD>
<SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- -
Java Script Code
// - ->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML> 9

2. Within BODY Tag:
Syntax:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- -
java script code
// - ->
</SCRIPT>
</BODY>
</HTML> 10

3. In an External Link:
Syntax:
<HTML>
<HEAD>
<SCRIPT SRC= “myscript.js”>
</SCRIPT>
</HEAD>
<BODY>
<input TYPE=“Button” onclick=“msg()” value=“Message”>
</BODY>
</HTML>
Myscript.js:
Function msg()
{ alert("Hello") } 11

Java Script Syntax Issue
• JavaScript commands and names are case
sensitive.
• JavaScript command lines end with a
semicolon to separate it from the next
command line in the program.
• in some situations, the semicolon is
optional
• semicolons are useful to make your code
easier to follow and interpret
12

Displaying some text on web Page
• You can write on page by using following
statement of Java script-
document.write(“message”)
document.writeln(“message”)
Example:
document.write(“<h1><B>My first message</B></h1>” ) ;
13

JavaScript Display Possibilities
• JavaScript does NOT have any built-in print or
display functions.
• JavaScript can "display" data in different ways:
• Writing into an alert box, using window.alert().
• Writing into the HTML output
using document.write().
• Writing into an HTML element,
using innerHTML.
• Writing into the browser console,
using console.log().
14

window.alert()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body></html>
15

document.write()
<html>
<body>
<button type="button"
onclick="document.write(5 + 6)">
Try it</button>
</body>
</html>
17

innerHTML
<html> <body>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo")
.innerHTML = 5 + 6;
</script>
</body>
</html> 19

console.log()
<!DOCTYPE html>
<html><body>
<p> Activate debugging in your browser (Chrome, IE,
Firefox) with F12, and select "Console" in the debugger
menu. </p>
<script> console.log(5 + 6);
</script>
</body>
</html> 21

Working with Variables & Data
• A variable is a named element in a program
that stores information.
var var_name;
• The following restrictions apply to variable
names:
• the first character must be either a letter or an
underscore character ( _ )
• the remaining characters can be letters, numbers,
or underscore characters
• variable names cannot contain spaces
• Variable names are case-sensitive.
23

Types of Variables
• JavaScript supports four different types
of variables
•Numeric variables can be a number, such
as 13, 22.5, or -3.14159
•string variables is any group of characters,
such as “Hello” or “Happy Holidays!”
•Boolean variables are variables that accept
one of two values, either true or false
•null variables is a variable that has no value
at all 24

Declaring/Creating a Variable
• Before you can use a variable in your
program, you need to declare a variable
using the var command or by assigning the
variable a value.
• Any of the following commands is a
legitimate way of creating a variable named
“Month”:
var Month;
Month = “December”;
var Month = “December”; 25

Operators in JavaScript
• Following operators are used in
JavaScript-
1. Arithmetic Operator
2. Comparison Operator
26

• Following operators are used in JavaScript-
1. Arithmetic Operator
Operator Meaning Example
+ Addition 2 + 4
- Subtraction 6 - 2
* Multiplication 5 * 3
/ Division 15 / 3
% Modulus 43 % 10
27

Example
<body>
<script
type="text/JavaScript">
<!–
var two = 2
var ten = 10
var linebreak = "<br />"
document.write("two plus ten =
")
var result = two + ten
document.write(result)
document.write(linebreak)
document.write("ten * ten = ")
result = ten * ten
document.write(linebreak)
document.write("ten / two = ")
result = ten / two
//-->
</script>
</body>
28

Output
two plus ten = 12
ten * ten = 100
ten / two = 5
29

2. Comparison Operator
Operator Meaning Example Result
== Equal To x == y false
=== Equal value and equal
type
x===y true
!= Not Equal To x != y true
!== not equal value or not
equal type
x!== false
< Less Than x < y true
> Greater Than x > y false
<= Less Than or Equal To x <= y true
>= Greater Than or Equal To x >= y false 30

Built-in JavaScript Functions
• Functions provided by the language and you cannot
change them to suit your needs.
• Some of the built-in functions in JavaScript are
shown here:
• eval - eval(expr)
• eval evaluates the expression or statements
• isFinite
• Determines if a number is finite
• isNaN
• Determines whether a value is “Not a Number”
• parseInt
• Converts string literals to integers, no number  NaN.
• parseFloat
• Finds a floating-point value at the beginning of a string.
31

JavaScript Functions
• A function is a block of organized reusable
code (a set of statements) for performing a
single or related action.
• Begins with keyword “function” and the
function name and “( … )”
• Inside the parentheses
• We can pass parameters to the function
• E.g. function myfuc(arg1, arg2) {…}
• Built-in and user-defined functions
32

Creating JavaScript Functions
Declaration Syntax
• Functions are declared using the function
reserved word
• The return value is not declared, nor are the
types of the arguments
function function_name(parameters) {
JavaScript commands
}
• parameters are the values sent to the function
(note: not all functions require parameters)
• { and } are used to mark the beginning and end of
the commands in the function. 33

Creating JavaScript Functions: Eg
<HTML>
<HEAD>
<SCRIPT TYPE=TEXT/JAVASCRIPT>
<!- -
function myMessage()
{
document.write(“<B>Hello World”);
}
// - ->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON onClick=myMessage() Value=Click >
</BODY>
</HTML> 34

Event in JavaScript
• JavaScript is its ability to help you create dynamic web
pages that increase user interaction
• The building blocks of an interactive web page is the
JavaScript event system.
• An event in JavaScript is something that happens with
or on the webpage.
• A few example of events:
• A mouse click
• The webpage loading
• Mousing over a hot spot on the webpage, also known as hovering
• Selecting an input box in an HTML form
• A keystroke 35

Event in JavaScript
• JS Event Handler
• Onclick
• onMouseOver
• onMouseOut
• onLoad
• onkeydown
36

JavaScript Object
• Object
• Number
• String
• Date
• Array
• Boolean
• Math, etc
37

What is the DOM?
• The DOM is a W3C (World Wide Web Consortium)
standard.
• The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform
and language-neutral interface that allows programs and
scripts to dynamically access and update the content,
structure, and style of a document."
• The W3C DOM standard is separated into 3 different
parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents
38

What is the HTML DOM?
• The HTML DOM is a standard object model and
programming interface for HTML.
• It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
• In other words:
The HTML DOM is a standard for how to get,
change, add, or delete HTML elements.
39

• When a web page is loaded, the browser creates a Document
Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects:
40
What is the HTML DOM?

• With the object model, JavaScript gets all the power it
needs to create dynamic HTML:
• JavaScript can change all the HTML elements in the
page
• JavaScript can change all the HTML attributes in the
page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and
attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the
page
• JavaScript can create new HTML events in the page
41

The HTML DOM Document
• HTML DOM object model, the document object
represents your web page.
• The document object is the owner of all other objects in
your web page.
• If you want to access objects in an HTML page, you
always start with accessing the document object.
42

Finding HTML Elements
43
Method Description
document.getElementById() Find an element by element id
document.getElementsByTagName() Find elements by tag name
document.getElementsByClassName(
)
Find elements by class name

Changing HTML Elements
44
Method Description
element.innerHTML= Change the inner HTML of an element
element.attribute= Change the attribute of an HTML element
element.setAttribute(attribute,
value)
Change the attribute of an HTML element
element.style.property= Change the style of an HTML element

Adding and Deleting Elements
45
Method Description
document.createElement() Create an HTML element
document.removeChild() Remove an HTML element
document.appendChild() Add an HTML element
document.replaceChild() Replace an HTML element
document.write(text) Write into the HTML output stream

Adding Events Handlers
46
Method Description
document.getElementById(id).
onclick=function()
{code}
Adding event handler code to an onclick
event

Document Object
• Java script enable browsers are capable of recognizing
individual objects in a HTML page.
• Each HTML document loaded into a browser window
becomes a Document object.
• The Document object provides access to all HTML elements
in a page, from within a script.
• DOM has following properties-
• Anchor
• Applet
• Body
• Cookies
• Form
• Image
• Link
• Title
• URL , etc
47

Validation in JavaScript
48
<!DOCTYPE html><html><body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script></body></html>

Java script

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Java script

Similar to Java script (20)

Recently uploaded

Recently uploaded (20)

Java script