Презентация JavaScript. Занятие 18 онлайн

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему JavaScript. Занятие 18 абсолютно бесплатно. Урок-презентация на эту тему содержит всего 20 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.

Презентации » Устройства и комплектующие » JavaScript. Занятие 18

Просмотр ВСЕЙ презентации! ЖМИТЕ

Оцените презентацию от 1 до 5 баллов!

Смотреть онлайн
Скачать

Тип файла:

ppt / pptx (powerpoint)
Всего слайдов:

20 слайдов
Для класса:

1,2,3,4,5,6,7,8,9,10,11
Размер файла:

359.04 kB
Просмотров:

115
Скачиваний:

0
Автор:

неизвестен

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

№1 слайд

Содержание слайда: JavaScript Занятие №18

№2 слайд

Содержание слайда: Библиотеки и Фреймворки

№3 слайд

Содержание слайда: Библиотека Набор полезных функций, которые можно использовать в программе Не определяет структуру приложения Не накладывает ограничений В одном проекте может быть подключено множество библиотек

№4 слайд

Содержание слайда: Некоторые популярные библиотеки jQuery, jQuery-UI, прочие jQuery-плагины React.js, Redux, Material-UI Moment.js Charts.js, D3 Underscore / Lo-dash Bootstrap Rx.js И ещё много других

№5 слайд

Содержание слайда: Фреймворки Набор инструментов для построения полноценных сайтов Динамическое изменение данные на странице (Data Binding) Маршрутизация (Routing) …. Фреймворк определяет структуру приложения Структура папок Названия файлов SPA - Single Page Application Одностраничное приложение 1 сайт - 1 фреймворк

№6 слайд

Содержание слайда: Примеры фреймворков AngularJS, Angular React (на самом деле - библиотека) Используется с набором вспомогательных библиотек Backbone + Marionette Vue.js EmberJS И множество других

№7 слайд

Содержание слайда: Где скачать библиотеки? На официальном сайте библиотеки Скачать файл с библиотекой и положить в отдельную папку своего проекта Использовать ссылку с CDN Ссылка на файл библиотеки с удаленного общедоступного ресурса Скачать с использованием NPM Node Package Manager Хранение библиотеки в собственном проекте Ряд преимуществ

№8 слайд

Содержание слайда: NPM - Node Package Manager https://www.npmjs.com/ https://nodejs.org/en/ Download and install Node Install NPM Have fun!

№9 слайд

Содержание слайда: Библиотека jQuery https://code.jquery.com/jquery-3.1.1.min.js npm install jquery

№10 слайд

Содержание слайда: npm init

№11 слайд

Содержание слайда: jQuery $ - основная переменная, содержащая экземпляр jQuery $(.....) - экземпляр jQuery может быть использован как функция Можно передать любой валидный селектор Можно передать объект document Преобразовываем DOM элемент в jQuery элемент Очень много callback-функций

№12 слайд

Содержание слайда: <div id="text">Hello, world!</div> <div id="text">Hello, world!</div> <input type="button" class="button" value="Press me"/> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.button').click(function () { $('#text').html('Hello, space!'); $('#text').append('!!!!!!'); }); }); </script>

№13 слайд

Содержание слайда: jQuery Show/Hide $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });

№14 слайд

Содержание слайда: FadeIn / FadeOut $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); //////// $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });

№15 слайд

Содержание слайда: Обработка событий, триггер события $(document).ready(function () { $('div').click(function() { console.log('div clicked'); }); $(".button").click(function () { $('div').trigger('click'); }); });

№16 слайд

Содержание слайда: Добавление и удаление классов, стилей $(document).ready(function () { $(".button").click(function () { $('div').addClass('my-class'); $('div').removeClass('first-class'); $('div').css('color', 'red'); }); });

№17 слайд

Содержание слайда: Добавляем событие на новый элемент $(document).ready(function () { $(".button").click(function () { $('#text').html('<div id="newOne">new text, click here</div>'); }); $('#text').on('click', '#newOne', function() { console.log('hello there'); }); });

№18 слайд

Содержание слайда: Добавление нового элемента $('<a/>', { id: 'block', href: 'https://google.com.ua', title: 'Have fun', text: 'Google it', click: function(e) { e.preventDefault(); alert('hello world!'); } }).appendTo('#wrapper');

№19 слайд