43. Web-программирование. Программа

1. Первый скрипт.
   – JavaScript, что это такое?
   – JavaScript и Java.
   – Как скрипт монтируется в HTML.
   – Примеры с пояснениями.
   
   
2. Переменные, константы, выражения.
   – Переменные и константы.
   – Описание переменных.
   – Имена переменных.
   – Безопасные имена.
   – Выражения.
   – Вызов функции.
   – Функция alert.
   – Команда присваивания.
   – Операция присваивания.
   
   
3. Ветвления и ввод информации.
   – Ввод информации.
   – Функция prompt.
   – Условная команда, условие.
   – Блок.
   – Конструируем экзамен.
   – Выражения как условия.
   – Значения логического типа.
   – Трудные условия.
   – Ввод альтернативы.
   – Функция confirm.
   
   
4. Повторения.
   – Цикл while.
   – Цикл for.
   – Команды break и continue.
   – Программирование циклов с конца.
   – Описание переменной цикла.
   – Программа Угадайка.
   
   
5. Функции.
   – Описание функции и ее вызов.
   – Проектирование сверху вниз.
   – Формальные и фактические аргументы.
   – Сколько return может иметь функция.
   – Функции и процедуры (для паскалистов).
   – Функции с переменным числом аргументов.
   – Оборонительное программирование.
   – Комментарии — основа программного кода.
   – Алгоритм создания кода.
   – Как браузер разбирается в типах.
   – Оборонительная Угадайка.
   
   
6. Объект=методы+свойства.
   – Понятие объекта.
   – Инкапсуляция.
   – Объект и экземпляр объекта.
   – Интерфейс и внутреннее устройство.
   – Встроенные объекты.
   – Объекты пользователя.
   – Объект Date.
   – Объект Array.
   – Объект String.
   – Объект Math.
   – Структурное программирование.
   – Объектно-ориентированное программирование.
   – Наследование.
   – Изменение «документации» на объект.
   – Статическое и динамическое наследование.
   – Функции как аргументы других функций.
   – Массив как аргумент функции.
   – Сортировка методом пузырька.
   
   
7. Объектная модель документа.
   – Объект window.
   – Открытие новых окон.
   – Объект document.
   – Создание страницы «на лету».
   – События браузера.
   – Управление при помощи событий.
   – Пример интерактивного документа.
   
   
8. Формы (кнопки, строки ввода).
   – Принцип программного управления.
   – Блок FORM.
   – Посылка формы по e-mail.
   – Тег INPUT.
   – Кнопки.
   – Строки ввода.
   
   
9. Формы (флажки, радиокнопки).
   – Флажки.
   – Радиокнопки.
   – Устройство Интернет-магазина.
   – Что такое CGI-скрипты?
   
   
10. Формы (меню, многострочное поле).
    – Тег SELECT.
    – Тег TEXTAREA.
    – Меню выбора.
    
    
11. Конструирование объектов.
    – Объект для хранения данных.
    – Построение сложного объекта.
    – Универсальные скрипты.
    – Передача данных между страницами.
    – Механизм cookies.
    
    
12. Проектирование меню.
    – Меню ссылок на UL.
    – Меню ссылок на SELECT.
    – Меню на стандартных кнопках.
    – Меню на графических кнопках.
    
    
13. Проектирование экзамена.
    – Один правильный ответ в списке.
    – Несколько правильных ответов в списке.
    – Универсальный зачетный класс.
    
    
14. Роботландская мозаика. Практикум.
    – Разработка программы Перевозчик.
    – Разработка программы Плюсик.
    
    
15. CSS в HTML-коде.
    – Уровень отдельного тега.
    – Уровень отдельного HTML-файла.
    – Уровень нескольких HTML-файлов.
    
    
16. Основы CSS.
    – Наследование.
    – Контекстные селекторы.
    – Классы.
    – Теги DIV и SPAN.
    – Абсолютное позиционирование.
    – Z-index.
    – Каскадирование.
    – Стилевые свойства.
    
    
17. CSS+JavaScript.
    – Принцип программного управления.
    – Управление распространением события.
    – Доступ к элементам стиля.
    – Построение динамического меню.
    – Движение на экране.
    
    
18. Абсолютное позиционирование и третье измерение.
    – Тонкости позиционирования.
    – Создание 2.5-мерной страницы.
    
    
19. Управление содержимым страницы.
    – Изменение элементов на странице.
    – Свойства и методы управления содержанием.
    – Работа с объектами TextRange.
    – Создание динамических таблиц.
    
    

Пояснительная записка

Цель курса — используя средства динамического HTML, научиться строить полезные компьютерные приложения, которые можно было бы использовать на локальном компьютере у себя дома, в школе или на базе полученных знаний построить собственную интерактивную страничку в Интернете.

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

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

Занятия на курсе базируются на интерактивных книгах:

• «JavaScript-конструирование»
• «DHTML-конструирование»

• Испытательные стенды.
  Ученик может провести серию опытов по теме изучаемого материала: выбрать нужные параметры, пощелкать переключателями, подергать «веревочки» на пульте управления. Результат испытаний сразу отображается на экране, что гораздо нагляднее длинных текстовых описаний.
  
  
• Встроенный инструментарий.
  Многие задания в книге можно выполнять прямо на ее страницах. Здесь есть и окна текстового редактора с заготовками HTML-программ, и кнопка для демонстрации результата в браузере.
  
  
• Зачетные классы.
  В конце урока выполняется контрольная работа. Книга следит за правильностью решений и выставляет оценку.
  
  
• Задачник.
  В книгах представлена довольно обширная коллекция заданий.
  
  
• Универсальные наборы.
  Книги предлагают наборы универсальных скриптов, на базе которых можно строить собственные приложения.

Следует отметить, что курс 43 — для тех, кто имеет склонность к созданию собственных программных кодов и небольшой опыт в этом увлекательном, но не простом деле. Программирующие на Си получают преимущество на старте — ведь синтаксис языка JavaScript от Си почти не отличается. Но это преимущество кратковременное (привыкаешь к новому языку быстро) и не существенное (язык как авторучка — лишь средство для создания шедевров).

Однако, надо честно сказать, курс 43 — это курс практического объектно-ориентированного программирования. Исходя из этой установки, следует приглашать детей, чтобы впоследствии не было разочарований.

Обучение распределено по учебным неделям. Предполагается, что в течение недели, в удобное для себя и детей время, учитель проводит занятие с командой. Одно занятие в неделю. Но это жесткий минимум. Более оптимально, если дети смогут собираться 2 раза в неделю. Например, один раз с учителем, а другой — с лаборантом для самостоятельных работ с книгой, выполнения заданий или работ по теме конкурсного проекта.

В подключении машин к «живому» Интернету нет необходимости. Вся работа выполняется в безсетевом режиме. Все что нужно для работы — это браузер, гипертекстовая книга и какой-нибудь текстовый редактор, который умеет работать в кодировке Windows.

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

В первом семестре школьники работают с первыми двумя частями книги «JavaScript-конструирование» («Знакомство с языком», «Объектная модель браузера»). Семестр завершается конкурсом, цель которого продемонстрировать усвоение пройденного материала. Этот конкурс немного похож на олимпиаду по программированию. Будут предложены несколько учебных заданий, цель которых создать скрипты и вмонтировать их в HTML-код так, чтобы документы получили оговоренный в заданиях интерфейс. Иными словами, цель конкурса — не создание собственного проекта, а написание гипертекста «на заказ».

Если дети плохо знакомы с «ручным» построением HTML-тегов и методами проектирования гипертекста, то необходимо «проявить» и «закрепить» их знания. Лучше всего это сделать по гипертекстовой книге «HTML-конструирование» (это учебник на курсе 42). Если у учителя есть бумажный вариант этой книги (он был опубликован в июне 2000 года в 21 и 22 номерах газеты «Информатика»), то он, несомненно, тоже будет хорошим пособием. В какой-то степени пригодны и другие книги по HTML, но они менее подходят для нашего курса. Дело не в том, что они плохие! Дело в том, что все книги Университета по Web-конструированию написаны в одном стиле и с одной целевой педагогической функцией (например, предлагается определенный стиль записи программных кодов, а это очень важно!).

Второй семестр начинается на «кухне» Сидорова («JavaScript-конструирование», уроки 11-14). Происходит наращивание программистской «мускулатуры». Школьники знакомятся с практическим программированием, разбирают поделки Сидорова, создают собственные объекты. Объектно-ориентированное программирования из области красивых программистских далей становится обычным делом.

Переход к новой книге «DHTML-конструирование» приближает к обычной практике механизм CSS и динамическое управление содержимым гипертекстовой страницы на крыле биплана JavaScript+CSS.

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

Инструментальное обеспечение

Для работы на курсе необходимо:

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

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

Каждое рабочее должно быть оснащено компьютером с установленным на нем браузером Microsoft Internet Explorer версии не ниже четвертой.

Для написания программ необходим какой-нибудь текстовый редактор. Лучше всего подходит редактор МикроМир, но можно обойтись и блокнотом Windows или другим редактором, который умеет работать в той же кодировке, что и ваш браузер.

Организация работы

Команды получают из RU следующие материалы:

• календарный план занятий и конкурсов;
• книгу «JavaScript-конструирование» с методическими рекомендациями для учителя;
• книгу «DHTML-конструирование-2» с методическими рекомендациями для учителя.

Процесс обучения в каждом семестре строится так:

• изучение тем семестра
• общение с куратором и сокурсниками
• выполнение конкурсных проектов
• перекрестная проверка и проверка куратора
• подведение итогов, разбор решений, анализ типичных ошибок

Бумажные учебники

Издательство «БХВ-Петербург» выпускает бумажные учебники, которые удачно дополняют электронные лаборатории. Об алгоритмах покупки бумажных учебников читайте на странице Бумажные учебники Университета.

Связь с куратором

Если у вас остались вопросы, то их можно задать куратору Дуванову Александру Александровичу по адресу kurs@robotland.pereslavl.ru.