JavaScript

www.SunilOS.com 1
www.sunilos.com
www.raystec.com
JavaScript

Hello.html
<HTML>
<HEAD></HEAD>
<BODY>
<center><b><u>
Hello
</u></b></center>
</BODY>
</HTML>
www.SunilOS.com 2

Submit Data From HTML Form
<HTML>
<HEAD></HEAD>
<BODY>
<FORM METHOD=“GET” ACTION="HelloName.jsp">
Enter Name
<INPUT TYPE="text" NAME="fName">
<INPUT VALUE="GO" TYPE="submit">
</FORM>
</BODY>
</HTML>
GET
POST
On Submit -
http://localhost:8080/aajkiapp/HelloName.jsp?fName=Sunrays
www.SunilOS.com 3

FORM Fields
 <FORM METHOD=GET ACTION="">
 Text Field<INPUT TYPE="text" NAME="userId"><BR>
 Password Field<INPUT TYPE="password" NAME ="pwd"><BR>
 Checkbox Field<INPUT TYPE="checkbox" NAME="checkBox"
VALUE="1" ><BR>
 Radio Field<INPUT TYPE="radio" NAME="degree" VALUE="MCA">
 <INPUT TYPE="radio" NAME="degree" VALUE="BE"><BR>
 Button <INPUT TYPE="button" NAME="action" VALUE="Go"><BR>
 Submit Button<INPUT TYPE="Submit" VALUE="Submit"><BR>
www.SunilOS.com 4

FORM Fields (Cont.)
 Reset Button<INPUT TYPE="reset" VALUE="Clear"><BR>
 TextArea<TEXTAREA NAME="tArea" ROWS="2"
COLS="20"></TEXTAREA><BR>
 List <SELECT NAME="list">
 <OPTION VALUE="1">ONE</OPTION>
 <OPTION VALUE="2">TWO</OPTION>
 </SELECT><BR>
 Hidden Value<INPUT TYPE="hidden" NAME="id"
VALUE="123">
 </FORM>
www.SunilOS.com 5

JavaScript
It is the scripting language of the Web.
It is used in millions of Web pages to add
functionalities:
o Validate forms
o Detect browsers
o Handle Cookies
..and much more
www.SunilOS.com 7

Key points
 Javascript functions are written in script tag.
o <script language="text/javascript">…</script>
 Tag <script > can be written anywhere in HTML but
<HEAD> tag is preferred to write it because head position
is first loaded in browser.
 Function is always started with 'function' key word.
 Variables are defined by optional 'var' keyword. For
example
o var msg =0; //with var
o OR
o msg=0; //witout var
www.SunilOS.com 9

Key points (Cont.)
 Data type of a variable is depending on its stored
value.
o var num= 1; //integer
o var name ="sunrays“; //string
o var salary = 1.5; //float
 String can be represented by single quote (') or
double quote (") in Javascript.
o var org = “sunrays”;
o var org = 'sunrays' ;
www.SunilOS.com 10

<INPUT event
Attribute The event occurs when...
onabort Loading of an image is interrupted
onblur An element loses focus
onchange The user changes the content of a field
onclick Mouse clicks an object
ondblclick Mouse double-clicks an object
onerror An error occurs when loading a document or an image
onfocus An element gets focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed or held down
onkeyup A keyboard key is released
onload A page or an image is finished loading
www.SunilOS.com 11

Javascript Objects
 <HTML>
 <HEAD></HEAD>
 <BODY>
 <FORM NAME=‘helloForm’ METHOD=“GET”
ACTION="HelloName.jsp">
o Enter Name
o <INPUT TYPE="text" NAME=“name“ VALUE=‘XYZ’>
 <INPUT VALUE="GO" TYPE="submit">
 </FORM>
 </BODY>
 </HTML>
document
form
name
alert(document.helloForm.name.value);
www.SunilOS.com 12

Confirm Box (Are You Sure) ?
<form action="Abc.jsp">
Roll NO <input type="text" name="rollNo">
<input name="operation" type="button"
value="Delete“ onclick="doDelete(this.form)" >
</form>
www.SunilOS.com 13

Confirm Box ( Cont.)
 <script type="text/javascript">
 function doDelete(frm){

 if(frm.rollNo.value == ''){
 alert("Roll number can not be null")
 frm.rollNo.focus();
 }else {
 var flag = confirm("Are you sure ?");
 if(flag){
 frm.submit();
 }
 }
 }
 </script>
www.SunilOS.com 14

Sum of two Numbers
 <form name=“calForm” >
 <input type="text" name="num1">+
 <input type="text" name="num2">=
 <input type="text" name="sum" readonly=“true">
 <input type="button" value="Calculate" onclick="calc(document.calForm)"
>
 <input type="button" value="Calculate“ onclick="calc(this.form)" >
 </form>
www.SunilOS.com 15

Sum of two Numbers
 <form action="">
 <input type="text" name="num1“ onchange="calc(this.form)" >
 + <input type="text" name="num2“ onchange="calc(this.form)" >
 = <input type="text" name="sum" readonly=“true">
 <input type="button" value="Calculate" onclick="calc(this.form)" >
 </form>
www.SunilOS.com 16

Calculate Sum
<script type="text/javascript">
function calc(frm){
 var n1 = parseInt(frm.num1.value);
 var n2 = parseInt(frm.num2.value);
 frm.sum.value = n1 + n2;
 return frm.sum.value;
}
</script>
www.SunilOS.com 17

Validation on form submit
<form onsubmit="return validate(this)">
o User ID <input type="text" name="id"><br>
o Password <input type=“text" name="pwd">
o <input type="submit" value=“Go" >
</form>
www.SunilOS.com 18

Validate method
 function validate(frm){

 var flag = true;
 if(frm.id.value == ''){
 alert("User ID can not be null");
 flag = false;
 }
 if(frm.pwd.value == ''){
 alert("Password can not be null");
 flag = false;
 }
 return flag;
 }
www.SunilOS.com 19

Reusable functions .js file
Reusable functions can be stored in a text file that
has extension .js.
HTML pages can import functions from a .js file to
use them.
HTML pages can import multiple .js files.
Include .js files into HTML by <script> tag:
o <script type="text/javascript" src="menu.js">
o <script type="text/javascript" src=“calendar.js">
www.SunilOS.com 20

Javascript Frameworks
JQuery
Angular JS
Ext JS
Prototype
DOJO
www.SunilOS.com 21

AJAX
 Asynchronous JavaScript and XML
 HTML pages call a web resource (web page)
asynchronously (in the background) without impacting
existing displaying page.
 HTML pages can send and receive data with the help of
AJAX from the source server asynchronously.
 Object XMLHttpRequest is used to make asynchronous
calls.
 Usually JSON data fetched by AJAX calls.
www.SunilOS.com 22

Get XmlHttpObject
 function getXmlHttpObject(){
 var xmlHttp=null;
 try{
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e){
 // Internet Explorer
 try{
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e){
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 }
 return xmlHttp;
 }
www.SunilOS.com 23

HTML
 Sign Up Guest :
 <INPUT TYPE="radio“ NAME="site“ onClick="getContent(‘/App/Guest')">
 Sign Up Patient:
 <INPUT TYPE="radio" NAME="site“ onClick="getContent('/App/Patient')">
 Sign Up Doctor:
 <INPUT TYPE="radio" NAME="site“ onClick="getContent('/App/Doctor')" >
 <TD id='bodyText'> AJAX Text will be replaced here </TD>
www.SunilOS.com 24

Get Data
 function getContent(url){
o var xmlHttp = getXmlHttpObject();
o xmlHttp.open("GET",url,true);
o //attach function
o xmlHttp.onreadystatechange=function(){
 if(xmlHttp.readyState==4 && xmlHttp.status == 200) {
• var cont = xmlHttp.responseText;
• document.getElementById('bodyText').innerHTML = cont;
 }
o }
o xmlHttp.send(null);
 }
www.SunilOS.com 25

Disclaimer
This is an educational presentation to enhance the
skill of computer science students.
This presentation is available for free to computer
science students.
Some internet images from different URLs are
used in this presentation to simplify technical
examples and correlate examples with the real
world.
We are grateful to owners of these URLs and
pictures.
www.SunilOS.com 26

Thank You!
www.SunilOS.com 27
www.SunilOS.com

JavaScript

More Related Content

What's hot

Viewers also liked

Similar to JavaScript

More from Sunil OS

Recently uploaded

In this document

JavaScript