JavaScript. Занятие №18 - презентация, доклад, проект скачать

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

Содержание ▲

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

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

Слайд 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');