Презентация HTML documents and JavaScript онлайн

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML documents and JavaScript абсолютно бесплатно. Урок-презентация на эту тему содержит всего 66 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.

Презентации » Устройства и комплектующие » HTML documents and JavaScript

Просмотр ВСЕЙ презентации! ЖМИТЕ

Оцените презентацию от 1 до 5 баллов!

Смотреть онлайн
Скачать

Тип файла:

ppt / pptx (powerpoint)
Всего слайдов:

66 слайдов
Для класса:

1,2,3,4,5,6,7,8,9,10,11
Размер файла:

929.50 kB
Просмотров:

66
Скачиваний:

0
Автор:

неизвестен

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

№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>

№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" >  </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 слайд