HTML documents and JavaScript презентация
Содержание
- 2. Overview Some basic HTML And principles and issues W3C Standards that
- 3. Readings
- 4. HTML Background Many “markup” languages in the past SGML: Standard Generalized
- 5. Principles Distinguish structure from presentation Presentation based on structure Presentation may
- 7. Tags and Elements Example of an element: <name attr1=“attrval”>content</name> Begin and
- 8. Basic HTML Structure Comments: <!-- … --> Example: <html>
- 9. Larger Example <html> <head> <title>An Example</title> </head> <body> <h3><hr>An Example</h3> <p
- 10. Displays As…
- 11. Basic Tags Text display: <em>, <strong>, <em> Structure: <h1>, <h2>, <h3>
- 12. Basic Tags (2) Links: <a href=“…”>…</a> Images: <img src=“…”> an empty
- 13. More HTML Learn on your own You may never code in
- 14. Question: You’re writing software to process an HTML page A web-browser
- 15. Discuss and give me details
- 16. Document Object Model (DOM) An model for describing HTML documents (and
- 17. DOM You get anything you want from… More info:
- 18. W3C Standards XML, XHTML CSS, XSL XSLT DOM ECMAScript etc
- 19. JavaScript An example of a “scripting” langauge that is embedded in
- 20. History JavaScript created by Netscape JScript created by Microsoft IE and
- 21. General Format <!doctype ...> <html> <Head> <Title> Name of web
- 22. Characteristics Case sensitive Object oriented Produces an HTML document Dynamically typed
- 23. Characteristics Division with / is not integer division Modulus (%) is
- 24. Characteristics " and ' can be used in pairs Scope rules
- 25. JavaScript Topics code placement document.writeln document tags window.alert user input/output parseInt
- 26. JavaScript Topics functions random numbers rolling dice form input form output
- 27. JavaScript’s Uses Include: “Dynamic” web-pages What’s DHTML? (in a second) Image
- 28. What’s DHTML? Purpose: make dynamic / interactive web-pages on the client
- 29. Other References CS453 Virtual Lab exercises The Web Wizard’s Guide To
- 30. Browser Compatability Use of: <script type=”text/javascript" language=”javascript" > <!-- // ends
- 31. Organization of JavaScript Create functions (non-OO style) Define in header Or
- 32. JavaScript Programming by example
- 33. document.writeln
- 34. document.write
- 35. window.alert
- 36. User input/output
- 37. Functions
- 38. Random Numbers
- 39. Roll the Die
- 40. Rules of Craps First roll: 7 or 11 is a win
- 41. Craps
- 42. Craps
- 43. Craps
- 44. Craps
- 45. Craps
- 46. Poker Hand
- 47. Poker Hand
- 48. Poker Hand
- 49. Character Processing
- 50. Dates and Times
- 51. Dates and Times
- 52. Radio buttons Assure that at least one radio button is clicked
- 53. Checkboxes Respond to selections made with checkboxes
- 54. Textboxes Detecting an empty textbox
- 55. Self-grading Tests Collecting and evaluating answers to questions
- 56. Character String Processing Validate an email address
- 57. Cookies Write a cookie on the client's device
- 58. Events JavaScript can execute a statement (typically, call a function) when
- 59. Events onsubmit - call when submit button is clicked onclick -
- 60. Mouse Events Illustrate onmouseover and onmouseout
- 61. Handling Time Create a simple JavaScript clock
- 62. Controlling Time Turn a clock on and off and format the
- 63. Handling Images Create a slide show
- 64. Generate Real-Time Data Simulate monitoring real-time information from a device
- 65. Continuous Update Gather data synchronously using the clock as the event
- 66. End of Examples
- 67. Скачать презентацию
Слайды и текст этой презентации
Слайд 1
Описание слайда:
HTML Documents and JavaScript
Tom Horton
Alfred C. Weaver
CS453 Electronic Commerce
Слайд 2
Описание слайда:
Overview
Some basic HTML
And principles and issues
W3C Standards that are relevant
DOM, XML, XHTML, ECMAScript
JavaScript introduction
Your tasks:
HTML, JavaScript exercises in VirtualLabs
Homework 2 on JavaScript
Слайд 3
Описание слайда:
Readings
Слайд 4
Описание слайда:
HTML Background
Many “markup” languages in the past
SGML: Standard Generalized Markup Language
HTML (Hypertext Markup Language) based on SGML
XML (eXtensible Markup Language) “replaces” SGML
XHTML is replacing HTML
Слайд 5
Описание слайда:
Principles
Distinguish structure from presentation
Presentation based on structure
Presentation may vary, perhaps based on display characteristics, user-preference, etc.
People like to ignore this idea
E.g. use <B> vs. <EM>
<font> tag?
XML and CSS or XSL
Слайд 6
Описание слайда:
Слайд 7
Описание слайда:
Tags and Elements
Example of an element:
<name attr1=“attrval”>content</name>
Begin and end tags set off a section of a document
Has a semantic property by tag-name
Modified by attributes
“content” can contain other elements
Elements nest, don’t “overlap”
Empty-elements: no end tag
<br /> <img … />
Note space before />
Слайд 8
Описание слайда:
Basic HTML Structure
Comments:
<!-- … -->
Example:
<html>
<head>
…
</head>
<body>
….
</body>
</html>
Слайд 9
Описание слайда:
Larger Example
<html>
<head>
<title>An Example</title>
</head>
<body>
<h3><hr>An Example</h3>
<p align="left">
<font face="Comic Sans MS" size="4"><b>
Hello World!</b></font>
</p>
<p align="right">
<font size="5"><u>I am 21.</u></font>
</p>
<!-- see next column -->
Слайд 10
Описание слайда:
Displays As…
Слайд 11
Описание слайда:
Basic Tags
Text display:
<em>, <strong>, <em>
Structure:
<h1>, <h2>, <h3>
<p>
<ul>, <ol>, <blockquote>
Attributes:
Align, text, bgcolor, etc.
Слайд 12
Описание слайда:
Basic Tags (2)
Links:
<a href=“…”>…</a>
Images:
<img src=“…”> an empty tag
Tables
Use an editor!
Forms: later
Слайд 13
Описание слайда:
More HTML
Learn on your own
You may never code in “raw” HTML
You may need to tweak HTML files created by a tool
You will need to understand HTML to code in JavaScript etc.
You will need to understand HTML to know limitations on how docs on the web can be structured
Слайд 14
Описание слайда:
Question:
You’re writing software to process an HTML page
A web-browser engine, for example
What data structure would best represent an HTML document?
Why?
Слайд 15
Описание слайда:
Discuss and give me details
Слайд 16
Описание слайда:
Document Object Model (DOM)
An model for describing HTML documents (and XML documents)
A standard (ok, standards)
Independent of browser, language
(ok, mostly)
A common set of properties/methods to access everything in a web document
APIs in JavaScript, for Java, etc.
Слайд 17
Описание слайда:
DOM
You get
anything you
want from…
More info: http://en.wikipedia.org/wiki/Document_Object_Model
Слайд 18
Описание слайда:
W3C Standards
XML, XHTML
CSS, XSL
XSLT
DOM
ECMAScript
etc
Слайд 19
Описание слайда:
JavaScript
An example of a “scripting” langauge that is embedded in HTML documents
The browser’s display engine must distinguish from HTML and Script statements
Others like this:
PHP (later in the course)
Слайд 20
Описание слайда:
History
JavaScript created by Netscape
JScript created by Microsoft
IE and Netscape renderings are slightly different
Standardized by European Computer Manufacturers Association (ECMA)
http://www.ecma-international. org/publications /standards/Ecma-262.htm
Слайд 21
Описание слайда:
General Format
<!doctype ...>
<html>
<Head>
<Title> Name of web page </title>
<script type="text/javascript">
...script goes here
</script>
</head
<body>
...page body here: text, forms, tables
...more JavaScript if needed
...onload, onclick, etc. commands here
</body>
</html>
Слайд 22
Описание слайда:
Characteristics
Case sensitive
Object oriented
Produces an HTML document
Dynamically typed
Standard operator precedence
Overloaded operators
Reserved words
Слайд 23
Описание слайда:
Characteristics
Division with / is not integer division
Modulus (%) is not an integer operator
5 / 2 yields 2.5
5.1 / 2.1 yields 2.4285714285714284
5 % 2 yields 1
5.1 % 2.1 yields 0.8999999999999995
Слайд 24
Описание слайда:
Characteristics
" and ' can be used in pairs
Scope rules for variables
Strings are very common data types
Rich set of methods available
Arrays have dynamic length
Array elements have dynamic type
Arrays are passed by reference
Array elements are passed by value
Слайд 25
Описание слайда:
JavaScript Topics
code placement
document.writeln
document tags
window.alert
user input/output
parseInt and parseFloat
arithmetic
arithmetic comparisons
for loops
Слайд 26
Описание слайда:
JavaScript Topics
functions
random numbers
rolling dice
form input
form output
submit buttons
games
Слайд 27
Описание слайда:
JavaScript’s Uses Include:
“Dynamic” web-pages
What’s DHTML? (in a second)
Image manipulation
Swapping, rollovers, slide shows, etc.
Date, time stuff (e.g. clocks, calendars)
HTML forms processing
Verifying input; writing output to fields
Cookies
Слайд 28
Описание слайда:
What’s DHTML?
Purpose: make dynamic / interactive web-pages on the client side
Use of a collection of technologies together to do this, including
Markup language (HTML, XML, etc.)
Scripting language (JavaScript, etc.)
Presentation language (CSS etc.)
Слайд 29
Описание слайда:
Other References
CS453 Virtual Lab exercises
The Web Wizard’s Guide To JavaScript, Steven Estrella, Addison-Wesley
JavaScript for the World Wide Web, Gesing and Schneider, Peachpit Press
http://www.w3schools.com/js/
www.javascript.com
E-books in UVa’s Safari On-line Books:
http://proquest.safaribooksonline.com/search
Слайд 30
Описание слайда:
Browser Compatability
Use of:
<script type=”text/javascript" language=”javascript" >
<!--
// ends script hiding -->
</script>
“language=“ for pre IE5 and NS6
Comment for very old browsers (e.g. IE2)
BTW, comments in HTML vs. in JavaScript
Слайд 31
Описание слайда:
Organization of JavaScript
Create functions (non-OO style)
Define in header
Or load a .js file in header:
<script type="text/javascript" language="javascript" src="mylib.js">
Functions called in <BODY>
Often in response to events, e.g.
<input type="button"… onclick="myFunc(…);">
Global variables
Слайд 32
Описание слайда:
JavaScript
Programming by example
Слайд 33
Описание слайда:
document.writeln
Слайд 34
Описание слайда:
document.write
Слайд 35
Описание слайда:
window.alert
Слайд 36
Описание слайда:
User input/output
Слайд 37
Описание слайда:
Functions
Слайд 38
Описание слайда:
Random Numbers
Слайд 39
Описание слайда:
Roll the Die
Слайд 40
Описание слайда:
Rules of Craps
First roll:
7 or 11 is a win
2, 3, or 12 is a lose
otherwise, roll becomes your point
Subsequent rolls:
rolling your point is a win
7 or 11 is a lose
otherwise continue to roll
Слайд 41
Описание слайда:
Craps
Слайд 42
Описание слайда:
Craps
Слайд 43
Описание слайда:
Craps
Слайд 44
Описание слайда:
Craps
Слайд 45
Описание слайда:
Craps
Слайд 46
Описание слайда:
Poker Hand
Слайд 47
Описание слайда:
Poker Hand
Слайд 48
Описание слайда:
Poker Hand
Слайд 49
Описание слайда:
Character Processing
Слайд 50
Описание слайда:
Dates and Times
Слайд 51
Описание слайда:
Dates and Times
Слайд 52
Описание слайда:
Radio buttons
Assure that at least one radio button is clicked before taking action
Слайд 53
Описание слайда:
Checkboxes
Respond to selections made with checkboxes
Слайд 54
Описание слайда:
Textboxes
Detecting an empty textbox
Слайд 55
Описание слайда:
Self-grading Tests
Collecting and evaluating answers to questions
Слайд 56
Описание слайда:
Character String Processing
Validate an email address
Слайд 57
Описание слайда:
Cookies
Write a cookie on the client's device
Слайд 58
Описание слайда:
Events
JavaScript can execute a statement (typically, call a function) when an event occurs
<… oneventname="javascript stmt;">
<BODY … ONLOAD="func();">
<INPUT TYPE="submit" … ONSUBMIT="f();">
Слайд 59
Описание слайда:
Events
onsubmit - call when submit button is clicked
onclick - call when this button is clicked
onreset - call when the reset button is clicked
onload - call after page loads
onmouseover - call when mouse pointer enters image area
onmouseout - call when mouse pointer leaves image area
onfocus - call when control receives focus
onblur - call when a control loses focus
onchange - call when a control loses focus and the value of its contents has changed
many more
Слайд 60
Описание слайда:
Mouse Events
Illustrate onmouseover and onmouseout
Слайд 61
Описание слайда:
Handling Time
Create a simple JavaScript clock
Слайд 62
Описание слайда:
Controlling Time
Turn a clock on and off and format the time string
Слайд 63
Описание слайда:
Handling Images
Create a slide show
Слайд 64
Описание слайда:
Generate Real-Time Data
Simulate monitoring real-time information from a device
Слайд 65
Описание слайда:
Continuous Update
Gather data synchronously using the clock as the event generator
Слайд 66
Описание слайда:
End of Examples
Скачать презентацию на тему HTML documents and JavaScript можно ниже:
