Javascript
- 1. Introduction to Website Design & Development
- 2. What is JavaScript? “JavaScript is a programming language designed for Web pages” Commonly refereed to as Scripting language which means lightweight programming language. What is a programming language? “It is a vocabulary and set of rules for instructing a computer or computing device to perform specific tasks” Examples include: Python, Java, C#, C++, Perl….
- 3. Why Use JavaScript? • JavaScript enhances Web pages with dynamic and interactive features. • JavaScript runs in client side(Browsers) software . • JavaScript 1.3 works with version 4.0 browsers.
- 4. What Can JavaScript Do? • Common JavaScript tasks can replace server-side scripting. • JavaScript enables shopping carts, form validation, calculations, special graphic and text effects, clocks, and more. • JavaScript can put dynamic text into an HTML page • JavaScript can be used to detect the visitor’s browser • JavaScript can be used to create cookies • Store and retrieve information on the visitor’s computer
- 5. 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).
- 6. JavaScript Terminology • JavaScript programming uses specialized terminology. • Understanding JavaScript terms is fundamental to understanding the script. • Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators.
- 7. Objects • Objects refers to windows, documents, images, tables, forms, buttons or links, etc. • Objects should be named. • Objects have properties that act as modifiers.
- 8. Properties • Properties are 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.
- 9. Methods • Methods are 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.
- 10. Events • Events associate 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.
- 11. Functions • Functions are 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.
- 12. Values • Values are 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
- 13. Variables • Variables contain 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 = August;
- 14. Expressions • Expressions are 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.
- 15. Operators • Operators are used to handle variables. • Types of operators with examples: • Arithmetic operators, such as +, - . • Comparisons operators, such as equals. • Logical operators, such as and. • Control operators, such as if. • Assignment and String operators.
- 16. Methods of Using 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')">
- 17. 1. Using Separate 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>
- 18. 2. Embedding JavaScript 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>
- 19. 3. Using JavaScript 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>
- 20. Creating an Alert 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.')">
- 21. Using Comment Tags • 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.
- 22. Questions?