Разработка мобильных приложений с использованием Intel XDK Основы

Разработка мобильных приложений с использованием Intel XDK. Основы синтаксиса МАР ИЯ НИКОЛАЕВНА ПА РХИМОВИЧ,

04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 2

HTML 5 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 3

HTML 5 • Новая версия языка HTML • Фактически является рабочим стандартом • Множество новых элементов синтаксиса, позволяющих добавлять медиа-контент и не только • Устанавливает скриптовый интерфейс прикладного программирования 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 4

Теги HTML в мобильных приложениях Intel XDK • применимы все теги классических браузеров • код приложения – код веб-страницами с настройками для мобильных устройств 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 5

Теги HTML в мобильных приложениях Intel XDK • Встроенный редактор с подсветкой кода и подстановкой значений 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 6

Теги форматирования логического текста • <h 1>, <h 2> • <h 3>, <h 4> • <h 5>, <h 6> • <p> Абзацы Перенос строки • <br/> 04. 03. 2015 Заголовки Цитаты • <blockquote> Разработка мобильных приложений с использованием Intel XDK 7

Теги логического форматирования текста HTML 5 • <header> • <footer> «Шапка» сайта/ приложения Группа заголовков • <hgroup> 04. 03. 2015 «Подвал» сайта / приложения Разделы • <article> • <section> Разработка мобильных приложений с использованием Intel XDK 8

Теги физического форматирования текста • <strong> • <b> • <em> • <i> Жирный Курсив Верхний индекс Нижний индекс • <sup> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK • <sub> 9

Списки, изображения и таблицы • <ol> • <li> • <ul> • <li> Нумерованные Изображения • <img> 04. 03. 2015 Маркированные Таблицы • <table> • <tr>, <th> • <td> Разработка мобильных приложений с использованием Intel XDK 10

Гиперссылки <a href= “ 1. html”> <a href= “http: //www. ya. ru”> Переход между окнами приложения 04. 03. 2015 На внешние сайты Разработка мобильных приложений с использованием Intel XDK 11

Элементы форм • <button> • <input type=button> • <input type=text> 04. 03. 2015 Текстовые поля Радиокнопки • <input type=radio> Кнопки • <input type=password • <textarea> «Флажки» • <input type=checkbox> Разработка мобильных приложений с использованием Intel XDK 12

Новые элементы форм HTML 5 <input type=date> <input type=time> Поле выбора даты 04. 03. 2015 Поле выбора времени Разработка мобильных приложений с использованием Intel XDK 13

Новые элементы форм HTML 5 <input type=month> <input type=color> Поле выбора месяца 04. 03. 2015 Поле выбора цвета Разработка мобильных приложений с использованием Intel XDK 14

Новые элементы форм HTML 5. Поле выбора месяца <input type=month max="2012 -04" min= "10" value="2012 -04“/> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 15

Новые элементы форм HTML 5. Поле выбора цвета <input type=color value = "red“> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 16

Новые элементы форм HTML 5 <input type=number> <input type=range> Поле выбора значения 04. 03. 2015 «Бегунок» Разработка мобильных приложений с использованием Intel XDK 17

Новые элементы форм HTML 5. Поле выбора значения <input type="number" min="0" max="10" step="2" value="6“> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 18

Новые элементы мультимедиа HTML 5 <canvas> Поле для рисовани я Поле вставки аудио <audio> Поле вставки видео <video> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 19

Новые элементы форм HTML 5. Поле вставки аудио <audio controls> <source src="Enigma. mp 3" type="audio/mpeg"> </audio> <audio controls src="Enigma. mp 3" type="audio/mpeg"> </audio> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 20

Новые элементы форм HTML 5. Поле вставки видео <video src="img/Intel. XDK. 3 gp" preload loop autoplay type="video/3 gpp" controls="controls" poster="video/intel. XDK. jpg" width=300 px height=100 px> </video> <source src=" img/Intel. XDK. 3 gp " type="video/3 gpp"> </video> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 21

CSS 3 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 22

Cascading Style Sheets • Свойства, задающие оформление элементов • Расширенные возможности • Более тонкая настройка отображения элементов 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 23

Стандарт CSS 3 • Новые фоновые эффекты • Работа со скругленными углами • Добавление теней • Трансформация и анимация элементов • Расширенная работа со шрифтами 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 24

Размещение стиля в документе Встроенный стиль 04. 03. 2015 Стиль в заголовке Разработка мобильных приложений с использованием Intel XDK Внешняя таблица стилей 25

Встроенная информация о стиле Оформление конкретного элемента указывается с помощью атрибута STYLE. <H 1 style="color: #FF 6600; font-size: 16 pt; text-align: center; "> Башни Московского Кремля </H 1> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 26

Информация о стиле в заголовке: элемент STYLE <HTML> <HEAD> <STYLE type="text/css"> H 1 {color: #FF 6600; font-size: 16 pt; text-align: center; } H 2 {color: #FF 6600; font-size: 14 pt; text-align: center; } </STYLE> </HEAD> . . . 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 27

$Внешние таблицы стилей my_style. css BODY {background-color: #FFFF 33; } H 1 {color: red;$

Внешние таблицы стилей my_style. css BODY {background-color: #FFFF 33; } H 1 {color: red; text-align: center; } P {color: #999900; } 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 28

$Внешние таблицы стилей my_style. css BODY {background-color: #FFFF 33; } H 1 {color: red;$

Внешние таблицы стилей my_style. css BODY {background-color: #FFFF 33; } H 1 {color: red; text-align: center; } P {color: #999900; } osn 1. htm, osn 2. htm, osn 3. htm, osn 4. htm, osn 5. htm <LINK rel="stylesheet" href=“my_style. css"> </HEAD> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 29

04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 30

04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 31

04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 32

04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 33

Правила применяются Всех однотипных элементов языка HTML (P, H 1 и т. д. ) 04. 03. 2015 Всех элементов одного класса (определенное значение параметра class) Отдельных элементов (определенное значение id) Разработка мобильных приложений с использованием Intel XDK 34

$Правила форматирования таблиц стилей • селектор { имя_параметра 1: значение; имя_параметра 2: значение; …$

Правила форматирования таблиц стилей • селектор { имя_параметра 1: значение; имя_параметра 2: значение; … имя_параметра. N: значение } 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 35

Селектор – имя тега • Один элемент h 1 {color: darkred; font-size: 24 pt} • Несколько элементов h 3, b {color: darkred; font-size: 24 pt} • Вложенные теги p b {font-size: 24 pt} 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 36

Селектор - имя класса h 1. red {color: red } h 1. green {color: green } <h 1 class=red> Этот заголовок мы отобразим красным цветом </h 1> <h 1 class=green> Этот заголовок мы отобразим зеленым цветом </h 1> <h 1>Этот заголовок обычный </h 1> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 37

Селектор - имя класса. free {color: white; background-color: darkred; } <p class=free> Этот параграф мы отобразим белым цветом по темнокрасному фону </p>. . . <p> Эту <a class=free> гипертекстовую ссылку</a> мы отобразим белым цветом по темно-красному фону. </p> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 38

Селектор – имя идентификатора #myh 1 {color: darkred; font-size: 24 pt} <h 1 id=“myh 1”>уникальный заголовок </h 1> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 39

Свойства CSS Фон: Текст: font, background text Отступы: margin и padding Списки: list-style Границы: border

Свойства FONT (форматирование шрифта)

Свойства FONT (форматирование шрифта) font-family: любой шрифт p {font-family: ”Times New Roman”, serif} шрифт с засечками (Times) шрифт без засечек (Arial) моноширинный (Courier) serif sans-serif monospace 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 42

font-style без изменений normal 04. 03. 2015 курсив italic Разработка мобильных приложений с использованием Intel XDK 43

font-weight нормальный normal 04. 03. 2015 жирный bold толще bolder тоньше процент lighter целое число 100 - 900 Разработка мобильных приложений с использованием Intel XDK 44

font-size Размер шрифта font-size: 12 pt; font-size: 12 px; font-size: 120%; font-size: large; xx-small 04. 03. 2015 x-small medium large x-large Разработка мобильных приложений с использованием Intel XDK xx-large 45

Свойства FONT font: italic bold 12 pt Arial; Начертание Жирность 04. 03. 2015 Размер шрифта Курсив Разработка мобильных приложений с использованием Intel XDK 46

Свойства TEXT (форматирование текста)

text-transform нет все буквы заглавные все буквы строчные none 04. 03. 2015 каждое слово с большой буквы Capitalize UPPERCASE lowercase Разработка мобильных приложений с использованием Intel XDK 48

text-align по левому краю по правому краю по центру по ширине left right center justify 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 49

vertical-align По верхнему краю По центру По нижнему краю top middle bottom 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 50

Форматирование текста Цвет текста color 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 51

Фоновое оформление

Свойство BACKGROUND цвет фона фоновый рисунок background-image : none background-color: red background-image: URL('ris_name. gif') 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 53

background-repeat Повторение фона repeat-x repeat-y no-repeat 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 54

background-position Положение фона процент от ширины и (или) высоты top, middle, bottom left, center, right Координаты 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 55

Изменение размера фона от размера браузера background-size В пикселях background-size: 350 px 450 px; 04. 03. 2015 В процентах background-size: 50% Разработка мобильных приложений с использованием Intel XDK 56

Добавление нескольких изображений • Изображения задаются в свойстве background-image через запятую • Режим наложения изображений «сверху вниз» • Свойства оформления задаются в нужном порядке через запятую #element 1 { background-image: url(img 1. jpg), url(img 2. jpg); background-position: bottom right, center; background-size: 200 px 50 px, 100%; background-repeat: no-repeat, no-repeat; } 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 57

Свойство BACKGROUND Повторение Цвет фона Фиксация фона Фоновый рисунок Положение фона 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 58

Размеры элементов

Размеры элементов width: ширина Проценты Пиксели 04. 03. 2015 height: высота Пиксели Разработка мобильных приложений с использованием Intel XDK 60

Javascript 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 61

Java. Script • «В детстве» - сценарный язык программирования для придания интерактивности web-страницам на стороне клиента • «Сегодня» - Универсальный язык программирования Интерактивность страниц/приложений • Работа с SVG графикой • Рисование на канве • Работа с трехмерной графикой с помощью Web. GL • 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 62

Javascript сегодня • Универсальный язык программирования Запуск видео и аудио • Нанесение меток и объектов на карту • Отображение математических формул • Работа с файловой системой и реестром • 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 63

Javascript сегодня • Универсальный язык программирования • • • собственные плагины для браузера Работа с удаленными библиотеками на разных языках Взаимодействие с I/O через свой API Программирование микроконтроллеров Функционал десктопных оконных приложений 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 64

Основы языка Javascript • Объектно-ориентированный язык программирования • Регистрозависимый язык • Не требует задания типа переменной • Каждая команда завершается «точкой с запятой» var x; x=10; 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 65

Размещение кода в документе Встроенный код 04. 03. 2015 Код в заголовке Разработка мобильных приложений с использованием Intel XDK Внешний код 66

Основы Javascript. Подключение Код в заголовке Код в подключаемом файле <script type="text/javascript"> var x; x=10; </script> 04. 03. 2015 <script src="/my/script. js"> </script> Разработка мобильных приложений с использованием Intel XDK 67

Основные операции языка Javascript 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 68

Основные операции языка Javascript Стандартные операции x=y+z; x=y-z; x=y*z; x=y/z; 04. 03. 2015 Остаток от деления Увеличение/ уменьшение на 1 x++; x=y%z; x--; Разработка мобильных приложений с использованием Intel XDK 69

Основы Javascript. Преобразование типов • Основной тип – строковый • Для работы с числами используются функции преобразования К целому числу K=parse. Int(x) 04. 03. 2015 К вещественному числу K=parse. Float(x) Разработка мобильных приложений с использованием Intel XDK 70

Основные операторы языка Javascript Сравнение x>y x<y x>=y x<=y 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK Сравнение x!=y x==y 71

Условный оператор if (x>y) { x=-5; } else { x=5; } 04. 03. 2015 if (x>y) { x=-5; } Разработка мобильных приложений с использованием Intel XDK 72

Оператор выбора switch (str) { case 0: операторы break; case 1: case 2: операторы break; case 3: { операторы ; break; } . . . default: операторы } 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 73

Операторы цикла Цикл с предусловием Счетчик for (var i = 0; i < 10; i++) { x=x+i; } 04. 03. 2015 while (true) alert("Привет всем!"); Разработка мобильных приложений с использованием Intel XDK Цикл с постусловием var i = 0; do (i++); while (i < 10); 74

HTML DOM < 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK H 75

HTML DOM • Страница (экран приложения) имеет иерархическую структуру document Images[0] <img src=1. gif width=100 /> all src width images Images[0] 04. 03. 2015 Images[1] Разработка мобильных приложений с использованием Intel XDK 76

HTML DOM. Обращение к элементу на странице <input type=text name=t 1 /> По полному имени doсument. all. t 1 По имени document. get. Elements. By. Name('t 1') По идентификатору document. get. Element. By. Id('t 1') 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 77

HTML DOM. Получение значения свойства элемента <input type=text name=t 1 /> По полному имени var x=doсument. all. t 1. value; По имени var x=document. get. Elements. By. Name('t 1'). value; По идентификатору var x=document. get. Element. By. Id('t 1'). value; 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 78

HTML DOM. Задание свойства элементу <input type=text name=t 1 /> По полному имени doсument. all. t 1. value='0'; По имени document. get. Elements. By. Name('t 1'). value='0'; По идентификатору document. get. Element. By. Id('t 1'). value='0'; 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 79

События и их обработка 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 80

Основы Javascript. Язык событий • Выполнение действий – реакция на событие Нажатие клавиши мыши Изменение элемента Перемещение мыши on. Change on. Mouse. Move On. Mouse. Over on. Click on. Load 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK on. Mouse. Out 81

Обработка событий • Реакция на событие – функция обработки • Значение свойства события – название функции function my() { document. get. Element. By. Id('square'). style. сolor='red'; } <p id='square' style='width: 150 px; height: 150 px; color: white; '> Изменение цвета текста</p> <input type=button on. Click='my(); '> 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 82

Основные объекты Javascript 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 83

Основные объекты Javascript Датавремя Date Массив Array 04. 03. 2015 Математический Math Строковый String Разработка мобильных приложений с использованием Intel XDK 84

Строковый объект String. Задание var txt = new String(“Это обычный текст”); var txt = new String(); var txt = “Это обычный текст”; 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 85

Строковый объект String Свойство length 04. 03. 2015 Методы Разработка мобильных приложений с использованием Intel XDK 86

Строковый объект String. Методы • Позиция подстроки в строке • (-1 при отсутствии) Первое вхождение index. Of(подстрока [, начало]? ) last. Index. Of(подстрока [, начало]? ) s. index. Of(“a”, 5) 04. 03. 2015 Последнее вхождение s. last. Index. Of(“ 2”, 3); Разработка мобильных приложений с использованием Intel XDK 87

Массив Array. Задание var names = new Array(“Даша”, “Миша”); var a=new Array(); var a=new Array(5); var d = ["1", "2", "3"]; var colors[0] = 1; colors[99] = "пурпурный"; 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 88

Массив Array Свойство length 04. 03. 2015 Методы Разработка мобильных приложений с использованием Intel XDK 89

Массив Array Удаление элемента Добавление элемента (возвр. элемент) (возвр. новый размер) первый последний в начало в конец а. shift() a. pop() x. unshift("e", ”f”); x. push("e", ”f”); 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 90

Массив Array Объединение Реверс Сортировка a. concat(b); a. reverse(); a. sort(); 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 91

Дата-время Date. Задание var d = new Date() var d= new Date([значение]) • • 04. 03. 2015 миллисекунды – (кол-во от 01/01/70 00: 00); год, месяц, день; год, месяц, день, часы, минуты, секунды; год, месяц, день, часы : минуты : секунды. Разработка мобильных приложений с использованием Intel XDK 92

Дата-время Date. Методы d. get. Date() • Число месяца d. get. Day() • Номер дня недели d. get. Month() d. get. Year() • Номер месяца • Год d. get. Full. Year() • Полный год 04. 03. 2015 Разработка мобильных приложений с использованием Intel XDK 93

Дата-время Date. Методы d. get. Hours() • Часы d. get. Minutes() • Минуты d. get. Seconds() • Секунды d. get. Milliseconds() 04. 03. 2015 • Миллисекунды Разработка мобильных приложений с использованием Intel XDK 94

Объект Math функции 04. 03. 2015 константы Разработка мобильных приложений с использованием Intel XDK 95

Объект Math. Функции Модуль числа Math. abs(x) 04. 03. 2015 Случайное число Math. random() Разработка мобильных приложений с использованием Intel XDK 96

Объект Math. Функции Возведение в степень Math. pow(x, y) Math. exp(x) Math. sqrt(x) 04. 03. 2015 Логарифмические Math. log(x) Разработка мобильных приложений с использованием Intel XDK 97

Объект Math. Функции Округление Сравнение Math. round(x) Math. min(x, y) Math. floor(x) Math. ceil(x) 04. 03. 2015 Math. max(x, y) Разработка мобильных приложений с использованием Intel XDK 98

Объект Math. Функции Тригонометрические Math. sin(x) Math. acos(x) Math. asin(x) Math. tan(x) 04. 03. 2015 Обратные тригонометрические Math. atan(x) Разработка мобильных приложений с использованием Intel XDK 99

Объект Math. Константы Основные Квадратные Math. PI Math. LN 2 Math. SQRT 2 Math. E 04. 03. 2015 Логарифмические Math. LN 10 Math. SQRT 12 Разработка мобильных приложений с использованием Intel XDK 100