Client side scripting using Javascript

BansariShah6 597 views 23 slides Jun 27, 2018
Slide 1
Slide 1 of 23
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23

About This Presentation

JAvascript


Slide Content

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

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 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*
Tags