Программирование в Интернет
advertisement
Знакомимся с
программированием
в Интернет
Или
Зачем нужен
JavaScript
Как писать на
JavaScript
JavaScript — это не HTML!
JavaScript располагается внутри документа HTML.
JavaScript сохраняется в виде текста вместе с
документом HTML.
У JavaScript четкая форма. И пренебрегать ею нельзя.
Первая строка скрипта:
<SCRIPT LANGUAGE="JavaScript">
…….
</SCRIPT>- это последняя строка скрипта.
JavaScript – это объектно-ориентированный язык.
Первый объект – это наш документ.
document.write("<font color='red'>
Я изучаю JavaScript</font>")
объект
метод
Первая программа
на JavaScript
Пусть браузер покажет несколько окон с
приветствиями.
Вы можете пользоваться такими окнами для вывода
особо важных сообщений.
В примере используем
единственную команду alert
для вывода сообщения на
экран.
Однако пример содержит
два сценария.
Первый вставлен в раздел
заголовка
<HEAD>..</HEAD>, второй в тело документа
<BODY>..</BODY>.
Первый сценарий будет
загружен и выполнен
раньше, чем браузер
распечатает сам документ.
Второй сценарий будет
выполнен в процессе вывода
на экран тела документа.
Оператор ввода и
вывода информации
Оператор ввода имеет следующий формат:
Prompt(<текст запроса>,<значение по
умолчанию>);
Пример:
ima=prompt("Как тебя зовут?", "введи сюда свое
имя");
Переменная ima приобретает тип строковый,
т.к. с помощью оператора prompt получаем
строку.
=====================================
Оператор вывода устроен несколько проще:
В скобках содержится строка или выражение,
значение которого и выводится в окно.
При этом знак «+» означает
операцию конкатенации, т.е. слияния двух
строк
Пример:
alert(“Привет! ” + ima);
Задания
1. Оформите на HTML –страничке дружественный
диалог с посетителем Вашего сайта.
2. Проверьте, что будет выведено в окно в случае
выполнения следующего оператора:
alert (22+3);
alert(“22 + 3=” + 25)
объясните получившийся результат
Работа над
ошибками
!!! Обратите внимание, что в <SCRIPT
LANGUAGE="JavaScript"> используются кавычки.
Вероятно, что в процессе исполнения сценария браузер
выдал ошибку. Причины могут быть следующими:
1. JavaScript чувствителен к регистрам символов.
Большая часть команд, ключевых слов, названий
объектов пишется с маленькой буквы. Давая имена
своим переменным, старайтесь также следить за
регистром.
2. Команды JavaScript разделяются точкой с запятой.
Часто именно отсутствие знака « ;» приводит к
ошибке.
Об ошибках браузеры сигнализируют по-разному. Internet
Explorer, например, может вывести сообщение:
А может просто "промолчать". При этом в нижнем углу
строки состояния появляется мелкий значок с желтым
треугольником и знаком восклицания. Если по нему
щелкнуть два раза, раскроется окно с расшифровкой
ошибки.
Задание
Вариант 1
Напишите программу на HTML-страничке, которая
запрашивает значение температуры в градусах
Цельсия и переводит его в градусы Фаренгейта
по следующей формуле:
Градусы Фаренгейта=1.8 * градусы Цельсия + 32
Измените программу так, чтобы она переводила еще и
градусы Фаренгейта в градусы Цельсия
<body>
<h1> перевод градусов из Цельсия в шкалу Фаренгейта и
обратно</h1>
<br><br><br>
<script language="javascript">
grad=prompt("перевод температуры","задай град по
Цельсию");
alert(grad+"градусов по Цельсию равно" + (1.8*grad+32) +
"градусов по Фаренгейту");
</script>
</body>
Подпрограммы на
языке JavaScript
Однако, полезно и удобно размещать программы на
языке JavaScript в отдельном файле.
Для этого:
1.
Создайте текстовый файл, назовите его
например prim2.js и поместите в него
следующую подпрограмму:
function far()
{
Grad=prompt(“перевод температуры”, “введи
градусы по Цельсию”);
Alert(grad+”градусов по Цельсию =“ + (1.8*grad+32)
+ “градусов по Фаренгейту”);
}
А в HTML- программе в разделе HEAD пишем:
<script src="prim2.js">
</script>
Варианты решения
Вариант 2 (разместим функции в отдельном файле и в
основной странице создадим кнопки для вызова)
<HTML>
<HEAD>
<TITLE>
Вариант 2
</TITLE>
<script src=prim2.js>
</script>
<body>
<h1> перевод градусов из Цельсия в шкалу Фаренгейта и
обратно</h1>
<br><br><br>
<form name="f1">
<input name=“knopka1” type=button value="перевод из Цельсия в
Фаренгейта" onclick="far()">
</form>
</BODY>
====================
Файл к Варианту 2 (Prim2.js)
function far()
{
grad=prompt("перевод температуры","задай град по
Цельсию");
alert(grad + "градусов по Цельсию равно " + (1.8*grad+32)
+ " градусов по Фаренгейту");
}
!!! Не забывайте добавлять перевод градусов из
шкалы по Фаренгейту в шкалу по Цельсию
Варианты решений
(Вариант 3)
(выведем результат расчета прямо на кнопку)
<HTML>
<HEAD>
<TITLE>
Перевод градусов
</TITLE>
<script src=prim3.js>
</script>
<body>
<h1> перевод градусов из Цельсия в шкалу Фаренгейта и
обратно</h1>
<br><br><br>
<form name="f1">
<input id="knopka1" type=button value="перевод из Цельсия в
Фаренгейта" onclick="far()">
<br><br><br>
<input id="knopka2" type=button value="перевод из Фаренгейта в
Цельсия" onclick="cel()">
</form>
</BODY>
======================
Файл prim3.js (к Варианту3)
function far()
{
grad=prompt("перевод температуры","задай град по Цельсию");
f1.knopka1.value=grad+"градусов по Цельсию равно " +
(1.8*grad+32) + " градусов по Фаренгейту";
}
!!! Не забывайте добавлять перевод градусов из шкалы по Фаренгейту
в шкалу по Цельсию
Подпрограммы на языке
JavaScript
(САМОСТОЯТЕЛЬНАЯ РАБОТА)
В технике скорость вращения колеса измеряют
количеством оборотов в минуту.
Физики скорость вращения меряют в метрах в
секунду.
Создайте на Вашей странице скрипт для перевода
значений скорости об/мин (W) в скорость м/с (V) и
обратно. Используйте формулу:
V = W*3,14 / 30
ВАРИАНТ 1
Ввод и вывод данных осуществить с помощью
окон, вызываемых командой PROMPT () и
ALERT().
ВАРИАНТ 2
разместим функции в отдельном файле и в
основной странице создадим кнопки для
вызова.
ВАРИАНТ 3
выведем результат расчета прямо на кнопку
Переменные и
присваивание значений
Имена переменных строятся по тем же правилам,
что и в большинстве других языков
программирования. Например: а, min, clock ….
Для присваивания значений используйте знак =.
Новые переменные объявляются в теле
программы с помощью ключевого слова var.
Вот пример, где
некоторая информация
запоминается в
переменные и
выводится на экран
Задание
Наберите этот пример и сделайте следующие
эксперименты:
1.
Попробуйте объявить переменную a второй раз с
помощью var. Произойдет ли ошибка?
2.
Попробуйте вообще убрать все ключевые слова
var. Будет ли работать программа?
Сделайте так, чтобы в конце программы
компьютер присвоил переменной c результат
сложения строковой и числовой переменной,
например,
var a="слово"; var b=1; var c=a+b; alert(c);
Что получится?
3.
Рассмотрим пример:
var a=30;
var b=22;
var c="слово";
alert(a+b+c);
В этом примере мы получим
ответ "52слово".
Усложним диалог с
посетителем сайта
Задаем вопрос и пишем реакцию на ответ.
Если ответ «хорошо» или «отлично», мы
ответим «Ok», в противном случае ответим «не
грусти»
Текст программы
<HTML>
<HEAD>
<TITLE>
диалог
</TITLE>
<script language="javascript">
function ansv()
{var d=document
if ((d.form1.n1.value=="отлично") ||
(d.form1.n1.value=="хорошо"))
{d.form1.n1.value="OK"}
else
{d.form1.n1.value="не грусти"}
}
</script>
</HEAD>
<BODY bgcolor=#ffeeaa>
<h1 style="font-family: Astra; font-size: 34pt ">
Как твои дела?</h1>
<form name="form1">
<input type=text size=40 value=пиши_сюда name="n1">
<input TYPE=button NAME=otvet value=ответь
onclick="ansv()">
</form>
</BODY>
</HTML>
Объект HTML – изображение
тэг <img>
Разместите на Вашей страничке изображение.
Давайте с помощью подпрограммы на языке JavaScript
снабдим его «зум-эффектом», т.е. пусть при
наведении мышки его размер увеличивается, скажем,
в 2 раза.
Сначала приведем таблицу основных событий, на
которые реагирует объект <img>
Событие
Возникает
onclick
При щелчке мышкой на
изображении
onmouseover
При наведении мышки на
изображение
onmouseout
При выходе курсора мышки из
области над изображением
ondblclick
При двойном щелчке на
изображении
oncopy
При копировании изображения
onmouseup
При отпускании левой клавиши
мышки над изображением
Объект HTML – изображение
тэг <img>
Добавим в тэг <img> идентификатор для
нашего рисунка
<img id=“ris1” src=1.gif height=300>
prim3.js
Добавить в вашу страничку
Добавить в файл
<img src=tv.jpg
height=300
name="ris1"
onmouseover=
"zoom()" >
function zoom()
{
ris1.height=600;
}
Вопросы и задания
Определите для объекта <img>
реакцию еще на пару событий и
обеспечьте:
1. Возвращение исходного
размера картинки после того,
как мышка будет убрана из ее
области;
2. Изменение картинки в случае
щелчка по изображению
Естественно, что для каждого
такого события должна быть
написана соответствующая
подпрограмма.
Калькулятор
Давайте создадим свой
простенький калькулятор.
Пусть он будет выглядеть
так…
Для красоты разместим его
элементы в таблице,
воспользовавшись ее
параметром border.
Калькулятор
<html>
<head>
<title>
calculator
</title>
<script src=kalkul.js>
</script>
Это HTML-файл
</head>
<body>
<table border=2 bgcolor=#ffeeaa>
<tr>
<td><input id=op1></td>
<td><input type=button value=" + " onclick="plus()"></td>
<td><input type=button value=" - " onclick="minus()"></td>
</tr>
<tr>
<td> <input id=op2></td>
<td><input type=button value=" x " onclick="umn()"></td>
<td><input type=button value=" / " onclick="razd()"></td>
</tr>
<tr>
<td> <input id=rez></td>
<td></td>
<td></td>
</tr>
</table>
Для операндов создали
</body>
поля: OP1 и OP2, а для
</html>
результата поле REZ.
два
Калькулятор
Это файл
kalkul.js
function plus()
{
rez.value=op1.value-(-1)*op2.value;
}
function minus()
{
rez.value=op1.value - op2.value;
}
ЗАДАНИЯ:
1. Допишите две подпрограммы, необходимые для
работы калькулятора.
2. В правой нижней части калькулятора осталось
свободное место для дополнительных кнопок.
Создайте, например, кнопку для очистки
текстовых полей и пусть эта кнопка занимает
обе свободные ячейки (см рисунок
калькулятора).
Самостоятельная
работа
Создайте в HTML-странице скрипт для
расчета суммарного и среднего балла
учащегося(см образец)
Арифметические и логические
вычисления в JavaScript
В арифметических действиях используйте следующие
операции:
Операция
Название
+
*
/
%
Сложение
вычитание
умножение
деление
Остаток от
деления
Для выполнения логических операций используйте
константы true и false, а также операторы:
Операция
&&
║
!
Название
Логическое И
Логическое ИЛИ
Логическое отрицание
Вычисления на
странице сайта
Задача: вычислим площадь круга, радиус
зададим с помощью окна ввода
Var r=prompt ("введи радиус", "0");
результат функции prompt имеет строковый тип.
Значит, необходимо преобразовать символ в
число.
Воспользуйтесь функцией parseInt(строка) или
parseFloat(строка) для преобразования введенной
строки в целое число или число с плавающей
точкой.
Например:
var r=parseInt(prompt("Введите радиус","0"));
или
var r=parseFloat(prompt("Введите
радиус","0"));
Вот пример простейшей
программы для расчета площади
круга по формуле S=r2:
<html> <head>
</head>
<body>
<script language="javascript">
Alert("расчет площади круга");
Var r = parseFloat(prompt("Введите
радиус", "1"));
Var s=3.1415 * r * r;
Alert("площадь круга" + s);
</script>
</body>
</html>
Задание для самостоятельной
работы
На своей новой страничке школьник Петя
предусмотрел гостевую книгу.
В ней запрашивались фамилия, имя
посетителя и телефон.
Некоторые посетители вводили номер
без тире, например, вместо 41-05-10
они набрали 410510.
Такой набор цифр Петя пожелал сразу
преобразовывать в удобный для
запоминания вид.
Он составил простую программу на
JavaScript, которая проверяла поле
формы на наличие тире.
Если они отсутствовали, компьютер
форматировал номер и в базу сервера
номер попадал в нужном виде.
См далее
Задание для
самостоятельной работы
Будем считать, что номер всегда вводится
шестизначным числом, в котором отсутствуют
тире. Программа должна запрашивать номер с
помощью функции prompt, а результат
демонстрировать командой alert.
Нельзя пользоваться ветвлениями, циклами и
методами для работы со строками. В вашем
распоряжении одни арифметические операции
и механизм автоматического преобразования
типов языка JavaScript.
Результат можно получить с помощью простого
линейного алгоритма. Вам будут нужны
несколько дополнительных переменных,
операция % и механизм конкатенации строк.
Маленькая подсказка:
Пусть а=123456
Пусть а1=а % 10; a=(а – а1) / 10;
В результате: а1=6, а=12345
Объект JavaScript – DATE
Объекты JavaScript служат для хранения и обработки
разнородных данных. Функции обработки называются
в JavaScript «методами».
Объект Date используется для работы с
календарными данными.
Например:
d=new Date();
В переменной d содержится информация о текущей
дате: о времени, о годе, номере месяца, о дне недели
и еще много о чем.
!!! Обратите внимание на прописные и строчные
буквы. Это важно.
И еще!!! Если вы хотите, чтобы ваша функция
выполнялась сразу при загрузке страницы, добавьте в
тэг body загрузку этой функции:
<body background=“fon1.gif” onLoad=“function1()”>
См далее
Чтобы воспользоваться этой информацией, служат
методы.
Объект JavaScript – DATE
методы
назначение
getYear ()
Год
getMonth ()
Номер месяца. Январь
№0
getDate ()
число
getDay ()
Номер дня недели.
Воскресенье № 0
getHours ()
часы
getMinutes ()
минуты
getSeconds ()
секунды
<SCRIPT LANGUAGE="JavaScript">
//Скрипт отмечает точную дату и время вашего
прибытия на страницу
Now = new Date();
document.write("Сегодня " + Now.getDate()+
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашли на мою страницу ровно в: " +
Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.");
</SCRIPT>
строка document.write не должна
прерываться. Она разбита для удобства чтения.
// - означает комментарий.
Now = это созданный объект, к которому
применены методы: getDate(), getMonth() и др.
Самостоятельная
работа
Создайте на своей страничке сценарий, в
котором сообщается посетителю о
том, сколько дней осталось, например,
до Нового года.
Кроме того, на странице должна
появиться текущая дата в российском
стандарте в виде:
Сегодня – 1.1.2014, сейчас – 23:18
Время на странице
пошло
<script type="text/javascript">
function digitalWatch()
{
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
document.getElementById("digital_watch").innerHTML
= hours + ":" + minutes + ":" + seconds;
setTimeout("digitalWatch()", 1000);
}
</script>
Слайд–шоу
Проблема: пусть картинка, находящаяся на Вашей
страничке, автоматически меняется, скажем,
каждые пять секунд.
Для этого нам потребуется переменная, начальное
значение которой присваивается вне вызываемой
функции.
Эта JavaScript – программа будет выглядеть
следующим образом:
X=0;
Function slide()
{
Pictures=new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg");
Period=1000;
setTimeout("slide() " ,period);
ris1.src=pictures[x];
x=x+1;
If (x>=pictures.length) (x=0);
}
Здесь переменная Pictures является массивом из 5-ти
элементов (картинок).
Переменная Х является индексом (порядковым номером)
элементов массива.
Оператор SetTimeout обеспечивает выполнение
подпрограммы, написанной внутри скобок (в нашем
случае - slide() ), каждую секунду.
Задание
1.
Организуйте на новой страничке
слайд-шоу
2.
Добавьте ниже иллюстрации пару –
другую кнопок, позволяющую
ускорять, замедлять и практически
остановить показ картинок.
3.
Вы можете использовать слайд –
шоу для создания мультимедийной
презентации по какому-нибудь
учебному предмету.
ИНТЕРНЕТМАГАЗИНЧИК
Организуем продажу товара через
Интернет. Конечно, это довольно
сложный программный комплекс, его
не сделать за урок. Мы попробуем
рассчитать стоимость выбранных
товаров.
ИНТЕРНЕТМАГАЗИНЧИК
<h1><center>ИНТЕРНЕТ - МАГАЗИН</h1><br>
<br>
<p align=left><font size=5 color=green>выбирайте
нужный товар</p><br>
<p align=left><font size=4 color=red>
<form name="f1">
<input type="checkbox" id="tov1"
value="7345">Монитор lg795 - 7345 руб.<br>
<input type="checkbox" id="tov2"
value="3220">Винчестер 60гб - 3220 руб.<br>
<input type="checkbox" id="tov3"
value="4750">Принтер canon i550 - 4750
руб.<br>
<input type="checkbox" id="tov4"
value="2160">Видеокарта 8500 pro - 2160
руб.<br>
<input type="checkbox" id="tov5"
value="2300">Сканер Mustek 12SP- 2300
руб.<br>
<input type="button" onclick="count1()"
value="сумма">
<input type=text name="itog">
</form>
ИНТЕРНЕТМАГАЗИНЧИК
Объект типа СheckBox имеет два важных свойства:
Value – это его значение, которое будет обрабатывать
программа;
Checked – имеет логическое значение True, если
внутри объекта стоит галочка выбора, и значение
False в противном случае.
Назовем функцию, которая вычислит общую стоимость
выбранных товаров, count1().
function count1()
{
f1.itog.value=0;
if (f1.tov1.checked)
(f1.itog.value=Number(f1.itog.value)+
Number(f1.tov1.value));
}
!!! Функция Number() преобразует строковые
значения в числовые.
Задание:
1.
Допишите подпрограмму count1().
2.
Поменяйте картинки на подходящие для
интернет – магазина.
