JavaScript. Занятие №18

Сентябрь 3, 2022

Главная
Алгебра
JavaScript. Занятие №18

Содержание

2. Библиотеки и Фреймворки
3. Библиотека Набор полезных функций, которые можно использовать в программе Не определяет структуру приложения Не накладывает ограничений
4. Некоторые популярные библиотеки jQuery, jQuery-UI, прочие jQuery-плагины React.js, Redux, Material-UI Moment.js Charts.js, D3 Underscore / Lo-dash
5. Фреймворки Набор инструментов для построения полноценных сайтов Динамическое изменение данные на странице (Data Binding) Маршрутизация (Routing)
6. Примеры фреймворков AngularJS, Angular React (на самом деле - библиотека) Используется с набором вспомогательных библиотек Backbone
7. Где скачать библиотеки? На официальном сайте библиотеки Скачать файл с библиотекой и положить в отдельную папку
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 может быть использован как
12. Hello, world! $(document).ready(function() { $('.button').click(function () { $('#text').html('Hello, space!'); $('#text').append('!!!!!!'); }); });
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(' new text, click here
18. Добавление нового элемента $(' ', { id: 'block', href: 'https://google.com.ua', title: 'Have fun', text: 'Google it',
19. Полезные ссылки React vs Angular vs Vue: What to Choose for Your Next Project https://www.youtube.com/watch?v=i8xsbYgMiBs
21. Скачать презентацию

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

Hello, world!

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

id="newOne">new text, click here

');
});
$('#text').on('click', '#newOne', function() {
console.log('hello there');
});
});

Слайд 18

Добавление нового элемента
$('', {
id: 'block',
href: 'https://google.com.ua',
title: 'Have

fun',
text: 'Google it',
click: function(e) {
e.preventDefault();
alert('hello world!');
}
}).appendTo('#wrapper');

Полезные ссылки
React vs Angular vs Vue: What to Choose for Your

Next Project
https://www.youtube.com/watch?v=i8xsbYgMiBs