Embed Size (px)
Citation preview
Overview of Formand Javascript fundamentals
Brief matching exercise
1. This is the software that allows a user to access and view HTML documents2. The name describes the link to another web page3. This is the address of a resource on the Internet4. <ul> tag is used to create this 5. The basic structure of an HTML document includes this6. <ol> tag is used to create this7. computer that manages and shares web based applications accessible anytime from any computer connected to the Internet
a. Anchor b. Tagc. URL d. Unorder liste. Order list f. Web serverg. Web browser
Creating a form
Creating a form
<form method="post" action="http://www.cookwood.com//cgi-bin/display_results.pl">
<hr />Please share any suggestions or comments with us:
<textarea name="comments" rows="3" cols="65" wrap="wrap"> Comments? </textarea>
<hr />
<input type="submit" value="Order Bed" name="submit" /><input type="reset" value="Start Over" name="startover" /></form>
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 email form
<form method="post" enctype="text/plain" action="mailto:[email protected]">
<hr />
Please share any suggestions or comments with us:
<textarea name="comments" rows="3" cols="65" wrap="wrap"> Comments? </textarea>
<hr />
<input type="submit" value="Order Bed" name="submit" /><input type="reset" value="Start Over" name="startover" /></form>
Creating GUI component
• Textbox:<input type=“text” name=“name” size =“20” />
• Radio button<input type=“radio” name=“size”
value=“K” /> King <input type=“radio” name=“size”
value=“Q” /> Queen
Creating GUI component
• Creating checkboxes<input type=“checkbox” name=“extras”
value=“foot” /> Foodboard<input type=“checkbox” name=“extras”
value=“drawers” /> Drawers
Creating GUI component
• Creating selection box:
Creating GUI component
<FORM action="http://somesite.com/prog/component-select" method="post"> <P> <SELECT size="4" name="component-select"> <OPTION selected value="Component_1_a">Component_1</OPTION> <OPTION>Component_2</OPTION> <OPTION>Component_3</OPTION> …… </SELECT> <INPUT type="submit" name =“submitButton” value="Send"><INPUT type="reset“ name =“resetButton”> </P></FORM>
Adding hidden field to a form
• <input type=“hidden” name=“name” value=“value” />
• 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> <head>
<title> HTML form /title>
</head><body><!–- Please insert your HTML code here -->
</body> </html>
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 tableExample:
http://www.dannyg.com/examples/dyntable/index.html
• EC ApplicationsExample: Decision maker helper
What Javascript is Used for
• Development of GUIExample: simple calculator
more colorful calculator• Client-side content filtersExample:
Content-filtering
Where to put JavaScript ?
• Internally: Embedded inside HTML head tags, body tag:
<script language=“Javascript” type=“text/javascript”> document.writeln(“<H1> Hello World </H1>”);
</script>• Externally: save in a separate file and link by
src= <file_ name> in the script tag.<script language=“Javascript” src=“HelloWorld.js”> </script>
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 <head> section of the HTML document
• Scripts can also be located in the <body> section of the HTML document
• The scripts which might be called by later code should be located in the <head> 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 Table
• Variables can be evaluated using different operators
Declaring a Variable
• Syntax:var <data type> <variable name>;
Orvar <data type> <variable name>=<value>;
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 Table
