Что такое 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
  • Количество просмотров: 150
  • Количество скачиваний: 0
- Предыдущая Третичный сифилис. Врождённый сифилис
Следующая - Творческий проект по музыкальной литературе М.А. Балакирев и русские народные песни

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

Развивающие игры Пальчики играют-речь развивают презентация по теме Развивающие игры Пальчики играют-речь развивают презентация по теме 90
Методика ТАТ Методика ТАТ 133
Функциональная анатомия мышечной системы Функциональная анатомия мышечной системы 83
p 5 p 5 73
Выступление на общем родительском собрании по теме: Трудовое воспитание дошкольников. материал по теме Выступление на общем родительском собрании по теме: Трудовое воспитание дошкольников. материал по теме 87
Прэзентацыя на тэму Складаназлучаны сказ (11 сказ) Прэзентацыя на тэму Складаназлучаны сказ (11 сказ) 246
Рак почки Рак почки 123
Яшел энәле керпе әкияте.Презентация Яшел энәле керпе әкияте.Презентация 97
Педагогическая диагностика воспитанников по образовательной области: Физическое развитие. презентация Педагогическая диагностика воспитанников по образовательной области: Физическое развитие. презентация 96
Родительское благословение презентация Родительское благословение презентация 228
Презенация для начальной школы : Юные пожарные презентация к уроку по теме Презенация для начальной школы : Юные пожарные презентация к уроку по теме 69
Семинар Кембридж тәсілі бойынша Семинар Кембридж тәсілі бойынша 133
Презентация для детей старшего дошкольного возраста : Пословицы и поговорки о весне презентация к уроку (старшая группа) Презентация для детей старшего дошкольного возраста : Пословицы и поговорки о весне презентация к уроку (старшая группа) 83
Презентация Өмір, қымбатсың маған! 7-сынып Презентация Өмір, қымбатсың маған! 7-сынып 381
Тема урока: Скорость химических реакций.Факторы, влияющие на скорость реакций Тема урока: Скорость химических реакций.Факторы, влияющие на скорость реакций 84
Презентация Имя твое неизвестно, подвиг твой бессмертен”. презентация к уроку (подготовительная группа) Презентация Имя твое неизвестно, подвиг твой бессмертен”. презентация к уроку (подготовительная группа) 86
Конспект образовательной деятельности во второй младшей группе по теме:МЫ ПЕЧЕМ ТОРТИКИ ИЗ ПЕСКА презентация к занятию (младшая группа) по теме Конспект образовательной деятельности во второй младшей группе по теме:МЫ ПЕЧЕМ ТОРТИКИ ИЗ ПЕСКА презентация к занятию (младшая группа) по теме 94
презентация проекта Семья календарно-тематическое планирование (средняя группа) по теме презентация проекта Семья календарно-тематическое планирование (средняя группа) по теме 83
ЧЕТЫРЕХ-ЭТАПНЫЙ ПЛАН ПРИВЛЕЧЕНИЯ Вы можете привлекать Новичков легко и просто! ЧЕТЫРЕХ-ЭТАПНЫЙ ПЛАН ПРИВЛЕЧЕНИЯ Вы можете привлекать Новичков легко и просто! 66
Экология Экология 103
Метель. Метель. 94
Проект Как я провел лето проект (средняя группа) Проект Как я провел лето проект (средняя группа) 100
Слайдовое сопровождение День логиста Слайдовое сопровождение День логиста 110
Фразеологизмы. Что это? Как их понять? презентация к уроку по русскому языку (3 класс) Фразеологизмы. Что это? Как их понять? презентация к уроку по русскому языку (3 класс) 100
Наши успехи и достижения материал Наши успехи и достижения материал 101
презентация группы Сказка презентация к уроку (средняя группа) презентация группы Сказка презентация к уроку (средняя группа) 83
Внутренняя и внешняя политика Екатерины i. Культура. Внутренняя и внешняя политика Екатерины i. Культура. 116
Ценностные и смысложизненные ориентации. Ценностные и смысложизненные ориентации. 94
Предметно-пространственная развивающая среда: центр ПДД, центр физического развития презентация Предметно-пространственная развивающая среда: центр ПДД, центр физического развития презентация 25
Темы Темы 124