JavaScript для детей: как создать калькулятор?

Приблизительное время чтения: 15 минут

JavaScript — это скриптовый язык программирования, который используется в создании сайтов. Он «живет» в интернете, делает веб-страницы интерактивными: заставляет кнопки светиться, анимацию двигаться, игру работать. Изучение JavaScript для детей — процесс интересный и увлекательный. Освоить такие навыки может школьник 6-11 класса.

При первом знакомстве он может показаться сложным. Но с правильными инструментами и при помощи видеоуроков JavaScript для детей можно научиться его использовать и создавать страницы и лендинги разной сложности.

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

Урок по созданию калькулятора на Javascript для школьников

Как мы уже сказали выше, JavaScript — это язык программирования, часто используемый для веб-разработки. Для более широкого понимания любого языка в кодинге требуется как можно больше практики. Сегодня мы сделаем калькулятор на веб-странице с помощью инструментов программирования для детей Javascript.

Вводная информация к видеоуроку Javascript для детей

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

Тем, кто проходит этот бесплатный курс Javascript для детей, важно знать, что JS работает вместе с HTML (язык гипертекстовой разметки) и CSS (таблицам стилей). Поэтому теги в JS — это теги в HTML. Вот основные из них, которые вы встретите ниже:

Теги — это специальные метки в HTML, которые определяют тип контента и его структуру. Они пишутся в угловых скобках.

• <p>: Тег для абзаца текста.
• <h1> – <h6>: Теги для заголовков разных уровней.
• <img>: Тег для изображения.
• <a>: Тег для ссылки.
• <div>: Тег для блока контента, который может содержать другие элементы.
•   <img src=”изображение.jpg” alt=”Изображение”>

Атрибуты — это дополнительные свойства, которые применяются к элементам HTML. Они описывают дополнительную информацию об элементе и могут влиять на его поведение.

• id: Уникальный идентификатор элемента, который позволяет легко обратиться к нему из JavaScript-кода.
• class: Класс элемента, который позволяет группировать элементы с одинаковыми свойствами и стилями.
• src: Путь к файлу изображения или другого ресурса.
• href: Путь к другой странице или ресурсу (для ссылок).
• style: Inline-стиль элемента, который позволяет непосредственно указать стили для конкретного элемента.

Основы изучения языка программирования JavaScript для детей: готовим среду для калькулятора

Для начала создадим три файла для веб-разработки: index.html, style.css и script.js.

Script.js — это файл для программирования на JavaScript. Его необходимо подключить к нашей странице. Подключается данный файл перед закрывающим тегом body. Затем создается парный тег script. После этого обратимся к атрибуту src и выберем файл js. На Javascript код можно писать между парными тегами, но сегодня писать код мы будем в отдельном файле. Далее подключаем файл со стилями. В теге head создадим тег link и обратимся к атрибуту href. Присвоим ему путь к файлу со стилями.

JavaScript курс для детей: создаем форму калькулятору и поля ввода

Теперь пришло время заняться калькулятором. Поработаем над внешним видом: для начала создадим тег div с классом calc. 

Внутри него поместим заголовочный тег первого уровня с надписью «калькулятор». 

Затем нам понадобится заголовочный тег третьего уровня (<h3>), в котором разместим надпись «Ввод чисел». 

Для ввода чисел будем использовать два одиночных тега Input. В данных тегах будет по два атрибута: класс и type. Класс нам необходим для обращения к Input. Атрибут type в двух тегах будет приравнен к значению Number. Это значит, что данные поля ввода будут ожидать только числа.

JavaScript для детей: кнопки для калькулятора

Создаем заголовочный тег третьего уровня с надписью «Математические операции».

 Под данным тегом разместим четыре кнопки: «Сложение», «Вычитание», «Умножение» и «Деление». Каждой кнопке обязательно нужно задать свой класс. 

Следом создадим заголовочный тег <h3>, с надписью «Результат». 

В следующем файле создадим параграф с классом res. Внутри созданного тега будет храниться результат вычислений. Надписей внутри него не будет. Добавим стили для блока dif с классом калк.

Определяем внешний вид калькулятора. Урок Javascript для детей онлайн

Далее установим цвет фона, делаем пунктирную рамку размером 2 пикселя, ширину 400 пикселей, внешний отступ 100 пикселей, внутренний 20. 

Создаем параграф res. Для параграфа с классом res установим внутренний отступ в 20 пикселей. Размер шрифта будет 15 пикселей. Цвет фона — Corn Silk. Закруглим углы и сделаем ширину в 200 пикселей.

Программирование кнопок калькулятора на курсе Javascript для детей

В файле script.js будем программировать кнопки. Под каждую кнопку создадим переменную.

Переменная — это специальная ячейка, в которую мы помещаем элемент. Этим элементом может быть число, текст, любые значения или какие-либо объекты. Переменная в JavaScript объявляется следующим образом: пишем команду let, затем ставим пробел, затем даем название переменной. В данном случае название переменной будет class. Ставим оператор присваивания. Пишем команду document, содержащий в себе ряд функций для обращения или редактирования HTML страницы. После точки пишем команду querySelector. С ее помощью мы сможем обращаться к любому HTML элементу.

Внутри скобок ставим кавычки и обратимся к элементу. Обращение к классовому элементу делается через точку. Внутри кавычек ставим точку и пишем название класса. Создаем такие переменные для всех кнопок математических операций.

Скидка 10% на веб-программирование для детей

Продолжаем создавать калькулятор

Еще нам нужно поле для вывода результата. Создадим переменную res и обратимся к параграфу с классом res. Нужные нам переменные готовы. Осталось научиться программировать кнопки. Обратимся к переменной float. Через точку вызовем функцию addEventListener, добавляющую события для данной кнопки. Строго через запятую необходимо записать два аргумента. Аргумент — это значение для нашей функции. В первом аргументе нужно указать действие: напишем в кавычках команду клик, поставим запятую и перейдем ко второму аргументу. Вторым аргументом является функция. Функция — это блок кода, который работает только в том случае, если функцию вызовут. Обычно функция имеет название. Например, пишется команда function, функции дается имя, ставятся круглые скобки, в которых могут быть аргументы, но необязательно.

Затем ставятся фигурные скобки, между которых пишется блок кода. Он может состоять как из одной строки, так и из нескольких. Наша функция названия не имеет, так как используется внутри другой функции. Такие функции называются анонимными. Между фигурных скобок напишем следующие строчки кода.

Объявим две переменные, которые обращаются к полям воды с классами num1 и num2. Но после объявления, в обоих случаях, необходимо поставить точку и набрать команду value. 

Данная команда извлекает из элемента значение. Например, набирая в поле воды с классом num1 какое-либо число, оно окажется в переменной num1. Обе переменные преобразуем в цифровое значение. По умолчанию из поля воды извлекается цифра, но в строковом виде преобразовать строку в цифру достаточно просто.

Выведем результат параметра с классом Res, затем обратимся к переменной Res. 

Поставим точку и введем команду innerHTML. Затем оператор присваивания. После этого num1 прибавляем к num2. Проверяем — все работает. Остальные кнопки нужно сделать по такому же алгоритму.

Условные операторы. Доработка калькулятора на уроке JavaScript для детей и подростков

Следующий пункт курса JavaScript для детей онлайн — доработка калькулятора, чтобы он работал логично и корректно отвечал за запросы. 

При делении числа на ноль, мы должны предупредить пользователя, что такие операции запрещены математикой. Используем для этого условный оператор if.

После данного оператора в скобках пишется условие, при котором блок в фигурных скобках будет работать. Если num2 будет равен нулю, то выведем сообщение в параграф, что на ноль делить нельзя. 

Обратим внимание, что внутри скобок два знака равно. Когда сравниваются два значения, то нужно ставить два знака равно. В JavaScript есть и три знака равно, но в данном случае будем использовать только два. Изучим еще один блок для условий else.

Он не обязателен, но в данном случае пригодится в работе. Этот блок сработает только в том случае, если не сработает первое условие. В нашем случае логика такая: если num 2 равен 0, то пользователь увидит сообщение, иначе в параграф произойдет вывод результат отделения.

На этом наш калькулятор собран: можете протестировать проект и посмотреть, как будет работать калькулятор, собранный на JS.

Где научиться программировать на JavaScript? Курсы веб для детей

Если вам понравился гайд и вы хотите изучить JS более подробно. Советуем присмотреться к курсу javascript для детей онлайн формата «Пиксель». Во-первых, это удобно, так как учится можно дома и в любой другой комфортной обстановке.

Ссылка: https://pixel.study/htmlcss 

Во-вторых. Курс подойдет для школьников 6-11 классов разной подготовки и уровня знаний. Можно прийти на курс JavaScript для детей онлайн без знаний в HTML и кодинге, можно прийти на курс с базой навыков по программированию. Во всех случаях занятия по JS каждому дадут новые знания и умения.

Это возможно благодаря модульной системе. Каждый модуль — это 12 уроков по 90 минут каждый. Начинается все с изучения основ HTML и CSS, оттачивания навыков на простых проектах. Далее программа усложняется: добавляются новые проекты и блоки с JS.

За последующие 24 урока школьники научатся подключать файлы разработки к веб-странице, познакомятся с операторами цикла и условия, поработают с функциями prompt для ввода данных и setInterva для создания бесконечных циклов. Кроме этого, освоят работу с ключами и на продвинутом уровне разберут простые и сложные математические операции.

То, что непосредственно касается создания веб-страниц с нуля, начнется в конце курса, так как к этому времени ребенок уже овладеет необходимыми базовыми навыками. Ребята научатся запускать веб-приложения, поработают с классами и структурой сайта, соберут при помощи JS несколько анимированных и интерактивных элементов веб-страницы.

Ссылка: https://pixel.study/htmlcss 

На каждом этапе учеников сопровождает опытный педагог, который следит за успеваемостью группы. Чтобы сохранять качество обучения, группы набираются небольшие, по 8-12 человек максимум. Это помогает педагогу контролировать степень усвояемости материала каждым ребенком. При необходимости он поможет и подкорректирует курс.

На курсе много практических и проектных занятий. С ними ребенок «набивает руку» в насмотренности, в знании архитектуры сайтов в целом. Лучшие и готовые проекты смело можно вложить в портфолио.

Как обучение влияет на будущее ребенка?

С навыками веб-разработки ребенок уже в школе сможет развиваться как создатель сайтов и разработчик. В дальнейшем он сможет выбрать одну из нескольких профессий, если решит развиваться в этом направлении. 

Можно стать фронтенд-разработчиком и заниматься «обложкой» сайта. Здесь как раз нужны знания JS, HTML и CSS. Если внешней частью интернет-страниц заниматься не хочется, то есть бэкенд-разработка. Это то, что находится «за кулисами» сайта, чего не видят пользователи. Здесь работа связана с серверами и используются дополнительные языки программирования. 

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

Выбор остается за вами. Но в любом случае, курсы Javascript для детей несут пользу не только в возможности работать престижным ИТ-специалистом. На занятиях ребенок повышает свою цифровую грамотность и познакомиться глубже с современными технологиями.

Если у вас есть вопросы по обучению, вас интересуют другие видеоуроки JavaScript для детей и курсы веб программирования для детей и подростков, пишите нам!

Читайте также: ТОП-40 бесплатных видеоуроков по программированию на Python для детей

Опубликовано: 24 октября 2024 148