(DOM) is a platform and language- neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document .”.[r]
Trang 22
Trang 41. Guidelines of Interface Design
• Principles of Screen Design
• Interface Design Goals
• Interaction Styles
2. Introduction to JavaScript.
• Embedding JavaScript with HTML
• JavaScript conventions
• Datatypes and Operations in Java Script.
3. Dialog boxes in JavaScript
4. HTML DOM (Document Object Model)
4
Trang 55. Controlling the background dynamically
6. Working with images
7. Date Object
8. History Object
9. Navigator Object
10. Screen Object
11. Form Object
12. Introduction to jQuery
13. XML
14. PHP (Part 1)
PHP (Part 2)
5
Trang 616. Passing data between Pages.
17. Validating User Input
18. Introduction to ASP.NET
19. Database connectivity, data insertion and
Data Retrieval.
20. Web Services and Intro to Web Hosting
21. SEO Techniques
6
Trang 7• “ The user interface is the most important part of any computer system ” (Galitz, 2002, p 1)
– Higher task completion rates
– More efficient task completion rates
– Reduced training costs
– Improved customer service
Trang 8• Interface Design Process
– Guidelines for this process
– Principles of User Interface Design
– Choice Of Interaction Style
– Choice of Interface types
– Types of Interfaces
Based Applications.
Interface
8
Trang 9• Reduce visual work
• Reduce intellectual work
• Reduce memory work
• Reduce motor work
• Minimize or eliminate any burdens or
obstructions imposed by technology
Trang 1010
Trang 11• Elements of Visual Design.
– Principles
– Elements
• Font
– Six Typographic Terms – Font Size
– Types of Fonts – Proportional Vs Fixed width Fonts – Case of Text
• Layout
• Color
– Guidelines for Color Use
11
Trang 12• What is JavaScript?
– JavaScript is a client-side scripting language
– JavaScript was designed to add
interactivity to HTML pages
• Common Uses of JavaScript
– Cookie, Validating Data, Event Handling etc.
• Embedding JavaScript in HTML
– Internal: <Script> tag
– External: separate file and include this in HTML code.
12
Trang 13• JavaScript Conventions
– Case Sensitivity, Comments, Using Quotes etc.
• Variables in JavaScript
– Numbers, Strings, Boolean, null values
• JavaScript Operators
– Assignment Operator: =
– Arithmetic Operators: +, - , *, /, %, ++,
– Logical Operators: &&, ||, !
– Comparison Operators: ==, ===, !=, !==, <,
>, <=
13
Trang 14• I/O in JavaScript
– Write(); and Prompt();
• Functions in JavaScript
– User defined and Pre-defined Functions.
• Conditional Statements and Loops.
• JavaScript Output
– Using innerHTML.
– using document.write().
14
Trang 15• JavaScript provides the ability to
pickup user input or display small amounts of text to the user by using
dialog boxes.
• JavaScript has three kind of popup boxes:
– Alert box
• An alert dialog box is mostly used to give a
– Prompt box
– Confirm box
15
Trang 16• " The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style
of a document ”
into 3 different parts:
– Core DOM - standard model for all
document types
– XML DOM - standard model for XML
documents
– HTML DOM - standard model for HTML
documents
16
Trang 17Forms[
]
Array of
forms
links[]
Array of links
Images[]
Array of images
anchors[
]
Array of anchors
Trang 18• Finding HTML Elements
There are a couple of ways to do this:
– Finding HTML elements by id
– Finding HTML elements by tag name
– Finding HTML elements by class name
– Finding HTML elements by CSS selectors
– Finding HTML elements by HTML object
Trang 19• The body tag has the following attributes
– Bgcolor, Background, Text
following methods:
document.body.bgColor
following methods:
document.body.style.color
• Other Properties are:
– background-color
– background-image
– background-repeat
background-attachment
19
Trang 20• JavaScript has a built-in object called
Image
objects that represent images created using the <img> element
• Properties: name, border, height, width, hspace, vspace, src
– var objname= new image()
20