SlideShare a Scribd company logo
12
<html> Tells where the JavaScript starts
<body>
<script type=“text/javascript”>
document.write(“Hello World!”);
</script> Commands for writing output to a page
</body>
</html> Tells where the JavaScript ends
This code produce the output on an HTML page: Hello World!
JavaScript and HTML page
Most read
14
 JavaScript statements are
 codes to be executed by the browser
 tells the browser what to do
 commands to the browser
 add semicolons at the end
 can be grouped together into blocks using curly
brackets
 JavaScript comments make the code more readable
 Single line comments start with //
 Multi line comments start with /* and end with */
Statements and Comments
Most read
20
 We can access and change the contents of document
by its methods.
 The important methods of document object are as
follows:
Methods of document object
Most read
CLIENT SIDE SCRIPTING WITH
JAVASCRIPT
Prepared By:
Bansari Shah
EN. NO.:150410107098
TY CE-2(Batch – B)
“A script is a program that automates the execution of
tasks which could alternatively be executed one-by-one
by a human operator.”
What is a Script?
A scripting language is a programming language that
supports the writing of scripts.
Scripting Languages
 The server-side scripting comprises all the scripts that
are executed on the server.
 Adopted technologies: Perl, PHP, ColdFusion, XSTL,
etc.
 The code is not visible to the client.
Server-side Scripting
Client side scripting using Javascript
 The client-side scripting comprises all the scripts that
are executed on the browser.
 The scripting derives from the event-based
programming that is typical of user interfaces.
 Adopted technologies: JavaScript, VBScript.
Client-side Scripting
Client side scripting using Javascript
Client-side Scripting
ADVANTAGES
 The Web browser uses its own
resources, and eases the
burden on the servlet.
 It has fewer features than
server side scripting
DISADVANTAGES
 Code is usually visible.
 Code is probably modifiable.
 Local files and databases can’t
be accessed. (as they are
stored on the server)
 JavaScript is the language of the web browser.
 JavaScript was originally called Live Script, and was
developed by Netscape Communications.
JavaScript
 JavaScript is designed to add interactivity to HTML pages
 JavaScript :
 consists of lines of interpretable computer code
 gives HTML designers a programming tool
 is usually embedded directly into HTML pages.
 allows to put dynamic text into an HTML page
 Java and JavaScript are two completely different
languages in both concept and design
JavaScript
 JavaScript is used in millions of web pages
 to improve the design
 to validate forms
 to detect browsers
 to create cookies
 JavaScript can react to events and can be used to validate data
and to create cookies
 Is the most popular scripting language in all major browsers e.g.
 Internet Explorer
 Mozilla
 Firefox
 Netscape
 Opera
JavaScript
<html> Tells where the JavaScript starts
<body>
<script type=“text/javascript”>
document.write(“Hello World!”);
</script> Commands for writing output to a page
</body>
</html> Tells where the JavaScript ends
This code produce the output on an HTML page: Hello World!
JavaScript and HTML page
<html>
<head>
<script src="xyz.js">
</script>
</head>
<body>
</body>
</html> A separate file
JavaScript and HTML page
 JavaScript statements are
 codes to be executed by the browser
 tells the browser what to do
 commands to the browser
 add semicolons at the end
 can be grouped together into blocks using curly
brackets
 JavaScript comments make the code more readable
 Single line comments start with //
 Multi line comments start with /* and end with */
Statements and Comments
 JavaScript Variables are containers for storing
information e.g. x=15; length=60.10
 It hold values or expressions
 can hold a text value like in name=“multimedia”
 var statement can declare JavaScript variables: var x;
var name;
 Variable names are case sensitive i.e. “myVar” is not
the same as “myvar”
 must begin with a letter or the underscore character
JavaScript Variables
 JavaScript Functions
 Can be called with the function name
 Can also be executed by an event
 Can have parameters and return statement
* Events
 are actions that can be detected e.g. OnMouseOver,
onMouseOut etc.
 are normally associated with functions
 <input type="text" size="30" id="email"
onChange="checkEmail()">
JavaScript Functions and Events
* Javascript actions may be triggered from events, e.g. changes on
form fields or a submit button being clicked:
 onfocus = Form field gets focus (validation)
 onblur= Form field looses focus (validation)
 onchange= Content of a field changes (validation)
 onselect= Text is selected
 onmouseover= Mouse moves over a link (animated buttons)
 onmouseout= Mouse moves out of a link (animated …)
 onclick= Mouse clicks an object
 onload= Page is finished loading (initial actions, info,)
 onSubmit= Submit button is clicked (validation etc.)
JavaScript: Events
 The document object represents the whole html
document.
 When html document is loaded in the browser, it
becomes a document object. It is the root
element that represents the html document. It has
properties and methods. By the help of document
object, we can add dynamic content to our web page.
Document Object Model
Properties of DOM
 We can access and change the contents of document
by its methods.
 The important methods of document object are as
follows:
Methods of document object
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
Accessing field value by document
object
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br>
<input type="button" value="cube" onclick="getcube()"/>
</form>
document.getElementById() method
*THANK YOU*

More Related Content

What's hot (20)

Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
Mohammed Hussein
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Client side scripting and server side scripting
Client side scripting and server side scriptingClient side scripting and server side scripting
Client side scripting and server side scripting
baabtra.com - No. 1 supplier of quality freshers
 
Java Exception handling
Java Exception handlingJava Exception handling
Java Exception handling
kamal kotecha
 
Html frames
Html framesHtml frames
Html frames
eShikshak
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
Asp.net state management
Asp.net state managementAsp.net state management
Asp.net state management
priya Nithya
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
Asp.NET Validation controls
Asp.NET Validation controlsAsp.NET Validation controls
Asp.NET Validation controls
Guddu gupta
 
Cookies and sessions
Cookies and sessionsCookies and sessions
Cookies and sessions
Lena Petsenchuk
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
Amit Baghel
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript Tutorial
Bui Kiet
 
Tags in html
Tags in htmlTags in html
Tags in html
Balakumaran Arunachalam
 
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
Javascript
JavascriptJavascript
Javascript
Nagarajan
 
Web search Technologies
Web search TechnologiesWeb search Technologies
Web search Technologies
Abdul Sami Kharal
 
Java script
Java scriptJava script
Java script
Shyam Khant
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
teach4uin
 
Html ppt
Html pptHtml ppt
Html ppt
santosh lamba
 

Similar to Client side scripting using Javascript (20)

Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students
shafiq sangi
 
HNDIT1022 Week 08, 09 10 Theory web .pptx
HNDIT1022 Week 08, 09  10 Theory web .pptxHNDIT1022 Week 08, 09  10 Theory web .pptx
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Go4Guru
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
ch samaram
 
CHAPTER 3 JS (1).pptx
CHAPTER 3  JS (1).pptxCHAPTER 3  JS (1).pptx
CHAPTER 3 JS (1).pptx
achutachut
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
Shrijan Tiwari
 
Java scipt
Java sciptJava scipt
Java scipt
Ashish Gajjar Samvad Cell
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
actanimation
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation
Soumen Santra
 
JavaScript: Implementations And Applications
JavaScript: Implementations And ApplicationsJavaScript: Implementations And Applications
JavaScript: Implementations And Applications
Pragya Pai
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
JohnLagman3
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Mohammed Hussein
 
JavaScript
JavaScriptJavaScript
JavaScript
Gulbir Chaudhary
 
BEAAUTIFUL presentation of java
BEAAUTIFUL  presentation of javaBEAAUTIFUL  presentation of java
BEAAUTIFUL presentation of java
rana usman
 
Java script
Java scriptJava script
Java script
fahhadalghamdi
 
Java Script
Java ScriptJava Script
Java Script
husbancom
 
Java script writing javascript
Java script writing javascriptJava script writing javascript
Java script writing javascript
Jesus Obenita Jr.
 
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
kavigamage62
 
Test2
Test2Test2
Test2
Ermias Hailemicheal
 
Test2
Test2Test2
Test2
Ermias Hailemicheal
 
Basic Java script handouts for students
Basic Java script handouts for students Basic Java script handouts for students
Basic Java script handouts for students
shafiq sangi
 
HNDIT1022 Week 08, 09 10 Theory web .pptx
HNDIT1022 Week 08, 09  10 Theory web .pptxHNDIT1022 Week 08, 09  10 Theory web .pptx
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Go4Guru
 
Basics java scripts
Basics java scriptsBasics java scripts
Basics java scripts
ch samaram
 
CHAPTER 3 JS (1).pptx
CHAPTER 3  JS (1).pptxCHAPTER 3  JS (1).pptx
CHAPTER 3 JS (1).pptx
achutachut
 
Session vii(java scriptbasics)
Session vii(java scriptbasics)Session vii(java scriptbasics)
Session vii(java scriptbasics)
Shrijan Tiwari
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
actanimation
 
JavaScript with Syntax & Implementation
JavaScript with Syntax & ImplementationJavaScript with Syntax & Implementation
JavaScript with Syntax & Implementation
Soumen Santra
 
JavaScript: Implementations And Applications
JavaScript: Implementations And ApplicationsJavaScript: Implementations And Applications
JavaScript: Implementations And Applications
Pragya Pai
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
JohnLagman3
 
BEAAUTIFUL presentation of java
BEAAUTIFUL  presentation of javaBEAAUTIFUL  presentation of java
BEAAUTIFUL presentation of java
rana usman
 
Java script writing javascript
Java script writing javascriptJava script writing javascript
Java script writing javascript
Jesus Obenita Jr.
 
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
kavigamage62
 
Ad

More from Bansari Shah (6)

Rad model
Rad modelRad model
Rad model
Bansari Shah
 
Inner class
Inner classInner class
Inner class
Bansari Shah
 
Types of attacks in cyber security
Types of attacks in cyber securityTypes of attacks in cyber security
Types of attacks in cyber security
Bansari Shah
 
Single pass assembler
Single pass assemblerSingle pass assembler
Single pass assembler
Bansari Shah
 
Greedymethod
GreedymethodGreedymethod
Greedymethod
Bansari Shah
 
variable entered map
variable entered mapvariable entered map
variable entered map
Bansari Shah
 
Ad

Recently uploaded (20)

Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
ANFIS Models with Subtractive Clustering and Fuzzy C-Mean Clustering Techniqu...
ANFIS Models with Subtractive Clustering and Fuzzy C-Mean Clustering Techniqu...ANFIS Models with Subtractive Clustering and Fuzzy C-Mean Clustering Techniqu...
ANFIS Models with Subtractive Clustering and Fuzzy C-Mean Clustering Techniqu...
Journal of Soft Computing in Civil Engineering
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)
kevig
 
Electrical and Electronics Engineering: An International Journal (ELELIJ)
Electrical and Electronics Engineering: An International Journal (ELELIJ)Electrical and Electronics Engineering: An International Journal (ELELIJ)
Electrical and Electronics Engineering: An International Journal (ELELIJ)
elelijjournal653
 
Software Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance OptimizationSoftware Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance Optimization
kiwoong (daniel) kim
 
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptxFINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
kippcam
 
Axial Capacity Estimation of FRP-strengthened Corroded Concrete Columns
Axial Capacity Estimation of FRP-strengthened Corroded Concrete ColumnsAxial Capacity Estimation of FRP-strengthened Corroded Concrete Columns
Axial Capacity Estimation of FRP-strengthened Corroded Concrete Columns
Journal of Soft Computing in Civil Engineering
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
IOt Based Research on Challenges and Future
IOt Based Research on Challenges and FutureIOt Based Research on Challenges and Future
IOt Based Research on Challenges and Future
SACHINSAHU821405
 
Artificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowyArtificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowy
dominikamizerska1
 
Presentación Tomografía Axial Computarizada
Presentación Tomografía Axial ComputarizadaPresentación Tomografía Axial Computarizada
Presentación Tomografía Axial Computarizada
Juliana Ovalle Jiménez
 
Impurities of Water and their Significance.pptx
Impurities of Water and their Significance.pptxImpurities of Water and their Significance.pptx
Impurities of Water and their Significance.pptx
dhanashree78
 
Computer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdfComputer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdf
kumarprem6767merp
 
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdfIrja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus
 
New Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docxNew Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docx
misheetasah
 
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
ijccmsjournal
 
Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
Software Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha TasnuvaSoftware Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha Tasnuva
tanishatasnuva76
 
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbbTree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
Tree_Traversals.pptbbbbbbbbbbbbbbbbbbbbbbbbb
RATNANITINPATIL
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)Call For Papers - International Journal on Natural Language Computing (IJNLC)
Call For Papers - International Journal on Natural Language Computing (IJNLC)
kevig
 
Electrical and Electronics Engineering: An International Journal (ELELIJ)
Electrical and Electronics Engineering: An International Journal (ELELIJ)Electrical and Electronics Engineering: An International Journal (ELELIJ)
Electrical and Electronics Engineering: An International Journal (ELELIJ)
elelijjournal653
 
Software Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance OptimizationSoftware Developer Portfolio: Backend Architecture & Performance Optimization
Software Developer Portfolio: Backend Architecture & Performance Optimization
kiwoong (daniel) kim
 
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptxFINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
FINAL 2013 Module 20 Corrosion Control and Sequestering PPT Slides.pptx
kippcam
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
IOt Based Research on Challenges and Future
IOt Based Research on Challenges and FutureIOt Based Research on Challenges and Future
IOt Based Research on Challenges and Future
SACHINSAHU821405
 
Artificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowyArtificial Power 2025 raport krajobrazowy
Artificial Power 2025 raport krajobrazowy
dominikamizerska1
 
Presentación Tomografía Axial Computarizada
Presentación Tomografía Axial ComputarizadaPresentación Tomografía Axial Computarizada
Presentación Tomografía Axial Computarizada
Juliana Ovalle Jiménez
 
Impurities of Water and their Significance.pptx
Impurities of Water and their Significance.pptxImpurities of Water and their Significance.pptx
Impurities of Water and their Significance.pptx
dhanashree78
 
Computer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdfComputer_vision-photometric_image_formation.pdf
Computer_vision-photometric_image_formation.pdf
kumarprem6767merp
 
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdfIrja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus - Beyond Pass and Fail - DevTalks.pdf
Irja Straus
 
New Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docxNew Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docx
misheetasah
 
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
PREDICTION OF ROOM TEMPERATURE SIDEEFFECT DUE TOFAST DEMAND RESPONSEFOR BUILD...
ijccmsjournal
 
Webinar On Steel Melting IIF of steel for rdso
Webinar  On Steel  Melting IIF of steel for rdsoWebinar  On Steel  Melting IIF of steel for rdso
Webinar On Steel Melting IIF of steel for rdso
KapilParyani3
 
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdfRearchitecturing a 9-year-old legacy Laravel application.pdf
Rearchitecturing a 9-year-old legacy Laravel application.pdf
Takumi Amitani
 
Software Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha TasnuvaSoftware Engineering Project Presentation Tanisha Tasnuva
Software Engineering Project Presentation Tanisha Tasnuva
tanishatasnuva76
 

Client side scripting using Javascript

  • 1. CLIENT SIDE SCRIPTING WITH JAVASCRIPT Prepared By: Bansari Shah EN. NO.:150410107098 TY CE-2(Batch – B)
  • 2. “A script is a program that automates the execution of tasks which could alternatively be executed one-by-one by a human operator.” What is a Script?
  • 3. A scripting language is a programming language that supports the writing of scripts. Scripting Languages
  • 4.  The server-side scripting comprises all the scripts that are executed on the server.  Adopted technologies: Perl, PHP, ColdFusion, XSTL, etc.  The code is not visible to the client. Server-side Scripting
  • 6.  The client-side scripting comprises all the scripts that are executed on the browser.  The scripting derives from the event-based programming that is typical of user interfaces.  Adopted technologies: JavaScript, VBScript. Client-side Scripting
  • 8. Client-side Scripting ADVANTAGES  The Web browser uses its own resources, and eases the burden on the servlet.  It has fewer features than server side scripting DISADVANTAGES  Code is usually visible.  Code is probably modifiable.  Local files and databases can’t be accessed. (as they are stored on the server)
  • 9.  JavaScript is the language of the web browser.  JavaScript was originally called Live Script, and was developed by Netscape Communications. JavaScript
  • 10.  JavaScript is designed to add interactivity to HTML pages  JavaScript :  consists of lines of interpretable computer code  gives HTML designers a programming tool  is usually embedded directly into HTML pages.  allows to put dynamic text into an HTML page  Java and JavaScript are two completely different languages in both concept and design JavaScript
  • 11.  JavaScript is used in millions of web pages  to improve the design  to validate forms  to detect browsers  to create cookies  JavaScript can react to events and can be used to validate data and to create cookies  Is the most popular scripting language in all major browsers e.g.  Internet Explorer  Mozilla  Firefox  Netscape  Opera JavaScript
  • 12. <html> Tells where the JavaScript starts <body> <script type=“text/javascript”> document.write(“Hello World!”); </script> Commands for writing output to a page </body> </html> Tells where the JavaScript ends This code produce the output on an HTML page: Hello World! JavaScript and HTML page
  • 14.  JavaScript statements are  codes to be executed by the browser  tells the browser what to do  commands to the browser  add semicolons at the end  can be grouped together into blocks using curly brackets  JavaScript comments make the code more readable  Single line comments start with //  Multi line comments start with /* and end with */ Statements and Comments
  • 15.  JavaScript Variables are containers for storing information e.g. x=15; length=60.10  It hold values or expressions  can hold a text value like in name=“multimedia”  var statement can declare JavaScript variables: var x; var name;  Variable names are case sensitive i.e. “myVar” is not the same as “myvar”  must begin with a letter or the underscore character JavaScript Variables
  • 16.  JavaScript Functions  Can be called with the function name  Can also be executed by an event  Can have parameters and return statement * Events  are actions that can be detected e.g. OnMouseOver, onMouseOut etc.  are normally associated with functions  <input type="text" size="30" id="email" onChange="checkEmail()"> JavaScript Functions and Events
  • 17. * Javascript actions may be triggered from events, e.g. changes on form fields or a submit button being clicked:  onfocus = Form field gets focus (validation)  onblur= Form field looses focus (validation)  onchange= Content of a field changes (validation)  onselect= Text is selected  onmouseover= Mouse moves over a link (animated buttons)  onmouseout= Mouse moves out of a link (animated …)  onclick= Mouse clicks an object  onload= Page is finished loading (initial actions, info,)  onSubmit= Submit button is clicked (validation etc.) JavaScript: Events
  • 18.  The document object represents the whole html document.  When html document is loaded in the browser, it becomes a document object. It is the root element that represents the html document. It has properties and methods. By the help of document object, we can add dynamic content to our web page. Document Object Model
  • 20.  We can access and change the contents of document by its methods.  The important methods of document object are as follows: Methods of document object
  • 21. <script type="text/javascript"> function printvalue(){ var name=document.form1.name.value; alert("Welcome: "+name); } </script> <form name="form1"> Enter Name:<input type="text" name="name"/> <input type="button" onclick="printvalue()" value="print name"/> </form> Accessing field value by document object
  • 22. <script type="text/javascript"> function getcube(){ var number=document.getElementById("number").value; alert(number*number*number); } </script> <form> Enter No:<input type="text" id="number" name="number"/><br> <input type="button" value="cube" onclick="getcube()"/> </form> document.getElementById() method

Editor's Notes

  • #3: Where to use scripts? Software applications, web pages, shells of operating systems…