Элективный курс "Программирование на Java Script"

I. Введение

Элективный курс “Программирование на JavaScript” для профильной подготовки учащихся 10–11-х классов (2-е полугодие) посвящен одной из ключевых тем курса “Информационные технологии” – “Разработка WEB-сайтов”, с правильно оформленной графикой, с созданием диалоговых окон, возможностью изменять состояние страницы в процессе ее прочтения.

К сожалению, в основной школе, где на изучение HTML-конструирование в базовых профилях, отведено 10 часов, а в профильных 20 часов, причем изучается только основы языка гипертекстовой разметки, трудно создать динамический сайт из-за ограниченности приобретенных знаний. При изучении этой темы школьник уже сталкивается с потребностью оптимизировать графику, дабы его страничка имела более и менее небольшой объем. А уж возможности создания диалога на страницах сайта и говорить не приходится.

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

• Оптимизация графики в среде PhotoShop;
• Создание WEB-сайтов;
• Основы JavaScript.

Я остановлюсь на методике элективного курса “Основы JavaScript”.

Его цель – создать целостное представление использования скриптов на WEB-страницах и значительно расширить спектр задач, посильных для учащихся.

Для достижения поставленной цели необходимо решить следующие задачи:

• Развитие мышления учащихся, формирование у них умений самостоятельно приобретать и применять знания;
• Усвоения школьниками идеи иерархичности структуры объектов, установить зависимость объектов, методов, свойств.
• Использовать интеграцию с JavaScript для управления элементами HTML-документов и даже самим браузером, генерации новых документов, организации диалогового взаимодействия с пользователем.
• Развитие творческих способностей у школьников, осознанных мотивов учения; подготовка к продолжению образования т сознательному выбору профессии

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

II. Теоретическая часть

Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор функций над объектами. Последние называются методами. Кроме методов существуют и другие функции, которые больше похожи на функции из традиционных языков программирования и позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события – аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным интерфейсом.

Каждый из этих классов имеет функции управления объектами класса – методы. Самыми главными их этих методов являются те, которые позволяют переназначать значения объектов. Делается это обычно по операции присваивания. Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+, –, *,  /, %, >>, <<, + =, – =, ...). При этом оператор сложения "+" при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку:

s = "string1" + "string2"

Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений:

• break – принудительный выход из цикла;

while(i &lt 6)

{

if(i==3) break;

}

• continue – переход в конец цикла;

while(i &lt 6)

{

if(i==3) continue;

}

• for – цикл;

for(i=0;i<9;i++)

{

...

}

• for – цикл свойств объекта (переменных определенных в классе);

for(i in obj)

{

str = obj[i]

}

• if..else – условный оператор;

if(i>0)

{

...

}

else

{

...

}

• wile – условный цикл;

wile(j==k)

{

j+ +;

k– –;

}

• var – оператор объявления переменной.

var kuku = "kuku"

Тип переменной определяется по присвоенному ей значению.

Перечисленные здесь операторы не представляют полного перечня операторов JavaScript, но их вполне достаточно для выполнения практических занятий.

Важным элементом языка являются события. Программист использует события для выполнения определенных частей программного кода скрипта. Один из наиболее часто используемых приемов – исполнение определенных действий в момент загрузки страницы в Navigator.

Не будем перечислять все события, но упомянем о наиболее часто используемых:

• onLoad – выполнение скрипта или функции при загрузке;
• onChange – порождается при изменении значения элемента формы;
• onClick – порождается при выборе объекта (button, checkbox и т.п.);
• onSelect – порождается при выборе текстового объекта (text, textarea);
• onSubmit – при нажатии на кнопку Submit;
• onUnload – при переходе к другой странице.

III. Практическая часть

Разработанный курс состоит из двух частей. Первая изучается в 10 классе в VI четверти (26 часов), вторая в 11 классе III четверти (36 часов).

Предлагается следующая последовательность изложения учебного материала:

10 класс

1. Первый скрипт. Основы, назначение, предупреждение. Эффект цвета текста, Alert внутри и в отдельном файле. Переменные, константы, выражения.

Начать занятие желательно с краткого изложения содержания элективного курса. Следует акцентировать внимание учащихся на том, что им предстоит в течении 26 учебных часов изучить новый язык программирования для создания эффективных динамических WEB-страниц. Показать, что программы на JavaScript (их называют скриптами) не работают самостоятельно. Коды JavaScript дополняют коды HTML и "живут" только вместе с ними. Познакомиться с первым диалоговым окном, вызываемым командой Alert с единственной кнопкой “ОК”.

2. Математические функции. Метод confirm, введение в IF и ELSE.

Рассказать учащимся о встроенных математических функциях, изучить правила вызова в контексте, поупражняться в простейших вычислениях. Полезно результаты вычислений выводить с помощью уже изученной информационной панели. Далее следует познакомить с командой confirm (подтвердить), которая действует очень похоже на alert, за исключением того, что добавляет кнопку “Отмена” в диалоговое окно.

3. Смена картинки через OnMouseOver, через функцию, Команды (IF) и (IF и ELSE). Случайный выбор фраз и рисунков.

Основная цель изучения данной темы: понять алгоритм написания программы для смены объекта. Применяется этот метод создания динамического логотипа, эффекта нажатия кнопки и др. Необходимо обратить внимание, на то, что в записи кода не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>. Для многократного повторения больше подходит функция.

4. Встроенные объекты: Дата, время, String, Array (работа с встроенным временем компьютера, строковыми переменными, массивами данных).

В данном разделе предлагается познакомить учащихся с возможностями встроенных объектов: определить механизм вычисления времени и даты, использовать математические выражения для вычисления текущей даты. Ввести начальные сведения для задания и заполнения массива данных, умения воспользоваться элементами массива для работы со строковыми переменными, вывода на странице в определенном виде.

5. Реакция на нажатие мыши, Обработка событий, запрос пользователю

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

11 класс

1. Повторение основных скриптов и функций, изученных в 10 классе.
2. Первые уроки в 11 классе полезно начать с просмотра контрольных страниц, созданных на уроках. В процессе просмотра ведется диалог, о том какие методы и способы использовались при создании документа. Как закрепление можно предложить создать страницу приветствия одиннадцатикласснику.
3. Иерархия объектов.
4. Изучение новой темы позволяет раскрыть, что самое интересное (и полезное для программиста) происходит во время работы браузера. Браузер не только показывает документ на экране компьютера, но строит для этого документа специальный объект window, предоставляя его в распоряжение программиста. Этот объект содержит в себе всю информацию о документе (его тегах) вместе с информацией об окне Windows, в котором этот документ видит пользователь. Поэтому, главная задача четко осознать иерархическую структуру всех объектов и методов.
5. Создание вызываемых событий через функцию.
6. В теоретических сведениях рекомендуется определить, что функция представляет собой подпрограмму, которую можно вызвать для выполнения, обратившись к ней по имени. В JavaScript имеется достаточное количество встроенных функций, которые можно использовать в программах, но код которых, нельзя редактировать или посмотреть. Однако, часто появляется необходимость придумать свои собственные так называемые пользовательские функции. Часто используемые фрагменты программ тоже можно представить в виде функции.
7. На занятиях необходимо изучить синтаксис объявления функции, правила получения и приема параметров.
8. Встроенные объекты (String, Array). Создание, свойства, методы обработки.
9. При изучении этой темы необходимо понимать, что объекты представляют собой программные единицы, обладающие некоторыми свойствами. Программный код встроенных в JavaScript объектов нам недоступен. Главное для нас – усвоить, как пользоваться объектами, соблюдая определенный синтаксис.
10. Введение в циклы FOR и WHILE, функция внутри функции.
11. Изучение циклов удобно начать с повторения циклических структур, изученных на уроках информатики по теме “Программирование”. Затем показать особенности синтаксиса написания циклов в JavaScript. Использовать циклы для совершения вычислений, задержки выполнения событий, повторения действия некоторое количество раз. Показать преимущества вызова функции внутри функции для получения независимого объекта от внешней функции.
12. Разработка сценариев: события при наведении на ссылку и после нажатия на ссылку; новый документ в одном окне, новые окна.
13. Изучая тему, необходимо знать, что программы, работающие с объектами HTML-документа, называются сценариями. Сценарии можно писать непосредственно в HTML-документе, а также в отдельных текстовых файлах, которые вызываются из HTML-документа. Сценарии заключены в контейнерном теге <SCRIPT>…</SCRIPT >. Все, что находится вне этих тегов, браузер воспринимает как HTML-код. Следует также четко представлять зависимость порядка расположения функций, от их места нахождения: внутри одного сценария или отдельного.
14. Одним из главных назначений сценариев в HTML-документе является обработка событий, таких как, щелчок кнопки мыши (изученные в прошлых темах), помещение указателя мыши на документе, перемещение указателя мыши с элемента, нажатие клавиши на ссылку.
15. Разработка графических сценариев: Подсветка кнопок и текста. Мигающая рамка, Переливающие цветами ссылки, объемные заголовки, применение фильтров
16. Одним из самых интересных занятием является разработка графических сценариев. Использование стандартных кнопок может оказаться более эффективным, если организовать смену цвета в зависимости от местоположения курсора мыши. В практической работе можно создать документ, в котором при выборе кнопки она меняет цвет, а при нажатии на эту кнопку меняется фон всей страницы.
17. Зачастую объемные заголовки создаются как графические файлы, которые вставляются в HTML-документ. Однако, во многих случаях более экономичным является решение, основанное на использовании таблиц стилей. Очень эффективно выглядит графика, если применить фильтры, в частности прозрачность.
18. Движение элементов: линейное, по эллипсу, остановка, движение за мышью.
19. На сайтах в Интернете часто приходится наблюдать оригинальное появление картинки или перемещение картинки за курсором мыши. Уроки данной темы нацелены на изучение изменения параметров позиционирования при помощи таблицы стилей. Можно заставить элемент перемещаться постоянно, в течении заданного времени или в ответ на события (например, по щелчку кнопкой мыши, при наведении указателя мыши на элемент и т.п.). В качестве практики можно создать игру “Поймай солнечного зайчика”.
20. Создание меню: ссылки на UL, SELECT, на стандартных кнопках, на графических авторских кнопках.
21. В последней теме уместно предложить различные методы создания динамического меню. Первый вариант основа на простом списке, где видны все строки, и можно выбирать любую. Реакцией на наведение курсора мыши должно быть изменение вида ссылки (цвет, форма, начертание). Второй вариант – выбор, где видно поле с первой ссылкой, а остальные можно увидеть при нажатии кнопку показа списка выбора. Третий вариант ссылок основан на стандартных кнопках. Приветствуется добавление эффекта изменения цвета кнопки. И последний вариант дает поле деятельности для творчества: создание ссылок кнопок на основе собственных рисунков. Приветствуется динамическое изменение вида кнопки (ее цвет, графическое изображение, форма, мерцание и т.д.)
22. Создание авторского проекта.

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

IV. Приложения

Приложение 1

Ниже предлагается учебно-тематический план:

Приложения 2–5

Список литературы:

1. Электронный учебник Роботландского Университета HTML-2;
2. Вадим Дунаев Самоучитель JavaScript, Изд. ПИТЕР 2003
3. Электронный учебник авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
   Перевод, оформление и верстка © Татьяна.