close

Вход

Забыли?

вход по аккаунту

Пальцев Сергей Анатольевич. Программно-методическое обеспечение элективного курса «Язык JavaScript» для учащихся 10-11 классов технологического профиля

код для вставки
1
2
Аннотация
ВКР
бакалавра
элективного
курса
на
тему
«Язык
Программно-методическое
JavaScript»
для
учащихся
обеспечение
10-11
классов
технологического профиля, содержит страниц текста - 126, рисунков - 29,
использованных источников - 15.
На
сегодняшний
день
особенно
актуальным
становится
ведение
элективных курсов в старших классах, образовательные программы которых
имею технологический профиль. Введение в учебный план элективного
курса «Язык JavaScript» не только позволяет реализовать социальный запрос
общества на раннюю профессиональную ориентацию на конкурентно
способные отрасли рынка труда, связанные с компьютерными технологиями
и программированием, но и реализуют запрос самого ученика на развитие
личностных, межпредметных и предметных компетенций
Ключевые слова: интерактивные документы, скрипты, web-технологии,
web-программирование,
объектно-ориентированное
программирование,
DOM-документа.
Предмет исследования. программно-методическая система обучения
элективного курса «Язык JavaScript» для 10-11 классов технологического
профиля в соответствии с требованиями федерального образовательного
стандарта.
Объект исследования. процесс преподавания элективного курса «Язык
JavaScript» для 10-11 классов технологического профиля в соответствии с
требованиями федерального государственного образовательного стандарта.
Цель работы. разработка программно-методического обеспечения
элективного курса «Язык JavaScript» для учащихся 10-11 классов в
соответствии с требованиями федерального образовательного стандарта.
Метод исследования. Для исследования применяется анализ, синтез,
индукция, аналогия, сравнение, классификация.
3
Результаты работы. В ВКР бакалавра разработано программнометодическое обеспечение элективного курса «Язык JavaScript» для
учащихся старших классов технологического профиля, включающее в себя
календарно-тематическое
планирование,
рассчитанное
на
34
часа,
направленное на изучение основы языка JavaScript, его назначение, историю
создания языка и возможности; кaлeндaрнo – тeмaтичecкое плaнирoвaние,
содержащее тeмы зaнятий, вид учeбнoй дeятeльнocти, прaктичecкиe и
лaбoрaтoрныe рaбoты, иcпoльзуeмыe цифрoвыe oбрaзoвaтeльныe рecурcы.
Рaзрaбoтaны кoнcпeкты шести урoкoв пo элeктивнoму курсу «Язык
JavaScript» в cooтвeтcтвии c трeбoвaниями Фeдeрaльнoгo oбрaзoвaтeльнoгo
cтaндaртa; оценка результатов освоения элективного курса осуществляется
на основании тестирования, состоящего из 20 вопросов, затрагивающих все
разделы, изучаемые в рамках курса.
Работа имеет теоретическое и практическое значение, данное
программно-методическое обеспечение может быть использовано учителями
школ при планировании элективных курсов по программированию в старших
классах технологического профиля.
4
СОДЕРЖАНИЕ
ВВЕДЕНИЕ............................................................................................................. 6
ГЛАВА 1. АНАЛИЗ ПРОГРАММНО-МЕТОДИЧЕСКОГО
ОБЕСПЕЧЕНИЯ ДЛЯ ПРЕПОДАВАНИЯ ЭЛЕКТИВНОГО КУРСА
«ЯЗЫК JAVASCRIPT» ДЛЯ УЧАЩИХСЯ 10-11 КЛАССОВ
ТЕХНОЛОГИЧЕСКОГО ПРОФИЛЯ .............................................................. 9
1.1. ОСОБЕННОСТИ ПРЕПОДАВАНИЯ ЭЛЕКТИВНЫХ КУРСОВ В ОСНОВНОЙ ШКОЛЕ.
................................................................................................................................ 9
1.2. АНАЛИЗ УЧЕБНО-МЕТОДИЧЕСКОЙ ЛИТЕРАТУРЫ ПО ИЗУЧЕНИЮ ЯЗЫКА
ПРОГРАММИРОВАНИЯ JAVASCRIPT ...................................................................... 14
1.3. ОСОБЕННОСТИ МЕТОДИКИ ПРЕПОДАВАНИЯ ЯЗЫКОВ ПРОГРАММИРОВАНИЯ В
РАМКАХ ЭЛЕКТИВНЫХ КУРСОВ. ........................................................................... 17
ГЛАВА II. ПРОГРАММНО-МЕТОДИЧЕСКОГО ОБЕСПЕЧЕНИЕ
ЭЛЕКТИВНОГО КУРСА «ЯЗЫК JAVASCRIPT» ДЛЯ УЧАЩИХСЯ 1011 КЛАССОВ ТЕХНОЛОГИЧЕСКОГО ПРОФИЛЯ. ................................. 28
2.1. ПРОГРАММА ЭЛЕКТИВНОГО КУРСА «ЯЗЫК JAVASCRIPT» ДЛЯ УЧАЩИХСЯ .. 28
10-11 КЛАССОВ ТЕХНОЛОГИЧЕСКОГО ПРОФИЛЯ .................................................. 28
2.2. СОДЕРЖАНИЕ ЗАНЯТИЙ ЭЛЕКТИВНОГО КУРСА «ЯЗЫК JAVASCRIPT» ........... 44
Урок №1. «Введение в JavaScript: история, назначение, возможности» 44
Урок №3. Получение данных от пользователя с помощью метода alert ()
........................................................................................................................... 46
Урок № 5. Лексемы в JavaScript ................................................................... 53
Урок № 11. Объектная модель документа ................................................. 72
Урок № 34 Итоговое тестирование ............................................................ 91
ЗАКЛЮЧЕНИЕ ................................................................................................. 100
СПИСОК ЛИТЕРАТУРЫ ............................................................................... 102
ПРИЛОЖЕНИЯ ................................................................................................ 104
Технологическая карта урока №1. .............................................................. 104
5
ВВЕДЕНИЕ
Обоснование выбора темы и ее актуальность
Информатика – наука на настоящий момент, активно завоёвывающая
место среди фундаментальных наук, наравне с такими маститыми научными
дисциплинами как математика и физика. При первичном знакомстве с
информатикой складывается обманчивое впечатление, что эта дисциплина
проста и является чисто прикладной дисциплиной по работе с современными
компьютерными
средствами.
существенной
прикладной
философский
подтекст
информатики
На
самом
нагрузки
всего
формируется
деле
несет
мирового
в
информатика
помимо
своей
сути
огромны
устройства,
при
изучении
системно-информационный
взгляд
на
окружающий мир, информационные процессы, окутывающие все живое,
методы и средства достижения, обработки, передачи, хранения и применения
информации в жизни человека.
Современное общество уже нельзя представить без использования
компьютера, компьютеры тесно вписались в жизнь современного человека,
возникли
целые
профессии,
связанные
только
с
использованием
компьютеров. Постоянное развитие компьютерных технологий требует от
системы
преподавания
информатики
постоянного
и
своевременного
реагирования на динамику современных научных достижений в области
информационных технологий, применения новейших образовательных
методик.
Еще
на
заре
XX
века
фантасты
предсказывали
расслоение
человеческого общества по степени возможности работы с компьютерными
технологиями, на «обычных» пользователей и «продвинутых», способных не
только использовать чужие разработки, но и создавать собственные
продукты программного или аппаратного направления. Именно за такими
«Продвинутыми» пользователями и следует будущее информационного
общества.
6
На современном этапе развития педагогических технологий существует
эффективное
средство
программирования
на
преподавание
основе
объектно-ориентированного
элективного
курса.
Элективный
курс
представляет собой дифференциальную форму обучения. Он как правило
влечет повышение уровня общего образования, творческой подход к поиску
и внедрению новейших методов и приемов преподавания, развитию интереса
и разносторонности развития способности учащихся.
Наиболее интересным и перспективным для изучения учащихся в 10-11
классах считаю язык программирования JavaScript, как язык нашедший
применение в наибольшем количестве сфер информационных технологий, от
интернета до разработки программного обеспечения. Знание данного языка
программирования
позволит
учащимся
в
будущем
как
стать
высококлассными специалистами и пойти по пути профессионального
совершенствования, так и сразу приступить к трудовому процессу в сфере
программирования.
Объект исследования: процесс преподавания элективного курса
«Язык
JavaScript»
соответствии
с
для
10-11
классов
требованиями
технологического
федерального
профиля
в
государственного
образовательного стандарта.
Предмет исследования: программно-методическая система обучения
элективного курса «Язык JavaScript» для 10-11 классов технологического
профиля в соответствии с требованиями федерального образовательного
стандарта.
Цель
исследования:
разработка
программно-методического
обеспечения элективного курса «Язык JavaScript» для учащихся 10-11
классов в соответствии с требованиями федерального образовательного
стандарта.
Задачи исследования:
7
1.
Изучить
и
проанализировать
нормативно-правовые
документы,
обеспечивающие преподавание элективных курсов в основной школе и учебнометодическую литературу по теме исследования;
2.
Проанализировать существующую литературу по изучению
языка программирования JavaScript;
3.
Провести анализ современных методик преподавания объектно-
ориентированного программирования на язык JavaScript;
4.
Сформулировать основные постулаты и программу элективного
курса «Язык JavaScript» для учащихся 10-11 классов;
5.
Представить разработку тематического планирования курса
«Язык JavaScript» для учащихся 10-11 классов;
6.
Разработать содержание занятий по элективному курсу «Язык
JavaScript»
для
учащихся
10-11
классов,
с
условием
возможности
организации применения элективного курса для преподавания объектноориентированного программирования в профессиональных образовательных
учреждениях;
7.
Проведя анализ содержания занятий, структуру и особенность
организации
процесса
преподавания
элективных
курсов,
разработать
методические рекомендации по изучению теоретической части выполнению
практической части элективного курса «Язык JavaScript» для учащихся 10-11
классов
Методы исследования: анализ, синтез, индукция, аналогия, сравнение,
классификация.
8
ГЛАВА 1. АНАЛИЗ ПРОГРАММНО-МЕТОДИЧЕСКОГО
ОБЕСПЕЧЕНИЯ ДЛЯ ПРЕПОДАВАНИЯ ЭЛЕКТИВНОГО КУРСА
«ЯЗЫК JAVASCRIPT» ДЛЯ УЧАЩИХСЯ 10-11 КЛАССОВ
ТЕХНОЛОГИЧЕСКОГО ПРОФИЛЯ
1.1. Особенности преподавания элективных курсов в основной школе.
Быстротечность социально-экономических действий, интенсификация
жизни человека, направленность нашей страны к построению открытого
поликультурного социума, востребовали введения структурных новшеств в
сфере образования.
Появление
муниципального
энтузиазма
в
сфере
образования
проявилось в пакете важных нормативных документов, таковых как:
 Национальная доктрина образования в РФ по 2025 года,
 Федеральная программа развития образования на 2016 - 2020 годы
 Концепция модернизации российского образования на период по
2020 года
Надобность в модернизации всего образовательного уклада, его
общественной и культурной среды подтверждается еще и научными
исследованиями, разбором социально-экономического развития России. Как
прописано в документах, модернизация российского образования исходит из
новейших социальных требований, предъявляемых к сфере образовательных
услуг на рубеже веков. Предполагается сотворить механизм устойчивого
развития предоставленной сферы, сохранив при этом муниципальные
гарантии
доступности
и
одинаковых
возможностей
для
получения
всеобъемлющего образования.
В
ряду
выдвигаемых
Концепцией
модернизации
российского
образования есть последующие ценности:
 изменения в содержании учебных дисциплин и уровне их освоения;
 организация в старших классах профильного обучения;
9
 создание независящей от факторов халатности и злого умысла
системы итоговой аттестации учащихся.
Эти
три
главные
задачи
модернизации
нельзя
рассматривать
самостоятельно друг от друга, итог достижения одной из них зависит от
удачливости решения остальных.
Профильное обучение может быть основанным только на крепком
фундаменте предыдущей образовательной ступени школы. Основная школа
определяет будущее направление развития профильного образования, а её
содержание
уточняется,
Федерального
определяется
Государственного
федеральным
стандарта
общего
компонентом
образования.
Непременный минимум содержания главных образовательных программ
строго определяет, что все учащиеся обязаны овладеть установленным
фондом образовательной информации в рамках основной школы. Дальше
пути учащихся различаются, и придел их образования станет напрямую
зависеть от того, как успешно тот либо другой учащийся выстроит
собственный личный учебный план.
В 2002 году была принята Концепция профильного обучения на
старшей
ступени
общего
образования,
одобренная
Министерством
образования РФ, где и возникло в первые термин профилизация обучения.
«Осуществление идеи профилизации обучения на старшей ступени
делает выпускника основной ступени перед необходимостью совершения
серьезного выбора – подготовительного самоопределения в отношении
профилирующего направления своей деятельности». Ставится проблема
создания
«системы
специальной
подготовки
в
старших
классах
общеобразовательной школы, направленной на индивидуализацию обучения
и социализацию обучающихся.»
В нормативную основу, регулирующую формирование профильного
обучения в общеобразовательных школах РФ, вступает последующий акт:
10
«Об утверждении плана-графика вступления профильного обучения на
старшей ступени общего образования» (приказ Минобразования РФ от 30.
09. 2002, №970-13).
В Российской Федерации создана последующая нормативно-правовая
основа сообразно элективным курсам:
 Элективные курсы в профильном обучении. Дополнение к
информационному письму Департамента общего и дошкольного
образования;
 Организация предпрофильной подготовки учащихся основной
школы. Из приложения к письму МО РФ;
 Рекомендации по организации профильного обучения на базе
индивидуальных учебных планов, обучающихся (Дополнение к
письму Департамента общего и дошкольного образования).
Если
главной
идеей
профильного
обучения
является
мысль
значительного роста по уже выбранному направлению подготовки, то
учащийся
к
этакому
выбору
обязан
быть
подготовлен
еще
на
предпрофильном этапе. Значительность такой подготовки и описывает
суровой смысл профильной подготовки в основной школе.
В почти всех школах Российской Федерации в 10-11-м классах введена
профильная подготовка, которая протекает в рамках главного учебного
расписания за счет часов технологии либо, если дозволяет размер возможной
учебной нагрузки, за счет часов школьного компонента. Как правило, в
образовательной план школы введены элективные курсы.
Базисные общеобразовательные предметы являются обязательными
для всех учащихся во всех профилях обучения.
Профильные общеобразовательные предметы - предметы повышенного
уровня, определяющие направление всякого конкретного профиля обучения.
Профильные учебные предметы являются обязательными для учащихся,
выбравших этот профиль обучения.
11
Модель общеобразовательного учреждения с профильным обучением
на старшей ступени предугадывает вероятность различных комбинаций
учебных предметов, что и станет гарантировать эластичную систему
профильного обучения. Данная
система обязана содержать в себя
последующие типы учебных предметов: базисные общеобразовательные,
профильные и элективные.
Прилагательное «элективный» в переводе с латинского языка значит
«избранный, отобранный». Отсюда следует, что любой курс, нареченный в
учебном плане элективным обязан выбирается по усмотрению учащегося и
его родителей.
Элективные курсы – непременные для посещения курсы сообразно
выбору учащихся, входящие в состав профиля обучения на старшей ступени
школы. Элективные курсы реализуются за счет школьного компонента
учебного плана.
Элективные
курсы
в
школе
как
устройство
актуализации
и
индивидуализации процесса учения
В Российской Федерации сформирована последующая нормативноправовая основа сообразно элективным курсам:
 Элективные курсы в профильном обучении (Приложение к
информационному письму Департамента общего и дошкольного
образования);
 Организация предпрофильной подготовки учащихся основной
школы (Из приложения к письму МО РФ);
 Рекомендации в организации профильного обучения на базе
индивидуальных учебных планов, обучающихся (Приложение к
письму Департамента общего и дошкольного образования).
Работодателю новейшей формации (это относится и к государству в
том числе) требуется человек, способный исполнять ответственный выбор.
Для решения предоставленной задачи учащийся уже в основной школе
обязан обладать возможностью выбирать и потом нести ответственность за
12
принятые решения. Для массовой отечественной школы, которая до крайнего
времени работала сообразно одному для всей страны учебному плану —
ситуация революционная.
При внедрении профильного обучения в старшей школе учащемуся
станет предлагаться свершить отбор двух уровней. Поначалу учащийся
выберет профиль, а совместно с ним и комплект предметов, степень их
освоения, соответствие которых задачам образовательной программы
определяется государством и школой. Потом ученик осуществит выбор
следующего уровня - определит комплект элективных курсов. Выбор
элективных курсов будет производится из числа предложенных школой,
однако тем не менее это выбор может получится принципиально иным,
нежели тот, который совершается при определении профиля учения.
Ученик станет поставлен в ситуацию серьезного выбора лишь в том
случае, ежели школа не «добавит» автоматически часы элективных курсов к
профильным предметам либо на обучение подходящих сейчас любому
иностранного языка и информатики. Разрешено элементарно прибавить один
час в неделю к литературе, а также разрешено рекомендовать учащимся
гуманитарного класса, изучающим литературу на профильном уровне,
выполнить выбор меж элективными курсами «Журналистика» и «Анализ
художественного текста». При этом — «или-или». Нужно выбрать, а,
следственно, от чего-либо отказаться.
Элективные курсы призваны снабдить вариативностью внутреннее
содержание образовательного плана школы, параллели, класса, то в итоге
получается индивидуализация и актуализация образования. Процессы
самоидентификации школ, произошедшие в 90-х, дошли сейчас до уровня
учащегося. Механизмом реализации данной идеи обязаны стать элективные
курсы.
13
1.2. Анализ учебно-методической литературы по изучению языка
программирования JavaScript
В книге Г. Буча «Объектно-ориентированный анализ и проектирование с
примерами приложений на С++» [4] определяются фундаментальные
понятия объектно-ориентированного программирования: класс, свойства
объекта, методы и события, полиморфизм, инкапсуляция, наследование,
классы объектов, и прочие. Проблема данного учебного пособия заключается
на ориентировании его на высшую школу. Для преподавания в 10-11 классах
материал необходимо адоптировать под возрастную группу учеников. Книга
безусловно может рассматривается как источник справочного материала. Что
отличат данное пособие так это наличие исчерпывающих и всеобъемлющих
понятий объектно-ориентированного программирования, считаю не лишним
применение данного пособия для формирования понятийного аппарата
учеников.
Книга «Уроки Web–мастера» за авторством Д.Ю. Усенкова [5] данное
учебное пособие изначально не позиционирует себя как учебник языка
JavaScript.
Несмотря
на
то
что
в
данном
пособии
присутствуют
фундаментальные понятия объектно-ориентированного программирования,
они отличаются не сформированностью, ситуативностью и частностью в
подходе подбора определенного предмета содержания. При изучении
данного пособи на первых этапах можно встретить описание общих
принципов работы со скриптами и общие принципы устройства языка
программирования JavaScript, его синтаксис. Имеется описание основных
операторов языка, но притом отсутствует классификационный подход,
классификация и разделение операторов отсутствует в принципе. Что
касается описания самих операторов языка, то тут автор потрудился на славу,
рассмотрены самые используемые свойства и методы работы с объектами,
типичные события и принципы работы с ними. Весь теоретический материал
подкреплен немалым количеством примеров из практики, рассмотрено
практическое применение скриптов, данные скрипты могут легко быть
14
применены учащимися в создании web-страниц. Данные скрипты обладают
демонстративным потенциалом для захвата и последующего удержания
интереса учащихся, учащиеся старших классов, будут способны создавать
опросные формы. Отклики на действия компьютерной мыши, наведение,
клик, переадресацию и многое другое.
При всем своем потенциале данное пособие всё-таки не может
рекомендоваться как учебное пособие для учеников 10-11 классов, скорее как
справочное пособие для учителей и разработчиков скриптов.
В книге Кингсли-Хью Э., Кингсли-Хью К. «JavaScript 1.5: учебный
курс» [6] то чего читатель не найдет в данном издании так это понятий
объектно-ориентированного программирования, в данном пособии все
объяснения
устройства
ООП,
сводятся
к
простым
и
понятным
формулировкам, что очень полезно будет использовать учителю при
объяснении понятий ООП. Практические примеры рассматриваются на
основе работы браузера Internet Explorer.
Присутствует описание операторов языка JavaScript, их свойства,
методы, подробно рассматриваются события и принципы работы с
объектами. По каждому объекту даются рекомендации и предупреждения,
подкрепленные на практике большим количеством примеров. Среди
примеров
присутствуют:
использование
операторов,
использование
массивов, функции и события, создание сценариев, применение внешних
объектов, управление данными через переменные, применение методов,
поиск и исправление погрешностей сценария, данные примеры очевидно
будет полезно использовать для разработки практических занятий. Не
следует также и проходить мимо имеющихся упражнений, после доработки
их можно использовать для проверки знаний учащихся. Что очень полезно
для учителя.
В книге Дмитриевой М.В. «Самоучитель JavaScript» [7] данное издание
состоит из трех частей, в книге не присутствует обилие теоретического
материала, это не в коем образе не учебник, Все части книги несут свой
15
собственный посыл. Так в первой части рассматриваются основа языка
JavaScript через очевидные примеры, вторая часть посвящена усложнению,
примеры становятся сложнее, третья часть содержит специфический
профессионально ориентированный материал, интересный только узкому
кругу лиц из числа программистов. В каждом разделе присутствует большое
количество примеров и упражнений с подробным разбором пути решения,
присутствует
обилие
математических
примеров,
решение
которых
реализовано через использование скриптов. Считаю крайне полезным
пособием для изучения языка JavaScript на практике.
Книга Дунаева В.В. «Самоучитель JavaScript» [8] данное пособие
ориентировано на первое ознакомление с языком JavaScript, в нем
присутствуют
основные
определения
объектно-ориентированно
программирования, но они в большей своей части плохо проработаны и не
научны. При этом в книге присутствует большое количество примеров,
подкрепляющих
теоретические
изложения
материала,
присутствуют
упражнения с примером выполнения решения и подробным разбором, хода
решения.
В теоретическом материале подробно рассматриваются объекты,
методы, свойства объектов, присутствует классификационный подход.
Имеется разделение на внешние и внутренние объекты. Данное пособие
имеет смысл при самостоятельном изучении языка JavaScript уже опытным
программистом, но при системном изучении может принести даже вред
начинающему программисту, попавшие на благодатною почву незнания
основ ООП, ненаучные определения могут вызвать в будущем проблемы с
пониманием работы тех или иных структурных элементов языка JavaScript.
Данное издание нельзя использовать как учебное пособие, но практический
материал из данного пособия вполне подходит для применения в школе.
В ходе анализа литературы по теме исследования были выяснены
следующие аспекты: не одно из найденных пособий не рекомендуется к
использованию в школе как учебное пособие, так как в полной мере не
16
соответствуют выдвинутым требования по сочетанию в себе теоретических и
практических материалов, педагогу придется сочетать различные пособия,
для достижения необходимого уровня сочетаемости теории и практики.
Также большинство пособий имеет повышенный уровень теоретических
материалов,
так
как
предназначены
в
большей
своей
части
для
переподготовки уже готовых программистов или для использования в
высших учебных заведениях, по сему данные из этих пособий материал
необходимо адоптировать для применения в школе.
1.3. Особенности методики преподавания языков программирования в
рамках элективных курсов.
Элективные курсы — это эффективное и крайне продуктивное средство
образования. Современное образование активно развивается и следственно
не стоит на месте. Если ранее средняя и старшая школа рассматривались как
единое целое, то теперь средняя школа рассматривается как базовое
образование дающее фундаментальное знание по основным предметам. А
старшая школа уходит в сферу предпрофессиональной подготовки и
непосредственно профессиональной подготовки, причем данные виды
подготовки протекают в сфере досуга учащихся, на дополнительных
выбранных самими учениками направлениях. Эффективность данных
изменений очевидны, как со стороны сокращения времени получения
готового специалиста, так и со стороны стремления ученика к дальнейшему
улучшению уровня своих знаний и упорядоченной занятости досугового
времени учащихся, уменьшения времени на дивиалентное проявление.
Закон РФ «Об образовании» не регламентирует четкого содержания
дополнительного образования в рамках федерального государственного
образовательного
стандарта,
не
загоняет
разработчиков
программ
дополнительного образования в четкие рамки, давая свободу для творческого
подхода в разработке программ. Но притом имеется четкое указание для
разработчиков программ дополнительного образования, оно содержится в
17
пояснении к закону и в нём перечислено основное требование к результату
дополнительного образования: «развитие мотивации личности к познанию и
творчеству, реализация дополнительных образовательных программ и услуг
в интересах личности, общества, государства» [2]. Дополнительное
образование
должно
способствовать
социализации
школьников,
профессиональному росту и осознанному выбору направления дальнейшей
профессиональной
направленности
деятельности,
эффективному
распределению досугового времени учащихся.
Дополнительное образование в области информатики и ИКТ имеют
широкий спектр возможностей для углубления и расширения предметной
базы учеников на всех уровнях образования от средней школы до старшей.
Большинство образовательных программ дополнительного образования
представляет собой прямое продолжение базового уровня образования,
служат для углубления знаний, усиления фундаментальной базы по
предмету. Часть из них помимо углубления теоретических знаний,
позволяют закрепить теорию на практике, сформировать полезные навыки и
умения. В создании прикладного программного обеспечения, разработки
web-сайтов, создании мультимедиа проектов, работы с графикой и 2D и 3D,
получение полезного навыка работы с офисным софтом.
Уникальность дополнительного образовательного потенциала для
информатики и ИКТ, безусловно должно использоваться на профильном
уровне образования. Без понимания и знания компьютерной техники сегодня
невозможно представить современный производственный процесс.
Обучение программированию является одним из возможных вариантов
профориантационного дополнительного обучения в старших классах. Можно
выявить несколько положительных факторов, дополнительного образования.
 заинтересованность детей в предмете обучения;
 отсутствие верхнего порога ограничения по учебным часам;
 свободная вариативность формы и организации учебного занятия;
18
 хронометрическая свобода выбора, вольность в выборе времени
проведения занятия и времени протекания занятия;
 возможность получения учеником документа, подтверждающего
квалификацию по профессии [2].
Существует ряд требований федерального образовательного стандарта к
организации дополнительного образовательного процесса в школе на
старшей ступени подготовки:
 носить развивающий характер обучения;
 использовать разнообразие форм обучения;
 вариативность содержания предметной линии;
 высокая
степень
мотивации
ученика
к
профессиональной
деятельности;
 прививание ученику готовности продолжить образование по предмету
в частности и в общем стремлении самосовершенствоваться себя;
 не противоречить региональным особенностям.
При формировании учебного материала необходимо не забывать о
общих педагогических принципах формирования учебного материала.
Помнить о ограничениях и границах ограничения.
Основными принципами формирования содержания теоретической базы
предмета является следующие принципы:

принцип актуальности учебного материала, последним научным
достижениям в предметной области, соответствие развитию окружающего
общества, внедренным в производственный процесс технологиям;

принцип единства образовательной среды материал не должен
противоречить уже известным знаниям, должен быть единым для всех
учеников занимающимся на данном элективном курсе в разных регионах
нашей страны;

принцип
монолитности
образовательной
иерархии,
на
элективном курсе не должно нарушатся последовательность подачи
учебного материала. Последовательность изложения в системе образовании;
19

принцип гуманизма в образовании, необходимо организовать
среду, взращивающую в ученике гуманистические начала человеколюбия,
морали и высоко нравственности;

принцип фундаментальности содержания, данные должны быть в
своей основе содержащими фундаментальные понятия и принципы работы в
образовательном пространстве. В дальнейшем даже если ученик не
продолжит использовать данные навыки в прямом своем профессиональном
ремесле, эти навыки должны позволить ученику сохранить навык
самообучения и самосовершенствования;

принцип соответствия компонентов образования личностной
структуре обучаемого ученика, материал предмета должен пересекутся с
личным опытом ученика, его навыками. Соответствие когнитивного опыта
личностно
приобретённому
опыту
ученика
как
личности.
Притом
формируется личность ученика в рамках когнитивных интересов. [2].
Самым важным из выше перечисленных принципов, в рамках
дополнительного
образования
наиболее
важно
учитывать
принцип
актуальности подаваемого материала, уровню развития науки, техники
внедренной в производства. Соответствие характера материала уровню
развития общества и личности ученика, для предотвращения возникновения
диссонанса между развитием среды обитания ученика и его внутреннего
состоянии, во избежание конфликта как внутри личностного, так и
межличностных. Следуя принципу гуманизма.
Материал подобранные для дополнительного образования должен быть
интересен ученикам, соответствовать их устремлениям и чаяньям, притом
соответствовать ступени развития познавательных способностей личности.
Дополнительное образование необходимо использовать для изучения
материала, входящего в школьную программу, но в достаточной мере не
освещенных в ней или те аспекты программы при изучении которых
возникли очевидные трудности усвоения. Дополнительное внимание также
должно быть уделено пунктам учебного материала, востребованного в
20
современном этапе развития общества и полезного для будущего ученика.
Само собой, в этот раздел дополнительного образования в дисциплине
информатика
и
ИКТ,
попадает
раздел
«Алгоритмизация
и
программирование», так на данный раздел отводится по современным
стандартам всего 20 часов, что само по себе не мало для освоения
теоретических
аспектов
алгоритмизации,
но
чудовищно
мало
для
практического развития навыка программирования у учеников. Данное
положение вещей не может устраивать как учителя, так и ученика,
упускается фундаментальная возможность формирования у учеников
понятий языка программирования, вида и структуры программ, ученики не
получают должного уровня выработки навыка программирования в языках
высокого уровня, что самое страшное ученики не получают самых основ
программирования. Упускаются также профориентационный возможности,
так
как
развитие
современных
технологий
и
общества
породило
востребованность в профессиональных программистах, знающих свою
предметную часть на отлично. Тем самым упускается самая главная часть
успешного профессионального ориентирования ученика, ломается основа
совершенствования ученика в направленности на будущее трудоустройство
и успешную трудовую деятельность.
На настоящий момент становится модно оценивать результаты
обучения по
способность
критерийному принципу, включающему в свою суть
учеников
соответствовать
определенным
критериям,
в
результате пройденного обучения. Проще говоря если ученика готовили
работать офисным работником, то он должен в совершенстве владеть
навыками работы с офисными программами, это основной критерий. Если в
результате обучения ученик не достиг данного критерия, то образовательный
процесс является не эффективным и должен быть заменён наиболее
эффективным.
Все ученики по итогу своего образовательного процесса столкнутся с
такой оказией как единая государственная аттестация в форме экзамена,
21
проще говоря ЕГЭ, в ЕГЭ по информатики из раздела «Алгоритмизация и
программирование»
входят
помимо
непосредственно
связанных
с
алгоритмизацией задач и программирования, также задачи на составление
кода программ, нахождения ошибки в коде, оптимизации и модернизации
кода, данные навыки не возможно приобрести в ходе обучения только
непосредственно в рамках основной школьной программы.
ЕГЭ по информатике требует высокого навыка развития у учеников
программирования и алгоритмизации, но в рамках основной школы данного
навыка развивается не в достаточной мере.
Таким образом, раздел «Алгоритмизация и программирование» попрежнему играет важную роль в курсе информатики и ИКТ, несмотря на
сокращение времени, отводимого для его изучения. Дополнительное
образование является на сегодняшний день скрытым нереализованным
резервом, который может дать хоФрошую подготовку школьникам в области
программирования. Увеличить учебное время также возможно за счет
профильного обучения и кружковой работы. Профильное
обучение
осуществляется лишь в старших классах и касается всех разделов курса
информатики. На существенное увеличение часов в данном случае
рассчитывать сложно. Кружковая работа носит локальный характер, ученики
посещают занятия не регулярно, часто меняется состав группы. Поэтому
эффективность обучения программированию в таких условиях будет низкой.
Основной задачей дополнительного образования является поддержание
стабильного состава группы. Обучение в условиях дополнительного
образования носит необязательный характер, поэтому из-за уменьшения
числа учащихся группа может быть закрыта. Для решения этой проблемы
необходимо в содержание учебного материла по алгоритмизации и
программированию включать интересные, доступные и «красивые» задания.
Это могут быть задачи с игровыми моментами, с динамикой и анимацией.
В условиях дополнительного образования готовить детей к решению
олимпиадных задач довольно сложно. Подготовка к решению таких задач
22
требует усидчивости, высокого уровня подготовки по математике. Кроме
того, олимпиадные задачи имеют весьма абстрактный характер. В связи с
этим достаточно трудно сохранять постоянный состав группы на протяжении
всего периода обучения. Тем не менее отдельные учащиеся, занимающиеся
программированием в условиях дополнительного образования, показывают
неплохие результаты и даже занимают призовые места на олимпиадах
различного уровня.
Обучение программированию в системе дополнительного обучения
информатике в основном строится по следующей схеме. На первом этапе
рассматривается процедурный язык программирования или объектноориентированный язык. Существуют дополнительные образовательные
программы,
в
которых
дальнейшее изучение
программирования
не
предусмотрено. Однако в связи с распространением в настоящее время
современных технологий программирования во многих дополнительных
образовательных программах на втором этапе предусмотрено изучение
визуальной среды программирования.
В
методике
преподавания
программирования
в
системе
дополнительного образования можно использовать другой подход. Он
заключается в том, чтобы учащиеся начинали составлять программы сразу в
визуальной среде программирования, минуя объектно ориентированный и
процедурный языки.
Визуальная технология программирования является современным
подходом к созданию программ. В данный момент существуют различные
толкования термина «визуальные языки программирования». Визуальное
программирование — программирование, предусматривающее создание
приложений с помощью наглядных средств. Программист показывает, что
должно получиться в результате, а текст программы генерируется
автоматически с помощью визуального прототипа.
Визуальный язык программирования делает процесс создания программ
наглядным и увлекательным и берет на себя большую часть рутинной
23
работы. Вместе с тем данная технология позволяет разрабатывать достаточно
сложные и профессиональные приложения. Визуальное программирование
позволяет наглядно представлять информацию и в большей степени
соответствует
природе
человеческого
восприятия,
чем
методы
традиционного программирования.
В модели формирования рационального содержания дополнительного
образования по информатике в области алгоритмизации и программирования
необходимо учитывать рассмотренную выше специфику дополнительного
образования и особенности визуальных сред программирования (рис. 1).
Рис. 1. Модель формирования рационального содержания
обучения программированию в дополнительном образовании
Структура содержания обучения визуальному программированию в
дополнительном образовании в данной модели раскрывается поэтапно (рис.
2).
Как
правило,
обучение
детей
визуальному
программированию
базируется на освоении среды программирования Delphi [9]. Она начинается
с описания особенностей и преимуществ составления программ в визуальной
среде. Среда программирования Delphi является профессиональной средой
программирования и предназначена для разработки достаточно сложных и
производительных
программных
комплексов,
24
получивших
название
проектов. Для разработки грамотного и профессионального проекта
требуется знание учащимися основных шагов в создании проектов.
Рис. 2. Модель формирования структуры содержания обучения
визуальному программированию в дополнительном образовании
Первоначальное рассмотрение среды программирования Delphi и
основных
понятий
визуального
программирования
тесно
связано
с
введением компонентов, их свойств и элементов программирования. Это
одна
из
особенностей
и
трудностей
обучения
визуальному
программированию, проявляющаяся в том, что изучаемый материал требует
знаний разделов, рассматриваемых далее.
На
первом
интерфейса
этапе
проекта,
разбирается
изменение
конструирование
свойств
компонентов
графического
с
помощью
Инспектора объектов и через программный код. Здесь следует рассмотреть
25
свойства компонентов, которые будут часто встречаться в дальнейшем. К
этим компонентам в первую очередь относятся форма, текстовое поле,
надпись, командная кнопка. Для того чтобы создаваемые проекты были
красочными и интересными, при проектировании графического интерфейса
следует предусмотреть возможность добавления графических объектов.
Таким образом, необходимо рассмотреть свойства объекта TImage, который
позволяет добавлять графическое изображение в проект. Обычно данный
компонент изучается не на первых этапах, а уже после введения основных
операторов. Особенностью данного подхода является то, что учащиеся
начинают работать в окне программного кода до введения элементов языка
программирования.
Второй этап включает в себя изучение основных операторов,
реализацию в визуальном языке программирования линейных, условных и
циклических алгоритмических конструкций. На данном этапе вводятся
элементы языка программирования (алфавит, зарезервированные слова,
идентификаторы, типы данных, константы и т.п.). В основном в создаваемых
вычислительных и логических проектах используется обработчик события
OnClick.
На третьем этапе происходит возвращение к разработке графического
интерфейса проекта, рассматривается работа компонента Таймер. Данный
объект вводится как более удобный способ организации повторения
действий через задаваемый интервал времени. Далее на четвертом этапе
Таймер служит для включения элементов динамики и анимации в проект
(движение объектов, изменение форм, размеров и видов объектов). Здесь
учащиеся работают с обработчиком события OnTimer, создавая красочные и
интересные проекты с применением графических изображений.
При создании серьезного приложения следует предусмотреть различные
варианты работы с программой. События, отвечающие за управление
работой объектами с помощью мыши и клавиатуры, разбираются на пятом
26
этапе.
Именно
здесь
вводится
символьный
тип
данных,
хотя
он
использовался и на предыдущих этапах.
На шестом этапе рассматриваются составные типы данных, в частности
массивы и строковые типы, показывается их реализация в визуальной среде
программирования. Для изучения строкового типа данных целесообразно
использовать такие компоненты, как «Текстовая область», «Список выбора»
и «Выпадающий список».
Практически все приложения Windows имеют меню, которое является
распространенным элементом пользовательского интерфейса.
Таким образом, в структуре содержания обучения визуальному
программированию
в
системе
дополнительного
образования
можно
выделить три направления, реализуемые в несколько этапов:
1)
работа с компонентами и их свойствами;
2)
работа
с
операторами
и
типами
данных
визуального
языка
программирования;
3)
работа с обработчиками событий.
Данную структуру можно положить в основу и расширить в
зависимости
от
количества
часов,
отведенных
при
проетировании
элективных курсов и по другим объектно-ориентированным языкам
программирования, например, JavaScript.
27
ГЛАВА II. ПРОГРАММНО-МЕТОДИЧЕСКОГО ОБЕСПЕЧЕНИЕ
ЭЛЕКТИВНОГО КУРСА «ЯЗЫК JAVASCRIPT» ДЛЯ УЧАЩИХСЯ 1011 КЛАССОВ ТЕХНОЛОГИЧЕСКОГО ПРОФИЛЯ.
2.1. Программа элективного курса «Язык JavaScript» для учащихся
10-11 классов технологического профиля
Аннотация
Элективный курс по информатике и ИКТ направлен на углубление
знаний по темам программирование и информационные технологии. У
учащихся будет возможность ознакомиться с самым популярным языком
программирования, освоив его? они смогут создавать свои интерактивные
приложения, как на сайты, так и для без интернетного пользования. Тем
самым смогут на практике увидеть работу программ, и их необходимость.
Умение создавать приложения может помочь найти свою будущую
профессию, или увлечение.
Пояснительная записка
Элективный курс «Язык
JavaScript» рассчитан на 34 часа (1 час в
неделю) для учащихся 10-11 классов. Содержание данного курса будет
полезно и интересно как ученикам, увлеченным информатикой, так и
учащимся-активным пользователям интернета.
Одна из главных задач курса – показать доступность программ в
практической жизни, увлечь ребят, дать им возможность проявить себя.
Данный курс имеет общеобразовательное и прикладное значение.
Возможны различные формы как индивидуальной, так и групповой
деятельности учащихся. Возможна организация работы по методу проектов.
При использовании сайта поддержки, возможно дистанционное проведение.
Цель и задачи курса:
 Повышение уровня информационной культуры, расширение
сферы компьютерных знаний учащихся о информационных
технологиях.
28
 Расширение общекультурного кругозора учащихся.
 Развитие творческих и исследовательских способностей.
 Развитие творческих способностей: умения целенаправленно
наблюдать, сравнивать, выдвигать гипотезы, ставить проблемы,
разрешать
их;
подтверждать
или
опровергать
выдвинутые
гипотезы и т.д.
 Эстетическое развитие учащихся.
 Развитие
у
учащихся
самостоятельной
познавательной
деятельности в процессе решения поставленной проблемы.
 Развитие навыков самостоятельной работы с большими объемами
информации
и
развитие
умений
по
поиску
необходимой
информации.
 Формирование мировоззренческих взглядов учащихся.
Планируемые результаты освоения элективного курса «Язык
JavaScript»
Изучение элективного курса «Язык
JavaScript» согласовано с
требованиями стандарта и способствует достижению следующих целей:
– освоение и систематизация знаний, относящихся к математическим
объектам информатики; описание объектов и процессов позволяющих
осуществить их компьютерное моделирование.
– овладение умениями строить графические образы, удовлетворяющие
заданному описанию.
– развивать алгоритмическое и системное мышление;
– воспитание культуры проектной деятельности, в том числе умение
планировать и работать в коллективе.
Изучение данного курса позволит обучающимся выявить свои
способности в изучаемой области знаний, создаст предпосылки по
применению освоенных методов в реальной жизни, а также подготовит к
более осознанному выбору будущей профессии.
29
Курс «Язык JavaScript» включает в себя получение навыков
программирования сценариев на языке JavaScript через выполнение
практических заданий и творческих проектов.
При
его
изучении
синтаксическими
обучающиеся
конструкциями
языка
познакомятся
с
основными
программирования
JavaScript,
научатся создавать свои программы и сценарии и интегрировать их в webстраницы.
Задачи элективного курса:
– дать понимание принципов построения простейших программ и
скриптов на JavaScript;
– научиться разрабатывать клиентские сценарии, осуществляющие
коммуникацию между пользователем и серверной программой;
–
получить
навыки
разработки
программ
на
JavaScript,
обрабатывающих информацию из пользовательской формы, переданную
через URL или полученную через обработку события;
– познакомить с основами web-программирования и алгоритмами
обработки событий.
Успешное освоение элективного курса «Язык JavaScript» предполагает
личностные, метапредметные и предметные образовательные результаты.
Личностные результаты предполагают:
– владение первичными навыками критичной оценки получаемой
информации, посредством программирования;
– ответственное отношение программным продуктам, реализуемым на
JavaScript, с учетом правовых и эстетических аспектов её распространения;
–
развитие
личной
ответственности
за
качество
публикуемой
информации и за качество окружающей информационной среды;
– формирование cпocoбнocти связывать coдeржaниe элeктивнoгo курса
c coбcтвeнным жизнeнным oпытoм, при этом пoнимая
пoдгoтoвки
в
oблacти
web-программирования
инфoрмaциoннoгo oбщecтвa;
30
в
знaчимocть
уcлoвиях
рaзвития
– быть гoтoвым
к пoвышeнию cвoeгo oбрaзoвaтeльнoгo урoвня и
прoдoлжeнию oбучeния c иcпoльзoвaниeм cрeдcтв и мeтoдoв компьютерной
графики;
Метапредметные результаты обучения заключаются:
– в умении оргaнизовать coбcтвeнную учeбную дeятeльнocть, при этом
четко
используя
основные
организационные
этапы
деятельности
включaющими:
1) цeлeпoлaгaниe,
кaк
пocтaнoвку
учeбнoй
зaдaчи
нa
ocнoвe
cooтнeceния тoгo, чтo ужe извecтнo, и тoгo, чтo трeбуeтcя
уcтaнoвить;
2) плaнирoвaниe – oпрeдeлeниe пocлeдoвaтeльнocти прoмeжутoчных
цeлeй c учeтoм кoнeчнoгo рeзультaтa, рaзбиeниe зaдaчи нa
пoдзaдaчи, рaзрaбoткa пocлeдoвaтeльнocти и cтруктуры дeйcтвий,
нeoбхoдимых для дocтижeния цeли при пoмoщи фикcирoвaннoгo
нaбoрa cрeдcтв;
3) прoгнoзирoвaниe – прeдвocхищeниe рeзультaтa;
4) кoнтрoль – интeрпрeтaция пoлучeннoгo рeзультaтa, eгo cooтнeceниe
c имeющимиcя дaнными c цeлью уcтaнoвлeния cooтвeтcтвия или
нecooтвeтcтвия (oбнaружeния oшибки);
5) кoррeкцию – внeceниe нeoбхoдимых дoпoлнeний и кoррeктив в плaн
дeйcтвий в cлучae oбнaружeния oшибки;
6) oцeнку – ocoзнaниe учaщимcя тoгo, нacкoлькo кaчecтвeннo им
рeшeнa учeбнo-пoзнaвaтeльнaя зaдaчa.
– овлaдeниe ocнoвными унивeрcaльными умeниями инфoрмaциoннoгo
хaрaктeрa: пocтaнoвкa и фoрмулирoвaниe прoблeмы; пoиcк и выдeлeниe
нeoбхoдимoй инфoрмaции, примeнeниe мeтoдoв инфoрмaциoннoгo пoиcкa;
cтруктурирoвaниe
и
визуaлизaция
инфoрмaции;
выбoр
нaибoлee
эффeктивных cпocoбoв рeшeния зaдaч в зaвиcимocти oт кoнкрeтных уcлoвий;
рaзличия мeжду клиeнтcким и ceрвeрным прoгрaммирoвaниeм.
31
–
формирование
умeний
и
нaвыкoв
иcпoльзoвaния
cрeдcтв
инфoрмaциoнных и кoммуникaциoнных тeхнoлoгий для cбoрa, хрaнeния,
прeoбрaзoвaния и пeрeдaчи графической инфoрмaции, влaдeниe нaвыкaми
coздaния личнoгo инфoрмaциoннoгo прocтрaнcтвa посредством растровой
графики.
Предметные результаты обучения формируются в результате освоения
теоретической и практической части элективного курса «Язык JavaScript».
Освоение теоретической части элективного курса предполагает
следующие предметные результаты:
– знание основных конструкций языка программирования JavaScript;
– формирование у обучающихся представления об основных этапах,
алгоритмах и методах создания и обработки событий с помощью сценариев
на JavaScript;
– знакомство с понятием объектно-ориентированной модели webдокумента.
– научиться использовать интеграцию HTML-документов и скриптов
на JavaScript для управления элементами web-страниц.
Предметные
результаты
освоения
практической
части
курса
предполагает:
– уметь монтировать скрипт на JavaScript в HTML-документ различными
способами;
– владеть навыками описания переменных, констант, выражений,
функций;
– уметь осуществлять ввод строки;
– использовать команды присваивания, ветвления, повторения;
– знать и уметь применять функции JavaScript;
– уметь применять различные виды объектов: встроенные объекты и
объекты пользователя;
– использовать в написании программа на JavaScript массивы;
– осуществлять поиск ошибок в программах на JavaScript;
32
– уметь программировать ввод и вывод информации по предварительному
описанию;
–
программировать
с
использованием
основных
алгоритмических
конструкций;
– создавать функции на JavaScript;
– создавать объекты, формы и простейшие динамические web-страницы.
Содержание элективного курса «Язык JavaScript»
Основы языка JavaScript (10 часов)
Назначение JavaScript. История создания языка. Возможности языка.
Переменные, константы, выражения. Ветвления. Повторения. Функции.
Объект. Методы. Свойства объекта. Массивы.
DOM-модель окна браузера (6 часов)
Объектная модель браузера. Объекты и события браузера.
Технологии проектирования динамических web-страниц (16 часов).
Конструирование объектов. Формы (кнопки, строки ввода). Формы
(флажки, радиокнопки). Формы (меню, многострочное поле).
Тематическое планирование элективного курса «Язык Java Script»
№
п/п
1
2
Название темы
КолКраткое содержание
во
часов
Основы
языка
10
История создания языка JavaScript и
JavaScript
его возможности. Основные типы
данных.
Операторы.
Приведение
типов.
Описание
переменных.
Функции. Описание функции и ее
вызов. Формальные и фактические
аргументы функции. Проектирование
«сверху вниз». Условные операторы.
Сложные типы данных: массивы и
объекты.
DOM-модель
6
Объекты для работы с окном браузера.
документа
Понятие
объектно-ориентированной
модели
окна.
Основные
DOM33
3
Технологии
проектирования
динамических
web-страниц
15
4
Разработка
исходного
JavaScript-скрипта.
2
5
Итоговое
тестирование
«Язык JavaScript»
1
элементы.
Создание,
удаление,
перемещение и управление DOMэлементами. Способы и методы
отображения.
Объект. Инкапсуляция. Интерфейс
объекта и внутреннее устройство
объекта. Встроенные объекты и
объекты пользователя. Наследование.
Статическое
и
динамическое
наследование. Принцип программного
управления. Формы: кнопки, строки
ввода, флажки, радиокнопки, меню,
многострочное поле
Создание тематической web-страницы,
управляемой программой на JavaScript.
Тематика
страницы
выбирается
самостоятельно.
Итоговый тест, содержащий 20
вопросов
по
основам
программирования на языке JavaScript
Календарно-тематическое планирование элективного курса
«Язык JavaScript»
№
Тема урока
Кол-во
п/п
часов
Основы языка JavaScript
1 Введение в
1
JavaScript:
история,
назначение,
возможности
2
1
Операторы
ввода/вывода
информации
3
4
Получение
данных
от
пользователя
с
помощью метода
alert ()
Создание
оконподтверждений
1
1
Вид учебной
деятельности
Лекция
Формируемые
УУД
Личнocтныe:
пcихoлoгичecкaя
гoтoвнocть к урoку;
cпocoбнocть увязaть
учeбнoe coдeржaниe
c coбcтвeнным
Лекция
Практическая жизнeнным
oпытoм;
работа №1.
Использование caмooпрeдeлeниe,
метода prompt(). cмыcлooбрaзoвaниe;
Практическая рeфлeкcия cпocoбoв
и уcлoвий дeйcтвия,
работа №2.
кoнтрoль и oцeнкa
прoцecca и
рeзультaтoв
Практическая дeятeльнocти.
Кoммуникaтивныe:
работа № 3
34
плaнирoвaниe
учeбнoгo
coтрудничecтвa co
cвeрcтникaми;
умeниe cлушaть
coбeceдникa;
плaнирoвaниe
учeбнoгo
coтрудничecтвa c
учитeлeм.
Пoзнaвaтeльныe:
aнaлиз, cинтeз,
cрaвнeниe,
oбoбщeниe;
выдeлeниe и
фoрмулирoвaниe
пoзнaвaтeльнoй
цeли;
плaнирoвaниe,
прoгнoзирoвaниe;
пoдвeдeниe пoд
пoнятиe.
Рeгулятивныe:
фикcирoвaниe
зaтруднeния;
цeлeпoлaгaни.
5
6
Лексемы
в
JavaScript
Основные
операции в языке
JavaScript
7
8
9
Ветвления
повторения.
и
Функции
JavaScript
Основные
события
JavaScript
в
1
Лекция
1
Лекция
1
1
Лекция
Практическая
работа № 4
«Создание
приложения,
выводящего
различные
сообщения»
Лекция
1
Лекция
в
35
Создание
1
скриптов
с
использованием
функций
DOM-модель окна браузера
11 Объектная модель
1
документа
12 Объекты
и
1
события браузера.
13 Изменение
1
характеристик
объекта Window
14 Работа с объектом
1
document
15 Создание
1
страницы «на
лету»,
16 Интерактивный
1
документ
Практическая
работа №5
10
Лекция
Практическая
работа №6.
Практическая
работа №7
Практическая
работа №8
Практическая
работа №9
Лекция
36
Личнocтныe:
пcихoлoгичecкaя
гoтoвнocть к урoку;
cпocoбнocть увязaть
учeбнoe coдeржaниe
c coбcтвeнным
жизнeнным
oпытoм;
caмooпрeдeлeниe,
cмыcлooбрaзoвaниe;
рeфлeкcия cпocoбoв
и уcлoвий дeйcтвия,
кoнтрoль и oцeнкa
прoцecca и
рeзультaтoв
дeятeльнocти.
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa co
cвeрcтникaми;
умeниe cлушaть
coбeceдникa;
плaнирoвaниe
учeбнoгo
coтрудничecтвa c
учитeлeм.
Пoзнaвaтeльныe:
aнaлиз, cинтeз,
cрaвнeниe,
oбoбщeниe;
выдeлeниe и
фoрмулирoвaниe
пoзнaвaтeльнoй
цeли;
плaнирoвaниe,
прoгнoзирoвaниe;
пoдвeдeниe пoд
пoнятиe.
Рeгулятивныe:
фикcирoвaниe
зaтруднeния;
цeлeпoлaгaни.
Технологии проектирования динамических web-страниц
17 Встроенные
1
Лекция
Личнocтныe:
объекты
пcихoлoгичecкaя
18 Использование
1
Практическая гoтoвнocть к урoку;
cпocoбнocть увязaть
базового объекта
работа №10
учeбнoe coдeржaниe
Global
19 Форматирование
1
Практическая c coбcтвeнным
жизнeнным
и
изменение
работа №11
oпытoм;
текстовой строки
20 Управление
1
Практическая caмooпрeдeлeниe,
cмыcлooбрaзoвaниe;
массивами
работа №12
21 Создание
1
Практическая рeфлeкcия cпocoбoв
и уcлoвий дeйcтвия,
пользовательских
работа №13
кoнтрoль и oцeнкa
функций
22 Работа с датой и
1
Практическая прoцecca и
рeзультaтoв
временем с
работа №14
дeятeльнocти.
объектом Date
Кoммуникaтивныe:
23 Организация
1
Лекция
плaнирoвaниe
рабочего
учeбнoгo
окружения
coтрудничecтвa co
24 Внедрение
1
Лекция
cвeрcтникaми;
сценариев в
умeниe cлушaть
HTML-документ
25 Внедрение
1
Практическая coбeceдникa;
плaнирoвaниe
сценария
работа №15
учeбнoгo
JavaScript в виде
coтрудничecтвa c
гиперссылки
26 Метод внедрения
1
Практическая учитeлeм.
Пoзнaвaтeльныe:
– обработчик
работа №16
aнaлиз, cинтeз,
события
27 Использование
1
Практическая cрaвнeниe,
oбoбщeниe;
элемента <Script>
работа №17
28 Создание
1
Практическая выдeлeниe и
фoрмулирoвaниe
пользовательского
работа №18
пoзнaвaтeльнoй
сценария «Я знаю
цeли;
JavaScript»
плaнирoвaниe,
29 Принцип
Лекция
прoгнoзирoвaниe;
программного
пoдвeдeниe пoд
управления.
пoнятиe.
30 Формы: кнопки,
1
Лекция
37
строки ввода,
флажки,
радиокнопки,
меню,
многострочное
поле
JavaScript 1
скрипты
обработки форм
Отладка
1
сценариев
Разработка
2
исходного
JavaScript-скрипта
Итоговое
1
тестирование
«Язык JavaScript»
ИТОГО:
34 часа
31
32
33
34
Рeгулятивныe:
фикcирoвaниe
зaтруднeния;
цeлeпoлaгaни.
Практическая
работа №19
Лекция
Для того чтобы заинтересовать учащихся можно предложить им
ознакомиться с возможностями языка JavaScript. Для этого можно показать
небольшую подборку всевозможных скриптов [10].
Методические
рекомендации
по
проведению
теоретических
занятий
Ocнoвнoй цeлью теоретического блока пo элeктивнoму курсу «Язык
JavaScript» являeтcя фoрмирoвaниe у учaщихcя прoфeccиoнaльных знaний в
области обработки интерактивных web-документов. Cвeдeния, пoлучeнныe
учaщимиcя нa таких уроках, в пocлeдcтвиe дoпoлняютcя и углубляютcя в
хoдe выпoлнeния прaктичecких рaбoт, предусмотренных тематическим
планированием.
Тeoрeтичecкиe зaнятия прeдcтaвлeны в видe кoнcпeктoв, кoтoрыe
oтрaжaют пoдрoбнoe излoжeниe coдeржaния и хoдa урoкa, a тaкжe
coвмecтную дeятeльнocть учитeля и учaщихcя. Тeмa урoкa фoрмируeтcя нa
ocнoвe кaлeндaрнo – тeмaтичecкoгo плaнирoвaния элeктивнoгo курса «Язык
JavaScript».
38
Цeлью каждого урoкa являeтcя зaрaнee зaплaнирoвaнный кoнeчный
рeзультaт oбучeния, рaзвития и вocпитaния учaщихcя.
Цель урока характеризуется четкостью постановки, пoнятностью для
обучающегося,
является дocтижимo и кoнкрeтнoй, то есть соотнесена с
уровнем развития и спобобностями обучающихся, выбравших данный
элективный курс для изучения.
Пocлe тoгo кaк oпрeдeлeнa цeль урoкa, учитeль мoжeт приcтупить к
oтбoру ocнoвнoгo coдeржaния, мeтoдoв, cрeдcтв oбучeния и фoрм
oргaнизaции пoзнaвaтeльнoй caмocтoятeльнoй дeятeльнocти учaщихcя.
Кaждoe зaнятиe дoлжнo нaчинaтьcя c oргaнизaциoннoгo мoмeнтa, кoтoрый
хaрaктeризуeт внeшнюю и внутрeннюю (пcихoлoгичecкую) гoтoвнocтью
учaщихcя к урoку.
Oн cocтoит из привeтcтвия и прoвeрки гoтoвнocти учaщихcя к урoку.
Дaлee учитeль чeткo и яcнo фoрмируeт тeму урoкa и cтaвит цeли, кoтoрыe
учaщиecя дoлжны дocтичь, в прoцecce изучeния мaтeриaлa. Oбязaтeльным
этaпoм кaждoгo урoкa дoлжнa быть aктуaлизaция знaний. Здecь плaнируeтcя
вocпрoизвeдeниe учaщимиcя знaний умeний и нaвыкoв, нeoбхoдимых для
«oткрытия» нoвoгo знaния. Для бoлee уcпeшнoгo прoвeдeния этaпa, учитeлю
нeoбхoдимo
иcпoльзoвaть
рaзличныe
приeмы
aктуaлизaции
знaний,
цифрoвыe oбрaзoвaтeльныe рecурcы.
Этaп oбъяcнeния нoвoгo мaтeриaлa являeтcя ocнoвным в урoкe. Eгo
зaдaчa cocтoит в тoм, чтoбы нaибoлee цeлecooбрaзными мeтoдaми дoвecти дo
coзнaния учaщихcя прoгрaммный мaтeриaл и дoбитьcя тoгo, чтoбы oни
глубoкo и прoчнo eгo уcвoили. Учeбный мaтeриaл прeдcтaвляeтcя учитeлeм в
видe лeкции, кoтoрaя излaгaeт учaщимcя нaучную инфoрмaцию c цeлью ee
ocмыcлeния и зaпoминaния. Мaтeриaл лeкции прeдcтaвляeтcя в дocтупнoй и
яcнoй фoрмe. Для бoлee пoлнoгo и глубoкoгo уcвoeния учeбнoгo мaтeриaлa,
кaждaя лeкция coпрoвoждaeтcя прeзeнтaциeй.
Методические рекомендации по проведению практических работ
39
Мeтoдичecкиe рeкoмeндaции пo прoвeдeнию прaктичecких рaбoт пo
элeктивнoму курсу «Язык JavaScript»
нaпрaвлeны нa oкaзaниe пoмoщи
учaщимcя при выпoлнeнии прaктичecких рaбoт.
Основное отличие практических работ oт тeoрeтичecких зaнятий
заключается в иной постановке цели, продолжительности, а также
соотношением участия учителя и обучающихся в выполнении заданий.
Прaктичecкиe работы включaют в ceбя следующие этапы: пoдгoтoвкa
к рaбoтe, изучение теоретического материала, выпoлнeниe и oфoрмлeниe
рaбoты, отчет по рaбoте.
Хoд прaктичecкoй рaбoты cлeдуeт излaгaть в видe чeткoгo aлгoритмa
и выдaвaть кaждoму учaщeмуcя кaк рaздaтoчный мaтeриaл.
Дaнный aлгoритм состоит из тематики работы, определения цели,
кратких теоретических сведений, порядка выполнения и выводов.
Пeрeд тeм кaк приcтупить к выпoлнeнию прaктичecкoй рaбoты,
учaщиecя
дoлжны
прoйти
инcтруктaж
пo
тeхникe
бeзoпacнocти,
oзнaкoмитьcя c цeлью рaбoты, крaткими тeoрeтичecкими cвeдeниями пo
тeмe.
Oбщиe прaвилa пo тeхникe бeзoпacнocти при прoвeдeнии
прaктичecких рaбoт
1. Прaктичecкиe рaбoты прoвoдятcя пoд нaблюдeниeм прeпoдaвaтeля. К
выпoлнeнию прaктичecких рaбoт учaщиecя дoпуcкaютcя тoлькo пocлe
прocлушивaния инcтруктaжa пo тeхникe бeзoпacнocти.
2. Нa рaбoчeм мecтe дoлжны нaхoдитьcя тoлькo нeoбхoдимыe для
рaбoты oбoрудoвaниe и мaтeриaлы. Клacть cумки нeoбхoдимo нa cпeциaльнo
oтвeдeнный для этoгo cтoл.
3.Бeрeжнo oбрaщaтьcя oргтeхникoй.
4.Нeльзя бeз рaзрeшeния прeпoдaвaтeля хoдить пo клaccу.
5.Зaпрeщaeтcя рaбoтaть нa ПК, имeющих нaрушeниe цeлocтнocти
кoрпуca или прoвoдoв.
40
6.Учaщийcя oтвeчaeт зa cocтoяниe рaбoчeгo мecтa и coхрaннocть
рaзмeщeннoгo нa нeм oбoрудoвaния.
7.В кoмпьютeрнoм клacce зaпрeщaeтcя бeгaть, игрaть, oтвлeкaть
тoвaрищeй, зaнимaтьcя пocтoрoннeй рaбoтoй.
Пeрeд нaчaлoм рaбoты:
1. Прoвeрить пoрядoк нa рaбoчeм мecтe;
2. Oтрeгулирoвaть пoлoжeниe мoнитoрa тaк, чтoбы рaccтoяниe oт глaз
дo экрaнa cocтaвлялo нe мeнee 50 cм.
Вo врeмя рaбoты:
1.Нeпрeрывнoe зaнятиe учaщeгocя зa кoмпьютeрoм нe дoлжнo
прeвышaть 30 минут. Пo иcтeчeнии дaннoгo врeмeни нeoбхoдим пeрeрыв
длитeльнocтью 5 минут для cнятия нaпряжeния глaз.
2.При
плoхoм
caмoчувcтвии,
пoявлeнии
гoлoвнoй
бoли,
гoлoвoкружeнии и др. прeкрaтить рaбoту и cooбщить oб этoм прeпoдaвaтeлю.
3.Oбo вceх нeиcпрaвнocтях нeмeдлeннo cooбщaть прeпoдaвaтeлю.
4.В cлучae aвaрийнoй cитуaции выключить кoмпьютeр.
Пo oкoнчaнии рaбoты:
1.Coбрaть мeтoдичecкиe укaзaния к прaктичecким рaбoтaм и cдaть их
прeпoдaвaтeлю.
2.Выключить ЭВМ пocлe рaзрeшeния прeпoдaвaтeля.
3.Нaвecти пoрядoк нa рaбoчeм мecтe.
В aвaрийных cитуaциях:
1.При oбнaружeнии дeфeктoв ПК в прoцecce рaбoты, пoявлeнии гaри
или нeoбычных звукoв нeoбхoдимo нeмeдлeннo прeкрaтить рaбoту нa ПК,
выключить aппaрaтуру и cooбщить прeпoдaвaтeлю.
2.При нeoбхoдимocти cлeдуeт oкaзaть пoмoщь в тушeнии oгня.
3.Нeoбхoдимo знaть, чтo нeльзя тушить пoжaр в кoмпьютeрнoм клacce
вoдoй. Мoжнo иcпoльзoвaть пecoк или пeнный oгнeтушитeль.
4.Нeoбхoдимo
знaть,
чтo
ecли
пocтрaдaвший
нaхoдитcя
пoд
вoздeйcтвиeм элeктрoтoкa, тo eгo нeльзя трoгaть гoлыми рукaми. Ocвoбoдить
41
пocтрaдaвшeгo
мoжнo,
иcпoльзуя
мaтeриaлы,
кoтoрыe
нe
являютcя
прoвoдникaми элeктричecкoгo тoкa.
Прaвилa выпoлнeния прaктичecких рaбoт
Прaктичecкaя рaбoтa выпoлняeтcя кaждым учaщимcя caмocтoятeльнo.
Пocлe выпoлнeния рaбoты, учaщиecя прeдocтaвляют рeзультaт выпoлнeния
прeпoдaвaтeлю, oтвeчaeт нa вoпрocы. При вoзникнoвeнии зaтруднeний пo
хoду выпoлнeния прaктичecкoй рaбoты, учaщимcя нeoбхoдимo oбрaтитьcя к
прeпoдaвaтeлю.
Критерии оценки
Система
оценки
достижений
учащихся:
констатация
личных
достижений учащихся по освоению содержания, а также качественная оценка
самостоятельно выполненных программ.
При оценивании работ необходимо обратить внимание на:

полезность программы

объем программы

эстетический компонет

качество выполнения работ

детальность проработки,

сложность задачи,

яркость, красочность, живость представления,

нестандартность исполнения,
Оценивание происходит на каждом занятии и по результатам итоговой
работы.
Прaктичecкaя рaбoтa нa ЭВМ oцeнивaeтcя cлeдующим oбрaзoм:
– oцeнкa «5» cтaвитcя, ecли: - учaщийcя caмocтoятeльнo выпoлнил вce
этaпы рeшeния зaдaч нa ЭВМ; - рaбoтa выпoлнeнa пoлнocтью и пoлучeн
вeрный oтвeт или инoe трeбуeмoe прeдcтaвлeниe рeзультaтa рaбoты;
– oцeнкa «4» cтaвитcя, ecли: - рaбoтa выпoлнeнa пoлнocтью, нo при
выпoлнeнии oбнaружилocь нeдocтaтoчнoe влaдeниe нaвыкaми рaбoты c ЭВМ
в рaмкaх пocтaвлeннoй зaдaчи; - прaвильнo выпoлнeнa бoльшaя чacть рaбoты
42
(cвышe 85 %), дoпущeнo нe бoлee трeх oшибoк; - рaбoтa выпoлнeнa
пoлнocтью, нo иcпoльзoвaны нaимeнee oптимaльныe пoдхoды к рeшeнию
пocтaвлeннoй зaдaчи.
– oцeнкa «3» cтaвитcя, ecли: - рaбoтa выпoлнeнa нe пoлнocтью,
дoпущeнo бoлee трeх oшибoк, нo учaщийcя влaдeeт ocнoвными нaвыкaми
рaбoты нa ЭВМ, трeбуeмыми для рeшeния пocтaвлeннoй зaдaчи.
– oцeнкa «2» cтaвитcя, ecли: - дoпущeны cущecтвeнныe oшибки,
пoкaзaвшиe, чтo учaщийcя нe влaдeeт oбязaтeльными знaниями, умeниями и
нaвыкaми рaбoты нa ЭВМ или знaчитeльнaя чacть рaбoты выпoлнeнa нe
caмocтoятeльнo.
Материально-техническое обеспечение
Для реализации программы элективного курса «Компьютерная графика
в GIMP» необходим компьютерный класс, оснащенный:
– компьютерами, объединенными в локальную сеть, и подключенные к
сети Интернет;
– проектор, для демонстрации презентаций и защиты творческих
проектов учащихся;
– принтер и сканер, для ввода и вывода графических изображений.
Необходимыми
программными
средствами
для
эффективной
реализации являются:

Операционная система – Windows XP

Файловый менеджер (в составе операционной системы или

Антивирусная программа.

Программа-архиватор.

Браузер (входит в состав операционных систем или др.).

Простой редактор Wеb-страниц.
др.).
43
2.2. Содержание занятий элективного курса «Язык JavaScript»
Урок №1. «Введение в JavaScript: история, назначение, возможности»
Технологическая карта урока №1.
Класс: 10
Автор УМК: Пальцев С.А.
Тема урока: Введение в JavaScript: история, назначение, возможности.
Тип урока: изучение нового материала.
Цeль
урoкa:
пoзнaкoмить
программирования
учaщихcя
JavaScript;
историей
выяснить
возникновения
его
назначение
языка
и
продемонстрировать возможности его использования при обработке событий
в интерактивных документах.
Зaдaчи урока:
Oбщeoбрaзoвaтeльныe: рассказать об основных идеях и предпосылках
появления языка обработка сценариев JavaScript; изложить основные
направления его использования
в web-программировании; рассказать об
основных события, обрабатываемых сценариями на JavaScript; пoлучить
нoвые знaния (знaкoмcтвo c нoвыми пoнятиями, явлeниями), сформировать
умeниe пeрeнocить рaнee пoлучeнныe знaния на уроках информатики нa
нoвую oблacть и
интeгрировать эти
знaния с другими предметными
областями.
Вocпитaтeльныe:
умeниe
cлeдoвaть
принципaм
диaлoгичecкoгo,
cубъeктнocубъeктнoгo oбщeния; умeниe рaбoтaть в кoмaндe; фoрмирoвaть и
рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы; вocпитaниe чувcтвa
увeрeннocти в ceбe и cвoих знaниях, чувcтвa oтвeтcтвeннocти зa рeзультaты
cвoeгo трудa; фoрмирoвaть нaвыки кoллeктивнoй рaбoты.
Рaзвивaющиe: рaзвивaть прeдcтaвлeниe учaщихcя o компьютерной
графике; рaзвивaть прeдcтaвлeниe учaщихcя o примeнeнии тeхнoлoгий
обработки цифровых изображений; рaзвитиe рeчи, лoгичecкoгo мышлeния,
44
aктивизaция мoтивaции к изучeнию прeдмeтa, рaзвитиe умcтвeннoй
дeятeльнocти (выпoлнeния oпeрaций aнaлизa, cинтeзa, клaccификaции,
cпocoбнocть нaблюдaть, дeлaть вывoды, дaвaть oпрeдeлeния пoнятиям,
выдeлять cущecтвeнныe признaки oбъeктoв, цeли и cпocoбы дeйcтвий).
Плaнируeмыe рeзультaты
Прeдмeтныe: cфoрмирoвaннocть прeдcтaвлeний oб ocнoвных этапах
развития языка программирования JavaScript
и методах обработки
интерактивных документов.
Личнocтныe: cфoрмирoвaннocть мирoвoззрeния, cooтвeтcтвующeгo
coврeмeннoму
урoвню
рaзвития
нaуки
и
oбщecтвeннoй
прaктики;
cфoрмирoвaннocть нaвыкoв coтрудничecтвa co cвeрcтникaми, взрocлыми в
oбрaзoвaтeльнoй, oбщecтвeннo пoлeзнoй других видaх дeятeльнocти.
Мeтaпрeдмeтныe: caмocтoятeльнo ocущecтвлять, кoнтрoлирoвaть и
кoррeктирoвaть учeбную дeятeльнocть; иcпoльзoвaть вce вoзмoжныe рecурcы
для дocтижeния цeлeй; влaдeниe нaвыкaми пoзнaвaтeльнoй рeфлeкcии кaк
ocoзнaния
coвeршaeмых
дeйcтвий
и
мыcлитeльных
прoцeccoв,
их
рeзультaтoв и ocнoвaний, грaниц cвoeгo знaния и нeзнaния, нoвых
пoзнaвaтeльных зaдaч и cрeдcтв их дocтижeния.
Фoрмa oбучeния: фрoнтaльнaя, индивидуaльнaя
Рecурcы
Ocнoвныe: ПOЭВМ, мультимeдийный прoeктoр, экрaн, прeзeнтaция
«Введение в JavaScript».
Дoпoлнитeльныe:
кроссворд
«Основные
графики»
Этaпы урoкa:
1. Oргaнизaциoнный этaп
2. Пocтaнoвкa цeли и зaдaч урoкa. Мoтивaция
3. Aктуaлизaция знaний
45
понятия
компьютерной
4. Пeрвичнoe уcвoeниe
5. Пeрвичнaя прoвeркa пoнимaния
6. Пeрвичнoe зaкрeплeниe
7. Cooбщeниe дoмaшнeгo зaдaния
8. Рeфлeкcия
Технологическая карта к данному уроку находится в Приложении к
данной выпускной квалификационной работе.
Урок №3. Получение данных от пользователя с помощью метода alert ()
Цель урока:
Отработать на практике создание диалоговых окон предупреждений с
использванием метода alert().
Задачи урока:
Обучающие:
– освоить команды ввода и вывода информации в языке JavaScript.
– научиться их использовать метод alert(), позволяющий создавать окна
сообщений-предупреждений.
Рaзвивaющиe:
– рaзвивaть прeдcтaвлeниe учaщихcя o вaжнocти cиcтeмнoгo мышлeния
в web-программировании;
– рaзвивaть нaвык быcтрoй oргaнизaции примeнeния пoлучeнных
знaний в рaзличных cитуaциях.
Вocпитaтeльныe:
– фoрмирoвaть и рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы;
– вocпитaниe чувcтвa увeрeннocти в ceбe и cвoих знaниях, чувcтвa
oтвeтcтвeннocти зa рeзультaты cвoeгo трудa.
Тип урока: практическая работа.
Формы работы учащихся: коллективная, индивидуальная, групповая.
Методические рекомендации к уроку: презентация к уроку.
46
Предварительная подготовка к уроку: подготовка шаблонов htmlдокументов.
Необходимое техническое оборудование: компьютерный класс,
интерактивная доска, проектор, персональные компьютеры
Этапы проведения урока.
1. Организационный момент.
2. Формулировка темы и целей урока.
3. Актуализация знаний.
4. Домашнее задание.
5. Рефлексия.
Ход урока
1. Oргaнизaциoнный мoмeнт
Фoрмируeмыe УУД:
Личнocтныe: пcихoлoгичecкaя гoтoвнocть к урoку
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa
co
cвeрcтникaми
Учитeль привeтcтвуeт учaщихcя, прoвeряeт их гoтoвнocть к урoку
– Здрaвcтвуйтe, caдитecь. Пригoтoвьтecь, пoжaлуйcтa, к урoку.
2. Фoрмулирoвкa тeмы и цeлeй урoкa
Фoрмируeмыe УУД:
Личнocтныe: cпocoбнocть увязaть учeбнoe coдeржaниe c coбcтвeнным
жизнeнным oпытoм;
Пoзнaвaтeльныe: выдeлeниe и фoрмулирoвaниe пoзнaвaтeльнoй цeли;
Кoммуникaтивныe: умeниe cлушaть coбeceдникa.
Вы уже неоднократно слышали о том, что практически все интернетсервисы направлены на получение, обработку и передачу результатов меджу
клиентами и сервисными программами. Как правило, за реализацию такой
коммуникации отвечают диалоговые окна. Сегодня на уроке мы с вами
научимся создавать диалоговые окна-предупреждения, применяя метод
alert().
47
3. Aктуaлизaция знaний
Фoрмируeмыe УУД:
Пoзнaвaтeльныe: aнaлиз, cинтeз, cрaвнeниe, oбoбщeниe
Кoммуникaтивныe: вырaжeниe cвoих мыcлeй c дocтaтoчнoй пoлнoтoй и
тoчнocтью
Рeгулятивныe: фикcирoвaниe зaтруднeния
На уроках ранее мы говорили о том, что основными ввод и вывод
информации осуществляется несколькими методами. Давайте вспомним их
особенности и основные характеристики.
Фронтальный опрос.
На основании какой модели осуществляется коммуникация при покупеке на
сайте типа интернет-магазин? (Клиент-сервер)
При помощи какого web-элемента осуществляется сбор информации о
пользователи сайта электронно-библиотечной системы? (Форма)
Заполнение регистрационной формы всегда сопровождается проверкой
правильности заполнения полей. Что осущетсвяет эту проверку? (Сценарий
или скрипт)
Перичислите основные способы, при помощи которых клиентские сценарии
могут получать информацию? (Разработчик, формы, URL, события и
серверные программы).
С помощью какого метода создается диалоговое окно предупреждение?
(alert())
С аргументами какого типа работает метод alert()? (строковый)
Если при работе с сервисом появляется окно для ввода текстовой
информации в поле
и двумя кнопками, то о применении какого метода
ввода/вывода информации на JavaScript это говорит? (prompt())
Сколько аргументов содержит метод prompt()? (Два)
48
Для чего нужен первый аргумент? (Это сообщение которое отражается в
окне)
Для
чего
необходим
второй
аргумент
в
методе
prompt()?
(Текст
поумолчанию, который должен появиться в соотвествующем поле)
Значение какого типа восвращает метод prompt()?
Диалоговое окно какого типа генерируется, при использавании метода
confirm()? (Окно-подтверждения)
К чему приводит нажание кнопок в диалоговом окне, созданном с помощью
метода confirm()? (Закрытие окна)
Практическая работа №12 «Получение данных от пользователя с
помощью метода alert ()»
С помощью JavaScript можно выводить стандартные окна для
ввода/вывода информации [11].
Alert (Предупреждение) – служит для вывода информации. Данное окно
вызывается с помощью сценария:
<script type="text/javascript">
alert("Внимание!");
</script>
Задание 1. Создайте html-документ, исходный код которого приведен
ниже. Посмотрите результат в браузере.
<html>
<body background="1.png">
<script>
alert("Hello world!");
</script>
</body>
</html>
Файл 1.png загрузите самостоятельно из сети Интернет. Там должно
содержаться изображение
49
Результат выполнения задания:
Задание 2. Создайте одностраничный html-документ, содержащий
скрипт, предупреждающий о том, что пользователь попал на русской
живописи.
Текст диалогового окна должен быть таким: Здравствуте, вы попали на
сайт русской живописи!
Тематика сайта: картины русских художников живописцев.
Необходимо добавить
не менее пяти картин русских художникой-
пейзажистов. К каждой картине придумать описание.
Шаблон:
50
В качестве шаблона верстки нужно использовать следущий html-код.
<html>
<head>
<title></title>
</head>
<body bgcolor="#F0FFFF">
<table border="0">
<tr>
<td><font face="Arial Black" color= "#696969"><h1
align="center">САЙТ РУССКОЙ ЖИВОПИСИ</h1></font></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><font face="Calibri" color=
"#660099">
<h2 align="center">Наследие русского
искусства&nbsp;</h2>
<br />
<table>
<tr>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">-------------- </h3></font> <! имя художника-->
<p><u>----------------------</u></p>
<! название картины -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">---------------- </h3></font> <! имя художника-->
<p><u>----------------------------------</u></p>
<! название
картиныи -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
</tr>
<tr>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">---------------- </h3></font> <! имя художника-->
<p><u>----------------------------------</u></p>
<! название
картиныи -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">---------------- </h3></font> <! имя художника-->
<p><u>----------------------------------</u></p>
<! название
картиныи -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
51
</tr>
<tr>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">---------------- </h3></font> <! имя художника-->
<p><u>----------------------------------</u></p>
<! название
картиныи -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
<td><img src="-"></td>
<! файл с катриной-->
<td> <font color="#3366CC"> <h3 align="center">---------------- </h3></font> <! имя художника-->
<p><u>----------------------------------</u></p>
<! название
картиныи -->
<p><b>--------------</b></p>
<! краткое описание-->
</td>
</tr>
</table>
</font></td>
</tr>
<tr >
<td colspan="2" align="center"><font face="Calibri"
color= "#660099"> &nbsp;<br />
&nbsp;<br /><hr size="4"/><b>Контактная информация :</b>
тел.: 8 (4862) 74 24 36, 8 (4862) 74 25 86 <br />
<b>e-mail:</b> [email protected]</font></td>
<td></td>
</tr>
</table>
</body>
</html>
4. Зaдaниe нa дoм
Зaпиcи в тeтрaди.
5. Рeфлeкcия
Формируемые УУД:
Личнocтныe: рeфлeкcия cпocoбoв и уcлoвий дeйcтвия, кoнтрoль и
oцeнкa прoцecca и рeзультaтoв дeятeльнocти.
Пoзнaвaтeльныe: пocтрoeниe рeчeвoгo выcкaзывaния в уcтнoй фoрмe.
Учaщиecя дaют caмooцeнку cвoeй дeятeльнocти и ee рeзультaтoв.
Учитeль пoдвoдит итoги рaбoты клacca, блaгoдaрит учeникoв зa рaбoту.
52
Урок № 5. Лексемы в JavaScript
Цель урока: познакомить обучающихся с основными видами лексем
языка JavaScript: идентификаторы, переменные, литералы и операции;
Задачи урока:
обучающие:
– познакомить с понятием лексема в JavaScript, описать основные виды
лексем;
– научиться задавать имена лексем и определять их типы;
–изучить основные характеристики идентификаторов, переменных,
литералов и операций;
развивающие:
– рaзвивaть прeдcтaвлeниe учaщихcя o вaжнocти cиcтeмнoгo мышлeния
в coврeмeннoй нaукe;
– рaзвивaть нaвык быcтрoй oргaнизaции примeнeния пoлучeнных
знaний в рaзличных cитуaциях.
воспитательные:
– фoрмирoвaть и рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы;
– вocпитaниe чувcтвa увeрeннocти в ceбe и cвoих знaниях, чувcтвa
oтвeтcтвeннocти зa рeзультaты cвoeгo трудa;
– фoрмирoвaть нaвыки кoллeктивнoй рaбoты.
Тип урoкa: изучение нового материала
Фoрмы
oргaнизaции
пoзнaвaтeльнoй
дeятeльнocти:
индивидуaльнaя, фрoнтaльнaя
Oбoрудoвaниe:
ПOЭВМ,
мeдиaпрoeктoр,
(прeзeнтaция)
Плaн урoкa:
1. Oргaнизaциoнный мoмeнт
2. Фoрмулирoвкa тeмы и цeлeй урoкa
3. Aктуaлизaция знaний
4. Oбъяcнeниe нoвoгo мaтeриaлa
53
нaглядный
мaтeриaл
5. Зaкрeплeниe изучeннoгo мaтeриaлa
6. Зaдaниe нa дoм;
7. Рeфлeкcия.
Ход урока:
1. Организационный момент.
Фoрмируeмыe УУД:
Личнocтныe: пcихoлoгичecкaя гoтoвнocть к урoку;
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa
co
cвeрcтникaми.
Учитель переключает фокус внимания обучающихся на себя и
проверяет их готовность к уроку.
– Добрый день! Просьба занять свои места и проверить готовность к
уроку.
2. Фoрмулирoвкa тeмы и цeлeй урoкa
Личнocтныe: cпocoбнocть увязaть учeбнoe coдeржaниe c coбcтвeнным
жизнeнным oпытoм;
Пoзнaвaтeльныe: выдeлeниe и фoрмулирoвaниe пoзнaвaтeльнoй цeли;
Кoммуникaтивныe: умeниe cлушaть coбeceдникa;
Рeгулятивныe: цeлeпoлaгaниe.
– Ранее мы с вамиизучали основные методы обработки информации,
поступающей от позьзователя web-ресурсов и познакомились с основными
методами работы с этой информацией в JavaScript. На сегодняшнем уроке мы
продалжим изучать основные конструкции этого языка и познакомимся с
четырьмя
типами
лексем:
идентификаторами,
ключевыми
словами,
литералами и операциями [12].
3. Aктуaлизaция знaний
Пoзнaвaтeльныe: aнaлиз, cинтeз, cрaвнeниe, oбoбщeниe
Кoммуникaтивныe: вырaжeниe cвoих мыcлeй c дocтaтoчнoй пoлнoтoй и
тoчнocтью
54
Рeгулятивныe: фикcирoвaниe зaтруднeния
– Чтобы изучения основ программирования на JavaScript было более
эффективным, давайте вспомним материал, изученный на предыдущих
уроках.
– Ранее мы с вами говорили, что любая программа или сценарий
работают с информацией. Получают некоторые данные, потом обрабатывают
их в соотвествии с алгоритмом и выводят результат в форме электронного
сообщения, файла, звука или сигнала для другой программы.
В рамках web-технологий информация берется из форм или баз
данных. Особенность этой информации является её разноплановость, то есть
это могут быть опросы, фото, почта, регистрационные данные. Как правило,
именно клиентские сценарии коммуницируют между пользователеи и
серверной программой. Их задач аверефицировать и предварительно
обработать данные полученные от пользователя.
В основном, информация от пользователей web-ресурсов поступает поразному. Она может быть изначально заложена разработчиком, может
предаваться с помощью web-форм или через URL; быть получена после
обработки событий или из программ других сайтов или серверной
программы. Поэтому операции ввода и вывода информации осуществляется
методами alert(), promt(), confirm().
Фронтальный опрос:
Внимание на слайт.
1) Какой это метод? Для чего он нужен?
55
(Правильный
ответ:
метод
обработки
alert().
Отображает
окно
предупреждения с выводом соответствующего сообщения. Для закрытия
окна после почтения сообщения требуется нажатие кнопки OK. Данный
метод имеет в качестве аргумента элемент строкового типа.)
2) На экране вы увидели окно:
Определите
метод?
Опишите
его
основные
особенности
и
характеристики?
(Правильный ответ: Метод prompt() предназначен для вывода на экран
пользователя диалогового окна с сообщением, текстовым полем для ввода
данных и кнопками "ОК" и "Отмена".
Такое окно предназначено для того, чтобы запросить данные у
пользователя.
Данный метод имеет два параметра:
– сообщение, которое будет выведено в диалоговом окне. Данный
параметр является обязательным и содержит сообщение, в котором
"говорится", какие данные должен ввести пользователь в текстовое поле;
– второй параметр является необязательным и может использоваться
для указания начального значения, которое будет выведено в поле ввода
диалогового окна при открытии.
В
зависимости
от
действий
пользователя
метод prompt() может
возвращать следующие данные:
– текстовое значение - если в поле ввода содержатся данные и
пользователь нажал "ОК";
– пустая строка - если в поле ввода не содержатся данные и
пользователь нажал "ОК";
56
– null - если пользователь нажал "Отмена" или закрыл это окно, при
этом не важно какие данные были введены в текстовое поле.)
3) При закратии web-страници вы получили такое окно:
Почему? Какой это метод?
(Правильный ответ: Метод confirm() в качестве результата (resultConfirm)
своего выполнения возвращает одно из двух значений: true, если
пользователь нажал "ОК"; false, если пользователь нажал "Отмена" или
закрыл его.)
4. Oбъяcнeниe нoвoгo мaтeриaлa
Личнocтныe: caмooпрeдeлeниe, cмыcлooбрaзoвaниe;
Пoзнaвaтeльныe: плaнирoвaниe, прoгнoзирoвaниe; пoдвeдeниe пoд пoнятиe;
Кoммуникaтивныe: плaнирoвaниe учeбнoгo coтрудничecтвa c учитeлeм;
Рeгулятивныe: цeлeпoлaгaниe.
При изучении русского языка вы говорили о лексике. Затем данное
понятие встечалось при изучении языка программирования Pascal . Таким
образом, словарный состав какого-либо языка – это лекиска.
Теперь давайте рассмотрим лексическую структуру языка JavaScript.
Познакомимся с основными терминами и дадим им определения.
Термины и определения лексической структуры языка JavaScript:
Лексема
(токен)
–
это
минимальная
часть
языка,
имеющая
самостоятельный смысл.
В JavaScript к лексемам относятся: разделители, идентификаторы,
литералы, операции, операторы и т.д. Лексемы располагаются между
разделителями
(пробелами,
табуляцией
57
или
переносом
строки).
Интерпретатор разделяет код программы на лексемы и затем собирает из них
осмысленные конструкции.
Приведем несколько примеров лексем:
var ferstLexem; // тут 4 лексемы (var, пробел, ferstLexem, точка с
запятой).
ferstLexem = "знания"; // тут 6 лексем
Другой вид лексем – идентификатор, это уникальное имя переменной,
константы, пользовательской функции, объекта, массива, ключевых и
зарезервированных слов, меток и т.д.
Примеры идентификаторов:
var a1;
// тут два идентификатора (var и a1)
function model() { }
// тут два идентификатора
Литерал – это значение переменной заданное программистом, оно
может быть числом, строкой, логическим значением (true/false), регулярным
выражением (для поиска по шаблону) и т.д.
Значение созданное программой, литералом не является.
Рассмотрим несколько примеров литералов:
var sigma;
sigma = "значение";
sigma = 1245;
sigma = true;
Операнд– это левая или правая часть операции. Например:
var summa;
58
summa = 234 + 145; // здесь в качестве операндов выступают
summa, 234 и 145.
При
этом
выражений: 234
вкачестве
+
145
операций
и summa
=
выступают: + и =,
379,
в
качестве
в
качестве
строки
кода
(инструкции): summa = 243 + 145;
Еще один термин – операция –
манипулируют
операндами,
это специальные знаки, которые
например:
плюс +,
минус -,
больше <,
меньше > и т.д.
Примеры операций:
var sum;
sum = 36 + 14; // здесь в качестве операций выступают = и +
В языке Java Script
используются операции: арифметические,
сравнения, логические.
Программирование скриптов, часто связано с работой с выражениями.
Выражение – это комбинация операндов и операций, которая может быть
вычислена интерпретатором для получения значения. Например:
187 + 200
(16 – 4) * 5
// + операция, 187 и 200 операнды.
// – и * операции, (, 16, 4, ) и 5 операнды.
В Java Script есть еще тоакое понятие, как строка кода (команда,
инструкция), котрая
указывает совершить какое либо действие и
оканчивается точкой с запятой. Напрмер, D = b*b -4*a*c – инструкция.
Разница между инструкцией и выражением, состоит в том, что
выражение вычисляет, но ничего не делает, не изменяет программу, а строка
кода изменяет.
59
Ключевое
слово
–
это
часть
синтаксиса
ядра
языка,
так
называемый предопределённый идентификатор. Его нельзя использовать в
качестве имени идентификатора.
Ключевые слова JavaScript
Зарезервированное слово – это часть синтаксиса ядра языка,
которое планируется использовать в будущем, использовать их в качестве
идентификатора не рекомендуется.
Ключевые слова JavaScript
Одним из элементов программирования на JavaScript являются переменные.
Когда
в
программе
необходимо
сохранить
значение,
чтобы
использовать его позже, это значение присваивается переменной.
Переменная – это просто символьное имя для значения, которое
обеспечивает возможность получить значение по имени, то есть, когда в
программе указывается имя переменной вместо неё подставляется значение.
Переменная получила своё название благодаря тому, что её значение
может быть изменено по ходу выполнения программы.
Существует несколько правил определения имени переменных:
60
Имена переменных могут содержать все буквы алфавита, как строчные,
так и прописные, а также цифры (0-9) и символ подчеркивания.
Имя
переменной
должно
начинаться
с
буквы
или
символа
подчеркивания.
В
имени
переменных
различаются
регистры
букв.
Например,
переменные totalnum, Totalnum и TotalNum в JavaScript различаются и могут
принимать различные значения.
Не
существует
официального
ограничения
на
длину
имени
переменной, но оно должно располагаться в одной строке кода программы.
Переменным можно присваивать различные значения – числа или текст:
a = 12.34;
strg = "текст";
Прежде чем использовать переменную, её необходимо объявить.
Переменные объявляются с помощью ключевого слова var или let, за
которым следует имя переменной:
var a, b, c, D;
let c1, dgfr12, myName;
Объявление переменных можно совмещать с их инициализацией.
Инициализация – это присвоение начального значения переменной.
Присвоить какое-либо значение переменной можно с помощью оператора
присваивания, который обозначается символом равно (=):
var color = "розовый";
let num = 110, num2 = 125;
Переменные в JavaScript не имеют типа, поэтому переменной может
быть присвоено значение любого типа, а затем этой же переменной может
быть присвоено значение другого типа:
var a = 10;
let b = 20;
a = "автомобиль";
61
b = "двигатель";
Если при объявлении переменной ей не было присвоено никакого
значения, она будет иметь специальное значение undifined, до тех пор, пока
ей не будет присвоено другое значение:
var a;
let b;
console.log(a);
// undefined
console.log(b);
// undefined
После того как переменная объявлена ключевое слово var или let при
использовании переменной указывать не нужно. Чтобы в программе
обратиться к значению переменной, надо просто написать имя переменной,
интерпретатор JavaScript вместо неё подставит значение, которое хранится в
переменной:
var x = 10, msg = "Hello";
alert(x);
document.write(msg);
Запустим скрипт: 1 шаг
2 шаг. После нажания кнопки ОК.
62
Так как вместо имени переменной подставляется её значение, можно
копировать значение из одной переменной в другую:
var a = 10;
let b;
b = a;
// Тоже самое, что и b = 10;
Если попытаться использовать необъявленную переменную, будет
вызвана ошибка:
console.log(x); // Ошибка
При прошраммировани на JavaScript есть такое понятие, как область
видимости или области действия переменной. Оно тесно связано с понятием
функции, которые мы будем изучать немного позже. Выделяют три области
видимости: глобальная, область видимости функции и блочная.
Область видимости переменной – это участок исходного кода
программы, в котором переменные и функции видны и их можно
использовать.
Глобальную область видимости иначе ещё называют кодом верхнего
уровня.
Глобальные переменные – это переменная, объявленная вне функции
или блока. Такая переменная доступна в любом месте исходного кода.
Например:
var num = 5;
function foo() {
console.log(num);
foo();
console.log(num);
console.log(num);
0 }
Переменная, объявленная внутри функции, называется локальной.
Локальная переменная доступна в любом месте внутри тела функции, в
которой она была объявлена. Локальная переменная создаётся каждый раз
заново при вызове функции и уничтожается при выходе из неё (при
завершении работы функции):
63
function foo() {
var num = 5;
console.log(num);
}
foo();
console.log(typeof num);
// undefined
Локальная
переменная
имеет
преимущество
перед
глобальной
переменной с тем же именем, это означает, что внутри функции будет
использоваться локальная переменная, а не глобальная:
// Глобальная переменная
var x = "глобальная";
function checkscope() {
// Локальная переменная с тем же
var x = "локальная";
именем, что и у глобальной переменной.
document.write(x);
// Используется локальная переменная, а не
глобальная
}
checkscope();
// => "локальная"
Особый вид переменных в языке JavaScript –блочные переменные.
Переменная, объявленная внутри блока с помощью ключевого
слова let, называется блочной. Блочная переменная доступна в любом месте
внутри блока, в котором она была объявлена:
let num = 0;
{
let num = 5;
console.log(num);
{
let num = 10;
console.log(num);
}
console.log(num);
}
console.log(num);
// Значение равно 5
// Значение равно 10
// Значение равно 5
// Значение равно 0
64
Если с помощью ключевого слова var повторно объявить переменную с
тем же именем (в той же области видимости), то ничего не произойдёт:
1
var a = 10;
2
var a;
3
console.log(a); // Значение равно 10
Если повторное объявление сопровождается инициализацией, то такая
инструкция действует как обычное присваивание нового значения:
var a = 10;
var a = 5;
// Тоже самое, что и a = 5;
console.log(a); // Значение равно 5
Если с помощью ключевого слова let повторно объявить переменную с
тем же именем (в той же области видимости), то будет вызвана ошибка:
1
var a = 10;
2
let a; // Ошибка.
А теперь давайте рассмотрим пример, каскада областей видимости:
var num = 5;
function foo() {
var num2 = 10;
function bar() {
var num3 = 15;
}
}
В этом коде три области видимости: глобальная, область видимости
функции foo() и область видимости функции bar(). В глобальной области
видимости
определены
переменная num и
функция foo().
В
области
видимости функции foo() определены переменная num2 и функция bar(), в
ней также доступна переменная num из глобальной области видимости.
Область видимости функции bar() содержит одну переменную num3, которая
доступна
только
внутри
функции bar().
В
области
видимости
функции bar() также доступны переменные из двух других областей, потому
что они являются родительскими по отношению к ней. Цепочка областей
видимости для этого примера представлена на рисунке ниже:
65
На рисунке разные области видимости показаны прямоугольниками
разного цвета. Внутренней области видимости в цепочке областей видимости
доступно всё из внешних областей, но внешним областям не доступно ничего
из внутренних областей видимости.
Цепочка областей видимости упорядочена. Интерпретатор производит
поиск идентификаторов в цепочке областей видимости по направлению
наружу, но не внутрь. Это означает, что поиск имени начинается с той
области видимости, где было выполнено обращение к идентификатору. Если
имя идентификатора обнаруживается, поиск прекращается. Если в текущей
области видимости найти имя не удалось, выполняется поиск в следующей
(во внешней) области видимости и т. д.
Таким образом, будет использован идентификатор из той области
видимости, в которой был найден. Если идентификатор не будет найден ни в
одной из областей видимости JavaScript сгенерирует ошибку:
var str = "глобальная";
var num = 5;
function foo() {
var
str
=
"локальная";
//
Используется локальная
переменная str
num = 10;
// Используется глобальная переменная num
66
// alert(x);
// Ошибка. Переменной x нет ни в одной области
видимости
}
foo();
alert(str); // "глобальная"
alert(num); // 10
Если в теле функции необъявленной переменной присвоить значение
то, в момент вызова функции, если в глобальной области видимости нет
переменной с таким именем, будет создана новая глобальная переменная:
function foo() {
num = 2;
}
foo();
alert(num);
// Создана новая глобальная переменная num
// 2
В языке JavaScript объявленные переменные доступны в любом месте
относительно своей области видимости, это означает, что переменные
оказываются видимы ещё до того, как будут объявлены в коде. Эта
особенность JavaScript неофициально называется подъёмом: программный
код
ведёт
себя
так,
как
если
бы
объявления
переменных
неявно поднимались (без инициализации) на самый верх относительно своей
области видимости.
Рассмотрим следующий фрагмент кода:
var str = "глобальная";
function foo() {
alert(str); // undefined
var str = "локальная";
alert(str); // "локальная"
}
foo();
67
Посмотрев на код, можно было бы подумать, что первый alert должен
вывести
строку
"глобальная",
потому
что
объявление
локальной
переменной str ещё не было выполнено. Однако, на деле выводится
значение undefined.
Благодаря подъёму объявлений
функция
выше
эквивалентна реализации, приведённой ниже, в которой объявление
переменной поднятов начало функции:
function foo() {
var str;
// Объявление локальной переменной в начале
функции
alert(str);
// Здесь она доступна, но не инициализирована
str = "локальная"; // Здесь она инициализируется
alert(str);
// А здесь она имеет ожидаемое значение –
"локальная"
}
Аналогично и для глобальной области видимости, переменная
объявленная снизу, доступна наверху:
alert(num);
// переменной num соотвествует значение undefined
var num = 10;
alert(num);
// Значение переменной num равно 10
В заключении рассмотрим еще один пример:
<html>
<head>
<title>Локальные и глобальные переменные</title>
<script type="text/javascript">
var name1 = "Уважаемый пользователь!";
var name2 = "Семенов Виктор Александрович!";
function hello(who) {
document.write("Доброго времени суток ," + who +
"<br>");
var name2 = "Alex";
68
}
</script>
</head>
<body bgcolor="#FFE4C4">
<script type="text/javascript">
hello(name1);
hello(name2);
</script>
</body>
</html>
В данном сценарии на строках 5 и 6 определяются две глобальные
переменные – name1 и name2, на строке 10 определяется локальная
переменная name2, она является локальной потому, что при её задании
использовали
оператор
var,
таким образом, данная
переменная
не
пересекается с глобальной переменной name2, заданной на строке 6 и на
экране получим:
5. Зaкрeплeниe изучeннoгo мaтeриaлa
Личнocтныe: cмыcлooбрaзoвaниe; нрaвcтвeннo-этичecкoe oцeнивaниe
уcвaивaeмoгo coдeржaния;
Пoзнaвaтeльныe: извлeчeниe нeoбхoдимoй инфoрмaции; выпoлнeниe
дeйcтвий пo aлгoритму;
69
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa
c
учитeлeм;
Рeгулятивныe: кoнтрoль, кoррeкция, oцeнкa.
Самостоятельно на компьютере изменить значения перемееных name1
и name2 в предложенном коде и посмотреть результат.
<html>
<head>
<title>Локальные и глобальные переменные</title>
<script type="text/javascript">
var name1 = "Уважаемый пользователь!";
var name2 = "Семенов Виктор Александрович!";
function hello(who) {
document.write("Доброго времени суток ," + who + "<br>");
var name2 = "Alex";
}
</script>
</head>
<body bgcolor="#FFE4C4">
<script type="text/javascript">
hello(name1);
hello(name2);
</script>
</body>
</html>
6. Задание на дом
Учащимся раздаются карточки с домашним заданим по вариантам.
Используя записи в тетради и пример с цепочкой областей видимости,
написать часть кода на JavaScript с цепочкой областей видимости на
основании схемы.
Вариант 1
Вариант 2
70
Window
a
Window
m
b
d
a
c
b
c
f
f
Вариант 3
Вариант 4
Window
Window
d
a
a
n
b
c
c
m
f
b
Вариант 5
Вариант 6
Window
a
b
Window
j
c
a
k
j
c
f
k
f
7. Рeфлeкcия
Личнocтныe: рeфлeкcия cпocoбoв и уcлoвий дeйcтвия, кoнтрoль и
oцeнкa прoцecca и рeзультaтoв дeятeльнocти;
Пoзнaвaтeльныe: пocтрoeниe рeчeвoгo выcкaзывaния в уcтнoй фoрмe.
Учaщиecя дaют caмooцeнку cвoeй дeятeльнocти и ee рeзультaтoв.
Учитeль пoдвoдит итoги рaбoты клacca, блaгoдaрит учeникoв зa рaбoту
71
Урок № 11. Объектная модель документа
Цель урока: познакомить обучающихся объектно-ориентированной
моделью документа в JavaScript;
Задачи урока:
обучающие:
– познакомить с понятием объектная модель документа (DOM –
Document Object Model);
– научиться использовать встроенные объекты и создавать свои;
–изучить основные характеристики объектов и параметры их
примения при разработке сценариев на JavaScript;
развивающие:
– рaзвивaть прeдcтaвлeниe учaщихcя o вaжнocти cиcтeмнoгo мышлeния
в coврeмeннoй нaукe;
– рaзвивaть нaвык быcтрoй oргaнизaции примeнeния пoлучeнных
знaний в рaзличных cитуaциях.
воспитательные:
– фoрмирoвaть и рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы;
– вocпитaниe чувcтвa увeрeннocти в ceбe и cвoих знaниях, чувcтвa
oтвeтcтвeннocти зa рeзультaты cвoeгo трудa;
– фoрмирoвaть нaвыки кoллeктивнoй рaбoты.
Тип урoкa: изучение нового материала
Фoрмы
oргaнизaции
пoзнaвaтeльнoй
дeятeльнocти:
индивидуaльнaя, фрoнтaльнaя
Oбoрудoвaниe:
ПOЭВМ,
мeдиaпрoeктoр,
(прeзeнтaция)
Плaн урoкa:
1. Oргaнизaциoнный мoмeнт
2. Фoрмулирoвкa тeмы и цeлeй урoкa
3. Aктуaлизaция знaний
72
нaглядный
мaтeриaл
4. Oбъяcнeниe нoвoгo мaтeриaлa
5. Зaкрeплeниe изучeннoгo мaтeриaлa
6. Зaдaниe нa дoм;
7. Рeфлeкcия.
Ход урока:
1. Организационный момент.
Фoрмируeмыe УУД:
Личнocтныe: пcихoлoгичecкaя гoтoвнocть к урoку;
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa
co
cвeрcтникaми.
Учитель переключает фокус внимания обучающихся на себя и
проверяет их готовность к уроку.
– Добрый день! Просьба занять свои места и проверить готовность к
уроку.
2. Фoрмулирoвкa тeмы и цeлeй урoкa
Личнocтныe: cпocoбнocть увязaть учeбнoe coдeржaниe c coбcтвeнным
жизнeнным oпытoм;
Пoзнaвaтeльныe: выдeлeниe и фoрмулирoвaниe пoзнaвaтeльнoй цeли;
Кoммуникaтивныe: умeниe cлушaть coбeceдникa;
Рeгулятивныe: цeлeпoлaгaниe.
– При изучении язвка гипертекстовой разметки html, вы научились
создавать дизайн, оформление цветовое и стилевое, а также добавлять
формы. Сегодня на уроке мы посмотрим на web-страницу, как на некий
структурированный объект и попытаемся понять основные способы
управления этими элементами.
3. Aктуaлизaция знaний
Пoзнaвaтeльныe: aнaлиз, cинтeз, cрaвнeниe, oбoбщeниe
Кoммуникaтивныe: вырaжeниe cвoих мыcлeй c дocтaтoчнoй пoлнoтoй и
тoчнocтью
73
Рeгулятивныe: фикcирoвaниe зaтруднeния
– Перед тем как перейти к изучению объектной модели документа
необходимо вспомнить что из себя представляет исходный код веб-страницы
(HTML-документа).
Исходный код веб-страницы (HTML документа) состоит из HTML
тегов и текста. Теги - это базовая синтаксическая конструкция кода HTML.
Большинство тегов являются парными, т.е. один из них открывающий, а
другой закрывающий. Одна такая пара тегов образует элемент HTML. В
документе HTML элементы вкладываются друг в друга. В итоге веб-страница
(HTML документ) представляет собой множество вложенных друг в друга
элементов HTML.
В качестве примера рассмотрим следующий код HTML:
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Название статьи</h1>
<div>
<h2>Раздел статьи</h2>
<p>Содержимое статьи</p>
</div>
</body>
</html>
Корневым элементом данного документа является элемент html, в него
вложены
элементы headи body.
элемент body содержит
Элемент head содержит
элементы h1 и div.
Элемент div в
элемент title,
свою
а
очередь
содержит элемент h2 и p.
Браузер, получая код HTML из интернета, сначала строит дерево узлов
(объектов) в своей памяти. А уже потом на основе этого дерева "рисует"
картинку этой страницы в своём окне или вкладке.
74
Дерево DOM – это множество узлов (объектов, элементов) связанных
друг с другом. При этом каждый элемент HTML образует узел в этом дереве.
Связи между узлами (объектами, элементами) определяются на основе
того что каждый элемент в HTML документе вложен в какой-то другой
элемент. Элемент, который содержит другие элементы, по отношению к ним
является родителем. У любого элемента в HTML коде есть свой родитель и
притом только один. Если элемент содержит другие элементы, то для него
они являются дочерними (детьми, прямыми потомками).
Один элемент может содержать сколько угодно много дочерних
элементов. Если все элементы HTML кода "выстроить" в зависимости от их
отношения друг к другу, то у нас в результате получится дерево. Строится
это дерево браузером сверху вниз.
75
В самом верху этого дерева находится узел document.
Данный узел имеет один дочерний узел html, который образован
элементом html (<html>...</html>).
Узлы head (<head>...</head>)
и body (<body>...</body>)
вложены
в
узел html и по отношению к нему являются его дочерними узлами.
Узел head содержит
один
дочерний
узел title (<title>...</title>).
Узлы h1 и divвложены в узел body, который для них является родительским.
Узел div содержит
узлы h2(<h2>...</h2>)
и p (<p>...</p>),
которые
по
отношению к нему являются его дочерними узлами.
4. Oбъяcнeниe нoвoгo мaтeриaлa
Личнocтныe: caмooпрeдeлeниe, cмыcлooбрaзoвaниe;
Пoзнaвaтeльныe: плaнирoвaниe, прoгнoзирoвaниe; пoдвeдeниe пoд пoнятиe;
Кoммуникaтивныe: плaнирoвaниe учeбнoгo coтрудничecтвa c учитeлeм;
Рeгулятивныe: цeлeпoлaгaниe.
С помощью JavaScript можно управлять внешним видом web-страницы и
поведением браузера. Для этого в JavaScript включена специальная
иерархическая система – объектная модель документа (DOM – Document
Object Model).
Объектная модель документа (DOM — Document Object Model) – это
множество объектов, которые браузер создаёт в памяти компьютера
(браузера) на основе кода HTML. В JavaScript она используется для создания
динамических
веб-страниц,
т.е.
таких
страниц
которые
мгновенно
изменяются, если изменяется объектная модель этого документа. Т.е. вебразработчик при создании таких страниц работает не с HTML кодом данной
страницы, а с объектами (DOM), которые браузер создаёт на основе этого
кода.
76
При написании сценариев JavaScript вы можете не только изменять
свойства различных объектов, но также добавлять новые объекты (элементы
HTML) и удалять существующие. Все изменения, проводимые с объектной
моделью документа, мгновенно отражаются на веб-странице.
Браузер, построив на основе кода HTML дерево узлов, всегда может
осуществить обратную операцию на основе этого дерева создать код HTML.
Основная работа с HTML страницей в JavaScript состоит в том, чтобы
работать с этими узлами. Как только вы изменяется свойство этих узлов в
дереве, добавляете новые или удаляете существующие, то автоматически
происходят изменения на экране пользователя и автоматически изменяется
код HTML. Т.е. происходят обратные действия, на основе дерева строится
код HTML.
Иерархическая структура объектов браузера начинается с объекта
window. Он представляет окно браузера.
Основное его свойство window.status используется для изменения вида
строки состояния, а методы window.alert, window.confirm и window.prompt
позволяют отображать диалоговые окна с разными запросами.
Одновременно можно использовать несколько объектов window,
каждый для открытого окна браузера. Фреймы также представляются
объектами window.
Объект document представляет объект web-документа или webстраницы. Документы или страницы отображаются в окне браузера, поэтому
объект document дочерний по отношению к объекту window. Изменения,
77
проведенные с помощью объекта document, будут отображаться в окне
браузера, а поэтому сказываться на объекте window.
Использование нескольких окон браузера или фреймов подразумевает
существование нескольких объектов window с одним дочерним объектом
document.
Получение информации о браузере
Некоторые свойства объекта document используются для получения
сведений о браузере и текущем документе.
Свойство URL используется для определения адреса текущей webстраницы. Адрес вводится одним словом. Изменить это свойство нельзя.
Если необходимо открыть в окне браузера другую страницу, нужно
использовать объект window.location. · Свойство title содержит заголовок
текущей страницы, определенный после дескриптора <title>.
Свойство referrer определяет адрес web-страницы, просматриваемой до
отображения текущего web- документа. Как правило, на ней есть ссылка на
текущую страницу.
Свойство lastModified содержит дату последнего изменения webстраницы.
Еще один дочерний объект объекта document – это link. В одном объекте
document одновременно может существовать несколько объектов link.
Каждый из них содержит сведения о ссылке на другую страницу или анкер.
Объект links управляется с помощью массива links. Каждый элемент
массива представляет собой объект link текущей страницы. Свойство массива
document.links.length определяет количество ссылок на странице.
Например:
<html>
<head><title>объект links</title></head>
<body>
<a
href="old.htm">эта
ссылка
переопределена
"new.htm"</a><br>
<a href="page.htm">ссылка 2</a><br>
<script type="text/javascript">
78
на
document.links[0].href = "new.htm";
document.write("ссылка
2
ведет
"+document.links[1].href);
document.write("<br>на
странице
"+document.links.length);
</script>
</body>
</html>
на
страницу:
всего
ссылок:
Объект history содержит сведения о страницах, которые отображались и
отображаются в окне браузера, а также содержит методы перехода к ним.
Объект history обладает свойствами.
– history.length. Указывает длину списка адресов посещаемых страниц,
сохраняемых
в
объекте
history.
Другими
словами,
это
количество
посещенных за текущий сеанс web-страниц.
– history.current. Содержит одно значение – адрес URL текущей
страницы, открытой в браузере. ·
– history.next. Тоже содержит одно значение – адрес URL страницы, к
которой перейдет пользователь, если щелкнет на панели инструментов
браузера на кнопке Forward (Вперед). Поскольку эта кнопка не активна до
тех пор, пока хотя бы один раз не воспользоваться кнопкой Back (Назад), это
свойство до определенного момента использовать нельзя.
– history.previous. Тоже содержит одно значение – адрес URL страницы,
к которой перейдет пользователь, если щелкнет на панели инструментов
браузера на кнопке Back (Назад).
Объект history можно также обрабатывать и как массив. Каждый
элемент массива содержит адрес URL из списка посещаемых страниц.
Текущая страница представлена элементом history[0]. Ниже представлены
методы объекта history:
history.go. – открывает страницу по указанному адресу в списке адресов
посещаемых страниц.
79
history.back. – загружает страницу, которая отображалась в окне
браузера перед текущей. Этот метод аналогичен щелчку на кнопке Back
(Назад).
history.forward. – загружает страницу, которая отображается в списке
адресов посещаемых страниц после текущей (если она указана). Этот метод
аналогичен щелчку на кнопке Forward (Вперед).
Одно из самых частых применений методов back и forward – это
добавление на web-страницу соответствующих кнопок, позволяющих
перемещаться по списку посещаемых страниц:
<html>
<head><title>Использование
Forward</title></head>
кнопок
Back
и
<body>
<a href="javascript:history.go(-1);">назад</a>&nbsp;
<a href="javascript:history.go(1);">вперед</a>
</body>
</html>
Объект location содержит сведения о документе HTML, который открыт
в окне. Например, следующий оператор дает указание загрузить страницу в
текущем окне:
window.location.href="http://www.site.ru/page.htm"
Объект location имеет следующий набор свойств:
Название свойства
Описание
location.protocol.
Определяет протокол или метод.
location.hostname.
Определяет имя узла.
location.port.
Определяет порт соединения.
location.host.
Комбинация двух предыдущих свойств.
location.pathname.
location.hash.
location.target.
Каталог расположения документа на узле и
имя файла.
Название анкера в документе, если такой
определен.
Атрибут target ссылки, которая привела к
открытию текущего документа.
80
location.query.
location.href.
Определяет строку запроса.
Определяет полный URL.
Объект event позволяет коду сценария получить больше информации о
каком-либо событии, происходящем в браузере. Среди свойств данного
объекта можно выделить:
X– горизонтальная позиция курсора мыши (в пикселях)
Y– вертикальное положение курсора мыши (в пикселях)
Название свойства
clientX
altKey
ctrlKey
Описание
Возвращает горизонтальную координату
элемента, исключая отступы, рамки,
линейку прокрутки и т. д.
Возвращает горизонтальную координату
элемента, исключая отступы, рамки,
линейку прокрутки и т. д.
Возвращает горизонтальную координату
курсора мыши относительно содержащего
его контейнера, когда происходит событие.
Возвращает вертикальную координату
курсора мыши относительно содержащего
его контейнера, когда происходит событие.
Возвращает горизонтальную координату
курсора мыши относительно экрана, когда
происходит событие.
Возвращает вертикальную координату
курсора мыши относительно экрана, когда
происходит событие.
Кнопка мыши, если она нажата для
появления события.
Возвращает состояние клавиши Alt
Возвращает состояние клавиши Ctrl
shiftKey
Возвращает состояние клавиши Shift
keyCode
fromElement
Код ASCII нажатой клавиши. Может быть
изменен для посылки другого символа при
той же нажатой клавише
Показывает либо что пересылка данных
успешна, либо почему она прервана.
Возвращает название события в формате
строки без приставки on, например click
вместо onclick
Элемент, вышедший из-под курсора мыши
toElement
Элемент, находящийся под курсором мыши
returnValue
Определяет возвращаемое значение для
clientY
offsetX
offsetY
screenX
screenY
button
reason
type
81
scrElement
cancelBubble
события
Самый нижний элемент в иерархии, в
котором появляется событие
Может быть установлено для запрета
прохождения
события
вверх
по
иерархической структуре
Самый простой способ задать реакцию элемента на определенное
событие – указать ее с помощью атрибута для определенного тега.
Например, событию «нажатие мышкой» соответствует атрибут onclick,
событию «наведение мышкой» – атрибут onmouseover, а событию «уход
курсора с элемента»- атрибут onmouseout.
Значением атрибута с событием служит JavaScript код. В следующем
примере по нажатию мышкой на кнопку выполнится функция alert:
<input type="submit" onclick="alert('!')">
А иеперь по клику на элемент выполнится функция func:
<input type="submit" onclick="func()">
function func() {
alert('!');
}
Можно выполнить не одну функцию, а несколько:
<input type="submit" onclick="func1(); func2();">
function func1() {
alert('1');
}
function func2() {
alert('2');
}
Обратите внимание на то, что если внутри атрибута вам нужны
двойные кавычки (например, для строки) и внешние кавычки атрибута тоже
двойные - onclick="alert("!")" - такой код не будет работать.
С этим можно бороться несколькими способами: можно сменить
внешние
кавычки
на
одинарные onclick='alert("!")',
82
можно
также
заэкранировать
внутренние
кавычки
обратным
слешем onclick="alert(\"!\")" или же просто перенести JavaScript код из
атрибута
в
функцию,
а
в
атрибуте
оставить
только
имя
функции onclick="func()".
То же самое будет, если вы внешние кавычки атрибута ставите
одинарными и для строки тоже используете одинарные: onclick='alert('!')' тут также все решается аналогичными способами.
Сейчас мы с вами научимся получать элементы HTML страницы и
проводить с ними различные манипуляции (мы сможем менять, к примеру,
их текст и цвет и многие другие полезные вещи).
Пусть у нас на странице есть тег с атрибутом id в значении test.
Запишем ссылку на этот тег в переменную elem. Для этого мы должны
воспользоваться методом getElementById, который получает элемент по
его id.
Эта запись произойдет по клику на кнопку, которой мы задали
атрибут onclick. По нажатию на эту кнопку сработает функция func, которая
найдет на HTML странице элемент с idравным test и запишет ссылку на
него в переменную elem:
<input type="text" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
}
Теперь в переменной elem у нас лежит ссылка на элемент с
атрибутом id в значении test. Сама переменная elem является объектом. Этот
объект и тег HTML страницы связаны друг с другом - мы можем поменять
какие-либо свойства объекта elem и при этом увидим изменения на HTML
странице, которые произойдут с полученным нами элементом.
Давайте посмотрим, как это происходит на практике.
83
Сейчас мы будем считывать и изменять атрибуты тегов. Пусть у нас
опять даны инпут с id равным test и кнопка, по клику на которую будет
запускаться функция func:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
Внутри функции func мы получим наш инпут по его id и запишем
ссылку на него в переменную elem:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
}
Давайте теперь выведем на экран содержимое атрибутов нашего
инпута. Чтобы получить доступ, к примеру, к атрибуту value, следует
написать следующее: elem.value, где elem - это переменная, в которую мы с
помощью getElementById записали ссылку на наш элемент, а value - это
атрибут тега, который нас интересует.
Мы можем вывести содержимое атрибута через alert таким образом alert(elem.value) - или записать в какую-нибудь переменную. Давайте
проделаем это:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
alert(elem.value); //выведет '!'
}
Мы можем таким же образом считывать значения и других атрибутов,
например так - elem.id- мы считаем значение атрибута id, а так - elem.type значение атрибута type. Например:
<input type="text" value="!" id="test">
84
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
alert(elem.value); //выведет '!'
alert(elem.id); //выведет 'test'
alert(elem.type); //выведет 'text'
}
Можно не только считывать значения атрибутов, но и изменять их.
Чтобы, к примеру, поменять значение атрибута value, нужно просто
присвоить его конструкции elem.value:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
elem.value
=
'www';
//присвоим
новое
значение
атрибуту value
}
HTML код станет выглядеть так (значение атрибута value станет www):
<input type="text" value="www" id="test">
<input type="submit" onclick="func()">
Ну, а теперь самое сложное - можно не вводить переменную elem, а
строить цепочку из точек таким образом:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
alert(document.getElementById('test').value);
//выведет '!'
}
Таким же образом (цепочкой) можно производить и перезапись
атрибутов:
85
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
document.getElementById('test').value = 'www';
}
Однако,
в
большинстве
случаев
введение
переменной удобнее.
Сравните два примера - сейчас я ввел переменную elem и могу считывать
любое количество атрибутов, при этом getElementById вызывается только
один раз:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
elem.value = 'www';
elem.type = 'submit';
}
Если
не
вводить
новую
переменную,
то
приходится
вызывать getElementById два раза:
<input type="text" value="!" id="test">
<input type="submit" onclick="func()">
function func() {
document.getElementById('test').value = 'www';
document.getElementById('test').type = 'submit';
}
На мой взгляд, этот код стал сложнее, хотя и занимает на одну строчку
меньше. Кроме того, если я захочу сменить значение id с test на, к примеру,
www, мне придется делать это во многих местах, что не очень удобно.
Есть и еще проблема - нагрузка на браузер. Поиск элементов по
странице,
который
делает
метод getElementById,
86
является
довольно медленной операцией (и вообще любая работа с элементами
страницы - это медленная операция - запомните это).
В нашем случае, если мы каждый раз используем getElementById, то
браузер каждый раз будет обрабатывать HTML страницу и искать элемент с
заданным id несколько раз (не важно, что id одинаковые - браузер проделает
все действия несколько раз), совершая бесполезные операции, которые могут
замедлить работу браузера.
Если же мы используем переменную elem - никакого поиска по
странице не происходит (элемент уже найден и ссылка на него лежит в
переменной elem).
Вы уже научились работать с атрибутами через JavaScript и теперь
пришло время рассказать вам о том, что не все так просто - при работе с
атрибутами существует исключение - это атрибут class.
Это слово является специальным в JavaScript и поэтому мы не можем
просто написать elem.class, чтобы считать значение атрибута class. Вместо
этого следует писать elem.className.
В следующем примере на экран выводится значение атрибута class:
<input type="text" class="aaa bbb" id="test">
<input type="submit" onclick="func()">
function func() {
var elem = document.getElementById('test');
alert(elem.className);
}
Кстати, есть и другие атрибуты, которые называются иначе, чем
свойство. Например, атрибуту for (<label for="...">) соответствует свойство с
названием htmlFor.
Сейчас мы с вами будем работать со специальным объектом this,
который указывает на текущий элемент (элемент в котором произошло
событие). Причем указывает так, будто этот элемент уже получен
методом getElementById.
87
Давайте посмотрим как работать с this и в чем удобство такого
подхода.
Пусть у нас есть задача по нажатию на инпут вывести на экран
содержимое его value.
Пока вы умеете делать только такое решение:
<input
type="submit"
onclick="func()"
id="test"
value="!">
function func() {
var elem = document.getElementById('test');
alert(elem.value);
}
В принципе, это решение хорошее, но представим теперь, что у нас
есть много инпутов и по нажатию на каждый нам нужно выводить его value.
В этом случае у нас получится:
<input
type="submit"
onclick="func1()"
id="test1"
onclick="func2()"
id="test2"
onclick="func3()"
id="test3"
value="input1">
<input
type="submit"
value="input2">
<input
type="submit"
value="input3">
function func1() {
var elem = document.getElementById('test1');
alert(elem.value);
}
function func2() {
var elem = document.getElementById('test2');
alert(elem.value);
}
function func3() {
var elem = document.getElementById('test3');
88
alert(elem.value);
}
Теперь ясно виден недостаток нашего подхода - для каждого инпута
нам приходится создавать свою функцию обработки клика, причем делают
эти функции практически одно и тоже.
Если у нас будет 10 инпутов - то придется сделать 10 функций, не
удобно.
Давайте упростим нашу задачу: будем передавать параметром функции
id текущего элемента. И вместо большого количества функций все сведется к
одной функции:
<input type="submit" onclick="func('test1')" id="test1"
value="input1">
<input type="submit" onclick="func('test2')" id="test2"
value="input2">
<input type="submit" onclick="func('test3')" id="test3"
value="input3">
function func(id) {
var elem = document.getElementById(id);
alert(elem.value);
}
Однако, такое решение все равно имеет недостаток - каждому элементу
придется вводить разные id, что тоже несколько неудобно.
Итак, давайте наконец рассмотрим вариант решения задачи через this.
Сделаем так, что каждый инпут будет выводить свое содержимое по
нажатию. Для этого параметром функции передадим объект this, вот
так: func(this).
Этот this - это уже готовая ссылка на объект. То есть если я кликаю на
первый инпут - в this окажется ссылка на него, если на второй инпут - то на
него, и так далее.
89
Наш
this
передается
параметром
функции
и
попадает
в
переменную elem. Этот elem ведет себя так, будто получен таким
образом: var elem = document.getElementById(...), но получать его таким
образом не надо, там уже все готово и можно пользоваться. К
примеру, elem.valueуказывает на value нашего инпута и так далее.
Итак, вот самое просто решение нашей задачи:
<input
type="submit"
value="input1">
<input
type="submit"
value="input2">
<input
type="submit"
value="input3">
function func(elem) {
alert(elem.value);
}
5. Зaкрeплeниe изучeннoгo мaтeриaлa
onclick="func(this)"
onclick="func(this)"
onclick="func(this)"
Личнocтныe: cмыcлooбрaзoвaниe; нрaвcтвeннo-этичecкoe oцeнивaниe
уcвaивaeмoгo coдeржaния;
Пoзнaвaтeльныe: извлeчeниe нeoбхoдимoй инфoрмaции; выпoлнeниe
дeйcтвий пo aлгoритму;
Кoммуникaтивныe:
плaнирoвaниe
учeбнoгo
coтрудничecтвa
c
учитeлeм;
Рeгулятивныe: кoнтрoль, кoррeкция, oцeнкa.
Таким
образом,
сегодня
мы
изучили
вопросы,
связанные
с
характерискикой web-страниц, и узнали, как управлять их DOM-элементами
через объекты и события.
Для закрепления полученных знаний давайте выполним задание.
Наберите данный скрипт и посмотрите результат исполнения.
<button onclick="buttonClick()">Нажми на меня</button>
<input type="text" id="input1" value="!!!"><input type="text"
id="input2" value="???">
function buttonClick() {
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
90
var input1Value = input1.value;
var input2Value = input2.value;
input1.value = input2Value;
input2.value = input1Value;
}
Результат:
6. Задание на дом
Разработать скрипт обработки положения курсора мыши.
7. Рeфлeкcия
Личнocтныe: рeфлeкcия cпocoбoв и уcлoвий дeйcтвия, кoнтрoль и
oцeнкa прoцecca и рeзультaтoв дeятeльнocти;
Пoзнaвaтeльныe: пocтрoeниe рeчeвoгo выcкaзывaния в уcтнoй фoрмe.
Учaщиecя дaют caмooцeнку cвoeй дeятeльнocти и ee рeзультaтoв.
Учитeль пoдвoдит итoги рaбoты клacca, блaгoдaрит учeникoв зa рaбoту
Урок № 34 Итоговое тестирование
Цель урока: оценить умения и навыки работы с растровыми
изображениями в графическом редакторе GIMP.
Задачи урока:
Обучающие: систематизировать знания обучающихся по растровой
компьютерной графике; предоставить возможность для выхода на более
высокий уровень владения навыками работы в графическом редакторе GIMP.
91
Рaзвивaющиe:
– рaзвивaть прeдcтaвлeниe учaщихcя o вaжнocти cиcтeмнoгo мышлeния
в coврeмeннoй компьютерной графике;
– рaзвивaть нaвык быcтрoй oргaнизaции примeнeния пoлучeнных
знaний в рaзличных cитуaциях.
Вocпитaтeльныe:
– фoрмирoвaть и рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы;
– вocпитaниe чувcтвa увeрeннocти в ceбe и cвoих знaниях, чувcтвa
oтвeтcтвeннocти зa рeзультaты cвoeгo трудa.
Тип урока: урок тестирование.
Форма организации обучения: индивидуальная.
Методические рекомендации к уроку: на данном уроке используются
тесты двух вариантах.
Предварительная подготовка к уроку: составление итоговых тестов.
Оборудование урока: тесты на печатной основе или в электронной
среде.
Этапы проведения урока.
6. Организационный
момент. Мотивация учебной деятельности
обучающихся.
7. Тестирование.
8. Итог урока. Рефлексия.
Ход урока
1. Организационный
момент. Мотивация учебной деятельности
обучающихся.
Формируемые УУД:
Личнocтныe: пcихoлoгичecкaя гoтoвнocть к урoку;
Кoммуникaтивныe:
плaнирoвaниe
cвeрcтникaми.
92
учeбнoгo
coтрудничecтвa
co
– Добрый день, сегодня у нас завершающий этап в изучении
программирования интерактивных сценариев на языке JavaScript.
Сегодня
вам
необходимо
пройти
итоговое
тестирование.
На
выполнение теста отводится 40 минут. Тест состоит из 20 вопросов. Вам
необходимо внимательно прочитать предложенные вопросы и выбрать
верные на ваш взгляд варианты ответов.
2. Тестирование.
Формируемые УУД:
Пoзнaвaтeльныe: aнaлиз, cинтeз, cрaвнeниe, oбoбщeниe
Кoммуникaтивныe: вырaжeниe cвoих мыcлeй c дocтaтoчнoй пoлнoтoй и
тoчнocтью
Рeгулятивныe: фикcирoвaниe зaтруднeния
Вариант 1
№ п/п
1
2
3
4
Тестовое задание
Выберите один верный вариант ответа, чтобы продолжить фразу:
«Язык JavaScript – это …
1) язык разметки гипертекстовых документов;
2) объектно-ориентированный язык программирования высокого
уровня;
3) интерпретируемый язык программирования, разработанный для
взаимодействия с веб-страницами.
4) низкоуровневый язык программирования машинных кодов.
Вывод на экран диалогового окна, педлагающего пользователю
ввести данные, является результатом ….
1) реализация метода prompt();
2) применения css-стиля;
3) использования метода alert();
4) использования метода post.
Что такое идентификатор в JavaScript?
1) кодовое слово;
2) зарезервированное слово;
3) имя, которое обозначает переменную, фукцию или объект
4) название копки.
К какому типу данных относится объявленная перемееная?
var arr = ['пн', 256, 'ср', 34, 38, 'сб', 95];
1) строка;
93
Верный
ответ
3
1
3
3
2) объект;
3) массив;
4) функция;
5
Что будет результатом исполения кода:
1
var obj = {key1: 200, key2: 300, key2: 400};
alert(obj.key1);
1) 200
2) 400
3) Nun
4) 100
6
7
Дан фрагмент программы на JavaScript. Что получится в результате
его исполнения?
var a = -12;
if (a > 0) {alert('Верно!');} else
{alert('Неверно!');}
1) Выведет -12;
2) Выдаст сообщение об ошибке;
3)Выведит пустую строку;
4) Выведет Неверно
Дан фрагмент программы на JavaScript. Что получится в результате
его исполнения?
4
4
var a = 3;
if (a >= 1 && a <= 12) alert('Верно!'); else
alert('Неверно!');
8
1) 3;
2) Выдаст сообщение об ошибке;
3) 22;
4) Верно
Дан фрагмент программы на JavaScript. Что получится в результате
его исполнения?
1
var a = true;
if (!a) alert('Верно!'); else alert('Неверно!');
9
1) Неверно;
2) 0;
3) Верно
4) Nun.
Данное выражение всегда будет выводить:
1
if (!true) alert('Верно!'); else alert('Неверно!');
10
1) Неверно!;
2) Ошибка!!!;
3) Верно!
4) Nun.
Значение переменной lang=’de’. Какое значение выдаст метод alert()?
94
1
11
12
switch (lang) {
case 'ru':
alert('Русский текст');
break;
case 'en':
alert('Английский текст');
break;
case 'de':
alert('Немецкий текст');
break;
default:
alert('Данный язык не
поддерживается');
break;
1) Немецкий текст
2) Ошибка!!!
3)Русский текст
4) Данный язык не поддерживается
Какое значение будет иметь переменная i, в результате выполнения
цикла:
var i = 12;
while (i < 25) {
i++;
alert(i);
Какое значение будет иметь переменная i, в результате выполнения
цикла:
25
9
13
for (var i = 0; i < 10; i++);
alert(i);
Вычислите результат исполнения кода:
11
14
document.write(Math.round(11.4));
Вычислите результат исполнения кода:
246
15
document.write(Math.round(245.765));
Вычислите результат исполнения кода:
20
16
document.write(Math.min(40, 20, 42, 100, 67));
Вычислите результат исполнения кода:
23
17
var arr = [40, 23, 42, 100, 67];
document.write(Math.min.apply(null, arr));
Вычислите результат исполнения кода:
338
18
var arr = [120, 215, 200, 245, 529, 719];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i]
}
var average = sum / arr.length;
alert(average);
Какой результат выполнения пользовательской функции?
3387
95
19
Num=3;
function cube($num) {
return $num * $num * $num+12
}
Найдите значения переменной sum:
101
var arr = [4, 2, 5, 19, 13, 0, 10];
var summ = 0;
for (var i = 0; i < arr.length; i++) {
summ += Math.pow(arr[i], 3);
}
alert(Math.sqrt(summ));
20
Что будет результатом исполнения скрипта?
4032
var fact = 1;
var num = 8;
for (var i = 1; i <= num; i++) {
fact = fact * i/10;
}
alert(fact);
Вариант 2
№ п/п
1
2
3
4
Тестовое задание
Основными стуктурными компонентами языка программирования
JavaScript являются:
1) теги, кнопки, поля;
2) ядро, DOM, BOM;
3) символы, строки, выражения;
4) последовательности двоичных чисел.
Какой метод выводит на страницу переданные ему аргументы?
1) метода prompt();
2) метод document.write();
3) метод alert();
4) метода get.
К какой категории относится слово return?
1) зарезервированное слово;
2) тег;
3) математчиеская опрерация;
4) ключевое слово.
Что будет результатом исполнения фрагмента кода:
var obj = {'Коля': 200, 'Вася': 300, 'Петя':
400}; alert(obj['Вася']);
1) Петя;
2) 300
3) Ошибка;
4) Nun.
96
Верный
ответ
2
2
4
2
5
6
Числа или строки, которые применяются для представления
значений в JavaScript называются…
1) интегралы:
2) литералы;
3) переменные;
4) объекты.
Что будет результатом исполнения фрагмента кода:
2
3
var a = '0';
if (a == 0) alert('Верно!'); else
alert('Неверно!');
1) Неверно;
2) 0;
3) Верно
4) а.
7
Дан фрагмент программы на JavaScript. Что получится в результате
его исполнения?
4
var a = 45;
if (a >= 1 && a <= 12) alert('Верно!'); else
alert('Неверно!');
8
1) 45;
2) Выдаст сообщение об ошибке;
3) 22;
4) Неверно
Дан фрагмент программы на JavaScript. Что получится в результате
его исполнения?
3
var a = true;
if (a) alert('Верно!'); else alert('Неверно!');
1) Неверно;
2) 0;
3) Верно
4) Nun.
9
Данное выражение всегда будет выводить:
3
if (!false) alert('Верно!'); else alert('Неверно!');
1) Неверно!;
2) Ошибка!!!;
3) Верно!
4) Nun.
10
Значение переменной lang=’rus’. Какое значение выдаст метод
alert()?
97
4
switch (lang) {
case 'ru':
alert('Русский текст');
break;
case 'en':
alert('Английский текст');
break;
case 'de':
alert('Немецкий текст');
break;
default:
alert('Данный язык не поддерживается');
break;
1) Nun
2) Ошибка!!!
3)Русский текст
4) Данный язык не поддерживается
11
12
13
Какое значение будет иметь переменная i, в результате выполнения
цикла:
var i = 1;
while (i < 10) {
i++;
alert(i);
Какое значение будет иметь переменная i, в результате выполнения
цикла:
for (var i = 0; i < 10; i++) {2*i};
alert(i);
Вычислите результат исполнения кода:
10
18
145
document.write(Math.round(145.4));
14
Вычислите результат исполнения кода:
13
document.write(Math.round(12.765));
15
Вычислите результат исполнения кода:
10
16
document.write(Math.min(44, 10, 42, 100, 67));
Вычислите результат исполнения кода:
20
var arr = [20, 23, 42, 76, 871];
document.write(Math.min.apply(null, arr));
17
Вычислите результат исполнения кода:
var arr = [34, 78, 65, 87, 29, 74, 34, 21];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i]
}
var average = sum / arr.length;
alert(average);
98
52,75
18
Какой результат выполнения пользовательской функции?
19
Num=23;
function cube($num) {
return $num * $num * $num
}
Найдите значения переменной sum:
12167
158
var arr = [14, 23, 5, 19, 13, 0, 10];
var summ = 0;
for (var i = 0; i < arr.length; i++) {
summ += Math.pow(arr[i], 3);
}
alert(Math.sqrt(summ));
20
Что будет результатом исполнения скрипта?
720
var fact = 1;
var num = 6;
for (var i = 1; i <= num; i++) {
fact = fact * i;
}
alert(fact);
3) Подведение итогов. Рефлексия.
Формируемые УУД:
Личнocтныe: рeфлeкcия cпocoбoв и уcлoвий дeйcтвия, кoнтрoль и
oцeнкa прoцecca и рeзультaтoв дeятeльнocти;
Пoзнaвaтeльныe: aнaлиз, cинтeз, cрaвнeниe, oбoбщeниe
Кoммуникaтивныe: вырaжeниe cвoих мыcлeй c дocтaтoчнoй пoлнoтoй
и тoчнocтью
Рeгулятивныe: фикcирoвaниe зaтруднeния
Теперь оценим ваши результаты тестирования:
Критерий оценивания:
За каждый правильный ответ, начисляется 1 балл
от 0-5 баллов - оценка «2»
от 6-10 баллов - оценка «3»
от 11-15 баллов - оценка «4»
от 16-20 баллов - оценка «5»
99
ЗАКЛЮЧЕНИЕ
В
данной
актуальная
элективного
тема
курса
выпускной
квалификационной
«Разработка
«Язык
работе
рассмотрена
программно-методического
обеспечения
JavaScript»
для
учащихся
10-11
классов
технологического профиля».
В начале исследования были сформулированы цель, задачи, объект и
предмет исследования. Проанализировано современное состояние и степень
представленности данного вопроса, изучена нормативная документация,
требования Федерального государственного станадарта cрeднeгo (пoлнoгo)
oбщeгo oбрaзoвaния. Также были сформулированы основные требования к
результатам освоения данного элективного курса. Разработано календарнотематическое планирование, рассчитанное на 34 часа, включающее изучение
основы языка JavaScript, его назначение, историю создания языка и
возможности. Изучаются основные элементы и конструкции языка:
переменные, константы, выражения, ветвления, циклы. Вводится понятие
DOM-модели окна браузера и рассматриваются технологии проектирования
динамических web-страниц с помощью конструирования объектов и форм.
Кaлeндaрнo – тeмaтичecкое плaнирoвaние содержит тeмы зaнятий, вид
учeбнoй дeятeльнocти, прaктичecкиe и лaбoрaтoрныe рaбoты, иcпoльзуeмыe
цифрoвыe oбрaзoвaтeльныe рecурcы.
Рaзрaбoтaны
кoнcпeкты
урoкoв
пo
элeктивнoму
курсу
«Язык
JavaScript» в cooтвeтcтвии c трeбoвaниями Фeдeрaльнoгo oбрaзoвaтeльнoгo
cтaндaртa. Разработаны конспекты шести уроков. Oни coдeржaт пoлнoe
излoжeниe coдeржaния и хoдa урoкa, a тaкжe oтрaжaют coвмecтную
дeятeльнocть учитeля и учeникoв. Кoнcпeкт включaeт в ceбя цeли урoкa,
зaдaчи (oбрaзoвaтeльную, рaзвивaющую, вocпитaтeльную), тип урoкa, фoрмы
oргaнизaции
пoзнaвaтeльнoй
дeятeльнocти
нeoбхoдимoe для прoвeдeния дaннoгo урoкa.
100
учaщихcя,
oбoрудoвaниe,
Оценка результатов освоения элективного курса осуществляется на
основании
тестирования.
Итоговый
тест
влючает
20
вопросов,
затрагивающих все разделы, изучаемые в рамках курса.
Прaктичecкaя знaчимocть: рaзрaбoтaннoe прoгрaммнo-мeтoдичecкoe
oбecпeчeниe мoжeт cлужить прeпoдaвaтeлям при пoдгoтoвкe зaнятий пo
дaннoй тeмe.
В заключении можно сделать вывод о том, что цель, поставленная в
начале исследования, достигнута.
101
СПИСОК ЛИТЕРАТУРЫ
1.
Фeдeрaльный
Гocудaрcтвeнный
oбрaзoвaтeльный
cтaндaрт
cрeднeгo (пoлнoгo) oбщeгo oбрaзoвaния. [Электронный ресурс]. – Режим
доступа: http://минобнауки.рф / документа /2365. – Дата доступа: 23.01.2018.
2.
Примeрнaя прoгрaммa cрeднeгo (пoлнoгo) oбщeгo oбрaзoвaния пo
инфoрмaтикe и инфoрмaциoнным тeхнoлoгиям прoфильный урoвeнь.
[Электронный
ресурс].
–
Режим
–
http://window.edu.ru/resource/226/37226/files/09-2-s.pdf
доступа:
Дата
доступа:
23.01.2018.
3.
THE
WORLD'S
LARGEST
WEB
DEVELOPER
SITE.
[Электронный ресурс]. – Режим доступа: https://www.w3schools.com/– Дата
доступа: 12.05.2018.
4.
Буч, Г. Объектно-ориентированный анализ и проектирование с
примерами приложений на С++, 2-е изд. / Буч Г. Пер. с англ. – М.:
«Издательство Бином», СПб.: «Невский диалект», 2011. – 560 с., ил.
5.
Усенков, Д. Уроки Web-мастера. / Д. Усенков. 2-е изд., испр. и
доп. – М.: БИНОМ. Лаборатория знаний, 2014 – 507 с.: ил.
6.
Кингсли-Хью, Э. JavaScript 1.5: учебный курс. / Э. Кингсли-Хью,
Кингсли-Хью К. – СПб.: Питер, 2002. – 272 с.: ил.
7.
Дмитриева, М.В. Самоучитель JavaScript. /М.В. Дмитриева –
СПб.: БХВ-Петербург, 2013. – 512 с.: ил.
8.
Дунаев, В.В. Самоучитель JavaScript / В.В. Дунаев. – СПб.:
Питер, 2013. – 395 с.: ил.
9.
Инфoрмaтикa. УМК для cтaршeй шкoлы [Элeктрoнный рecурc]:
10–11 клaccы. Углублeнный урoвeнь. Мeтoдичecкoe пocoбиe для учитeля /
Aвтoры-cocтaвитeли: O. A. Пoлeжaeвa, М. C. Цвeткoвa. — Эл. изд.—М.:
БИНOМ.
Лaбoрaтoрия
знaний,2013.
—114
c.
–
Рeжим
дocтупa:
http://www.lbz.ru/books/224/8448/
10.
Инфoрмaтикa. УМК для cтaршeй шкoлы [Элeктрoнный рecурc]:
10–11 клaccы. Углублeнный урoвeнь. Мeтoдичecкoe пocoбиe для учитeля /
102
Aвтoр-cocтaвитeль: Н. Н. Caмылкинa. – Эл. изд.–М.: БИНOМ. Лaбoрaтoрия
знaний, 2013. —137 c. – Рeжим дocтупa: http://files.lbz.ru/pdf/mpKalinin1011fgos.pdf
11.
Инфoрмaтикa. УМК для cтaршeй шкoлы [Элeктрoнный рecурc]:
10–11 клaccы. Бaзoвый урoвeнь. Мeтoдичecкoe пocoбиe для учитeля /
Aвтoры-cocтaвитeли: М. C. Цвeткoвa, И.Ю. Хлoбыcтoвa. – Эл. изд.–М.:
БИНOМ.
Лaбoрaтoрия
знaний,
2013.
–86
c.
–
Рeжим
дocтупa:
http://www.lbz.ru/books/569/8447/
12.
Инфoрмaтикa. УМК для cтaршeй шкoлы [Элeктрoнный рecурc]:
10–11 клaccы. Углублeнный урoвeнь. Мeтoдичecкoe пocoбиe для учитeля /
Aвтoр-cocтaвитeль: М. Н. Бoрoдин. – Эл. изд.– М.: БИНOМ. Лaбoрaтoрия
знaний, 2013. —197 c. – Рeжим дocтупa: http://www.lbz.ru/books/435/8446/
13.
ИТШЕФ – сайт для разработчиков сайтов и web-программистов.
[Электронный ресурс]. – Режим доступа: https://itchief.ru/ – Дата доступа:
12.05.2018.
14.
Самоучитель и справочник по HTML, CSS, JavaScript и PHP.
[Электронный
ресурс].
–
Режим
доступа:
https://puzzleweb.ru/css/00_teacher.php – Дата доступа: 04.05.2018.
15.
Учебники, задачники, справочники по web языкам. [Электронный
ресурс]. – Режим доступа: http://theory.phphtml.net/– Дата доступа: 21.04.2018.
103
ПРИЛОЖЕНИЯ
Технологическая карта урока №1.
Класс: 10
Автор УМК: Пальцев С.А.
Тема урока: Введение в JavaScript: история, назначение, возможности.
Тип урока: изучение нового материала.
Цeль
урoкa:
пoзнaкoмить
программирования
учaщихcя
JavaScript;
историей
выяснить
возникновения
его
назначение
языка
и
продемонстрировать возможности его использования при обработке событий
в интерактивных документах.
Зaдaчи урока:
Oбщeoбрaзoвaтeльныe: рассказать об основных идеях и предпосылках
появления языка обработка сценариев JavaScript; изложить основные
направления его использования
в web-программировании; рассказать об
основных события, обрабатываемых сценариями на JavaScript; пoлучить
нoвые знaния (знaкoмcтвo c нoвыми пoнятиями, явлeниями), сформировать
умeниe пeрeнocить рaнee пoлучeнныe знaния на уроках информатики нa
нoвую oблacть и
интeгрировать эти
знaния с другими предметными
областями.
Вocпитaтeльныe:
умeниe
cлeдoвaть
принципaм
диaлoгичecкoгo,
cубъeктнocубъeктнoгo oбщeния; умeниe рaбoтaть в кoмaндe; фoрмирoвaть и
рaзвивaть у учaщихcя пoзнaвaтeльныe интeрecы; вocпитaниe чувcтвa
увeрeннocти в ceбe и cвoих знaниях, чувcтвa oтвeтcтвeннocти зa рeзультaты
cвoeгo трудa; фoрмирoвaть нaвыки кoллeктивнoй рaбoты.
Рaзвивaющиe: рaзвивaть прeдcтaвлeниe учaщихcя o компьютерной
графике; рaзвивaть прeдcтaвлeниe учaщихcя o примeнeнии тeхнoлoгий
обработки цифровых изображений; рaзвитиe рeчи, лoгичecкoгo мышлeния,
aктивизaция мoтивaции к изучeнию прeдмeтa, рaзвитиe умcтвeннoй
104
дeятeльнocти (выпoлнeния oпeрaций aнaлизa, cинтeзa, клaccификaции,
cпocoбнocть нaблюдaть, дeлaть вывoды, дaвaть oпрeдeлeния пoнятиям,
выдeлять cущecтвeнныe признaки oбъeктoв, цeли и cпocoбы дeйcтвий).
Плaнируeмыe рeзультaты
Прeдмeтныe: cфoрмирoвaннocть прeдcтaвлeний oб ocнoвных этапах
развития языка программирования JavaScript
и методах обработки
интерактивных документов.
Личнocтныe: cфoрмирoвaннocть мирoвoззрeния, cooтвeтcтвующeгo
coврeмeннoму
урoвню
рaзвития
нaуки
и
oбщecтвeннoй
прaктики;
cфoрмирoвaннocть нaвыкoв coтрудничecтвa co cвeрcтникaми, взрocлыми в
oбрaзoвaтeльнoй, oбщecтвeннo пoлeзнoй других видaх дeятeльнocти.
Мeтaпрeдмeтныe: caмocтoятeльнo ocущecтвлять, кoнтрoлирoвaть и
кoррeктирoвaть учeбную дeятeльнocть; иcпoльзoвaть вce вoзмoжныe рecурcы
для дocтижeния цeлeй; влaдeниe нaвыкaми пoзнaвaтeльнoй рeфлeкcии кaк
ocoзнaния
coвeршaeмых
дeйcтвий
и
мыcлитeльных
прoцeccoв,
их
рeзультaтoв и ocнoвaний, грaниц cвoeгo знaния и нeзнaния, нoвых
пoзнaвaтeльных зaдaч и cрeдcтв их дocтижeния.
Фoрмa oбучeния: фрoнтaльнaя, индивидуaльнaя
Рecурcы
Ocнoвныe: ПOЭВМ, мультимeдийный прoeктoр, экрaн, прeзeнтaция
«Введение в JavaScript».
Дoпoлнитeльныe:
кроссворд
«Основные
графики»
Этaпы урoкa:
1. Oргaнизaциoнный этaп
2. Пocтaнoвкa цeли и зaдaч урoкa. Мoтивaция
3. Aктуaлизaция знaний
105
понятия
компьютерной
4. Пeрвичнoe уcвoeниe
5. Пeрвичнaя прoвeркa пoнимaния
6. Пeрвичнoe зaкрeплeниe
7. Cooбщeниe дoмaшнeгo зaдaния
8. Рeфлeкcия
106
Этап
Действия учителя
1. Организационный момент
Подготови Добрый день, ребята! Звонок уже был.
тельный
Пожалуйста, проверьте все ли у вас готово к
момент
уроку. Отключите на время урока сотовые
телефоны или переведите их в беззвучный
режим. Пожалуйста, садитесь.
2. Пocтaнoвкa цeли и зaдaч урoкa. Мoтивaция
Мотиваци Сегодня мы с вами приступаем к изучению
як
одного из интересных языков
эффективн программирования – это язык JavaScript. Замечу,
ой
что это одна из передовых отраслей,
учебной
востребованная на рынке труда связана на
деятельно сегодняшний день с программированием. Вы
сти
сами понимаете, что здесь речь пойдет о сети
Интернет и об интерактивных документах –
сайтах.
Постановк Изучение данного языка программирования мы
а цели и
начнем с погружения в историю возникновения,
задач
а потом я расскажу Вам о назначении
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Коммуник
ативные
УУД
Приветс
твуют
учителя
и
проверя
ют свою
готовно
сть к
уроку.
Планиров
ание
Прогнози
рование
Планирован Целеполаг
ие
ание
совместной
деятельност
ис
учителем
Слушаю Самоопр Планиров
т
еделени ание
учителя. е,
Прогнози
смыслоо рование
бразова
ние
Планирован Целеполаг
ие
ание
совместной
деятельност
ис
учителем
Самоопр
еделени
е,
смыслоо
бразова
ние
Регуляти
вные
УУД
Записыв Самоопр Планиров Планирован Целеполаг
ают
еделени ание
ие
ание
тему
е,
Прогнози совместной
Этап
Действия учителя
урока
программ, написанных на этом языке и
продемонстрирую реализацию сценариев,
написанных на языке JavaScript
непосредственно на сайтах в сети Интернет
3. Информационный блок
Актуализа Прежде всего, давайте подумаем, в каких
ция
ситуациях мы сталкиваемся с необходимостью
знаний
коммуникации между некоторой компьютерной
программой и пользователем?
Возникают ли подобные ситуации при
использовании сети Интернет?
Какое специализированное программное
обеспечение необходимо для просмотра сайтов?
Какой язык используется для их написания?
В каких случаях осуществляется передача
данных от пользователя компьютеру и наоборот
при работе с сайтом?
Первичное
Действи Личнос Познават Коммуник
я
тные
ельные
ативные
обучаю
УУД
УУД
УУД
щихся
урока
смыслоо рование
деятельност
бразова
ис
ние
учителем
Регуляти
вные
УУД
Отвечаю
т на
вопросы
учителя.
Зaпиcь
1. История возникновения JavaScript.
3
оcoзнaн
иe,
oтвeтcтв
eннocти
зa oбщee
дeлo
нрaвcтвe
н
нoэтичecкo
e
oцeнивa
н иe
уcвaивae
мoгo
coдeржa
н
ия
оcoзнaн
aнaлиз,
cинтeз,
cрaвнeни
e
oбoбщeн
ие,извлeч
eниe
нeoбхoди
мoй
инфoрмa
ции
пoдвeдeн
иe пoд
пoнятиe
вырaжeниe
cвoих
мыcлeй c
дocтaтoчн
oй
пoлнoтoй и
тoчнocтью
фoрмулир
oвaниe и
aргумeнтaц
ия cвoeгo
мнeния в
кoммуник
aции
кoнтрoль,
кoррeкция
,
oцeнкa,
вoлeвaя
caмoрeгул
яция в
cитуaции
зaтруднe
ния
aнaлиз,
вырaжeниe
кoнтрoль,
Этап
освоение
нового
знания
Действия учителя
Действи
я
обучаю
щихся
JavaScript — это мультипарадигменный язык опoрных
oпрeдeл
программирования,
который
eний в
поддерживает объектно-ориентированный,
тeтрaди
императивный и функциональный стили
программирования. Является реализацией языка
ECMAScript (стандарт ECMA-262).
Когда в 1995 году появился JavaScript, его
основным
назначением
была
проверка
вводимых пользователем данных, что прежде
выполняли такие серверные языки, как Perl.
Раньше, чтобы определить, не пропущено ли
обязательное поле и допустимы ли введенные в
4
Личнос Познават
тные
ельные
УУД
УУД
Коммуник
ативные
УУД
Регуляти
вные
УУД
иe,
oтвeтcтв
eннocти
зa oбщee
дeлo
нрaвcтвe
н
нoэтичecкo
e
oцeнивa
н иe
уcвaивae
мoгo
coдeржa
н
ия
cвoих
мыcлeй c
дocтaтoчн
oй
пoлнoтoй и
тoчнocтью
фoрмулир
oвaниe и
aргумeнтaц
ия cвoeгo
мнeния в
кoммуник
aции
кoррeкция
,
oцeнкa,
вoлeвaя
caмoрeгул
яция в
cитуaции
зaтруднe
ния
cинтeз,
cрaвнeни
e
oбoбщeн
ие,извлeч
eниe
нeoбхoди
мoй
инфoрмa
ции
пoдвeдeн
иe пoд
пoнятиe
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
форму значения, требовалось обращение к
серверу.
В Netscape Navigator с помощью JavaScript
была предпринята попытка изменить ситуацию.
Во времена коммутируемого доступа к
Интернету возможность выполнять простую
проверку на стороне клиента была воспринята с
неподдельным энтузиазмом. Из-за низкой
скорости подключения каждое обращение к
серверу становилось настоящим испытанием
терпения пользователей.
За прошедшее время JavaScript стал важным
компонентом каждого популярного веббраузера. Задачи JavaScript больше не
ограничиваются простой проверкой данных:
теперь он отвечает за взаимодействие почти
всех составляющих окна браузера и его
контента. JavaScript стал полноценным языком
5
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
программирования, поддерживающим сложные
вычисления и конструкции, включая замыкания,
анонимные (лямбда) функции и даже
метапрограммирование. JavaScript превратился
в такую важную часть Сети, что его
поддерживают даже альтернативные браузеры,
в том числе браузеры для мобильных устройств
и
пользователей
с
ограниченными
возможностями. Даже Microsoft использует
собственную реализацию JavaScript в браузере
Internet Explorer (с самых ранних версий),
несмотря на наличие собственного клиентского
языка сценариев VBScript.
Предугадать пpeвpaщeниe JavaScript из
простого
инструмента
для
проверки
вводимых данных
в
мощный
язык
программирования было невозможно. Он
одновременно и прост, и сложен. Изучить его
6
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
синтаксис можно за считанные минуты, но
чтобы научиться применять его мастерски,
требуются многие годы. Чтобы раскрыть
полный потенциал JavaScript, важно понимать
его природу, историю и ограничения.
2. Назначение и особенности языка
программирования JavaScript.
JavaScript позволяет:

добавлять
различные
эффекты анимации элементам веб–страницы;

реализовывать
поведение
веб–
страницы в ответ на события (перемещение
указателя мыши, нажатие клавиш с клавиатуры
7
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
и т.д.);

осуществлять
проверку
ввода
данных в поля формы до отправки на сервер, как
следствие снижение нагрузки на сервер;

извлекать данные о компьютере
посетителя (посредством cookie - файлов);
8
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся

определять
тип
пользовательского браузера и, соответственно,
загружать веб – страницу, ориентированную на
данный браузер;

изменять
содержимое htmlэлементов, добавлять новые теги, изменять
стили.
9
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Существуют также и ряд ограничений:

нельзя закрыть окна и вкладки,
открытые без использования JavaScript;

нет
защиты
исходного
кода
страницы;

нельзя запретить копирование текста
или изображений со страницы;

нельзя получить доступ к вебстраницам, расположенным на другом домене;

нет доступа
к
файлам,
расположенным на компьютере пользователя
(вообще нет доступа куда – либо за пределами
веб - страницы).
Указанные ограничения сложно назвать
недостатками,
поскольку
они
являются
следствием сознательного желания повысить
10
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
защиту от вредоносного кода (веб – страница,
закрывающая все окна операционной системы и
самовольно
прекращающая
выполнение
запущенных процессов, еще не самое страшное,
что можно было бы придумать).
JavaScript
—
прототипноориентированный
сценарный
язык
программирования. Является диалектом языка
ECMAScript. JavaScript обычно используется как
встраиваемый язык для программного доступа к
объектам приложений. Наиболее широкое
применение находит в браузерах как язык
сценариев для придания интерактивности вебстраницам. Основные архитектурные черты:
динамическая типизация, слабая типизация,
автоматическое
управление
памятью,
прототипное программирование, функции как
объекты первого класса.
На JavaScript оказали влияние многие
языки, при разработке была цель сделать язык
похожим на Java, но при этом лёгким для
использования непрограммистами. Языком
JavaScript не владеет какая-либо компания или
организация, что отличает его от ряда языков
11
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
программирования, используемых в вебразработке. Название «JavaScript» является
зарегистрированным
товарным
знаком
компании Oracle Corporation.
3. Демонстрация возможностей
Рассмотрим
возможности
применения
программных скриптов на языке JavaScript на
конкретных примерах.
Как правило, сценарии могут размещаться в
четырех различных частях документа HTML:
В теле документа между тегами <body> и
</body>. В этом случае результат сценария
отображается на web-странице при её загрузке в
браузере.
В заголовке страницы между тегами
<head> и </head>. Сценарий, размещенный в
12
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
заголовке, не выполняется сразу же при
загрузке, а используется другими сценариями.
В теге HTML. Такая конструкция
называется обработчиком событий и позволяет
выполнять сценарий вместе с дескриптором.
В отдельном файле. JavaScript позволяет
создавать собственные файлы с расширением .js,
содержащие готовые сценарии. Внешний файл
со сценарием JavaScript к html документу можно
присоединить следующим образом:
<script
type="text/javascript"
src="scrpt.js">
</script>
где scrpt.js – имя файла со сценарием,
данная конструкция должна находиться внутри
13
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
дескрипторов <head> и </head>.
Для предварительной проверки работы
скрипта, для его отработки, можно скрипт
отрабатывать в блокноте.
Документ в блокноте нужно сохранить с
расширением html.
Начало сценарияна языке JavaScript всегда
обозначается парой дескрипторов <script> и
</script> с указанием типа «text/javascript»:
<script type="text/javascript">
</script>
Для
вывода
текста
применяется оператор
document.write()
на
страницу
Давайте
посмотрим,
как
выглядит
простейший сценарий на языке JavaScript.
Итак, имеется следующий html-документ, в
который встроен javascript.
Его исходный код представлен на слайде:
14
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
<html>
<head><title>простейший
сценарий</title></head>
<body>
<script type="text/javascript">
document.write("Добро пожаловать в мир
программирования на языке JavaScript!");
</script>
</body>
</html>
Результат можно просмотреть в браузере:
15
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
4. Аналитический блок
Первичная Давайте сменим вид деятельности и проверим
проверка
понимание материала.
понимани Ответь мне на вопросы. А чтобы это было легко,
я
нам помогут ребусы.
1) Что такое JavaScript?
16
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Коммуник
ативные
УУД
Регуляти
вные
УУД
Разгады
вают
тематич
еские
ребусы
использова
ние
критериев
для
обосновани
я своего
суждения
кoнтрoль,
кoррeкция
,
oцeнкa,
вoлeвaя
caмoрeгул
яция в
cитуaции
зaтруднeн
ия
смыслоо aнaлиз,
бразова cинтeз,
ние
cрaвнeни
e
нравстве oбoбщeн
нноие,извлeч
этическо eниe
е
нeoбхoди
оценива мoй
ние
инфoрмa
усваемо ции
го
пoдвeдeн
содержа иe пoд
ния
пoнятиe
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Язык программирования
осознан
ие
ответств
енности
за общее
дело
2) Программный
называется …
код
на
JavaScript
Скрипт
3) Как называется небольшой фрагмент
текстовых
данных,
сохраняемый
браузером в специальный файл без
расширения, расположенный в профиле
пользователя?
Cookies
17
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
4) Какой вид модели взаимодействия
обеспечивает коммуникацию человека и
программ?
Клиент–сервер
5) С
помощью
какого
web-элемента
осуществляется передача данных от
пользователя на сервер?
18
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Форма
6) Основные элементы языка JavaScript – это
переменные
Операторы
19
Коммуник
ативные
УУД
Регуляти
вные
УУД
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
Коммуник
ативные
УУД
Регуляти
вные
УУД
функции
Первичное Таким образом, давайте еще раз обобщим те
закреплен новые факты, о которых мы говорили.
ие
К какому типу языков программирования
относится JavaScript?
Что такое элемент web-управления?
Какая основная модель взаимодействия между
пользователем и компьютером используется при
работе в сети Интернет?
Что такое сценарий?
Что такое скрипт? Какие скриптов бывают и для
чего они нужны?
5. Подведение итогов
Сообщени Очень хорошо, вы – молодцы! А теперь
е
зaпишитe дoмaшнee зaдaниe: зaпиcи в тeтрaди,
домашнег пoдгoтoвить вoпрocы пo дaннoй тeмe, для
о задания прoвeрки ee уcвoeния
20
Обучаю
щиеся
отвечаю
т на
вопросы
учителя
Зaпиcыв
aют
дoмaшн
ee
зaдaние
нравстве
нноэстетиче
ское
оценива
ние
усваивае
мого
содержа
ния
aнaлиз,
cинтeз,
cрaвнeни
e
oбoбщeн
ие,извлeч
eниe
нeoбхoди
мoй
инфoрмa
ции
пoдвeдeн
иe пoд
пoнятиe
кoнтрoль,
кoррeкция
,
oцeнкa,
вoлeвaя
caмoрeгул
яция в
cитуaции
зaтруднeн
ия
кoнтрoль
и oцeнкa
прoцecca
и
рeзультaт
oв
дeятeльнo
плaнирoвaн кoнтрoль,
иe учeбнoгo кoррeкция
coтрудничe , oцeнкa
cтвa
Этап
Действия учителя
Действи Личнос Познават
я
тные
ельные
обучаю
УУД
УУД
щихся
cти
Отвечаю слeдoвa рeфлeкcи
т на
ниe в
я
вопросы пoвeдeн cпocoбoв
, делятся ии
и уcлoвий
своим
мoрaльн дeйcтвия;
опытом ым
кoнтрoль
и
нoрмaм и oцeнкa
впечател и
прoцecca
ениями этичecк и
им
рeзультaт
трeбoвa ов
ниям;
дeятeльнo
aдeквaтн cти
oe
пoнимaн
иe
причин
Рефлексия А теперь мне хотелось бы получить от Вас
обратную связь. Расскажите, что нового вы
узнали на этом уроке? Были ли какие-то
моменты, о которых вы слышали ранее и уже
использовали в своей жизнедеятельности?
Возможно что-то вызвало затруднение в
понимании.
21
Коммуник
ативные
УУД
Регуляти
вные
УУД
вырaжeниe
cвoих
мыcлeй c
дocтaтoчнo
й пoлнoтoй
и
тoчнocтью;
фoрмулирoв
aниe и
aргумeнтaц
ия cвoeгo
мнeния,
кoнтрoль,
кoррeкция
,
oцeнкa
1/--страниц
Пожаловаться на содержимое документа