С одной стороны — это недостаток, т.к. нельзя вывести окно в своем дизайне.

С другой стороны, преимущество этих функций по сравнению с другими, более

сложными методами взаимодействия, которые мы изучим в дальнейшем — как раз в том,

что они очень просты.

Это самый простой способ вывести сообщение или получить информацию от

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

«красивости» особой роли не играют.

Индивидуальные задания по вариантам

Задание инд 1: Вариант 1: Создать страницу со скриптом, который бы средствами скрипта выводил sin(x), где x –

числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 2: Создать страницу со скриптом, который бы средствами скрипта выводил cos(x), где x –

числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 3: Создать страницу со скриптом, который бы средствами скрипта выводил sqrt(x), где x –

числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Вариант 4: Создать страницу со скриптом, который бы средствами скрипта выводил abs(x), где x –

числовая переменная, которой присвоено некоторое значение на выбор в скрипте

Задание инд 2:

Вариант 1: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку

для замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет

запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<h1> </h1> на текст «произошла замена», который бы извлекался из переменной str_.

Вариант 2: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку

для замены текста страницы» с кнопками «да» и «нет». В скрипте опишите тег <button>, который

будет при нажатии будет запускать функцию, созданную средствами javascript, которая заменит

текст, размещенный в теге <p> </p> на результат сложения двух переменных, которые

объявлены в функции.

Вариант 3: Создать страницу со скриптом, которая выводила бы сообщение «Нажмите кнопку для

замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет

запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<a> </a> на текст «произошла замена ссылки», который бы извлекался из переменной str_,

хранящей ссылку на сайт.

Вариант 4: Создать страницу со скриптом, которая выводила бы сообщение « Нажмите кнопку

для замены текста страницы». В скрипте опишите тег <button>, который будет при нажатии будет

запускать функцию, созданную средствами javascript, которая заменит текст, размещенный в теге

<h6> </h6> на текст текущую дату, которая бы извлекалась из переменной date_.

Задание инд 3:

Вариант 1: Создать страницу со скриптом, в котором создается объект машина с тремя

свойствами: цвет, марка, модель. Вывести по нажатию кнопки все значения свойств на экран.

Вариант 2: Создать страницу со скриптом, в котором создается объект Холодильник с 4-мя

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

экран.

Вариант 3: Создать страницу со скриптом, в котором создается объект Компьютер с 3-мя

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

экран. Вариант 4: Создать страницу со скриптом, в котором создается объект Квартира с 4-мя

свойствами: адрес, количество комнат, цена, ремонт. Вывести по нажатию кнопки все значения

свойств на экран.

Отчет по лабораторной работе

В соответствии со структурой заготовки отчета и примером оформления оформить в отчете

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

вариантам. Файл с отчетом называть по шаблону: Фамилия_лаб_раб_номер.

Отчет предоставляется в электронном виде либо лично преподавателю, либо на

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

ней занятии проводится выборочный опрос по командам языка.

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

Внедрение рисунков

1. Основные положения

Для выполнения рисунков в браузере его, точнее его часть нужно перевести в графический режим, точнее получить доступ к каждому пикселю. Для этого предназначен тег <CANVAS>. Canvas — это растровый холст, на котором можно рисовать с помощью методов JavaScript, предоставляющий базовые возможности: отрисовку примитивов и текста, побитовый доступ к изображению, вывод изображений и афинные преобразования контекста отрисовки. Canvas имеет около 40 методов и 20 атрибутов, которые можно разбить на несколько групп (см. например, вот эту шпаргалку).

CANVAS

Тег <canvas> предоставляет ограниченную область для рисования в ней. Она используется для рисования графики с помощью JavaScript. Вот так выглядит описание этого элемента:

<canvas id="example" width="400" height="200"></canvas>

Здесь два обязательных атрибута - width и height, которые обозначают длину и высоту области рисования соответственно. Если они не указаны, то по умолчанию длина будет равно 300 пикселей, а высота 150 пикселей. Важно заметить, что этот тег обязательно должен закрываться. т.е. должен выглядеть так:

<canvas ...></canvas> ,

но никак не

<canvas ... /> .

Иногда рисунок нужно заключить в рамку. Для этого можно использовать атрибут style. Например

style='border:1px solid' style='border:1px solid'

Тег <canvas> это элемент HTML, но работать с ним можно используя код javascript. Как сделать это показано в следующем примере:

//Сначала нужно получить объект canvas

var canvas = document.getElementById('example');//example это id тега

//потом нужно получить контекст, т.е. информацию об объекте canvas

var ctx = canvas.getContext('2d');

Не все браузеры поддерживают HTML5. Поэтому рассмотрим как проверить поддержку Canvas API средствами JavaScript:

var canvas = document.getElementById('example');

if (canvas.getContext){

var context = canvas.getContext('2d');

// здесь размещается код рисования на canvas

}else{

// здесь размещается код, который обрабатывается если браузер не поддерживает Canvas API

}

В дальнейшем будем предполагать, что используемый браузер поддерживает элемент canavas

Рисование прямоугольников

Метод	Описание
fillRect(x,y,ширина,высота)	Рисует закрашенный прямоугольник. x,y- координаты левого верхнего угла
strokeRect(x,y,ширина,высота)	Рисует не закрашенный прямоугольник.
clearRect(x,y,ширина,высота)	Очищает указанную зону делая ее полностью прозрачной.

Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.

<html>

<body>

<canvas id='draw' width='300' height='200' style='border:1px solid'></canvas>

<script type='text/javascript'>

var canvas=document.getElementById("draw")

var x=canvas.getContext("2d");

x.fillRect(50,40,55,55);

x.strokeRect(150,70,55,55);

x.clearRect(68,57,20,20);

</script>

</body>

</html>

Объяснение примера:

1. var canvas=document.getElementById("draw") - находим нужный холст;

2. var x=canvas.getContext("2d") - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);

3. x.fillRect(50,40,55,55) - рисуем закрашенный прямоугольник;

4. x.strokeRect(150,70,55,55) - рисуем не закрашенный прямоугольник;

5. x.clearRect(68,57,20,20) - очищаем зону в закрашенном прямоугольнике

Рисование составных фигур

Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.д.)

Методы	Описание
moveTo(x,y)	Устанавливает координаты точки, из которой начнется рисование следующего объекта.
lineTo(x,y)	Рисует прямую линию.
arc(x,y,радиус,нач_угол,конеч_угол)	Рисует круг. Угол необходимо задавать в радианах, а не в градусах (радианы=(Math.PI/180)*градусы).
rect(x, y, ширина, высота)	Рисует прямоугольник.

Код программы рисования заключается в «логические скобки» состоящие из функций beginPath(); и closePath();

Структура программы выглядит следующим образом

beginPath(); //Начало рисования

/* Простые объекты помещаются здесь */

closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной)

//Теперь необходимо вызвать один из методов для рисования фигуры определенной выше

stroke(); //нарисует фигуру не закрашенной

fill(); //нарисует фигуру закрашенной

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

<html>

<body>

<canvas id='draw' style='border:1px solid' width='300' height='200'></canvas>

<script type='text/javascript'>

var canvas=document.getElementById("draw")

var x=canvas.getContext("2d");

x.beginPath(); //Начало рисования

x.moveTo(20,20);// координаты точки, из которой начнется рисование

x.lineTo(70,70); // Рисует прямую линию.

x.lineTo(20,70);

x.closePath(); //Конец рисования

x.fill(); //закрашивание

</script>

</body>

</html>

Другой пример – рисование дуги

var context = canvas.getContext("2d");

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = 75;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 15;