jQuery - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему jQuery. Доклад-сообщение содержит 24 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Атенншен! Внимание! Я еще не выздоровела, и мне очень сложно говорить, по тому, разговоры только по существу. Прошу меня понять и понять. (не опечатка) Представим, что я частично Стивен Хокинг и могу отвечать на вопросы только печатая ответы на экране. Лекцию, по возможности буду проговаривать вслух. Даааа. Сегодня придется много читать

Слайд 2

Описание слайда:

jQuery «Программирование, наконец-то!»

Слайд 3

Описание слайда:

Java Script Слышали ли вы о JavaScript? Что это? Для чего?

Слайд 4

Описание слайда:

Java Script JavaScript был создан для добавления интерактивности в HTML страницы JavaScript - это язык сценариев или язык скриптов Язык сценариев - это облегченный язык программирования JavaScript обычно вставляется прямо в HTML страницы

Слайд 5

Описание слайда:

Java Script JavaScript дает HTML дизайнерам инструмент программирования -авторы HTML обычно не являются программистами, но JavaScript это язык сценариев с очень простым синтаксисом! Почти каждый может вставить небольшие "куски" кода в их HTML страницы JavaScript реагирует на события - JavaScript может быть настроен на выполнение определенных действий, когда происходит нечто, например когда страница загружается полностью или когда пользователь щелкает мышью на HTML элементе JavaScript может читать и писать HTML элементы - JavaScript может читать и изменять содержимое HTML элемента JavaScript может использоваться для проверки данных - JavaScript может использоваться для проверки данных, введенных в поля формы, прежде чем они будут переданы на сервер. Это предохраняет сервер от излишней обработки JavaScript может использоваться для определения браузера посетителя - JavaScript может использоваться для определения браузера пользователя, и - в зависимости от того, какой браузер, - загружать другую страницу, спроектированную специально для этого браузера JavaScript может использоваться для создание cookies - JavaScript может быть использован для сохранения и загрузки информации с пользовательского компьютера

Слайд 6

Описание слайда:

По этому, начнем с jQuery.

Слайд 7

Описание слайда:

jQuery jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Девиз jQuery "write less, do more" (пиши меньше, делай больше) отражает ее главное предназначение. jQuery позволяет создавать анимацию, обработчики событий, значительно облегчает выбор элементов в DOM и создание AJAX запросов. (ах, да, вы же не знаете, что такое DOM…и AJAX)

Слайд 8

Описание слайда:

DOM Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст». DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.

Слайд 9

Описание слайда:

Пример DOM Построим, для начала, дерево DOM для следующего документа:

Слайд 10

Описание слайда:

DOM При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.

Слайд 11

Описание слайда:

AJAX AJAX — это модное название для набора техник разработки веб-интерфейсов, позволяющих делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.

Слайд 12

Описание слайда:

Пример использования AJAx Любые онлайн карты, к примеру 2gis Можно прокручивать, перетягивать карту без необходимости обновления страницы. Данные будут подгружаться динамически, с помощью магии (AJAX)

Слайд 13

Описание слайда:

Вернемся, таки, к jQuery Код jQuery состоит из последовательно идущих команд. Команды являются основной структурной единицей jQuery. Стандартный синтаксис jQuery команд:

Слайд 14

Описание слайда:

Пример jquery кода $(document).ready(function() //код, который будет выполнен только после полной загрузки страницы { //Установим размер шрифта всех абзацев равным 20 пикселям $("p").css("fontSize","20px"); //Изменим на зеленый цвет шрифта элемента с id=el2 $("#el2").css("color","green"); //Изменим на красный цвет шрифта элемента с class=el3 $(".el3").css("color","red"); //Сделаем жирным шрифт элементов с id=el2 и class=el3 $("#el2,.el3").css("fontWeight","bold"); //Изменим на синий цвет текста кнопки $(":input").css("color","blue"); //Установим размер шрифта всех элементов имеющих атрибут href равным 20 пикселям $("[href]").css("fontSize","20px"); //Изменим на зеленый цвет ссылки на $("[href=' });

Слайд 15

Описание слайда:

Как подключить jQuery и где писать код? Первый и «не очень такой» способ – скачать библиотеку и подключить локально через link Второй и «тру» способ - подключить через google библиотеки. (так как версии библиотеки постоянно меняются, проще поменять «цыферку» в коде, чем скачивать новую библиотеку каждый раз )

Слайд 16

Описание слайда:

Как подключить jQuery Гуглим.

Слайд 17

Описание слайда:

Как подключить jQuery Серьезно, гуглим «jQuery google», переходим по первой ссылке.

Слайд 18

Описание слайда:

Как подключить jQuery Находим на этом сайте вот эти строчки, и копируем нужную версию в head. Так как мы «тру - проггеры» копируем последнюю версию.

Слайд 19

Описание слайда:

Где код-то писать, карл? Здесь код Тег можно добавлять как в head, так и в body. Мы его добавим в head, объясню почему, когда смогу нормально говорить)

Слайд 20

Описание слайда:

Задание 1 Посмотреть как подключаю библиотеку я, и сделать то же самое.

Слайд 21

Описание слайда:

Задание 2 Вместе со мной сделать все div синими.

Слайд 22

Описание слайда:

Задание 3 По клику мыши на блок, меняется фон сайта (картинки тоже в ход идут)

Слайд 23

Описание слайда:

Задание 4 Надоедливые блоки. Сделать «мишени», при нажатии на них, мишени исчезают.

Слайд 24

Описание слайда:

Задание 5 Сделать блок «Закажите звонок»: При нажатии на блок – кнопку «Закажите звонок» появляется еще один блок в центре экрана, поверх всех остальных блоков, с возможностью ввода номера телефона() и кнопка «заказать».

Теги jQuery

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