Overview of Form and Javascript fundamentals

1
Overview of Formand 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. ltulgt
tag is used to create this 5. The basic
structure of an HTML document includes this 6.
ltolgt 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. Anchor b. Tag c. URL d. Unorder list e.
Order list f. Web server g. Web browser
3
Creating a form
4
Creating a form

• ltform method"post" action"http//www.cookwood.co
  m//cgi-bin/display_results.pl"gt
• lthr /gt
• Please share any suggestions or comments with us
• lttextarea name"comments" rows"3" cols"65"
  wrap"wrap"gt Comments? lt/textareagt
• lthr /gt
• ltinput type"submit" value"Order Bed"
  name"submit" /gt
• ltinput type"reset" value"Start Over"
  name"startover" /gt
• lt/formgt

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

• ltform method"post" enctype"text/plain"
  action"mailtoxyz_at_yahoo.com"gt
• lthr /gt
• Please share any suggestions or comments with us
• lttextarea name"comments" rows"3" cols"65"
  wrap"wrap"gt Comments? lt/textareagt
• lthr /gt
• ltinput type"submit" value"Order Bed"
  name"submit" /gt
• ltinput type"reset" value"Start Over"
  name"startover" /gt
• lt/formgt

7
Creating GUI component

• Textbox
• ltinput typetext namename size 20 /gt
• Radio button
• ltinput typeradio namesize valueK /gt King
  
• ltinput typeradio namesize valueQ /gt Queen

8
Creating GUI component

• Creating checkboxes
• ltinput typecheckbox nameextras valuefoot
  /gt Foodboard
• ltinput typecheckbox nameextras
  valuedrawers /gt Drawers

9
Creating GUI component

• Creating selection box

10
Creating GUI component
ltFORM action"http//somesite.com/prog/component-s
elect" method"post"gt ltPgt ltSELECT size"4"
name"component-select"gt ltOPTION selected
value"Component_1_a"gtComponent_1lt/OPTIONgt
ltOPTIONgtComponent_2lt/OPTIONgt
ltOPTIONgtComponent_3lt/OPTIONgt
lt/SELECTgt ltINPUT type"submit" name
submitButton value"Send"gtltINPUT type"reset
name resetButtongt lt/Pgt lt/FORMgt
11
Adding hidden field to a form

• ltinput typehidden namename valuevalue /gt
  
• Why do we need hidden fields?
• To keep the status of the program
• To transfer data between different forms

12
Practice

• Open Textpad and cut paste this code
• lthtmlgt ltheadgt
• lttitlegt HTML form /titlegt
• lt/headgt
• ltbodygt
• lt!- Please insert your HTML code here --gt
• lt/bodygt
• lt/htmlgt
• 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/dyntable/
  index.html
• EC Applications
• Example Decision maker helper

18
What Javascript is Used for

• Development of GUI
• Example simple calculator
• more colorful calculator
• Client-side content filters
• Example
• Content-filtering

19
Where to put JavaScript ?

• Internally Embedded inside HTML head tags, body
  tag
• ltscript languageJavascript typetext/javascrip
  tgt document.writeln(ltH1gt Hello World lt/H1gt)
• lt/scriptgt
• Externally save in a separate file and link by
  src ltfile_ namegt in the script tag.
• ltscript languageJavascript srcHelloWorld.js
  gt
• lt/scriptgt

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 ltheadgt section of
  the HTML document
• Scripts can also be located in the ltbodygt section
  of the HTML document
• The scripts which might be called by later code
  should be located in the ltheadgt 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 commentscan 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 Table
• Variables can be evaluated using different
  operators

30
Declaring a Variable

• Syntax
• var ltdata typegt ltvariable namegt
• Or
• var ltdata typegt ltvariable namegtltvaluegt

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