Đang tải... (xem toàn văn)
(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]
(1)(2)(3)(4)1. 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
(5)5. 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) 15. PHP (Part 2)
(6)16. 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
(7)• “The user interface is the most
important part of any computer system.” (Galitz, 2002, p 1)
• Benefits of Good Design
– Higher task completion rates
– More efficient task completion rates – Reduced training costs
– Improved customer service
(8)• Interface Design Process
– Guidelines for this process
– Principles of User Interface Design – Choice Of Interaction Style
– Choice of Interface types – Types of Interfaces
• Interface Design Conventions for Web
Based Applications.
• Difference between Good and Bad
Interface.
(9)• Reduce visual work
• Reduce intellectual work • Reduce memory work
• Reduce motor work
• Minimize or eliminate any burdens or
obstructions imposed by technology
(10)(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
• Labels
(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.
(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: ==, ===, !=, !==, <,
>, <=
(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().
(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
warning message to the users
– Prompt box
• A prompt box is often used if you want the user
to input a value before entering a page
– Confirm box
• A confirm box is often used if you want the
user to verify or accept something
(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.”
• The W3C DOM standard is separated
into different parts:
– Core DOM - standard model for all
document types
– XML DOM - standard model for XML
documents
– HTML DOM - standard model for HTML
documents
(17)17
Window
Navigator Document History Location
(18)• Finding HTML Elements
• To so, you have to find the elements first
There are a couple of ways to 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
(19)• The body tag has the following attributes – Bgcolor, Background, Text
• We can access the bgcolor by
following methods:
document.body.bgColor
• We can access the body text by
following methods:
document.body.style.color
• Other Properties are:
– background-color – background-image – background-repeat
– background-attachment
(20)• JavaScript has a built-in object called
Image
• The Image object allows you to create
objects that represent images created using the <img> element
• Properties: name, border, height, width,
hspace, vspace, src
• An image object can be created as
– var objname= new image()
• You can access an <img> element by
using getElementById():