🗊Презентация HTML documents and JavaScript

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
HTML documents and JavaScript, слайд №1HTML documents and JavaScript, слайд №2HTML documents and JavaScript, слайд №3HTML documents and JavaScript, слайд №4HTML documents and JavaScript, слайд №5HTML documents and JavaScript, слайд №6HTML documents and JavaScript, слайд №7HTML documents and JavaScript, слайд №8HTML documents and JavaScript, слайд №9HTML documents and JavaScript, слайд №10HTML documents and JavaScript, слайд №11HTML documents and JavaScript, слайд №12HTML documents and JavaScript, слайд №13HTML documents and JavaScript, слайд №14HTML documents and JavaScript, слайд №15HTML documents and JavaScript, слайд №16HTML documents and JavaScript, слайд №17HTML documents and JavaScript, слайд №18HTML documents and JavaScript, слайд №19HTML documents and JavaScript, слайд №20HTML documents and JavaScript, слайд №21HTML documents and JavaScript, слайд №22HTML documents and JavaScript, слайд №23HTML documents and JavaScript, слайд №24HTML documents and JavaScript, слайд №25HTML documents and JavaScript, слайд №26HTML documents and JavaScript, слайд №27HTML documents and JavaScript, слайд №28HTML documents and JavaScript, слайд №29HTML documents and JavaScript, слайд №30HTML documents and JavaScript, слайд №31HTML documents and JavaScript, слайд №32HTML documents and JavaScript, слайд №33HTML documents and JavaScript, слайд №34HTML documents and JavaScript, слайд №35HTML documents and JavaScript, слайд №36HTML documents and JavaScript, слайд №37HTML documents and JavaScript, слайд №38HTML documents and JavaScript, слайд №39HTML documents and JavaScript, слайд №40HTML documents and JavaScript, слайд №41HTML documents and JavaScript, слайд №42HTML documents and JavaScript, слайд №43HTML documents and JavaScript, слайд №44HTML documents and JavaScript, слайд №45HTML documents and JavaScript, слайд №46HTML documents and JavaScript, слайд №47HTML documents and JavaScript, слайд №48HTML documents and JavaScript, слайд №49HTML documents and JavaScript, слайд №50HTML documents and JavaScript, слайд №51HTML documents and JavaScript, слайд №52HTML documents and JavaScript, слайд №53HTML documents and JavaScript, слайд №54HTML documents and JavaScript, слайд №55HTML documents and JavaScript, слайд №56HTML documents and JavaScript, слайд №57HTML documents and JavaScript, слайд №58HTML documents and JavaScript, слайд №59HTML documents and JavaScript, слайд №60HTML documents and JavaScript, слайд №61HTML documents and JavaScript, слайд №62HTML documents and JavaScript, слайд №63HTML documents and JavaScript, слайд №64HTML documents and JavaScript, слайд №65HTML documents and JavaScript, слайд №66
Скачать

Содержание ▲

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

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

Слайд 1


HTML Documents and JavaScript Tom Horton Alfred C. Weaver CS453 Electronic Commerce
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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


HTML documents and JavaScript, слайд №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 />
Описание слайда:
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>
Описание слайда:
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 -->
Описание слайда:
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…
Описание слайда:
Displays As…

Слайд 11


Basic Tags Text display: <em>, <strong>, <em> Structure: <h1>, <h2>, <h3> <p> <ul>, <ol>, <blockquote> Attributes: Align, text, bgcolor, etc.
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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?
Описание слайда:
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
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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)
Описание слайда:
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
Описание слайда:
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>
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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.)
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
JavaScript Programming by example

Слайд 33


document.writeln
Описание слайда:
document.writeln

Слайд 34


document.write
Описание слайда:
document.write

Слайд 35


window.alert
Описание слайда:
window.alert

Слайд 36


User input/output
Описание слайда:
User input/output

Слайд 37


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

Слайд 38


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

Слайд 39


Roll the Die
Описание слайда:
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
Описание слайда:
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
Описание слайда:
Craps

Слайд 42


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

Слайд 43


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

Слайд 44


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

Слайд 45


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

Слайд 46


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

Слайд 47


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

Слайд 48


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

Слайд 49


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

Слайд 50


Dates and Times
Описание слайда:
Dates and Times

Слайд 51


Dates and Times
Описание слайда:
Dates and Times

Слайд 52


Radio buttons Assure that at least one radio button is clicked before taking action
Описание слайда:
Radio buttons Assure that at least one radio button is clicked before taking action

Слайд 53


Checkboxes Respond to selections made with checkboxes
Описание слайда:
Checkboxes Respond to selections made with checkboxes

Слайд 54


Textboxes Detecting an empty textbox
Описание слайда:
Textboxes Detecting an empty textbox

Слайд 55


Self-grading Tests Collecting and evaluating answers to questions
Описание слайда:
Self-grading Tests Collecting and evaluating answers to questions

Слайд 56


Character String Processing Validate an email address
Описание слайда:
Character String Processing Validate an email address

Слайд 57


Cookies Write a cookie on the client's device
Описание слайда:
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();">
Описание слайда:
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
Описание слайда:
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
Описание слайда:
Mouse Events Illustrate onmouseover and onmouseout

Слайд 61


Handling Time Create a simple JavaScript clock
Описание слайда:
Handling Time Create a simple JavaScript clock

Слайд 62


Controlling Time Turn a clock on and off and format the time string
Описание слайда:
Controlling Time Turn a clock on and off and format the time string

Слайд 63


Handling Images Create a slide show
Описание слайда:
Handling Images Create a slide show

Слайд 64


Generate Real-Time Data Simulate monitoring real-time information from a device
Описание слайда:
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
Описание слайда:
Continuous Update Gather data synchronously using the clock as the event generator

Слайд 66


End of Examples
Описание слайда:
End of Examples

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию