Аннотация: В лекции слушатели познакомятся с одним из самых распространенных скриптовых языков — JavaScript, рассмотрят области применения языка, его достоинства и недостатки. Будут показаны варианты размещения кода, рассказано об интеграции JavaScript с другими технологиями.
Презентацию к данной лекции Вы можете скачать здесь.
JavaScript — объектно-ориентированный скриптовый язык программирования . Чаще всего применяется в браузерах для создания сценариев. Сценарии придают веб-страницам интерактивность . Синтаксически язык похож на Си и Java . JavaScript чувствителен к регистру.
Структурно JavaScript состоит из трех частей:
- ядро ( ECMAScript ),
- объектная модель браузера ( Browser Object Model или BOM ),
- объектная модель документа ( Document Object Model или DOM).
Ядро
Ядром JavaScript является спецификация ECMAScript , описывающая типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения.
Игра на JavaScript с нуля для начинающих. ОЧЕНЬ ПРОСТО!
Объектная модель браузера
Каждое из окон браузера представляется объектом window. Браузеры управляют окнами, фреймами, адресом открытой страницы, поддерживают работу с cookie.
Объектная модель документа
Объектная модель документа — интерфейс программирования приложений для HTML и XML-документов. Согласно DOM документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции.
JavaScript сценарии можно запускать несколькими способами:
Пример 1. Встраивание кода JavaScript в web-страницы
Для добавления JavaScript-кода на страницу, можно использовать теги . В качестве примера приведем программу, выводящую на экран модальное окно с надписью «Здравствуй, Мир!» ( ).
alert(‘Здраствуй, Мир!’);
Рис. 7.1.
Пример 2. Расположение кода JavaScript внутри HTML-тега
В предлагаемом примере JavaScript-код интегрирован в HTML-код ссылки ( ).
Заказать товар
Рис. 7.2.
Пример 3. Создание обработчика события
Использование JavaScript- кода в контексте разметки страницы считается не очень удачной практикой. Более предпочтительным для решения этой же задачи является следующий код ( ):
Пример 3. Создание обработчика события window.onload = function() < var myLink = document.getElementById(«orderLink»); myLink.onclick = function() < return confirm(‘Вы уверены?’); >; >; заказать товар
Рис. 7.3.
Пример 4. Вынесение JavaScript-кода в отдельный файл
Есть еще одна возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции:
Первая программа на JavaScript. Как выполняется код на JavaScript
Создадим файл со следующим содержимым:
var sentense; sentense = «Иссушают науки и тело, и ум,» + «
» + «Муж ученый поэтому худ и угрюм.» + «
» + «Не отведав до срока лозы винограда,» + «
» + «Он до времени сам превратился в изюм»; document.write(sentense);
Затем создадим web-страничку со следующим кодом:
Вынесение JavaScript-кода в отдельный файл
Рис. 7.4.
Области применения языка программирования JavaScript
Web-приложения
JavaScript используется в клиентской части web-приложений, при этом клиенты не зависят от конкретной операционной системы пользователя.
AJAX
JavaScript используется в AJAX , когда web-страница не перезагружается полностью при обновлении данных и интерфейс web-приложения становится быстрее, чем при традиционном подходе. В качестве примера можно привести Gmail, некоторые картографические сервисы.
Comet
Comet — механизм работы веб-приложений, использующих постоянные HTTP-соединения, когда web-сервер отправляет данные браузеру без дополнительного запроса со стороны браузера.
Браузерные операционные системы
Исходный код IndraDesktop WebOS на 73 % состоит из JavaScript, код браузерной операционной системы IntOS написан на JavaScript на 70 %. Доля JavaScript в исходном коде eyeOS — 21 %.
Букмарклеты
JavaScript используется для создания небольших программ, размещаемых в закладки браузера. При этом используются URL-адреса со спецификатором javascript.
Пользовательские скрипты в браузере
Пользовательские скрипты в браузере — это программы, позволяющие автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимого и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Серверные приложения
JavaScript на стороне сервера используется в проектах Google.
Мобильные приложения
JavaScript использовался при разработке операционной системы Palm webOS.
Виджеты
Виджет — вспомогательная программа, использующаяся для украшения рабочего стола или быстрого получения информации из интернета без помощи web-браузера. При помощи JavaScript созданы Apple Dashboard, Microsoft Gadgets , Yahoo!_Widgets, Google Desktop Gadgets и Klipfolio Dashboard.
Прикладное программное обеспечение
57 % исходного кода Mozilla Firefox написано на JavaScript.
Манипуляция объектами приложений
Сценарии JavaScript поддерживаются в таких приложениях Adobe, как Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator и Adobe InDesign.
Офисные приложения
JavaScript используется в офисных приложениях для автоматизации рутинных действий, написания макросов и организации доступа со стороны веб-служб.
Microsoft Office
В Excel Services 2010 добавлен интерфейс JavaScript Object Model (JSOM). JSOM даёт возможность реагировать на действия пользователя в отношении Excel Web Access (EWA), программно взаимодействовать с составляющими EWA. Использование JSOM осуществляется при помощи помещения кода JavaScript на страницу, содержащую компоненты EWA.
OpenOffice.org
JavaScript использовался для написания макросов в приложениях, входящих в состав OpenOffice.org.
Краткие итоги
Язык программирования JavaScript состоит из трех частей: ядра, объектной модели браузера и объектной модель документа. Язык имеет Си -подобный синтаксис , но, в отличие от Си — слабую типизацию. Слабая типизация может вызвать проблемы при автоматическом преобразовании типов переменных. JavaScript — объектно-ориентированный язык, но функции ООП выражены относительно слабо.
Код JavaScript можно размещать как на самой web-странице, так и в отдельном файле. JavaScript очень широко применяется при разработке web-приложения . Прежде всего это относится к клиентским web-приложениям, на JavaScript основана технология асинхронного обмена данных с web-сервером AJAX , существенная часть кода некоторых браузерных ОС также написана на JavaScript. JavaScript хорошо подходит для интеграции с различными офисными продуктами, например, в Excel Services 2010 добавлен интерфейс JavaScript Object Model (JSOM).
Набор для практики
Вопросы:
- Из каких частей состоит JavaScript?
- Назовите сильные и слабые стороны языка
- Что общего между JavaScript и C++?
- Где может размещаться JavaScript-код?
- Что такое «песочница»?
- Что такое ECMAScript ?
Упражнения:
- Подготовьте сообщение об угрозах для информационных систем, связанных с JavaScript
- Что такое межсайтовый скриптинг?
- Подготовьте сообщение об объектно-ориентированных свойствах JavaScript
Источник: intuit.ru
Курс JavaScript: обучение JS для начинающих бесплатно
Изучение программирования — интересный и захватывающий процесс. Синтаксис языка — самая простая и короткая часть пути, но без неё невозможно начать. Этот бесплатный онлайн-курс по JavaScript познакомит с базовыми понятиями языка. Вы выучите основы и напишете свои первые программы на JS
25 часов 86189 студентов 72 урока с практикой в браузере
Основы JavaScript
- 1. Привет, Мир!
- 2. Комментарии
- 3. Инструкции (Statements)
- 4. Как мы проверяем ваши решения
- 5. Синтаксические ошибки
JavaScript – один из самых популярных языков программирования в мире. Он используется для создания интерактивных веб-страниц, мобильных приложений, в серверной разработке. Изучать JS мы будем с нуля, с самых азов. Первый модуль – плацдарм для написания осмысленных программ. В нем мы разберем, как написать свой первый код на JS. Расскажем, что такое комментарии и зачем они нужны.
На примере проверки ваших решений рассмотрим, что такое тестирование и как читать вывод тестов.
Арифметика
- 6. Арифметические операции
- 7. Операторы
- 8. Коммутативная операция
- 9. Композиция операций
- 10. Приоритет операций
- 11. Числа с плавающей точкой
- 12. Бесконечность (Infinity)
- 13. NaN
- 14. Линтер
Современные программы создаются для обслуживания бизнесов, помощи в ежедневной жизни и развлечений. Но в основе их работы по-прежнему лежат вычисления. Наиболее простая и базовая тема в программировании — арифметика. В этом модуле мы переведем арифметические действия на язык программирования, поговорим о приоритете операций и операциях с дробным числами.
Вспомним школьные правила из уроков математики и узнаем, что получится, если делить на ноль в JavaScript. А под конец расскажем, что такое линтер и почему он может «ругаться».
Строки
- 15. Кавычки
- 16. Экранирующие последовательности
- 17. Конкатенация
- 18. Кодировка
Текст в программировании называется «строками», и эта тема не так проста, как может показаться. Как вывести фразу, в которой есть и одинарные, и двойные кавычки? Как вообще быть с текстом, ведь компьютер не знает ничего о буквах! Модуль посвящен разным аспектам написания текста – от кавычек и экранирования до кодировки.
Переменные в языке JavaScript
- 19. Что такое переменная
- 20. Изменение переменной
- 21. Выбор имени переменной
- 22. Ошибки при работе с переменными
- 23. Выражения в определениях
- 24. Переменные и конкатенация
- 25. Стили именования
- 26. Магические числа
- 27. Константы
- 28. Интерполяция
- 29. Извлечение символов из строки
Информацию можно помещать в специальные «хранилища» — переменные. Это позволяет переиспользовать уже существующие данные и не дублировать их в разных частях кода. В этом модуле мы разберем как изменять переменные и именовать их, чтобы чтение вашего кода было понятным для любого разработчика. Вы поймете, что придумать название переменной не так-то просто! А еще расскажем, как использовать переменные для упрощения сложных вычислений.
Типы данных JavaScript
- 30. Типы данных
- 31. undefined
- 32. Неизменяемость примитивных типов
- 33. Слабая типизация
JavaScript — язык со слабой типизацией и неизменяемыми примитивными типами данных. Что произойдет, если мы попробуем умножить число на строку? Каким образом JavaScript понимает, что за тип данных перед ним? И что делает JavaScript, когда видит несоответствие типов? Ответы на эти вопросы вы найдете в текущем модуле.
Источник: code-basics.com
Как писать программы на js
По первым буквам можно прочитать – Node.js + Webkit, если данные понятия вам пока не знакомы, то скоро вы поймете о чем идет речь.
Node.js – программная платформа, основанная на движке V8, который транслирует наш скрипт в машинный код. Данная платформа была создана в 2009 году преимущественно для работы с бэкэндом сайтов.
WebKit — свободный движок, разработанный компанией Apple. Впервые был анонсирован в составе Safari в 2003 году
Итак, коду, написанному на JS для данной технологии, будут доступны как Node.js модули, так и стандартный браузерный API (соответственно WebKit)
Быстрый старт
Все это конечно хорошо, но с чего же начать? На github можно найти и скачать репозиторий с исходным кодом. Так же здесь можно найти прямые ссылки для скачивания под ту платформу, на которой будет вестись разработка. Помимо прочего нам понадобится установленная node.js.
После того, как необходимое ПО скачано и установлено, вы написали свое приложение на любимом 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, from NW.js
Кроме того для каждого приложения под NW.js необходим файл, который обязательно должен называться package.json. Из него будет браться информация для построения приложения. Создадим простейший вариант файла и поместим в папку HelloWorld. Итак:
Содержимое файла понятно без пояснений (обратите внимание, что обязательные поля только main и name). В main необходимо записать файл с разметкой, который будет являться точкой входа в приложение. Секция window настраивает параметры окна (в данном случае мы отключаем панель инструментов и задаем размеры окна 500×200).
Кроме того, можно настроить такие поля как (за полным списком опций обращайтесь в документацию):
- icon – указываем путь до иконки (переопределить стандартную)
- position – можно указать позицию окна при загрузке (null, center или mouse)
- min_width, min_height, max_width, max_height – ограничение размеров окна
- resizable – логическое значение, которое показывает можно ли пользователю изменять размеры окна
- fullscreen – включить полноэкранный режим
- kiosk – включить режим киоска
- transparent – сделать окно прозрачным
Приложение создано и можно его запустить. После запуска (о том как это сделать, смотри раздел выше) вы должны получить следующее окно:
Приложение написано, но в нем всего один div элемент и совсем нет логики, а что делать, если у нас богатая на элементы разметка и сложная логика? На помощь к нам приходит элемент конфигурационного файла toolbar, который мы установили в false. Для того, чтобы сделать доступными средства отладки, необходимо установить toolbar в true. Проделав это при запуске приложения мы получим следующее окно:
После нажатия на кнопку в верхнем правом углу откроется еще одно окно, в котором будут отображены знакомые инструменты разработчика:
Работа с нативными контролами
NW.js позволяет работать с нативными контролами. Рассмотрим работу на примере меню. Для работы с нативным UI контролами в nw.js необходимо использовать модуль nw.gui, который можно подключить следующим образом:
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()); menu.removeAt(0);
Кроме того для более гибкого добавления элементов в menu можно воспользоваться методом insert, в параметрах которого необходимо передать MenuItem и номер позиции, куда его вставить (позиция перед первым элементом соответствует 0).
Для доступа к созданным элементам можно использовать свойство items:
menu.items[0].title = «New title»
Обратите внимание, что нельзя напрямую создавать элементы:
menu.items[2] = 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()); var subMenu1 = new gui.Menu(); subMenu1.append(new gui.MenuItem()); 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. Таким образом, мы можем определить контекстное меню для любого элемента.
Источник: full-arts.ru