HTML documents and JavaScript - презентация, доклад, проект скачать

Нажмите для полного просмотра!

HTML documents and JavaScript, слайд №10

HTML documents and JavaScript, слайд №11

HTML documents and JavaScript, слайд №12

HTML documents and JavaScript, слайд №13

HTML documents and JavaScript, слайд №14

HTML documents and JavaScript, слайд №15

HTML documents and JavaScript, слайд №16

HTML documents and JavaScript, слайд №17

HTML documents and JavaScript, слайд №18

HTML documents and JavaScript, слайд №19

HTML documents and JavaScript, слайд №20

HTML documents and JavaScript, слайд №21

HTML documents and JavaScript, слайд №22

HTML documents and JavaScript, слайд №23

HTML documents and JavaScript, слайд №24

HTML documents and JavaScript, слайд №25

HTML documents and JavaScript, слайд №26

HTML documents and JavaScript, слайд №27

HTML documents and JavaScript, слайд №28

HTML documents and JavaScript, слайд №29

HTML documents and JavaScript, слайд №30

HTML documents and JavaScript, слайд №31

HTML documents and JavaScript, слайд №32

HTML documents and JavaScript, слайд №33

HTML documents and JavaScript, слайд №34

HTML documents and JavaScript, слайд №35

HTML documents and JavaScript, слайд №36

HTML documents and JavaScript, слайд №37

HTML documents and JavaScript, слайд №38

HTML documents and JavaScript, слайд №39

HTML documents and JavaScript, слайд №40

HTML documents and JavaScript, слайд №41

HTML documents and JavaScript, слайд №42

HTML documents and JavaScript, слайд №43

HTML documents and JavaScript, слайд №44

HTML documents and JavaScript, слайд №45

HTML documents and JavaScript, слайд №46

HTML documents and JavaScript, слайд №47

HTML documents and JavaScript, слайд №48

HTML documents and JavaScript, слайд №49

HTML documents and JavaScript, слайд №50

HTML documents and JavaScript, слайд №51

HTML documents and JavaScript, слайд №52

HTML documents and JavaScript, слайд №53

HTML documents and JavaScript, слайд №54

HTML documents and JavaScript, слайд №55

HTML documents and JavaScript, слайд №56

HTML documents and JavaScript, слайд №57

HTML documents and JavaScript, слайд №58

HTML documents and JavaScript, слайд №59

HTML documents and JavaScript, слайд №60

HTML documents and JavaScript, слайд №61

HTML documents and JavaScript, слайд №62

HTML documents and JavaScript, слайд №63

HTML documents and JavaScript, слайд №64

HTML documents and JavaScript, слайд №65

HTML documents and JavaScript, слайд №66

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML documents and JavaScript. Доклад-сообщение содержит 66 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 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 vs. tag? XML and CSS or XSL

Слайд 6

Описание слайда:

Слайд 7

Описание слайда:

Tags and Elements Example of an element: content 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 Note space before />

Слайд 8

Описание слайда:

Basic HTML Structure Comments: Example: … ….

Слайд 9

Описание слайда:

Larger Example An Example An Example Hello World! I am 21.

Слайд 10

Описание слайда:

Displays As…

Слайд 11

Описание слайда:

Basic Tags Text display: , , Structure: , , , , Attributes: Align, text, bgcolor, etc.

Слайд 12

Описание слайда:

Basic Tags (2) Links: … Images: 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:

Слайд 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) org/publications /standards/Ecma-262.htm

Слайд 21

Описание слайда:

General Format Name of web page ...script goes here

Слайд 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 E-books in UVa’s Safari On-line Books:

Слайд 30

Описание слайда:

Browser Compatability Use of: “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: Functions called in Often in response to events, e.g. 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

Слайд 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