Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

1 Java Script

The document provides an overview of JavaScript, distinguishing between server-side and client-side applications, and explaining key concepts such as DHTML, JavaScript syntax, variables, functions, built-in objects, and methods. It covers practical examples of using JavaScript for dynamic web page creation, including handling user input and data validation. Additionally, it discusses the history of JavaScript, its syntax, and various objects like Date, Math, Array, and String, along with their methods.

Uploaded by

gayathripunugupati
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

1 Java Script

The document provides an overview of JavaScript, distinguishing between server-side and client-side applications, and explaining key concepts such as DHTML, JavaScript syntax, variables, functions, built-in objects, and methods. It covers practical examples of using JavaScript for dynamic web page creation, including handling user input and data validation. Additionally, it discusses the history of JavaScript, its syntax, and various objects like Date, Math, Array, and String, along with their methods.

Uploaded by

gayathripunugupati
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

JAVA SCRIPT

SERVER-SIDE APPLICATIONS VS. CLIENT-


SIDE APPLICATIONS
• server-side applications are applications runs on the Web Server
• Client-side applications are small applications which are embedded within the HTML
code and executed by the browser.
Server-Side Code
• Languages include Python , PHP, C#, Servlets and JSP;
• Cannot be seen by the user .
• Can only respond to HTTP requests
Client-Side Code
• Languages used include: HTML, CSS, and Java script.
• Parsed by the user’s browser.
• Reacts to user input.
WHAT IS DHTML?

• Dynamic HyperText Markup Language


(DHTML) is a combination of Web
development technologies used to create
dynamically changing websites.

DHTML = HTML + CSS +JavaScript


WHAT IS JAVASCRIPT

• JavaScript is a scripting language designed primarily


for creating dynamic Web pages.
• It is used to add dynamic behavior, store information,
and handle requests and responses on a website
• JavaScript is most commonly used as a client side
scripting language. This means that JavaScript code is
written into an HTML page.
HISTORY OF JAVASCRIPT ?

• JavaScriptwas created by Brendan Eich in


1995 at Netscape Communications.
• JavaScript was first known as LiveScript, but
Netscape changed its name to JavaScript
• JavaScript
made its first appearance in
Netscape 2.0 in 1995 with the
name LiveScript.
JAVASCRIPT - SYNTAX

• JavaScript can be implemented using JavaScript statements that are placed


within the <script>... </script>
• You can place the <script> within the <head> tags.

• The script tag takes two important attributes :


• Language − This attribute specifies what scripting language you are using.
Typically, its value will be javascript.
• Type − The type attribute specifies the content in the script tag
FIRST JAVASCRIPT PROGRAM
<html>
<head>
<script>
document.write("hi");
</script>
</head>
<body>
<h2>JavaScript Example</h2>
</body>
</html>
• document.write writes a string into HTML document.
VARIABLES IN JAVA SCRIPT

• Variables are used to hold data.


• JavaScript is a case-sensitive language
Syntax:

var varname;
<body>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.write("value of z is" +z);
</script>
</body> </html>
FUNCTIONS
• A function is some code that is executed when an event fires
or a call to that function is made.
• Typically a function contains several lines of code.
• Functions are written in the <head> element.
Syntax
function function-name(parameter1, parameter2, parameter3)
{
code to be executed
}
<html><head><script>
function add(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c= a + b;
document.getElementById("answer").value= c;
}
</script></head><body>
Enter First Value:<input type="text" id="first"><br>
Enter second Value:<input type="text" id="second"><br>
Answer:<input id="answer"><br>
<button onclick="add()">Answer</button>
</body></html>
BUILT-IN OBJECTS IN JAVASCRIPT

• JavaScript supports a number of built-in objects that extend the flexibility of


the language.
•Javascript provides following built-in objects
1.Date
2.Math
3.Array
4.String
DATE OBJECT
• The JavaScript date object can be used to get
year, month and day.
• Date objects are created with the new Date( )
Syntax
• var obj=new Date();
Date Methods
Method Description
getFullYear() returns the year in 4 digit e.g. 2015.

getMonth() returns the month in 2 digit from 0 to 11. So it


is better to use getMonth()+1 in your code.
getDate() returns the date in 1 or 2 digit from 1 to 31.
getDay() returns the day of week in 1 digit from 0 to 6.
getHours() returns the hour (0-23)
getMinutes() Returns the minutes (0-59)
getSeconds() returns the seconds (0-59)
getMilliseconds() returns the milliseconds.
<html><body>
<script>
var d,day,month,year,h,m,s;
d=new Date();
day=d.getDate();
month=d.getMonth()+1;
year=d.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
h=d.getHours();
m=d.getMinutes();
s=d.getSeconds();
document.write("<br>"+h+":"+m+":"+s);
</script>
</body></html>
Math Object

•The JavaScript math object provides


several methods to perform mathematical
operation.
• Unlike date object, it doesn't have
constructors.
Math Object Methods
Method Description

abs() Returns the absolute value of a number.


ceil() Returns the integer greater than or equal to a number.

floor() Returns the integer less than or equal to a number.


pow() Returns base to the exponent power, that is, base exponent.
random() Returns a random number between 0 and 1.

round() Returns the value of a number rounded to the nearest


integer.
sqrt() Returns the square root of a number.
Example
<script>
document.write(Math.sqrt(4));
document.write("<br> Randam no is:" +Math.random());
document.write("<br> power is:"+ Math.pow(2,4));
document.write("<br> floor is:" +Math.floor(4.6));
document.write("<br> ceil is:"+Math.ceil(4.6));
document.write("<br> Round of no is:"+Math.round(4.6))
document.write("<br> absolute no is"+Math.abs(-4))
</script>
Array object
•JavaScript array is an object that
represents a collection of similar type of
elements.
•There are 3 ways to construct array in
JavaScript
1.By array literal
2.By creating instance of Array directly
(using new keyword)
3.By using an Array constructor (using
new keyword)
1) JavaScript array literal
•The syntax of creating array using array literal :
var arrayname=[value1,value2.....valueN];
Ex:
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
2) JavaScript Array directly (new keyword)
•The syntax of creating array directly is given below:
var arrayname=new Array();
•Here, new keyword is used to create instance of array.
Example:
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
3) JavaScript array constructor (new
keyword)
•Here, you need to create instance of array by passing arguments in
constructor so that we don't have to provide value explicitly.
Example:
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
•Javascript array length property
returns the number of elements in
an array.
Syntax:
array.length
Methods
Method Description

concat() Returns a new array comprised of this array joined with other array(s)
and/or value(s).
pop() Removes the last element from an array and returns that element.
push() Adds one or more elements to the end of an array and returns the new
length of the array.
reverse() Reverses the order of the elements of an array -- the first becomes the
last, and the last becomes the first.
shift() Removes the first element from an array and returns that element.
slice() Extracts a section of an array and returns a new array.
sort() Sorts the elements of an array
unshift() Adds one or more elements to the front of an array and returns the new
length of the array.
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("<h1> Before Array operations:</h1>"+fruits);
fruits.pop();
document.write("<h1> After POP():</h1>"+fruits);
fruits.push("Kiwi");
document.write("<h1> After Push():</h1>"+fruits);
fruits.shift();
document.write("<h1> After shift():</h1>"+fruits);
fruits.unshift("Sapota");
document.write("<h1> After unshift():</h1>"+fruits);
var num=["2","1","3"]
var my= num.concat(fruits);
document.write("<h1> After concat():</h1>"+my);
document.write("<h1> After reverse:</h1>"+my.reverse());
document.write("<h1> After sort:</h1>"+my.sort());
</script>
String Object
•The JavaScript string is an object that represents a
sequence of characters.
•There are 2 ways to create string in JavaScript
•By string literal
•By string object (using new keyword)

1.string literal
The string literal is created using double quotes.
syntax:
var stringname="string value";
Ex:
<script>
var str="This is string literal";
document.write(str);
</script>
2)string object (using new keyword)
var stringname=new String("string literal");
•Here, new keyword is used to create
instance of string.
Ex:
<script>
var str=new String("hello javascript string");

document.write(stringname);
</script>
Methods
Method Description
charAt() Returns the character at the specified index.
concat() Combines the text of two strings and returns a new string.
replace() Used to find a match between a regular expression and a
string, and to replace the matched substring with a new
substring.
slice() Extracts a section of a string and returns a new string.
substr() Returns the characters in a string beginning at the specified
location through the specified number of characters.
toLowerCase() Returns the calling string value converted to lower case.

toString() Returns a string representing the specified object.


toUpperCase() Returns the calling string value converted to uppercase.
Example
<script>
var s1="javascript";
document.write("<h1>string length:</h1>"+s1.length);
document.write("<br>"+s1.charAt(2));
var s2="concat example";
var s3=s1.concat(s2);
document.write("<h1>after concat:</h1>"+s3);
var s4=s3.toUpperCase();
document.write("<h1>after Upper case:</h1>"+s4);
var s5=s4.toLowerCase();
document.write("<h1>after lower case:</h1>"+s5);
var s6=s5.slice(2,5);
document.write("<h1>after slice:</h1>"+s6);
var s7=s5.substr(2,5);
document.write("<h1>after substring:</h1>"+s7);
</script>
Window Object

The window object represents a window in browser.


An object of window is created automatically by the
browser.

Method Description
alert() displays the alert box containing message
with ok button.
confirm() displays the confirm dialog box containing
message with ok and cancel button.

prompt() displays a dialog box to get input from the


user.
Alert dialog box
•It displays alert dialog box. It has message and ok button.

<html><head>
<script>
function msg(){
alert("Hello Alert Box");
}
</script></head> <body>

<input type="button" value="click"


onclick="msg()">
</body></html>
confirm() dialog box
•It displays the confirm dialog box. It has message with ok and cancel
buttons.
<html><head><script>
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
} </script> </head> <body>
<input type="button" value="deletrecord"
onclick="msg()">
</body></html>
prompt dialog Box
•It displays prompt dialog box for input. It has message and textfield.

<html><head><script>
function msg(){
var v= prompt("Who are you?");
alert("I am "+v);
}
</script> </head> <body>
<input type="button" value="click" onclick="msg()">
</body></html>
DOCUMENT OBJECT

• A Document object represents the


HTML document that is displayed in
that window.
• Document object − Each HTML
document that gets loaded into a
window becomes a document
object
Methods of document object

Method Description

write("string") writes the given string on the document.


writeln("string") writes the given string on the document
with newline character at the end.

getElementById() returns the element having the given id


value.
Accessing field value by document object

•document.form1.name.value is used to get the


value of name field.
•Here, document is the root element that
represents the html document.
•form1 is the name of the form.
•name is the attribute name of the input text.
•value is the property, that returns the value of the
input text.
EXAMPLE
<html><head><script>
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script> </head>
<form name="form1">
Enter Name:
<input type="text" name="name"/>
<input type="button" onclick="printvalue()"
value="print name"/>
</form>
</html>
HTML Events

•JavaScript's interaction with HTML is handled


through events.
•An HTML event can be something the browser
does, or something a user does.
•A JavaScript can be executed when an event
occurs, like when a user clicks on an HTML
element.

Event Description
onclick The user clicks an HTML element

onsubmit occurs when form is submitted.


onclick Event Type

•This is the most frequently used event type which occurs when a
user clicks the html element like button.
Syntax:
onclick= function()
Ex:
<input type="button" onclick="printvalue()" value="print name"/>
onsubmit Event type
•onsubmit is an event that occurs when you try to submit a form. You can
put your form validation against this event type.

Ex:
<form name="myform" method="post" onsubmit="validateform()" >
DATA VALIDATION
Data validation is the process of ensuring that user input is clean, correct, and
useful.
• Typical validation tasks are:
1. has the user filled in all required fields?
2. has the user entered a valid date?
3. has the user entered text in a numeric field?
• Most often, the purpose of data validation is to ensure correct user input.
• Validation can be defined by many different methods, and deployed in many
different ways.
Server side validation is performed by a web server, after input has been sent to
the server.
Client side validation is performed by a web browser, before input is sent to a web
server.
JavaScript Form Validation

Java script is a client side validation


What is form validation?
Form validation is the process of
making sure that data supplied by the
user using a form, meets the criteria set
for collecting data from the user
User Name Validation
Rules:
1.Name not empty
2. Only Characters.
3. Must be 5 to 15 Characters.
<html><head>
if ((a.length < 5) || (a.length > 15))
<script type="text/javascript">
{
function validation()
alert("Your Character must be 5 to 15
{
Character");
var a = document.form.name.value;
return false;}}
if(a=="")
</script></head>
{
<body>
alert("Please Enter Your Name");
<form name="form" method="post"
return false;
onsubmit="return validation()">
}
Your Name:<input type="text"
if(!isNaN(a)) name="name"">
{
<input type="submit" name="sub"
alert("Please Enter Only Characters"); value="Submit">
return false; </form></body></html>
}
Password Validation
Rules:
6 to 20 characters which contain at
least one numeric digit, one
uppercase and one lowercase letter
<html> <head><script>
<body>
function CheckPassword()
{ <h2>Input Password and Submit [6 to 20
input=document.form1.text1.value;
characters which contain at least one
numeric digit, one uppercase and one
var pass= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;
lowercase letter]</h2>
if(input.match(pass))
{
<form name="form1" action="#">
alert("Correct") Enter Password <input type="text"
return true; name="text1"/>
} <input type="submit" name="submit"
else value="Submit"
{ onclick="CheckPassword()"/>
alert('Wrong...!') </form> </body> </html>
return false;
} }
</script> </head>
Email Validation
1.Must have @ and . characters
2.Word before and after @ then .
After word with 2 to 3 characters.
<html> <head><script> <body>
function CheckEmail() <form name="form1" action="#"
{ onsubmit="CheckEmail()">
input=document.form1.text1.value; Enter EMail <input type="text"
var email=/^\w+([\.-]?\w+)*@\w*(\.\w{2,3})$/; name="text1"/>
if(input.match(email)) <input type="submit"
{ name="submit"
alert("Correct") value="Submit" />
} </form> </body> </html>
else
{
alert('Wrong...!')
} }
</script></head>
REGISTRATION FORM

You might also like