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

PPTX
Introduction to ASP.NET
Rajkumarsoy
 
PPT
Php mysql ppt
Karmatechnologies Pvt. Ltd.
 
PPTX
Dynamic HTML (DHTML)
Himanshu Kumar
 
PPTX
Java script
Abhishek Kesharwani
 
PPT
Basic Web Concepts
Cherry Ann Labandero
 
PPTX
Sgml
rahul kundu
 
PPT
Webservices
Gerard Sylvester
 
PPTX
Html links
JayjZens
 
Introduction to ASP.NET
Rajkumarsoy
 
Dynamic HTML (DHTML)
Himanshu Kumar
 
Java script
Abhishek Kesharwani
 
Basic Web Concepts
Cherry Ann Labandero
 
Webservices
Gerard Sylvester
 
Html links
JayjZens
 

What's hot (20)

PPT
JavaScript - An Introduction
Manvendra Singh
 
PDF
JavaScript Programming
Sehwan Noh
 
ODP
History of JavaScript
Rajat Saxena
 
PPT
CSS Basics
WordPress Memphis
 
PPT
Scripting languages
teach4uin
 
PDF
Javascript
Momentum Design Lab
 
PPTX
css.ppt
bhasula
 
PDF
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
PPT
Introduction to JavaScript
Andres Baravalle
 
PPT
Ppt of web development
bethanygfair
 
PPSX
Javascript variables and datatypes
Varun C M
 
PPTX
HTML Frameset & Inline Frame
Nisa Soomro
 
PPT
Introduction to Web Programming - first course
Vlad Posea
 
PDF
Introduction to CSS3
Doris Chen
 
PPTX
Introduction to php
shanmukhareddy dasi
 
PPTX
PHP FUNCTIONS
Zeeshan Ahmed
 
PDF
Html text and formatting
eShikshak
 
PDF
Javascript basics
shreesenthil
 
PPTX
Form Handling using PHP
Nisa Soomro
 
JavaScript - An Introduction
Manvendra Singh
 
JavaScript Programming
Sehwan Noh
 
History of JavaScript
Rajat Saxena
 
CSS Basics
WordPress Memphis
 
Scripting languages
teach4uin
 
css.ppt
bhasula
 
JavaScript - Chapter 12 - Document Object Model
WebStackAcademy
 
Introduction to JavaScript
Andres Baravalle
 
Ppt of web development
bethanygfair
 
Javascript variables and datatypes
Varun C M
 
HTML Frameset & Inline Frame
Nisa Soomro
 
Introduction to Web Programming - first course
Vlad Posea
 
Introduction to CSS3
Doris Chen
 
Introduction to php
shanmukhareddy dasi
 
PHP FUNCTIONS
Zeeshan Ahmed
 
Html text and formatting
eShikshak
 
Javascript basics
shreesenthil
 
Form Handling using PHP
Nisa Soomro
 
Ad

Similar to Client side scripting using Javascript (20)

PDF
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
amrashbhanuabdul
 
PPT
JAVA SCRIPT
Go4Guru
 
PPTX
WT Module-3.pptx
RamyaH11
 
PPTX
CHAPTER 3 JS (1).pptx
achutachut
 
PDF
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
kavigamage62
 
PPTX
Java script
Rajkiran Mummadi
 
DOC
Basics java scripts
ch samaram
 
PDF
Unit 4(it workshop)
Dr.Lokesh Gagnani
 
PDF
JS BASICS JAVA SCRIPT SCRIPTING
Arulkumar
 
PPT
Html JavaScript and CSS
Radhe Krishna Rajan
 
PPT
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
PPT
JavaScript ppt for beginners to learn basics
ssuser515b641
 
PPT
Java script202
Wasiq Zia
 
PPT
1472251766_demojavascriptppt (1).ppt
ictlab3
 
PPTX
Javascript
Nagarajan
 
PPTX
Java script Session No 1
Saif Ullah Dar
 
PPTX
Java script Basic
Jaya Kumari
 
PPTX
Lecture 5 javascript
Mujtaba Haider
 
PPTX
JavaScript with Syntax & Implementation
Soumen Santra
 
PDF
javascriptPresentation.pdf
wildcat9335
 
CS8651- Unit 2 - JS.internet programming paper anna university -2017 regulation
amrashbhanuabdul
 
JAVA SCRIPT
Go4Guru
 
WT Module-3.pptx
RamyaH11
 
CHAPTER 3 JS (1).pptx
achutachut
 
java-scriptcdvcx vnbm,azsdfghjkml;sxdfcgmndxfcgvhb nmfctgvbhjnm ,cfgvb nm,xc ...
kavigamage62
 
Java script
Rajkiran Mummadi
 
Basics java scripts
ch samaram
 
Unit 4(it workshop)
Dr.Lokesh Gagnani
 
JS BASICS JAVA SCRIPT SCRIPTING
Arulkumar
 
Html JavaScript and CSS
Radhe Krishna Rajan
 
INTRO TO JAVASCRIPT basic to adcance.ppt
testvarun21
 
JavaScript ppt for beginners to learn basics
ssuser515b641
 
Java script202
Wasiq Zia
 
1472251766_demojavascriptppt (1).ppt
ictlab3
 
Javascript
Nagarajan
 
Java script Session No 1
Saif Ullah Dar
 
Java script Basic
Jaya Kumari
 
Lecture 5 javascript
Mujtaba Haider
 
JavaScript with Syntax & Implementation
Soumen Santra
 
javascriptPresentation.pdf
wildcat9335
 
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
 

Recently uploaded (20)

PPTX
EE3303-EM-I 25.7.25 electrical machines.pptx
Nagen87
 
PPT
Lecture in network security and mobile computing
AbdullahOmar704132
 
PPTX
easa module 3 funtamental electronics.pptx
tryanothert7
 
PDF
Activated Carbon for Water and Wastewater Treatment_ Integration of Adsorptio...
EmilianoRodriguezTll
 
PPTX
IoT_Smart_Agriculture_Presentations.pptx
poojakumari696707
 
PPTX
22PCOAM21 Session 1 Data Management.pptx
Guru Nanak Technical Institutions
 
PDF
FLEX-LNG-Company-Presentation-Nov-2017.pdf
jbloggzs
 
PDF
Software Testing Tools - names and explanation
shruti533256
 
PPTX
Chapter_Seven_Construction_Reliability_Elective_III_Msc CM
SubashKumarBhattarai
 
PPTX
AgentX UiPath Community Webinar series - Delhi
RohitRadhakrishnan8
 
DOCX
SAR - EEEfdfdsdasdsdasdasdasdasdasdasdasda.docx
Kanimozhi676285
 
PPTX
22PCOAM21 Data Quality Session 3 Data Quality.pptx
Guru Nanak Technical Institutions
 
PDF
67243-Cooling and Heating & Calculation.pdf
DHAKA POLYTECHNIC
 
PDF
dse_final_merit_2025_26 gtgfffffcjjjuuyy
rushabhjain127
 
PPTX
Victory Precisions_Supplier Profile.pptx
victoryprecisions199
 
PDF
LEAP-1B presedntation xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
hatem173148
 
PPT
1. SYSTEMS, ROLES, AND DEVELOPMENT METHODOLOGIES.ppt
zilow058
 
PDF
오픈소스 LLM, vLLM으로 Production까지 (Instruct.KR Summer Meetup, 2025)
Hyogeun Oh
 
PPTX
22PCOAM21 Session 2 Understanding Data Source.pptx
Guru Nanak Technical Institutions
 
PDF
flutter Launcher Icons, Splash Screens & Fonts
Ahmed Mohamed
 
EE3303-EM-I 25.7.25 electrical machines.pptx
Nagen87
 
Lecture in network security and mobile computing
AbdullahOmar704132
 
easa module 3 funtamental electronics.pptx
tryanothert7
 
Activated Carbon for Water and Wastewater Treatment_ Integration of Adsorptio...
EmilianoRodriguezTll
 
IoT_Smart_Agriculture_Presentations.pptx
poojakumari696707
 
22PCOAM21 Session 1 Data Management.pptx
Guru Nanak Technical Institutions
 
FLEX-LNG-Company-Presentation-Nov-2017.pdf
jbloggzs
 
Software Testing Tools - names and explanation
shruti533256
 
Chapter_Seven_Construction_Reliability_Elective_III_Msc CM
SubashKumarBhattarai
 
AgentX UiPath Community Webinar series - Delhi
RohitRadhakrishnan8
 
SAR - EEEfdfdsdasdsdasdasdasdasdasdasdasda.docx
Kanimozhi676285
 
22PCOAM21 Data Quality Session 3 Data Quality.pptx
Guru Nanak Technical Institutions
 
67243-Cooling and Heating & Calculation.pdf
DHAKA POLYTECHNIC
 
dse_final_merit_2025_26 gtgfffffcjjjuuyy
rushabhjain127
 
Victory Precisions_Supplier Profile.pptx
victoryprecisions199
 
LEAP-1B presedntation xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
hatem173148
 
1. SYSTEMS, ROLES, AND DEVELOPMENT METHODOLOGIES.ppt
zilow058
 
오픈소스 LLM, vLLM으로 Production까지 (Instruct.KR Summer Meetup, 2025)
Hyogeun Oh
 
22PCOAM21 Session 2 Understanding Data Source.pptx
Guru Nanak Technical Institutions
 
flutter Launcher Icons, Splash Screens & Fonts
Ahmed Mohamed
 

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…