1. Overview of Form and Javascript fundamentals

2. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2. The name describes the link to another web page 3. This is the address of a resource on the Internet 4. tag is used to create this 5. The basic structure of an HTML document includes this 6. tag is used to create this 7. computer that manages and shares web based applications accessible anytime from any computer connected to the Internet a. Anchorb. Tag c. URLd. Unorder list e. Order listf. Web server g. Web browser

3. Creating a form

4. Please share any suggestions or comments with us: Comments?

5. Creating a form The field with the NAME attribute equal to comments had a VALUE equal to Comments? This is my comments The field with the NAME attribute equal to submit had a VALUE equal to Order Bed

6. Creating an email form Please share any suggestions or comments with us: Comments?

7. Creating GUI component Textbox: Radio button King Queen

8. Creating GUI component Creating checkboxes Foodboard Drawers

9. Creating GUI component Creating selection box:

10. Creating GUI component Component_1 Component_2 Component_3 ……

11. Adding hidden field to a form Why do we need hidden fields? –To keep the status of the program –To transfer data between different forms

12. Practice 1.Open Textpad and cut & paste this code HTML form /title> And save it as form.html

13. Practice 2. Insert HTML and Java script code to : - set up a simple form, as shown below.

14. Javascript fundamentals Client side programming / scripting language Originally named LiveScript Javascript is NOT: –Java (it is objected-based instead of object oriented, javascript is interpreted instead of compiled) –HTML –Java applets

15. Javascript is Used at client-side (Used when offloading work from the server to the client) NOT a Server Side language such as Java Server Pages JSP Java Servlets

16. JavaScript JavaScript can be edited in text editors like other languages JavaScript can be immediately tested by loading into a WEB browser such as Netscape or Internet Explorer Syntax mistakes are not found until the page is loaded Differences in browser JavaScript interpreters can cause incompatibility problems

17. What Javascript is Used for Dynamic table Example: http://www.dannyg.com/examples/dyntab le/index.html http://www.dannyg.com/examples/dyntab le/index.html EC Applications Example: Decision maker helperDecision maker helper

18. What Javascript is Used for Development of GUI Example: simple calculatorsimple calculator more colorful calculator Client-side content filters Example: Content-filtering

19. Where to put JavaScript ? Internally: Embedded inside HTML head tags, body tag: document.writeln(“ Hello World ”); Externally: save in a separate file and link by src= in the script tag.

20. Lab 2 Question: From your observation, please describe the difference between step 2 and 3 in the lab

21. Elements of JavaScript Uses variables Uses looping constructs –For loops –While loops Uses Functions –Pre defined –User defined Uses well defined Document Object Model (DOM) Uses Event Handling to trigger code

22. Summary Benefits of JavaScript –Basic level of programmability for all client-side processing –Validation of data entered into a WEB based form –Dynamic HTML –Used in conjunction with Java Server Pages to manipulate database information –Reduction of client to server communications Each HTTP request/response protocol generates for network operations

23. Summary (continued) Disadvantages –Writing data back to the server directly –Java applets that execute method calls on remote server objects. JavaScript cannot do this process directly. –Poor security model Any user can access your JavaScript code via the View Source menu item Even external libraries are not very secure –Creating specialized programming architecture, such as a component model

24. Fundamentals of Javascript (continue) Question: Please describe one advantage (that you really like) and one disadvantage of Javascript (that concerns you the most) of Javascript?

25. Location of Javascript code Scripts can be located in the section of the HTML document Scripts can also be located in the section of the HTML document The scripts which might be called by later code should be located in the section so they will be available to run

26. Important points All statement lines should be delimited with a semi-colon Most statements exist on separate lines by normal conventions but can be combined Even though a line of code may run without a semi-colon, some browser interpreters may not execute the code properly

27. Comments Comments are a useful way of documenting your code –//single line comment –/*multiple lines of comments can be created with the pairs “/*” and “*/” */

28. Variables A variable is a data item whose value can change var myAge = 51; var firstTime = true; Types supported: –Numeric –String –Boolean –Null –Undefined

29. Using Variables and Data Types JavaScript does not use strict data type as many other languages As values are assigned to the variables they fall into one of several category types –Data Types TableData Types Table Variables can be evaluated using different operators

30. Declaring a Variable Syntax: var ; Or var = ;

31. Variable name Variable Names (also referred to as Identifiers) must begin with a letter or an underscore and cannot be a reserved word. Variables are case sensitive and may not contain a space. Example: Part_no ???? Part.no ????

32. Declaring a Variable Variables can be assigned literal data, operations on variables, and logical expressions –var myScore = 100; –var newScore = myScore + yourScore; –var highScore = (myScore > yourScore); Declaring a variable without giving it a value will cause an “undefined” value to be assigned –var partNumber –partNumber would have a value of “undefined” Variables cannot be named using reserved words –Reserved Words TableReserved Words Table