Содержание
- 2. О чём курс?
- 3. JavaScript – язык программирования (в отличии от HTML и CSS), поэтому фундамент нашего курса – основы
- 4. Базовый JavaScript. Основы программирования. Базовые концепции. JavaScript как язык программирования. Клиентский JavaScript. JavaScript в браузере. Инфраструктура
- 5. План нашего курса ECMAScript-5/2015/2016…
- 6. План нашего курса
- 7. План нашего курса
- 8. План нашего курса
- 9. На кого ориентирован курс На тех кто знаком с языками HTML и CSS, кто умеет сверстать
- 10. Акценты Что является основой Понять суть и принципы
- 11. Кто проводит курс? Анатолий Кигель >11 лет в сфере веб-разработки. 7 лет опыта преподавательской деятельности в
- 12. Взаимодействие
- 13. courses.dp.ua Презентация доступна по адресу: vk.com/js.courses Группа для вопросов, обсуждений, объявлений (и презентации там тоже будут).
- 14. Хороший вопрос принесёт знания, плохой вопрос добавить путаницу и проблемы. О вопросах Хороший вопрос У менять
- 15. Зачем нужен JavaScript
- 16. HTML + CSS + JavaScript Безальтернативная тройка технологий front-end. Технологии которые работают в браузере пользователя.
- 17. «Чистый» JS против JS-библиотек/фреймворков Чистый JS позволяет сделать всё то, что предлагают JS-библиотеки/фреймворки.
- 18. HTML (HyperText Markup Language) – язык разметки текста, по сути структурирует (определяет структуру текста) и выполняет
- 19. Данные + Метаданные Page title Текст + Как текст отобразить HTML Составные части HTML
- 20. Синтаксис языка HTML Text data Теги как контейнер для блока текста + атрибуты (свойства, уточняют задачи
- 21. Цели и задачи языка HTML Без HTML, веб-страница всего лишь длинная текстовая строка.
- 22. Цели и задачи языка HTML HTML предназначен для задания структуры документа, и выполняет роль «контейнера» для
- 23. HTML-документ Древовидная структура HTML-документа
- 24. HTML-документ Древовидная структура HTML-документа
- 25. Цели и задачи языка CSS Задать оформления элементов страницы (тегов и их содержимого).
- 26. CSS CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык описания внешнего вида документа,
- 27. Синтаксис CSS div { color: red; font-size: 16pt; } CSS селектор, говорит к каким элементам будет
- 28. CSS отвечает за такие аспекты Внешний вид элемента (цвет, шрифт, прозрачность и т.д. ); Размеры элемента
- 29. Есть проблема - HTML статичен* Типичный сценарий работы с сайтом без JavaScript: любое действие требует перехода
- 30. Так зачем же нужен JavaScript? JavaScript позволяет «оживить» web-страницу, чтобы страница могла изменять своё содержание (и
- 31. Задача JavaScript – манипуляция HTML-документом 1. Добавление элементов (тегов) на страницу (в документ); 2. Удаление элементов
- 32. Система управления основанная на событиях Каждая из этих вещей делает что-то, только в ответ на действия
- 33. Задача JavaScript – манипуляция HTML-документом 4. Реагирование на действия пользователя; Суть интерактивности – делать что-то в
- 34. Версии JavaScript JavaScript – реализация языка ECMAScript ECMAScript 3 ECMAScript 5 ECMAScript 6 => ECMAScript 2015
- 35. Версии JavaScript Стандарт впереди планеты всей, однако, поддержка…. http://kangax.github.io/compat-table/es6/
- 36. На практике
- 37. Как всё вышеописанное происходит? Первый пример: http://courses.dp.ua/files/js/01/ex01.html
- 38. Инструменты Которые нам пригодятся
- 39. Инструменты: Консоль разработчика в браузере (клавиша F12) Подробная информация о том, как бразуер «понимаем» созданный вами
- 40. Инструменты: Браузер Chrome N.B. JavaScript выполняется браузерами, поэтому поддерка тех или иных функций JavaScript зависит от
- 41. Инструменты: http://google.com
- 42. Инструменты: Notepad++
- 43. Инструменты: «допустимый» синтаксис
- 44. Инструменты: служебные функции console.log(…); alert(…); Создаём новый файл в notepad++, сохраняем файл как test.html, и запускаем
- 45. Инструменты: служебные функции prompt(…);
- 46. Инструменты: служебные функции confirm(…);
- 47. Hello world!
- 48. Давайте попробуем или “Hello World!!!” Создаём новый файл в notepad++, сохраняем файл как index.html, и запускаем
- 49. В результате получаем… Давайте попробуем или “Hello World!!!”
- 50. Node.JS
- 51. JavaScript не только в браузере: Node.JS https://nodejs.org/en/ NodeJS – программа, которая ставиться на компьютер и позволяет
- 52. Интерпретатор JavaScript-кода Позволяет проверить JavaScript код, и сразу получить результат его работы построчно. В состав NodeJS
- 53. Интерпретатор JavaScript-кода Консольная команда node code.js позволяет запустить на выполнение файл с JS-кодом целиком. В данном
- 54. http-сервер на базе Node.JS Работоспособность запущенного http-сервера легко проверить запустив браузер и открыв адрес http://localhost или
- 55. Майкл Моррисон «Изучаем JavaScript»
- 56. http://learn.javascript.ru/ JavaScript.ru Современный учебник JavaScript
- 57. Не забываем
- 59. Скачать презентацию