1. JavaScript basics

2. • Functions in JavaScript
• Arguments Object
• Function parameters
• Using function by reference

3. Functions can return functions

4. • Scope in JavaScript
• Strict equal operator
• Strict not equal operator

5. JavaScript Objects

6. • What is JavaScript Object?
• How to create JavaScript Object
• Constructor
• Private members
• Static Objects

7. • Object inheritance in JavaScript
• [prototype]
Object(parent)
[prototype] [prototype]
FirstChild SecondChild

8. How prototype works?

9. Let’s add prototype object to Point
=> Looking for toString in homePoint object
=> Got it in prototype

10. When using prototypes can be
evil?

11. This in JavaScript

12. • this in objects
• Apply/Call methods

13. DOM

14. html
head body
title
Document title Document body

15. • Events
• How to call event?
• Event Object

16. Questions?

17. ExtJs

18. Зміст
1. Що таке ExtJs? І навіщо “воно” нам?
2. Структура проекту.
3. Компоненти. Цикл життя.
4. Контейнери. Лайаути.
5. Робота з даними. Ajax.
6. XTemplate.
7. Відладка.
8. Що далі?

19. Що таке ExtJs?
• ExtJS (EXTended JavaScript) – яваскрипт
фреймворк для побудови бізнес аплікацій
із широким набором компонентів і засобів
роботи з даними
• Розроблявся як розширення для YUI
бібліотеки. (2006р.)
• Але в міру своєї популярності в 2007р.
відділився у окремий фреймворк і
компанію Ext. (зараз уже Sencha).

20. Навіщо “воно” нам?
• Найширший набір компонентів.
• Поведінка компонентів аналогічна
поведінці десктоп аналогів.
• Документація.
• Можливість розширення набору
компонентів, класів.
• Крос-браузерність.

21. Структура проекту

22. Компоненти

23. Цикл життя

24. Цикл життя: ініціалізація

25. Цикл життя: рендерінг

26. Цикл життя: знищення

27. Контейнери. Лайаути.
Контейнер – це компонент, що може мати
дочірні компоненти.
Контейнер має певний лайаут дочірніх
компонентів.
Лайаут контейнера здійснює рендеринг
дочірніх компонентів.

28. Контейнери. Лайаути.

29. Робота з даними. Ajax
• Ext.data.Store
• Ext.data.DataProxy
• Ext.data.DataReader
• Ext.data.DataWriter
• Ext.data.Record
• Ext.Ajax

30. XTemplate
Клас, що використовується для заповнення
наперед заданого темпліту даними.
В ExtJs 4 цей клас є основним в процесі
рендерингу компонентів.

31. Відладка
• FireFox + FireBug + Illuminations
• Chrome
FireFox 3D view

32. Що далі?
http://www.sencha.com/
http://www.jsmag.com/
JavaScript: The Good Parts
http://www.bryntum.com/products/siesta/
ExtJs 4.1
http://seleniumhq.org/ ExtJs in Action
Sencha Touch 2.0