CS计算机代考程序代写 jquery angularjs gui javascript Java COMP5347: Web Application Development HTML and Client-Side JavaScript

COMP5347: Web Application Development HTML and Client-Side JavaScript
Dr. Basem Suleiman
School of Computer Science
The University of Sydney
Page 1

COMMONWEALTH OF Copyright Regulations 1969 WARNING
This material has been reproduced and communicated to
you by or on behalf of the University of Sydney pursuant to Part VB of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Do not remove this notice.
The University of Sydney Page 2

Outline
– More HTML
– Table
• Elements
• Styling – Form
• Controls
– JavaScript
– Location and Basic Syntax
• Variables, Control Structure, Function, Object, Array
• More about functions, objects, variable scopes, passing
function as parameter
– WindowsandDOMobject
– Event model
The University of Sydney
COMP5347 Web Application Development
Page 3

HTML Table basic mark ups
– Tables can be used to display – Manytypesofcontent
• Calendars, financial data, etc – Any type of data
• Images, text, links etc
– A table in HTML is created using the

element
– A basic table contains rows

and cells

The University of Sydney
COMP5347 Web Application Development
Page 9

Tables – Layout
The University of Sydney Page 10

Styling Tables
– Most box model styling can be applied to


– Many table contains headings which is a special row to indicate what each cell is about:	The University of Sydney COMP5347 Web Application Development Page 4 HTML Table Examples The University of Sydney COMP5347 Web Application Development Page 5 Basic Table Example th The University of Sydney COMP5347 Web Application Development Page 6 – – Spanning Rows and Columns Simplest table is of a grid structure, with each row having the same number of cells It is possible to merge cells horizontally or vertically, e.g. having some cells covering a few rows or columns use the colspan or rowspan attributes The University of Sydney COMP5347 Web Application Development Page 7 Row Spaning Example The University of Sydney COMP5347 Web Application Development Page 8 Additional Table Elements

and other tags
The University of Sydney
COMP5347 Web Application Development
Page 11

Styling Tables
The University of Sydney Page 14

Styling Tables
The University of Sydney Page 15

Styling Tables
The University of Sydney Page 16

Styling Tables
The University of Sydney Page 17

Nifty Table Styling Tricks: hover effect and zebra-stripes
Pseudo class
The University of Sydney
COMP5347 Web Application Development
Page 19

Outline
– More HTML
– Table
• Elements
• Styling – Form
• Controls
– JavaScript
– Location and Basic Syntax
• Variables, Control Structure, Function, Object, Array
– WindowsandDOMobject
– Event model
The University of Sydney
COMP5347 Web Application Development
Page 20

HTML Forms
– Forms provide a way for users to interact with a web server
– Forms contain elements similar to desktop GUI – Plain text or password input
– Selection
– Radio and check boxes
– Buttons
The University of Sydney
COMP5347 Web Application Development
Page 21

Form Structures
• Form is main element to allow users enter information and get passed to the server application
The University of Sydney
COMP5347 Web Application Development
Page 22

How Forms Work?
The University of Sydney
COMP5347 Web Application Development
Page 23

Form-Related HTML Elements
Type
Description