Javascript by geetanjali

5,218 views
4,870 views

Published on

2 Comments
7 Likes
Statistics
Notes
  • Dear mam, Kindly upload this ppt in downloadable mode.Thanks and regards
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dear mam, Kindly upload this ppt in downloadable mode.Thanks and regards .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,218
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Javascript by geetanjali

  1. 1. JAVASCRIPT By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  2. 2. Introduction JavaScript is the most popular scriptinglanguage on the internet, and works in all majorbrowsers, such as Internet Explorer, Firefox,Chrome, Opera, and Safari.What You Should Already Know?Before you continue you should have a basicunderstanding of the following:HTML and CSS By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  3. 3. What is JavaScript?• scripting language• add interactivity to HTML pages•A scripting language is a lightweight programming language•JavaScript is usually embedded directly into HTML pages•JavaScript is an interpreted language (means that scripts executewithout preliminary compilation)•Everyone can use JavaScript without purchasing a license By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  4. 4. Java and JavaScript•Java and JavaScript are not same.•Java and JavaScript are two completely different languages inboth concept and design.•Java (developed by Sun Microsystems) is a powerful and muchmore complex programming language - in the same category as Cand C++. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  5. 5. What Can JavaScript do?•JavaScript gives HTML designers a programming tool - HTML authorsare normally not programmers, but JavaScript is a scripting language with avery simple syntax. Almost anyone can put small "snippets" of code into theirHTML pages•JavaScript can react to events - A JavaScript can be set to execute whensomething happens, like when a page has finished loading or when a userclicks on an HTML element•JavaScript can read and write HTML elements - A JavaScript can readand change the content of an HTML element By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  6. 6. What Can JavaScript do?•JavaScript can be used to validate data - A JavaScript can be used tovalidate form data before it is submitted to a server. This saves the server fromextra processing•JavaScript can be used to detect the visitors browser - A JavaScript canbe used to detect the visitors browser, and - depending on the browser - loadanother page specifically designed for that browser•JavaScript can be used to create cookies - A JavaScript can be used tostore and retrieve information on the visitors computer By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  7. 7. Brief History of JavaScript•JavaScript is an implementation of the ECMAScript language standard.ECMA-262 is the official JavaScript standard.•JavaScript was invented by Brendan Eich at Netscape (with Navigator 2.0),and has appeared in all browsers since 1996.•The official standardization was adopted by the ECMA organization (anindustry standardization association) in 1997.•The ECMA standard (called ECMAScript-262) was approved as aninternational ISO (ISO/IEC 16262) standard in 1998.•The development is still in progress. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  8. 8. JavaScript: Display Date<html> <head> <title>Javascript</title> </head> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  9. 9. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  10. 10. <script> Tag•To insert a JavaScript into an HTML page, use the<script> tag.•Inside the <script> tag use the type attribute to define thescripting language.•The <script> and </script> tells where the JavaScriptstarts and ends.•Without the <script> tag(s), the browser will treat"document.write" as pure text and just write it to the page. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  11. 11. JavaScript: comments• JavaScript comments can be used to make the code more readable.• Comments can be added to explain the JavaScript• There are Two types of comments in JavaScript: 1) Single line comments 2) Multi-Line comments1) Single line comments start with //.e.g. <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  12. 12. JavaScript: comments2) Multi-Line Comments Multi line comments start with /* and end with */.e.g. <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  13. 13. JavaScript: comments• Use of JavaScript comments 1) To Prevent Execution 2) At the End of a Line1) To Prevent Execution: The comment is used to prevent the execution of i) single code line: e.g. <script type="text/javascript"> //document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> ii) code block: e.g. <script type="text/javascript"> /*document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>");*/ </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  14. 14. JavaScript: comments2) At the End of a Line :e.g. <script type="text/javascript"> document.write("Hello"); // Write "Hello" document.write("World!"); // Write "World!" </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  15. 15. JavaScript: comments• Browsers that do not support JavaScript, will display JavaScript as page content.• To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript.• Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, like this: <html> <body> <script type="text/javascript"> <!-- document.write("<p>" + Date() + "</p>"); //--> </script> </body> /html>The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  16. 16. Placing JavaScript1)Scripts in <head> and <body>: You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. e.g. JavaScript in <body> <html> <body> <h1>My First Web Page</h1> <p id="demo"></p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  17. 17. Placing JavaScripte.g. JavaScript in <head><html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  18. 18. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  19. 19. Placing JavaScript2) Using an External JavaScript :JavaScript can also be placed in external files.External JavaScript files often contain code to be used on several different web pages.External JavaScript files have the file extension .js.Note: External script cannot contain the <script></script> tags To use an external script, point to the .js file in the "src" attribute of the <script> tag: e.g. <html> <head> <script type="text/javascript" src=“abc.js"></script> </head> <body> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  20. 20. Writing JavaScript• JavaScript is Case Sensitive• JavaScript Statements : JavaScript is a sequence of statements to be executed by the browser. A JavaScript statement is a command to a browser e.g. document.write("Hello World");• JavaScript Code: <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  21. 21. Writing JavaScript• JavaScript Blocks:e.g.<script type="text/javascript"> { document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  22. 22. JavaScript Variables• Variables are "containers" for storing information.• JavaScript variables are used to hold i) values e.g. x=5 ii) expressions e.g. z=x+y. .• A variable can have a short name, like x, or a more descriptive name, like myname.Rules for JavaScript variable names:• Variable names are case sensitive (y and Y are two different variables)• Variable names must begin with a letter or the underscore character By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  23. 23. JavaScript VariablesDeclaring JavaScript Variables• Creating variables in JavaScript is most often referred to as "declaring" variables.• You declare JavaScript variables with the var keyword: var x; var carname;• After the declaration the variables are empty• assigning values var x=5; var carname="Volvo";• When you assign a text value to a variable, use quotes around the value.• If you redeclare a JavaScript variable, it will not lose its value. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  24. 24. JavaScript Variables• A variables value can change during the execution of a script. You can refer to a variable by its name to display or change its value.e.g.<html> <head> <title>Variables in JavaScript</title> </head> <body> <h1>Variables in JavaScript</h1> <script type="text/javascript"> var firstname; firstname="xyz"; document.write(firstname); document.write("<br>"); firstname="abc"; document.write(firstname); document.write("<br>"); var firstname; document.write(firstname); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  25. 25. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  26. 26. Scope Of JavaScript VariablesLocal JavaScript Variables• A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope).• You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.• Local variables are destroyed when you exit the function.Global JavaScript Variables• Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it.• Global variables are destroyed when you close the page.• If you declare a variable, without using "var", the variable always becomes GLOBAL. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  27. 27. JavaScript VariablesAssigning Values to Undeclared JavaScript Variables:If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables.These statements: x=5; carname="Volvo";will declare the variables x and carname as global variables (if they dont already exist).JavaScript Arithmetic:As with algebra, you can do arithmetic operations with JavaScript variables: y=x-5; z=y+5; By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  28. 28. AssignmentsAssignment No. 2:1. Explain different Text Formatting Tags in HTML with example.2. Describe local and remote links in HTML with example.3. What are the different types of lists in HTML. Explain with examples.4. Explain methods for adding graphics in HTML5. Explain Table creation in HTML with appropriate examples. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  29. 29. AssignmentsAssignment No. 3:1. Describe Image Maps in HTML with example.2. What are the different ways for defining Style Sheet properties in Cascading Style Sheet. Explain with appropriate examples.3. What are the different types of SELECTORS that can be used in Cascading Style Sheet. Explain with appropriate examples.4. Explain different elements in HTML forms that can be added to build interactivity.5. Describe various HTML editors. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  30. 30. Data Types In JavaScriptThere are six data types in JavaScript :• Numbers• Strings• Booleans• Null• Undefined• Objects By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  31. 31. Data Types In JavaScriptNumbers: Numbers in JavaScript consist of integers, floats, hexadecimals, octal i.e. all numbers are valid in JavaScript.e.g. 4,51.50,-14,0xd<html> <head> <title>Hexadecimal Numbers</title> </head> <body> <h1>My First Web Page</h1> <script type"text/css"> var h=0xe; var i=0x2; var j=h*i; alert(j); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  32. 32. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  33. 33. Data Types In JavaScriptStrings:Strings consist of one or more characters surrounded by quotes.e.g. “Hello World”, “B”, “This is ‘another string’” If you need to use the same style of quotes both to enclose the string and within string, then the quotes must be escaped. A single backslash character escapes the quotee.g.• ‘i’m using single quote both outside and within this example. They’re neat.’• “This is a ”great” example of using ”double quotes” within a string.” By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  34. 34. The table below lists other special characters that canbe added to a text string with the backslash sign: Code Outputs single quote " double quote backslash n new line r carriage return t tab b backspace f form feed By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  35. 35. Data Types In JavaScriptBooleans: Booleans have only two values, true and false. Booleans are bit of a hidden data type in JavaScript i.e. you don’t work with Booleans in the same way that you work with strings and numbers. You simply use an expression that evaluates to a Boolean value.e.g. If (mynumber>18) { //do something } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  36. 36. Data Types In JavaScriptNull : Null is special data type in JavaScript. Null is simply nothing. It represents and evaluates to false.Undefined: Undefined is a state, sometimes used like a value, to represent a variable that hasn’t yet contained a value.Objects: JavaScript objects are a collection of properties, each of which contains a primitive value. You can define your own objects using JavaScript, and there are several build-in objects as well. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  37. 37. JavaScript Operators The ECMA-262 standard defines assorted operators of various forms. These include:1. Additive operators2. Multiplicative operators3. Bitwise operators4. Equality operators5. Relational operators6. Unary operators7. Assignment operators By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  38. 38. JavaScript Operators1. Additive operators: Operator Description Example Result + Addition x=y+2 x=7 y=5 - Subtraction x=y-2 x=3 y=5 The Addition operator operates in different ways depending on the type of value being added. When a string is used, the addition operator concatenates the left and right arguments. e.g. var str1=“hello”; var str2=“ world”; var result=str1+str2; // result will be the string “hello world” By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  39. 39. JavaScript Operators2. Multiplicative operators : Operator Description Example Result * Multiplication x=y*2 x=10 y=5 / Division x=y/2 x=2.5 y=5 % Modulus (division x=y%2 x=1 y=5 remainder) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  40. 40. JavaScript Operators3. Bitwise operators : Operator Description & AND | OR ^ XOR ~ NOT << Shift Left >> Shift Right By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  41. 41. JavaScript Operators4. Equality operators : Operator Description == Tests whether two expressions are equal != Tests whether two expressions are not equal === Tests whether two expressions are equal using stricter methods !== Tests whether two expressions are not equal using stricter methods The stricter of two(===) requires not only that the values of a given expression are equal, but the types as well. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  42. 42. JavaScript Operators5. Relational operators : Operator Description > Greater than < Less than >= Greater than or equal to <= Less than or equal to in Tests whether a value is found in an expression instanceof Tests whether an expression is an instance of an object By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  43. 43. JavaScript Operators6. Unary operators : Operator Description delete Removes a property void Returns Undefined typeof Returns a string representing the data type ++ Increments a number -- decrements a number + Converts the operand to a number - Negates the operand ~ Bitwise NOT ! Logical NOT By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  44. 44. JavaScript Operators7. Assignment operators : Operator Example Same As Result = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  45. 45. JavaScript Conditional Statements Conditional statements are used to perform differentactions based on different conditions.In JavaScript we have the following conditional statements:• if statement - use this statement to execute some code only ifa specified condition is true• if...else statement - use this statement to execute some code ifthe condition is true and another code if the condition is false• if...else if....else statement - use this statement to select oneof many blocks of code to be executed• switch statement - use this statement to select one of manyblocks of code to be executed By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  46. 46. JavaScript Conditional Statementsif StatementUse the if statement to execute some code only if a specified condition is true.Syntax : if (condition) {   code to be executed if condition is true }e.g. <html> <head> <title>If statement</title> </head> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } </script> <p>This example demonstrates the If statement.</p> <p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  47. 47. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  48. 48. JavaScript Conditional StatementsIf...else Statement : Use the if....else statement to execute some code if a condition istrue and another code if the condition is not true.Syntax : if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  49. 49. JavaScript Conditional Statements<html> <head> <title>If else statement</title> </head> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script> <p>This example demonstrates the If...Else statement. </p> <p> If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. </p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  50. 50. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  51. 51. JavaScript Conditional StatementsIf...else if...else Statement : Use the if....else if...else statement to select one of several blocks ofcode to be executed.Syntax : if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  52. 52. JavaScript Conditional Statements<html> <head> <title>If else if statement</title> </head> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } else if (time>=10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script> <p>This example demonstrates the if..else if...else statement.</p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  53. 53. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  54. 54. JavaScript Conditional StatementsThe JavaScript Switch StatementUse the switch statement to select one of many blocks of code to beexecuted.Syntax : switch(n) { case 1:   execute code block 1 break; case 2:   execute code block 2 break; default:  code to be executed if n is different from case 1 and 2 } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  55. 55. JavaScript Conditional Statements<html> <head> <title>switch statement</title> </head> <body> <script type="text/javascript"> var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("<b>Finally Friday</b>"); break; case 6: document.write("<b>Super Saturday</b>"); break; case 0: document.write("<b>Sleepy Sunday</b>"); break; default: document.write("<b>Im really looking forward to this weekend!</b>"); } </script> <p>This JavaScript will generate a different greeting based on what day itis. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> </body> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  56. 56. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  57. 57. JavaScript Dialog boxesJavaScript has three kind of dialog boxes:1) Alert box.2) Confirm box.3) Prompt box. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  58. 58. JavaScript Dialog boxes1) Alert box : An alert box is often used if you want to make sure informationcomes through to the user. When an alert box pops up, the user will have to click"OK" to proceed.Syntax : alert("some text");Example :<html> <head> <script type="text/javascript"> function show_alert() { alert("Hello! I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box"> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  59. 59. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  60. 60. JavaScript Dialog boxes2) Confirm box : A confirm box is often used if you want the user to verify or acceptsomething. When a confirm box pops up, the user will have to click either"OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true.If the user clicks "Cancel", the box returns false.Syntax : confirm("sometext"); By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  61. 61. JavaScript Dialog boxes<html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  62. 62. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  63. 63. JavaScript Dialog boxes2) Prompt box : A prompt box is often used if you want the user to input a valuebefore entering a page.When a prompt box pops up, the user will have to click either "OK" or"Cancel" to proceed after entering an input value.If the user clicks "OK" the box returns the input value. If the user clicks"Cancel" the box returns null.Syntax : prompt("sometext","defaultvalue"); By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  64. 64. JavaScript Dialog boxes<html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","abc"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  65. 65. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  66. 66. JavaScript Functions A JavaScript function is a collection of statements, eithernamed or unnamed, that can be called from elsewhere within aJavaScript program.• To keep the browser from executing a script when the page loads, you can putyour script into a function.• A function contains code that will be executed by an event or by a call to thefunction.• You may call a function from anywhere within a page (or even from otherpages if the function is embedded in an external .js file).• Functions can be defined both in the <head> and in the <body> section of adocument. However, to assure that a function is read/loaded by the browserbefore it is called, it could be wise to put functions in the <head> section. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  67. 67. JavaScript FunctionsSyntax of Function: function functionName(argument1,argument2,...,argumentX) { //statements go here; } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  68. 68. JavaScript Functions<html> <head> <title>JavaScript Function</title> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()"> </form> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  69. 69. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  70. 70. JavaScript FunctionsThe return Statement : When a function finishes executing its code, areturn value can be passed back to the caller.Example: <html> <head> <script type="text/javascript"> function multiplyNums(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(multiplyNums(4,3)); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  71. 71. JavaScript Arrays An array is a special variable, which can hold more than one value, at a time.Defining Arrays:1) regular array : e.g. var empNames=new Array(); // regular array (add an optional integer empNames[0]=“John"; // argument to control arrays size) empNames[1]=“Smith"; empNames[2]=“Mark";2) condensed array : e.g. var empNames=new Array(“John",“Smith",“Mark"); // condensed array3) literal array : e.g. var empNames=["John",”Smith",“Mark "]; // literal array By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  72. 72. JavaScript ArraysAccess an Array : e.g. document.write(empNames[0]);Modify Values in an Array : e.g. empNames[0]=“Rajesh”; By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  73. 73. Controlling Flow With Loops In JavaScriptIn JavaScript, there are two different kind of loops:• for - loops through a block of code a specified numberof times• while - loops through a block of code while aspecified condition is true By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  74. 74. Loops In JavaScriptfor loops : The for loop is used when you know in advance how many timesthe script should run.Syntax :for (variable=startvalue;variable<=endvalue;variable=variable+increment){code to be executed} By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  75. 75. for Loop Example<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> <p>Explanation:</p> <p>This for loop starts with i=0.</p> <p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  76. 76. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  77. 77. Loops In JavaScriptwhile loops : The while loop loops through a block of code while a specified conditionis true.Syntax : while (variable<=endvalue) {   code to be executed } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  78. 78. while Loop Example<html> <body> <script type="text/javascript"> i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> <p>Explanation:</p> <p><b>i</b> is equal to 0.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  79. 79. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  80. 80. Loops In JavaScriptDo…while loops : The do...while loop is a variant of the while loop. Thisloop will execute the block of code ONCE, and then it will repeat the loop as longas the specified condition is trueSyntax : do {   code to be executed   } while (variable<=endvalue); By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  81. 81. Do…while Loop Example<html> <body> <script type="text/javascript"> i = 0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i <= 5) </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p> <p>The loop will run</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  82. 82. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  83. 83. JavaScript Break and Continue StatementsThe break StatementThe break statement will break the loop and continue executing the code thatfollows after the loop (if any).Example: <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  84. 84. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  85. 85. JavaScript Break and Continue StatementsThe continue statement will break the current loop and continue with thenext value.Example: <html> <body> <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  86. 86. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  87. 87. JavaScript ObjectsJavaScript is a Object based Language. It allows you to define your own objects.An object is just a special kind of data. An object has properties and methods.• Properties : Properties are the values associated with an object.e.g. <script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script> Output:=12• Methods : Methods are the actions that can be performed on objects.e.g. <script type="text/javascript"> var str="Hello world!"; document.write(str.toUpperCase()); </script> Output:=HELLO WORLD! By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  88. 88. JavaScript Type casting/ Data type Conversion1) Number Conversions2) String Conversions3) Boolean Conversion1) Number Conversions: The Number() function converts the object argument to a number that represents the objects value. If the value cannot be converted to a legal number, NaN is returned.Syntax: Number(object) ;Parameter Description Optional. A JavaScript object. If no argument is provided, itobject returns 0. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  89. 89. JavaScript Type casting1) Number Conversion:<html> <head> <title>Conversion to Number</title> </head> <body> <script type="text/javascript"> var test1= new Boolean(true); var test2= new Boolean(false); var test3= new Date(); var test4= new String("999"); var test5= new String("999 888"); document.write(Number(test1)+ "<br>"); document.write(Number(test2)+ "<br>"); document.write(Number(test3)+ "<br>"); document.write(Number(test4)+ "<br>"); document.write(Number(test5)+ "<br>"); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  90. 90. Note: If the parameter is a Date object, the Number() function returns thenumber of milliseconds since midnight January 1, 1970 UTC. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  91. 91. JavaScript Type casting/ Data type Conversion2) String Conversions : The String() function converts the value of an object to a string.Syntax: String(object); Parameter Description object Required. A JavaScript object By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  92. 92. JavaScript Type casting<html> <head> <title>Conversion to Number</title> </head> <body> <script type="text/javascript"> var test1= new Boolean(1); var test2= new Boolean(0); var test3= new Boolean(true); var test4= new Boolean(false); var test5= new Date(); var test6= new String("999 888"); var test7=12345; document.write(String(test1)+ "<br />"); document.write(String(test2)+ "<br />"); document.write(String(test3)+ "<br />"); document.write(String(test4)+ "<br />"); document.write(String(test5)+ "<br />"); document.write(String(test6)+ "<br />"); document.write(String(test7)+ "<br />"); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  93. 93. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  94. 94. JavaScript EventsEvents are actions that can be detected by JavaScript.We define the events in the HTML tags.Examples of events: •A mouse click •A web page or an image loading •Mousing over a hot spot on the web page •Selecting an input field in an HTML form •Submitting an HTML form •A keystrokeNote: Events are normally used in combination with functions, and thefunction will not be executed before the event occurs! By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  95. 95. JavaScript EventsAttribute The event occurs when...onblur An element loses focusonchange The content of a field changesonclick Mouse clicks an objectondblclick Mouse double-clicks an object An error occurs when loading a document or anonerror imageonfocus An element gets focusonkeydown A keyboard key is pressedonkeypress A keyboard key is pressed or held downonkeyup A keyboard key is releasedonload A page or image is finished loading By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  96. 96. JavaScript EventsAttribute The event occurs when...onmousedown A mouse button is pressedonmousemove The mouse is movedonmouseout The mouse is moved off an elementonmouseover The mouse is moved over an elementonmouseup A mouse button is releasedonresize A window or frame is resizedonselect Text is selectedonunload The user exits the page By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  97. 97. JavaScript Events Example<html> <head> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script> </head> <body> Enter your name: <input type="text" id="fname" onblur="upperCase()"> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  98. 98. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  99. 99. JavaScript Built-in ObjectsString Object: The String object is used to manipulate a stored piece oftext. String objects are created with new String().Syntax : var txt = new String("string"); or var txt = "string";String Object Properties :Property Descriptionlength Returns the length of a string By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  100. 100. JavaScript Built-in ObjectsMethod DescriptioncharAt() Returns the character at the specified indexcharCodeAt() Returns the Unicode of the character at the specified index Joins two or more strings, and returns a copy of the joinedconcat() stringsfromCharCode() Converts Unicode values to characters Returns the position of the first found occurrence of aindexOf() specified value in a string Returns the position of the last found occurrence of alastIndexOf() specified value in a string Searches for a match between a regular expression and amatch() string, and returns the matches Searches for a match between a substring (or regularreplace() expression) and a string, and replaces the matched substring with a new substring By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  101. 101. JavaScript Built-in ObjectsMethod Description Searches for a match between a regular expression and asearch() string, and returns the position of the matchslice() Extracts a part of a string and returns a new stringsplit() Splits a string into an array of substrings Extracts the characters from a string, beginning at a specifiedsubstr() start position, and through the specified number of character Extracts the characters from a string, between two specifiedsubstring() indicestoLowerCase() Converts a string to lowercase letterstoUpperCase() Converts a string to uppercase lettersvalueOf() Returns the primitive value of a String object By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  102. 102. JavaScript Built-in Objects ExamplesString Object:<html> <head> <title>String object methods</title> </head> <body> <script type="text/javascript"> var txt="Hello World!"; document.write("World at "+ txt.search("World") + " position <br>"); document.write("sliced string is "+ txt.slice(1,5) + "<br>"); document.write(txt.split(" ")); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  103. 103. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  104. 104. JavaScript Built-in Objects ExamplesString Object: To search for a specified value within a string<html> <body> <script type="text/javascript"> var str="Hello world!"; document.write(str.match("world") + "<br />"); document.write(str.match("World") + "<br />"); document.write(str.match("worlld") + "<br />"); document.write(str.match("world!")); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  105. 105. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  106. 106. JavaScript Built-in Objects ExamplesString Object:To convert a string to lowercase or uppercase letters<html> <body> <script type="text/javascript"> var txt="Hello World!"; document.write(txt.toLowerCase() + "<br />"); document.write(txt.toUpperCase()); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  107. 107. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  108. 108. JavaScript Built-in ObjectsDate Object : The Date object is used to work with dates and times.Date objects are created with new Date().There are four ways of instantiating a date:var d = new Date(); // current date and timevar d = new Date(milliseconds);//milliseconds since 1970/01/01var d = new Date(dateString);var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);Methods:We can easily manipulate the date by using the methods available for the Date object.Set DatesIn the example below we set a Date object to a specific date (14th January 2010):var myDate=new Date();myDate.setFullYear(2010,0,14); By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  109. 109. JavaScript Built-in ObjectsIn the following example we set a Date object to be 5 days into the future:var myDate=new Date();myDate.setDate(myDate.getDate()+5);Note: If adding five days to a date shifts the month or year, the changes arehandled automatically by the Date object itself! By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  110. 110. JavaScript Built-in ObjectsDate Object MethodsMethod DescriptiongetDate() Returns the day of the month (from 1-31)getDay() Returns the day of the week (from 0-6)getFullYear() Returns the year (four digits)getHours() Returns the hour (from 0-23)getMilliseconds() Returns the milliseconds (from 0-999)getMinutes() Returns the minutes (from 0-59)getMonth() Returns the month (from 0-11)getSeconds() Returns the seconds (from 0-59)getTime() Returns the number of milliseconds since midnight Jan 1, 1970 Returns the time difference between GMT and local time, ingetTimezoneOffset() minutes Returns the day of the month, according to universal timegetUTCDate() (from 1-31) Returns the day of the week, according to universal time (fromgetUTCDay() 0-6)getUTCFullYear() Returns the year, according to universal time (four digits) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  111. 111. JavaScript Built-in ObjectsMethod DescriptiongetUTCHours() Returns the hour, according to universal time (from 0-23) Returns the milliseconds, according to universal time (from 0-getUTCMilliseconds() 999)getUTCMinutes() Returns the minutes, according to universal time (from 0-59)getUTCMonth() Returns the month, according to universal time (from 0-11)getUTCSeconds() Returns the seconds, according to universal time (from 0-59) Parses a date string and returns the number of millisecondsparse() since midnight of January 1, 1970setDate() Sets the day of the month (from 1-31)setFullYear() Sets the year (four digits)setHours() Sets the hour (from 0-23)setMilliseconds() Sets the milliseconds (from 0-999)setMinutes() Set the minutes (from 0-59)setMonth() Sets the month (from 0-11)setSeconds() Sets the seconds (from 0-59) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  112. 112. JavaScript Built-in ObjectsMethod0- Description Sets a date and time by adding or subtracting a specifiedsetTime() number of milliseconds to/from midnight January 1, 1970 Sets the day of the month, according to universal time (from 1-setUTCDate() 31)setUTCFullYear() Sets the year, according to universal time (four digits)setUTCHours() Sets the hour, according to universal time (from 0-23)setUTCMilliseconds() Sets the milliseconds, according to universal time (from 0-999)setUTCMinutes() Set the minutes, according to universal time (from 0-59)setUTCMonth() Sets the month, according to universal time (from 0-11)setUTCSeconds() Set the seconds, according to universal time (from 0-59)setYear() Deprecated. Use the setFullYear() method instead Converts the date portion of a Date object into a readabletoDateString() stringtoGMTString() Deprecated. Use the toUTCString() method instead Returns the date portion of a Date object as a string, usingtoLocaleDateString() locale conventions Returns the time portion of a Date object as a string, usingtoLocaleTimeString() locale conventionstoLocaleString() Converts a Date object to a string, using locale conventions By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  113. 113. JavaScript Built-in ObjectsMethod DescriptiontoString() Converts a Date object to a stringtoTimeString() Converts the time portion of a Date object to a stringtoUTCString() Converts a Date object to a string, according to universal time Returns the number of milliseconds in a date string sinceUTC() midnight of January 1, 1970, according to universal timevalueOf() Returns the primitive value of a Date object By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  114. 114. JavaScript Built-in Objects ExamplesDate Object :Use getFullYear() to get the year.<html> <body> <script type="text/javascript"> var d=new Date(); document.write(d.getFullYear()); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  115. 115. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  116. 116. JavaScript Built-in Objects Examples (Date Object )<html> <head> <title>Date object</title> </head> <body> <script type="text/javascript"> var mydate= new Date(); var theyear=mydate.getFullYear(); var themonth=mydate.getMonth()+1; var thetoday=mydate.getDate(); document.write("Todays date is: "); document.write(theyear+"/"+themonth+"/"+thetoday+"<br>"); mydate.setFullYear(2100,0,14); var today = new Date(); if (mydate>today) { alert("Today is before 14th January 2100"); } else { alert("Today is after 14th January 2100"); } </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  117. 117. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  118. 118. JavaScript Built-in ObjectsMath Object : The Math object allows you to perform mathematical tasks.Math is not a constructor. All properties/methods of Math can be called byusing Math as an object, without creating it.Syntax : var x = Math.PI; // Returns PI var y = Math.sqrt(16); // Returns the square root of 16 By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  119. 119. JavaScript Built-in ObjectsMath Object Properties:Property DescriptionE Returns Eulers number (approx. 2.718)LN2 Returns the natural logarithm of 2 (approx. 0.693)LN10 Returns the natural logarithm of 10 (approx. 2.302)LOG2E Returns the base-2 logarithm of E (approx. 1.442)LOG10E Returns the base-10 logarithm of E (approx. 0.434)PI Returns PI (approx. 3.14159)SQRT1_2 Returns the square root of 1/2 (approx. 0.707)SQRT2 Returns the square root of 2 (approx. 1.414) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  120. 120. JavaScript Built-in ObjectsMethod Descriptionabs(x) Returns the absolute value of xacos(x) Returns the arccosine of x, in radiansasin(x) Returns the arcsine of x, in radians Returns the arctangent of x as a numeric value between -PI/2 and PI/2atan(x) radiansatan2(y,x) Returns the arctangent of the quotient of its argumentsceil(x) Returns x, rounded upwards to the nearest integercos(x) Returns the cosine of x (x is in radians)exp(x) Returns the value of Exfloor(x) Returns x, rounded downwards to the nearest integerlog(x) Returns the natural logarithm (base E) of xmax(x,y,z,...,n) Returns the number with the highest valuemin(x,y,z,...,n) Returns the number with the lowest valuepow(x,y) Returns the value of x to the power of yrandom() Returns a random number between 0 and 1round(x) Rounds x to the nearest integersin(x) Returns the sine of x (x is in radians)sqrt(x) Returns the square root of xtan(x) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER Returns the tangent of an angle
  121. 121. JavaScript Built-in Objects ExamplesMath Object : properties<html> <head> <title>Math object properties</title> </head> <body> <script type="text/javascript"> var x=Math.PI; document.write(x); document.write("<br>"); var y = Math.sqrt(16); document.write(y); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  122. 122. JavaScript Built-in Objects ExamplesMath Object : To use round().<html> <body> <script type="text/javascript"> document.write(Math.round(0.60) + "<br />"); document.write(Math.round(0.50) + "<br />"); document.write(Math.round(0.49) + "<br />"); document.write(Math.round(-4.40) + "<br />"); document.write(Math.round(-4.60)); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  123. 123. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  124. 124. JavaScript LoopsJavaScript For...In Statement The for...in statement loops through the properties of an object.Syntax : for (variable in object) { code to be executed }e.g. <html> <body> <script type="text/javascript"> var person={fname:"John",lname:"Doe",age:25}; for (y in person) { document.write(person[y] + " "); } </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  125. 125. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  126. 126. JavaScript Error Handling1) Try...Catch Statement2) The throw Statement1) Try...Catch Statement:Syntax: try { //Run some code here } catch(err) { //Handle errors here } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  127. 127. JavaScript Error Handling<html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.nn"; txt+="Error description: " + err.description + "nn"; txt+="Click OK to continue.nn"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  128. 128. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  129. 129. JavaScript Error Handling2) The throw Statement : The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages.Syntax: throw exception ; By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  130. 130. JavaScript Error Handling<html> <body> <script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:",""); try { if(x>10) { throw "Err1"; } else if(x<0) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  131. 131. JavaScript Error Handling catch(er) { if(er=="Err1") { alert("Error! The value is too high"); } if(er=="Err2") { alert("Error! The value is too low"); } if(er=="Err3") { alert("Error! The value is not a number"); } } </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  132. 132. The Document Object Model and Browser Hierarchy : By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  133. 133. Document Tree Structuredocumentdocument.documentElementdocument.body By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  134. 134. child, sibling, parent By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  135. 135. child, sibling, parent By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  136. 136. child, sibling, parent By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  137. 137. child, sibling, parent By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  138. 138. JavaScript Working with framesframeset.html:<HTML> <HEAD> <TITLE>Frames Values</TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAME SRC="jex13.html" name="left_frame"> <FRAME SRC="jex14.html" name="right_frame"> </FRAMESET></HTML> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  139. 139. JavaScript Working with framesjex14.html:<HTML> <HEAD> <TITLE>JavaScript Example 14</TITLE> </HEAD> <BODY> <FORM name="form1"> <INPUT type="text" name="text1" size="25" value=""> </FORM> </BODY></HTML> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  140. 140. JavaScript Working with framesjex13.htm:<HTML> <HEAD> <TITLE>JavaScript Example 13</TITLE> </HEAD> <BODY> <FORM> <INPUT type="button" value="What is course name?" onClick="parent.right_frame.document.form1.text1.value= MCA!"> </FORM> </BODY></HTML> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  141. 141. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  142. 142. JavaScript Document ObjectDocument Object Collections :Collection Descriptionanchors[ ] Returns an array of all the anchors in the documentforms[ ] Returns an array of all the forms in the documentimages[ ] Returns an array of all the images in the documentlinks[ ] Returns an array of all the links in the document By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  143. 143. JavaScript Document Object PropertiesProperty Description Returns all name/value pairs of cookies in thecookie document Returns the mode used by the browser to render thedocumentMode document Returns the domain name of the server that loaded thedomain document Returns the date and time the document was lastlastModified modifiedreadyState Returns the (loading) status of the document Returns the URL of the document that loaded thereferrer current documenttitle Sets or returns the title of the documentURL Returns the full URL of the document By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  144. 144. JavaScript Document Object MethodsMethod Description Closes the output stream previously openedclose() with document.open()getElementById() Accesses the first element with the specified idgetElementsByName() Accesses all elements with a specified name Accesses all elements with a specifiedgetElementsByTagName() tagname Opens an output stream to collect the outputopen() from document.write() or document.writeln() Writes HTML expressions or JavaScript codewrite() to a document Same as write(), but adds a newline characterwriteln() after each statement By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  145. 145. JavaScript Forms, elements and events•The Form object represents an HTML form.•For each <form> tag in an HTML document, a Form object is created.•Forms are used to collect user input, and contain input elements liketext fields, checkboxes, radio-buttons, submit buttons and more.•A form can also contain select menus, textarea, fieldset, and labelelements.•Forms are used to pass data to a server.•Form Object Collections :Collection Descriptionelements[ ] Returns an array of all elements in a form By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  146. 146. JavaScript Forms, elements and eventsForm Object Properties :Property Description Sets or returns the value of the accept-charset attributeacceptCharset in a formaction Sets or returns the value of the action attribute in a form Sets or returns the value of the enctype attribute in aenctype formlength Returns the number of elements in a form Sets or returns the value of the method attribute in amethod formname Sets or returns the value of the name attribute in a formtarget Sets or returns the value of the target attribute in a form By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  147. 147. JavaScript Forms, elements and events Form Object Methods :Method Descriptionreset() Resets a formsubmit() Submits a form By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  148. 148. JavaScript Forms, elements and events Form Object Events :Event The event occurs when...onreset The reset button is clickedonsubmit The submit button is clicked By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  149. 149. JavaScript Forms, elements and events<html> <body> <form id="frm1"> First name: <input type="text“ name="fname" value="Donald" /><br /> Last name: <input type="text" name="lname" value="Duck" /><br /> <input type="submit" value="Submit" /> </form> <p>Return the value of each element in the form:</p> <script type="text/javascript"> var x=document.getElementById("frm1"); for (var i=0;i<x.length;i++) { document.write(x.elements[i].value); document.write("<br />"); } </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  150. 150. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  151. 151. JavaScript Forms Methods reset()<html> <head> <script type="text/javascript"> function formReset() { document.getElementById("frm1").reset(); } </script> </head> <body> <form id="frm1"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="button" onclick="formReset()" value="Reset form" /> </form> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  152. 152. JavaScript Forms Methods submit()<html> <head> <script type="text/javascript"> function formSubmit() { document.getElementById("frm1").submit(); } </script> </head> <body> <p>Enter some text in the fields below, then press the "Submit form" button to submit the form.</p> <form id="frm1" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /><br /> <input type="button" onclick="formSubmit()" value="Submit form" /> </form> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  153. 153. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  154. 154. JavaScript Forms Event (onreset)<html> <body> <p>Enter some text in the fields below, then press the Reset button to reset the form.</p> <form onreset="alert(The form will be reset)"> Firstname: <input type="text" name="fname" value="First" /><br /> Lastname: <input type="text" name="lname" value="Last" /> <br /><br /> <input type="reset" value="Reset" /> </form> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  155. 155. JavaScript Forms Event (onsubmit)<html> <head> <script type="text/javascript"> function greeting() { alert("Welcome " + document.forms["frm1"]["fname"].value + "!") } </script> </head> <body> What is your name?<br /> <form name="frm1" action="submit.htm" onsubmit="greeting()"> <input type="text" name="fname" /> <input type="submit" value="Submit" /> </form> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  156. 156. JavaScript Regular ExpressionDefinition: A string that is used to describe or match a set of strings, accordingto certain syntax. Regular expressions are used to perform powerful pattern-matchingand "search-and-replace" functions on text.Syntax : var patt=new RegExp(pattern,modifiers); or more simply: var patt=/pattern/modifiers;•pattern specifies the pattern of an expression•modifiers specify if a search should be global, case-sensitive, etc. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  157. 157. JavaScript Regular Expression Modifiers Modifiers are used to perform case-insensitive and global searches:Modifier Descriptioni Perform case-insensitive matching Perform a global match (find all matches rather thang stopping after the first match) By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  158. 158. JavaScript Regular ExpressionModifier i: <html> <body> <script type="text/javascript"> var str = "Visit Siberindia"; var patt1 = /Siberindia/i; document.write(str.match(patt1)); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  159. 159. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  160. 160. JavaScript Regular ExpressionModifier g: <html> <body> <script type="text/javascript"> var str="Is this all there is?"; var patt1=/is/g; document.write(str.match(patt1)); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  161. 161. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  162. 162. JavaScript Regular ExpressionModifier g and i: <html> <body> <script type="text/javascript"> var str="Is this all there is?"; var patt1=/is/gi; document.write(str.match(patt1)); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  163. 163. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  164. 164. JavaScript Regular Expression MethodsMethod Descriptionexec() Tests for a match in a string. Returns the first matchtest() Tests for a match in a string. Returns true or falsecompile() Compiles a regular expression By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  165. 165. JavaScript Regular Expression Methodstest() : The test() method searches a string for a specified value, and returns true or false, depending on the result.Example:<html> <body> <script type="text/javascript"> var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  166. 166. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  167. 167. JavaScript Regular Expression Methodsexec() : The exec() method searches a string for a specified value, and returns the text of the found value. If no match is found, it returns null.Example: <html> <body> <script type="text/javascript"> var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  168. 168. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  169. 169. JavaScript Regular Expression Methodscompile() : The compile() method is used to compile a regular expression during execution of a script. The compile() method can also be used to change and recompile a regular expression.Example: <html> <body> <script> var str="Every man in the world! Every woman on earth!"; var patt=/man/g; var str2=str.replace(patt,"person"); document.write(str2+"<br />"); patt=/(wo)?man/g; patt.compile(patt); str2=str.replace(patt,"person"); document.write(str2); </script> </body> </html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  170. 170. By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  171. 171. JavaScript Regular ExpressionBrackets :Brackets are used to find a range of charactersExpression Description[abc] Find any character between the brackets[^abc] Find any character not between the brackets[0-9] Find any digit from 0 to 9[A-Z] Find any character from uppercase A to uppercase Z[a-z] Find any character from lowercase a to lowercase z[A-z] Find any character from uppercase A to lowercase z[adgk] Find any character in the given set[^adgk] Find any character outside the given set(red|blue|green) Find any of the alternatives specified By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  172. 172. JavaScript Regular Expression<html> <body> <script type="text/javascript"> var str="Is this all there is?"; var patt1=/[a-h]/g; document.write(str.match(patt1)); </script> </body></html> By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER
  173. 173. JavaScript Regular Expression By Mrs. Geetanjali A. Bhosale. Assistant Professor, SIBER

×