Изучение элементов языка Java script
Теги для создания списков и таблиц в HTML, их основные атрибуты. Элементы языка и использование языка сценариев JavaScript. Скрипт, выводящий бегущую строку в файл с именем line.js, его способы изменения на главной странице. Программа "Электронные часы".
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | методичка |
| Язык | русский |
| Дата добавления | 08.08.2014 |
| Размер файла | 59,0 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
Министерство образования Российской Федерации
Донской государственный технический университет
Кафедра "Робототехника и мехатроника"
Методические указания к выполнению лабораторной работы N4
по дисциплине “Информационные технологии”
“Изучение элементов языка Java script”
г. Ростов-на-Дону
2007 г.
Содержание
- 1 Цель работы
- 2 Теоретическая часть
- 2.1 Элементы языка JavaScript
- 2.2 Использование языка сценариев JavaScript
- 3 Практическая часть
- 3.1 Задание на выполнение лабораторной работы
- 3.2 Содержание отчета
- 4 Контрольные вопросы
- Список использованных источников
1. Цель работы
Изучить теги для создания списков и таблиц в HTML и их основные атрибуты. Получить практические навыки создания списков и таблиц в HTML-документах.
html javascript скрипт программа
2. Теоретическая часть
2.1 Элементы языка JavaScript
JavaScript - это объектно-ориентированный язык, который хотя и имеет похожее название, не имеет непосредственного отношения к языку Java. Исходные тексты программ на языке JavaScript, как это уже отмечалось в первой части книги, включаются непосредственно в HTML-документы и интерпретируются браузером на компьютере клиента.
Существуют два способа включения программ на языке JavaScript, называемых часто скриптами, в гипертекстовый документ. При первом из них текст программы размещается непосредственно в самом HTML-файле с помощью тега script:
<script language="JavaScript">
<!-
... здесь располагается код программы ...
//->
</script>
Второй способ вполне аналогичен включению в гипертекстовые документы ссылок на аплеты:
<script src="file.js">
</script>
При этом предполагается, что текст программы размещен в отдельном файле с именем file.js.
Подобно другим языкам программирования JavaScript позволяет использовать переменные, операторы, классы и методы. Основным его достоинством, однако, явлется наличие в нем классов объектов, задающих структуру HTML-страницы, загруженной браузером, и возможность манипуляций с этими объектами. Именно об этих объектах, в основном, и пойдет речь далее.
Когда пользователь сети Интернет открывает гипертекстовый документ с помощью браузера, происходит следующее:
· текст страницы размещается в памяти компьютера;
· он анализируется и "компилируется";
· отдельные блоки документа размещаются во временной базе данных в соответствии с объектной моделью браузера;
· к этим данным предоставляется доступ различным программам, в частности, рендеру, который и изображает страницу в окне браузера.
Объектами в указанной модели являются элементы рабочей области браузера и теги языка HTML, которые провязаны в иерархическую структуру, называемую объектной моделью браузера:
· window - корневой объект;
o self, window, parent, top - объекты окон;
o navigator - объект, предоставляющий доступ к характеристикам браузера;
§ plugins[] - массив объектов Plugin;
§ mimeTypes[] - массив объектов MimeType;
o frames[] - массив объектов фреймовой структуры;
o location - объект, содержащий текущий URL;
o history - объект, дающий доступ к истории посещенных ссылок;
o document - объект, содержащий документ целиком;
§ forms[] - массив форм;
§ elements[] - массив объектов форм HTML (Button, Checkbox, ...)
§ anchors[] - массив якорей;
§ links[] - массив ссылок;
§ images[] - массив изображений;
§ applets[] - массив аплетов;
§ embeds[] - массив встроенных объектов;
§ scripts[] - массив блоков <script></script>
§ stylesheets[] - массив объектов с индивидуальными стилями.
Используя язык JavaScript, можно манипулировать как характеристиками браузера, так и визуализируемым в его окне документом. При этом программы на языке JavaScript в значительной степени управляются событиями, примерами которых являются нажатие кнопки или просто перемещение мыши. Каждое событие имеет свой собственный обработчик, которому соответствует определенный объект языка (таблица 1).
Пример
Для того чтобы пользователь при переходе по ссылке из нашего документа на сайт www.site.com увидел некоторое сообщение, разместим в документе следующие строки.
<a href="http://www.site.com/"
onClick="window.alert('Goodbye!')">интересный сайт</a>
Таблица 1 - События и их обработчики
|
Событие |
Объекты |
Момент возникновения |
Обработчик |
|
|
click |
button, radio button, checkboxes, submit button, reset button, links |
Пользователь "кликает" элемент формы или ссылку |
onClick |
|
|
load |
body |
Страница загружается в браузер |
onLoad |
|
|
mouseover |
links |
Пользователь проводит мышь над элементом |
onMouseover |
|
|
mouseout |
links |
Пользователь убирает мышь с элемента.Обычно используется в паре с mouseover |
onMouseout |
|
|
unload |
body |
Пользователь переходит к другой странице |
onUnload |
2.2 Использование языка сценариев JavaScript
В сети Интернет размещено огромное количество сценариев обработки HTML-документов, как очень простых, так и достаточно сложных. Среди них значительную часть составляют программы, написанные на языке JavaScript. Цель данного параграфа - рассмотреть некоторых из них и научить вас использовать их на своих HTML-страничках.
Программы на языке программирования JavaScript часто называют сценариями или скриптами. По сути они представляют собой набор инструкций по управлению браузером. Код программы размещается непосредственно в HTML-документе или в виде отдельного файла.
Скрипты могут находится в любом месте HTML-документа. Однако между строчками кода JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего скрипт размещают внутри раздела <HEAD> документа. Сама JavaScript-программа размещается между тегами <SCRIPT> ... </SCRIPT>. Встретив тег <SCRIPT>, браузер построчно анализирует содержимое документа до тех пор, пока не будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта на наличие ошибок и компиляция программы в формат, пригодный для использования в данном браузере. Не все браузеры понимают код JavaScript, поэтому полезно заключать весь код сценария в комментарии (<!- и //->)
Для размещения текста программы внутри HTML-документа используют конструкцию
<SCRIPT LANGUAGE="JavaScript">
<!-
...
здесь располагается код программы
...
//->
</SCRIPT>
Программы на языке JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих расширение .js. Для подключения такого сценария используется параметр SRC тега <SCRIPT>, содержащий абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть и относительным, задавая, например, скрипт, расположенный в том же каталоге, что и текущий HTML-документ:
<SCRIPT SCR="myScript.js">
</SCRIPT>
Кроме этого, для работы программы в "теле" HTML-документа могут содержаться конструкции кода, позволяющие начать выполнение программы. Дело в том, что мало разместить в правильном месте код сценария, даже правильно написанный, необходимо еще дать команду браузеру для запуска программы.
Пример
Рассмотрим HTML-файл со сценарием на языке JavaScript, который отображает текущее время.
<HTML>
<HEAD>
<TITLE>Электронные часы</TITLE>
<!-
<SCRIPT LANGUAGE="JavaScript">
function clock_form() {
day=new Date()
clock_f=day.getHours()+":"+
day.getMinutes()+":"+
day.getSeconds()
document.form.f_clock.value=clock_f
id=setTimeout("clock_form()",100)
}
//->
</SCRIPT>
</HEAD>
<BODY onLoad="clock_form()">
<FORM NAME="form">
Московское время:
<INPUT NAME="f_clock" SIZE="8">
</FORM>
</BODY>
</HTML>
В этом примере для запуска сценария используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов используется элемент <FORM>...</FORM>, размером в 8 символов.
Пример
Следующий скрипт создает "бегущую строку" в окне браузера. Для изменения скорости вывода информации используется переменная speed, текст строки задается в переменной line.
<HTML>
<HEAD>
<TITLE>Бегущая строка</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-
var line="Центр Компьютерных Технологий";
var speed=200;
var i=0;
function m_line() {
if(i++<line.length) {
document.form.ctc.value=line.substring(0,i);
}
else{
document.form.ctc.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
//->
</SCRIPT>
<BODY onload="m_line()">
<CENTER>
<FORM NAME="form">
<INPUT TYPE="text" SIZE="30" NAME="ctc">
</FORM>
</CENTER>
</BODY>
</HTML>
3. Практическая часть
3.1 Задание на выполнение лабораторной работы
1) Поместите программу "Электронные часы" на вашу домашнюю страницу.
2) Поместите скрипт, выводящий бегущую строку в файл с именем line.js. Подключите скрипт в вашей странице. Измените скрипт так, чтобы выводилась фраза "Добро пожаловать на мою домашнюю страничку!".
3.2 Содержание отчета
1. Название и цель лабораторной работы.
2. Объектная модель браузера, события и обработчики.
3. HTML-код результатов выполнения задания.
4. Выводы о проделанной работе.
4. Контрольные вопросы
1. Что такое язык JavaScript? Укажите его назначение и особенности.
2. Назовите основные элементы объектной модели браузера.
3. Назовите основные события и обработчики программ на языке JavaScript.
4. Как можно включить программу на языке JavaScript в HTML-документ? Укажите место в HTML-документе, где должна располагаться программа.
5. Как пользователю можно передавать данные программе на языке JavaScript? Для пояснения приведите пример.
Список использованных источников
1. С.В. Андреев, Н.А. Роганова. Практическая информатика. Ч.1 - М.: МГИУ, 2001.
2. Е.А. Роганов, Н.А. Роганова. Практическая информатика. Ч.2 - М.: МГИУ, 2002.
Размещено на Allbest.ru
...Подобные документы
Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Создание основы интернет-сайта - набора таблиц, которые расположены в нужном порядке. Использованные теги и их атрибуты. Кодовое оформление сайта, наложение второго слоя. Стильный текст в HTML. Использование скриптов для большей информативности сайта.
методичка [813,6 K], добавлен 08.11.2013Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Java Script как язык управления сценарием отображения документа. Отличие world wide web от остальных инструментов для работы с Internet. Использование каскадных таблиц стилей в рамках разработки спецификации HTML. Элементы программы Netscape Navigator.
контрольная работа [1,1 M], добавлен 02.12.2009Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).
лабораторная работа [31,0 K], добавлен 28.10.2010Изучение создания скриптов на JavaScript. Разработка программы выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки. Применение контейнера SCRIPT для размещение JavaScript-кода. Получение типа программы просмотра HTML-страниц.
контрольная работа [21,1 K], добавлен 15.02.2010История создания языка Java. Основные принципы объектно-ориентированного программирования. Структура, особенности синтаксиса и примеры прикладных возможностей использования языка Java, его преимущества. Перспективы работы программистом на языке Java.
курсовая работа [795,9 K], добавлен 14.12.2012Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта.
контрольная работа [2,8 M], добавлен 02.12.2009Типизация данных в JavaScript. Правила объявления локальных и глобальных переменных. Объявление и использование функций. Открытие и закрытие файла, запись в него и чтение из него. Создание теста с использованием средств языка программирования PHP скрипт.
контрольная работа [73,8 K], добавлен 25.01.2016Описание Visual Basic Scripting Edition как скриптового языка программирования, интерпретируемого компонентом Windows Script Host. Правила работы языка и применение VBS-сценариев для обработки данных, управления системой, работы с учетными записями.
доклад [31,3 K], добавлен 11.05.2012Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009История происхождения языков Веб-программирования. Исторические факты появления самого первого из них. Сущность современного, актуального в настоящее время, языка HTML, история появления языка PHP, применение языка JavaScript и его использование.
реферат [23,1 K], добавлен 23.02.2013Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Особенности работы с графическими изображениями Java Script. Способы динамического управления слоями. Рассмотрение примеров использования операторов цикла. Характеристика свойств объекта form: encoding, elements, checkbox. Возможности документов HTML.
курсовая работа [167,7 K], добавлен 09.02.2013Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Особенности создания сайта "Ремонт и эксплуатация автомобилей ВАЗ" содержащего необходимую информацию поэтапной разборки запчастей, а также устранение неисправностей, написанного с использованием языка гипертекстовой разметки HTML и языка JavaScript.
дипломная работа [10,5 M], добавлен 04.06.2019Обоснование выбора средств разработки сайта. Программа Microsoft Office FrontPage 2003, характеристика и принцип работы. Разработка структуры сайта, его реализация и создание элементов дизайна. Наиболее употребляемые теги языка HTML. Листинг HTML-кода.
курсовая работа [1,7 M], добавлен 08.03.2011Архитектура Java и Java RMI, их основные свойства, базовая система и элементы. Безопасность и виртуальная Java-машина. Интерфейс Java API. Пример использования приложения RMI. Работа с программой "Calculator". Универсальность, портативность платформ.
курсовая работа [208,6 K], добавлен 03.12.2013Структура сайта, выполненного при помощи HTML-кода и CSS-таблиц. Создание базы данных. Описание главной страницы. Форма для оформления заказа. Скрипт, выводящий дату и день недели. Проектирование CSS-документа (файла) для оформления страниц сайта.
курсовая работа [570,7 K], добавлен 30.12.2013
