🗊Презентация Основы JavaScript

Основы JavaScript Принципы выполнения программ. Основные структуры языка. Преобразование типов данных. Функции, отложенное выполнение функций. Принципы работы с массивами, объектами, this. Основы работы с DOM. Обработка событий. Основы XMLHttpRequest.

Содержание Общие сведения о JavaScript Что нужно для работы JavaScript Общий синтаксис JavaScript Переменные и типы данных JavaScript Определение и преобразование типов данных Основные функции JavaScript, с которых надо начать Операторы и управляющие конструкции JavaScript Математические функции JavaScript Функции JavaScript, определяемые пользователем Работа с массивами в JavaScript

Содержание Работа со строками в JavaScript Функции JavaScript по работе с датой и временем Обработка событий в JavaScript, работа с DOM Отложенное выполнение функций в JavaScript Работа с XML / JSON в JavaScript Обработка ошибочных ситуаций и исключений в JavaScript ООП в JavaScript Регулярные выражения в JavaScript Использование XMLHttpRequest Кроссдоменные запросы

Общие сведения о JavaScript

Общие сведения о JavaScript

Что можно сделать с помощью JavaScript

Что нужно для работы JavaScript

Что нужно для работы JavaScript

Что нужно для работы JavaScript

Что нужно для работы JavaScript

Запуск в браузере

Запуск в браузере

Общий синтаксис JavaScript

Команды JavaScript

Комментарии в JavaScript

Регистрочувствительность

Точки с запятыми в JavaScript

Точки с запятыми в JavaScript

Переменные и типы данных JavaScript

Переменные в JavaScript

Переменные в JavaScript

Переменные в JavaScript

Типы данных в JavaScript

Элементарные типы данных: Boolean

Элементарные типы данных: Number

Элементарные типы данных: Number

Элементарные типы данных: Number

Элементарные типы данных: String

Элементарные типы данных: String

Элементарные типы данных: null

Элементарные типы данных: undefined

Элементарные типы данных: разница между null и undefined

Объектные типы данных: Object

Объектные типы данных: Object

Объектные типы данных: Array

Объектные типы данных: Array

Объектные типы данных: Array

Объектные типы данных: Array

Объектные типы данных: Array

Объектные типы данных: Function

Константы в JavaScript

Определение и преобразование типов данных

Определение типа переменной

Определение типа переменной

Определение типа переменной

Определение принадлежности классу

Преобразование типа переменной

Преобразование к Boolean

Преобразование к Number

Преобразование к Number

Преобразование к Number

Преобразование к String

Преобразование к Array

Преобразование к Array

Преобразование к Object

Важно!

Преобразование и переключение типов

Гибкое (мягкое) сравнение (==)

Жёсткое (строгое) сравнение (===)

Небольшая задача для закрепления материала

Основные функции JavaScript, с которых надо начать

Функции, которые нужны всегда

Вывод данных в выходной поток

Отладочный вывод данных

Проверка существования

Проверка существования

Удаление переменных и элементов массива

Досрочное прекращение выполнения скрипта

Сборка скрипта из нескольких файлов

Несколько очень простых примеров…

Несколько очень простых примеров…

Несколько очень простых примеров…

Несколько очень простых примеров…

Операторы и управляющие конструкции JavaScript

Операторы JavaScript

Виды операторов в JavaScript

Краткая выдержка из документации

Выражения с несколькими операторами

Оператор присваивания

Присваивание по ссылке

Арифметические операторы

Операторы инкремента и декремента

Небольшая задача для закрепления материала

Небольшая задача для закрепления материала – пояснение

Поразрядные операторы

Логические операторы

Операторы сравнения

Строковые операторы

Оператор «запятая»

Оператор проверки принадлежности классу

Оператор определения типа

Оператор доступа к свойству (аксессор)

Оператор проверки наличия свойства

Оператор удаления

Оператор исполнения

Операторы function, new, this

Управляющие конструкции JavaScript

Оператор условия

Оператор условия

Оператор условия

Оператор условия

Оператор переключения

Цикл с предусловием

Цикл с постусловием

Итерационный цикл

Итерационный цикл

Пропуск остатка итерации и выход из цикла

Тернарный оператор

Математические функции JavaScript

Общие сведения

Округление чисел

Получение случайных чисел

Перевод чисел между системами счисления

Определение минимального и максимального значения

Определение корректности чисел

Функции JavaScript, определяемые пользователем

Небольшое введение

Объявление и вызов функции

Область видимости переменных

Передача параметров по значению и по ссылке

Параметры со значением по умолчанию

Передача переменного количества параметров

Рекурсия

Анонимные функции и замыкания

Анонимные функции и замыкания

Пространства имён в JavaScript

Работа с массивами в JavaScript

Общие сведения

Общие сведения

Общие сведения

Функции по работе с массивами

Определение количества элементов в массиве

Определение, является ли переменная массивом

Поиск элемента в массиве

Поиск элемента в массиве

Обработка всех элементов массива

Обработка всех элементов массива

Объединение массивов или значений в массивы

Объединение элементов массива в строку

Сортировка массива

Работа с массивом как со стеком

Работа с массивом как со стеком

Работа с массивом как с очередью

Извлечение и удаление части массива

Задача для закрепления материала

Работа со строками в JavaScript

Общие сведения

Функции по работе со строками

Мультибайтовая кодировка строк, определение длины

Экранирование символов

Работа с отдельными символами строки

Поиск, замена, разбиение и склеивание строк

Поиск, замена, разбиение и склеивание строк

Поиск, замена, разбиение и склеивание строк

Управление регистром

Преобразование строки в веб-ссылку

Работа с регулярными выражениями

Хэш-функции

Задания для закрепления материала

Задания для закрепления материала

Функции JavaScript по работе с датой и временем

Общие сведения

Получение текущих даты и времени

Получение текущих даты и времени

Создание определённого значения даты-времени

Получение даты-времени в разных форматах

Дата и время: Q&A

Задача для закрепления материала

Обработка событий в JavaScript, работа с DOM

Общая информация

Обработчики событий

Обработчики событий: установка через атрибут HTML-тега

Обработчики событий: установка через свойство объекта

Обработчики событий: специальные решения

Обработчики событий: специальные решения

Обработчики событий: специальные решения

Порядок выполнения событий, стадии перехвата и всплытия

Порядок выполнения событий, стадии перехвата и всплытия

Порядок выполнения событий, стадии перехвата и всплытия

Порядок выполнения событий, стадии перехвата и всплытия

Порядок выполнения событий, стадии перехвата и всплытия

Объект event и его свойства

Объект event и его свойства

Работа с DOM в контексте событий

Работа с DOM в контексте событий

Работа с DOM в контексте событий

Работа с DOM в контексте событий

Отложенное выполнение функций в JavaScript

Общие сведения

Отложенное выполнение с setTimeout и setInterval

Отложенное выполнение с setTimeout и setInterval

Отложенное выполнение: setTimeout, setInterval, onload

Работа с XML / JSON в JavaScript

Общие сведения Сейчас мы посмотрим на то, как его можно использовать в JavaScript. А ещё мы посмотрим на… JSON (JavaScript Object Notation) – специальный текстовый формат обмена данными, основанный на JavaScript.

Зачем нужны эти форматы? В JavaScript использование XML или JSON связано, как правило, с обменом данными с сервером с использованием XMLHttpRequest. Какой из форматов выбирать – в большинстве случаев дело вкуса, но мы рассмотрим использование обоих вариантов на примере. Итак: сервер (код на PHP) генерирует таблицу со случайным количеством рядов и строк, передаёт её скрипту на JavaScript в обоих форматах, а тот, в свою очередь, «парсит» данные и обновляет содержимое страницы.

Пример использования XML/JSON в JavaScript и PHP

Обработка ошибочных ситуаций и исключений в JavaScript

Обработка ошибочных ситуаций Для обработки ошибочных ситуаций в JavaScript в отличие от PHP существует, фактически, один универсальный способ – обработка исключений. Мы здесь рассмотрим примеры обработки и порождения исключений.

Пример обработки исключений с try … catch … finally Итак, представим, что мы пытаемся установить значение несуществующего свойства несуществующего объекта.

Виды исключений Фактически, это и всё, что нам доступно. Даже т.н. «условные исключения» (реакция на исключения разных типов) пока ещё не стандартизированы. Сам JavaScript порождает исключения следующих типов (см. объект Error: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error): EvalError – возникает в процессе работы eval(). RangeError – возникает при нарушении диапазонов (массив отрицательной длины, Number.to*() на числах вне допустимого диапазона, не числах и т.д.) ReferenceError – аозникает при обращении к несуществующему объекту или элементу. SyntaxError – возникает в процессе анализа синтаксиса аргумента eval(). TypeError – возникает в случае, когда операция выполняется над элементом недопустимого типа. URIError – возникает, если в функции encodeURI() или decodeURl() переданы неверные параметры.

Порождение собственных исключений Мы можем порождать исключения любого из только что перечисленных типов или свои собственные:

ООП в JavaScript

Общие сведения об ООП ООП – парадигма программирования, в которой основными концепциями являются понятия объектов и классов.

ООП в JavaScript – что не так? Итак, в JavaScript реализовано не классическое ООП (с классами), а т.н. «прототипное наследование». Логика ООП состоит не в создании классов и объектов, а в… создании объектов СРАЗУ, «из ничего». Объект можно создать даже вот так:

ООП в JavaScript, создание объектов Чуть более классический вариант – создание функции (напоминаем, в JavaScript функция – тоже объект) с использованием ключевого слова new.

ООП в JavaScript, создание объектов, наследование Как можно понять из предыдущего примера, мы не можем создать «классический класс», не можем использовать модификаторы прав доступа (public, protected, private), не можем создавать «нормальные» статические методы и т.д. В общем случае это – не проблема, т.к. для простых скриптов нет необходимости в сложных решениях, но мы всё же рассмотрим, как организуется наследование.

ООП в JavaScript, создание объектов, наследование Итак, чтобы «унаследовать» «класс» от объекта (не класс от класса!!!) надо сделать так:

ООП в JavaScript, создание объектов, наследование Ещё один способ наследования – с использованием Object.create():

ООП в JavaScript, создание объектов, наследование Q: Как в JavaScript объявлять конструктор? A: «Никак». Это просто код внутри «объекта-функции», работающий с this:

ООП в JavaScript, создание объектов, наследование Q: Как защититься от ошибок создания экземпляров без new? A: Вот так:

ООП в JavaScript, создание объектов, наследование Q: Да что вообще с этим this такое творится?! A: Если очень кратко, то логика такая:

ООП в JavaScript, создание объектов, наследование Q: А как всё же сделать «классический ООП» -- со статическими методами и свойствами, константами классов, синглтонами и прочим-разным-привычным? A: Не надо. Несмотря на то, что ответы на любую часть этого вопроса легко выгугливаются (даже реализация примесей (mixins)), всё же JavaScript используется «очень по-своему», и не надо пытаться «написать PHP/C#/Java на JavaScript».

ООП в JavaScript, создание объектов, наследование Q: Я прочитал всё это трижды и всё равно ничего не понял. Что делать? A: Читать дальше. Вот здесь http://habrahabr.ru/post/131714/ есть ещё одно объяснение про «ООП в JS». Возможно, оно покажется более простым.

Задание для закрепления материала Реализуйте с помощью JavaScript классическую задачу «о геометрических фигурах»: есть «абстрактная фигура», от которой наследуется эллипс, прямоугольник и треугольник. От эллипса наследуется круг, от прямоугольника – квадрат, от треугольника – равносторонний и прямоугольный треугольники. Для всех фигур нужно вычислять периметр и площадь. Каждая фигура задаётся координатами вершин или координатами центра и радиусом (радиусами).

Регулярные выражения в JavaScript

Общие сведения Регулярные выражения вы изучали раньше. JavaScript почти следует логике PCRE в своих регулярных выражениях, так что подавляющее большинство решений из PHP будет работать и в JavaScript. Чтобы понять нюансы достаточно глубоко, смотрите документацию по JavaScript, а мы рассмотрим основное и вкратце.

Объект RegExp Объект RegExp, отвечающий за работу с регулярными выражениями, можно создать так:

Использование объекта RegExp У объекта RegExp есть следующие методы: exec – выполнить поиск и вернуть массив с результатами и дополнительной информацией. test – проверить на совпадение и вернуть true или false. У объекта String есть следующие методы по работе с регулярными выражениями: match – выполнить поиск и вернуть массив с результатами и дополнительной информацией (или null, если ничего не найдено). search – проверить на совпадение и вернуть индекс совпадения или -1, если совпадения нет. replace – произвести поиск и замену. split – разрезать строку на массив подстрок, используя в качестве разделителя регулярное выражение или фиксированную строку.

Использование RegExp.exec() Рассмотрим пример использования RegExp.exec()

Использование RegExp.test() Рассмотрим пример использования RegExp.test()

Использование Sring.match() Рассмотрим пример использования Sring.match()

Использование Sring.search() Рассмотрим пример использования Sring.search()

Использование Sring.replace() Рассмотрим пример использования Sring.replace()

Использование Sring.split() Рассмотрим пример использования Sring.split()

Задание для закрепления материала Задачи: 1) Определить, содержит ли текст хотя бы одно трёхзначное число. 2) Показать все двухзначные числа, стоящие строго в начале или строго в конце строки. 3) Для дат в формате [Д]Д.[М]М.[ГГ]ГГ выделить день, месяц, год. 4) Выделить в тексте дублирующиеся слова. 5) Определить числа с запятой или пробелом в качестве разделителя разрядов.

Использование XmlHttpRequest

Общие сведения XMLHttpRequest – специальное решение (фактически, API), позволяющее выполнять т.н. фоновые запросы к веб-серверу, не обновляя всю страницу целиком. XMLHttpRequest лежит в основе AJAX (Asynchronous Javascript and XML, асинхронный JavaScript и XML) – набора решений, позволяющих строить максимально интерактивные веб-приложения.

Как это работает В классическом варианте любые изменения страницы, требующие информации с сервера, приводят к повторной загрузке всей страницы целиком:

Как это работает В случае использования AJAX картина становится такой:

Как это реализовать Общий принцип прост, и мы его уже изучили (и даже видели пример в главе, посвящённой XML и JSON): 1) Написать код, вызываемый в результате реакции на какое-то событие (как вариант – по таймеру). 2) Создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ. 3) Обработать ответ и внести правки в страницу (или выполнить какие-то иные действия – JavaScript ведь может многое).

Как это реализовать С первой и третей частями мы уже хорошо познакомились в соответствующих главах (см. всё, что связано с обработкой событий и управлением DOM). Потому – сразу переходим ко второй (создать экземпляр XMLHttpRequest, выполнить запрос и получить ответ) и посмотрим, как это сделать максимально универсально и кроссбраузерно. Итак…

Как это реализовать Поскольку реализация XMLHttpRequestзависит от браузера, воспользуемся таким решением:

Как это реализовать Получив экземпляр XMLHttpRequest, следует его «настроить»: указать обработчики изменения состояния. Это можно сделать через два свойства: onreadystatechange – указывается функция, которая будет вызываться при любом изменении состояния (крайне не рекомендуется для синхронных запросов; впрочем, и сами синхронные запросы крайне не рекомендуются); onload – указывается функция, которая будет вызываться после завершения выполнения запроса.

Как это реализовать У XMLHttpRequest есть следующие состояния: 0 (UNSENT) – метод open() ещё не был вызван. 1 (OPENED) – метод send() ещё не был вызван. 2 (HEADERS_RECEIVED) – метод send() был вызван, и уже доступен статус ответа и заголовки ответа. 3 (LOADING) – идёт загрузка, в свойстве responseText содержится часть полученных данных. 4 (DONE) – операция завершена.

Как это реализовать Метод инициализирует запрос. Здесь особо стоит отметить параметр async, который в общем случае должен быть true, т.е. в противном случае (при долгих запросах-ответах) в зависимости от браузера можно получить низкую производительность или вовсе «замирание»/«подвисание» приложения или даже всего браузера.

Как это реализовать Метод отправляет запрос и либо ждёт его завершения (синхронный запрос), либо сразу же завершается (асинхронный запрос). Из других полезных методов стоит отметить: abort() – отмена всей операции. getResponseHeader(String header) – возвращает указанный заголовок ответа или null, если заголовка нет, или он пока не получен. setRequestHeader(String header, String value) – позволяет указать заголовок HTTP-запроса. overrideMimeType(String mimetype) – позволяет принудительно указать MIME-тип документа (полезно, например, если нужно будет проанализировать XML-ответ, но сервер не выставил правильный заголовок).

Как это реализовать Много полезной информации можно получить из свойств: readyState – текущее состояние операции (см. onreadystatechange). status – код HTTP-ответа сервера (200, 404 и т.д.) statusText – «текст кода HTTP-ответа», т.е. "OK" и т.д. response – «тело ответа» (см. документацию, там много нюансов). responseText – текст ответа сервера (как правило, или используется сам по себе для вставки в страницу, или содержит JSON). responseXML – XML-вид ответа сервера (при условии, что сервер ДЕЙСТВИТЕЛЬНО передал в ответ XML-данные). timeout – позволяет устанавливать таймаут в тысячных долях секунд (по умолчанию == 0, т.е. время выполнения запроса не ограничено). ontimeout – позволяет указать функцию, которая будет вызвана при наступлении таймаута.

Демонстрация на примере Теперь соберём всё это вместе и посмотрим, как работает синхронный и асинхронный запрос:

Кроссдоменные запросы

Суть проблемы Браузеры по соображениям безопасности ограничивают возможности скриптов по взаимодействию с другими доменами, т.е. учитывают комбинацию схемы, имени хоста и порта для того, чтобы определить, откуда был загружен скрипт, и разрешить ему выполнять только запросы по тому же адресу.

Решение проблемы Однако иногда есть объективная необходимость выполнять такие (т.н. «кроссдоменные») запросы. Сделать это помогает… JSONP (JSON with padding) – расширение формата JSON, предоставляющее возможность запросить данные с «чужого домена».

Как это работает Сначала рассмотрим серверную часть. Здесь важны две вещи: 1. Верные заголовки HTTP-ответа. 2. Правильное формирование контента. Рассмотрим на примере выполнения кроссдоменного запроса (будем посылать запрос на виртуальную машину)…

Как это работает Серверная часть:

Как это работает На клиентской части нужно сделать две вещи: 1. Подготовить функцию, имя которой передано на сервер в качестве параметра запроса. 2. Динамически создать элемент <script>. Идея состоит в том, что вы не ВЫПОЛНЯЕТЕ запрос к «чужому домену», а создаёте запрос, который загружает «скрипт» (JSON-данные, обёрнутые в вызов функции) с нужного вам домена. Как только этот «скрипт» загрузится, функция будет вызвана. А у вас в документе она уже есть – и всё.

Как это работает Клиентская часть:

Как это работает Итак, важное и ещё раз: Это – НЕ XMLHttpRequest! Да, это динамическая подгрузка данных, но она работает БЕЗ XMLHttpRequest. Алгоритм такой: Создать на клиенте функцию. Добавить на клиенте в тело документа скрипт, … Которому указать в SRC нужный адрес на «чужом» домене. Когда скрипт загрузится, выполнится ваша клиентская callback-функция и получит в качестве аргумента присланные данные.

С JavaScript – всё! О ещё некоторых небольших особенностях работы с JavaScript мы поговорим в следующем разделе, посвящённом jQuery.

Svyatoslav Kulikov Основы JavaScript