Лабораторные работы по программированию в сети Интернет

Список лабораторных работ:

Лабораторная работа № 1. Работа с. Размещение JavaScript на HTML странице

Лабораторная работа № 2. Документ HTML

Лабораторная работа № 3. Создание фреймов

Лабораторная работа № 4. Окна и динамическое управление документами

Лабораторная работа № 5. Управление окнами

Лабораторная работа № 6. Строка состояния и таймеры

Лабораторная работа № 7. Предопределенные объекты

Лабораторная работа № 8. Создание форм

Лабораторная работа № 9. Объекты Image

Лабораторная работа № 10. Использование слоев

Лабораторная работа № 11. Работа со слоями

Лабораторная работа № 12. Модель событий в JavaScript

Лабораторная работа № 13. Drag & Drop

Лабораторная работа № 14. Использование функций внутри формы

Лабораторная работа № 15. Передача информации в функцию

Лабораторная работа № 16. Условный оператор

Лабораторная работа № 17. Случайный выбор фраз и рисунков

Лабораторная работа № 18. Работа с циклами

Лабораторная работа № 19. Работа с массивами

Лабораторная работа № 20. Создание слайд-шоу

Лабораторная работа № 21. Создание анимированных веб-страниц

Лабораторная работа № 22. Подтверждение ввода

Лабораторная работа № 23. Язык VRML. Построение примитивов и управление положением объектов в VRML

Лабораторная работа № 24. Текст, стиль шрифта. Наложение текстур

Лабораторная работа № 25. Объекты, строящиеся по набору вершин

Лабораторная работа № 26. Экструзия, рельеф по набору точек

Лабораторная работа № 27. Интерполяторы

Пример лабораторной работы №1.

Тема: Работа с JavaScript. Размещение JavaScript на HTML странице

Цель занятия: Ознакомить с основами языка JavaScript

Задания:

1. Ознакомьтесь с теоретическими аспектами темы.
2. Создайте простую веб-страницу с использованием JavaScript согласно методическим указаниям.
3. Создайте веб-страницу с формой и кнопкой на основе JavaScript согласно методическим указаниям.
4. Напишите скрипт, печатающий текст «Добро пожаловать на мою страницу! Это JavaScript» три раза подряд. Инструкция по выполнению задания представлена в методических указаниях.
5. Создайте веб-страницу с использованием функции calculation().

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1

JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы.

Для запуска скриптов, написанных на языке JavaScript, нужен браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Код скрипта JavaScript размещется непосредственно на HTML-странице. Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. Инструкцияdocument.write() - одна из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ).

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событиеMouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие.

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

Методические рекомендации к выполнению задания 2

1. Запустите блокнот
2. Введите текст

<html>

<body>

<br>

Это обычный HTML документ.

<br>

<scriptlanguage="JavaScript">

    document.write("Аэто JavaScript!")

</script>

<br>

Вновь документ HTML.

</body>

</html>

3. Сохраните документ в формате html
4. Запустите страницу в окне браузера.

Если браузер не поддерживает JavaScript, то он проигнорирует тег <script>. В этом случае измените исходный текст:

<html>

<body>

<br>

Это обычный HTML документ.

<br>

<script language="JavaScript">

<!-- hide from old browsers

    document.write("Аэто JavaScript!")

// -->

</script><br>

Вновь документ HTML.

</body>

</html>

В этом случае использован тег комментария из HTML - <!-- -->. В результате новый вариант нашего исходного кода будет выглядеть как:

Это обычный HTML документ.

Вновь документ HTML.

Методические рекомендации к выполнению задания 3

1. Создайте новый документ html.
2. Вставьте следующий код

<form>

<input type="button" value="Click me" onClick = "alert('Yo')">

</form>

3. Просмотрите результат.

В данном примереНачалоформы

 создается некая форма с кнопкой. Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript.

Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.

Еще одна особенность данного примера: в команде document.write() мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому мы вынуждены использовать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сначала двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo")'.

Методические рекомендации к выполнению задания 4

1. Напишите скрипт, печатающий текст «Добро пожаловать на мою страницу! Это JavaScript» три раза подряд. Для начала рассмотрим простой подход:

<html>

<script language="JavaScript">

<!-- hide

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");

// -->

</script>

</html>

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

<html>

<scriptlanguage="JavaScript">

<!-- hide

functionmyFunction() {

document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");}

myFunction();

myFunction();

myFunction();

// -->

</script>

</html>

В этом скрипте мы определили некую функцию, состоящую из следующих строк:

function myFunction() {

  document.write("Добро пожаловать на мою страницу!<br>");

document.write("Это JavaScript!<br>");}

Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, в нашем примере есть три вызова этой функции В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.

Методические рекомендации к выполнению задания 5

Создайте новую веб-страничку:

<html>

<head>

<script language="JavaScript">

<!-- hide

function calculation() {

  var x= 12;

  var y= 5;

  var result= x + y;

  alert(result);}

// -->

</script>

</head>

<body>

<form>

<input type="button" value="Calculate" onClick="calculation()">

</form>

</body>

</html>

Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

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

1. Для чего предназначен язык JavaScript?
2. Что называют инструкциями?
3. В чем отличие процедур от событий?

Лабораторное занятие № 1

Тема: Работа с JavaScript. Размещение JavaScript на HTML странице

Цель занятия: Ознакомить с основами языка JavaScript

Задания:

1. Ознакомьтесь с теоретическими аспектами темы.

2. Создайте простую веб-страницу с использованием JavaScript согласно методическим указаниям.

3. Создайте веб-страницу с формой и кнопкой на основе JavaScript согласно методическим указаниям.

4. Напишите скрипт, печатающий текст «Добро пожаловать на мою страницу! Это JavaScript» три раза подряд. Инструкция по выполнению задания представлена в методических указаниях.

5. Создайте веб-страницу с использованием функции calculation().

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1

JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы.

Для запуска скриптов, написанных на языке JavaScript, нужен браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Код скрипта JavaScript размещется непосредственно на HTML-странице. Все, что стоит между тэгами и , интерпретируется как код на языке JavaScript. Инструкцияdocument.write() - одна из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ).

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие.

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

Методические рекомендации к выполнению задания 2

1. Запустите блокнот

2. Введите текст

Это обычный HTML документ.

br

scriptlanguage="JavaScript"

document.write("Аэто JavaScript!")

Вновь документ HTML.