Ні для кого не секрет, що в наш час JavaScriptстав однією з найпопулярніших мов програмування. У далекі 90-ті роки, в момент зародження мови, коли він був створений з єдиною метою додати інтерактивність веб сторінкам і покращити процес взаємодії з користувачем, хто б міг подумати, що він досягне настільки небувалих висот. Адже зараз на ньому можна робити практично все, що завгодно. Хочете написати сайт: і бекенд і фронтенд на JavaScript? будь ласка! Бажаєте написати мобільний додаток на JavaScript? немає проблем. Програмуєте мікроконтролер – і тут вам допоможе прийде JavaScript.
Є звичайно невеликі мінуси в підході використання JavaScript скрізь, але якщо подумати, то скільки часу і сил можна заощадити, вивчивши лише одну мову, особливо, якщо той же додаток повинен працювати на різних платформах. На різних платформах кажете? Хм… Точно – різних платформах – тепер JS може дозволити собі десктопні програми для Windows, Linux, Mac, як запитаєте ви? Відповідь проста: зустрічайте - NW.js.
Node.js - програмна платформа, заснована на двигуні V8, який транслює наш скрипт в машинний код. Ця платформа була створена у 2009 році переважно для роботи з бекендом сайтів.
WebKit – вільний двигун, розроблений компанією Apple. Вперше був анонсований у складі Safari у 2003 році
Отже, код, написаний на JS для даної технології, буде доступний як Node.js модулі, так і стандартний браузерний API (відповідно WebKit)
Після того, як необхідне програмне забезпечення завантажено і встановлено, ви написали свою програму на улюбленому JS (як це зробити читайте далі) і локалізували все в одну папку. Полдела зроблено, тепер залишається найскладніше і найдовше - упаковати все в один файл і підготувати для розповсюдження. Для спрощення можна скористатися готовими бібліотеками, наприклад nw-builder . Установка бібліотеки не складе труднощів, якщо ви вже працювали з node.js. Як відомо, до складу node.js входить менеджер пакетів npmз яким потрібно працювати з командного рядка. Для того щоб поставити якусь бібліотеку, необхідно виконати команду:
> npm install [ім'я_бібліотеки] [опції]
Зверніть увагу, що бібліотеку можна ставити як локально, так і глобально, для локальної установки використовуйте опцію --save-dev, для глобальної -g. У такий спосіб поставимо наш збирач для NW.js глобально, виконавши команду:
> npm install nw-builder -g
Для того, щоб зібрати наш додаток, необхідно виконати команду (з великою кількістю опцій можна ознайомитись у документації):
> nwbuild -p [ім'я_платформи] -o [шлях_до_папці_для_збірної_версії] [шлях_до_додатку]
Як ім'я платформи можуть бути такі значення: win32, win64, osx32, osx64, linux32, linux64.
Під час розробки немає потреби щоразу збирати програму, можна просто запустити її як є і вона відкриється в окремому вікні. Для цього потрібно запустити nw.exe з командного рядка і передати в якості параметрів шлях до папки з вашим додатком. Крім того, якщо ви працюєте під Windows, можна просто методом drag-n-drop перетягнути папку з вихідним кодом програми на JS (зверніть увагу, що саме папку повністю) в nw.exe.
Hello, world! Тепер, коли ви знаєте, як запустити програму, як зібрати його в один файл, давайте напишемо щось. За традицією, знайомство з новою платформою починається з написання програми Hello, world.Для цієї програми нам навіть не знадобиться JavaScript, тільки HTML. Створимо папку з назвою HelloWorld. Помістимо всередину файл index.htmlз наступною розміткою:
Hello, world Hello, world, від NW.js
Крім того, для кожної програми під NW.js необхідний файл, який обов'язково повинен називатися package.json . З нього братиметься інформація для побудови програми. Створимо найпростіший варіант файлу та помістимо до папки HelloWorld. Отже:
( "name": "hello-world", "version": "1.0.0", "description": "First application", "main": "index.html", "author": "Developer", "window ": ( "toolbar": false, "width": 500, "height": 200 ) )
Вміст файлу зрозумілий без пояснень (зверніть увагу, що обов'язкові поля тільки main та name). У main необхідно записати файл з розміткою, який буде точкою входу до програми. Секція window налаштовує параметри вікна (в даному випадку ми відключаємо панель інструментів та задає розміри вікна 500x200).
Крім того, можна налаштувати такі поля як (за повним списком опцій звертайтесь до документації):
- icon – вказуємо шлях до іконки (перевизначити стандартну)
- position – можна вказати позицію вікна під час завантаження ( null, centerабо mouse)
- min_width , min_height , max_width , max_height – обмеження розмірів вікна
- resizable – логічне значення, яке показує, чи можна користувачеві змінювати розміри вікна
- fullscreen – увімкнути повноекранний режим
- kiosk – увімкнути режим кіоску
- transparent – зробити вікно прозорим
Додаток написано, але в ньому лише один div елемент і зовсім немає логіки, а що робити, якщо у нас багата на елементи розмітка та складна логіка? На допомогу нам приходить елемент конфігураційного файлу toolbar, який ми встановили в false. Для того щоб зробити доступними засоби налагодження, необхідно встановити toolbar у true. Зробивши це при запуску програми ми отримаємо наступне вікно:
Після натискання кнопки у верхньому правому куті відкриється ще одне вікно, в якому будуть відображені знайомі інструменти розробника:
Var gui = require ("nw.gui");
Загальний шаблон для використання контролю:
Var element = new gui.ElementName(option);
Таким чином, для створення елементів меню можна скористатися наступною конструкцією:
Var menu = new gui.Menu();
Крім того, будь-які властивості створеного нами об'єкта можна легко змінити стандартними конструкціями JS, наприклад так:
Menu.title = "New Title";
!}
Меню створено, тепер його потрібно заповнити, для маніпуляції дочірніми елементами існують методи:
Menu.append(new gui.MenuItem((label: "Label of menu item"))); menu.removeAt(0);
Крім того, для більш гнучкого додавання елементів у menu можна скористатися методом insert, у параметрах якого необхідно передати MenuItemта номер позиції, куди його вставити ( позиція перед першим елементом відповідає 0).
Для доступу до створених елементів можна використовувати властивість items:
Menu.items.title = "New title"
!}
Зверніть увагу, що не можна створювати елементи безпосередньо:
Menu.items = new gui.MenuItem(); // НЕПРАВИЛЬНО
Найголовніше при роботі з нативними контролами, це пам'ятати, що будь-яка помилка при роботі з ними може призвести до краху всієї програмиТому необхідно бути вкрай уважними і по можливості при видаленні елементів, а також надавати змінної значення null. Таким чином для видалення контролю, можна виконати таке:
Control.remove(); control = null;
Для більш зручної роботи з контролами, вони успадковані від EventEmitter, тому хороша новина в тому, що ми можемо легко працювати з подіями, наприклад:
Menuitem.on("click", function() ( // зробити щось корисне));
Меню було створено, але якщо запустити програму, то жодного меню ви не побачите. Для відображення меню існує метод popup, у параметрах якого потрібно передати координати для відображення меню.
Для демонстрації основних можливостей меню додайте наступний скрипт до створеного раніше проекту Hello, world:
Var gui = require ("nw.gui"); var menu1 = new gui.Menu(); menu1.append(new gui.MenuItem((label: "Item 1")))); var subMenu1 = new gui.Menu(); subMenu1.append(new gui.MenuItem((label: "Item 2")))); menu1.append(new gui.MenuItem(( label: "Submenu", submenu: subMenu1 ))); document.body.addEventListener("contextmenu", function(ev) ( ev.preventDefault(); menu1.popup(ev.x, ev.y); return false; ));
Після запуску програми ми можемо побачити створене контекстне меню для body. Таким чином, ми можемо визначити контекстне меню будь-якого елемента.
Додати теги
Цей розділ присвячується мови програмування сценаріїв JavaScript. Ви дізнаєтеся, що ж таке мова JavaScript і для чого вона необхідна.
Розглянемо особливості створення динаміки на сторінці, обробки форм, а також роботи із шарами та стилями.
JavaScript - це об'єктно-орієнтована мова програмування сценаріїв із синтаксисом, трохи аналогічним синтаксисам мов C, Perl та Python. Незважаючи на те, що мова має схожу назву з мовою програмування Java, нічого спільного, крім частини назви, у них немає.
В даний час JavaScript використовується в основному для створення сценаріїв, що вбудовуються в веб-сторінки, що дозволяють повністю керувати як самими веб-сторінками, там і веб-браузерами, в яких ці веб-сторінки відкриті. Таким чином, мова JavaScript у більшості випадків використовується для створення інтерактивних веб-сторінок та веб-додатків.
Мережа Інтернет побудована за технологією « клієнт-сервер».
Сервери - це комп'ютери або програми, які надають послуги клієнтам, наприклад веб-сервер або сервер електронної пошти.
Клієнти - це комп'ютери або програми, які використовують те, що пропонують сервери, наприклад, веб-браузери або поштові клієнти.
Сценарії JavaScript - це невеликі програми, які виконуються на комп'ютері користувача під час завантаження із сервера разом із веб-сторінками.
Область застосування JavaScriptЗ самого початку свого розвитку мова JavaScript застосовувалася для написання різних сценаріїв клієнтів. Вони широко застосовувалися для вирішення таких завдань, як, наприклад, перевірка інформації, введеної користувачем у форму, перед її відправкою на сервер або програмування реакцій у відповідь на дії користувача, що роблять веб-сторінки інтерактивними. Сьогодні за допомогою мови JavaScript створюються вже цілі веб-програми, деякі з них мало чим поступаються своїм настільним «побратимам». Хороші приклади таких веб-застосунків можна знайти серед сервісів компанії Google, наприклад Google Calendar - багатофункціональний органайзер у веб-браузері та Google Doc & Spreadsheet - текстовий та табличний редактор, що дозволяє працювати з офісними документами прямо у вікні веб-браузера. Для створення динамічного вмісту веб-сторінок використовується мова створення динамічних сторінок HTML Dynamic HTML (Динамічний HTML), ключовою частиною якого є JavaScript.
Мова JavaScript застосовується не лише в Інтернеті, але й у таких програмах, як, наприклад, Adobe Dreamweaver, Adobe Acrobat Reader та Adobe Photoshop для розширення їх можливостей, аналогічно використанню мови Visual Basic у Microsoft Office.
Тепер розглянемо створення сценаріїв та способи їх впровадження у HTML-документ.
Створення сценаріївРозберемо всі етапи створення JavaScript-сценарію – від організації робочого оточення до підключення коду до HTML-документу.
Для роботи над сценаріями підійде практично будь-який текстовий редактор, що дозволяє створювати звичайні текстові файли та зберігати їх із розширенням htm або html. Наприклад, в операційній системі Windows серед стандартних є два відповідних текстових редактори - Блокнот і WordPad. Існують також редактори, спеціально розроблені для створення веб-сторінок, наприклад Microsoft FrontPage та Adobe Dreamweaver (раніше відомий як Macromedia Dreamweaver). Такі редактори дозволяють створювати веб-сторінки за допомогою візуальних інструментів, а потім перемикатися в режим відображення коду та вносити нестандартні зміни, наприклад, додавати сценарії. На відміну від звичайних текстових редакторів, таких редакторах підсвічується синтаксис мови HTML і JavaScript, що дуже зручно.
Крім того, в Інтернеті ви можете знайти велику кількість інших текстових редакторів, які дозволяють створювати веб-сторінки та підсвічувати синтаксис мов HTML та JavaScript. Ці редактори мають також багато інших корисних можливостей, які значно спрощують процеси створення веб-сторінок та розробки сценаріїв. Багато таких редакторів поширюються безкоштовно або умовно безкоштовно, і, можливо, якийсь із них припаде вам до душі.
Ви створюватимете сценарії, що керують веб-сторінками, тому для перевірки працездатності цих документів вам знадобиться будь-який веб-браузер. Врахуйте, що, перевіривши працездатність свого творіння в одному веб-браузері, не можна бути впевненим у його працездатності та інших. Отже, веб-сторінки бажано перевіряти у кількох веб-браузерах, і що їх буде більше, краще.
Веб-розробникам доводиться зважати, в основному, на особливості веб-браузера Microsoft Internet Explorer. Отже, свої веб-сторінки потрібно обов'язково протестувати у цьому веб-браузері, який є у кожній операційній системі Windows.
Великою популярністю користуються також веб-браузери Mozilla Firefox та Opera, які прагнуть максимально відповідати стандартам. Mozilla Firefox можна завантажити з сайту http://www.mozilla.ru/, а Opera - з сайту.
Окремо розглянемо налагодження програми (сценарію). Коли сценарій великий, розібратися в ньому не так просто і налагодження, тобто процес пошуку та усунення помилок може займати більшу частину часу розробки всієї програми (або сценарію). Для спрощення та прискорення налагодження створено спеціальні програми, які називаються відладниками. Типовий налагоджувач має такі можливості, як покрокове виконання програми з зупинкою в кожному рядку коду або заздалегідь зазначених для цього точках зупинки, а також відстеження та зміна значень кожної змінної прямо при виконанні програми.
Існує чимало програм для налагодження сценаріїв JavaScript. Наприклад, відладчик Microsoft Script Debugger має все необхідне для успішного налагодження сценаріїв JavaScript. Він застосовується разом із веб-браузером Microsoft Internet Explorer. Цей наладчик розповсюджується безкоштовно компанією Microsoft, його можна завантажити із сайту . Крім того, цей відладчик поширюється разом із редактором Microsoft FrontPage у рамках програми Microsoft Script Editor, яка практично не відрізняється від Microsoft Script Debugger.
Існують також інші відладчики, наприклад для веб-браузера Mozilla Firefox вони створені у вигляді розширень. Зокрема, відладчик FireBug можна завантажити з сайту, причому якщо на цю сторінку перейти у веб-браузері Mozilla Firefox, то відладчик одразу встановиться.
Ми не розглядатимемо процес налагодження в цій книзі, оскільки це окрема тема, яка потребує уважного вивчення. Щоб писати прості сценарії, налагодження не потрібне.
Вбудовування сценаріївРозглянемо вбудовування сценаріїв на веб-сторінки.
Сценарії впроваджуються в HTML-документ трьома стандартними способами:
Як відомо, для створення на веб-сторінках гіперпосилань застосовується контейнерний тег
що має атрибут href для вказівки адреси сторінки або файлу, до якого приведе гіперпосилання. Однак замість адреси цей атрибут може містити і JavaScript-сценарій, якщо перед сценарієм поставити слово javascript: (зі знаком двокрапка). Приклад такого гіперпосилання наступний:
Натисніть тут
Коли користувач клацає кнопкою миші на гіперпосиланні, інтерпретатор сценаріїв JavaScript отримує код
Alert("Привіт, мир!");
та виконує його, внаслідок чого на екрані з'являється діалогове вікно (рис. 2.1).
Мал. 2.1. Результат переходу за посиланням
Тут сценарій складається з однієї функції alert(), яка виводить на екран діалогове вікно з текстом, отриманим як параметр. Об'єм коду може бути будь-яким.
Вбудовування сценаріїв для обробки подій
Поведінка кожного елемента залежить від подій, які постійно відбуваються у веб-браузері. Допустимо, користувач виконав такі дії: клацнув кнопкою миші на тексті, перемістив покажчик миші та завантажив HTML-документ. Веб-браузер сам вирішує, як реагувати на кожну подію, проте ви можете «перехопити» окремі події та задати їм нову поведінку. У мові HTML багато тегів мають атрибути, що відповідають різним подіям. Ці атрибути можуть містити код JavaScript, який виконується у відповідь на подію, наприклад:
Це простий текст
Контейнерний тег
просто об'єднує текст у параграфи, проте на нього покладається ще одна функція. Якщо ви визначите атрибут onclick, то ваш текст реагуватиме на клацання кнопкою миші. Результат обробки коду наводиться на рис. 2.2.
Мал. 2.2. Результат клацання кнопкою миші на тексті
У мові HTML майже кожен тег має атрибути обробки подій. Завдяки можливості обробки подій можна створювати інтерактивні сторінки, які будуть реагувати на дії користувачів.
Вбудовування сценаріїв у тег
HTML має спеціальний контейнерний тег
Якщо при розборі коду HTML-документа веб-браузер зустріне цей тег, він інтерпретує наступний до закриває тега
текст як сценарій якоюсь мовою. Мова сценарію вказується за допомогою атрибуту типу. Наприклад, для вказівки мови JavaScript використовується наступний код:
Тут розміщується код сценарію
Цей атрибут можна і не вказувати, оскільки значення «text/javascript» є стандартним значенням.
У сценарійному коді можна використовувати коментарі - текст, який ігнорується інтерпретатором JavaScript. Коментарі // та
// Це перший коментар // Другий коментар, далі йде код Код сценарію ... // Код на JavaScript ...