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)

Java script
Java scriptJava script
Java script
Abhishek Kesharwani
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
WebStackAcademy
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
PHP FUNCTIONS
PHP FUNCTIONSPHP FUNCTIONS
PHP FUNCTIONS
Zeeshan Ahmed
 
Java Server Pages(jsp)
Java Server Pages(jsp)Java Server Pages(jsp)
Java Server Pages(jsp)
Manisha Keim
 
Web application architecture
Web application architectureWeb application architecture
Web application architecture
Tejaswini Deshpande
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
 
Java Servlets
Java ServletsJava Servlets
Java Servlets
BG Java EE Course
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
Partnered Health
 
XML Schema
XML SchemaXML Schema
XML Schema
yht4ever
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
WebStackAcademy
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
Hassan Ahmed Baig - Web Developer
 
Scripting languages
Scripting languagesScripting languages
Scripting languages
teach4uin
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
Kasun Madusanke
 
Ajax
AjaxAjax
Ajax
Tech_MX
 
XML Document Object Model (DOM)
XML Document Object Model (DOM)XML Document Object Model (DOM)
XML Document Object Model (DOM)
BOSS Webtech
 

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
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
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
 
Javascript
JavascriptJavascript
Javascript
Nagarajan
 
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
 
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
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
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)

11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)
kjim477n
 
Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)
pelumiadigun2006
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 
operationg systemsdocumentmemorymanagement
operationg systemsdocumentmemorymanagementoperationg systemsdocumentmemorymanagement
operationg systemsdocumentmemorymanagement
SNIGDHAAPPANABHOTLA
 
Présentation_gestion[1] [Autosaved].pptx
Présentation_gestion[1] [Autosaved].pptxPrésentation_gestion[1] [Autosaved].pptx
Présentation_gestion[1] [Autosaved].pptx
KHADIJAESSAKET
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
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
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
A Comprehensive Investigation into the Accuracy of Soft Computing Tools for D...
Journal of Soft Computing in Civil Engineering
 
New Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docxNew Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docx
misheetasah
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
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
 
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
 
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) ProjectMontreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Alexandra N. Martinez
 
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
ijscai
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
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
 
Introduction to AI agent development with MCP
Introduction to AI agent development with MCPIntroduction to AI agent development with MCP
Introduction to AI agent development with MCP
Dori Waldman
 
11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)11th International Conference on Data Mining (DaMi 2025)
11th International Conference on Data Mining (DaMi 2025)
kjim477n
 
Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)Strength of materials (Thermal stress and strain relationships)
Strength of materials (Thermal stress and strain relationships)
pelumiadigun2006
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 
operationg systemsdocumentmemorymanagement
operationg systemsdocumentmemorymanagementoperationg systemsdocumentmemorymanagement
operationg systemsdocumentmemorymanagement
SNIGDHAAPPANABHOTLA
 
Présentation_gestion[1] [Autosaved].pptx
Présentation_gestion[1] [Autosaved].pptxPrésentation_gestion[1] [Autosaved].pptx
Présentation_gestion[1] [Autosaved].pptx
KHADIJAESSAKET
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
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
 
ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025ACEP Magazine Fifth Edition on 5june2025
ACEP Magazine Fifth Edition on 5june2025
Rahul
 
SEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair KitSEW make Brake BE05 – BE30 Brake – Repair Kit
SEW make Brake BE05 – BE30 Brake – Repair Kit
projectultramechanix
 
New Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docxNew Microsoft Office Word Documentfrf.docx
New Microsoft Office Word Documentfrf.docx
misheetasah
 
Research_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptxResearch_Sensitization_&_Innovative_Project_Development.pptx
Research_Sensitization_&_Innovative_Project_Development.pptx
niranjancse
 
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
 
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
 
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) ProjectMontreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Montreal Dreamin' 25 - Introduction to the MuleSoft AI Chain (MAC) Project
Alexandra N. Martinez
 
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
Top Cite Articles- International Journal on Soft Computing, Artificial Intell...
ijscai
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
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
 
Introduction to AI agent development with MCP
Introduction to AI agent development with MCPIntroduction to AI agent development with MCP
Introduction to AI agent development with MCP
Dori Waldman
 

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…