Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Цели, задачи и основы JavaScript

Содержание

HTML статиченПосле того как страница загрузиться в браузер она остаётся неизменной, информация на ней не изменяется. Чтобы получить другую информацию, нужно загрузить другую страницу. Однако пользователи (поработав с настольным программным обеспечением) привыкли к какой-никакой но интерактивности.Что
Цели, задачи и основыJavaScriptsp.courses.dp.ua HTML статиченПосле того как страница загрузиться в браузер она остаётся неизменной, информация JavaScript (ECMAScript)Цель внедрения JavaScript в браузеры – повышение интерактивности.Всё что изменяется на Задачи JavaScript1. Манипуляция элементами (тегами) HTML-страницы (когда страница уже в браузере посетителя); Реагирование на действия пользователяЧто общего у этих вещей?Каждая из этих вещей делает «Листалка» фотографийИли делать по отдельной странице под каждую фотографию, или…http://files.courses.dp.ua/web/07/ex01.htmlЗадача JavaScript – «Листалка» фотографийЗадача JavaScript – изменять разметку страницы, ссылка (атрибут src) на изображение «Листалка» фотографий (автоматическая)Задача JavaScript – изменять разметку страницы, ссылка (атрибут src) на Применение JavaScriptРазработка на JavaScript сводиться к тому, чтобы сказать браузеру: «Когда пользователь События на странице (Events)http://www.w3schools.com/jsref/dom_obj_event.asp HTML-документДревовидная структура HTML-документа Добавление элементов на страницуДобавить новый элемент на страницу – сделать его дочерним Добавление элементов на страницуДобавить новый элемент на страницу – сделать его дочерним Фотогалереяhttp://files.courses.dp.ua/web/07/ex02.htmlИспользуем ресурс https://source.unsplash.com/random/ для наполнения фотографиями нашей страницы с галереей. Немного практики: «галерея»Используем ресурс https://source.unsplash.com/random/ для наполнения фотографиями нашей страницы с галереей. Немного практики: «галерея»Заглянем в «консоль разработчика»Наш скрипт динамически добавляет новые теги в JS может подключить Bootstrap если это невозможно сделать через заголовок Немного практики: «Подключение Bootstrap в динамике»http://files.courses.dp.ua/web/bootstrap/ex01.htmlСкачайте заготовку и поместите её в Notepad++ Немного практики: «Подключение Bootstrap в динамике»Приведенный код – создаст тег с ссылкой JavaScript – язык программирования JavaScript – язык программирования1. Компьютеры не понимают русский язык (пока), они понимают JavaScript – язык программированияJavaScript предназначен, чтобы уговорить компьютер что-то сделать на стороне Тройка технологий - безальтернативнаТехнологии front-end (технологии в браузере)Структурирует информацию. Контейнер для данных Основы программирования на базе JavaScript Переменные / Типы / ОперацииВетвления (условные операторы)Циклы / Массивы (структуры данных)ФункцииОбъектыJavaScript как язык программированияего концепции Майкл Моррисон «Изучаем JavaScript» 
Слайды презентации

Слайд 2 HTML статичен
После того как страница загрузиться в браузер

HTML статиченПосле того как страница загрузиться в браузер она остаётся неизменной,

она остаётся неизменной, информация на ней не изменяется. Чтобы

получить другую информацию, нужно загрузить другую страницу. Однако пользователи (поработав с настольным программным обеспечением) привыкли к какой-никакой но интерактивности.



Что неудивительно,
ведь HTML (и CSS) не является языком программирования.

Слайд 3 JavaScript (ECMAScript)
Цель внедрения JavaScript в браузеры – повышение

JavaScript (ECMAScript)Цель внедрения JavaScript в браузеры – повышение интерактивности.Всё что изменяется

интерактивности.
Всё что изменяется на странице без перезагрузки страницы это

JavaScript*.

* В CSS3 появилась возможность создавать анимацию без применения JS.

Слайд 4 Задачи JavaScript
1. Манипуляция элементами (тегами) HTML-страницы
(когда страница

Задачи JavaScript1. Манипуляция элементами (тегами) HTML-страницы (когда страница уже в браузере

уже в браузере посетителя);
А если конкретнее, то: изменять

разметку документа. Ведь браузер «нарисует» только то что описано в разметке.

2. Делать что-то в ответ на действия пользователя
(реагировать на действия пользователя).

Слайд 5 Реагирование на действия пользователя
Что общего у этих вещей?
Каждая

Реагирование на действия пользователяЧто общего у этих вещей?Каждая из этих вещей

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

действия пользователя. Можно сказать каждое действие пользователя это событие, и на него нужно как-то отреагировать.

Слайд 6 «Листалка» фотографий
Или делать по отдельной странице под каждую

«Листалка» фотографийИли делать по отдельной странице под каждую фотографию, или…http://files.courses.dp.ua/web/07/ex01.htmlЗадача JavaScript

фотографию, или…
http://files.courses.dp.ua/web/07/ex01.html
Задача JavaScript – изменять разметку страницы, ссылка на

изображение в теге тоже относиться к разметке страницы.

Слайд 7 «Листалка» фотографий
Задача JavaScript – изменять разметку страницы, ссылка

«Листалка» фотографийЗадача JavaScript – изменять разметку страницы, ссылка (атрибут src) на

(атрибут src) на изображение в теге тоже относиться

к разметке страницы.

Слайд 8 «Листалка» фотографий (автоматическая)
Задача JavaScript – изменять разметку страницы,

«Листалка» фотографий (автоматическая)Задача JavaScript – изменять разметку страницы, ссылка (атрибут src)

ссылка (атрибут src) на изображение в теге тоже

относиться к разметке страницы. Делать это можно не только в ответ на действия пользователей но и по таймеру.

Слайд 9 Применение JavaScript
Разработка на JavaScript сводиться к тому, чтобы

Применение JavaScriptРазработка на JavaScript сводиться к тому, чтобы сказать браузеру: «Когда

сказать браузеру: «Когда пользователь нажмёт туда, сделай то».
Первая

опора JavaScript – события, механизм который позволяет связывать блоки кода (которые имеют имя и называемыми функциями), с каким либо происшествием.

Вторая опора JavaScript – возможность вносит изменения в разметку документа, а именно: добавлять теги, удалять теги, перемещать местами тега, изменять стилевые свойства тега, его атрибуты и содержимое.

Слайд 10 События на странице (Events)
http://www.w3schools.com/jsref/dom_obj_event.asp

События на странице (Events)http://www.w3schools.com/jsref/dom_obj_event.asp

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

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

Слайд 12 Добавление элементов на страницу

Добавить новый элемент на страницу

Добавление элементов на страницуДобавить новый элемент на страницу – сделать его

– сделать его дочерним для какого-либо из существующих элементов.


Слайд 13 Добавление элементов на страницу
Добавить новый элемент на страницу

Добавление элементов на страницуДобавить новый элемент на страницу – сделать его

– сделать его дочерним для какого-либо из существующих элементов.



“Additional text.”

Слайд 14 Фотогалерея
http://files.courses.dp.ua/web/07/ex02.html
Используем ресурс https://source.unsplash.com/random/ для наполнения фотографиями нашей страницы

Фотогалереяhttp://files.courses.dp.ua/web/07/ex02.htmlИспользуем ресурс https://source.unsplash.com/random/ для наполнения фотографиями нашей страницы с галереей.

с галереей.

Слайд 15 Немного практики: «галерея»
Используем ресурс https://source.unsplash.com/random/ для наполнения фотографиями

Немного практики: «галерея»Используем ресурс https://source.unsplash.com/random/ для наполнения фотографиями нашей страницы с

нашей страницы с галереей. Для плавности изменения размера мы

можем задействовать свойство transition.

Слайд 16 Немного практики: «галерея»
Заглянем в «консоль разработчика»
Наш скрипт динамически

Немного практики: «галерея»Заглянем в «консоль разработчика»Наш скрипт динамически добавляет новые теги

добавляет новые теги в документ без какой-либо перезагрузки страницы.


Слайд 17 JS может подключить Bootstrap если это невозможно сделать

JS может подключить Bootstrap если это невозможно сделать через заголовок

через заголовок

Слайд 18 Немного практики:
«Подключение Bootstrap в динамике»
http://files.courses.dp.ua/web/bootstrap/ex01.html
Скачайте заготовку и

Немного практики: «Подключение Bootstrap в динамике»http://files.courses.dp.ua/web/bootstrap/ex01.htmlСкачайте заготовку и поместите её в Notepad++

поместите её в Notepad++

Слайд 19 Немного практики:
«Подключение Bootstrap в динамике»
Приведенный код –

Немного практики: «Подключение Bootstrap в динамике»Приведенный код – создаст тег с

создаст тег с ссылкой на библиотеку bootstrap и

добавит его в . Всё будет происходить по нажатию кнопки.

Слайд 20 JavaScript – язык программирования

JavaScript – язык программирования

Слайд 21 JavaScript – язык программирования
1. Компьютеры не понимают русский

JavaScript – язык программирования1. Компьютеры не понимают русский язык (пока), они

язык (пока), они понимают языки программирования;
2. Чтобы компьютер (и

браузер как его часть) что-то сделал нужно ему сказать что нужно делать (описать последовательность действий) на языке программирования;

3. Как правило, задача любой программы заключается в манипулировании информацией (данными), например: текстом и картинками;

4. JavaScript тоже занимается манипуляцией данными (тегами и их содержимым). При помощи JS мы можем манипулировать HTML-документом: изменять теги, добавлять и удалять их.

Слайд 22 JavaScript – язык программирования
JavaScript предназначен, чтобы уговорить компьютер

JavaScript – язык программированияJavaScript предназначен, чтобы уговорить компьютер что-то сделать на

что-то сделать на стороне пользователя (на вашем компьютере, в

вашем браузере), в отличии от других языков которые работают на стороне сервера.

+

+


Слайд 23 Тройка технологий - безальтернативна
Технологии front-end (технологии в браузере)
Структурирует

Тройка технологий - безальтернативнаТехнологии front-end (технологии в браузере)Структурирует информацию. Контейнер для

информацию. Контейнер для данных (теги).
Оформление внешнего вида «контейнеров» с

данными.

Манипуляции с «контейнерами», изменения стилевых свойств.

Слайд 24 Основы программирования на базе JavaScript

Основы программирования на базе JavaScript

Слайд 25 Переменные / Типы / Операции
Ветвления (условные операторы)
Циклы /

Переменные / Типы / ОперацииВетвления (условные операторы)Циклы / Массивы (структуры данных)ФункцииОбъектыJavaScript как язык программированияего концепции

Массивы (структуры данных)
Функции
Объекты
JavaScript как язык программирования
его концепции

  • Имя файла: tseli-zadachi-i-osnovy-javascript.pptx
  • Количество просмотров: 176
  • Количество скачиваний: 0
- Предыдущая Третичный сифилис. Врождённый сифилис
Следующая - Творческий проект по музыкальной литературе М.А. Балакирев и русские народные песни

Похожие презентации

Порядок обращения с наркотическими средствами и психотропными веществами в медицинских и фармацевтических организациях Порядок обращения с наркотическими средствами и психотропными веществами в медицинских и фармацевтических организациях 202
uroki dorozhnogo dvizheniya 3 uroki dorozhnogo dvizheniya 3 90
Приветствия и знакомство. Итальянский язык Приветствия и знакомство. Итальянский язык 110
Подготовка к эксплуатации тепловозов в зимний период Подготовка к эксплуатации тепловозов в зимний период 104
Комплексная проработка рейса т/х PLATINUM RAY по маршруту Йокогама - Кальяо Комплексная проработка рейса т/х PLATINUM RAY по маршруту Йокогама - Кальяо 99
Предметно - развивающая среда в средней группе. презентация Предметно - развивающая среда в средней группе. презентация 114
Оборудование для содержания кроликов ООО Лидан Оборудование для содержания кроликов ООО Лидан 126
Ghostdrone 2.0. Живи полетом Ghostdrone 2.0. Живи полетом 106
Важнейшие Украинский сведения о происхождении украинского языка Важнейшие Украинский сведения о происхождении украинского языка 100
Презентация Леворукий ребенок презентация к уроку по теме Презентация Леворукий ребенок презентация к уроку по теме 131
Презентация по теме Путешествие по Англии презентация к уроку (подготовительная группа) Презентация по теме Путешествие по Англии презентация к уроку (подготовительная группа) 116
Презентация презентация Презентация презентация 98
Принципы и эффективные формы адаптации воспитанников к дошкольному учреждению презентация Принципы и эффективные формы адаптации воспитанников к дошкольному учреждению презентация 46
ПРЕЗЕНТАЦИЯ МЕТАБОЛИЗМ БАКТЕРИЙ (ДЛЯ СТУДЕНТОВ МЕДИЦИНСКОГО КОЛЛЕДЖА) ПРЕЗЕНТАЦИЯ МЕТАБОЛИЗМ БАКТЕРИЙ (ДЛЯ СТУДЕНТОВ МЕДИЦИНСКОГО КОЛЛЕДЖА) 141
Конспект интегрированного занятия Тема: Волшебные ниточки Подготовительная группа план-конспект занятия по окружающему миру (подготовительная группа) по теме Конспект интегрированного занятия Тема: Волшебные ниточки Подготовительная группа план-конспект занятия по окружающему миру (подготовительная группа) по теме 147
ПРОЕКТ с детьми старшего дошкольного возраста ВОЛШЕБНИК-МИКРОСКОП проект (старшая, подготовительная группа) ПРОЕКТ с детьми старшего дошкольного возраста ВОЛШЕБНИК-МИКРОСКОП проект (старшая, подготовительная группа) 271
Презентация мокшень кяльса 9-це класса Изъяснительнай придаточнай валрисьме мархта СПВ Презентация мокшень кяльса 9-це класса Изъяснительнай придаточнай валрисьме мархта СПВ 112
Проект в подготовительной к школе группе Будущий первоклассник проект (подготовительная группа) Проект в подготовительной к школе группе Будущий первоклассник проект (подготовительная группа) 117
Безопасность детей лето статья (младшая, средняя, старшая, подготовительная группа) Безопасность детей лето статья (младшая, средняя, старшая, подготовительная группа) 133
Мои права - презентация презентация к уроку (подготовительная группа) по теме Мои права - презентация презентация к уроку (подготовительная группа) по теме 44
Мастер - класс с детьми презентация к уроку по конструированию, ручному труду (младшая группа) Мастер - класс с детьми презентация к уроку по конструированию, ручному труду (младшая группа) 52
Международные инвестиционные проекты Международные инвестиционные проекты 106
Интеллектуальная игра Самый умный Интеллектуальная игра Самый умный 93
Родительское собрание Особенности подготовки ребенка к школе презентация к уроку (подготовительная группа) Родительское собрание Особенности подготовки ребенка к школе презентация к уроку (подготовительная группа) 114
Презентация по внеклассному мероприятию на тему: День воды Презентация по внеклассному мероприятию на тему: День воды 111
Личностно-ориентированный подход через межпредметные связи и проектную деятельность. методическая разработка Личностно-ориентированный подход через межпредметные связи и проектную деятельность. методическая разработка 47
Аускультация легких Аускультация легких 285
Презентация по теме Анатомия и физиология дыхательного аппарата по специальности 36.02.01 Ветеринария Презентация по теме Анатомия и физиология дыхательного аппарата по специальности 36.02.01 Ветеринария 182
Кошка Ежевичинка Кошка Ежевичинка 128
Методы диагностики заболеваний ВНЧС Методы диагностики заболеваний ВНЧС 78