Javascript sivasoft


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Javascript sivasoft

  1. 1. JAVASCRIPT By K.Siva Kumar
  2. 2. Topics Covered Introduction to Javascript Javascript Basic Concepts Creating DHTML Pages Rollovers Working with Forms Working with Events DOM, NODE and OBJECTS Working with Date and Times Realtime Examples
  3. 3. Introduction to JAVASCRIPT It is used to add interactivity to our webpages It is a scripting language Javascript scripts are text on Web pages that are interpreted and run by Web Browsers We can create active user interface Validate user input on Forms
  4. 4. First Script<script type=”text/javascript”>document.write(“Welcome to Javascript”);</script>
  5. 5. CommentsSingle Comments are //<script type="text/javascript">document.write("Hello"); // This will write "Hello" document.write("Dolly"); // This will write "Dolly"</script>Multi line comments are /* */<script type="text/javascript">/*document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>");document.write("<p>This is another paragraph</p>");*/</script>
  6. 6. Variables JavaScript variables are used to hold values orexpressions. A variable can have a short name, like x, or a moredescriptive name, like carname.Rules for JavaScript variable names: Variable names are case sensitive (y and Y are twodifferent variables) Variable names must begin with a letter, the $ character, orthe underscore character Note: Because JavaScript is case-sensitive, variable namesare case-sensitive.
  7. 7. Arithmetic Operators Arithmetic operators are used to performarithmetic between variables and/or values. Operators like Addition (+), Subtraction (-),Multiplication (*), Division (/), Modulus (%)(division remainder), Increment (++),Decrement (--).
  8. 8. Assignment Operators Assignment operators are used to assignvalues to JavaScript variables. Operators like =, +=, -=, *=, /=, %=. For Example x+=y represents (x=x+y).
  9. 9. + Operator on String The + operator can also be used to addstring variables or text values together.
  10. 10. Comparison Operators Comparison operators are used in logicalstatements to determine equality or differencebetween variables or values. Operators like== (equal to)=== (exactly equal to)!= (not equal)> (greater than)< (less than)>= (greater than or equal to)<= (less than or equal to)
  11. 11. Popup Boxes JavaScript has three kind of popup boxes:Alert box, Confirm box, and Prompt box.
  12. 12. Alert box An alert box is often used if you want tomake sure information comes through to theuser. When an alert box pops up, the user willhave to click "OK" to proceed.<script type=”text/javascript”>alert(“Welcome to Javascript”);</script>
  13. 13. Confirm Box A confirm box is often used if you want theuser to verify or accept something. When a confirm box pops up, the user willhave to click either "OK" or "Cancel" toproceed. If the user clicks "OK", the box returns true.If the user clicks "Cancel", the box returnsfalse.
  14. 14. Conditional Statements Conditional statements are used to performdifferent actions based on differentconditions. if statement - to execute some code only if aspecified condition is true if...else statement - to execute some code if thecondition is true and another code if the condition isfalse if...else if....else statement - to select one of manyblocks of code to be executed switch statement - to select one of many blocks ofcode to be executed
  15. 15. If Statement if statement to execute some code only if aspecified condition is true.Syntax :if (condition) { code to be executed if condition is true }
  16. 16. If...else Statement if....else statement to execute some code ifa condition is true and another code if thecondition is not true.Syntax :if (condition) { code to be executed if condition is true }else { code to be executed if condition is not true }
  17. 17. If...else if...else Statement if....else if...else statement to select one ofseveral blocks of code 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 }
  18. 18. Switch Statement switch statement to select one of manyblocks of code to be executed.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}
  19. 19. Loops Loops execute a block of code a specifiednumber of times, or while a specifiedcondition is true. In JavaScript, there are two different kind ofloops: for - loops through a block of code a specified numberof times while - loops through a block of code while a specifiedcondition is true
  20. 20. For Loop For loop is used when you know in advancehow many times the script should run.Syntax :for (variable=startvalue;variable<=endvalue;variable=variable+increment){code to be executed}
  21. 21. While Loop While loop loops through a block of codewhile a specified condition is true.Syntax :while (variable<=endvalue) { code to be executed }
  22. 22. do...while Loop do...while loop is a variant of the while loop.This loop will execute the block of codeONCE, and then it will repeat the loop as longas the specified condition is true.Syntax :do { code to be executed }while (variable<=endvalue);
  23. 23. Break & Continue Statement break statement will break the loop andcontinue executing the code that follows afterthe loop (if any). continue statement will break the currentloop and continue with the next value.
  24. 24. Functions A function will be executed by an event orby a call to the function. A function contains code that will be executed by anevent or by a call to the function. You may call a function from anywhere within a page(or even from other pages if the function is embedded inan external .js file). Functions can be defined both in the <head> and in the<body> section of a document. However, to assure thata function is read/loaded by the browser before it iscalled, it could be wise to put functions in the <head>section.
  25. 25. Define a FunctionSyntax :function functionname(var1,var2,...,varX){some code}The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.Note: A function with no parameters must include the parentheses () after the function name.Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the exact same capitals as in the function name.
  26. 26. What is an Array An array is a special variable, which canhold more than one value, at a time.
  27. 27. Objects Object Based Programming JavaScript is an Object Based Programming language, andallows you to define your own objects and make your own variabletypes. However, creating your own objects will be explained later, in theAdvanced JavaScript section. We will start by looking at the built-inJavaScript objects, and how they are used.
  28. 28. Date Object The Date object is used to work with dates and times. Date objects are created with the Date() constructor. There are four ways of instantiating a date: new Date() // current date and time new Date(milliseconds) //milliseconds since 1970/01/01 new Date(dateString) new Date(year, month, day, hours, minutes, seconds,milliseconds)
  29. 29.  Math Object The Math object allows you to perform mathematical tasks. The Math object includes several mathematical constants andmethods.
  30. 30. Regular Expressions A regular expression is an object that describes a pattern ofcharacters. When you search in a text, you can use a pattern to describewhat you are searching for. A simple pattern can be one single character. A more complicated pattern can consist of more characters, andcan be used for parsing, format checking, substitution and more. Regular expressions are used to perform powerful pattern-matching and "search-and-replace" functions on text.
  31. 31.  The Navigator object contains informationabout the visitors browser.
  32. 32.  A cookie is often used to identify a user. A cookie is a variable that is stored on the visitors computer.Each time the same computer requests a page with a browser, itwill send the cookie too. With JavaScript, you can both create andretrieve cookie values.Examples of cookies: Name cookie - The first time a visitor arrives to your web page, heor she must fill in her/his name. The name is then stored in acookie. Next time the visitor arrives at your page, he or she couldget a welcome message like "Welcome SivaSoft!" The name isretrieved from the stored cookie Date cookie - The first time a visitor arrives to your web page, thecurrent date is stored in a cookie. Next time the visitor arrives atyour page, he or she could get a message like "Your last visit wason Tuesday August 11, 2005!" The date is retrieved from the storedcookie