Downloaded 34 times
More Related Content
Similar to javascript-basics.ppt
javascript-basics.ppt
- 1. CIS 233 JavaScript Basics Whatis JavaScript? JavaScript is a scripting language designed for Web pages by Netscape.
- 2. CIS 233 • JavaScript≠ Java • Developed by Netscape • Purpose: to Create Dynamic websites • Widely Used
- 3. CIS 233 Why UseJavaScript? • JavaScript enhances Web pages with dynamic and interactive features. • JavaScript runs in client software. • JavaScript 1.3 works with version 4.0 browsers.
- 4. CIS 233 What CanJavaScript Do? • Common JavaScript tasks can replace server- side scripting. • JavaScript enables shopping carts, form validation, calculations, special graphic and text effects, image swapping, image mapping, clocks, and more.
- 5. CIS 233 • Client-sideprogramming • recall: HTML is good for developing static pages • can specify text/image layout, presentation, links, … • Web page looks the same each time it is accessed • in order to develop interactive/reactive pages, must integrate programming • client-side programming
- 6. CIS 233 • programs are written in a separate programming language • e.g., JavaScript, JScript, VBScript • programs are embedded in the HTML of a Web page, with tags to identify the • program component • e.g., <script type="text/javascript"> … </script> • the browser executes the program as it loads the page, integrating the dynamic • output of the program with the static content of HTML
- 7. CIS 233 JavaScript Syntax. •Unlike HTML, JavaScript is case sensitive. • Dot Syntax is used to combine terms. • e.g., document.write("Hello World") • Certain characters and terms are reserved. • JavaScript is simple text (ASCII).
- 8. CIS 233 JavaScript Terminology. •JavaScript uses specialized terminology. • Understanding JavaScript terms is fundamental to understanding the script. • Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators.
- 9. CIS 233 Objects • Objectsrefers to windows, documents, images, tables, forms, buttons or links, etc. • Objects should be named. • Objects have properties that act as modifiers.
- 10. CIS 233 Properties • Propertiesare object attributes. • Object properties are defined by using the object's name, a period, and the property name. • e.g., background color is expressed by: document.bgcolor . • document is the object. • bgcolor is the property.
- 11. CIS 233 Methods • Methodsare actions applied to particular objects. Methods are what objects can do. • e.g., document.write(”Hello World") • document is the object. • write is the method.
- 12. CIS 233 Events • Eventsassociate an object with an action. • e.g., the OnMouseover event handler action can change an image. • e.g., the onSubmit event handler sends a form. • User actions trigger events.
- 13. CIS 233 Functions • Functionsare named statements that performs tasks. • e.g., function doWhatever () {statement here} • The curly braces contain the statements of the function. • JavaScript has built-in functions, and you can write your own.
- 14. CIS 233 Function <script langauge="JavaScript"> <!--hide me function announceTime( ) { //get the date, the hour, minutes, and seconds var the_date = new Date(); var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds(); //put together the string and alert with it var the_time = the_hour + ":" + the_minute + ":" + the_second; alert("The time is now: " + the_time); } // show me --> </script> </head> <body> ... </body> </html>
- 15. CIS 233 Values • Valuesare bits of information. • Values types and some examples include: • Number: 1, 2, 3, etc. • String: characters enclosed in quotes. • Boolean: true or false. • Object: image, form • Function: validate, doWhatever
- 16. CIS 233 Variables • Variablescontain values and use the equal sign to specify their value. • Variables are created by declaration using the var command with or without an initial value state. • e.g. var month; • e.g. var month = April;
- 17. CIS 233 Variables <script language=“JavaScript”> <!--definition of variables var num_car= 25; var passenger_per_car= 3; //calculation of total number of people var total_passenger= num_car * passenger_per_car Alert(total_passenger); // end of script --> </script> www.artsci.wustl.edu/~hmliaw/Test-Variable.htm
- 18. CIS 233 Expressions • Expressionsare commands that assign values to variables. • Expressions always use an assignment operator, such as the equals sign. • e.g., var month = May; is an expression. • Expressions end with a semicolon.
- 19. CIS 233 Operators • Operatorsare used to handle variables. • Types of operators with examples: • Arithmetic operators, such as plus. • Comparisons operators, such as equals. • Logical operators, such as and. • Control operators, such as if. • Assignment and String operators.
- 20. CIS 233 Methods ofUsing JavaScript. 1. JavaScripts can reside in a separate page. 2. JavaScript can be embedded in HTML documents -- in the <head>, in the <body>, or in both. 3. JavaScript object attributes can be placed in HTML element tags. e.g., <body onLoad="alert('WELCOME')">
- 21. CIS 233 <html> <head> <title>JavaScript Page</title> <scriptLANGUAGE=“JavaScript”> <!-- actual JavaScript follows below alert (“Welcome to the Test Site!”); // ending the script --> </script> </head>
- 22. CIS 233 1. UsingSeparate JavaScript Files. • Linking can be advantageous if many pages use the same script. • Use the source element to link to the script file. <script src="myjavascript.js” language="JavaScript1.2” type="text/javascript"> </script>
- 23. CIS 233 2. EmbeddingJavaScript in HTML. • When specifying a script only the tags <script> and </script> are essential, but complete specification is recommended: <script language="javascript” type="text/javascript"> <!-- Begin hiding window.location=”index.html" // End hiding script--> </script>
- 24. CIS 233 Using CommentTags • HTML comment tags should bracket any script. • The <!-- script here --> tags hide scripts in HTML and prevent scripts from displaying in browsers that do not interpret JavaScript. • Double slashes // are the signal characters for a JavaScript single-line comment.
- 25. CIS 233 3. UsingJavaScript in HTML Tags. • Event handlers like onMouseover are a perfect example of an easy to add tag script. <a href=”index.html” onMouseover="document.logo.src='js2.gif'" onMouseout="document.logo.src='js.gif'"> <img src="js.gif" name="logo"> </a>
- 26. CIS 233 Creating anAlert Message • The following script in the <body> tag uses the onLoad event to display an Alert window • The message is specified within parenthesis. <body onLoad="alert('WELCOME. Enjoy your visit. Your feedback can improve cyberspace. Please let me know if you detect any problems. Thank you.')">
Editor's Notes
- #22 Be sure you can explain this sufficiently!