Overview of Form and Javascript fundamentals

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

Creating a form

Please share any suggestions or comments with us: Comments?

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

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

Creating GUI component Textbox: Radio button King Queen

Creating GUI component Creating checkboxes Foodboard Drawers

Creating GUI component Creating selection box:

Creating GUI component Component_1 Component_2 Component_3 ……

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

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

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

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

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

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

What Javascript is Used for Dynamic table Example: le/index.html le/index.html EC Applications Example: Decision maker helperDecision maker helper

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

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.

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

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

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

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

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?

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

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

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

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

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

Declaring a Variable Syntax: var ; Or var = ;

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 ????

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