javascript introduction 1. what is java script ? javascript is a client-side scripting language. a...
TRANSCRIPT
JavaScript Introduction
1
Java
Scrip
t Int
rodu
ction
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Scrip
t Int
rodu
ction
Java Script Vs JavaJavaScript 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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
How to use/implement Java Script?
• We can implement Java script in our web page by following three ways-1. Inside the head tag2. Within the body tag3. In an external file (with
extension .js)
8
Java
Scrip
t Int
rodu
ction
Implementing Java Script1. Inside HEAD Tag:
Syntax:<HTML> <HEAD> <SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- - Java Script Code
// - -> </SCRIPT>
</HEAD><BODY>
</BODY></HTML>
9
Java
Scrip
t Int
rodu
ction
Implementing Java Script2. Within BODY Tag:
Syntax:<HTML> <HEAD>
</HEAD><BODY> <SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- - java script code
// - -> </SCRIPT>
</BODY></HTML>
10
Java
Scrip
t Int
rodu
ction
Implementing Java Script
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
Scrip
t Int
rodu
ction
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 interpret12
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
16
Java
Scrip
t Int
rodu
ction
document.write()
<html><body><h1>My First Web Page</h1><p>My first paragraph.</p><button type="button" onclick="document.write(5 + 6)">Try it</button></body></html>
17
Java
Scrip
t Int
rodu
ction
18
Java
Scrip
t Int
rodu
ction
innerHTML
<html> <body><h1>My First Web Page</h1><p>My First Paragraph.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;</script></body></html> 19
Java
Scrip
t Int
rodu
ction
20
Java
Scrip
t Int
rodu
ction
console.log()<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My first paragraph.</p><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
Java
Scrip
t Int
rodu
ction
22
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
Operators in JavaScript
• Following operators are used in JavaScript-1. Arithmetic Operator2. Comparison Operator
26
Java
Scrip
t Int
rodu
ction
Operators in JavaScript• 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
Java
Scrip
t Int
rodu
ction
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(result) document.write(linebreak) document.write("ten / two
= ") result = ten / two document.write(result) //--> </script> </body>
28
Java
Scrip
t Int
rodu
ction
Outputtwo plus ten = 12ten * ten = 100ten / two = 5
29
Java
Scrip
t Int
rodu
ction
Operators in JavaScript2. 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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
Creating JavaScript FunctionsDeclaration 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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
Event in JavaScript
• JS Event Handler• Onclick• onMouseOver• onMouseOut• onLoad• onkeydown
36
Java
Scrip
t Int
rodu
ction
JavaScript Object
• Object• Number• String• Date• Array• Boolean• Math, etc
37
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
• 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?
Java
Scrip
t Int
rodu
ction
• 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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
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
Java
Scrip
t Int
rodu
ction
Adding Events Handlers
46
Method Descriptiondocument.getElementById(id).onclick=function(){code}
Adding event handler code to an onclick event
Java
Scrip
t Int
rodu
ction
Window Document Object• The Window object represents a web browser
window. • In client-side JavaScript, the Window object is the
global object that defines all top-level properties and methods.
• The properties and methods of the Window object are therefore global properties and global functions and you can refer to them by their property names without any object prefix.
• One of the properties of the Window object is named window and refers back to the Window object itself:window //The global Window object window.document //The document property of the
window document //Or omit the object prefix
47
Java
Scrip
t Int
rodu
ction
Browser Document Object
48
Java
Scrip
t Int
rodu
ction
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
49
Java
Scrip
t Int
rodu
ction
Document Object• DOM methods-• Open()• Close()• getElementByName()• getElementBYId()• Write()• Writeln()
50
Java
Scrip
t Int
rodu
ction
Validation in JavaScript• Form Validation-• Form data that typically are checked by a JavaScript could be:
• has the user left required fields empty?• has the user entered a valid e-mail address?• has the user entered a valid date?• has the user entered text in a numeric field?
Ex:Blank/ or null validationvar x= document.forms["myForm"]["fname"].valueif (x==null || x=="") // for Null or blank value Email
validationvar x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
51