Инфоурок / Информатика / Рабочие программы / Рабочая программа интерактивного урока по теме: "Стандартные элементы JavaScript. Объект Form."

Рабочая программа интерактивного урока по теме: "Стандартные элементы JavaScript. Объект Form."


Напоминаем, что в соответствии с профстандартом педагога (утверждён Приказом Минтруда России), если у Вас нет соответствующего преподаваемому предмету образования, то Вам необходимо пройти профессиональную переподготовку по профилю педагогической деятельности. Сделать это Вы можете дистанционно на сайте проекта "Инфоурок" и получить диплом с присвоением квалификации уже через 2 месяца!

Только сейчас действует СКИДКА 50% для всех педагогов на все 184 курса профессиональной переподготовки! Доступна рассрочка с первым взносом всего 10%, при этом цена курса не увеличивается из-за использования рассрочки!

ВЫБРАТЬ КУРС И ПОДАТЬ ЗАЯВКУ
библиотека
материалов

СТРУКТУРА ИНТЕРАКТИВНОГО УРОКА


Тема урока: "Стандартные элементы JavaScript. Объект Form."

  1. Анализ

Цель: Получить навыки в практическом применении стандартных элементов JavaScript.

Средства обучения: Персональный компьютер. Браузер.

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

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

  1. Проектирование

МЕТОДИЧЕСКАЯ КАРТА ЗАНЯТИЯ

Группа:

1032


Дата:


Дисциплина:

Установка и настройка программных средств для доступа в сеть Интернет

Тема занятия:

Ввод, вывод, условный переход в Java Script. Применение операторов.

Тип занятия:

Урок

Вид занятия:

Изучение нового материала.

Цель занятия:

Изучить основы JavaScript. Научиться применять технологию JavaScript при создании динамических и статистических Web-страниц. использование стандартных элементов Java Script.


Формируемые компетенции:

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

ОК 2 Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их эффективность и качество.

ОК 9 Ориентироваться в условиях частой смены технологий в профессиональной деятельности.

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

Межпредметные связи:

Информатика, математика, основы алгоритмизации, программирование.

Технические средства обучения:

Персональные компьютеры BM PC, интерактивная доска, выход в сеть Интернет, программное обеспечение: Microsoft Power Point, Internet Exploer.

Литература:

  1. М.В. Кульгин Компьютерные сети. Практика построения. Для профессионалов. 2-е издание./ - СПб.: Питер, 2003 -462 с.: ил.

  2. Лекционный материал.


СТРУКТУРА УЧЕБНОГО ЗАНЯТИЯ


Элементы

занятия

Содержание основных элементов

Время

Формы, методы обучения

Формируемые компетенции

1

Адаптация к условиям проведения занятия

Организационный момент:

- приветствие;

- проверка присутствующих;

- постановка целей занятия;

Проверка готовности материально технического оснащения урока.

10 минут

Беседа


ОК 1

2

Актуализация опорных знаний и мотивация учебной деятельности

Основные принципы работы с HTML. Особенности работы применения скриптового языка JavaScript при проектировании Web-приложений.


15 минут

Беседа.

Тестирование.

ОК 2

ОК 9

ПК 4.3.

3

Создание результативного пространства

  1. Работа с формами в JavaScript;

  2. Свойства объекта form;

  3. Объекты, входящие в состав форм;




30 минут

Изложение материала на реальном примере. Интерактивная доска.

ОК 1

ОК 9

ПК 4.1.

ПК 4.3.

4

Моделирование рефлекторного пространства

  1. Что такое JavaScript?

  2. Опишите технологию подключения JavaScript?

  3. Приведите примеры работы JavaScript?

  4. Перечислите основные командные операторы JavaScript?

  5. Перечислите основные стандартные элементы JavaScript?

10 минут

Фронтальный опрос.


ОК 1

ПК 4.1.


5

Домашнее задание

  1. Лекционный материал;

  2. М.В. Кульгин Компьютерные сети. Практика построения. Для профессионалов. 2-е издание./ - СПб.: Питер, 2003 -462 с.: ил. Стр. 43-55.

5 минут

Словесный

ОК 1

ОК 2

ОК 9

ПК 4.1.

ПК 4.3.




  1. Разработка

Лекционный материал:



Урок №10

Тема: «Стандартные элементы JavaScript. Объект Form.»


Вопросы урока:

  1. Работа с формами в JavaScript;

  2. Свойства объекта form;

  3. Объекты, входящие в состав форм;



Работа с формами

Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут предаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.

В наиболее общем виде оператор

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

NAME="Имя_формы"

TARGET="Имя_окна"

ACTION="Адрес_URL_расширения_сервера"

METHOD=GET или POST

ENCTYPE="Кодировка_данных"

onSubmit="Обработчик_события_Submit">


. . .

определение полей и органов управления

. . .

Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

Назначение параметра TARGET аналогично назначению этого же параметра в операторе . Когда форма используется для передачи запроса расширению CGI сервера Web, ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.

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

Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.

Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.

Свойства объекта form

Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:

Свойство

Описание

action

Содержит значение параметра ACTION

elements

Массив всех элементов (полей и органов управления), определенных в форме

encoding

Содержит значение параметра ENCTYPE

length

Размер массива elements

method

Содержит значение параметра METHOD

target

Содержит значение параметра TARGET

 

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

. Вы можете их использовать в сценариях JavaScript для проверки параметров. Что же касается массива elements, то в нем находятся объекты, соответствующие полям и органам управления, определенным в форме. Эти объекты образуют второй набор свойств объекта form:

Свойство

Описание

button

Кнопка с заданной надписью

checkbox

Переключатель типа Check Box. Может использоваться в составе набора независимых друг от друга переключателей или отдельно

hidden

Скрытое поле, которое не отображается. Содержимое этого поля может быть считано и проанализировано расширением сервера Web, либо сценарием JavaScript

password

Текстовое поле для ввода паролей. Набранный в этом поле текст не отображается на экране

radio

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

reset

Кнопка, с помощью которой пользователь может сбросить содержимое полей ввода и состояние переключателей в их исходное состояние

select

Список произвольных текстовых строк

submit

Кнопка для посылки данных из заполненной формы расширению сервера Web. Для этой кнопки можно задать произвольную надпись

text

Однострочное текстовое поле

textarea

Многострочное текстовое поле

 

Объекты, входящие в состав форм

Кнопка button

В общем виде кнопка класса button определяется в форме с помощью оператора следующим образом:

NAME="Имя_кнопки"

VALUE="Надпись_на_кнопке"

onClick="Обработчик_события">

Параметр TYPE оператора должен иметь значение button, как это показано в примере. С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью параметра VALUE. Определив обработчик события, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.

Свойства объекта button

Объект button имеет два свойства, отражающие значения соответствующих параметров оператора :

Свойство

Описание

name

Значение параметра NAME

value

Значение параметра VALUE

 

Методы объекта button

Для объекта button определен всего один метод, не имеющий параметров, - click:

click()

Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке. 
 

Пример сценария

В качестве примера приведен сценарий, выполняющийо обработку щелчка по кнопке с надписью Click me, расположенной в форме. Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button.

Листинг 1

Button demo

Click Button

onClick="btnClick();">

Переключатель checkbox

Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора с параметром TYPE, равным строке "checkbox":

NAME="Имя_переключателя_checkbox"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.

С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка "on". Сценарий JavaScript также может получить значение параметра VALUE.

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

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





Свойства объекта checkbox

Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора :

Свойство

Описание

name

Значение параметра NAME

checked

Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя

value

Значение параметра VALUE

defaultChecked

Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства

 

Методы объекта checkbox

Для объекта checkbox определен один метод click, не имеющий параметров:

click()

При вызове этого метода переключатель устанавливается во включенное состояние.

 

Переключатель radio

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

NAME=" Имя_переключателя_radio"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

Свойства объекта radio

Объект radio имеет следующие свойства:

Свойство

Описание

name

Значение параметра NAME

checked

Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя

length

Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME

value

Значение параметра VALUE

defaultChecked

Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства

 

Методы объекта radio

Для объекта radio определен метод click, не имеющий параметров:

click()

При вызове этого метода переключатель выбирается для работы.

Пример формы с переключателями

В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.

Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.

Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка.

Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.

Листинг 2

Переключатели checkbox и radio

Page elements:

onClick="if(this.checked) {bTitle=true;}"> Show title


onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines


onClick="if(this.checked) {bTable=true;}"> Table view

Text color:

onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Red


onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Green


onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Blue

onClick="btnClick(this.form);">

onClick="resetRCHBox();">

 

Список select

С помощью оператора вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора приведен ниже:

SIZE="Размер_списка"

MULTIPLE

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события">

Текст

Текст

...

Текст

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

Параметр SIZE задает размер видимой части списка в строках.

Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.

Для определения элементов списка предназначен оператор . Оператор может иметь два параметра - VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора следует текст, отображаемый в строках списка.

Свойства объекта select

Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

Свойство

Описание

length

Количество элементов (строк) в списке

name

Значение параметра NAME

options

Массив объектов options, соответствующих элементам массива, заданным при помощи оператора

selectedIndex

Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов)

 

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

Свойство

Описание

defaultSelected

Отражает состояние параметра SELECTED

index

Порядковый номер (индекс) элемента списка

length

Количество элементов в выбранном объекте

name

Значение параметра NAME

selected

С помощью свойства selected сценарий JavaScript может выбрать данный элемент

selectedIndex

Номер выбранного элемента

text

Текст, указанный после оператора

value

Значение параметра VALUE

 

Методы объекта select

Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.

Обработчики событий, связанные с объектом select

Как видно из формата оператора , рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

Пример сценария, работающего со списком

При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. В данном примере рассматривается два списка. Первый из них предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно). Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка.

Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.

Листинг 3

Работа со списками

Работа со списками


Выберите цвет:

Черный SELECTED> Черный

Белый

Красный

Оранжевый

Желтый

Зеленый

Голубой

Синий

Фиолетовый


Выберите размер:

Стандартный SELECTED> Стандартный

Большой

Средний

Маленький

Очень маленький

onClick="Complete();">



Однострочное поле text

Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор с параметром TYPE, равным значению "text":

NAME="Имя_поля_text"

VALUE="Значение"

SIZE=Размер_поля

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события"

onSelect="Обработчик_события">

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Свойства объекта text

Сценариям JavaScript доступны три свойства поля редактирования как объекта класса text:

Свойство

Описание

defaultValue

Отражает состояние параметра VALUE

name

Значение параметра NAME

value

Текущее содержимое поля редактирования

 

Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

Методы объекта text

Для объекта text определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

Обработчики событий объекта text

Обработчики событий вызываются в следующих случаях:

Обработчик

Когда вызывается

onFocus

Вызывается, когда поле редактирования получает фокус ввода

onBlur

Вызывается, когда поле редактирования теряет фокус ввода

onChange

При изменении содержимого поля редактирования

onSelect

При выделении содержимого поля редактирования

 

Пример (проверка анкеты)

Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.

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

Листинг 4

Работа с текстовыми полями

Заполните анкету


Фамилия:

NAME="family"

onChange="this.value=this.value.toUpperCase()"

SIZE="20" >


Имя:

NAME="Name" SIZE="20">


Телефон:

NAME="PhoneNumber" SIZE="10">


Возраст:

NAME="Age" VALUE="18" SIZE="4"

onChange="this.value=CheckAge(this.value)"

onFocus="this.select()"

>

onClick="Complete();">


Многострочное поле textarea

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

NAME="Имя_поля_textarea"

ROWS="Количество_строк"

COLS="Количество_столбцов"

WRAP="Режим_свертки_текста"

onBlur="Обработчик_события"

onChange="Обработчик_события"

onFocus="Обработчик_события"

onSelect="Обработчик_события">

. . .

Отображаемый текст

. . .

Здесь с помощью параметра NAME вы должны указать имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля.

Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).

Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:

Значение

Способ свертки текста

off

Свертка выключена, строки отображаются так, как вводятся

virtual

Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся

physical

При свертке в передаваемый текст записываются символы новой строки

 

Методы объекта textarea

Для объекта textarea определены такие же методы, что и для объекта text. Это методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого многострочного поля редактирования.

Обработчики событий объекта textarea

Обработчики событий вызываются в следующих случаях:

Обработчик

Когда вызывается

onFocus

Вызывается, когда поле редактирования получает фокус ввода

onBlur

Вызывается, когда поле редактирования теряет фокус ввода

onChange

При изменении содержимого поля редактирования

onSelect

При выделении содержимого поля редактирования

 

Пример сценария, заполняющего поле textarea

Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.

Например, пусть нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы. Если включить переключатель "Благодарность", сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту останется добавить только подпись.

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

Листинг 5

Работа с многострочным текстовым полем

Пришлите ваш отзыв



onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность



onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы


ROWS="8" COLS="40" WRAP="physical">



Однострочное поле password

Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:

NAME="Имя_поля_text"

VALUE="Значение"

SIZE=Размер_поля>

Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.

Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Поле password похоже на поле text, рассмотренное ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.

Свойства объекта password

Сценариям JavaScript доступны три свойства поля редактирования password:

Свойство

Описание

defaultValue

Отражает состояние параметра VALUE

name

Значение параметра NAME

value

Текущее содержимое поля редактирования

 

Так же, как и для поля text, сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Изменяя содержимое свойства value, сценарий может изменить содержимое поля редактирования типа password.

Методы объекта password

Для объекта password определены методы focus, blur и select, не имеющие параметров. С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

Пример (ввод идентификатора и пароля)

В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей.

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

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

Листинг 6

Ввод и проверка пароля

Регистрация


Идентификатор:

NAME="id" onChange="this.value=this.value.toUpperCase()"

SIZE="20" >


Пароль:

NAME="pwd" SIZE="20">


Проверка пароля:

NAME="pwd1" SIZE="20">

onClick="Complete();">



Вопросы для самоконтроля:

Какие свойства имеет объект Form?

Какие стандартные компоненты используются при работе с объектом формы?

Перечислите основные методы применимые к формам?

Перечислите Методы объекта textarea?

Что такое обработчик событий?

Перечислите свойства объекта password?



Домашнее задание:

Лекционный материал;

В. Холмогоров Основы WEB мастерства. Учебный курс –Спб.:Питер, 2010 стр. 149-150


ПРАКТИЧЕСКАЯ РАБОТА


Тема «Использование Java Script в создании страниц.»

Цель:

научиться создавать динамические страницы с использованием расчетных форм в Java Script.

Научиться объявлять переменные и оперировать ими в приложении.

Формируемые компетенции:

ОК 2. Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их

эффективность и качество.

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

ОК 8. Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно

планировать повышение квалификации.

ОК 9. Ориентироваться в условиях частой смены технологий

в профессиональной деятельности.

ПК 1.2. Осуществлять выбор технологии, инструментальных средств и средств вычислительной техники при организации процесса разработки и исследования объектов профессиональной деятельности.

ПК 2.3. Обеспечивать сбор данных для анализа использования и функционирования программно-технических средств компьютерных сетей.


Программное обеспечение:

Операционная система, текстовый редактор, Браузер.

Список литературы: Максимов Н.В., Партыка Т.Л., Архитектура ЭВМ и вычислительных систем: Учебник. – М.: ФОРУМ: ИНФРА-М, 2009.


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

Объявление констант

Константа — это переменная, которая никогда не меняется. Как правило, их называют

большими буквами, через подчёркивание.

Например:

var COLOR_BLUE = "#00F";

var COLOR_RED = "#0F0";

var COLOR_GREEN = "#F00";

var COLOR_ORANGE = "#FF7F00";

alert(COLOR_RED); // #0F0

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

Зачем нужны константы? Почему бы просто не использовать "#F00" или "#0F0"?

1. Во-первых, константа — это понятное имя, в отличие от строки "#FF7F00".

2. Во-вторых, опечатка в строке может быть не замечена, а в имени константы её упустить невозможно — будет ошибка при выполнении.

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

На имя переменной наложены два ограничения:

1. Имя может состоять из: букв, цифр, символов $ и _

2. Первый символ не должен быть цифрой.


!!! Регистр букв имеет значение

Переменные apple и AppLE - две разные переменные.

Существует список зарезервированных слов, которые нельзя использовать при именовании переменных, так как они используются самим языком, например: var, class, return, implements и др.

Некоторые слова, например, class, не используются в современном JavaScript, но они заняты на будущее. Некоторые браузеры позволяют их использовать, но это может привести к ошибкам

Типы данных в JavaScript

Число number:

var n = 123;

n = 12.345;

Строка string:

var str = "Мама мыла раму";

str = 'Одинарные кавычки тоже подойдут';

1. В JavaScript одинарные и двойные кавычки равноправны. Можно

использовать или те или другие.

2. Тип символ не существует, есть только строка

3. В некоторых языках программирования есть специальный тип данных для одного символа. Например, в языке С это char. В JavaScript есть только тип «строка» string. Что, надо сказать, вполне удобно.

Булевый (логический) тип boolean. У него всего два значения - true (истина) и false (ложь).

Как правило, такой тип используется для хранения значения типа да/нет, например:


var checked = true; // поле формы помечено галочкой

checked = false; // поле формы не содержит галочки

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

null — специальное значение. Оно имеет смысл «ничего». Значение null не относится ни к одному из типов выше, а образует свой отдельный тип, состоящий из единственного

значения null:

var age = null;


1. В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем», как в некоторых других языках. Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».

2. В частности, код выше говорит о том, что возраст age неизвестен.

3. undefined — специальное значение, которое, как и null, образует свой

собственный тип. Оно имеет смысл «значение не присвоено».

Если переменная объявлена, но в неё ничего не записано, то ее значение как раз и есть undefined:

var u;

alert(u); // выведет "undefined"

Можно присвоить undefined и в явном виде, хотя это делается редко:

var x = 123;

x = undefined;

В явном виде undefined обычно не присваивают, так как это противоречит его смыслу. Для записи в переменную «пустого значения» используется null.


Объекты object

Первые 5 типов называют «примитивными».

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

ИТОГО: Есть 5 «примитивных» типов: number, string, boolean, null, undefined и объекты object.


Пример объявления переменных и их использования:

var pi=3.14;

var name="John Doe";

var answer='Yes I am!';

document.write(pi + "
");

document.write(name + "
");

document.write(answer + "
");

Здесь в скрипте
- это тег HTML, который переводит каретку на новую строку (переход на новую строку)


Задание №1: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример1.html и открыть (запустить) его в любом браузере.


Пример

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

Try it

Текст, помеченный меткой demo

//объявляем функцию, которую будет вызывать кнопка по методу onclick

function myFunction()

{

//объявляем переменную строковую

var carname="Volvo";

/*

document.getElementById - метод объекта document. Он возвращает ссылку на узел документа,

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

*/

//метод getElementById, получающий данные из тега по метке demo

// Свойство innerHTML устанавливает или получает всю разметку

// и содержание внутри данного элемента.

document.getElementById("demo").innerHTML=carname;

}

Задание №2: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример 2.html и открыть (запустить) его в любом браузере.


Пример на Undefined and Null:

var person;

var car="Volvo";

// document.write- метод, выводящий на страницу переданные ему аргументы

document.write(person + "
");

document.write(car + "
");

var car=null

document.write(car + "
");


Задание №3: Создать приведенный пример документа в любом редакторе. Удобнее использовать редактор Visual Studio или любой другой, поддерживающий языки разметки. Сохранить файл с названием Пример 3.html и открыть (запустить) его в любом браузере.


Реализация ( как вы видите его использование)

Данный интерактивный урок можно использовать как в сфере общего образования на уроках информатики при изучении web программирования, так и конкретно в МДК 02. ПМ 04.02 "Установка и настройка программных средств для доступа в сеть Интернет" при изучении раздела №4 Web-программирование.

Оценка

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

Общая информация

Номер материала: ДВ-347228


Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 60% скидки (только до конца зимы) при обучении на курсах профессиональной переподготовки (124 курса на выбор).

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG

Похожие материалы

Только до конца зимы! Скидка 60% для педагогов на ДИПЛОМЫ от Столичного учебного центра!

Курсы профессиональной переподготовки и повышения квалификации от 1 400 руб.
Для выбора курса воспользуйтесь удобным поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВЫ).

Московские документы для аттестации: KURSY.ORG


Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «1С: Предприятие 7.7»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»