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

Элементы языка

1. Написать программу, которая содержит не менее 5-и переменных. Присвоить им значения разных типов и с помощью функции typeof() вывести тип каждой переменной на экран браузера.
2. Присвоить значения двум переменным. С помощью операторов сравнения проверить, удовлетворяет ли первая переменная слудующим условиям:
   • равна второй;
   • меньше второй;
   • меньше или равна второй;
   • больше второй.

Управление потоком

1. Определить переменную age.
2. C помощью инструкции if вывести на экран строку "Для молодежи", если переменная age находится в диапазоне от 18 до 30. Если значение переменной вне этого диапазона, то вывести строку "Для всех возрастов".
3. Сделать то же самое, но если переменная age находится в диапазоне от 1 до 17, то вывести строку "Для детей".
4. Написать цикл while, который будет выводить на экран все нечетные числа от 0 до 50.
5. Сделать то же самое с помощью цикла for.
6. С помощью цикла for-in вывести на экран все свойства объекта document.

Массивы

1. Создать массив, наполнить его случайными значениями, найти максимальное и минимальное значение и поменять их местами. Вывести на экран.
2. Создать ассоциированный массив, содержащий названия книг, организованных по авторам. Имена полей будут авторы ("Пушкин", "Есенин", "Данцова" и пр.), а элементами – названия книг.
3. Просмотреть созданный массив в цикле, выводя автора и связанные с ним книги на экран.
4. Создайте массив из 10 различных целочисленных эллементов. Выведите их на экран. Посчитайте их сумму и выведите значение на экран.

Функции

1. Создать функцию, которая выводит текст с разным размером шрифта. Функция имеет два аргумента: текстовая строка и размер шрифта. Используйте style-свойство fontSize
2. Создать функцию, которая принимает четыре текстовые строки, а выводит html-код таблицы, где каждая из исходных строк расположена в отдельной ячейке. Используйте теги оформления таблиц: table, tr, td.

Строки

1. Проверить, содержит ли адрес электронной почты символ @, и выведите предупреждающее сообщение, если такого символа нет.
2. Создать массив, состоящий из целочисленных и вещественных значений. Отсортировать массив. Вывести значения отсортированного массива в виде таблицы с выравниванием по правому краю. Использовать sort(), style.textAlign='right';
3. Создать строку, содержащую таблицу:

   '<table><tr><td>0</td><td>1</td><td>2</td></tr>'+
           '<tr><td>3</td><td>4</td><td>5</td></tr>'+
           '<tr><td>6</td><td>7</td><td>8</td></tr></table>'

   Всем td добавить style="text-align:right;". Вывести таблицу на экран.

Объект Window

1. Используя свойства элемента IMG style.top и style.left, сделайте страничку, на которой небольшая картинка каждую секунду возникает в новом месте экрана. Используйте setInterval.
2. С помощью таблицы 9х9 расчертите экран как черно-белую шахматную доску. Используя функцию eval, меняйте каждые полсекунды цвет ячеек друг с другом.

Объект Document

1. Используя свойство динамического содержания innerHtml, сделайте страницу с текстом:

   Лучшее время года – …!

   Названия времен года каждые две секунды сменяют друг друга на месте многоточия.

Cookie

1. Создать страницу, размер текста на которой можно изменять с помощью кновок A+ / A-. Выбор пользователя запомнинать в cookie и при следующем входе на страницу сразу отображать ее запомненным размером шрифта

DOM

1. создать следующую структуру с использованием DOM методов: appendChild, createElement, createTextNode, setAttribute:

   <div>
       Привет, <span style="font-size:150%">Лена</span>
   </div>

2. Найти на странице все <b> и изменить их размер на 15px. Использовать getElementsByTagName, setAttribute

Перехват и обработка событий

1. создать страницу, на которой в DIV-блок будут выводится текущие координаты курсора мышки и код нажатой клавиши на клавиатуре:

Формы

1. Написать программу-калькулятор, которая позволит пользователю передать два числа и указать арифметическую операцию, выполняемую над ними.
2. В левом верхнем углу экрана – список из пяти цветов. В правом верхнем углу – черный квадрат. Цвет квадрата можно поменять, используя список.