Лабораторные работы по Javascript

Содержание

ООП в JavaScript. Лабораторная работа 1
Основные понятия и определения: объект, метод, свойства, события

Язык программирования JavaScript был разработан Бренданом Эйком (Brendan Eich) в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0. В дальнейшем к развитию этого языка подключилась корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. Версия Microsoft получила название JScipt, поскольку JavaScript является зарегистрированной маркой фирмы Netscape.

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

или помещают весь код JavaScript в отдельный файл с расширением js и связываются с ним с помощью тега Script:

В результате при просмотре данной страницы в браузере появится текст: «Введите свое имя и нажмите кнопку».

Основные понятия:

OBJECT (объект) — это то, с чем производится действие, событие. Это может быть документ, открываемый в окне браузера или само окно браузера, или какая-то часть документа, теги. Объект должен иметь уникальное имя (ID), чтобы к нему можно было обратиться.

В нашем случае объектом является документ HTML и к нему можно просто обратиться по имени: document .

Каждый объект обладает своими методами.

METHOD (метод объекта) — это действия, которые можно выполнять над объектом такого типа, или которые сам объект может выполнять.

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

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

Каждый объект обладает своими свойствами.

PROPERTY (свойство) — каждый объект имеет свои свойства. Один и тот же объект может обладать многими свойствами. Часто эти свойства необходимо изменить, при возникновении некоторого события.

Для изменения свойства объекта необходимо соблюдать следующий синтаксис:

Объект свойство объекта = «новое значение свойства «

Например, для изменения фонового цвета документа HTML (имя данного свойства bgColor ) следует написать следующее:

И при просмотре в окне браузера фоновый цвет HTML документа будет красным.

Обратите внимание на то, что значение свойства red пишется в кавычках (одинарных или двойных), т.к. значение свойства относится к типу данных строки символов.

Задание №1

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, задающий свойство документа фон (цвета можно выбрать здесь)

Разумеется, нас будет интересовать возможность изменения свойства при возникновении какого-либо события.

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

Стандартные события в HTML

имя события происходит
onclick при щелчке кнопки мыши на элементе
ondblclick при двойном щелчке кнопки мыши на элементе
onmousedown при нажатии кнопки мыши на элементе
onmouseup при отпускании кнопки мыши на элементе
onmouseover при попадании курсора мыши на элемент
onmousemove при движении курсора мыши по элементу
onmouseout при попадании курсора мыши за пределы элемента
onkeypress при нажатии и отпускании клавиши на элементе
onkeydown при нажатии клавиши на элементе
onkeyup при отпускании клавиши на элементе

Здесь следует пояснить, что события (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код. Они входят в структуру документа НТМL и не требуют тегов . Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onmouseover (навести мышь).

Пример №2

. пример смотрите здесь — в другом окне

Код выглядит следующим образом:

Наведи мышь на этот текст .

Как уже говорилось для написания этого кода не требуются теги . Событие встраивается в HTML код, т.е является описанием, атрибутом тега (в данном случае тега

) при выполнении данного события — наведении мышкой на текст данного абзаца — изменяется свойство объекта — фон документа HTML.

И здесь есть еще одна важная особенность: document.bgColor =’red’ нужно также записать в кавычках — одинарных или двойных. Вы можете использовать любой тип кавычек. Однако если Вы вынуждены как в данном случае ставить кавычки дважды, то можно использовать только вложенные кавычки. Не имеет значения, в каком порядке Вы использовали кавычки — сначала двойные, а затем одинарные или наоборот.

onmouseover=»document.bgColor =’red’ » или
onmouseover=’document.bgColor =»red» ‘

onmouseover=»document.bgColor =»red» »
onmouseover=’document.bgColor =’red’ ‘
onmouseover=»document.bgColor =’red» ‘

Задание №2

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Напишите скрипт, изменяющий свойство документа — фон при наведении курсором на какой-то текст (цвета можно выбрать здесь)

А если мы хотим изменить не свойство всего документа, а только свойство какого-то абзаца? Как в данном случае мы можем изменить свойство данного объекта? Есть несколько способов.

Пример №3

Этот абзац меняет цвет текста при наведении на него мышкой с синего на красный!

Код данного примера (ВАЖНО! Код должен быть записан в одну строчку)

Этот абзац меняет цвет при наведении на него мышкой с синего на красный!

  1. style=»color:blue» определяется стиль текста в данном абзаце
  2. onmouseover= событие которое может произойти с этим абзацем, в кавычках надо указать что при этом делать
  3. this.style.color=’red’ изменить стиль абзаца: цвет текста на красный:
    • слово this используется для доступа к элементу (объекту), вызвавшему событие (к данному абзацу),
    • через точку указывается его свойство style , дающее доступ к стилям,
    • еще через точку указывается конкретное свойство , значение которого мы хотим изменить ( color — цвет текста)
    • затем идет знак присвоить = ,
    • и затем значение свойства «цвет текста» — красный ( ‘red’ ).

Рассмотрим еще один пример. Изменение цвета фона текста:

Пример №4

Цвет фона текста меняется на красный при наведении мышкой на него!

Цвет фона текста меняется на красный при наведении мышкой на него!

  1. style=»background-color:blue» определяется стиль текста в данном абзаце (цвет фона)
  2. onmouseover= (навести мышь) и onmouseout= (увести мышь) события которые могут произойти с этим абзацем, в кавычках надо указать что при этом делать
  3. this.style.backgroundColor=’red» изменить стиль абзаца: цвет фона на красный.

Задание №3

1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict
2) Создайте три абзаца
3) Напишите скрипт, изменяющий цвет текста первого абзаца при наведении мышкой
4) Напишите скрипт, изменяющий цвет фона текста второго абзаца при наведении мышкой
5) Напишите скрипт, изменяющий цвет фона текста третьего абзаца только при наведении мышкой

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

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

Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.

Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.

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

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

Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).

В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).

Итак, кратко по истории JavaScript:

  • Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
  • К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
  • В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название JavaScript.

Лабораторная работа №3. Встроенные объекты JavaScript

Цель: изучить встроенные объекты JavaScript Array, String, Date, их свойства и методы, научиться их правильно применять в своих скриптах.

Теория

Объект Array (Массив)

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

Можно создать массивы тремя разными способами.

spec = new Array();

var spec = new Array(«ИСиТ»,»ПОИТ»,»ПОИБМС»,»ДЭВИ»);

var spec = [(«ИСиТ»,»ПОИТ»,»ПОИБМС»,»ДЭВИ»)];

Нумерация индексов в массивах начинается не с 1, а с 0. С помощью свойства length можно узнать количество элементов в массиве.

concat() объединяет два и более массива в один;

рор() – удаляет последний элемент массива и возвращает его значение;

push(значение|объект) – добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива;

shift() – удаляет первый элемент массива и возвращает его значение;

sliсe(индекс1 [, индекс2]) – создает массив из элементов исходного массива с индексами указанного диапазона;

sort([функция_сортировки]) – сортирует (упорядочивает) элементы массива с помощью функции сравнения.

Объект String (Строка)

Объект String (строковый объект) используется для хранения и обработки текстовой информации.

mystring = new String («Привет!») – первый способ;

mystring = «Привет!» – второй способ.

С помощью свойства length можно узнать длину строки:

С помощью метода toUpperCase() можно перевести все символы текста в верхний регистр, а с помощью toLowerCase() – в нижний.

Метод concat() позволяет объединить две и более строки и вывести результат на страницу:

Метод replace() позволяет заменить одно произвольное слово в строке на другое:

Объект Date (Дата)

Объект Date позволяет производить различные операции с датой и временем. Некоторые методы объекта представлены в таблице.

Метод Описание
getDate() Возвращает день месяца (может принимать значения от 1-31) заданной даты.
getDay() Возвращает день недели (может принимать значения от 0-6, причем 0-Воскресенье, а 6-Суббота) заданной даты.
getFullYear() Возвращает год (4 числа, например 2020) заданной даты.
getHours() Возвращает час (может принимать значения от 0-23) заданной даты.
getMiliseconds() Возвращает миллисекунду (может принимать значения от 0-999) заданной даты.
getMinutes() Возвращает минуту (может принимать значения от 0-59) заданной даты.
getMonth() Возвращает месяц (может принимать значения от 0-11) заданной даты.
getSeconds() Возвращает секунду (может принимать значения от 0-59) заданной даты.
toDateString() Преобразует часть объект, содержащую дату, в строку.
toString() Преобразует объект в строку.
toTimeString() Преобразует часть объекта, содержащую время, в строку.

//Создадим объект Date

//Извлечем день месяца и выведем результат на страницу

//Извлечем год из объекта x и выведем результат на страницу

Задания к лабораторной работе №3

Задание 1. Сформировать массив (объект Array), элементами которого являются значения выражений. Для вычисления выражений использовать объект Math. Найти максимальный и минимальный элементы массива и их номера.

Задание 2. Задан массив с элементами, представляющими методы объектов Array и Math (pow, pop, push, shift, round, floor, sline, sort). Получить из него 2 массива, в один записать методы объекта Array, в другой – методы объекта Math.

Добавить в начало одного массива и в конец другого еще по одному методу соответствующих объектов.

Вывести исходный массив, полученные массивы и их длину (количество элементов).

Задание 3. Создать объект String – строку текста (свои Фамилия Имя Отчество), в которой присутствуют строчные и прописные буквы. Узнать ее длину.

Перевести все символы строки в верхний регистр, а затем в нижний. Содинить полученные строки. Заменить свои Фамилия Имя Отчество на ФИО.

Вывести исходную и полученные строки на страницу.

Задание 4. Использовать объект Date. Вывести на страницу таблицу с составляющими текущей даты и времени в виде:

Год
Месяц
День
Час
Минуты
Секунды

Применить к ячейкам таблицы свойства форматирования.

2.4. Лабораторная работа № 4. Пользовательские объекты JS.
Специальные операторы

Цель: изучить способы создания пользовательских объектов, познакомиться с правилами применения специальных операторов: delete, in, instanceof, typeof.

Теория

Пользовательские объекты в JavaScript можно создать несколькими способами.

Один из способов основан на функции, в теле которой описываются все свойства и методы создаваемого объекта. Ее называют функцией-конструктором или просто конструктором объекта. Имя функции-конструктора объекта является одновременно и именем создаваемого объекта. Свойства и методы создаваемого объекта задаются в теле функции-конструктора с помощью операторов присваивания, имена переменных-свойств записываются с ключевым словом this (этот).

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

//Конструктор для создания объекта Gruppa со свойствами n, spec, kolich и методом add_stud

function Gruppa(n,spec,kolich) <

//Свойства(номер, специальность, количество)

this.n=n;

this.spec=spec;

this.kolich=kolich;

//Метод (добавить в группу k студентов)

this.add_stud=function add_stud(k) <

this.kolich+=k;

document.write(‘Вгруппу ‘ + this.n + ‘ добавили’+ k + ‘ студентов.
‘);

//Теперь можно создавать экземпляры объекта gr1=newGruppa(2, ‘ИСиТ’, 28);

//Вызов метода созданного объекта (добавить 2 студента)

gr1.add_stud(2);

//C помощью prototype добавим объекту свойство kurs,

//экземпляры объекта будут иметь это свойство

Gruppa.prototype.kurs=this.kurs

gr1.kurs=2

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰).

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

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого.

Папиллярные узоры пальцев рук — маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни.

Лабораторная работа JavaScript

Упражнения и задачи по JavaScript

Главный вопрос любого начинающего программиста: «Как оформить JavaScript программу и выполнить ее?». Попробуем на него ответить как можно проще, но при этом не забывая обо всех способах применения JavaScript-кода.

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

гипертекстовая ссылка (схема URL);

обработчик события (в атрибутах, отвечающих событиям);

JavaScript позволяет поменять стандартную программу на программу пользователя. Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL — JavaScript:

В данном случае текст «код_программы» обозначает программу-обработчик на JavaScript, которая вызывается при выборе гипертекстовой ссылки в первом случае и при отправке данных формы (нажатии кнопки Submit) — во втором. Например, при нажатии на гипертекстовую ссылку «Кликни здесь» можно получить окно предупреждения:

Создать html-документ. Поместить туда текст «Добро пожаловать на сайт!», отформатировав его как заголовок первого уровня. Поместите в документ кнопку «Поздороваться». И фразу «Если необходимо найти информацию, то лучший выход воспользоваться www.google.com».

Создайте сценарий, в котором при загрузке документа выводилось бы окно с сообщением «Приветствуем, Вас!». В сценарий добавитьте комментарий, поясняющий принцип выполнения операторов этого сценария.

Напишите в теле документа скрипт формирующий в документе тег параграфа с помещенной в него фразой «Заходи, гостем будешь».

Обработайте событие OnClick кнопки «Поздороваться» таким образом, чтобы по щелчку на кнопке выводилось бы окно с сообщением «Еще раз здравствуйте!».

При щечке по ссылке переход на google.com не должен осуществляться. Вместо этого в окне сообщения должно выводиться сообщение «Вы слишком мало у нас задержались, мы Вас не отпустим, погостите еще!».

Метод promt() отображает диалоговое окно с сообщением, полем ввода и двумя кнопками OK и CANCEL. Он возвращает введенное значение, если нажата кнопка OK, или специальное значение null, если нажата кнопка CANCEL.

Создайте страницу, которая предлагает (в диалоговом окне) пользователю ввести его имя (по умолчанию «неизвестный гость»), а после этого будет приветствовать его по имени. Приветствие должно отображаться в основной части страницы. Если пользователь отказывается вводить свое имя, то на странице должно появиться сожаление по этому поводу.

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

оператором if … else;

Функция parseInt поможет преобразовать строку к целому числу.

Вывести кубы чисел от 1 до 100, превышающие 10 000. Для возведения в степень можно воспользоваться функцией Math.pow(x,y)=x y ;

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

циклом do while.

Объект — это главный тип данных JavaScript. Любой другой тип данных имеет объектовую «обертку» (wrapper). Это означает, что прежде чем можно будет получить доступ к значению переменной того или иного типа, происходит конвертирование переменной в объект, и только после этого выполняются действия над значением. Тип данных Object сам определяет объекты.

В сценарии JavaScript могут использоваться объекты нескольких видов:

клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web-странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window, document, location, navigator и т.п.

серверные объекты, отвечающие за взаимодействие клиент-сервер. Примеры: Server, Project, Client, File и т.п.

встроенные объекты. Они представляют собой различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: встроенные классы объектов Array, String, Date, Number, Function, Boolean, а также встроенный объект Math.

пользовательские объекты. Они создаются программистом в процессе написания сценария с использованием конструкторов типа объектов (класса). Например, можно создать свои классы Cat и Dog.

Оператор for(переменная in объект) позволяет «пробежаться» по свойствам объекта. Пример.

for(v in document)

Всю необходимую информацию о запущенном браузере и системе пользователя можно узнать при помощи объекта navigator.

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

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

window.status — значение поля статуса;

window.defaultStatus — значение поля статуса по умолчанию.

Значение свойства status можно изменить — и оно тут же будет отображено в поле статуса. Свойство defaultStatus тоже можно менять — и сразу по его изменении оно отображается в поле статуса.

Разница между этими двумя свойствами заключается в их поведении: если свойству status присвоить пустую строку: window.status=»», то в поле статуса автоматически будет отображено значение defaultStatus. Обратного же не происходит: при присвоении пустой строки свойству defaultStatus оно и отобразится в поле статуса, независимо от значения свойства status. Следует отметить, что реакция браузеров на описываемые ниже действия со свойствами status и defaultStatus может быть разной в различных браузерах.

Создайте страницу на которой расположена кнопка «Установить техт в строке состояния» по нажатию на которую в строку состояния выводится приветствие.

Расположите на странице ссылку. При наведении мыши на ссылку отобразите в строке состояния текст ‘Заходи, не пожалеешь!’ (обработка события onMouseOver), при уходе курсора со ссылки отобразите в строке состояния текст ‘Напрасно, что не зашел’ (обработка события onMouseOut).

Метод setTimeout() используется для создания нового потока вычислений, исполнение которого откладывается на время (в миллисекундах), указанное вторым аргументом:

Пример программы выводящей время в строке статуса.

Часы в строке статуса

Если в Mozilla не изменяется строка состояния, то Инструменты -> Настройки -> Содержимое и там напротив JavaScript -> Дополнительно -> Изменять текст в строке статуса.

Непрерывно последовательно друг за другом выводите в строке статуса фразы:

«вышел зайчик погулять».

Пример создания бегущей строки в заголовке браузера.

Интернет технологии (архив 2001-2010)

Цель работы: формирование умений использования JavaScript для проверки правильности заполнения форм и создания окон диалога.

Объектная модель браузера

Объектная модель браузера содержит 12 объектов:

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

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

History — предоставляет информацию об адресах, которые клиент посетил.

Location — предоставляет информацию об адресе текущего документа.

MimeType — предоставляет информацию о типе MIME.

Navigator — позволяет обращаться к свойствам браузера.

Selection — отображает текущее выделение документа.

Style — представляет конкретный элемент стиля в таблице стилей.

TextRange — отображает разделы текста, формирующего документ HTML.

Screen — предоставляет информацию о мониторе и системе вывода, информации клиента.

Window — предоставляет свойства, методы и события, связанные с окном браузера.

StyleSheet — представляет все элементы стиля внутри таблицы стилей.

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

Кроме объектов в объектной модели вводятся следующие понятия:

Методы — способы работы с объектами. Например: закрыть окно. По сути это функция, ассоциированная с объектом.

События — объект сообщает нам, что нечто произошло. Например: элемент становиться активным.

Свойства — свойства объекта. Например: имя и размеры окна.

Окна диалога. Объект Window

window.open («URL или URI»,»имя окна»,»свойства окна»)

Следующий оператор создаёт окно, которое отображает содержимое страницы http://www.kstu.ru:

При создании окна вы можете также предоставить имя, в данном случае — kstuWindow, для обращения к окну как к цели/target при отправке формы или при переходе по гиперссылке.

Имя окна не требуется при создании окна. Но окно обязано иметь имя, если вы хотите обратиться к нему из другого окна.

При открытии окна вы можете специфицировать атрибуты, такие как высота/height и ширина/width, панель утилит/toolbar, адресная строка/location field или полосы прокрутки/scrollbars. Следующий оператор создаёт окно без панели утилит, но с полосами прокрутки:

Некоторые свойства окна:

directories — Если yes, создаются стандартные кнопки директорий браузера, такие как What’s New и What’s Cool.

height — Специфицирует высоту окна в пикселах.

innerHeight — Специфицирует высоту области содержимого окна в пикселах. Это свойство заменило height, которое оставлено для обеспечения обратной совместимости.

innerWidth — Специфицирует ширину области содержимого окна в пикселах. Это свойство заменило width, которое оставлено для обеспечения обратной совместимости.

location — Если yes, создаёт поле ввода Location.

menubar — Если yes, создаёт строку меню в верхней части окна.

outerHeight — Специфицирует размер по вертикали в пикселах внешней границы окна.

resizable — Если yes, даёт пользователю возможность изменять размеры окна.

screenX — Специфицирует расстояние, на котором новое окно помещается от левого края экрана.

screenY — Специфицирует расстояние, на котором новое окно помещается от верха экрана.

scrollbars — Если yes, создаются вертикальная и горизонтальная полосы прокрутки, если документ становится больше размеров окна.

status — Если yes, создаётся статусная строка внизу окна.

titlebar — Если yes, создаётся окно со строкой заголовка.

toolbar — Если yes, создаётся стандартная панель браузера с кнопками, такими как Back и Forward.

width — Специфицирует ширину окна в пикселах.

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

Подборка лекций и практических работ по JavaScript (с интернет)
учебно-методический материал по информатике и икт на тему

Собранный и обощенный материал с различных интернет источников.

Скачать:

Вложение Размер
chast_1_pervye_shagi.doc 133 КБ
chast_2.dokument_html.doc 116 КБ
chast_3._javascript_freymf.doc 125 КБ
chast_4._okna_i_dokumenty.doc 220 КБ
chast_5._stroka_sostoyaniya_i_taymery.doc 52 КБ
chast_6.predopredelennye_obekty.doc 54 КБ
chast_7._forms_.doc 62 КБ
chast_8._obekt_image.doc 69.5 КБ
chast_9_sloi_2.doc 140 КБ
chast_9._sloi_1.doc 70 КБ
chast_11._model_sobytiy_v_javascript_1.2.doc 77 КБ
chast_12.drag_drop.doc 70 КБ

Предварительный просмотр:

Часть 1: Первые шаги

Что такое JavaScript

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

JavaScript — это не Java!

Многие люди считают, что JavaScript — это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет излишне показывать Вам все различия между этими языками — так что запомните лишь то, что JavaScript — это не Java.

Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript — например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE — начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.

Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка — HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову ‘html’ на поисковом сервере Yahoo.

Размещение JavaScript на HTML-странице

Код скрипта JavaScript размещется непосредственно на HTML-странице. Чтобы увидеть, как это делается, давайте рассмотрим следующий простой пример:

С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь — конструкция:

Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддержку языка JavaScript.
А это результат выполнения этого файла (если Вы используете браузер, имеющий поддержку JavaScript, то у Вас будет 3 строки):

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

А это JavaScript!

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

Браузеры без поддержки JavaScript

А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, «не знают» и тэга

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

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

Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.

Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.

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

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

Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).

В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).

Итак, кратко по истории JavaScript:

  • Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
  • К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
  • В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название JavaScript.

Интернет технологии (архив 2001-2010)

Цель работы: формирование умений использования JavaScript для проверки правильности заполнения форм и создания окон диалога.

Объектная модель браузера

Объектная модель браузера содержит 12 объектов:

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

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

History — предоставляет информацию об адресах, которые клиент посетил.

Location — предоставляет информацию об адресе текущего документа.

MimeType — предоставляет информацию о типе MIME.

Navigator — позволяет обращаться к свойствам браузера.

Selection — отображает текущее выделение документа.

Style — представляет конкретный элемент стиля в таблице стилей.

TextRange — отображает разделы текста, формирующего документ HTML.

Screen — предоставляет информацию о мониторе и системе вывода, информации клиента.

Window — предоставляет свойства, методы и события, связанные с окном браузера.

StyleSheet — представляет все элементы стиля внутри таблицы стилей.

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

Кроме объектов в объектной модели вводятся следующие понятия:

Методы — способы работы с объектами. Например: закрыть окно. По сути это функция, ассоциированная с объектом.

События — объект сообщает нам, что нечто произошло. Например: элемент становиться активным.

Свойства — свойства объекта. Например: имя и размеры окна.

Окна диалога. Объект Window

window.open («URL или URI»,»имя окна»,»свойства окна»)

Следующий оператор создаёт окно, которое отображает содержимое страницы http://www.kstu.ru:

При создании окна вы можете также предоставить имя, в данном случае — kstuWindow, для обращения к окну как к цели/target при отправке формы или при переходе по гиперссылке.

Имя окна не требуется при создании окна. Но окно обязано иметь имя, если вы хотите обратиться к нему из другого окна.

При открытии окна вы можете специфицировать атрибуты, такие как высота/height и ширина/width, панель утилит/toolbar, адресная строка/location field или полосы прокрутки/scrollbars. Следующий оператор создаёт окно без панели утилит, но с полосами прокрутки:

Некоторые свойства окна:

directories — Если yes, создаются стандартные кнопки директорий браузера, такие как What’s New и What’s Cool.

height — Специфицирует высоту окна в пикселах.

innerHeight — Специфицирует высоту области содержимого окна в пикселах. Это свойство заменило height, которое оставлено для обеспечения обратной совместимости.

innerWidth — Специфицирует ширину области содержимого окна в пикселах. Это свойство заменило width, которое оставлено для обеспечения обратной совместимости.

location — Если yes, создаёт поле ввода Location.

menubar — Если yes, создаёт строку меню в верхней части окна.

outerHeight — Специфицирует размер по вертикали в пикселах внешней границы окна.

resizable — Если yes, даёт пользователю возможность изменять размеры окна.

screenX — Специфицирует расстояние, на котором новое окно помещается от левого края экрана.

screenY — Специфицирует расстояние, на котором новое окно помещается от верха экрана.

scrollbars — Если yes, создаются вертикальная и горизонтальная полосы прокрутки, если документ становится больше размеров окна.

status — Если yes, создаётся статусная строка внизу окна.

titlebar — Если yes, создаётся окно со строкой заголовка.

toolbar — Если yes, создаётся стандартная панель браузера с кнопками, такими как Back и Forward.

width — Специфицирует ширину окна в пикселах.

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

Лабораторная по JavaScript на заказ

Профессор — это интернет-биржа студентов и исполнителей учебных работ. Здесь вы можете заказать написание лабораторной по JavaScript напрямую у автора, минуя всех посредников. Разместите заказ и уже через 5 минут вы начнете получать предложения от авторов!

Выберите автора для любой учебной задачи по цене, которая подходит именно Вам!

Закажи лабораторную по JavaScript прямо сейчас

Способы оплаты

Возможные работы по программированию

Для завершения регистрации подтвердите свой e-mail: перейдите по ссылке, высланной вам в письме.

После этого будет создан ваш аккаунт и вы сможете войти на сайт и в личный кабинет.

Лабораторная работа №1 Краткие теоретические сведения. JavaScript является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. (стр. 1 )

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6

Лабораторная работа №1

Краткие теоретические сведения.

JavaScript является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. Если взглянуть на GoogleMaps или службу GMail компании Google, то можно понять, на что способен сегодня язык JavaScript.

Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (InternetExplorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко.

Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScriptможно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использованиеJavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.

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

Что касается текстового редактора, то в Windows имеется редактор NotePad. Хотя этого будет достаточно для редактирования JavaScript, HTMLи CSS, более мощный редактор, такой, например, как EditPlus или другой, может оказаться более удобным.

Наиболее простой пример Javascript можно представить следующим текстом:

В результате выполнения этого сценария на странице в браузере должен появиться текст: Это красный текст.

JavaScript не может существовать сам по себе, он должен выполняться внутри Web-страницы, а Web-страница должна просматриваться в браузере, который понимает язык JavaScript (скажем, NetscapeCommunicator или InternetExplorer).

Добавить сценарий на страницу одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script.

Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).

Ниже приведены примеры двух способов подключения кода JavaScript:

В первом примере, код JavaScript помещается между символами > и «. Если вы совершенно не знаете, как работает Web-страница, то вот пример того, как устроена страница HTML:

Илон Маск рекомендует:  Что такое код gmp_gcd
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL