Л.р. 1. JavaScript
.docЛабораторная работа 1. Знакомство с JavaScript
Задания на ввод и вывод текста
Задание 1. Выведите текст в две строки, так чтобы они были разным цветом:
«Иван рубил дрова. Варвара топила печь».
Самостоятельно измените цвет и размер шрифта.
Задание 2. Сделайте запрос вашего имени, после которого на экране появляется надпись Привет! Имя.
Добавьте самостоятельно запрос на фамилию.
Управление мышью
Задание 3. Реакция на наведение мыши: появляется сообщение «Молодец!»
Наведение мыши onMouseOver
Задание 4. Реакция на щелчок мыши: появляется сообщение «Молодец!»
Щелчок мышью OnClick
Задание 5. Реакция на установку фокуса: появляется сообщение «Попал!!!»
Установка фокуса onFocus
Задание 6. Реакция на потерю фокуса: появляется сообщение «Вы изменили текст»
Команда onBlur (на потерю фокуса)
Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Внизу у меня строка для ввода текста, в которой уже что-то написано. Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке.
<form> <input type="text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur="alert('Вы изменили ответ — уверены, что он правильный?');"> </form>
Задание 6. Реакция изменение объекта: появляется сообщение «Вы изменили текст»
Команда onChange (на изменение)
Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Когда мы ближе познакомимся с формами, это станет понятнее. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.
<form> <input TYPE="text" size="45" value="Измените текст и щелкните по другой строке" onChange="window.status=' Вы изменили текст ';"> </form>
Прочие команды
Команда onSelect (на выделение)
Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.
Команда onSubmit (на отправку)
Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».
Формат такой:
<form> <input TYPE="submit" onSubmit="parent.location='1.html'";> </form>
Простейшие вычисления (реализация линейных алгоритмов)
Задание 7. Создайте сценарий вычисляющий площадь треугольника по основанию и высоте.
<HTML>
<HEAD>
<title>Площадь треугольника</title>
</HEAD>
<BODY>
<P> Расчет площади треугольника</P>
<script>
var a=0; h=0 /*Инициализируются две переменные*/
a=parseInt(prompt("Основание треугольника"))
h=parseInt(prompt("Высоту треугольника"))
document.write ("Площадь треугольника равна ", a*h/2,".") /*Для формирования вывода используется метод write объекта document*/
</script>
</body>
</HTML>
Задание 8 . Измените сценарий таким образом, чтобы ввод чисел осуществлялся в текстовые поля, а вычисления выполнялись по нажатию кнопки.
Для этого мы будем использовать функцию, общий вид которой выглядит следующим образом:
function имя(используемые параметры)
{
тело функции;
return имя
}
<HTML>
<HEAD>
<title>Обработка значений из формы</title>
<script >
function plosh(a, h)
{
var s=(a*h)/2;
alert("Площадь треугольника равна "+s);
return s
}
</script>
</HEAD>
<BODY>
<P>Вычисление площади треугольника</P>
<FORM name="form1">
Основание: <input type="text" size=5 name="st1">
Высота: <input type="text" size=5 name="st2"> <hr>
<input type="button" value=Вычислить
onClick="plosh(parseInt(document.form1.st1.value), parseInt(document.form1.st2.value))">
</FORM>
</body>
</HTML>
Задание для самостоятельной работы
-
Создайте скрипт, который для заданных действительных чисел x и у вычисляет их сумму, разность, произведение и частное. Все величины вводятся в текстовые поля, результаты выводятся после нажатия кнопки. Сам результат печатается непосредственно на странице.
-
Создайте скрипт, который позволяет вычислить площадь круга и длину окружности, если известен его радиус. Все величины вводятся в текстовые поля, результаты выводятся после нажатия кнопки. Сам результат печатается непосредственно на странице.
-
Создайте скрипт, который позволяет вычислить площадь треугольника, если известны его стороны. Все величины вводятся строки ввода, результаты выводятся после нажатия кнопки. Сам результат выводится в виде сообщения.