Здравсвуйте, уважаемые друзья! Вы только начинаете изучать JS, но не хвататет практики? Уже пытались учить JS и даже достигли определенных результатов, но внезапно застопорились в своем развитии? Вы пришли по нужому адресу!
На этом сайте я попытаюсь выложить для вас простые и понятние практические уроки, которые помогут лучше понять, что и для чего существует в обширном мире JS, где применяется и, главное, куда двигаться дальше.
В добрый путь!
Я не буду давать вам тонны теоретической информации. Уверена, это ни к чему. Только краткие выдержки, располагающиеся рядом со значком книги. Очень часто информация будет подаваться "своими словами". Чтобы прочесть официальные определения, ищите значок информации... ну и google в помощь!
Более подробную информацию всегда можно прочитать по ссылке, рядом со значком информации
Значок мозговых извилин означает, что на эту информацию нужно обратить внимание. Так обозначаются интересности и полезности.
Значок карандаша - это заметки. То, что желательно занести в свою шпаргалку, чтобы иметь под рукой для дальнейших уроков.
Весь код, используемый в уроках я нарочно буду выкладывать картинками. Это в ваших же интересах! От "ctrl+C" и "ctrl+V" пользы мало. Только набирая все ручками, читая и проверяя код, вы действительно научитесь чему-то новому. Чтобы прочитать текст на картинке, нужно просто на нее кликнуть.
Первое и самое элементарное, что должен уметь каждый - это получение элементов с DOM.
DOM - Document Object Model (это то, как JS видит наш html документ с разметкой)
Каждый HTML-тег является объектом. Вложенные теги являются его «детьми», а сам тег - родителем. Также существуют теги - соседи.
Для того, чтобы разобраться, что и как работает, необходимо вспомнить основы html
Допустим, у нас есть начальный документ index.html
Напишем базовую верстку (с css заморачиваться не будем)
Выглядит все это коряво, но для нас главное само наличие элементов
Не забываем о необходимости подключить наш файлик js внизу документа html
Получение элемента с index.html
Обратите внимание, что querySelector получает только первый элемент с указнным классом или идентификатором, если их несколько
Получим остальные элементы
Можно использовать и другие способы получения элементов. Но они считаются немного устаревшими
Проверить, действительно ли мы получили нужные элементы, легко. Для этого достаточно вывести их в консоль
Посмотреть результат можно в браузере, через контекстное меню открыв вкладку разработчика
Если мы все сделали правильно, то в во вкладке console увидим следующее
Похожую картину получаем и в первом варианте
Но как быть с нашим списком? Если мы хотим получить все его елементы, можно использовать querySelectorAll
1) Повторить у себя на компе все то, что было в уроке
2) Набросать другой html документ и получить из него элементы не подсматривая в шпаргалку.
Почему именно работа с input? На самом деле чаще всего именно из них приходится получать информацию, сохранять ее, а потом использовать. Разберемся, как это сделать?
Для начала создадим некую страницу, на которой будет происхоть взаимодействие с пользователем:
Мы не будем обсуждать, что происходит в нашем css - надеюсь, это понятно всем. А верстка имеет следующий вид:
При этом:
- label - обеспечивает срабатывание клика не только на само окошко, но и на текст около него;
- type="checkbox" - определяет какой именно input мы используем;
- id - поможет нам обратиться к каждому input через JS (Урок 1);
- onchange="checkbox()" - устаревший способ отслеживания события. Дословно, мы написали: при изменении состояния input (onchange) запустить функцию с именем checkbox().
- id="result" - нужен для того, чтобы выводить результат выбора пользователя. Для начала просто наличие или отсутвие выбора.
Я нарочно для первого примера привожу устаревший способ отслеживания события (но все еще работающий!), так как по моему мнению он более простой и понятный. Поехали дальше?
В нашем файле JS первым делом получаем input и span с id="result"
Все это можно записать компактнее:
Следующим этапом необходимоп роверить, выбран ли наш чекбокс. И если выбран хоть один, в результат написать "Спасибо за ваш выбор". В ином случае (если не выбран ни один), вывести "Вы не выбрали ни один вариант".
Более подробную информацию про if else можно прочитать в учебнике JAVASCRIPT.RU
То есть у нас есть логическая конструкция:
if (условие) { действие}
else {действие}
Но есть более простая и компактная запись:
(условие) ? (действие, если true) : (действие, если false)
Обратите внимание, насколько лаконичнее стала запись. Этот способ записи, конечно, предпочтительнее. Помимо лаконичности, он даст вашему коду быстродействие.
1) Повторить у себя на компе все то, что было в уроке.
2) Набросать другой html документ и повторить урок, не подсматривая в шпаргалки.
3) Вывод результата сделать с помощью alert.
На прошлом уроке мы разобрались с самым простым случаем работы с input. Но на самом деле и самих input много всяких видов, да и работа с ними лишь в получении значения не заканчивается. Посмотрим, как ограничить выбор пользователя одним вариантом?
Результат:
Для ограничения пользователя одним вариантом выбора, проще всего воспользоваться input c типом radio
Теперь, как и всегда, получаем наши элементы. И вспоминаем о существовании свойства length - которое укажет нам на количество членов нашего псевдоммасива
С помщью console.log мы вывели интересуемые значения в консоль, чтобы проверить правильность получения
Смотрим JS.
Более подробную информацию про слушателя события можно прочитать в учебнике JAVASCRIPT.RU
А что если у нас выпадающий список и выбор нужно сделать из его вариантов?
В начале хочу обратить ваше внимание: selectedIndex - показывает порядковый номер выбранного элемента списка option. При чем значение -1 означает, что ни один из элементов не выбран.
Более подробную информацию про selectedIndex можно прочитать в учебнике MDN web docs
Наш html-код для этого случая будет иметь самый обычный вид:
JS
1) Повторить у себя на компе все то, что было в уроке.
2) Набросать другой html документ и повторить урок, не подсматривая в шпаргалки.
3) Вывод результата сделать с помощью alert.
Довольно часто происходит следующее: пользователь вводит через запятую какие-то слова (например, какие магазины он посещал в прошлом месяце), а нам нужно дальше эту информацию правильно сохранить и как-то использовать.
Результат:
В следующих уроках мы рассмотрим, что делать, если пользователь не поставил запятые, если поставил слишком много пробелов между словами и т.д. Пока же для простоты допустим только то, что он неадекватно использовал клавишу SHIFT :)
P.S.: В наш input вы можете ввести свои варианты. Пока там показаны значения по умолчанию. HTML имеет вид:
В данном уроке мы будем работать со строками.Более подробную информацию можно прочитать в учебнике JAVASCRIPT.RU
JS
В консоли мы увидим, что данные отображаются корректно. В начале те, что по умолчанию, затем те, что были введены вручную.
Мы получаем данные с input строкой. Переведем ее в нижний регистр (подробная информация по ссылке выше).
Теперь, для дальнейшей работы с вариантами ответа (variant1, variant2, variant3), необходимо, чтобы каждое слово в нашей строке стало отдельным элементом массива.
Для примера, выведем каждый элемент массива в наш результат. Но, конечно, в дальнейшем, их можно использовать, как вашей душе угодно.
Так что же делать, если пользователь вводит кучу лишних пробелов до и/или после нужных данных? Использовать ф-цию trim() Она удаляет пробелы и до, и после строки.
Сущевствуют также ф-ции trimStart() (удаляет лишние пробелы слева от строки) и trimEnd() - справа.
Обратной задачей к удалению пробелов, есть их добавление. С этой задачей отлично стправятся padStart() и padEnd()
1) Повторить у себя на компе все то, что было в уроке.
2) Набросать другой html документ и повторить урок, не подсматривая в шпаргалки.
При необходимости мы можем вывести из JS всякие интересные значки используя ASCII или unicode
Это могут быть смайлики, специальные символы, стрелочки и т. д. Их код легко найти в интернете. Например, можно использовать сайт Еmojipedia
Не раз и не два при прохождении собеседований я сталкивалась с задачей "нарисовать в консоли таблицу и заполнить ее данными". Думаете это просто? Нет! Но функция repeat() в этом случае может существенно облегчить вашу жизнь.
Пишется так:
let str = '=' ;
console.log(str.repeat(10));
Допустим, у нас есть задача: посчитать дневной бюджет пользователя. То есть, нам нужно спросить:
1. Сколько он заработал за месяц;
2. Какие были расходы;
3. Сколько он на них потратил.
А потом отняв расходы от доходов, разделить полученную сумму на 30.
Проблемы с этой задачей начинаются тогда, когда пользователь начинает вместо цифр вводить буквы и наоборот. Как от этого защититься?
Какой ваш месячный заработок?
Ваш месячный заработок:
Основная статья расходов:
Сколько вы на нее тратите?
Основные расходы:
Потраченные деньги:
Дополнительная статья расходов:
Сколько вы на нее тратите?
Дополнительные расходы:
Потраченные деньги:
Ваш месячный бюджет составляет:
Ваш дневной бюджет составляет:
Код html для получения месячного дохода
В данном уроке мы будем работать с функциями. Более подробную информацию можно прочитать в учебнике JAVASCRIPT.RU
Код JS для сохранения и вывода месячного дохода.
Получение и вывод основного расхода (html)
JS для получения и вывода основоного расхода
Получение и вывод дополнительного расхода
Теперь организуем проверку вводимых значений на их тип.
Для того, чтобы ф-ция срабатывала в нужное время и выводила именно те данные, которые нам нужны, ее нужно вызывать после срабатывания слушателя на кнопках "отправить"
В консоли результат работы ф-ции будет иметь вид:
Воспользуемся неявным преобразованием типов, чтобы JS автоматически пытался преобразовать получаемые данные в число. Для этого:
Более подробную информацию про преобразование типов можно прочитать в учебнике JAVASCRIPT.RU
Теперь наша консоль будет иметь вид:
При попытке ввести буквы вместо цифр, на экран будет выводится NaN (not a number).
Будем проверять наши переменные на наличие NaN и в случае обнаружения просить ввести данные еще раз.
Чтобы избежать ненужных диалоговых окон и некрасивой надписи NaN в результатах, немного изменим код.
Осталось посчитать дневной и месячный бюджет.
Место вызова ф-ции имеет огромное значение. Если вызвать ее слишком рано - получим в значения undefined
1) Повторить у себя на компе все то, что было в уроке.
2) Набросать другой html документ и повторить урок, не подсматривая в шпаргалки.
3) Попробуйте оптимизировать код. Например: приводить тип к numder в ф-ции проверки на корректность ввода...
