More Related Content
What's hot
What's hot (20)
Similar to Client side scripting using Javascript
Similar to Client side scripting using Javascript (20)
More from Bansari Shah
Recently uploaded
Recently uploaded (20)
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
- 13. <html> <head> <script src="xyz.js"> </script> </head> <body> </body> </html> A separate file 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
- 23. *THANK YOU*
Editor's Notes
- Where to use scripts? Software applications, web pages, shells of operating systems…