🗊Презентация Using objects in JavaScript. Accessing DOM in JavaScript

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Using objects in JavaScript. Accessing DOM in JavaScript, слайд №1Using objects in JavaScript. Accessing DOM in JavaScript, слайд №2Using objects in JavaScript. Accessing DOM in JavaScript, слайд №3Using objects in JavaScript. Accessing DOM in JavaScript, слайд №4Using objects in JavaScript. Accessing DOM in JavaScript, слайд №5Using objects in JavaScript. Accessing DOM in JavaScript, слайд №6Using objects in JavaScript. Accessing DOM in JavaScript, слайд №7Using objects in JavaScript. Accessing DOM in JavaScript, слайд №8Using objects in JavaScript. Accessing DOM in JavaScript, слайд №9Using objects in JavaScript. Accessing DOM in JavaScript, слайд №10Using objects in JavaScript. Accessing DOM in JavaScript, слайд №11Using objects in JavaScript. Accessing DOM in JavaScript, слайд №12Using objects in JavaScript. Accessing DOM in JavaScript, слайд №13Using objects in JavaScript. Accessing DOM in JavaScript, слайд №14Using objects in JavaScript. Accessing DOM in JavaScript, слайд №15Using objects in JavaScript. Accessing DOM in JavaScript, слайд №16Using objects in JavaScript. Accessing DOM in JavaScript, слайд №17Using objects in JavaScript. Accessing DOM in JavaScript, слайд №18Using objects in JavaScript. Accessing DOM in JavaScript, слайд №19Using objects in JavaScript. Accessing DOM in JavaScript, слайд №20Using objects in JavaScript. Accessing DOM in JavaScript, слайд №21Using objects in JavaScript. Accessing DOM in JavaScript, слайд №22Using objects in JavaScript. Accessing DOM in JavaScript, слайд №23Using objects in JavaScript. Accessing DOM in JavaScript, слайд №24Using objects in JavaScript. Accessing DOM in JavaScript, слайд №25Using objects in JavaScript. Accessing DOM in JavaScript, слайд №26Using objects in JavaScript. Accessing DOM in JavaScript, слайд №27Using objects in JavaScript. Accessing DOM in JavaScript, слайд №28Using objects in JavaScript. Accessing DOM in JavaScript, слайд №29Using objects in JavaScript. Accessing DOM in JavaScript, слайд №30Using objects in JavaScript. Accessing DOM in JavaScript, слайд №31Using objects in JavaScript. Accessing DOM in JavaScript, слайд №32Using objects in JavaScript. Accessing DOM in JavaScript, слайд №33Using objects in JavaScript. Accessing DOM in JavaScript, слайд №34Using objects in JavaScript. Accessing DOM in JavaScript, слайд №35Using objects in JavaScript. Accessing DOM in JavaScript, слайд №36Using objects in JavaScript. Accessing DOM in JavaScript, слайд №37Using objects in JavaScript. Accessing DOM in JavaScript, слайд №38Using objects in JavaScript. Accessing DOM in JavaScript, слайд №39Using objects in JavaScript. Accessing DOM in JavaScript, слайд №40Using objects in JavaScript. Accessing DOM in JavaScript, слайд №41Using objects in JavaScript. Accessing DOM in JavaScript, слайд №42Using objects in JavaScript. Accessing DOM in JavaScript, слайд №43Using objects in JavaScript. Accessing DOM in JavaScript, слайд №44Using objects in JavaScript. Accessing DOM in JavaScript, слайд №45Using objects in JavaScript. Accessing DOM in JavaScript, слайд №46Using objects in JavaScript. Accessing DOM in JavaScript, слайд №47Using objects in JavaScript. Accessing DOM in JavaScript, слайд №48Using objects in JavaScript. Accessing DOM in JavaScript, слайд №49Using objects in JavaScript. Accessing DOM in JavaScript, слайд №50Using objects in JavaScript. Accessing DOM in JavaScript, слайд №51Using objects in JavaScript. Accessing DOM in JavaScript, слайд №52Using objects in JavaScript. Accessing DOM in JavaScript, слайд №53
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Using objects in JavaScript. Accessing DOM in JavaScript. Доклад-сообщение содержит 53 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


Using objects in JavaScript. Accessing DOM in JavaScript Vyacheslav Koldovskyy Last update: 29/03/2016
Описание слайда:
Using objects in JavaScript. Accessing DOM in JavaScript Vyacheslav Koldovskyy Last update: 29/03/2016

Слайд 2


Agenda Program flow control Collections Custom objects Constructors Context and "this" Operator "new" Browser Object Model (BOM) and Document Object Model (DOM) Events Memory and Sandbox Closures
Описание слайда:
Agenda Program flow control Collections Custom objects Constructors Context and "this" Operator "new" Browser Object Model (BOM) and Document Object Model (DOM) Events Memory and Sandbox Closures

Слайд 3


Conditions: if-else Syntax: if (condition) statement1 [else statement2] Example:
Описание слайда:
Conditions: if-else Syntax: if (condition) statement1 [else statement2] Example:

Слайд 4


Conditional (Ternary) Operator ?: Syntax: condition ? expr1 : expr2 Example:
Описание слайда:
Conditional (Ternary) Operator ?: Syntax: condition ? expr1 : expr2 Example:

Слайд 5


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

Слайд 6


Loops: while and do-while
Описание слайда:
Loops: while and do-while

Слайд 7


Loops: keywords break and continue There are two keywords for loops control : break – aborts loop and moves control to next statement after the loop; continue – aborts current iteration and immediately starts next iteration. Try not to use this keywords. A good loop have one entering point, one condition and one exit.
Описание слайда:
Loops: keywords break and continue There are two keywords for loops control : break – aborts loop and moves control to next statement after the loop; continue – aborts current iteration and immediately starts next iteration. Try not to use this keywords. A good loop have one entering point, one condition and one exit.

Слайд 8


Switch Switch statement allows to select one of many blocks of code to be executed. If all options don’t fit, default statements will be processed
Описание слайда:
Switch Switch statement allows to select one of many blocks of code to be executed. If all options don’t fit, default statements will be processed

Слайд 9


Collections Collection is a set of variables grouped under common name. Usually elements of collections are grouped according to some logical or physical characteristic. Collections help to avoids situations when we have to declare multiple variables with similar names:: var a1, a2, a3, a4… There are two types of collections that are typical for JS: arrays and dictionaries (hash tables).
Описание слайда:
Collections Collection is a set of variables grouped under common name. Usually elements of collections are grouped according to some logical or physical characteristic. Collections help to avoids situations when we have to declare multiple variables with similar names:: var a1, a2, a3, a4… There are two types of collections that are typical for JS: arrays and dictionaries (hash tables).

Слайд 10


Array: processing Usage of arrays: var array = [] // declaration of empty array var array = [5, 8, 16] // declaration of predefined array array[0] = 4; // writing value with index 0 tmp = array[2]; // reading value by index (in tmp - 16) array.length // getting length of array
Описание слайда:
Array: processing Usage of arrays: var array = [] // declaration of empty array var array = [5, 8, 16] // declaration of predefined array array[0] = 4; // writing value with index 0 tmp = array[2]; // reading value by index (in tmp - 16) array.length // getting length of array

Слайд 11


Array: features Arrays in JavaScript differ from arrays in classical languages. Arrays in JS are instances of Object. So Array in JS can be easily resized, can contain data of different types and have string as an index. Length of array is contained in length property, its value is equal to index of last element increased by one.
Описание слайда:
Array: features Arrays in JavaScript differ from arrays in classical languages. Arrays in JS are instances of Object. So Array in JS can be easily resized, can contain data of different types and have string as an index. Length of array is contained in length property, its value is equal to index of last element increased by one.

Слайд 12


Array: useful methods
Описание слайда:
Array: useful methods

Слайд 13


Iterating an Array
Описание слайда:
Iterating an Array

Слайд 14


Dictionary Dictionaries allow us to have set of data in form of "key-value" pairs We can create hash and initialize it at the same time. For this we should write values separated by a comma like in array. But for all values we have to set key:
Описание слайда:
Dictionary Dictionaries allow us to have set of data in form of "key-value" pairs We can create hash and initialize it at the same time. For this we should write values separated by a comma like in array. But for all values we have to set key:

Слайд 15


Using Dictionary Usage of dictionaries tables is very similar to arrays: dict['good'] = 4; // writing value in element with key “good” tmp = dict['excellent']; // reading value by key “excellent” The difference is in usage of for-in statement:
Описание слайда:
Using Dictionary Usage of dictionaries tables is very similar to arrays: dict['good'] = 4; // writing value in element with key “good” tmp = dict['excellent']; // reading value by key “excellent” The difference is in usage of for-in statement:

Слайд 16


Array vs Dictionary Use Array for collections with digital indexes. Use Hash if you want use string keys. Don't look for property length in Hash. Don't look for forEach and other Array methods in Hash. Always explicitly declare Array otherwise you get a Hash. Don't use for with hash, use for-in instead. At finally : use collection – be cool :)
Описание слайда:
Array vs Dictionary Use Array for collections with digital indexes. Use Hash if you want use string keys. Don't look for property length in Hash. Don't look for forEach and other Array methods in Hash. Always explicitly declare Array otherwise you get a Hash. Don't use for with hash, use for-in instead. At finally : use collection – be cool :)

Слайд 17


Object creation You know that we can create a simple object in JavaScript. We use JSON for this.
Описание слайда:
Object creation You know that we can create a simple object in JavaScript. We use JSON for this.

Слайд 18


Object or Dictionary But this way it looks like hash table creation. What is the difference between hash table and object, then?
Описание слайда:
Object or Dictionary But this way it looks like hash table creation. What is the difference between hash table and object, then?

Слайд 19


Object or Dictionary Typically we use hash table if we want to represent some collection, and we use an object to describe some system or entity.
Описание слайда:
Object or Dictionary Typically we use hash table if we want to represent some collection, and we use an object to describe some system or entity.

Слайд 20


Difference in use
Описание слайда:
Difference in use

Слайд 21


Constructors Sometimes we need to create more than one single object. It is not a good idea to use the literal way for this. It will be better create a scenario for objects reproducing. Constructor is a function that implements this scenario in JavaScript. Constructor consists of declaration attributes and methods that should be added into each new object with presented structure.
Описание слайда:
Constructors Sometimes we need to create more than one single object. It is not a good idea to use the literal way for this. It will be better create a scenario for objects reproducing. Constructor is a function that implements this scenario in JavaScript. Constructor consists of declaration attributes and methods that should be added into each new object with presented structure.

Слайд 22


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

Слайд 23


BOM and DOM
Описание слайда:
BOM and DOM

Слайд 24


Description How JavaScript communicates with the world? In outline this mechanism works by next scenario: user does something and this action is an event for browser. JavaScript observes pages in the browser. And if event has occurred, script will be activated.
Описание слайда:
Description How JavaScript communicates with the world? In outline this mechanism works by next scenario: user does something and this action is an event for browser. JavaScript observes pages in the browser. And if event has occurred, script will be activated.

Слайд 25


Event handling But JavaScript doesn't observe events by default. You should specify to your code what events are interesting for it. There are 3 basic ways to subscribe to an event: - inline in HTML - using of onevent attribute using special methods First and second ways are deprecated for present days. Let's take a look at event handling in more details.
Описание слайда:
Event handling But JavaScript doesn't observe events by default. You should specify to your code what events are interesting for it. There are 3 basic ways to subscribe to an event: - inline in HTML - using of onevent attribute using special methods First and second ways are deprecated for present days. Let's take a look at event handling in more details.

Слайд 26


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

Слайд 27


Using of onevent attribute
Описание слайда:
Using of onevent attribute

Слайд 28


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

Слайд 29


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

Слайд 30


Bubbling and Capturing
Описание слайда:
Bubbling and Capturing

Слайд 31


Bubbling and Capturing
Описание слайда:
Bubbling and Capturing

Слайд 32


Event object For every event in the browser instance of Event object will be created.
Описание слайда:
Event object For every event in the browser instance of Event object will be created.

Слайд 33


Control of Default behavior Sometimes a default scenario of event processing includes some additional behavior: bubbling and capturing or displaying context menu.
Описание слайда:
Control of Default behavior Sometimes a default scenario of event processing includes some additional behavior: bubbling and capturing or displaying context menu.

Слайд 34


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

Слайд 35


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

Слайд 36


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

Слайд 37


Using objects in JavaScript. Accessing DOM in JavaScript, слайд №37
Описание слайда:

Слайд 38


Context Let's imagine two identical objects. They are created by Cat constructor:
Описание слайда:
Context Let's imagine two identical objects. They are created by Cat constructor:

Слайд 39


Context If we call method run() for both cats, we’ll take correct results:
Описание слайда:
Context If we call method run() for both cats, we’ll take correct results:

Слайд 40


Context It works because we use the next form of access to attribute name: this.name. this contains inside a reference to object on whose behalf was called method run. Such a reference is called a context. The context determined automatically after the method calling and can't be changed by code.
Описание слайда:
Context It works because we use the next form of access to attribute name: this.name. this contains inside a reference to object on whose behalf was called method run. Such a reference is called a context. The context determined automatically after the method calling and can't be changed by code.

Слайд 41


Loss of context Be careful! There are situations when you can lose a context. For example:
Описание слайда:
Loss of context Be careful! There are situations when you can lose a context. For example:

Слайд 42


Using objects in JavaScript. Accessing DOM in JavaScript, слайд №42
Описание слайда:

Слайд 43


Basic info Free space in browser sandbox is allocated for each variable in JavaScript. Sandbox is a special part of memory that will be managed by browser: JavaScript takes simplified and secure access to "memory“, browser translates JS commands and does all low-level work. As a result memory, PC and user data has protection from downloaded JavaScript malware.
Описание слайда:
Basic info Free space in browser sandbox is allocated for each variable in JavaScript. Sandbox is a special part of memory that will be managed by browser: JavaScript takes simplified and secure access to "memory“, browser translates JS commands and does all low-level work. As a result memory, PC and user data has protection from downloaded JavaScript malware.

Слайд 44


Scope The scope is a special JavaScript object which was created by browser in the sandbox and used for storing variables. Each function in JavaScript has its own personal scope. Scope is formed when a function is called and destroyed after the function finishes. This behavior helps to manage local variables mechanism. Object window is a top-level scope for all default and global variables.
Описание слайда:
Scope The scope is a special JavaScript object which was created by browser in the sandbox and used for storing variables. Each function in JavaScript has its own personal scope. Scope is formed when a function is called and destroyed after the function finishes. This behavior helps to manage local variables mechanism. Object window is a top-level scope for all default and global variables.

Слайд 45


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

Слайд 46


Value-types and Reference-types Unfortunately some objects are too large for scope. For example string or function. There is simple division into value-types and reference-types for this reason. Value-types are stored in scope completely and for reference-types only reference to their location is put in scope. They themselves are located in place called "memory heap". String and all Objects are reference-types. Other data types are stored in scope.
Описание слайда:
Value-types and Reference-types Unfortunately some objects are too large for scope. For example string or function. There is simple division into value-types and reference-types for this reason. Value-types are stored in scope completely and for reference-types only reference to their location is put in scope. They themselves are located in place called "memory heap". String and all Objects are reference-types. Other data types are stored in scope.

Слайд 47


Memory cleaning The basic idea of memory cleaning: when function is finished, scope should be destroyed and as a result all local variables should be destroyed. This will work for value-types. As for reference-types: deleting the scope destroys only reference. The object in heap itself will be destroyed only when it becomes unreachable.
Описание слайда:
Memory cleaning The basic idea of memory cleaning: when function is finished, scope should be destroyed and as a result all local variables should be destroyed. This will work for value-types. As for reference-types: deleting the scope destroys only reference. The object in heap itself will be destroyed only when it becomes unreachable.

Слайд 48


Unreachable links An object is considered unreachable if it is not referenced from the client area of code. Garbage collector is responsible for the cleanup of unreachable objects. It's a special utility that will launch automatically if there isn’t enough space in the sandbox. If an object has at least one reference it is still reachable and will survive after memory cleaning.
Описание слайда:
Unreachable links An object is considered unreachable if it is not referenced from the client area of code. Garbage collector is responsible for the cleanup of unreachable objects. It's a special utility that will launch automatically if there isn’t enough space in the sandbox. If an object has at least one reference it is still reachable and will survive after memory cleaning.

Слайд 49


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

Слайд 50


Using objects in JavaScript. Accessing DOM in JavaScript, слайд №50
Описание слайда:

Слайд 51


Closure If scope is an object and it is not deleted it is still reachable, isn't it? Absolutely! This mechanism is called closure. If you save at least one reference to scope, all its content will survive after function finishing.
Описание слайда:
Closure If scope is an object and it is not deleted it is still reachable, isn't it? Absolutely! This mechanism is called closure. If you save at least one reference to scope, all its content will survive after function finishing.

Слайд 52


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

Слайд 53


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

Скачать

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