Introduction to java script
- 2. WHAT IS JAVASCRIPT? JavaScript is a lightweight, interpreted programming language with object-oriented capabilities . It allows you to build interactivity into otherwise static HTML pages. JavaScript is a lightweight, interpreted programming language Designed for creating network-centric applications Complementary to and integrated with Java Complementary to and integrated with HTML.
- 3. ADVANTAGES OF JAVASCRIPT: The merits of using JavaScript are: Less server interaction: The user input can be validated before sending the page to the server. This puts fewer loads on the server. Immediate feedback to the visitors: Users don't have to wait for a page reload to see if they have forgotten to enter something. Increased interactivity: Interfaces can be created that react when the user hovers over them with a mouse or activates them via the keyboard. Richer interfaces: JavaScript can include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.
- 4. LIMITATIONS OF JAVASCRIPT: Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason. JavaScript cannot be used for networking applications because there is no such support available. JavaScript doesn't have any multithreading or multiprocessing capabilities.
- 6. DOCUMENT OBJECT When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes: (element nodes, text nodes, attribute nodes, and comment nodes). The document object provides properties and methods to access all node objects, from within JavaScript.
- 7. SCRIPTS The script tag takes two important attributes: language: This attribute specifies what scripting language is used. Its value will be javascript. type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". So the JavaScript segment will be:
- 8. <script language="javascript" type="text/javascript"> JavaScript code</script> JavaScript program to print "Hello BCA". <html> <body> <script language="javascript" type="text/javascript"> document.write("Hello BCA!") </script> </body> </html>
- 9. OPERATOR Consider 4 + 5 =9. Here 4 and 5 are called operands and + is called operator. JavaScript language supports following type of operators. Arithmetic Operators Comparision Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators
- 10. ARITHMETIC OPERATORS: Operator Description + Adds two operands - Subtracts second operand from the first * Multiply both operands / Divide numerator by denumerator % Modulus Operator and remainder of after an integer division ++ Increment operator, increases integer value by one -- Decrement operator, decreases integer value by one
- 11. COMPARISON OPERATORS: Operato r Description == Checks if the values of two operands are equal or not, if yes then condition becomes true. != Checks if the values of two operands are equal or not, if values are not equal then condition becomes true. > Checks if the value of left operand is greater than the value of right operand, if yes then condition becomes true. < Checks if the value of left operand is less than the value of right operand, if yes then condition becomes true. >= Checks if the value of left operand is greater than or equal to the value of right operand, if yes then condition becomes true. <= Checks if the value of left operand is less than or equal to the value of right
- 12. LOGICAL OPERATORS: Operator Description && Called Logical AND operator. If both the operands are non zero then then condition becomes true. || Called Logical OR Operator. If any of the two operands are non zero then then condition becomes true. ! Called Logical NOT Operator. Use to reverses the logical state of its operand. If a condition is true then Logical NOT operator will make false.
- 13. THE BITWISE OPERATORS: Operator Description & Called Bitwise AND operator. It performs a Boolean AND operation on each bit of its integer arguments. | Called Bitwise OR Operator. It performs a Boolean OR operation on each bit of its integer arguments. ^ Called Bitwise XOR Operator. It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both. ~ Called Bitwise NOT Operator. It is a is a unary operator and operates by reversing all bits in the operand.
- 14. ASSIGNMENT OPERATORS: Operator Description = Simple assignment operator, Assigns values from right side operands to left side operand += Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand - = Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand *= Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand /= Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand %= Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand
- 15. MISCELLANEOUS OPERATOR The Conditional Operator (? :) The conditional operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. The conditional operator has this syntax: Operator Description Example ? : Conditional Expression If Condition is true ? Then value X : Otherwise value Y
- 16. CONDITIONAL STATEMENTS JavaScript supports conditional statements which are used to perform different actions based on different conditions. JavaScript supports following forms of if..else statement: if statement if...else statement if...else if... statement.
- 17. if statement: The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally. if (expression) { Statement(s) to be executed if expression is true }
- 18. EXAMPLE FOR IF STATEMENT <script type="text/javascript"> var age = 20; if( age > 18 ) { document.write("<b>Qualifies for driving</b>"); } </script>
- 19. IF...ELSE STATEMENT: The if...else statement is the next form of control statement that allows JavaScript to execute statements in more controlled way. Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) in the if block, are executed. If expression is false then given statement(s) in the else block, are executed. if (expression) { Statement(s) to be executed if expression is true} Else { Statement(s) to be executed if expression is false }
- 20. EXAMPLE FOR IF-ELSE STATEMENT <script type="text/javascript"> var age = 15; if( age > 18 ) { document.write("<b>Qualifies for driving</b>"); } Else { document.write("<b>Does not qualify for driving</b>"); } </script>
- 21. IF...ELSE IF... STATEMENT: The if...else if... statement is the one level advance form of control statement that allows JavaScript to make correct decision out of several conditions if (expression 1) { Statement(s) to be executed if expression 1 is true } else if (expression 2) { Statement(s) to be executed if expression 2 is true } else if (expression 3) { Statement(s) to be executed if expression 3 is true } Else {
- 22. EXAMPLE FOR IF-ELSE-IF STATEMENT <script type="text/javascript"> var book = "maths"; if( book == "history" ) { document.write("<b>History Book</b>"); } else if( book == "maths" ) { document.write("<b>Maths Book</b>"); } else if( book == "economics" ) { document.write("<b>Economics Book</b>"); } Else { document.write("<b>Unknown Book</b>"); }
- 23. SWITCH STATEMENT The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used. switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break; ... case condition n: statement(s) break; default: statement(s) }
- 24. EXAMPLE FOR SWITCH CASE STATEMENT <script type="text/javascript"> var grade='A'; document.write("Entering switch block<br />"); switch (grade) { case 'A': document.write("Good job<br />"); break; case 'B': document.write("Pretty good<br />"); break; case 'C': document.write("Passed<br />"); break; case 'D': document.write("Not so good<br />"); break; case 'F': document.write("Failed<br />"); break; default: document.write("Unknown grade<br />"); } document.write("Exiting switch block"); </script>
- 25. PRECACHING IMAGES WITH JAVASCRIPT JavaScript helps you to load images into the browser’s memory cache without displaying them.This images is the precaching images. And this technique preload the images into the browser cache when the page initially loads. Steps: In order to precache an image we need to construct an image object in memory. Image object created in memory is dissimilar from the document image object aka <IMG>tag. HERE YOU GO: Parameters to the constructor are the pixel width and height of the image So the image object exists in memory. Now you can assign a filename or URL to the src property of that image object: 1var myImage = new Image(width, height) 1myImage.src = “someImage.jpeg”
- 26. IMAGE ROLLOVERS Image rollovers (sometimes also called Image Mouse Overs or mouse-overs) can be found in numerous websites on the Internet today. You've probably seen them around too: when you move your mouse cursor over a button on a particular site, the button appears to be depressed. Move your mouse cursor away, and the button pops out again. Image rollovers are implemented by creating two images for the same button. The first image is that which you want displayed when the mouse is not hovering over it, typically the "undepressed" or "up" state of a button. The second image is the graphic you want displayed when the mouse pointer is over the graphic, usually showing the button in a depressed or "down" state.
- 27. FORM AND FORM ELEMENT The use of HTML forms is basic to almost all JavaScript programs. This chapter explains the details of programming with forms in JavaScript. It is assumed that you are already somewhat familiar with the creation of HTML forms and with the input elements that they contain.
- 28. FORM VALIDATION Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information.
- 29. TYPES OF FORM VALIDATION Form validation generally performs two functions. Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
- 34. JAVASCRIPT OBJECTS • Numbers can be objects (if defined with the new keyword) • Strings can be objects (if defined with the new keyword) • Dates are always objects • Regular expressions are always objects • Arrays are always objects • Functions are always objects
- 35. JavaScript Primitives A primitive value is a value that has no properties or methods. A primitive data type is data that has a primitive value. JavaScript defines 5 types of primitive data types: • string • number • boolean • null • undefined
- 36. JAVASCRIPT BUILT-IN OBJECTS 1. Math object These objects are used for simple data processing in the JavaScript Math Property Description SQRT2 Returns square root of 2. PI Returns Π value. E Returns Euler's Constant. LN2 Returns natural logarithm of 2. LN10 Returns natural logarithm of 10. LOG2E Returns base 2 logarithm of E. LOG10E Returns 10 logarithm of E.
- 37. MATH METHODS Methods Description abs() Returns the absolute value of a number. acos() Returns the arccosine (in radians) of a number. ceil() Returns the smallest integer greater than or equal to a number. cos() Returns cosine of a number. floor() Returns the largest integer less than or equal to a number. log() Returns the natural logarithm (base E) of a number. max() Returns the largest of zero or more numbers. min() Returns the smallest of zero or more numbers. pow() Returns base to the exponent power, that is base exponent.
- 38. 2. DATE OBJECT • Date is a data type. • Date object manipulates date and time. • Date() constructor takes no arguments. • Date object allows you to get and set the year, month, day, hour, minute, second and millisecond fields. Syntax: var variable_name = new Date(); Example: var current_date = new Date();
- 39. Methods Description Date() Returns current date and time. getDate() Returns the day of the month. getDay() Returns the day of the week. getFullYear() Returns the year. getHours() Returns the hour. getMinutes() Returns the minutes. getSeconds() Returns the seconds. getMilliseconds() Returns the milliseconds. getTime() Returns the number of milliseconds since January 1, 1970 at 12:00 AM. getTimezoneOffset() Returns the timezone offset in minutes for the current locale. getMonth() Returns the month. setDate() Sets the day of the month. setFullYear() Sets the full year. setHours() Sets the hours. setMinutes() Sets the minutes. setSeconds() Sets the seconds. setMilliseconds() Sets the milliseconds. setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM. setMonth() Sets the month. toDateString() Returns the date portion of the Date as a human-readable string. toLocaleString() Returns the Date object as a string. toGMTString() Returns the Date object as a string in GMT timezone. valueOf() Returns the primitive value of a Date object.
- 40. 3. String Object • String objects are used to work with text. • It works with a series of characters. Syntax: var variable_name = new String(string); Example: var s = new String(string);
- 41. STRING PROPERTIES Properties Description length It returns the length of the string. prototype It allows you to add properties and methods to an object. constructor It returns the reference to the String function that created the object.
- 42. Window Object The window object represents an open window in a browser. If a document contain frames (<iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame. Property Description closed Returns a Boolean value indicating whether a window has been closed or not console Returns a reference to the Console object, which provides methods for logging information to the browser's console (See Console object) defaultStatus Sets or returns the default text in the statusbar of a window document Returns the Document object for the window (See Document object) frameElement Returns the <iframe> element in which the current window is inserted frames Returns all <iframe> elements in the current window
- 43. A Document object A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content. The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document. • Window object − Top of the hierarchy. It is the outmost element of the object hierarchy. • Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. • Form object − Everything enclosed in the <form>...</form> tags sets the form object. • Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.
- 44. THANK YOU