Js ppt


Published on

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags. Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser). This statement writes a line of text on a web page. The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only: document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document). The arrow symbol '  ' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g. document.write('This is my first  JavaScript Page'); should actually be typed: document.write('This is my first JavaScript Page');
  • This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form. How JavaScript uses the name attribute is described next.
  • To refer to the value that a user has typed in a text box, you use the following naming system: document.formname.elementname.value This is a naming convention derived from the JavaScript object model: document refers to the page displayed in the browser. formname is supplied by the page author as the name attribute of the <form> tag - in the example it is addressform and refers to the whole form. elementname is supplied by the page author using the name attribute of the <input> tag. value is a predefined term which refers to the text typed in by the user.
  • Js ppt

    1. 1. JAVASCRIPT What is JavaScript? JavaScript is a programming language designed for Web pages
    2. 2. History  First web scripting language  Developed by Netscape and Sun  Initiated by Netscape and called LiveScript  In parallel with this, Sun was developing Java
    3. 3. Why Use JavaScript? • JavaScript enhances Web pages with dynamic and interactive features. • JavaScript runs in client software. • JavaScript 1.3 works with version 4.0 browsers.
    4. 4. What can a JavaScript Do?  JavaScript gives HTML designers a programming tool.  JavaScript can react to events.  Validate data.  It can be used to detect the visitor's browser  Create cookies.  Read/write/modify HTML elements
    5. 5. JavaScript Terminology. JavaScript programming uses specialized terminology. Understanding JavaScript terms is fundamental to understanding the script. Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators.
    6. 6. Objects  Objects refers to windows, documents, images, tables, forms, buttons or links, etc.  Objects should be named.  Objects have properties that act as modifiers.
    7. 7. Client-Side Script  When client makes the request, the HTML and all scripts will be downloaded into your browser and then the resultant HTML will be displayed in the browser is called client-side script. Example: JavaScript, VB-Script etc.
    8. 8. JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language="JavaScript"> document.write('This is my first → JavaScript Page'); </script> </body> </html> Note the symbol for line continuation
    9. 9. Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>
    10. 10. Forms and JavaScript document.formname.elementname.value Thus: document.addressform.yourname.value document.addressform.phone.value document.addressform.email.value
    11. 11. Objects Objects refers to windows, documents, images, tables, forms, buttons or links, etc. Objects should be named. Objects have properties that act as modifiers.
    12. 12. Properties Properties are object attributes. Object properties are defined by using the object's name, a period, and the property name. e.g., background color is expressed by: document.bgcolor . document is the object. bgcolor is the property.
    13. 13. Methods Methods are actions applied to particular objects. Methods are what objects can do. e.g., document.write(”Hello World") document is the object. write is the method.
    14. 14. Functions Functions are named statements that performs tasks. e.g., function doWhatever () {statement here} The curly braces contain the statements of the function. JavaScript has built-in functions, and you can write your own.
    15. 15. Values Values are bits of information. Values types and some examples include: Number: 1, 2, 3, etc. String: characters enclosed in quotes. Boolean: true or false. Object: image, form Function: validate, doWhatever
    16. 16. Variables Variables contain values and use the equal sign to specify their value. Variables are created by declaration using the var command with or without an initial value state. e.g. var month; e.g. var month = April;
    17. 17. The HTML DOM (Document Object Model)
    18. 18. Finding HTML Elements Finding HTML Elements by Id : Example: var x=document.getElementById("intro"); Finding HTML Elements by Tag Name: Example: var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
    19. 19. Using Separate JavaScript Files. Linking can be advantageous if many pages use the same script. Use the source element to link to the script file. <script src="myjavascript.js” language="JavaScript1.2” type="text/javascript"> </script>
    20. 20. JavaScript RegExp Object var dob_regex = /^([0-9]){2}(/){1}([0-9]){2}(/)([0-9]){4}$/; //DD/MM/YYYY var email_regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+.)+[a-zA-Z0-9.-]{2,4}$/; // email address var username_regex = /^[w.-]+$/; // allowed characters: any word . -, ( w ) represents any word character (letters, digits, and the underscore _ ), equivalent to [a-zA-Z0-9_] var num_regex = /^d+$/; // numeric digits only var password_regex = /^[A-Za-zd]{6,8}$/; // any upper/lowercase characters and digits, between 6 to 8 characters in total var phone_regex = /^(d{3]) d{3}-d{4}$/; // (xxx) xxx-xxxx