SlideShare a Scribd company logo

JavaScript

Sunil OS
Sunil OS

The document provides information about HTML forms and JavaScript. It includes examples of HTML form fields like text, password, checkbox, radio buttons, and submit buttons. It also discusses how JavaScript can be used to validate form data, submit forms, and perform calculations. The last part discusses AJAX and how JavaScript and XMLHttpRequest object can be used to make asynchronous calls to retrieve and display data without reloading the page.

1 of 27
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
FORM Fields
www.SunilOS.com 6

Recommended

Java 8 - CJ
Java 8 - CJJava 8 - CJ
Java 8 - CJSunil OS
 
Hibernate
Hibernate Hibernate
Hibernate Sunil OS
 
Resource Bundle
Resource BundleResource Bundle
Resource BundleSunil OS
 
Exception Handling
Exception HandlingException Handling
Exception HandlingSunil OS
 
Collection v3
Collection v3Collection v3
Collection v3Sunil OS
 
Java Basics V3
Java Basics V3Java Basics V3
Java Basics V3Sunil OS
 

More Related Content

What's hot

Java Basics
Java BasicsJava Basics
Java BasicsSunil OS
 
Jsp/Servlet
Jsp/ServletJsp/Servlet
Jsp/ServletSunil OS
 
Collections Framework
Collections FrameworkCollections Framework
Collections FrameworkSunil OS
 
JAVA Variables and Operators
JAVA Variables and OperatorsJAVA Variables and Operators
JAVA Variables and OperatorsSunil OS
 
Java IO Streams V4
Java IO Streams V4Java IO Streams V4
Java IO Streams V4Sunil OS
 
Threads V4
Threads  V4Threads  V4
Threads V4Sunil OS
 
Python part2 v1
Python part2 v1Python part2 v1
Python part2 v1Sunil OS
 
Python Part 1
Python Part 1Python Part 1
Python Part 1Sunil OS
 
Java Input Output and File Handling
Java Input Output and File HandlingJava Input Output and File Handling
Java Input Output and File HandlingSunil OS
 
Machine learning ( Part 1 )
Machine learning ( Part 1 )Machine learning ( Part 1 )
Machine learning ( Part 1 )Sunil OS
 
Angular 8
Angular 8 Angular 8
Angular 8 Sunil OS
 
Java Threads and Concurrency
Java Threads and ConcurrencyJava Threads and Concurrency
Java Threads and ConcurrencySunil OS
 

What's hot (20)

Java Basics
Java BasicsJava Basics
Java Basics
 
Jsp/Servlet
Jsp/ServletJsp/Servlet
Jsp/Servlet
 
Collections Framework
Collections FrameworkCollections Framework
Collections Framework
 
JAVA Variables and Operators
JAVA Variables and OperatorsJAVA Variables and Operators
JAVA Variables and Operators
 
Log4 J
Log4 JLog4 J
Log4 J
 
Java IO Streams V4
Java IO Streams V4Java IO Streams V4
Java IO Streams V4
 
PDBC
PDBCPDBC
PDBC
 
Threads V4
Threads  V4Threads  V4
Threads V4
 
JAVA OOP
JAVA OOPJAVA OOP
JAVA OOP
 
Python part2 v1
Python part2 v1Python part2 v1
Python part2 v1
 
DJango
DJangoDJango
DJango
 
OOP V3.1
OOP V3.1OOP V3.1
OOP V3.1
 
JUnit 4
JUnit 4JUnit 4
JUnit 4
 
Python Part 1
Python Part 1Python Part 1
Python Part 1
 
Java Input Output and File Handling
Java Input Output and File HandlingJava Input Output and File Handling
Java Input Output and File Handling
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Machine learning ( Part 1 )
Machine learning ( Part 1 )Machine learning ( Part 1 )
Machine learning ( Part 1 )
 
Angular 8
Angular 8 Angular 8
Angular 8
 
Java Threads and Concurrency
Java Threads and ConcurrencyJava Threads and Concurrency
Java Threads and Concurrency
 
C++
C++C++
C++
 

Viewers also liked

C# Variables and Operators
C# Variables and OperatorsC# Variables and Operators
C# Variables and OperatorsSunil OS
 
Javascript - Numbers
Javascript   - NumbersJavascript   - Numbers
Javascript - NumbersSamuel Santos
 
Rays Technologies
Rays TechnologiesRays Technologies
Rays TechnologiesSunil OS
 
Java Swing JFC
Java Swing JFCJava Swing JFC
Java Swing JFCSunil OS
 
Eschool erp School Management System SMS System School Software
Eschool erp School Management System SMS System School SoftwareEschool erp School Management System SMS System School Software
Eschool erp School Management System SMS System School SoftwareMayank Jain
 

Viewers also liked (9)

C# Variables and Operators
C# Variables and OperatorsC# Variables and Operators
C# Variables and Operators
 
Javascript - Numbers
Javascript   - NumbersJavascript   - Numbers
Javascript - Numbers
 
Java script basic
Java script basicJava script basic
Java script basic
 
Rays Technologies
Rays TechnologiesRays Technologies
Rays Technologies
 
C# Basics
C# BasicsC# Basics
C# Basics
 
C++ oop
C++ oopC++ oop
C++ oop
 
Java Swing JFC
Java Swing JFCJava Swing JFC
Java Swing JFC
 
Eschool erp School Management System SMS System School Software
Eschool erp School Management System SMS System School SoftwareEschool erp School Management System SMS System School Software
Eschool erp School Management System SMS System School Software
 
C Basics
C BasicsC Basics
C Basics
 

Similar to JavaScript

Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...Ayes Chinmay
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajaxbaygross
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETJames Johnson
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4DEVCON
 
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebRobert Nyman
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXRobert Nyman
 
Java script Advance
Java script   AdvanceJava script   Advance
Java script AdvanceJaya Kumari
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery FundamentalsGil Fink
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETJames Johnson
 

Similar to JavaScript (20)

Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
A Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NETA Rich Web Experience with jQuery, Ajax and .NET
A Rich Web Experience with jQuery, Ajax and .NET
 
Javascript 2
Javascript 2Javascript 2
Javascript 2
 
J query training
J query trainingJ query training
J query training
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
lect4
lect4lect4
lect4
 
lect4
lect4lect4
lect4
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4
 
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
 
JSP
JSPJSP
JSP
 
Java script Advance
Java script   AdvanceJava script   Advance
Java script Advance
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Client Web
Client WebClient Web
Client Web
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
A Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NETA Rich Web experience with jQuery, Ajax and .NET
A Rich Web experience with jQuery, Ajax and .NET
 

More from Sunil OS

Threads v3
Threads v3Threads v3
Threads v3Sunil OS
 
Exception Handling v3
Exception Handling v3Exception Handling v3
Exception Handling v3Sunil OS
 
Machine learning ( Part 3 )
Machine learning ( Part 3 )Machine learning ( Part 3 )
Machine learning ( Part 3 )Sunil OS
 
Machine learning ( Part 2 )
Machine learning ( Part 2 )Machine learning ( Part 2 )
Machine learning ( Part 2 )Sunil OS
 
Python Pandas
Python PandasPython Pandas
Python PandasSunil OS
 

More from Sunil OS (6)

OOP v3
OOP v3OOP v3
OOP v3
 
Threads v3
Threads v3Threads v3
Threads v3
 
Exception Handling v3
Exception Handling v3Exception Handling v3
Exception Handling v3
 
Machine learning ( Part 3 )
Machine learning ( Part 3 )Machine learning ( Part 3 )
Machine learning ( Part 3 )
 
Machine learning ( Part 2 )
Machine learning ( Part 2 )Machine learning ( Part 2 )
Machine learning ( Part 2 )
 
Python Pandas
Python PandasPython Pandas
Python Pandas
 

Recently uploaded

Kartik Nair In Media Res Media Component
Kartik Nair In Media Res Media ComponentKartik Nair In Media Res Media Component
Kartik Nair In Media Res Media ComponentInMediaRes1
 
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...AKSHAYMAGAR17
 
Add Products From Catalog in Odoo 17 Sales
Add Products From Catalog in Odoo 17 SalesAdd Products From Catalog in Odoo 17 Sales
Add Products From Catalog in Odoo 17 SalesCeline George
 
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTS
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTSA TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTS
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTSDr.M.Geethavani
 
spring_bee_bot_creations_erd primary.pdf
spring_bee_bot_creations_erd primary.pdfspring_bee_bot_creations_erd primary.pdf
spring_bee_bot_creations_erd primary.pdfKonstantina Koutsodimou
 
Nzinga Kika - The story of the queen
Nzinga Kika    -  The story of the queenNzinga Kika    -  The story of the queen
Nzinga Kika - The story of the queenDeanAmory1
 
Plagiarism, Types & Consequences by Dr. Sarita Anand
Plagiarism, Types & Consequences by Dr. Sarita AnandPlagiarism, Types & Consequences by Dr. Sarita Anand
Plagiarism, Types & Consequences by Dr. Sarita AnandDr. Sarita Anand
 
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdfAynouraHamidova
 
Successful projects and failed programmes – the cost of not designing the who...
Successful projects and failed programmes – the cost of not designing the who...Successful projects and failed programmes – the cost of not designing the who...
Successful projects and failed programmes – the cost of not designing the who...Association for Project Management
 
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...SABC News
 
Healthy Habits for Happy School Staff - presentation
Healthy Habits for Happy School Staff - presentationHealthy Habits for Happy School Staff - presentation
Healthy Habits for Happy School Staff - presentationPooky Knightsmith
 
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdf
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdfDr.M.Florence Dayana-Cloud Computing-unit - 4.pdf
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdfDr.Florence Dayana
 
Organic Synthesis and Estimation of Functional Groups
Organic Synthesis and Estimation of Functional GroupsOrganic Synthesis and Estimation of Functional Groups
Organic Synthesis and Estimation of Functional GroupsDr.M.Geethavani
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...Nguyen Thanh Tu Collection
 
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdf
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdfA Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdf
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdfOH TEIK BIN
 
Odontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxOdontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxMennat Allah Alkaram
 
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...Katherine Villaluna
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxdeputymitchell2
 

Recently uploaded (20)

Kartik Nair In Media Res Media Component
Kartik Nair In Media Res Media ComponentKartik Nair In Media Res Media Component
Kartik Nair In Media Res Media Component
 
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...
Genetics, Heredity, Variation, history, its roles, Scope, Importance, and Bra...
 
Add Products From Catalog in Odoo 17 Sales
Add Products From Catalog in Odoo 17 SalesAdd Products From Catalog in Odoo 17 Sales
Add Products From Catalog in Odoo 17 Sales
 
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTS
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTSA TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTS
A TEXTBOOK OF INTELLECTUAL ROPERTY RIGHTS
 
spring_bee_bot_creations_erd primary.pdf
spring_bee_bot_creations_erd primary.pdfspring_bee_bot_creations_erd primary.pdf
spring_bee_bot_creations_erd primary.pdf
 
Nzinga Kika - The story of the queen
Nzinga Kika    -  The story of the queenNzinga Kika    -  The story of the queen
Nzinga Kika - The story of the queen
 
Plagiarism, Types & Consequences by Dr. Sarita Anand
Plagiarism, Types & Consequences by Dr. Sarita AnandPlagiarism, Types & Consequences by Dr. Sarita Anand
Plagiarism, Types & Consequences by Dr. Sarita Anand
 
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
 
Successful projects and failed programmes – the cost of not designing the who...
Successful projects and failed programmes – the cost of not designing the who...Successful projects and failed programmes – the cost of not designing the who...
Successful projects and failed programmes – the cost of not designing the who...
 
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...
MEC MAJUBA SADDENED BY THE PASSING AWAY OF THREE TEACHERS FOLLOWING A CAR ACC...
 
Advance Mobile Application Development class 04
Advance Mobile Application Development class 04Advance Mobile Application Development class 04
Advance Mobile Application Development class 04
 
CLUBE PERLINGUAS .
CLUBE PERLINGUAS                        .CLUBE PERLINGUAS                        .
CLUBE PERLINGUAS .
 
Healthy Habits for Happy School Staff - presentation
Healthy Habits for Happy School Staff - presentationHealthy Habits for Happy School Staff - presentation
Healthy Habits for Happy School Staff - presentation
 
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdf
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdfDr.M.Florence Dayana-Cloud Computing-unit - 4.pdf
Dr.M.Florence Dayana-Cloud Computing-unit - 4.pdf
 
Organic Synthesis and Estimation of Functional Groups
Organic Synthesis and Estimation of Functional GroupsOrganic Synthesis and Estimation of Functional Groups
Organic Synthesis and Estimation of Functional Groups
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
 
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdf
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdfA Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdf
A Free eBook ~ Mental Exercise ...Puzzles to Analyze.pdf
 
Odontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxOdontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptx
 
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...
Practical Research 1, Lesson 5: DESIGNING A RESEARCH PROJECT RELATED TO DAILY...
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 

JavaScript

  • 3. 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
  • 4. 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
  • 5. 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
  • 7. 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
  • 8. <script> Tag  <HTML>  <HEAD> o <SCRIPT LANGUAGE="JavaScript"> o function hello(){ o alert(“Pahala Pahala Click"); o } o </SCRIPT>  </HEAD>  <input name="operation" type="button" value="Click Me"  onclick="hello()" > www.SunilOS.com 8
  • 9. 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
  • 10. 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
  • 11. <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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. Javascript Frameworks JQuery Angular JS Ext JS Prototype DOJO www.SunilOS.com 21
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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