Скачать "Уроки JavaScript Практика #2 Работаем с селектом"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Курс по JavaScript (JS): основы. Введение. Уроки, практика,Следующее видео: Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!

Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!

Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!

Канал: Владилен Минин

Курс по JavaScript (JS): основы. Введение. Уроки, практика,

Курс по JavaScript (JS): основы. Введение. Уроки, практика,

Канал: WebForMySelf

Урок 1. Введение в JavaScript (JS). Синтаксис. Переменные - уроки

Урок 1. Введение в JavaScript (JS). Синтаксис. Переменные - уроки

Канал: WebForMySelf

js

javascript

уроки js

уроки javascript

js tutorial

javascript tutorial

уроки жс

скрипт

web developer blog

практика js

практика javascript

javascript практика

javascript practise

00:00:02

и сегодня мы поговорим о элементе select

00:00:06

java-script один из наиболее часто

00:00:08

используемых элементов на веб-страницах

00:00:10

помимо checkbox и radiobutton

00:00:12

это как раз таки выпадающие списки

00:00:13

давайте научимся работать с ними на

00:00:16

конкретном примере для того чтобы

00:00:19

добавить выпадающий список используется

00:00:21

код html

00:00:22

таким вот образом мы осуждаем select

00:00:27

задам ему имя какое либо и идентификатор

00:00:31

после этого мы используем

00:00:34

общем давайте создадим где-то четыре

00:00:40

штуки которого будет значение и

00:00:43

какой-либо текст для него

00:00:48

давайте введем допустим знаю копал

00:00:52

предположим давайте посмотрим на

00:00:55

результат в браузере нас будут будет вот

00:01:01

такой вот список хорошо далее давайте

00:01:07

имя мы пока не будем использовать

00:01:10

зададим идентификатор нашему select у

00:01:14

называемая select и также в качестве

00:01:20

события для проверки изменения состояния

00:01:22

элемента мы будем использовать события

00:01:24

onchange как в прошлом уроке сюда мы

00:01:32

ставим название нашей функции также

00:01:35

особенностью данного элемента является

00:01:37

свойств ацилакт от яндекс

00:01:39

которое возвращает индекс выбранные

00:01:41

опции списка также обратите внимание что

00:01:44

нумерация списка будет начинаться с нуля

00:01:47

код проверки выбранной опции очень

00:01:52

простой для начала нам нужно получить

00:01:54

элемент по идентификатору а затем

00:01:56

проверим его свойства сайт яндекс все

00:02:00

это можно записать в принципе даже одной

00:02:02

строкой

00:02:07

вот такой простой код у нас получился

00:02:10

что ж давайте добавим нашу функцию займа

00:02:17

как и в прошлом уроке хан ван ван и

00:02:22

добавим сюда наш код и также давайте при

00:02:28

спишь на выполнение данного кода мы

00:02:31

выведем сообщение

00:02:34

предположим выбрана опция и здесь с

00:02:46

помощью конкатенации

00:02:48

мы видим нашу опцию давайте поставить

00:02:51

точку с запятой в конце

00:02:54

в данном случае пока что наш код не не

00:02:57

будет работать у нас будет выводить

00:03:00

только understand после того как мы

00:03:05

введём название нашей функции события он

00:03:09

czech

00:03:12

как видите нам нужно чуть-чуть

00:03:15

подредактировать наш код для того чтобы

00:03:17

он был рабочим и мы могли его полностью

00:03:20

использовать для этого нам нужно

00:03:22

добавить такой код нам нужно создать еще одну

00:03:24

переменную зима и и общем

00:03:27

и приравняем не только значение документ

00:03:32

нам нужно также получить элемент по

00:03:35

идентификатору это также mais moi select

00:03:40

и воспользовался своим общим

00:03:44

далее подредактируем наш collar

00:03:47

выбрана опция плюс общин и переменная

00:03:51

сел которая у нас будет выходить в

00:03:54

качестве массива и преобразовываем в

00:03:58

текст в принципе вы можете теперь видеть

00:04:01

как это все работает при выборе нашего

00:04:06

кода элемента из selecta

00:04:08

мы у нас бы и сводиться сообщения с тем

00:04:11

что у нас выбрана допустим опция aranc

00:04:16

apple и тому подобное работать всё

00:04:20

довольно таки просто вы также можете это

00:04:22

использовать в своих целях

00:04:23

не обязательно с выводом allure то далее

00:04:27

я хотел бы поговорить о работе с

00:04:30

ползунком районе чп java script html5 вводится

00:04:33

новое значение атрибута type

00:04:35

частности type range давайте я покажу на

00:04:38

примере удалим эту часть кода смотрите у

00:04:42

нас будет теперь

00:04:43

input type french выглядит он таким вот

00:04:49

образом это такой ползунок давайте

00:04:54

разберем как работать с этим элементом

00:04:56

для работы с ползунком нам нужно ввести

00:04:59

некоторые атрибуты это будут мин

00:05:04

минимальное значение допустим 0

00:05:06

максимальное значение допустим 100 и шаг

00:05:11

степ ну допустим у нас будет единица или

00:05:15

двойка вообще без разницы

00:05:16

также кроме того как и с любым или из

00:05:20

элементов html ка ин пат той french мы

00:05:24

можем применять оформления все азс в

00:05:27

принципе если вам будет интересно то вы

00:05:30

можете с этим этим воспользоваться

00:05:32

давайте рассмотрим как работать с

00:05:34

ползунком java-script поскольку ползунок

00:05:37

это элемент

00:05:38

input to для считывания его значение

00:05:40

можно применять свойства в л я в

00:05:43

следующем примере мы будем считывать

00:05:45

значение ползунка и выводить его в

00:05:47

абзаце этого нам нужно воспользоваться

00:05:51

значением он input что название функции

00:05:56

нашей будет записано function ван и так

00:06:00

так же нам нужен

00:06:01

идентификатор положим r1 также давайте

00:06:06

создадим абзаца

00:06:10

сертификата ram van

00:06:13

к java script а у нас будет выглядеть

00:06:15

таким образом нам нужно создать нашу

00:06:17

функцию

00:06:19

fanvan в которой мы будем получать наши

00:06:23

элемент grenych этот момент мой айди

00:06:34

здесь у нас

00:06:35

идентификатор будет к1 ренч это у нас

00:06:40

насколько вы помните

00:06:41

input хорошо дальше нам нужно создать

00:06:44

объявить переменную с параграфом которое

00:06:49

будет получать значение для нашего

00:06:51

параграфа

00:06:56

далее нам нужно подгрузить наши данные в

00:07:01

наш прорыв с помощью свойства в принципе

00:07:08

это все давайте сохранимся данные и

00:07:11

попробуем посмотреть что получилось как

00:07:15

видите мы меняем значение ползунка

00:07:18

значения в параграфе я число также

00:07:21

меняется с перемещением ползунка также

00:07:25

обратите внимание на новое событие он

00:07:27

input события он input срабатывает при

00:07:31

любом изменении в элементе формы

00:07:33

например при вводе нового символа или

00:07:35

при перемещении ползунка на 1 пиксель

00:07:37

отличат события onchange которая

00:07:40

срабатывает только при потере фокуса

00:07:42

элементом он input срабатывает при любом

00:07:45

изменении в элементе

00:07:46

данное событие добавляет ползунку

00:07:49

интерактивности давайте посмотрим еще

00:07:51

одно прикольное

00:07:53

решение допустим вы видим значение

00:07:55

ползунка в input для этого необходимо

00:07:58

значение свойства ползунок потом well

00:08:01

you передать в свойства input виллы давайте

00:08:05

рассмотрим на примере для этого нам

00:08:07

нужно удалить наш программ и создать

00:08:09

новый им тут так текст и добавим сюда

00:08:13

идентификатор

00:08:16

и один после этого запишем нашу функцию

00:08:19

которое будет выглядеть таким образом

00:08:22

здесь мы можем оставить в принципе здесь

00:08:25

нам нужно поменять значение на

00:08:26

и 1 или put one далее нам нужно поменять

00:08:31

стиль значения на и один здесь нужно

00:08:35

было заменить новеллы и

00:08:37

итак после того как мы перемещаем наш

00:08:40

ползунок нас меняется значение в нашем

00:08:42

им пути также можете стилизовать input

00:08:45

чтобы это выглядело красивей а также у

00:08:47

меня есть еще одно интересное задание

00:08:48

для вас давайте попробуем изменять

00:08:52

ширину блока при перемещении ползунка

00:08:55

для этого давайте создадим div с

00:08:59

идентификатором примеру тест для этого

00:09:06

нам нужно будет создать

00:09:08

css-файл и придать ему размеры и цвет

00:09:12

фона также не забудьте подключить свой

00:09:15

своей стиле чтобы все отображалось верь

00:09:19

после этого давайте придадим стиле

00:09:22

нашему блоку с тест давайте поставим

00:09:28

ширину и высоту 20 пикселей и ширину

00:09:31

также 20 пикселей и бэкграунд у нас

00:09:36

будет допустим грим зеленого цвета

00:09:40

давайте посмотрим как это выглядит вот

00:09:43

таким вот образом данный момент нас

00:09:45

ничего не перемещаться ничего не

00:09:46

двигается дальше давайте напишем нашу

00:09:49

функцию первое переменную можно так и

00:09:51

оставить

00:09:52

а во второй мы перепишем здесь у нас

00:09:54

будет называемая div и

00:09:59

идентификатор у нас тест

00:10:04

далее нам нужно записать такую строку

00:10:10

воспользуемся стилями

00:10:13

нашего наш переменная div и будем

00:10:18

использовать ее а ширину равную нашему

00:10:22

наш переменный ranch ее значению по

00:10:28

пиксель на принципе это все пересмотрим

00:10:34

при каждом перемещении нашего ползунка у

00:10:37

нас будет срабатывать данная функция

00:10:41

изменяться ширина нашего блока div

00:10:44

принципе это все для этого урока всем

00:10:46

спасибо за просмотр до новых встреч пока

Описание:

Уроки JavaScript Практика #2 В этому уроке на хороших примераъ рассмотрим работу с ползунком и селектом! ======================================================== ПОДПИШИСЬ на канал "Web Developer Blog" - https://www.youtube.com/channel/UCe_H8hzx9WV7Ca7Ps5gt72Q?sub_confirmation=1 И не пропускай новые видео!!! ======================================================== ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - https://www.youtube.com/watch?v=JISFx18J7nc&list=PLVfMKQXDAhGW0p_BEEe47UkCgNoS_dyki Основы JavaScript - https://www.youtube.com/watch?v=ch7eVYUvb_w&list=PLVfMKQXDAhGUaEtJ_fOUz0F7TJtidE7Qw Уроки Bootstrap 4 - https://www.youtube.com/watch?v=47bs0eMJ8ts&list=PLVfMKQXDAhGWqjumN9DPrWDO_HbmChuZt Уроки Framework для верстки Foundation 6 - https://www.youtube.com/watch?v=SqR6kn4_ytA&list=PLVfMKQXDAhGW8KSj8eTFEfP9YIL9oTGaq Рубрика "Основы за 10 минут" - https://www.youtube.com/watch?v=COhT3y0ztMI&list=PLVfMKQXDAhGWPy1tHOw34uBbwViK8qrxh Верстка сайта на Foundation 6 - https://www.youtube.com/watch?v=Wnwx8OtcrC8&list=PLVfMKQXDAhGWGhSqIVX0hg1SF_JFAxtyI Основы препроцессора SASS - https://www.youtube.com/watch?v=4Fl23vtPRx0&list=PLVfMKQXDAhGXMqOHEUVvn8WREVuXNfxZ- Уроки по Sublime text 3 - https://www.youtube.com/watch?v=dAUBTfT2ITo&list=PLVfMKQXDAhGXTtaRwrHzPLNQALkVhGWKj Видео про заработок на YouTube - https://www.youtube.com/watch?v=4BXE0Weqqwk&list=PLVfMKQXDAhGW5CglxOCshGvHRiXcwCrp3 Создаем интернет магазин на PrestaShop - https://www.youtube.com/watch?v=GI2yZBGXL6s&list=PLVfMKQXDAhGVJSo5KM34cKavxci19Pcn- Уроки jQuery - https://www.youtube.com/watch?v=dSseIBt8yBM&list=PLVfMKQXDAhGXQcouhIblV910Rv7lRscH3 ======================================================== ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - https://goo.gl/6mO5GL ======================================================== Мой заработок на YOUTUBE - ►https://yoola.app/r/6115825400810

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Уроки JavaScript Практика #2 Работаем с селектом"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Уроки JavaScript Практика #2 Работаем с селектом" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Уроки JavaScript Практика #2 Работаем с селектом"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Уроки JavaScript Практика #2 Работаем с селектом" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Уроки JavaScript Практика #2 Работаем с селектом"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Уроки JavaScript Практика #2 Работаем с селектом"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.