1 / 156

Java Script

Java Script. JavaScript is a new scripting language which is being developed by Netscape . With Java Script you can easily create interactive web-pages. You must memorize that JavaScript is not Java.

bikita
Télécharger la présentation

Java Script

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Java Script • JavaScript is a new scripting language which is being developed by Netscape. • With Java Script you can easily create interactive web-pages. • You must memorize that JavaScript is not Java. • To run scripts written in JavaScript, You need a JavaScript-enabled browser - for example the Netscape Navigator (version 2.0) or the Microsoft Internet Explorer (version 3.0). • It can run on the browser without being compiled. • java script language is interpreted rather than compiled. Sunil Kumar Sahu,Lecturer RCET

  2. JavaScript code is embedded directly into the HTML-page. In order to see how this works we are going to look at an easy example: <html> <body> <br> This is a normal HTML document. <br> <script language="JavaScript"> document.write("This is JavaScript!") </script> <br> Back in HTML again. </body> </html> Sunil Kumar Sahu,Lecturer RCET

  3. At the first glance this looks like a normal HTML-file. The only new thing is the part: <script language="JavaScript"> document.write("This is JavaScript!") </script> • This is JavaScript. In order to see this script working save this code as a normal HTML-file and • load it into your JavaScript-enabled browser. Here is the output generated by the file- This is a normal HTML document. This is JavaScript! Back in HTML again. Sunil Kumar Sahu,Lecturer RCET

  4. Benefits of java script • It has a no.of big benefits to anyone who wants to make their web site dynamically. • It is widely supported in web browser. • It gives easy access to the document objects and manipulate most of them. • It gives interesting animation without language download times associated with many multimedia data types. • Web surfers don’t need a special plug ins to use your scripts. • It is relatevely secure. Sunil Kumar Sahu,Lecturer RCET

  5. Problems with Java Script • If your script doesn’t work then your page is useless. • Because of broken scripts many web surfer disable java script support in their web browser. • Scripts can run slowly and complex script can take long time to start up. Sunil Kumar Sahu,Lecturer RCET

  6. Using an external Java Script • If you want to run the same Java Script on several pages without having to write the same script on on every page ,you can write a Java Script in an external file. • Save the external java script file with .js extension. • The external java script file can not contain the <script> tag. • To use external file use src attribute of the <script> tag Sunil Kumar Sahu,Lecturer RCET

  7. Example- <html> <script type=“text/javascript” src=“abc.js”> </script> <head> <body onLoad=message()> </body></html> External file (abc.js)- Function message() { alert(“Hello”); } Sunil Kumar Sahu,Lecturer RCET

  8. Data types • Numeric literal :- java script support both integer and floating point… integer are whole number and do not contain a decimal point, e.g. 143. floating point numbers are fractional number such 143.56, they must contain a decimal point or exponent specifier such as 1.43e-2, exponent can be either upper case or lower case… Sunil Kumar Sahu,Lecturer RCET

  9. Data types • String literal :- String literals are rows of characters enclosed in either double or single quotes. • Boolean :- Boolean literals are logical values that have only one of two values, true or false. You can think of the values as yes or no, on or off, or 1 or 0. They are used to test whether a condition is true or false. Sunil Kumar Sahu,Lecturer RCET

  10. Java script variable • A variable is a "container" for information you want to store • A variable's value can change during the script • Variable names are case sensitive • They must begin with a letter or the underscore character • You can create a variable with the var statement: varstrname = value • You can also create a variable without the var statement strname = value Sunil Kumar Sahu,Lecturer RCET

  11. Local JavaScript Variables • A variable declared (using var) within a JavaScript function becomes LOCAL and can only be accessed from within that function. (the variable has local scope). • You can have local variables with the same name in different functions, because local variables are onlyrecognized by the function in which they are declared. • Local variables are deleted as soon as the function is completed. Global JavaScript Variables • Variables declared outside a function, become GLOBAL, and all scripts and functions on the web page can access it. Sunil Kumar Sahu,Lecturer RCET

  12. The Lifetime of JavaScript Variables • The lifetime JavaScript variables starts when they are declared. • Local variables are deleted when the function is completed. • Global variables are deleted when you close the page. Assigning Values to Undeclared JavaScript Variables • If you assign a value to variable that has not yet been declared, the variable will automatically be declared as a GLOBAL variable. • This statement: carname="Volvo"; • will declare the variable carname as a global variable , even if it is executed inside a function. Sunil Kumar Sahu,Lecturer RCET

  13. Java Script Operator • Java Script supports variety of operators- 1.Arithmetic Operator 2.Assignment Operator 3.Comparison Operator 4.Logical Operator 5.Conditional Operator Sunil Kumar Sahu,Lecturer RCET

  14. Sunil Kumar Sahu,Lecturer RCET

  15. Sunil Kumar Sahu,Lecturer RCET

  16. Sunil Kumar Sahu,Lecturer RCET

  17. Sunil Kumar Sahu,Lecturer RCET

  18. Conditional Operator • Java Script contains Conditional Operator that assigns a value to a variable based on some condition. Syntax- variable name=(condition)?value1:value2; Example- class=(grade==“A”)?”First”:”Second”; If variable has value of “A” then the variable class will be assigned the value “first” otherwise “second”. Sunil Kumar Sahu,Lecturer RCET

  19. JavaScript Statements • Constructs of programming • Sequence • Conditional execution • If…Else • Switch • Looping • Do…While • For • While • Method/Function calls Sunil Kumar Sahu,Lecturer RCET

  20. Conditional Statements • JavaScript supports the following control statements: • if-else • If-else-if • Switch case The if-else structure • The if-else structure is used to conditionally execute lines of code, depending on a condition that is usually a comparison of values. if ( condition ) { ...statements to execute if condition is true... } else { ...statements to execute if condition is false... } Sunil Kumar Sahu,Lecturer RCET

  21. Switch Case- • Use the Switch Statements to select one of many blocks of code to be executed. Syntax- switch(n) { case1: execute code block1 break; case2: execute code block2 break; Default: code to be executed if n is different from case 1and 2. } Sunil Kumar Sahu,Lecturer RCET

  22. Conditional Loops • Java script provides three kinds of loops- 1.While loop 2.do-while loop 3.For loop Sunil Kumar Sahu,Lecturer RCET

  23. The while loop • The while loop is used to execute lines of code over and over again while a certain condition is true. • The while structure has the following syntax: while ( condition ) { ...lines to execute while condition is true... } Sunil Kumar Sahu,Lecturer RCET

  24. For example-Reverse no. <html> <head> <title>Using JavaScript</title> </head> <body bgcolor=“blue"> <script language="JavaScript"> varnum,rev; num=prompt("Enter the number :"); document.write("<br><br><br>") ; rev=0; while(num!=0) { rev=rev*10+num%10; num=parseInt(num/10); } document.write("Reverse :"+rev); </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  25. OUTPUT Sunil Kumar Sahu,Lecturer RCET

  26. Example:whileloop. The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5 <html> <body> <script type="text/javascript"> i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  27. The for loop • The for loop is used to execute a block of code much like the while structure. • The difference is that the for structure is tailored specifically for numerical loops, usually counting a specific number of loops. • The for structure has the following syntax: for(initliase the variable;condition;increament/decreament) { body of loop } Sunil Kumar Sahu,Lecturer RCET

  28. The assignment, condition, and change blocks of the for loop work together to control the number of times the statements are executed. • Typically, the blocks reference the same variable, similar to this example: for ( x = 1; x <= 10; x++; ) { Sunil Kumar Sahu,Lecturer RCET

  29. In this case, the loop’s execution is as follows: ✦ The variable x is set to 1 at the beginning of the loop. ✦ The value of variable x is checked—if it is less than or equal to 10, the loop’s statements are executed. ✦ At the end of each loop the variable x is incre • Two additional loop-related commands come in handy when using loops in break and continue- • The break command ends the loop, and code execution continues after the loop structure. • The continue command ends the current iteration of the loop, and execution continues with the next iteration of the loop.mented by one, and the loop is repeated. Sunil Kumar Sahu,Lecturer RCET

  30. Example: for loop The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5 <html> <body> <script type="text/javascript"> vari=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  31. Do-while loop • The do while loop first executes the code and then checks for the condition being tested. • It means it executes atleast once regardless of whether the condition being tested is successful or not. • Syntax- Do { Statements; }while(condition); Sunil Kumar Sahu,Lecturer RCET

  32. For example- Armstrong Number <html> <head> <title>Using JavaScript</title> </head> <body bgcolor=“blue"> <script language="JavaScript"> varnum,sum,org; num=prompt("Enter the number :"); num=parseInt(num); org=num; document.write("<br><br><br>") ; sum=0; do { sum=sum+(num%10)*(num%10)*(num%10); num=parseInt(num/10); }while(num!=0); if(sum==org) document.write("Armstrong Number ."); else document.write("Not an armstrong number."); </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  33. OUTPUT Sunil Kumar Sahu,Lecturer RCET

  34. Example:do-while loop. <html> <body> <script type="text/javascript"> i = 0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i <= 5); </script> </body> </html> The number is 0The number is 1The number is 2The number is 3The number is 4The number is 5 Sunil Kumar Sahu,Lecturer RCET

  35. Functions • A function is a block of code that will be executed when "someone" calls it. • Functions are a means of grouping code fragments together into cohesive pieces. • Typically, those pieces perform very specific tasks—receiving values to execute upon and returning values to indicate their success, failure, or result. • There are essentially two types of functions, built-in JavaScript functions and user-defined functions. Built-in functions • JavaScript has quite a few built-in functions to perform a variety of tasks. • Augmenting the functions are a bunch of properties and methods that can be used with just about any object, from browser function to variable. Sunil Kumar Sahu,Lecturer RCET

  36. The scope of built-in JavaScript functions, methods, and properties is too vast to adequately convey here. However, comprehensive references can be found on the Internet, including the following: There are two types of functions: • When the function will return a value. • When the function will not return a value The general form is- function functionname(argument list) { body of the function } Sunil Kumar Sahu,Lecturer RCET

  37. When the function will return a value <html> <head> <title>Using JavaScript</title> <script language="JavaScript"> function factorial(num) { varfact,i; fact=1; for(i=1;i<=num;i++) fact=fact*i; return fact; } </script> </head> <body bgcolor="#ccffee"> <script language="JavaScript"> varnum,fact; num=prompt("Enter the number:"); document.write("<br><br><br>") ; fact=factorial(num); document.write("Factorial of " + num + " is = " + fact); </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  38. OUTPUT- Sunil Kumar Sahu,Lecturer RCET

  39. When the function will not return a value <html> <head> <title>Using JavaScript</title> <script language="JavaScript"> function factorial(num) { varfact,i; fact=1 for(i=1;i<=num;i++) fact=fact*i; document.write("Factorial of " + num + " is = "+ fact); } </script> </head> <body bgcolor="#ccffee"> <script language="JavaScript"> var num; num=prompt("Enter the number:"); document.write("<br><br><br>") ; factorial(num); </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  40. OUTPUT- Sunil Kumar Sahu,Lecturer RCET

  41. User-defined functions • Like any other robust programming language, JavaScript allows for user-defined functions. User-defined functions allow you to better organize your code into discrete, reusable chunks. • User-defined functions have the following syntax: function function_name (arguments) { ...code of function... return value_to_return; } Sunil Kumar Sahu,Lecturer RCET

  42. Calling a Function with Arguments • When you call a function, you can pass along some values to it, these values are called arguments or parameters. • These arguments can be used inside the function. • You can send as many arguments as you like, separated by commas (,) Function(argument1,argument2) • Declare the argument, as variables, when you declare the function: function myFunction(var1,var2) { some code } Sunil Kumar Sahu,Lecturer RCET

  43. Java Script Pop up Box (Dialog Box) • Java script boxes are interesting title “pop up” boxes that can used to display a message,ask for conformation,user input etc. • They are very easy to create. • Three types of dialog box exist in javascript.. 1.Alert 2.Confirm 3.Prompt Sunil Kumar Sahu,Lecturer RCET

  44. 1) alert( )- • This function will display a dialog box on the screen ,via, which we can display the information on the screen. The general form is , alert("message"); Consider the following code <html> <head> <title>Using the JavaScript </title> </head> <body > <script language="JavaScript"> alert("Welcome to JavaScript"); </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  45. Output- Sunil Kumar Sahu,Lecturer RCET

  46. 2)Confirm()- It is often used if you want the user to verify or accept something. <script language=“javascript”> var answer=confirm(“jump to google?”) if(answer) window.location=http://google.com; </script> Sunil Kumar Sahu,Lecturer RCET

  47. Example- <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> Sunil Kumar Sahu,Lecturer RCET

  48. 3)prompt( ) - This function is used to read the information from the user. The general form is , prompt("message"); Consider the following code- <html> <head> <title>Using JavaScript</title> </head> <body > <script language="JavaScript"> varsname; sname=prompt("Enter your name :"); document.write(“your name is”+sname) </script> </body> </html> Sunil Kumar Sahu,Lecturer RCET

  49. Output- Sunil Kumar Sahu,Lecturer RCET

  50. Objects in Java Script • Java Script uses objects to perform many tasks and therefore it is referred to as object based programming language. • Java Script objects are classified as. Math Object String Object Date Object Boolean Object Number Object Document Object Window Object Array Object Sunil Kumar Sahu,Lecturer RCET

More Related