МЭБИК, web-конструирование (обязательные задания)

В качестве заданий для обязательного выполнения даны лабораторные работы по JavaScript.

Требования к предоставлению и оформлению работы

1. Работа подгружается в систему в виде архива, в котором по каждой лабораторной работе должна быть отдельная папка, содержащая html, php, js-файлы, а также другие необходимые для решения задания файлы (css, изображения и т. п.) объединеные общей логикой так, чтобы, запустив в браузере Ваш html или php файл, можно было увидеть страницу с html-разметкой, на которой есть возможность посмотреть работу Вашего js-кода. Т.е. страница должна быть полностью рабочей и демонстрировать весь функционал в полной мере.

2. Допустимые расширения файлов с кодом: html, js, php, css. Использование других языков программирования, кроме php и javascript, а также различных фреймворков (jQuery, Mootools и т.п.), не допускается.

3. Для выполнения лабораторных работ можно использовать любой редактор кода (VSCode, Atom, Brackets, Notepad++ и т. п.).

Лабораторная работа №1. Доступ к объектам и сценариям. Доступ к свойствам и методам объектов

Задача 1.1. Напишите html-документ, который в окне браузера отображается в виде следующих трёх строк:

· ДОСТУП К СВОЙСТВАМ И МЕТОДАМ

· Коллекция all

· Метод getElementById()

Первую строку поместите в контейнер <h2>...</h2>, вторую – в контейнер <p> …</p>, третью – в контейнер <div> … </div>. Напишите скрипт для изменения цветов фона и букв надписей, при щелчке по этим строкам. При щелчке по первой строке цвет букв должен меняться с чёрного на белый или с белого на чёрный, а фон – с жёлтого на синий или с синего на жёлтый. Так же должны меняться цвета третьей строки.

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

Для изменения первой и третьей строк примените метод getElementById(), а для второй строки – коллекцию all.

Сценарий в html-документе можно размещать тремя способами:

· в открывающем теге в качестве значения атрибута событие;

· в контейнере, ограниченном тегами <script> ...</script>;

· в отдельном файле.

Контейнеры со сценариями могут размещаться в любом месте html-документа. Количество сценариев в одном html-документе не ограничено.

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

Сценарий можно хранить в отдельном файле. Для вставки сценария в htmlдокумент служит атрибут src тега <script>. Сценарий, размещённый в отдельном файле, можно использовать на многих страницах сайта.

Задача 1.2. Добавьте в пример 1.2 три страницы. Две страницы должны отображать информацию о магазинах Посуда и Мебель. Третья страница – главная в сайте сети магазинов ВСЁ ДЛЯ ДОМА. На ней должны быть ссылки на страницы магазинов, входящих в сеть. На страницах магазинов должен использоваться скрипт из файла primJs.js.

Лабораторная работа №2. События

Задача 2.1. Напишите html-документ, отображающийся в окне браузера в виде следующих четырёх строк:

· Пять событий с мышкой

· Щёлкните по мне мышкой

· На этом тексте нажмите, подержите и отпустите левую кнопку мышки

· Медленно проведите курсором мышки по этой надписи

Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:

· шрифт увеличивается до 48pt;

· цвет шрифта меняется на белый;

· цвет фона меняется на голубой.

Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.

Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.

При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.

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

Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.

Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор window.event.cancelBubble = true;

Лабораторная работа №3. Формы

Задача 3.1. Создайте сайт из двух страниц. Первая страница имеет заголовок Заказ мебели. На ней расположены два поля со списками (теги <select>), поле (<input>) и кнопка (<submit>). Из первого поля со списком пользователь выбирает изделие (шкаф, стол, сервант и т.д.). Из второго поля со спискомпользователь выбирает материал (дуб, орех, бук). В третье поле нужно ввести количество заказываемых изделий. После ввода данных необходимо проверить, все ли данные введены.Если обнаружена ошибка, то нужно вывести сообщение и предложить её исправить. Правильно введённые данные нужно отправить на веб-сервер. Вторая страница содержит написанный на PHP-скрипт, с помощью которого формируется следующее сообщение:

Ваш заказ принят

Заказано изделие  – название заказанного

изделия

Материал – заказанный материал

Количество – заказанное количество

Указания к задаче 3.1 http://mkogura.ru/files/for_students/toTask3_1.html

Проверка данных сразу после ввода

Если в форме нужно заполнить много полей, то пользователю удобно получать сообщения об ошибках сразу после окончания ввода данных в очередное поле, то есть после нажатия клавиши Tab или клавиши со стрелкой. Для немедленной проверки введённых данных служит событие onchange:

<input type="text" size=6 onchange="arg(this)">

Функция, вызываемая событием onchange, имеет примерно такую структуру:

function arg(fld) {

x = fld.value; //введённое значение if(x. . .) { //условия проверки

alert("Сообщение об ошибке"); fld.focus();

fld.select();

}

}

Методы focus() и select() служат для возвращения курсора мышки в поле ввода и выделения ошибочных данных. Эти методы без использования специальных приёмов правильно работают только в браузере Mozilla.

Задача 3.2. Создайте страницу (рис. 1) для вычисления тригонометрических функций. Вводимые пользователем данные должны проверяться немедленно после ввода и после нажатия кнопки Вычислить.

Указания. Не забудьте перевести градусы в радианы. Название тригонометрической функции можно передавать как параметр тега :

<option value="sin". . . ></option>

Сформируйте текстовую строку вида

"Math." + имя_функ + "(" + знач_аргумета + ")" // имя_функ – sin,cos или tan

Затем воспользуйтесь функцией eval(строка), которая выполняет выражение, хранящееся в строке.

Лабораторная работа №4 Изображения и рисование

Задача 4.1. Создайте страницу (рис. 2), на которой пользователь может просматривать фотографии, выбирая их названия из поля со списком (тег <select>).

Рис. 2

Указания. Используйте ассоциативный массив, элементами которого будут объекты Image, то есть фотографии, а ключами – значения атрибута value тега <select>. Создание массива и одного элемента делается так:

var photo= new Array();

photo["les"] = new Image(400,550); //элемент массива объект photo["les"].src = "les.jpg"; //свойство объекта имя файла с рисунком

Вызов функции, служащей для появления в окне браузера выбранной фотография, производится при щелчке мышкой по элементу списка. Это событие называется onchange. В качестве параметра функции передаётся объект select:

<select onchange= "prosm(this)">

<option value="les">Лес</option>

Функция состоит из трёх строк:

function prosm(list) {

d = list.options[list.selectedIndex].value; //d ="les" document.fot.src = photo[d].src; //fot – имя тега img

}

Файлы с фотографиями находятся в папке Файлы для работы.

Задача 4.2. Создайте страницу (рис. 4) , на которой строится эллипс с задаваемыми пользователем размерами большой и малой полуосей. Эллипс нужно построить всеми тремя указанными выше способами.

Указания. Для построения эллипса первым способом удобно использовать его параметрические уравнения:

x = a* cos(t); y = b*sin(t);

// где: a, b – полуоси, 0 <= t <= 2π

Рис. 4

Лабораторная работа №5. Движение и перетаскивание

Задача 5.1. Напишите сценарий перемещения цветного квадрата по кругу. Траекторию удобно описывать параметрическими уравнениями:

y = R*sin(t);

// где: R – радиус круга, 0 <= t <= 2

Квадратом может служить контейнер <div> …</div> с цветным фоном.

Задача 5.2. Измените последний пример так, чтобы красный квадрат можно было перемещать внутри серого квадрата размером 500х500 пикселей.

Лабораторная работа №6. Окна и таблицы

Задача 6.1. Создайте сайт, состоящий из двух страниц. Сайт служит для вывода таблицы значений тригонометрической функции (sin, cos или tg) в заданном диапазоне и с заданным шагом. На первой странице (рис. 5) пользователь задаёт исходные данные, а на второй получает соответствующую таблицу. Окно с новой страницей должно открываться методом open(). Исходные данные должны проверяться сразу после ввода и после нажатия кнопки Вычислить. Таблица должна иметь следующий вид:

Указания. Данная задача является расширением задачи 3.2. Для проверки цифровых символов служит следующая функция:

function isNumb(fld) { t = fld.value;

for (i=0; i<t.length; i++) { var ch = t.charAt(i);

if ( (ch<"0" || ch>"9") & !(ch=="," || ch==".") ) { alert("Не цифра");

fld.focus();

fld.select(); return false;

}

}

return true;

}

Параметр fld – объект, значение которого проверяется. Пример обращения к функции isNumb(fld):

<input type="text" name="h" onchange=isNumb(this)>

Результат выполнения оператора ch=t.charAt(i) – i-й символ строковой переменной (объекта) t. Функция сообщает об ошибке, если введён любой символ кроме десятичных цифр, точки или запятой.

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

Рис. 6

Лабораторная работа №7. Основы PHP Задание:

Решите следующие задачи с помощью PHP

Задача №1

Разработайте программу, которая считала бы сумму цифр числа введенного пользователем. Например: есть число 123, то программа должна вычислить сумму цифр 1, 2, 3, т. е. 6.

Задача №2

Разработайте программу, которая считала бы количество вхождений какойнибудь выбранной вами цифры в выбранном вами числе. Например: цифра 5 в числе 442158755745 встречается 4 раза

Задача №3

Разработайте программу, которая из чисел 20 .. 45 находила те, которые делятся на 5 и найдите сумму этих чисел. Рекомендую использовать функцию fmod для определения "делится число" или "не делится".

Задача №4

Ваше задание — создать массив, наполнить его случайными значениями (можно использовать функцию rand), найти максимальное и минимальное значение массива и поменять их местами.

Задача №5

Вам нужно создать массив и заполнить его случайными числами от 1 до 100 (ф-я rand). Далее, вычислить произведение тех элементов, которые больше ноля и у которых парные индексы. После вывести на экран элементы, которые больше ноля и у которых не парный индекс.

Задача №6

Вашим заданием будет создание сокращенного варианта ФИО. Например, вводим: Иванов Иван Петрович, а в результате должны получить: Иванов И. П.

Задача №7

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

Задача №8

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

Задача №9

Вам нужно разработать программу, которая проверяла бы введенное пользователем число (год). Число может быть в диапазоне от 1 до 9999.

Задача №10

Игральным картам присвоены следующие порядковые номера в зависимости от их достоинства: "валет" 11, "дама" 12, "король" 13, "туз" 14. Порядковые номера остальных карт соответствуют их названиям("семерка", "восмерка" и т. д.). Вам нужно разработать программу, которая выводила достоинство карты по заданному номеру, который будет вводит пользователь.

Задача №11

Составить программу, которая бы по заданному числу выводила его название по китайском календаре. Заданное число не может быть меньше 1924.

Задача №12

Дано натуральное число n. Вычислить: 1¹ + 2² + .. + nⁿ. Вывести на экран квадраты этих чисел, а также сумму квадратов этих чисел.