JavaScript в веб разработке

О чём курс?

JavaScript – язык программирования (в отличии от HTML и CSS), поэтому

Базовый JavaScript. Основы программирования. Базовые концепции. JavaScript как язык программирования.

Клиентский JavaScript.

План нашего курса

ECMAScript-5/2015/2016…

План нашего курса

План нашего курса

План нашего курса

На кого ориентирован курс

На тех кто знаком с языками HTML и

Акценты

Что является основой

Понять суть и принципы

Кто проводит курс?

Анатолий Кигель
>11 лет в сфере веб-разработки.
7 лет опыта преподавательской

Взаимодействие

courses.dp.ua

Презентация доступна по адресу:

vk.com/js.courses

Группа для вопросов, обсуждений, объявлений (и презентации там

Хороший вопрос принесёт знания, плохой вопрос добавить путаницу и проблемы.

О вопросах

Хороший

Зачем нужен JavaScript

HTML + CSS + JavaScript

Безальтернативная тройка технологий front-end. Технологии которые работают

«Чистый» JS против JS-библиотек/фреймворков

Чистый JS позволяет сделать всё то, что предлагают

HTML (HyperText Markup Language) – язык разметки текста, по сути структурирует

Данные + Метаданные

Текст + Как текст отобразить

HTML

Составные части

Синтаксис языка HTML

атрибуты (свойства, уточняют задачи тега, теги могут быть без атрибутов);

Текстовые данные (содержимое, контент).

состоит из:

Цели и задачи языка HTML

Без HTML, веб-страница всего лишь длинная текстовая

Цели и задачи языка HTML

HTML предназначен для задания структуры документа, и

HTML-документ

Древовидная структура HTML-документа

HTML-документ

Древовидная структура HTML-документа

Цели и задачи языка CSS

Задать оформления элементов страницы (тегов и их

CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык описания внешнего вида

Синтаксис CSS

div { color: red; font-size: 16pt; }

CSS селектор, говорит к

CSS отвечает за такие аспекты

Внешний вид элемента (цвет, шрифт, прозрачность

Есть проблема - HTML статичен*

Типичный сценарий работы с сайтом без JavaScript:

Так зачем же нужен JavaScript?

JavaScript позволяет «оживить» web-страницу, чтобы страница могла

Задача JavaScript – манипуляция HTML-документом

1. Добавление элементов (тегов) на страницу (в

Система управления основанная на событиях

Каждая из этих вещей делает что-то, только

Задача JavaScript – манипуляция HTML-документом

4. Реагирование на действия пользователя;

Суть интерактивности –

Версии JavaScript

JavaScript – реализация языка ECMAScript

ECMAScript 3
ECMAScript 5
ECMAScript 6 => ECMAScript

Версии JavaScript

Стандарт впереди планеты всей, однако, поддержка….

http://kangax.github.io/compat-table/es6/

На практике

Как всё вышеописанное происходит?

Первый пример: http://courses.dp.ua/files/js/01/ex01.html

Инструменты
Которые нам пригодятся

Инструменты: Консоль разработчика в браузере (клавиша F12)

Подробная информация о том, как

Инструменты: Браузер Chrome

N.B. JavaScript выполняется браузерами, поэтому поддерка тех или иных

Инструменты: http://google.com

Инструменты: Notepad++

Инструменты: «допустимый» синтаксис

Инструменты: служебные функции

console.log(…);

alert(…);

Создаём новый файл в notepad++, сохраняем файл как test.html,

Инструменты: служебные функции

prompt(…);

Инструменты: служебные функции

confirm(…);

Hello world!

Давайте попробуем или “Hello World!!!”

Создаём новый файл в notepad++, сохраняем файл

В результате получаем…

Давайте попробуем или “Hello World!!!”

Node.JS

JavaScript не только в браузере: Node.JS

https://nodejs.org/en/

NodeJS – программа, которая ставиться на

Интерпретатор JavaScript-кода

Позволяет проверить JavaScript код, и сразу получить результат его работы

Интерпретатор JavaScript-кода

Консольная команда node code.js позволяет запустить на выполнение файл с

http-сервер на базе Node.JS

Работоспособность запущенного http-сервера легко проверить запустив браузер и

Майкл Моррисон «Изучаем JavaScript» 

http://learn.javascript.ru/

JavaScript.ru

Современный учебник JavaScript

Не забываем