Публикации
ДОПОЛНИТЕЛЬНАЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ (ОБЩЕРАЗВИВАЮЩАЯ) ПРОГРАММА "Программирование на JavaScript"
Всероссийский сборник статей и публикаций института развития образования, повышения квалификации и переподготовки.
Скачать публикацию
Язык издания: русский
Периодичность: ежедневно
Вид издания: сборник
Версия издания: электронное сетевое
Публикация: ДОПОЛНИТЕЛЬНАЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ (ОБЩЕРАЗВИВАЮЩАЯ) ПРОГРАММА "Программирование на JavaScript"
Автор: Журова Ольга Ивановна
Периодичность: ежедневно
Вид издания: сборник
Версия издания: электронное сетевое
Публикация: ДОПОЛНИТЕЛЬНАЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ (ОБЩЕРАЗВИВАЮЩАЯ) ПРОГРАММА "Программирование на JavaScript"
Автор: Журова Ольга Ивановна
МУНИЦИПАЛЬНОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ДОПОЛНИТЕЛЬНОГО ОБРАЗОВАНИЯ «ТЕХНОПОЛИС»ДОПОЛНИТЕЛЬНАЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ (ОБЩЕРАЗВИВАЮЩАЯ) ПРОГРАММА «Программирование на JavaScript»Направленность: техническаяВозраст обучающихся: Объем: 152 часаСрок реализации: 9 месяцевАвтор-составитель программы:Журова Ольга Ивановна,Педагог дополнительного образованияг. Сургут, 2026ОГЛАВЛЕНИЕПОЯСНИТЕЛЬНАЯ ЗАПИСКАПри разработке дополнительной общеобразовательной (общеразвивающей) программы «Программирование на JavaScript» учтены требования следующих документов:Федеральный Закон Российской Федерации от 29.12.2012 № 273-ФЗ «Об образовании в Российской Федерации» (с изменениями). . . . А также другие Федеральные законы, иные нормативные правовые акты РФ, законы и иные нормативные правовые акты субъекта РФ (Ханты-Мансийского автономного округа – Югры), содержащие нормы, регулирующие отношения в сфере дополнительного образования детей, нормативные и уставные документы МАОУ ДО «Технополис».Реализация дополнительной общеобразовательной (общеразвивающей) программы осуществляется за пределами Федеральных государственных образовательных стандартов и не предусматривает подготовку обучающихся к прохождению государственной итоговой аттестации по образовательным программам.Направленность программы: техническая.Срок освоения программы: 9 месяцев.Объем программы: 152 часа.Уровень освоения программы: продвинутый.Цель программы: Актуализация знаний и совершенствование практических навыков в области веб-разработки посредством использования языка программирования JavaScript.Задачи программы: Образовательные:изучить основы HTML, CSS и JavaScript; научиться программировать на JavaScript; изучить работу с массивами, объектами, DOM и API. Развивающие:развить логическое и алгоритмическое мышление; развить навыки программирования и веб-разработки; расширить систему компетенций для создания собственного проекта. Воспитательные:помочь развить инициативность и творческий подход, ответственное отношение к процессу и результатам труда, к соблюдению этических и правовых норм в информационной деятельности; вовлечь в научно-техническое творчество, способствующее ранней профориентации; сформировать интерес к программированию и веб-технологиям; воспитать этические принципы программирования. Возраст обучающихся: 12-14 лет.Возрастные особенности данной категории обучающихся характеризуются стремлением к самостоятельности, готовностью преодолевать трудности и упорно работать для достижения цели. Программа направлена на развитие логического и алгоритмического мышления, а также формирование интереса к сфере программирования и веб-разработки.Актуальность программы опирается на развитие интереса обучающихся к инженерно-техническим и информационным технологиям, научно-исследовательской и конструкторской деятельности. Это связано с потребностью общества в технически грамотных, креативных личностях, способных найти нетривиальный подход к решению проблем; востребованностью специалистов в сфере техники и технологий в высокотехнологичных и наукоёмких отраслях промышленности; профориентацией — программы технической направленности помогают обучающимся выбрать направление будущей профессиональной деятельности, связанное с профилем технического направления.Педагогическая целесообразность программы заключается в том, что обеспечивается комплексное гармоничное развитие детей, применяемые на занятиях методы обучения в полной мере отвечают возрастным особенностям, индивидуальный подход позволяет даже в рамках групповой формы занятий раскрыть и развить потенциал каждого обучающегося.Формы обучения: очная.Режим занятий: 2 раза в неделю по 2 часа.По окончании изучения программы обучающиеся могут продолжить обучение по следующим дополнительным общеобразовательным (общеразвивающим) программам: «Программирование на Python. Уровень 1» (14-15 лет), «Программирование на С/C++» (14-17 лет).УЧЕБНЫЙ ПЛАНКАЛЕНДАРНЫЙ УЧЕБНЫЙ ГРАФИКСОДЕРЖАНИЕ ПРОГРАММЫРаздел 1. «Введение в веб-разработку» Теория: базовые понятия веб-разработки, роль и задачи веб-разработчика, клиент-серверная архитектура, компоненты веб-страницы (браузер, веб-сервер, HTML, CSS, JS).Практика: знакомство с инструментами веб-разработчика (браузеры, редакторы кода, консоль разработчика), установка ПО для работы.Раздел 2. «Веб-программирование. HTML, CSS и Bootstrap» Теория: структура веб-страницы, основы HTML и CSS, работа со списками, изображениями, ссылками, таблицами, контейнерами и классами; принципы управления элементами страницы, работа со шрифтами и псевдоклассами; основы фреймворка Bootstrap (навигация, формы, карточки, карусели).Практика: создание простой веб-страницы с использованием HTML и CSS, применение Bootstrap для разработки макетов, разработка навигации и форм, создание карточек и каруселей изображений.Раздел 3. «Веб-программирование. JavaScript и Vue.js» Теория: основы JavaScript (структура кода, переменные, функции, условные операторы, циклы, массивы, объекты), основы Vue.js (работа с элементами DOM, списки, события, анимирование и переходы).Практика: погружение в JavaScript (основы, условные конструкции, циклы, работа с массивами и объектами), работа с элементами в Vue.js, разработка списков и анимации.Раздел 4. «Разработка приложений с помощью ИИ» Теория: введение в ИИ-разработку, безопасность при работе с ИИ, создание структуры приложения (HTML), стилизация и дизайн (CSS), добавление логики (JavaScript), отладка и исправление ошибок.Практика: интеграция ИИ-функций в веб-приложение, публикация и защита проекта.Раздел 5. «Кибербезопасность и веб-разработка» Теория: основы кибербезопасности при разработке веб-приложений, этика программирования (авторские права, лицензирование, работа с данными), перспективы развития веб-разработки.Практика: анализ уязвимостей веб-приложений, изучение методов защиты данных.Раздел 6. «Веб-программирование. React JS» Теория: введение в React, компоненты и их состояние, работа с Props и State, маршрутизация (NavLink, Route), работа с данными.Практика: создание веб-приложения на React, работа с CSS-модулями, разработка компонента Login, реализация функционала «Корзина», разработка футера сайта.Раздел 7. «Подведение итога за год» Теория: обзор пройденного материала, обсуждение сложностей и успехов в обучении.Практика: подготовка выпускного проекта к защите (рецензирование, доработка, подготовка презентации).ВОСПИТАНИЕЦелевые ориентиры воспитания детей Целевые ориентиры воспитания детей по программе направлены на воспитание, формирование: ценностей авторства и участия в техническом творчестве; навыков определения достоверности и этики технических идей; ценностей технической безопасности и контроля; отношения к угрозам технического прогресса, к проблемам связей технологического развития России и своего региона; воли, упорства, дисциплинированности в реализации проектов; опыта участия в технических проектах и их оценки. Формы и методы воспитания Решение задач информирования детей, создания и поддержки воспитывающей среды общения и успешной деятельности, формирования межличностных отношений на основе российских традиционных духовных ценностей осуществляется на каждом из учебных занятий. Ключевой формой воспитания детей при реализации программы является организация их взаимодействий в практической подготовке и проектной деятельности, в подготовке и проведении календарных праздников с участием родителей (законных представителей), участие обучающихся в соревнованиях, фестивалях, конкурсах от муниципального до всероссийского уровней. В воспитательной деятельности с детьми по программе используются методы воспитания: метод убеждения (рассказ, разъяснение, внушение); метод положительного примера (педагога и других взрослых, детей); метод упражнений (приучения); методы одобрения и осуждения поведения детей, педагогического требования (с учётом преимущественного права на воспитание детей их родителями (законными представителями), индивидуальных и возрастных особенностей детей разного возраста) и стимулирования, поощрения (индивидуального и публичного); метод переключения в деятельности; методы руководства и самовоспитания, развития самоконтроля и самооценки детей в воспитании; методы воспитания воздействием группы, в коллективе. Перечень мероприятий из Календарного плана воспитательной работы МАОУ ДО «Технополис» ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫПо итогам обучения в рамках дополнительной общеобразовательной (общеразвивающей) программы обеспечивается достижение обучающимися следующих результатов:В области обучения:Должны знать:принципы функционирования сети Интернет; основные информационные ресурсы Интернет; понятие сайта, языка разметки HTML и языка стилей CSS; HTML теги и структуру тега; основы HTML-разметки и CSS-форматирования; CSS-стили и правила форматирования; правила создания эргономичного дизайна web-приложения; понятие адаптивной вёрстки на HTML и CSS основы работы в JavaScript; синтаксис и структуру JavaScript; принципы работы с массивами и объектами в JavaScript; вопросы кибербезопасности и этики программирования. Должны уметь:работать в интернет-браузерах; искать информацию с помощью поисковых систем; использовать графические редакторы для обработки изображений; создавать структуру веб-страницы с HTML; создавать стили для веб-страниц с CSS; применять адаптивную вёрстку на HTML и CSS; проверять и отлаживать HTML и CSS код; программировать на JavaScript; работать с массивами и объектами в JavaScript; применять принципы кибербезопасности; следовать этическим нормам программирования. В области воспитания:развитие целеустремлённости, дисциплинированности, терпеливости, способности к самостоятельным решениям, умения действовать в коллективе, проявлять заботу о других людях, сформированность личностной позиции по отношению к изучаемому учебному материалу, к практике, целям и результатам собственных действий, освоение детьми ценностей взаимоуважения и взаимопомощи, созидательного труда, исторической памяти и преемственности поколений.РЕСУРСНОЕ ОБЕСПЕЧЕНИЕМетодическое обеспечение Для успешной реализации данной программы используются современные педагогические методики и технологии.Методики обучения:традиционная, активная, интерактивная, проблемно-ориентированная, индивидуальная. Методы организации образовательной деятельности:Словесные методы: рассказ, беседа, объяснение, работа с информационным источником, метод примера. Наглядные методы: демонстрация презентаций, видеофильмов, схем, рисунков, макетов. Практические методы: практические задания, моделирование, тренинги, анализ и решение проблемных ситуаций. Методы стимулирования и мотивации: формирование опыта эмоционально ценностных отношений у обучающихся; интереса к деятельности и позитивному поведению. Технологии обучения:Технология личностно-ориентированного обучения способствует максимальному развитию индивидуальных познавательных способностей обучающегося на основе использования, имеющегося у него опыта жизнедеятельности. Групповые технологии - организация совместных действий: коммуникация, общение, взаимопонимание, взаимопомощь. Технология развивающего обучения – создание условий для развития психологических особенностей: способностей, интересов, личностных качеств и отношений между людьми. Технология портфолио - фиксирование, накопление и оценивание индивидуальных образовательных результатов обучающегося за период обучения. Здоровьесберегающие технологии - смена видов деятельности, поддержание комфортной психологической атмосферы учебного занятия, формирование культуры здоровья обучающихся, мотивации их к ведению здорового образа жизни, предупреждению вредных привычек. Технология проектной деятельности - организация самостоятельной деятельности обучающихся, направленная на решение задачи проекта. Работа над проектом педагога с обучающимися включает следующие этапы:Введение в проектную деятельность: Постановка цели и задач проекта Организация работы над проектом: выбор темы проекта; исследование: сбор информации, анализ данных, получение выводов разработка плана действий реализация проекта Оформление текста работы/презентации. Защита проекта. Критерии оценивания проекта могут варьироваться в зависимости от конкретной задачи и целей проекта:Соответствие теме. Проект должен быть связан с заявленной темой и решать поставленные задачи. Качество исследования. Оценивается глубина и полнота исследования, использование различных источников информации, анализ данных и выводы. Оригинальность. Оценивается новизна и оригинальность идеи проекта, его уникальность и нестандартность. Качество презентации. Оценивается качество презентации проекта, включая ясность изложения, логичность и последовательность, а также использование визуальных материалов. Самооценка. Оценивается способность обучающихся провести самооценку своей работы, выявить сильные и слабые стороны проекта, а также предложить пути улучшения. Результативность. Оценивается достижение поставленных целей и задач проекта, а также его практическая значимость и возможность применения результатов в реальной жизни. Формами определения итогов реализации программы являются: Промежуточная аттестация проводится по окончании 1 полугодия в форме защиты мини-проекта. Оценивание осуществляется по уровням: высокий, средний, низкий (Приложение 1). Итоговый контроль проводится в конце учебного года в форме защиты проекта. Результат оценивается по уровням: высокий, средний, низкий (Приложение 2).Материально-техническое оснащение на 1 группу:Оборудование: интерактивная доска/ интерактивная панель; проектор; моноблок/ноутбук (14шт.); стенд магнитный оцинкованный /доска магнитно-маркерная мобильная/ доска на стойках; принтер /МФУ.Информационное обеспечение:Использование дистанционных образовательных технологий позволяет сделать обучение более современным, эффективным и доступным для широкого круга обучающихся. Информационное обеспечение включает мессенджер MAX для оперативной связи между преподавателем и обучающимися, рассылки заданий, уведомлений и обмена материалами, а также мультимедийные ресурсы — видеоролики по профильным темам (инструкции, обзоры оборудования), интерактивные схемы и инфографика, что позволяет организовать эффективное взаимодействие и сделать обучение наглядным и практикоориентированным.СПИСОК ЛИТЕРАТУРЫДля педагога:Вольфсон Б. Л. Гибкое управление проектами и продуктами / Б. Л. Вольфсон. — Текст: непосредственный. — СПб.: Питер, 2021. — 144 с. — ISBN 978-5-4461-9630-2. Дронов В. А. HTML и CSS: 25 уроков для начинающих / В. А. Дронов. — Текст: непосредственный. — СПб.: БХВПетербург, 2020. — 400 с. — ISBN 9785977540704. Вахтуров В.В JavaScript. Освой на примерах/ В. В. Вахтуров. — Текст: непосредственный. — СПб.: Питер, 2007. — 400 с. — ISBN 978-5-94157-877-1. Современный учебник JavaScript: сайт. — Текст: электронный. —URL: (дата обращения: 06.04.2026) Васильев, А. Н. JavaScript в примерах и задачах/ А. Н. Васильев. — Текст: непосредственный. — Эксмо: Москва, 2025. — 720 с. — ISBN 978-5-699-95459-9. Бесплатные курсы на официальном сайте Tilda: сайт. — Текст: электронный. — URL: (дата обращения: 06.04.2026). Для обучающихся:Современный учебник JavaScript: сайт. — Текст: электронный. —URL: (дата обращения: 06.04.2026) Васильев, А. Н. JavaScript в примерах и задачах/ А. Н. Васильев. — Текст: непосредственный. — Эксмо: Москва, 2025. — 720 с. — ISBN 978-5-699-95459-9. ПРИЛОЖЕНИЕ 1Оценочные материалы для промежуточной аттестации(по итогам обучения за 1 полугодие)Для проведения промежуточного (полугодового) контроля предлагается создание интерактивного веб-приложения на основе изученного материала для оценки уровня знаний и умений учащихся 12-14- летнего возраста.Цель: определить промежуточный уровень освоения языка JavaScript и веб-технологий по первому полугодию учебного курса «Программирование на JavaScript».Основные критерии оценки интерактивного веб-приложения:Функциональность Использование основных концепций JavaScript (переменные, циклы, условия, функции и т.д.) Корректная работа Читабельность кода Оформление интерфейса Задание: разработать праздничную вебстраницу, сочетающую новогоднее оформление с познавательным контентом — интересными фактами о праздновании Нового года в разных странах и традициях. Сайт должен быть интерактивным, информативным и адаптивным.Оценочный лист интерактивного веб-приложенияКритерии оценивания интерактивного веб-приложения:Критерии оценкиКорректная HTMLструктура (валидный код, семантические теги). Соответствие визуальной концепции новогодней тематике. Информативность и достоверность контента (факты, традиции). Читаемость текста и удобство навигации. Адаптивность макета (корректное отображение на экранах разных размеров). Работоспособность интерактивных элементов (модальные окна, викторина, навигация). Качество стилизации (единый стиль, анимации, hoverэффекты). Оптимизация производительности (быстрая загрузка изображений, отсутствие критических ошибок в JS). Итоговое суммирование баллов определяет оценку проекта:Низкий уровень - 1-10 балловСредний уровень - 11-20 баллов Высокий уровень - 21-25 балловПРИЛОЖЕНИЕ 2Оценочные материалы для итогового контроля (по окончании изучения программы)Для проведения итогового контроля предлагается создание полноценного веб-приложения с использованием JavaScript для оценки уровня знаний и умений по всему учебному курсу «Программирование на JavaScript».Цель: проверить уровень освоения дополнительной общеобразовательной программы «Программирование на JavaScript» через проектную деятельность.Основные критерии оценки сайта:Функциональность Использование JavaScript и компонентного подхода Качество кода (читабельность, структурированность) Дизайн и юзабилити (удобство использования) Презентация проекта Задание: создать тематический образовательный многостраничный вебсайт на выбор:Задание 1. «Культурное наследие городов России»Создайте многостраничный вебсайт на HTML, посвящённый культурному наследию одного из исторических городов России (на ваш выбор: Сургут, Ханты-Мансийск, Суздаль, Псков, Ярославль и т. д.). Сайт должен знакомить пользователя с архитектурой, традициями и выдающимися личностями города. Включите интерактивную карту достопримечательностей, фотогалерею с историческими и современными снимками, а также аудиогид с краткими рассказами о ключевых местах. Информация должна быть достоверной и опираться на авторитетные источники.Задание 2. «Экосистемы России: от тундры до степей»Разработайте образовательный вебсайт (HTML) о природных зонах России. Выберите одну экосистему (тундра, тайга, степь, пустыня и т. д.) и создайте сайт из четырёх страниц: «Главная», «Флора», «Фауна», «Охрана природы». Разместите фотогалерею растений и животных, интерактивную карту ареала распространения экосистемы, а также миниаудиогид с записями звуков природы (пение птиц, шум леса и т. п.). Обеспечьте единую навигацию по всем страницам.Задание 3. «Великие русские путешественники»Спроектируйте многостраничный сайт на HTML, рассказывающий о жизни и открытиях одного из великих русских путешественников (на выбор: Пржевальский, Крузенштерн, Беллинсгаузен, МиклухоМаклай и т. д.). Сайт должен включать: главную страницу с краткой биографией, страницу «Маршруты экспедиций» с интерактивной картой путешествий, раздел «Открытия» с фотоматериалами и артефактами, страницу «Наследие» с влиянием открытий на науку. Добавьте аудиогид с отрывками из дневников путешественника и обеспечьте удобную навигацию.Задание 4. «Традиционные промыслы России»Создайте вебресурс (HTML), посвящённый одному из традиционных русских промыслов (гжель, хохлома, палехская миниатюра, вологодское кружево и т. д.). Сайт должен содержать: главную страницу с общим описанием промысла, страницу «История» с хронологией развития, раздел «Технология» с фотоэтапами создания изделий, страницу «Мастера» с портретами и биографиями известных умельцев. Используйте семантическую разметку HTML5, разместите фотогалерею готовых изделий и добавьте аудиогид с рассказами мастеров о своём деле.Задание 5. «Космическая эра России»Разработайте многостраничный сайт на HTML о развитии космонавтики в России. Структура сайта: «Главная» (введение и ключевые даты), «Пионеры космоса» (биографии и фото космонавтов), «Космодромы» (интерактивная карта с описанием площадок), «Достижения» (галерея космических аппаратов и фото из космоса), «Будущее» (перспективные проекты). Включите аудиогид с историческими записями (голос Гагарина, сообщения ТАСС) и обеспечьте валидность HTMLкода. Информация должна опираться на официальные источники Роскосмоса и музеев космонавтики.Задание 6. «Литературные места России»Создайте образовательный многостраничный вебсайт на HTML, посвящённый литературным местам России, связанным с жизнью и творчеством одного из классиков русской литературы (Пушкин, Лермонтов, Толстой, Чехов и т. д.). Сайт должен состоять из пяти страниц:«Главная» — приветствие, краткая справка о писателе, карта литературных мест; «Биография» — хронология жизни с привязкой к местам; «Места творчества» — интерактивная карта с отметками домовмузеев, усадеб, городов; «Произведения» — краткий обзор с иллюстрациями и цитатами; «Наследие» — влияние творчества на культуру, современные мероприятия (фестивали, чтения); «Источники и контакты» — форма обратной связи, список литературы и интернетресурсов. Включите фотогалерею интерьеров и экстерьеров литературных мест, а также аудиогид с фрагментами произведений в исполнении актёров. Обеспечьте единую навигацию, семантическую разметку и валидность кода. Информация должна быть достоверной, с указанием источников.Требования к заданию: разработать образовательный многостраничный вебсайт на HTML, который:популяризирует знания о культурном, природном и историческом наследии России; сочетает информативность с интерактивностью и визуальной привлекательностью; обеспечивает удобную навигацию и адаптивность для разных устройств; опирается на достоверные источники информации; демонстрирует владение современными вебтехнологиями (HTML5, CSS, JavaScript) и принципами семантической разметки. Оценочный лист итогового веб-приложенияКритерии оценивания итогового веб-приложения:Критерии оценкиСоответствие заданию: реализация всех требуемых разделов и элементов (карта, галерея, аудиогид и т. д.); соблюдение заданной структуры сайта. Информационное наполнение: достоверность и актуальность информации (подтверждение авторитетными источниками); полнота раскрытия темы в каждом разделе; грамотность текста (отсутствие орфографических и стилистических ошибок). HTMLразметка: валидность кода (соответствие стандартам HTML5); использование семантических тегов (, корректная структура документа (наличие , правильная иерархия заголовков H1–H6). Дизайн и оформление (CSS): единая стилистика на всех страницах; читаемость текста (контрастность, выбор шрифтов); эстетичность оформления (цветовая палитра, отступы, выравнивание); адаптивность макета (корректное отображение на экранах разных размеров). Интерактивные элементы: работоспособность интерактивной карты (кликабельные метки, всплывающие подсказки); функциональность фотогалереи (прокрутка, увеличение изображений); воспроизведение аудиогида (корректная загрузка и запуск аудиофайлов); удобство навигации (меню, якоря, кнопки «Назад/Далее»). Пользовательский опыт (UX): интуитивная навигация между страницами; быстрая загрузка страниц (оптимизация изображений, минимизация кода); доступность контента (альтернативный текст для изображений — alt, подписи к медиаэлементам). Дополнительные возможности (JS): наличие анимаций или динамических элементов (например, плавная прокрутка, подсветка активных разделов); обработка ошибок (корректное сообщение при отсутствии аудиофайла или недоступности карты). Техническая документация и источники: список использованных ресурсов (ссылки на источники информации, фото, аудио); комментарии в коде (для сложных JSскриптов или нестандартных решений). Оригинальность и творческий подход: нестандартные решения в дизайне или интерактивности; продуманность пользовательского сценария (логика переходов, подсказки). Итоговое суммирование баллов определяет оценку итогового веб-приложения:Низкий уровень - 1-10 балловСредний уровень - 11-20 балловВысокий уровень - 21-30 баллов
