Лабораторные работы по 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. В левом верхнем углу экрана – список из пяти цветов. В правом верхнем углу – черный квадрат. Цвет квадрата можно поменять, используя список.