Presentation is loading. Please wait.

Presentation is loading. Please wait.

What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.

Similar presentations


Presentation on theme: "What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI."— Presentation transcript:

1 What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI script). Allows authors to incorporate some functionality in their web pages. (without using CGI script). JavaScript can be used in a number of ways to spice up your page. Moving images, actions on buttons etc. JavaScript can be used in a number of ways to spice up your page. Moving images, actions on buttons etc.

2 What can Java script do? JavaScript can greatly enhance the interactivity of your web page. (image flips, drop down menu boxes, live clocks etc). JavaScript can greatly enhance the interactivity of your web page. (image flips, drop down menu boxes, live clocks etc). JavaScript gives HTML designers a programming tool JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page JavaScript can put dynamic text into an HTML page JavaScript can react to events. JavaScript can react to events. JavaScript can read and write HTML elements - It can read and change the content of an HTML element. JavaScript can read and write HTML elements - It can read and change the content of an HTML element. JavaScript can be used to validate data - before it is submitted to a server, this will save the server from extra processing JavaScript can be used to validate data - before it is submitted to a server, this will save the server from extra processing

3 Java vs Java Script Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript was created by the fine people at Netscape. Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript was created by the fine people at Netscape. JavaScript is a distant cousin of Java. JavaScript is a distant cousin of Java. It is also an OOP language. Many of their programming structures are similar. It is also an OOP language. Many of their programming structures are similar. However, JavaScript contains a much smaller and simpler set of commands than does Java. It is easier for the average weekend warrior to understand. However, JavaScript contains a much smaller and simpler set of commands than does Java. It is easier for the average weekend warrior to understand.

4 Differences Java can stand on its own, while JavaScript must be placed inside an HTML document to function. Java can stand on its own, while JavaScript must be placed inside an HTML document to function. Java must be compiled into what is known as a "machine language" before it can be run on the Web. To alter it, you need to compile again. Java must be compiled into what is known as a "machine language" before it can be run on the Web. To alter it, you need to compile again. JavaScript is text-based. You write it to an HTML document and it is run through a browser. You can alter it after it runs and run it again and again. JavaScript is text-based. You write it to an HTML document and it is run through a browser. You can alter it after it runs and run it again and again.

5 Java Script Vs Java Applets A Java "applet" (a little application) is a fully contained program. JavaScript is text that is downloaded into a browser A Java "applet" (a little application) is a fully contained program. JavaScript is text that is downloaded into a browser Java applets run independently of the HTML document that is calling them. They do appear on the same page. Java applets run independently of the HTML document that is calling them. They do appear on the same page. The HTML document does little more than call for the application and place it on the page. The HTML document does little more than call for the application and place it on the page. JavaScript is wholly reliant on the browser to understand it and make it come to life. JavaScript is wholly reliant on the browser to understand it and make it come to life.

6 Benefits JavaScript's easy to understand. JavaScript's easy to understand. It is much easier and more robust than Java. It is much easier and more robust than Java. JavaScript is geared to Web pages: It allows you to call on an item that already exists, like the status bar or the browser itself, and play with just that part.. JavaScript is geared to Web pages: It allows you to call on an item that already exists, like the status bar or the browser itself, and play with just that part.. It allows for fast creation of Web page events. (Many commands in JavaScript are Event Handlers). It allows for fast creation of Web page events. (Many commands in JavaScript are Event Handlers). JavaScript is a little more forgiving than Java. It allows more freedom in the creation of objects. Java is very rigid and requires all items to be denoted and spelled out. JavaScript is a little more forgiving than Java. It allows more freedom in the creation of objects. Java is very rigid and requires all items to be denoted and spelled out.

7 How to use them. JavaScript and applets are available on the Net as fully functioning items. Download and use them on your page (provided you are given permission). JavaScript and applets are available on the Net as fully functioning items. Download and use them on your page (provided you are given permission). There are many, many sites out there that do nothing more than hand out applets or JavaScript. Gamelan.com is a good one for applets. There are many, many sites out there that do nothing more than hand out applets or JavaScript. Gamelan.com is a good one for applets. Gamelan.com Take a look at javascripts.com for over 2300 free JavaScript scripts. javascripts.com

8 How to write? A bare-bone script consists of only two lines: The tag: A bare-bone script consists of only two lines: The tag: The actual JavaScript codes will fall inside this tag. The actual JavaScript codes will fall inside this tag.

9 JavaScript where to put…. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. Scripts in the body section: Scripts to be executed when the page loads, go in the body section. When you place a script in the body section it generates the content of the page. Scripts in the body section: Scripts to be executed when the page loads, go in the body section. When you place a script in the body section it generates the content of the page. Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. (SUPPORTS 0-1-INFINITY PRINCIPLE) Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. (SUPPORTS 0-1-INFINITY PRINCIPLE)

10 Example <body> document.write("Hello World!") document.write("Hello World!")</script></font></b></center></body></html> The code above will produce this output on an HTML page: The code above will produce this output on an HTML page: Hello World! hello.html

11 Ending Statements With a Semicolon? With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line. JavaScript uses them to separate commands and declarations JavaScript uses them to separate commands and declarations

12 Some features Conditional statements Conditional statements Conditional operators Conditional operators Buttons, Alerts and Confirmation Box Buttons, Alerts and Confirmation Box Event Handling Event Handling Loops Loops

13 Variables JavaScript uses variables to store data. JavaScript uses variables to store data. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Rules for Variable names: Rules for Variable names: Variable names are case sensitive Variable names are case sensitive They must begin with a letter or the underscore character They must begin with a letter or the underscore character Keep all of your variables in the HEAD section. Keep all of your variables in the HEAD section. If you declare a variable outside a function, all the functions on your page can access it. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed. The lifetime of these variables starts when they are declared, and ends when the page is closed.

14 Conditional Statements In JavaScript we have three conditional statements: In JavaScript we have three conditional statements: if statement - use this statement if you want to execute a set of code when a condition is true if statement - use this statement if you want to execute a set of code when a condition is true if...else statement - use this statement if you want to select one of two sets of lines to execute if...else statement - use this statement if you want to select one of two sets of lines to execute switch statement - use this statement if you want to select one of many sets of lines to execute switch statement - use this statement if you want to select one of many sets of lines to execute

15 Conditional Operator JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax Syntaxvariablename=(condition)?value1:value2 Example Example greeting=(visitor=="PRES")?"Dear President ":"Dear " greeting=(visitor=="PRES")?"Dear President ":"Dear " If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting. If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.

16 Buttons tags. tags. Syntax Syntax<FORM> </FORM> You can change the background color of a page. You can change the background color of a page.

17 Alerts JavaScript alert boxes tell the viewer something you want them to know. JavaScript alert boxes tell the viewer something you want them to know. Syntax Syntax alert('your choice of text') alert('your choice of text') To use it, place it inside another command. To use it, place it inside another command. The following script will alert the user to NOT click this particular link when they move their mouse over it. The following script will alert the user to NOT click this particular link when they move their mouse over it. Don't click this link! Don't click this link!

18 Confirmation Box A JavaScript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A JavaScript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. Allows the viewer to press an "OK" or "Cancel" button. Allows the viewer to press an "OK" or "Cancel" button. Syntax Syntax confirm("Text or question you want to use"); confirm("Text or question you want to use"); The confirmation box will return a value of true or false, and we must make use of the result by assigning it to a variable, like this: The confirmation box will return a value of true or false, and we must make use of the result by assigning it to a variable, like this: var where_to= confirm("Do you really want to go to this page??"); var where_to= confirm("Do you really want to go to this page??");

19 Looping In JavaScript we have the following looping statements: In JavaScript we have the following looping statements: while while do...while do...while for for

20 External Scripts To run the same script on several pages, without writing the script on each and every page, you can write a script in an external file, and save it with a.js file extension, like this: To run the same script on several pages, without writing the script on each and every page, you can write a script in an external file, and save it with a.js file extension, like this: The external script cannot contain the tag The external script cannot contain the tag Now you can call this script, using the "src" attribute, from any of your pages: Now you can call this script, using the "src" attribute, from any of your pages: <body> </body></html> Remember to place the script exactly where you normally would write the script. Remember to place the script exactly where you normally would write the script.

21 Comments The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. <!– some statements //--></script>

22 Conclusion JavaScript was designed to add interactivity to HTML pages JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language - a scripting language is a lightweight programming language JavaScript is a scripting language - a scripting language is a lightweight programming language A JavaScript is usually embedded directly in HTML pages A JavaScript is usually embedded directly in HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license Everyone can use JavaScript without purchasing a license JavaScript is supported by all major browsers, like Netscape and Internet Explorer JavaScript is supported by all major browsers, like Netscape and Internet Explorer


Download ppt "What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI."

Similar presentations


Ads by Google