VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
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
5.
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
7.
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
