SlideShare a Scribd company logo
12
Most read
14
Most read
20
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)

PPTX
Complete Lecture on Css presentation
Salman Memon
 
PDF
jQuery for beginners
Arulmurugan Rajaraman
 
PPT
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
PPT
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
PPTX
Java script
reddivarihareesh
 
PPTX
Html5 tutorial for beginners
Singsys Pte Ltd
 
PPT
Java Script ppt
Priya Goyal
 
ODP
Introduction of Html/css/js
Knoldus Inc.
 
KEY
HTML presentation for beginners
jeroenvdmeer
 
PPT
cascading style sheet ppt
abhilashagupta
 
PPT
HTML Tags
Pranay Agrawal
 
PDF
Html frames
eShikshak
 
PDF
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
PPTX
Java script
Abhishek Kesharwani
 
PPTX
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
PPT
Introduction to CSS
Amit Tyagi
 
PDF
JavaScript - Chapter 11 - Events
WebStackAcademy
 
PPTX
HTML Fundamentals
BG Java EE Course
 
PPTX
Java script array
chauhankapil
 
Complete Lecture on Css presentation
Salman Memon
 
jQuery for beginners
Arulmurugan Rajaraman
 
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Java script
reddivarihareesh
 
Html5 tutorial for beginners
Singsys Pte Ltd
 
Java Script ppt
Priya Goyal
 
Introduction of Html/css/js
Knoldus Inc.
 
HTML presentation for beginners
jeroenvdmeer
 
cascading style sheet ppt
abhilashagupta
 
HTML Tags
Pranay Agrawal
 
Html frames
eShikshak
 
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
Java script
Abhishek Kesharwani
 
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Introduction to CSS
Amit Tyagi
 
JavaScript - Chapter 11 - Events
WebStackAcademy
 
HTML Fundamentals
BG Java EE Course
 
Java script array
chauhankapil
 

Similar to Client side scripting using Javascript (20)

DOCX
Basic Java script handouts for students
shafiq sangi
 
PPTX
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
PPT
JAVA SCRIPT
Go4Guru
 
DOC
Basics java scripts
ch samaram
 
PPTX
CHAPTER 3 JS (1).pptx
achutachut
 
PPT
Session vii(java scriptbasics)
Shrijan Tiwari
 
PPT
JavaScript & Dom Manipulation
Mohammed Arif
 
DOC
Java script by Act Academy
actanimation
 
PPTX
JavaScript with Syntax & Implementation
Soumen Santra
 
PPT
Scripting languages
teach4uin
 
PPTX
JavaScript: Implementations And Applications
Pragya Pai
 
PDF
8.-Javascript-report powerpoint presentation
JohnLagman3
 
PDF
JAVA SCRIPT
Mohammed Hussein
 
DOCX
JavaScript
Gulbir Chaudhary
 
PPTX
BEAAUTIFUL presentation of java
rana usman
 
PPT
Java script
fahhadalghamdi
 
PPTX
Java Script
husbancom
 
PPTX
Javascript
Nagarajan
 
PPTX
Java script writing javascript
Jesus Obenita Jr.
 
Basic Java script handouts for students
shafiq sangi
 
HNDIT1022 Week 08, 09 10 Theory web .pptx
IsuriUmayangana
 
JAVA SCRIPT
Go4Guru
 
Basics java scripts
ch samaram
 
CHAPTER 3 JS (1).pptx
achutachut
 
Session vii(java scriptbasics)
Shrijan Tiwari
 
JavaScript & Dom Manipulation
Mohammed Arif
 
Java script by Act Academy
actanimation
 
JavaScript with Syntax & Implementation
Soumen Santra
 
Scripting languages
teach4uin
 
JavaScript: Implementations And Applications
Pragya Pai
 
8.-Javascript-report powerpoint presentation
JohnLagman3
 
JAVA SCRIPT
Mohammed Hussein
 
JavaScript
Gulbir Chaudhary
 
BEAAUTIFUL presentation of java
rana usman
 
Java script
fahhadalghamdi
 
Java Script
husbancom
 
Javascript
Nagarajan
 
Java script writing javascript
Jesus Obenita Jr.
 
Ad

More from Bansari Shah (6)

PPTX
Rad model
Bansari Shah
 
PPTX
Inner class
Bansari Shah
 
PPTX
Types of attacks in cyber security
Bansari Shah
 
PPTX
Single pass assembler
Bansari Shah
 
PPT
Greedymethod
Bansari Shah
 
PPTX
variable entered map
Bansari Shah
 
Rad model
Bansari Shah
 
Inner class
Bansari Shah
 
Types of attacks in cyber security
Bansari Shah
 
Single pass assembler
Bansari Shah
 
Greedymethod
Bansari Shah
 
variable entered map
Bansari Shah
 
Ad

Recently uploaded (20)

PPTX
原版一样(Acadia毕业证书)加拿大阿卡迪亚大学毕业证办理方法
Taqyea
 
PPTX
Evaluation and thermal analysis of shell and tube heat exchanger as per requi...
shahveer210504
 
PDF
Design Thinking basics for Engineers.pdf
CMR University
 
PPTX
Green Building & Energy Conservation ppt
Sagar Sarangi
 
DOCX
8th International Conference on Electrical Engineering (ELEN 2025)
elelijjournal653
 
PPTX
GitOps_Without_K8s_Training simple one without k8s
DanialHabibi2
 
PPTX
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
PPTX
Product Development & DevelopmentLecture02.pptx
zeeshanwazir2
 
PPTX
VITEEE 2026 Exam Details , Important Dates
SonaliSingh127098
 
PPTX
MobileComputingMANET2023 MobileComputingMANET2023.pptx
masterfake98765
 
PPTX
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
PPTX
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PPT
PPT2_Metal formingMECHANICALENGINEEIRNG .ppt
Praveen Kumar
 
PDF
MAD Unit - 2 Activity and Fragment Management in Android (Diploma IT)
JappanMavani
 
PPTX
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
PDF
Reasons for the succes of MENARD PRESSUREMETER.pdf
majdiamz
 
PPTX
Depth First Search Algorithm in 🧠 DFS in Artificial Intelligence (AI)
rafeeqshaik212002
 
PPTX
Worm gear strength and wear calculation as per standard VB Bhandari Databook.
shahveer210504
 
DOC
MRRS Strength and Durability of Concrete
CivilMythili
 
DOCX
CS-802 (A) BDH Lab manual IPS Academy Indore
thegodhimself05
 
原版一样(Acadia毕业证书)加拿大阿卡迪亚大学毕业证办理方法
Taqyea
 
Evaluation and thermal analysis of shell and tube heat exchanger as per requi...
shahveer210504
 
Design Thinking basics for Engineers.pdf
CMR University
 
Green Building & Energy Conservation ppt
Sagar Sarangi
 
8th International Conference on Electrical Engineering (ELEN 2025)
elelijjournal653
 
GitOps_Without_K8s_Training simple one without k8s
DanialHabibi2
 
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
Product Development & DevelopmentLecture02.pptx
zeeshanwazir2
 
VITEEE 2026 Exam Details , Important Dates
SonaliSingh127098
 
MobileComputingMANET2023 MobileComputingMANET2023.pptx
masterfake98765
 
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PPT2_Metal formingMECHANICALENGINEEIRNG .ppt
Praveen Kumar
 
MAD Unit - 2 Activity and Fragment Management in Android (Diploma IT)
JappanMavani
 
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
Reasons for the succes of MENARD PRESSUREMETER.pdf
majdiamz
 
Depth First Search Algorithm in 🧠 DFS in Artificial Intelligence (AI)
rafeeqshaik212002
 
Worm gear strength and wear calculation as per standard VB Bhandari Databook.
shahveer210504
 
MRRS Strength and Durability of Concrete
CivilMythili
 
CS-802 (A) BDH Lab manual IPS Academy Indore
thegodhimself05
 

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…