Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
33 слайда
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
377.10 kB
Просмотров:
61
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Module Accessing DOM with](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img0.jpg)
Содержание слайда: Module 7:
Accessing DOM with JavaScript
№2 слайд![Agenda Introducing DOM](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img1.jpg)
Содержание слайда: Agenda
Introducing DOM
Manipulating DOM with JavaScript
Cookies and Storages
Useful links
№3 слайд![Introducing DOM](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img2.jpg)
Содержание слайда: Introducing DOM
№4 слайд![What is quot DOM quot ? DOM](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img3.jpg)
Содержание слайда: What is "DOM"?
DOM – an acronym for Document Object Model.
It's an interface that provides browser to allow scripts on a webpage to dynamically access and update the content, structure and style of documents.
When browser prepares webpage to be shown to user, it constructs tree of objects from all elements of a page according to it's HTML structure
JavaScript code can access the tree and modify it, browser reacts on changes and updates HTML page shown to the user.
Changing HTML with JavaScript using DOM interface is also called as Dynamic HTML.
№5 слайд![DOM Tree](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img4.jpg)
Содержание слайда: DOM Tree
№6 слайд![What DOM Defines?](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img5.jpg)
Содержание слайда: What DOM Defines?
№7 слайд![What can do JavaScript with](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img6.jpg)
Содержание слайда: What can do JavaScript with DOM?
№8 слайд![Manipulating DOM with](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img7.jpg)
Содержание слайда: Manipulating DOM
with JavaScript
№9 слайд![Finding Elements](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img8.jpg)
Содержание слайда: Finding Elements
№10 слайд![Finding HTML Elements by id](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img9.jpg)
Содержание слайда: Finding HTML Elements by id
var t = document.getElementById('target');
Will find one element with id "target"
№11 слайд![Finding HTML Elements by Tag](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img10.jpg)
Содержание слайда: Finding HTML Elements by Tag Name
var p = document.getElementsByTagName('p');
Will find all paragraphs on a page
№12 слайд![Finding HTML Elements by](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img11.jpg)
Содержание слайда: Finding HTML Elements by Class Name
var p = document.getElementsByClassName('target');
Will find all elements with class 'target' on a page
№13 слайд![Changing HTML](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img12.jpg)
Содержание слайда: Changing HTML
№14 слайд![Changing HTML Content](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img13.jpg)
Содержание слайда: Changing HTML Content
document.getElementById(id).innerHTML = New value
Will replace inner content of an element
№15 слайд![Changing the Value of an](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img14.jpg)
Содержание слайда: Changing the Value of an Attribute
document.getElementById(id).attribute = New value
Will replace inner content of an element
№16 слайд![Changing HTML Style](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img15.jpg)
Содержание слайда: Changing HTML Style
document.getElementById(id).style.property = New value
Will replace inner content of an element
№17 слайд![Using Events A JavaScript can](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img16.jpg)
Содержание слайда: Using Events
A JavaScript can be executed when an event occurs, examples of HTML events:
When a user clicks the mouse
When a user strokes a key
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
№18 слайд![Sample onclick Event Handler](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img17.jpg)
Содержание слайда: Sample onclick() Event Handler
№19 слайд![Cookies and Storages](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img18.jpg)
Содержание слайда: Cookies and Storages
№20 слайд![What are Cookies? Cookies are](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img19.jpg)
Содержание слайда: What are Cookies?
Cookies are data, stored in small text files, on client computer.
There is a problem: when a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
Cookies were invented to solve the problem:
When a user visits a web page, his ID can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his ID
№21 слайд![Create a Cookie with](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img20.jpg)
Содержание слайда: Create a Cookie with JavaScript
JavaScript can create, read, and delete cookies with the document.cookie property.
A cookie can be created like this:
document.cookie = "ID=123456789";
To save the cookie between browser sessions, we may add expiry date:
document.cookie = "ID=123456789; expires=Wed, 01 Jul 2015 12:00:00 GMT";
By default, cookie belongs to the page that created it, path parameter allows to set what path the cookie belong to:
document.cookie = "ID=123456789; expires=Wed, 01 Jul 2015 12:00:00 GMT; path=/";
№22 слайд![Read a Cookie To read a](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img21.jpg)
Содержание слайда: Read a Cookie
To read a cookie:
var x = document.cookie;
This code will return all cookies in one string in name=value pairs
To find the value of one specified cookie, we must write a JavaScript function that searches for the cookie value in the cookie string.
№23 слайд![Changing and Deleting Cookie](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img22.jpg)
Содержание слайда: Changing and Deleting Cookie
Changing cookie is made same way as creating it:
document.cookie = "ID=123456789; expires=Wed, 01 Jul 2015 12:00:00 GMT; path=/";
To delete a cookie we have to set expires parameter to a passed date:
document.cookie = "ID=123456789; expires=Thu, 01 Jan 1970 00:00:00 GMT";
№24 слайд![Sample Function to Set a](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img23.jpg)
Содержание слайда: Sample Function to Set a Cookie
The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).
The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.
№25 слайд![Sample Function to Get a](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img24.jpg)
Содержание слайда: Sample Function to Get a Cookie
Take the cookiename as parameter (cname).
Create a variable (name) with the text to search for (cname + '=').
Split document.cookie on semicolons into an array called ca (ca = document.cookie.split(';')).
Loop through the ca array (i=0;i<ca.length;i++), and read out each value trimmed (c=ca[i].trim()).
If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length,c.length).
If the cookie is not found, return ''.
№26 слайд![HTML Web Storage With HTML ,](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img25.jpg)
Содержание слайда: HTML5 Web Storage
With HTML5, web pages can store data locally within the user's browser alternatively to cookies. Web Storage is more secure and faster. The data is not included with every server request, but used only when asked for.
The data is stored in name/value pairs, and a web page can only access data stored by itself.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
№27 слайд![HTML Web Storage Objects](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img26.jpg)
Содержание слайда: HTML5 Web Storage Objects
№28 слайд![Initial Check Before using](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img27.jpg)
Содержание слайда: Initial Check
Before using web storage, check browser support for localStorage and sessionStorage:
№29 слайд![Using Storage Objects There](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img28.jpg)
Содержание слайда: Using Storage Objects
There are methods to use storage objects:
.setItem() – writes data
.getItem() – reads data
Methods are identical for localStorage and sessionStorage
№30 слайд![Sample Use of localStorage](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img29.jpg)
Содержание слайда: Sample Use of localStorage
№31 слайд![Useful links](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img30.jpg)
Содержание слайда: Useful links
№32 слайд![Useful Links HTML DOM на сайт](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img31.jpg)
Содержание слайда: Useful Links
HTML DOM на сайті Wikipedia: http://en.wikipedia.org/wiki/Document_Object_Model W3Schools JavaScript HTML DOM: http://www.w3schools.com/js/js_htmldom.asp
Специфікація HTML DOM на сайті W3C: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
№33 слайд![Thank you!](/documents_6/c05f8ceb4a02adbf449f0146c267b5b3/img32.jpg)
Содержание слайда: Thank you!