Ответ на задание к Уроку 2

Так действует скрипт — показывает дату. Вам пришлось столкнуться с двумя ошибками. Во-первых, ничего не означающая строка «...x». Я вставил ее для смеху. Проще всего было сразу ее стереть.

Затем вы должны были заметить опечатку в «document.wrte». Правильно «write».

Вперед, на Урок 3


Задание Урока 6

Разбор скрипта

  • Начинаем со строки <SCRIPT LANGUAGE="javascript">.
  • Создаем переменную name для имени пользователя, которое он введет по запросу.
  • Нам нужна дата, поэтому создаем переменную d.
  • Нам известно, что год, месяц и число определяются с помощью d.getЧто-либо(), поэтому создаем переменные для каждого из этих элементов, y, m и dа.
  • Видите «+ 1» после переменной m? Так мы получаем правильный месяц.
  • Полная дата, состоящая из числа, месяца и года, также становится переменной и получает имя t.
  • Заголовок создается с помощью команд <title>, написанных в трех строках document.write. Так проще всего отделить команды html от кода JavaScript.
  • Первая строка из трех начинает команду <title>.
  • Вторая создает текстовую строку. Обратите внимание, что видимый текст помещен в двойные кавычки и отделен от команд, отвечающих за дату, знаками плюс. Не забудьте о пробелах.
  • Третья строка document.write завершает команду <title>.
  • Наконец </SCRIPT>.

Cкрипт помещается перед командой <title>.

Ах, да, если вам интересно, ваше имя было вставлено в текст с помощью команды:

<SCRIPT>document.write(name)</SCRIPT>

Вперед, на урок 7


Задание Урока 1

Все это

...было написано таким образом:

<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Иван рубил дрова</FONT><BR>")
document.write("<FONT COLOR='BLUE'>Варвара топила печь</FONT>")
</SCRIPT>

Эффект достигается добавлением в скрипт второй строки document.write и изменением кода HTML внутри примера. Еще нужно добавить команду <BR> в конце первого примера, чтобы текст располагался на двух строках.

Уловили?

Вперед, на Урок 2


Испорченный скрипт

Вперед, на ответ


Задание Урока 3

Вот скрипт:

<SCRIPT LANGUAGE="JavaScript">

// Автор ентого скрипта я, jsp@newmail.ru
my = new Date();
var mpo = my.getMonth();
var mpo1 = mpo + 1
document.write("<font color='green'>Привет! Сегодня у нас " + my.getDate() + "/" + mpo1 + "/" + my.getFullYear() + "." + " А времечка было, как вы заглянули, ровнехонько " + my.getHours() + " часов " + my.getMinutes() + " минут и " + my.getSeconds() + " секунд.</font>");</SCRIPT>

Обратите внимание на команды FONT в одинарных кавычках. Дату и время можно было скопировать из первоначального скрипта, заменив дефисы на дроби.

Вперед, на Урок 4


Задание Урока 4

Жми сюда.

Oтвет:

<a href="les4.htm" onMouseOver="alert('Это задание после четвертого урока'); return true">Жми сюда</a>

Обратите внимание, схема все та же. Задание состояло в том, чтобы команда onMouseOver вызывала предупреждение. Значит, нужно оставить onMouseOver, скопировать схему метода alert(), не забывая про двойные и одинарные кавычки, и готово.

Вперед, на урок 5


Задание Урока 5

Можно сделать это таким способом:

Имя:
Что вам больше нравится: Шоколад Мороженое

А вот и скрипт:

<FORM> Name: <INPUT TYPE="text"
SIZE="30" onFocus="window.status='Введите свое
имя';">
Что вам больше нравится: <INPUT TYPE="checkbox"
onClick="window.status='Вы выбрали шоколад'";> Шоколад
<INPUT TYPE="checkbox" onClick="window.status='Вы выбрали
мороженое'";> Мороженое
<INPUT TYPE="submit" onClick="alert('Спасибо за участие
в опросе')";">

</FORM>

Вперед, на урок 6


") document.write("Привет, "+name+ ". Сегодня " +t+ ". Спасибо, что зашли"); document.write("

Задание 6: разберите скрипт самостоятельно

Привет, . Мы вас ждали.

Как видите, , страница называет вас по имени. Наверно, тут где-то спрятана команда document.write, верно? Ну, , есть и еще кое-что. Посмотрите наверх, если вы этого еще не сделали. Там тоже ваше имя и сегодняшнее число.

Ваше задание, , разобрать на составные части скрипт, который приделал к странице такой замысловатый заголовок. Вот скрипт, посмотрите на него, определите, что делает каждая команда. (А если уж вы вошли во вкус, попробуйте догадаться, как я столько раз рассовал по тексту ваше имя. Чур, не смотреть в html! Так не честно.)

<SCRIPT LANGUAGE="javascript">

var name = prompt("Напишите свое
имя, пожалуйста","")
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;

document.write("<TITLE>")
document.write("Привет, "+name+ ". Сегодня " +t+ ".
Спасибо, что зашли.");
document.write("</TITLE>")

</SCRIPT>

Здесь ответ

Вперед, на урок 7


Задание Урока 7

Это можно было сделать по-разному, например, так:

...a вот скрипт, который это сделал:

<script LANGUAGE="javascript">

var dr = location.host;
document.write("<a HREF=http://" +dr+ "/les8.htm>Щелкните, чтобы попасть на следующий урок</a>")

</SCRIPT>

Имейте в виду, что страница должна находиться на сервере, на жестком диске скрипт не работает, так как там нет никакого location.host. Ну как, уже начинаете вникать в суть дела? Отлично.

Вперед, на урок 8


Задание Урока 9

Это задание требует от вас известной сообразительности. Нужны две команды prompt, одна сразу за другой. Затем какая-то переменная, которая напечатала бы название страницы (например, «Моя замечательная страница» или, как здесь, «Задание урока 9»). Мы сделали это, поместив текст в заголовок и создав переменную для команды document.title. Затем нужно было создать переменную для document.location.
Все это мы вставили в команду alert. Все это должно содержаться в функции, а функция должна запускаться командой onLoad в строке BODY. Мы назвали функцию hello().
Можно было создать переменную и для строки текста, но раз нам пришлось написать ее только однажды, это было ни к чему. Вот скрипт, который все это сделал:

<SCRIPT LANGUAGE="javascript">

function hello()
{
var first = prompt("Будьте добры, напишите свое имя", "Робокопий")
var second = prompt("Будьте добры, напишите свое отчество", "Чупакабрович")
var page = document.location;
var ttl = document.title;
alert("Привет, " +first+ " " +second+ ". Добро пожаловать на " +ttl+ " по адресу: " +page+".")
}

</SCRIPT>

A вот команда в строке BODY:

<body bgcolor="хххххх" onLoad="hello()">

Вперед, на урок 10


Задание Урока 10

Пойдем, погуляем?

Вот скрипт:

<head>
<script language="javascript>

<!--
var bname = navigator.appName;
var page = document.location;
function time()
{
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var t = h + ':' + m + ':' + s + '';
alert("Куда ж так быстро? Всего только " + t +
"!");
}
//-->

</script>
</head>

<body bgcolor="#D6E4E7" onUnload="time()">

<a href="assig10.htm" onMouseOver="window.status=('Привет,
пользователь ' + bname + '!')" return true
onMouseOut="window.status=('Не скучаете у нас на ' + page +
'?')" return true>Пойдем, погуляем?< /a>

Функция между командами <head> задает время. К этой функции обращается команда onUnload в строке <body>. Переменная времени помещается внутри команды alert.

Команды onMouseOver и onMouseOut построены по той же схеме, что и в Уроке 10, кроме переменных navigator.appName в onMouseOver и document.location в onMouseOut. Не запутайтесь с двойными и одинарными кавычками. Каждая из команд window.status помещена в двойные кавычки. Отрезки текста стоят в одинарных кавычках. Внимательно закрывайте все кавычки и скобки, тогда у вас не будет проблем.

Вперед, на урок 11


Задание Урока 11

Вот скрипт:

<SCRIPT LANGUAGE="javascript">
window.open ('opened2.htm', 'newwin', config='height=250,width=300,toolbar=no,menubar=yes,scrollbars=no,resizable=no,location=no,status=no')
</SCRIPT>

Использованы все характеристики. Ссылки внутри нового окна написаны так же, как я вас учил.

Вперед, на урок 12


Задание Урока 12

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

  • В начале функции добавить команду prompt;
  • Разбить команду TITLE на три части и внести в нее переменную name;
  • Цвет фона поменять на зеленый.

Вот готовый скрипт:

<SCRIPT LANGUAGE="JavaScript">

function openindex()
{

var name=prompt("Как вас зовут?","Напишите
здесь")

var OpenWindow=window.open("", "newwin",
"height=300,width=300,status=yes");

OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>")
OpenWindow.document.write("Привет, " +name+ "! Вот ваше
окно!")
OpenWindow.document.write("</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='green'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<h2>Новое окно</h2>")
OpenWindow.document.write("<a href='' onClick='self.close()'>Эта
ссылка закроет окно</a>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
}
</SCRIPT>

<body bgcolor="xxxxxx" onLoad="openindex()">

Вперед, на урок 13


Задание Урока 13

Раз вы это читаете, значит, нажали отмену. Смотрите, как это делается.

Между командами HEAD:

<SCRIPT LANGUAGE="javascript">
function go()
{
if (confirm("Хотите на прошлый урок?") )
{
parent.location='les12.htm';
alert("Счастливого пути");
}
else
{
alert("Ладно уж, оставайтесь");
defaultStatus='Что сделано, то сделано';
}}
</SCRIPT>

...и добавка в строку <BODY>:

<BODY BGCOLOR="xxxxxx" onLoad="go()">

  • Создается имя функции, скрипт копируется и ставится в фигурные скобки;
  • К else добавляется команда defaultStatus='Что сделано, то сделано', которая помещает текст в строку состояния;
  • Функция запускается командой onLoad в строке BODY;
  • Если хотите, чтобы ссылка открылась в новом окне, то нужно поменять лишь два слова. Вместо parent.location поставить window.open, и готово.

Вперед, на урок 14


Задание урока 14

<html>
<head>
<script language="javascript">
<!--
function vars() {
var numsums = 10 + 2;
alert("10 + 2 равно " + numsums);
var x = 10;
alert("десять - это " + x);
var y = x * 2;
alert("10 X 2 = " + y);
var z = "Привет " + "Пока";
alert(z);
}
//-->
</script>
</head>
<body onLoad="vars()">
</body>
</html>

Мы будем заниматься переменными очень много. Главное, понимайте, что делаете, а не копируйте автоматически. Поехали дальше!

Вперед, на урок 15


Задание Урока 15

Результат должен выглядеть примерно так:

Портрет дальнего родственника

Это было сделано с помощью следующего кода:

<h2 align="center">Портрет дальнего
родственника</h2>
<p align="center"><a href="http://jsp.newmail.ru/les15.htm"
onMouseOver="document.img1.src='pic1.gif'"
onMouseOut="document.img1.src='pic2.gif'"><img src="pic2.gif"
border="0" name="img1" width="77"
height="76"></a></p>

Есть множество разных трюков с mouseover и mouseout. Прежде чем двинуться дальше, в следующем уроке рассмотрим еще один пример.

Вперед, на урок 16


Задание Урока 16

Это:

было сделано следующим образом:

<html>
<head>
<title> </title>
<SCRIPT language="JavaScript">
function over() {
document.pic1.src="a.gif"
}
function out() {
document.pic1.src="b.gif"
}
</SCRIPT>
</head>
<body bgcolor="xxxxxx">
<center>
<a href="" onMouseOver="over()" onMouseOut="out()">
<img src="b.gif" border=0 name="pic1"></a>
</body>
</html>

Вперед, на урок 17


Задание Урока 17

Фон страницы

Чтобы добиться нужного эффекта, вставьте запрос перед функцией, а потом результат запроса в команду alert:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
var user_name = prompt ("Можно узнать, как Вас зовут?","Ваше имя");
function newcolor(color)
{
alert("Эй, " + user_name + "! Вы выбрали " + color)
document.bgColor=color
}
</SCRIPT>
</head>
<body bgcolor="хххххх">
<center><h3>Фон страницы</h3>
</center>
<form>
<input type="button" value="Оранжевый" onClick="newcolor('orange')">
<input type="button" value="Салатовый" onClick="newcolor('lightgreen')">
</form>
</body>
</html>

Вперед, на урок 18


Задание Урока 18

Возможный ответ

Поискать в Яndex:

Если вы знаете адрес поисковой машины, тогда никаких особых трудностей не будет. Но как его узнать? Идите на сайт, начните поиск и скопируйте адрес из адресной строки.

Раз нам нужно, чтобы окно всплывало до завершения поиска, убедитесь, что оно стоит у вас первым. Примерно так:

<script language="JavaScript">

function Gofindit()
{
alert("Сейчас поищем...");
var search = document.formsearch.find.value;
{
var searchUrl = "http://www.yandex.ru/yandsearch?ctgl=11657&text=" + search;
location.href = searchUrl;
}}

</script>

<form name="formsearch">
Поискать в Яndex:
<input type="button" value="Найти"
onClick="Gofindit()">
</form>

Вперед, на урок 19


Задание Урока 19

Ваш любимый цвет:

Ваша любимая геометрическая фигура:

Существуют разные решения, например такое:

<script language="javascript">
function say()
{
var first = document.aform.first.value;
var second = document.aform.second.value;
var like = "Мне нравится "
alert(like + first + " " + second)
alert("В названии вашей любимой геометрической фигуры " + document.aform.second.value.length + " букв.")
}
</script>
</head>

<body>
<form name="aform">
Ваш любимый цвет: <br>
<input type="text" name="first" size="20"><br>
Ваша любимая геометрическая фигура: <br>
<input type="text" name="second" size="20"></p>
<p><input type="button" value="Отослать" onClick="say()"></p>
</form>

</body>
</html>

Нужно было заменить имена полей на first и second. Потом убрать первую команду alert из прошлого урока, а все остальное почти без изменений.

Вперед, на урок 20


Задание Урока 20

Случайное число

<script language="JavaScript">
function rand()
{
now=new Date()
num=(now.getSeconds())%6
alert("Ваше случайное число " + num)
}
</script>

<form>
<p><input type=" button" value="Показать
случайное число от 0 до 5" onClick="rand()">
</p>
</form>

Почему после знака % стоит 6, а не пять? Потому что на самом деле скрипт должен выбирать из шести чисел от нуля до пяти. Попробуйте поставить в скрипте %5, и он будет останавливаться на четверке. Все остальное просто.

Вперед, на урок 21


Задание Урока 21

Развлекаемся?

Пожалуйста, пишите ответ только маленькими буквами!

Возможно, это задание оказалось не таким уж простым, но я надеюсь, что вы с ним справились. Нужно было кое-где поменять текст, но главное — заменить команду alert на document.bgColor.

<script language="javascript">
function askuser() {
var answer=prompt("Вы мужчина или женщина?")
if ( answer == "женщина")
{document.bgColor="FE92B5"}
if(answer == "мужчина")
{document.bgColor="70E4F1"}
}
</script>

<form>
<input type="button" value="Поговорим о сексе"
onClick="askuser()">
<form>

Вперед, на урок 22


Задание Урока 22

Я загадал число от 1 дo 10

обнови страницу, чтобы сыграть еще раз

Возможны только три результата: слишком мало, слишком много и точно. То есть каждый раз, когда пользователь вводит свою догадку, будет задействовано одно из трех условий. Здесь вам даже не понадобится ELSE. Таким образом, требуется только три утверждения IF.

Обратите внимание на команды < и > в скрипте. В данном случае они означают то же самое, что и на уроках математики: больше и меньше.

Скрипт

<html>
<head>
<script language="JavaScript">
function rand()
{now=new Date()
num=(now.getSeconds())%10
num=num+1
}
function guessnum()
{guess=prompt("Угадай, какое?")
if (eval(guess) == num)
{alert("Точно!!!")
}
if(eval(guess) > num)
{alert("Слишком много, жми
еще.")}
if(eval(guess) < num)
{alert("Слишком мало, жми
еще.")}
}
</script>
<body bgcolor="white" onLoad="rand()">
<h2>Я загадал число от 1 до 10</h2>
<form name="myform">
<input type="button" value="Угадай"
name="b1" onClick="guessnum()">
</form>
</body>
</html>

Вперед, на урок 23


Задание Урока 23

Моя домашняя страница

Такое у меня сегодня настроение.

Вам нужно было создать три переменные для трех рисунков и вписать имена переменных в команду document.write. Ниже два возможных ответа. Один из них тот, которого мы ждали от вас. Второй немного более компактный и немного более хитроумный. Попробуйте разобраться в нем самостоятельно.

Первый возможный ответ

<body bgcolor="хххххх">
<center>
<h1>Моя домашняя страница</h1>
<script language="JavaScript">
var1="pic1.gif"
var2="pic2.gif";
var3="pic3.gif"
now=new Date()
num=(now.getSeconds() )%3
num=num+1
quot="'"
document.write("Случайная цифра: " + num +
"<br>")
if (num == 1)
{cliche=var1}
if (num == 2)
{cliche=var2}
if (num == 3)
{cliche=var3}
document.write("<img src=" + quot + cliche + quot +">")
</script>
<p>Такое у меня сегодня настроение.
</center>
</body>
</html>

Для самых умных

<h1>Моя домашняя страница</h1>
<script language="JavaScript">
var1="pic1.gif"
var2="pic2.gif";
var3="pic3.gif"
now=new Date()
num=(now.getSeconds() )%3
num=num+1
quot="'"
document.write("Случайная цифра: " + num + "<br>")
document.write("<img src=" + quot + eval("var"+num) + quot +">")
</script>
<p>Такое у меня сегодня настроение.
</center>
</body>
</html>

Вперед, на урок 24


Задание Урока 24

Сюрприз!

И еще один сюрприз...

Можно было просто дважды скопировать скрипт из урока, поменяв 5 на 50 тысяч. Это было самое простое. Труднее было стереть document.write из фигурных скобок и поставить вместо нее команду bgColor=.

<html>
<head>
</head>
<body bgcolor="white">
<h2>Держите шляпу!</h2>
<script language="JavaScript">
for (i=1; i<=50001; i=i+1)
{
}
document.bgColor="хххххх"
</script>
И еще один сюрприз...
<script language="JavaScript">
for (i=1; i<=50001; i=i+1)
{
}
document.bgColor="хххххх"
</script>
</body>
</html>

Вперед, на урок 25


Задание Урока 25

Вы создаете переменную и приравниваете ее к результату запроса. Назовем ее «loops». Дальше действует команда eval(). Все очень похоже на скрипт из прошлого урока:

<html>
<head>
</head>
<body bgcolor="xxxxxx">
<script language="JavaScript">
loops=prompt("Сколько раз пожелать вам доброго вечера?")
num=1
while (num <= eval(loops))
{
document.write("Добрый ")
num=num+1
}
document.write("Вечер!")
</script>
</body>
</html>

Вперед, на урок 26


Задание Урока 26

Случайная урла

Это задание очень напоминает пример из Урока 26, за исключением того, что вам нужно было указать ряд адресов URL по схеме url[0]. Однако в результате скрипт должен отослать вас на выбранную страницу. top.location.href я вам дал. Вот скрипт:

<html>
<head>
<script language="JavaScript">
url=new Array()
url[0]="http://www.jsp.newmail.ru/les5.htm"
url[1]="http://www.jsp.newmail.ru/les10.htm"
url[2]="http://www.jsp.newmail.ru/les15.htm"
url[3]="http://www.jsp.newmail.ru/les20.htm"

function rand()
{
now=new Date()
num=(now.getSeconds())%4
top.location.href = url[num]
}
</script>
</head>
<body>
<center>
<h2>Случайная урла</h2>
<form>
<input type="button" value="Зашлем вас неизвестно куда!" onClick="rand()">
</form>
</center>
</body>
</html>

Вперед, на урок 27


Задание Урока 27

Щелкните, чтобы увидеть следующую картинку

Если «+» означает сложение, то «-»; означает вычитание. Посмотрите на скрипт. Менять местами рисунки не надо, хотя и можно. Просто сделайте так, чтобы из num каждый раз вычиталась единица, а когда num добирается до нуля, снова начинайте с трех.

Вот скрипт:

<html>
<head>
<script language="JavaScript">
num=4
img1 = new Image (); img1.src = "leo.gif"
img2 = new Image (); img2.src = "dino.gif"
img3 = new Image (); img3.src = "rhino.gif"
function slideshow()
{
num=num-1
if (num==0)
{num=3}
document.mypic.src=eval("img"+num+".src")
}
</script>
</head>
<body>
<center>
<img src="leo.gif" name="mypic" border=0>
<p>
<a href="JavaScript:slideshow()">Щелкните, чтобы увидеть следующую картинку</a>
</center>
</body>
</html>

Вперед, на урок 28


Задание Урока 28

Укажите скорость анимации: (fast, medium, slow)

Показать анимацию

Я включил в программу окно alert, чтобы показать вам значение переменной howfast (как быстро). alert — это хороший способ разобраться в значении переменных, если программа ведет себя не так, как хотелось бы.

Еще обратите особое внимание на sp (speed, скорость) внутри функции startshow(). Это позволяет передавать в функцию данные, которые вводит пользователь.

И последнее — метод toUpperCase(). С его помощью все варианты написания «slow», «Slow», «sLOW» преобразуются в «SLOW».

Вот скрипт:

<html>
<head>
<script language="JavaScript">
num=1
img1 = new Image ()
img1.src = "pic1.gif"
img2 = new Image ()
img2.src = "pic2.gif"
img3 = new Image ()
img3.src = "pic3.gif"
function startshow(sp)
{
howfast=1600
if (sp.toUpperCase() == "SLOW")
{howfast=2400}
if(sp.toUpperCase() == "FAST")
{howfast=800}
alert(howfast)
for (i=1; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
for(x=1; x<howfast; x=x+1)
{}
num=num+1
if(num==4)
{num=1}
}
document.mypic.src=img1.src
}
</script>
</head>
<body>
<center>
<form name="myform">
<img src="pic1.gif" name="mypic" border=0>
<p>
Укажите скорость анимации: (fast, medium, slow) <input
type="text" value="medium" name="speed">
<p>
<a href="JavaScript:startshow(document.myform.speed.value)">Показать
анимацию</a>
</center>
</form>
</body>
</html>

Вперед, на урок 29


Задание Урока 29

Подтверждение ввода данных через JavaScript

Введите имя:

Введите номер телефона (ххх-хххх):

  • Введите имя и 12345.
  • Введите 12345678.
  • Введите 12д-3456.
  • Введите 123-4567.

Скрипт

<html>
<head>

<script language="JavaScript">
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Необходимо ввести имя")
document.dataentry.fn.focus()}
}
function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 8)
{alert("Неверное количество цифр в номере")
document.dataentry.phone.focus()}

if(len>3 && phone.charAt(3) != "-")
{alert("Четвертый знак должен быть '-'")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}
}
</script>

</head>
<body>

<form name="dataentry">
<h3>Подтверждение ввода данных через
JavaScript</h3>
<p>Введите имя:<br>
<input type="text" name="fn" onBlur="validfn(fn.value)"
size="20"> <script
language="JavaScript">
document.dataentry.fn.focus()
</script></p>
<p>Введите номер телефона (ххх-хххх):<br>
<input type="text" name="phone" size="10"></p>
<p><input type="button" value="Отправить"
onClick="validphone(phone.value)"></p>
</form>

</body>
</html>

Закройте это окно, поскольку ваше обучение закончено, или
Назад, по второму кругу!


Введение

От переводчика Концепция Оглавление

От переводчика

Этот самоучитель по JavaScript попался мне на глаза во время блужданий по дырам Интернета и поразил своей доступностью и эффективностью. Бескорыстная любовь к согражданам подвигла меня на создание русской версии. Милые чайники и начинающие, вы непременно научитесь составлять полезные и бесполезные скрипты, а также сможете при случае настроить по собственному желанию чужие сложные скрипты, которых найдется немало на других сайтах. Но это при условии, что вы будете внимательно выполнять задания, не стараясь проглотить все уроки за один день. Чтобы избежать путаницы, все термины продублированы по-английски.

Концепция самоучителя

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

Имейте в виду, что в дальнейшем слово «я» будет относиться к американскому автору Джо Бернсу, за исключением слов, выделенных красным цветом. Претензии и прочие замечания по скриптам прошу направлять ему.

Оглавление

  1. Введение
    2.
  2. Сообщения об ошибках, выдаваемые браузером
    3.
  3. Дата и время
    4.
  4. Команда onMouseOver
    5.
  5. Еще несколько обработчиков событий
    6.
  6. Запросы пользователю и переменные
    7.
  7. Концепция свойств
    8.
  8. Иерархия объектов
    9.
  9. Создание функций
    10.
  10. Команды onUnload и onMouseOut
    11.
  11. Как открыть новое окно
    12.
  12. Новые окна через функцию
    13.
  13. Метод confirm
    14.
  14. Математические переменные
    15.
  15. Смена картинки через onMouseOver
    16.
  16. Функция для смены картинки
  17. Функция внутри формы
    18.
  18. Поле формы и свойство value
    19.
  19. Ввод данных в функцию
    20.
  20. Случайные числа
    21.
  21. Введение в if
    22.
  22. If и else
    23.
  23. Случайный выбор изображений и фраз
    24.
  24. Введение в циклы for
    25.
  25. Введение в циклы while
    26.
  26. Массивы
    27.
  27. Слайд-шоу
    28.
  28. Анимация
    29.
  29. Проверка данных, введенных в форму
    30.

Вперед, на Урок 1

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод и оформление © Татьяна.


Пример к Уроку 4.

Пример первый: Не щелкать

Пример второй: Не щелкать


Пример к Уроку 17.

Выбрать цвет фонa


Урок 1. Введение

Урок 1
Введение

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

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

Скрипт

<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='RED'>Это красный текст</FONT>")
</SCRIPT>

Эффект

.

Разбор скрипта

Давайте сперва поговорим о том, что такое JavaScript вообще.

Что такое JavaScript?

Во-первых, это не Java. Тут легко запутаться и решить, что Java и JavaScript — одно и то же. Отнюдь. Java — это язык программирования, разработанный в Sun Microsystems. А JavaScript придумали добрые люди из Netscape. Но это не единственное отличие.

Оба языка представляют собой ООР (Object Orientated Programming, объектно-ориентированный язык программирования). Это значит, что с их помощью можно строить небольшие объекты, из которых потом складывается целое. Это станет понятнее по ходу дела. Главное отличие в том, что Java позволяет создавать совершенно самостоятельные события. «Java-applet» («приложеньице») может запускаться с веб-страницы, нo на самом деле это полностью независимая программа, хоть и маленькая. К тому же ее нельзя просмотреть в виде текста. Для запуска ее необходимо «транслировать» в то, что называется «машинным языком».

Netscape как бы упростил Java до набора более простых команд. JavaScript не может существовать сам по себе, он должен находиться внутри веб-страницы, а веб-страницу необходимо просматривать в браузере, который понимает язык JavaScript (скажем, Netscape Communicator и Internet Explorer).

Как писать на JavaScript

Для начала запомните, что JavaScript — это не HTML! Меня часто спрашивают, не является ли первый просто другой версией второго. Нет. Однако у JavaScript и HTML очень похожие правила.
Во-первых, JavaScript располагается внутри документа HTML. Где именно, мы обсудим позже. JavaScript сохраняется в виде текста вместе с документом HTML. Главная же разница в том, что в HTML имеет довольно расплывчатые правила. Не имеет значения, сколько пробелов вы оставляете между словами или абзацами. По правде говоря, HTML можно было бы писать одной сплошной строкой.
Совсем другое дело JavaScript. У него четкая форма. И пренебрегать ею можно лишь изредка. Например, вторая строка нашего скрипта выглядит следующим образом:

document.write("<font color='red'>Красный текст</font>")

...То есть, целиком находится на одной линии и должна сохранять свою форму. Предположим, вы скопировали ее в текстовый редактор с узкими страницами, и поля разорвали строку:

document.write("<font color='red'>Красный текст</font
>")

Вы изменили форму, и в скрипт вкралась ошибка (в следующем уроке мы поговорим об ошибках и о том, как их исправлять).

Редактирование JavaScript

Пишете вы скрипт или редактируете, не давайте полям страницы вставать у вас на пути. Всегда редактируйте свою работу в текстовом редакторе без полей. Я не имею в виду очень широкую страницу. Я имею в виду ПОЛНОЕ ОТСУТСТВИЕ ПОЛЕЙ. У вас должна быть возможность написать строку длиной в несколько километров. Иначе не оберетесь проблем.

Важен ли РеГиСтр для JavaScript?

Да.

Некоторые скрипты по-разному действуют в Нетскейпе и Експлорере.

Вернемся к разбору скрипта

Начнем с первой строки:

<SCRIPT LANGUAGE="JavaScript">

Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript. Кажется, это несложно. Все скрипты начинаются с такой команды. А как насчет части LANGUAGE(язык)="JavaScript"? Разве это необходимо? Да. Есть еще и другие типы скриптов, например, VBS или LiveScript. Так что ваша команда LANGUAGE не даст браузеру запутаться.
Раз уж у нас всего три строчки текста, позвольте сразу же перейти к концу. Этим:

</SCRIPT>

...заканчивается любой JavaScript без исключений. Зарубите себе на носу, потому что к этому вопросу мы больше возвращаться не будем. Помните, начинаем с <SCRIPT LANGUAGE="javascript"> и заканчиваем </SCRIPT>. Идем дальше...
Вот основная часть скрипта:

document.write("<FONT COLOR='RED'>Это красный текст</FONT>")

Не так уж трудно догадаться самому, что означает каждая часть скрипта, но чтобы нам в дальнейшем пользоваться общими терминами, рассмотрим его подробно.
Вот из чего состоит скрипт: указывается DOCUMENT (документ HTML) и те изменения, которые в нем произойдут — что-то будет написано (WRITE). То, что будет написано, находится в скобках.

Настала очередь терминов. DOCUMENT представляет собой object (объект). Слово WRITE (писать), отделенное точкой, называется method (методом объекта). Таким образом, скрипт попросту говорит: «Возьмите объект (что-то, уже существующее) и припишите что-то к нему».
Текст в скобках называется instance (примером метода), он передает то, что происходит, когда метод воздействует на объект. Следите за ходом мысли?
Имейте в виду, что текст внутри скобок находится в кавычках. Никогда нельзя про них забывать.
Текст в кавычках представляет собой простой HTML. Думаю, вы узнаете в нем команду <FONT>, которая делает текст красным. Обратите внимание, что дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка.
Запомните: внутри двойных кавычек ставятся одинарные.

Так значит, JavaScript перекрасил текст в красный цвет? Нет, это для вас постарался HTML. А JavaScript только написал код на странице. Здорово, правда?

Ваше задание

Измените скрипт так, чтобы вышли две строки текста, красная и синяя. Но вам придется дописать несколько команд Javascript, а не просто добавить немного HTML к приведенному примеру. На странице должно оказаться следующее:

Это красный текст
Это синий текст

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 2

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 2. Сообщения об ошибках

Урок 2
Сообщения об ошибках

красным цветом даны примечания переводчика
Концепция - Сообщения об ошибке - Исправление - Задание

Оглавление (в новом окне)

Концепция

Знаете, какая тема вообще не обсуждается ни в одной из миллиона книг по JavaScript, которые я перечитал? Сообщения об ошибках. Вероятно, авторы этих книг полагают, что вы с самого первого раза все делаете правильно и никогда не получаете таких сообщений. Пора снять розовые очки.

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

Сегодня я собираюсь рассказать вам, как реагировать, если браузер сообщает об ошибке. Я такие окна видел тысячами. Начнете писать JavaScript, тоже получите свою долю.

Сообщение об ошибке

В основном бывают ошибки двух типов: синтаксиса и сценария. Ошибка синтаксиса означает опечатку или пропущенный текст. Ошибка сценария значит, что вы перепутали местами команды или вставили неправильные. Так или иначе, дело в одном — где-то вы напутали.
Существуют программы, которые помогают исправлять ошибки, этот процесс называется «debugging» («уничтожение багов, ошибок»), но я все же предпочитаю делать это вручную. На самом деле это даже легче, чем можно подумать.

.

Исправление ошибок

Говорят, что наилучший способ исправить ошибку — это ее не совершать, но сказать проще, чем сделать. Тем не менее можно свести ошибки к минимуму, пользуясь текстовым редактором без полей. Кроме того, отводите каждой команде JavaScript отдельную строку. Ни к чему разбивать длинные строки на несколько коротких. Это само по себе может привести к ошибке. И все же, готов спорить, что каждый раз, принимаясь за скрипты, вы будете получать такие сообщения. Так уж давайте разберемся, как их устранять.

В этих всплывающих окошках есть одна замечательная вещь: они сами говорят, где и в чем состоит проблема. Взгляните на сообщение. Это ошибка сценария, и находится она на строке 23. Более того, сообщение прямо говорит, в чем состоит ошибка. Разве не здорово было бы завести такой порядок и в HTML?

Строка ошибки

Строку с ошибкой нужно отсчитывать от самого верха документа HTML, а не от первой строки JavaScript. Например, в приведенном ниже документе допущена ошибка на строке 9. Это ошибка синтаксиса, так как пример (instance) не заканчивается на той же строке, где и начался. Видите, как скобка перескочила на следующую строчку?

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="javascript">
document.write("text for the page"
)
</SCRIPT>
</BODY>
</HTML>

Но почему ошибка на строке 9, а не 8? Потому, что вы начинаете считать с верхнего края документа HTML, не пропуская ни одной строчки. Вот этот документ еще раз с пронумерованными строчками.

(строка 1) <HTML>
(строка 2) <HEAD>
(строка 3) <TITLE></TITLE>
(строка 4) </HEAD>
(строка 5) <BODY
(строка 6)
(строка 7) <SCRIPT LANGUAGE="javascript">
(строка 8) document.write("text for the page"
(строка 9) )
(строка 10) </SCRIPT>
(строка 11) </BODY>
(строка 11) </HTML>

Так что, считайте все строки, даже пустые.

Ну и что дальше?

Как только вы нашли строку с ошибкой, необходимо решить, что делать. Чаще всего это будет синтаксическая ошибка — либо разорванная строка, либо опечатка, либо двойные кавычки вместо одинарных и тому подобное.
Если это ошибка сценария, значит, команда, на которую указывает сообщение, не укладывается в логическую последовательность. Например, команда вызывает кнопку, а в скрипте на самом деле указано текстовое поле.

Многократные сообщения

Ничто не раздражает меня больше, чем многократные сообщения об ошибках. Можно только сидеть и смотреть, как на экране плодятся окошки. Когда-то я думал, что многократные окна означают многократные ошибки. Не всегда.
JavaScript — это чрезвычайно логичный язык, требующий, чтобы все шло своим чередом, друг за дружкой. Допустим, у вас 10 ошибок в длинном скрипте. Сообщения накладываются одно на другое, и последняя обнаруженная компьютером ошибка окажется сверху. Не набрасывайтесь на нее сразу, возможно, в действительности ее даже не существует.
Может случиться так, что первая ошибка в скрипте и вызовет все остальные. Так что исправлять их следует от начала документа HTML. Сколько раз было так, что у меня выскакивало штук 20 окон, а разрешить проблему удавалось исправлением одной единственной первой ошибки!
Поэтому я советую вам исправлять ошибки по одной от начала до конца. И каждый раз, исправив одну ошибку, запускайте скрипт. Можно получить 20 окошек с восклицательным знаком, а исправлять придется одну или две ошибки.

Определение отсутствует

Эта ошибка сценария тоже частенько встречается. Она означает, что в скрипте что-то не согласовано. Я всегда слежу за тем, чтобы не вписать какую-нибудь строку раньше, чем нужно. Если дело не в этом, попробуйте стереть строку с ошибкой, ведь ее всегда можно вернуть на место. Случаются и банальные опечатки. Приглядитесь к тексту повнимательнее, опечатки случаются чаще, чем можно себе представить.

Вот практически все, что на данном этапе можно сказать про ошибки. Теперь у вас хватит знаний, чтобы исправить 99% подобных неприятностей. Просто помните, что сообщение — это на самом деле плюс. Без них нам пришлось бы сидеть, тупо уставясь в пустую страницу, не имея ни малейшего понятия, в чем проблема.

Ваше задание

Пeред вами ссылка на страницу со скриптом. Загружая страницу, браузер должен выдать вам два сообщения об ошибке. Исправьте их. Некоторые команды покажутся вам незнакомыми, но это неважно. Из сообщения вы получите достаточно информации, чтобы наладить скрипт.
Если он заработает, то на странице появится сегодняшняя дата. Каждая ссылка откроется в новом окне.

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

Здесь скрипт с ошибкой

Здесь ответ

Концепция - Сообщения об ошибке - Исправление - Задание

Вперед, на Урок 3

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 3. Дата и время

Урок 3
Дата и время

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Из Урока 1 вам известно, что существует такой объект как документ. Иначе в нем ничего нельзя было бы написать. Сегодня мы поговорим о семи методах объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект, а документ для этих целей не годится... так что придется самим придумывать новый объект.

Ошибка 2000!

С 1 января 2000 вместо двух последних цифр года, как раньше, getYear в Експлорере показывает полный четырехзначный номер, а в Нескейпе — число 100. Может быть, Нетскейп заделает эту дырку, а до тех пор лучше пользоваться командой getFullYear, которую, кажется, правильно воспринимает и тот, и другой. Правда, Опера ее вообще не воспринимает.

Скрипт

<SCRIPT LANGUAGE="JavaScript">

//Скрипт отмечает точную дату и время вашего прибытия на страницу

Now = new Date();
document.write("Сегодня " + Now.getDate()+
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашли на мою страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")

</SCRIPT>

Кстати, строка document.write не должна прерываться. Я разбил ее на несколько, чтобы удобнее было читать.

Эффект

.

Разбор скрипта

Не пугайтесь сразу, скоро все станет понятно. Позвольте, уж я снова напомню вам о четкой форме скрипта. Строка document.write уходит далеко за границы экрана. Эту форму необходимо сохранить, иначе ваш браузер выдаст сообщение об ошибке.

Что это за штука // ?

По ходу наших разговоров вы будете узнавать все больше новых команд. Это одна из них. Двойная дробь указывает на комментарий внутри скрипта. Она означает, что следующий за ней текст не участвует в процессе. Можете добавлять сколько угодно текста, только помните, что каждая строка должна начинаться с двойной дроби //.

Методы Дата и Время

Посмотрите на скрипт. Видите, скрипту дается команда поместить в документ число, месяц, год, часы, минуты и секунды. Несколько дополнительных слов объясняют, на что вы смотрите.
Все это было создано с помощью метода getЧто-либо(). Обратите внимание на заглавную букву. Сначала «g» в нижнем регистре, потом Заглавная буква.

Во-первых, помните, что все это цифры. Даже метод getDay(), который отвечает за день недели, выражается цифрой от единицы до семи.
Начнем с месяца. Как уже говорилось раньше, getMonth() — это метод, отвечающий за месяц. Теперь задумаемся о том, на какой объект воздействует метод getMonth(). Помните это из Урока 1? Метод (method) воздейcтвует на объект (object).

Может показаться, что getЧто-либо() — это метод объекта document. Вовсе нет. Метод документа — write. getMonth() на самом деле является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде:

Now = new Date();

Я устанавливаю объект, с которым будет работать метод getMonth(). Имея дело с датой и временем, всякий раз пользуйтесь той же схемой. Нужно создать объект. Мой объект называется Now (сейчас). Видите? Между прочим, я мог бы назвать его Zork или Fred, браузеру все равно. Это не имеет значения, если объект получил оригинальное имя, которое больше нигде в JavaScript не встречается.
Если вам кажется, что кое-что тут поставлено с ног на голову, я вас понимаю. Такое впечатление, что следует писать new Date = Now, но это не так. Вы изучаете незнакомый язык и обязаны подчиняться его правилам.
Команда говорит: Now — это объект, который представляет new Date() (новую Дату). Дата обязательно должна быть новой. Таким способом вы будете получать новую дату каждый раз, когда заходите на страницу или обновляете ее.

Обратите внимание и на точку с запятой в конце. Она указывает на то, что строка JavaScript закончена. Без нее браузер решил бы, что команда продолжается на следующей строке. Ошибка.

Ура! У нас есть объект, на который может воздействовать метод getMonth(). Нам нужно напечатать месяц на странице, значит, где-то должна быть команда document.write(). Нам также известно, что текст в скобках будет виден на странице, так давайте напишем все это, следуя логике:

  • Сначала пишем <SCRIPT LANGUAGE="javascript">.
  • Потом вставляем комментарий о том, для чего предназначен скрипт.
  • Прежде чем приступить к getMonth(), необходимо создать объект. Убедитесь, что строка заканчивается точкой с запятой.
  • Теперь можно вставлять утверждение document.write.
  • Текст в скобках после document.write оформляем по правилам Урока 1.
    • Текст, видимый на странице, должен быть окружен двойными кавычками (одинарные кавычки для кода HTML внутри двойных).
    • Новое правило: сочетание текста и команд требует знака «плюс» + между элементами.
    • Объект и метод разделены точкой, так что команда напечатать месяц выглядит так: Now.getMonth().
    • Новое правило: Now.getMonth() — это не текст, который должен быть виден на странице, а команда, которая указывает месяц. Поэтому не нужно ставить ее ни в какие кавычки.
  • Заканчиваем командой </SCRIPT>.

И вот что у нас получилось:

<SCRIPT LANGUAGE="javascript">

//Скрипт напечатает на странице номер месяца

Now = new Date();
document.write("Сейчас месяц " + Now.getMonth())

</SCRIPT>

Посмотрите на первый скрипт еще раз. Длинная строка уже не кажется такой страшной. Это просто объект Now и метод getЧто-либо() после него. Я разделил элементы даты дефисами. Помните, дефис должен быть виден на странице, поэтому его следует ставить в кавычки. Все части связаны между собой плюсами +.

Пробелы

Я научу вас одной маленькой хитрости. Сколько бы пробелов вы не ставили до и после знаков плюс, это никак не повлияет на видимый результат. Элементы пойдут сплошным текстом. Поэтому, если вам нужны пробелы, добавляйте их в части текста в кавычках. Например:

"Сейчас ровно "

Видите, я добавил пробел перед второй кавычкой? Когда скрипт отпечатается на странице, пробел окажeтся на своем месте. Помните: это не HTML. В Javascript существуют свои правила относительно пробелов.

Длинная строка

Я не буду разбирать ее во всех подробностях, потому что вы наверняка уже вошли в курс дела. Оставим только cтроку c датой. Вот как это выглядит:

document.write("Сегодня " + Now.getDate() +
"-" + Now.getMonth() + "-" + Now.getFullYear() + ".
Вы зашли на страницу ровно в: " + Now.getHours() +
":" + Now.getMinutes() + " и " + Now.getSeconds() +
" секунд.")

  1. Я начал с «Сегодня », прибавив пробел в конце.
  2. Следом знак плюс.
  3. Now.getDate() без кавычек, потому что нам нужен не текст, а цифры.
  4. Еще плюс.
  5. Потом дефис в кавычках, чтобы отделить следующие цифры. Никаких пробелов, потому что они должны стоять вплотную.
  6. Плюс.
  7. Потом Now.getMonth без кавычек, чтобы у нас был месяц.
  8. Плюс.
  9. Еще дефис в кавычках, чтобы он был виден на странице.
  10. Плюс.
  11. Еще один метод Now.getFullYear сообщит год.

Продолжайте дальше по этой схеме, и скрипт напечатает именно то, что вы хотите. Тогда вы всем сможете сказать, который час.

Кое-что об одной из самых интересных заморочек JavaScript. Должно быть, вы заметили, что номер месяца на один меньше, чем нужно. Почему? Цифры сообщает нам JavaScript, a JavaScript любит считать от нуля. Чудно, ничего не скажешь, но так уж вышло. Tо есть, январь нулевой месяц и так далее.

Так что же делать? Прибавить 1, разумеется! Тут требуется известная сноровка. Нужно ввести несколько переменных, то есть, присвоить имя некоему элементу (это еще будет в Уроке 6). Вы присваиваете new Date() имя, как уже делали раньше. Затем присваиваете имя команде, которая вызывает месяц. Ниже я назвал ее mpo (Mесяц Плюс Oдин). И прибавляете к ней единицу. Эту новую команду я назвал mpo1. На слух довольно путано, но не торопитесь. Вот как это выглядит:

<SCRIPT LANGUAGE="javascript">

Now = new Date();
var mpo = Now.getMonth();
var mpo1 = mpo + 1
document.write("Сейчас месяц
    " + mpo1 + ".");

</SCRIPT>

И вот что у вас получилось:

Это уж правильный месяц, или как?

Ваше задание

Сегодняшнее задание не такое уж сложное. Я предлагаю вам написать скрипт, который поместит на вашу страницу дату, разделенную дробями /. Приветственный текст должен быть зеленого цвета. Также отметьте, что это вы написали скрипт, потому что... так оно и есть!

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 4

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 4. Команда onMouseOver

Урок 4
Команда onMouseOver

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Мы обсудили объекты и методы. Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.
События — это то, что происходит. Они добавят динамики вашему сайту. Увидев их, посетители скажут: «Ух ты!», а сочинять длинные скрипты совсем не нужно.
Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).

Скрипт

<A HREF="http://www.newmail.ru"
onMouseOver="window.status='Бесплатный хостинг';
return true">Ссылка</A>

Все это должно быть на одной строке.

Эффект

Ссылка

Наведите курсор на ссылку и посмотрите на строку состояния в окне браузера.

.

Разбор скрипта

Вы уже знаете достаточно, чтобы понять смысл написанного. Давайте быстро разберем скрипт и попробуем его изменить.
Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Это понятно? Он используется внутри гиперссылки.
Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Видите?
Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Схема уже должна казаться вам немного знакомой: два элемента, разделенных точкой. До сих пор это означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.
Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. Это верно, но не будем лезть поперед батьки в пекло. Займемся пока окном и его строкой состояния.

После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Пожалуйста, обратите внимание на точку с запятой в конце строки.

return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.

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

Другие свойства

Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. Как насчет цвета фона? Это же свойство, верно? В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку. которая изменяла бы фон страницы с помощью обработчика onMouseOver.

  1. Во-первых, раз это ссылка, то сохраним ту же схему, которой сегодня уже пользовались.
  2. Что мы меняем, окно или нашего старого приятеля, документ? Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
  3. Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
  4. Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
  5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

Вот что у нас получилось...

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white';
return true">Не щелкать</a>

...а что это нам дает, смотрите здесь, в маленьком окне

А что, если я хочу и то, и другое

Ладно, и как вы собираетесь этого добиваться? Разберемся:

  • Здравый смысл подсказывает, что нужно написать две команды onMouseOver. Попробуем.
  • Мы хотим, чтобы два события произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как это означает конец.
  • Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.
  • Как там насчет этих дурацких кавычек? Помните, в кавычки ставятся отдельные элементы вроде текста. Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом мы показываем браузеру, что все это одно событие. Следите за мыслью?
  • Однако нам еще могут понадобиться одинарные кавычки...

Вернем документу первоначальный цвет...

<a href="http://www.newmail.ru"
    onMouseOver="document.bgColor='334775',
    onMouseOver=window.status='Бесплатная почта'; return
    true">Не щелкать</a>

...Результат смотрите там же:

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

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

Ваше задание

Посмотрим, не удастся ли мне запутать вас. Я собираюсь дать вам новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

Подумайте хорошенько, решите, что должно произойти сначала, что потом. На самом деле все это довольно просто.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 5

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 5. Еще несколько обработчиков событий

Урок 5
Еще несколько обработчиков событий

красным цветом даны примечания переводчика
Концепция - Команды и эффекты - Задание

Оглавление (в новом окне)

Концепция

Cейчас вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме. Так что если вам не чужда логика, вы легко сможете поместить их на свои страницы.

Команды и эффекты

Команда onClick (на щелчок)

Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick.
Чтобы продемонстрировать действие команды, я воспользуюсь методом alert. Если вы сделали задание к прошлому уроку, то знаете, что это такое. Вот еще раз его схема:

alert('текст, который появится в окне')

Таким образом, получаем:

<a href="http://www.jsp.newmail.ru" onClick="alert('Уже уходите!');">
Жмите сюда</a>

И вот что это нам дает (когда вы нажмете на ссылку, она сработает):

Жмите сюда

Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер поймет их, как окончание текста, а это не входит в ваши намерения. Ошибка.

Команда onFocus (на фокус)

Это замечательная команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).
Вот пример:

<form>
<input type="text" size="30"
onFocus="window.status='Текст в строке состояния';">
</form>

Вот что вы получаете (щелкните в поле ввода и посмотрите на строку состояния):

Команда onBlur (на потерю фокуса)

Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Внизу у меня строка для ввода текста, в которой уже что-то написано. Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке.

Здорово, а? Вы можете и сами догадаться, как это делается, но все равно вот вам код:

<form>
<input type="text" size="45" value="Впишите свое имя и щелкните по другой строке"
onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>

Команда onChange (на изменение)

Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Когда мы ближе познакомимся с формами, это станет понятнее. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.

<form>
<input TYPE="text" size="45"
value="Измените текст и щелкните по другой строке"
onChange="window.status='Текст был изменен';">
</form>

Это дает вам следующее...

Команда onSelect (на выделение)

Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.

Команда onSubmit (на отправку)

Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».

Формат такой:

<form>
<input TYPE="submit"
onSubmit="parent.location='thanksalot.html'";>
</form>

Вот что у вас выходит (щелкайте по кнопке):

Поглядите, у нас новая команда. Схема как будто знакомая, но какая-то странная.
parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='' означает ссылку.

Команды onLoad и onUnload (на вход и выход)

Пока я не привожу примера на эти команды, так как им отведен отдельный урок, однако я счел необходимым их упомянуть.
Обе они помещаются внутри строки HTML <BODY>. Они вызывают событие, когда страница открывается или закрывается, то есть когда вы уходите со страницы. Эти команды потребуются вам, когда мы возьмемся за функции.

.

Ваше задание

На этот раз я предлагаю вам создать форму, которая будет взаимодействовать с пользователем.
Форма должна иметь три элемента:

  • поле ввода с просьбой ввести имя;
  • два поля для флажков с вопросом о том, что больше нравится пользователю, мороженое или шоколад;
  • кнопку отправки данных.

С каждым элементом должно произойти следующее:

  • При вводе имени в строке состояния должны появиться слова: «Впишите сюда свое имя».
  • Два поля с флажками должны отослать в строку состояния слова: «Вы выбрали...» и выбор пользователя.
  • При нажатии на кнопку должно выскочить окно предупреждения, благодарящее пользователя за участие в опросе.

Возможный ответ здесь

Концепция - Команды и эффекты - Задание

Вперед, на Урок 6

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 6. Запрос пользователю

Урок 6
Запрос пользователю и переменные

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

В этом уроке у меня две концепции. Одна только для тех случаев, когда вы решите запросить у пользователя информацию. Вторая, создание переменных, останется с вами на всю вашу жизнь в JavaScript.
Между прочим, научившись добавлять события к HTML, мы возвращаемся к полным скриптам, поэтому нам снова понадобится стандартный формат от <SCRIPT LANGUAGE="javascript"> дo </SCRIPT>. Вот что мы собираемся сделать: мы спросим у пользователя, как его зовут, и присвоим этому имени переменную. Как только переменная будет присвоена, мы сможем ввести ее в строку document.write, которая напечатает это имя на странице.

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

Скрипт

<SCRIPT LANGUAGE="javascript">

/* Скрипт предназначен для того, чтобы получить
от пользователя информацию и поместить ее на страницу */

var user_name = prompt ("Напишите свое имя","Здесь");
document.write("Привет, " + user_name + "! Милости просим!");

</SCRIPT>

Текст в скобках должен располагаться на одной строке.

Эффект

.

Разбор скрипта

Стоп! Что это такое /* */?

Да, я вставил еще одну новую команду. Эти штуки означают комментарий внутри скрипта. Если помните, урока три назад я уже показывал вам двойную дробь //, отделяющую текст вашего комментария от скрипта. Это то же самое, но лучше. Двойную дробь необходимо ставить в начале каждой новой строки. Эти же команды годятся для пространных комментариев. Нужно поставить /* в начале и */ в конце, и все, что окажется между этими знаками, останется комментарием и не войдет в скрипт.

Создание переменной

Переменные имеют первостепенное значение в JavaScript. Вам необходимо научиться создавать их. В двух словах: вы назначаете имя, состоящее из одного слова, функции JavaScript. Помните, как мы помещали дату на страницу с помощью метода getDate()? В строке document.write мы написали метод getDate() целиком. Сделать это один раз было не так уж трудно. Но что если нужно было бы написать это десять раз на одной и той же странице? Писать и писать одно и то же порядком надоедает.
Потому мы и вводим переменную, которая должна представлять окончательный результат метода. Возьмем, к примеру, переменную d. Тогда нам нужно будет только однажды написать getDate() и назначить методу переменную d. И на протяжении всего оставшегося скрипта будем просто писать d там, где нужно поставить дату. Это понятно? Вернемся к примеру:

Вот строка из скрипта, которая назначает переменную:

var user_name = prompt ("Напишите свое имя","Здесь")

Переменная была создана по следующей схеме:

  • var (от variable, переменная) объявляет, что следующим словом будет имя переменной.
  • user_name (имя пользователя) — имя переменной. Я его придумал. Оно необязательно должно быть таким длинным. По правде, я мог бы назвать ее N, если б захотел. Просто удобнее так называть переменные, чтобы легко было вспомнить, о чем идет речь.
  • Помните, что регистр имеет значение для JavaScript, следовательно, если вы назвали переменную Dog, то буква D каждый раз должна быть заглавной, иначе браузер посчитает их за два разных слова.
  • Здесь нет никаких кавычек, просто ставьте одно слово за другим, как показано выше.
  • Знак равенства = указывает на то, что переменная будет равна результату следующей команды.
  • В нашем случае переменная будет представлять результат, полученный с помощью окна запроса.

Команда Prompt

В данном примере я воспользовался новой командой prompt (запрос). Это метод, вызывающий окно, которое вы видели, заходя на страницу. Если хотите снова его увидеть, перезагрузите страницу. Вот формат запроса:

var variable_name = prompt("Текст в окне","Текст в строке ввода")

Вы увидите, что имя переменной включенo в схему скрипта, иначе вы получили бы запрос, но полученные им данные никуда бы не пошли.

Если вам интересно...

  • Чтобы строка ввода оставалась чистой, ничего не пишите между второй парой кавычек.
  • Если вы не укажете в скобках второй пары кавычек, в строке появится слово undefined.
  • Если вы написали что-либо в строке ввода и пользователь выберет ОК, ничего не меняя, на странице появится то, что вы написали.
  • Если в строке ввода ничего нет и пользователь выберет OK, ничего не вписав, на странице появится слово null.

Вернемся к разбору

Теперь, когда вы знаете все составляющие, перейдем к основной части:

var user_name = prompt ("Напишите свое имя","Здесь");
document.write("Привет, " + user_name + "! Милости просим!");

  • Имя переменной user_name присвоено результату запроса.
  • prompt просит пользователя написать свое имя.
  • В строке ввода читаем: "Здесь."
  • Точка с запятой в конце строки.
  • document.write вызывает текст "Привет, ".
  • Знак плюс + отмечает, что все элементы идут друг за другом.
  • user_name вводит результат запроса. Никаких кавычек — эти слова не нужны нам на странице.
  • Еще плюс.
  • "! Милости просим!" завершает текст.
  • Точка с запятой.

Пожалуйста, постарайтесь хорошенько понять концепцию переменных. В этом языке они используются постоянно. Без них не обойтись.

Ваше задание

...повтор пройденного.

Oтлично, мы прошли шесть уроков. Пора приниматься за скрипты потруднее. Моя цель не сбить вас с толку, а показать, что у вас уже достаточно знаний для создания шикарных эффектов посредством команд JavaScript. Сегодня я хочу, чтобы вы посмотрели на скрипт, указанный ниже, и объяснили, как работает каждая его часть. Вы удивитесь тому, как легко эти чудовища раскладываются на понятные элементы, как только возьмете в толк, что происходит.

Здесь пример JavaScript

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 7

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 7. Концепция свойств

Урок 7
Концепция свойств

красным цветом даны примечания переводчика
Концепция - Скрипт - Эффект - Разбор скрипта - Задание

Оглавление

Концепция

Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.
Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. В Уроке 6 мы имели дело с переменными. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. В Уроке 4 мы работали со свойством документа bgColor.

Было бы трудно рассмотреть все возможные свойства на одной странице. У меня три книжки по JavaScript, и в них я насчитал 56 различных свойств, определяющих многочисленные объекты. Поэтому сейчас я расскажу вам о нескольких наиболее популярных и о том, какую пользу они приносят.

Скрипт

Ниже вы увидите множество скриптов, но все они составлены по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в document.write(). Внимание: 1) заголовки жирным шрифтом не являются частью самих скриптов; 2) текст в скобках после document.write() должен располагаться на одной строке.

Свойства объекта navigator (браузер)

<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".
<BR>Кодовое название " +acn+ ", заголовок "
+ua+ "." );
</SCRIPT>

Свойства объекта document

<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"
+bgc+ "</B>.")
document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки этой страницы
<B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки этой страницы
<B>" +vlc+ "</B>.")
document.write("<BR>URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>До этого вы были на странице <B>" +
ref+ "</B>.")
document.write("<BR>Заголовок этой страницы <B>" +t+ "</B>.")
document.write("<BR>Последние изменения внесены: <B>"
+lm+ "</B>.")
</SCRIPT>

Свойства объекта history

<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этой страницы вы посетили" +h+ " страниц.")
</SCRIPT>

Два свойства объекта location (адрес)

<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst +
"</B>." )
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страница находится на <B>" + hstn +
"</B>." )
</SCRIPT>

Эффект

Некоторые сведения о вашем компьютере:

.

Разбор скрипта

Поговорим о каждой группе отдельно...

Почему местами шрифт жирный?

Да так, ради забавы. Найдите в скрипте элементы, которые написаны жирным шрифтом. Я просто добавил команды <B> и </B> по обеим сторонам от имени переменной. Раз это document.write, в текст можно вписать любые команды HTML, изменяющие текст. Только следите за тем, чтобы команды HTML находились внутри двойных кавычек, иначе браузер посчитает их частью скрипта — это было бы ошибкой.

Вернемся к нашим свойствам...

Свойства объекта navigator

<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;

document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".<BR>Кодовое название " +acn+
    ",
заголовок " +ua+ "." );
</SCRIPT>

Люди обожают эти штуки. Объект navigator имеет четыре свойства. Обратите внимание на заглавные буквы!

  • appName сообщает название браузера, например, Netscape или Explorer.
  • appVersion сообщает версию браузера и платформу, на которой он работает.
  • appCodeName сообщает кодовое имя, данное браузеру, например, Netscape называет свой браузер Mozilla.
  • userAgent сообщает заголовок протокола, используемого браузером во время работы с серверами.

Иногда важно знать версию браузера. Чуть позже мы изучим команды If (если). Зная браузер пользователя, можно дать команду: "Если браузер такой-то, сделать то-то."

Свойства объекта document

<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"
+bgc+ "</B>.")
document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки этой страницы
<B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки этой страницы
<B>" +vlc+ "</B>.")
document.write("<BR>URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>До этого вы были на странице <B>" +
ref+ "</B>.")
document.write("<BR>Заголовок этой страницы <B>" +t+ "</B>.")
document.write("<BR>Последние изменения внесены: <B>"
+lm+ "</B>.")
</SCRIPT>

Свойства документа очень популярны в JavaScript. Здесь я перечислил девять. На самом деле их тринадцать, но остальные четыре вам пока не нужны. Я перечислю их ниже:

  • bgColor сообщает цвет фона в шестизначном коде.
  • fgColor сообщает цвет текста в шестизначном коде.
  • linkColor сообщает цвет ссылки.
  • alinkColor сообщает цвет активной ссылки.
  • vlinkColor сообщает цвет посещенной ссылки.
  • location сообщает URL страницы.
  • referrer сообщает, с какой страницы пришел пользователь. Если информация недоступна, скрипт оставляет пустое место.
  • title сообщает заголовок документа между командами TITLE.
  • lastModified сообщает дату, когда были внесены последние изменения в страницу (на самом деле дату, когда страница была загружена на сервер или сохранена на жестком диске).
  • не показаны: cookie, anchors, forms, links.

Опять же, воспользовавшись командой If, вы можете сказать: "Если время больше 6 вечера, пусть текст будет белый, а фон черный. Если еще нет 6 вечера, то пусть фон будет голубой, а текст зеленый". Существует множество способов использовать свойства документа.

Свойства объекта history

<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этого вы посетили " +h+ " страниц.")
</SCRIPT>

Это очень популярный объект. Многим хочется иметь возможность вернуть пользователя на посещенные им страницы, то есть, воспроизвести кнопки "Вперед" и "Назад" на панели браузера. Объект history это позволяет.

Объектом является журнал посещений history. Это список страниц, посещенных вашим браузером.
Свойство length (протяженность). Оно тоже популярно. Позже вы узнаете, как можно использовать его с другими командами. Указывая это свойство, вы просите скрипт просто сообщить количество страниц в папке "history".

Существует метод go() (пойти), который позволяет передвигаться по history.length.

Два свойства объекта location

<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst + "</B>.")
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страница находится на <B>" + hstn + "</B>.")
</SCRIPT>

Здесь объектом является location. Это URL на языке JavaScript, адрес страницы. Перед вами два свойства объекта location, host, и hostname. Команды выполняют одну и ту же задачу, сообщают URL либо в текстовом формате, либо номером IP, в зависимости от сервера. Но...

  • location.host сообщает URL плюс "порт", к которому прикреплен пользователь.
  • location.hostname сообщает только URL.

Если вы получаете одинаковый результат от обеих команд, значит, ваш сервер не прикрепил вас к специальному порту. Говоря техническим языком, свойство "порта" — ноль.
Кстати, эти две команды не работают, если просматривать страницу с жесткого диска. Результат может быть только в том случае, если она размещается на сервере.

Есть еще множество всяческих свойств, с которыми вы встретитесь во время наших уроков. Это наиболее употребимые.

Ваше задание

Oтлично, умники, сделайте-ка вот что: пользуясь одной из вышеперечисленных команд, напишите JavaScript, который создает ссылку на страницу на вашем сервере. Например, если вы находитесь на www.you.ru, JavaScript создаст ссылку на www.you.ru/index.html.
Также, каким бы свойством вы ни воспользовались, присвойте ему переменную.

Здесь возможный ответ

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 8

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 8. Иерархия объектов

Урок 8
Иерархия объектов

красным цветом даны примечания переводчика
Концепция - Что я имею в виду - Действие иерархии объектов - Разбор иерархии объектов - Задание

Оглавление (в новом окне)

Концепция

Уфф! Сделаем паузу и посмотрим, что мы уже знаем. В JavaScript есть объекты, похожие на существительные или предметы. У объектов есть свойства, которые описывают их, как прилагательные описывают существительные. Мы пользуемся схемой oбъект.свойство.

Еще у объектов есть методы, или действия, которые можно к ним применить. После метода ставятся скобки по схеме oбъект.мeтoд(). У разных объектов разные свойства и методы.
А теперь мы узнаем самый большой секрет JavaScript, иерархию объектов. Как только вы ее поймете, cчитайте, что JavaScript у вас в кармане!

Что я имею в виду

Действие иерархии объектов

Все команды начинаются с наивысшего объекта, window (окно браузера), и идут по нисходящей. Окна и рамки (frames) принадлежат объекту window. Их не нужно перечислять, если только их не больше одного. Top, self, parent и frames — "встроенные" имена для окон. Много о них не беспокойтесь, просто знайте, что они существуют.

Вот несколько примеров. Обратите внимание на иерархию.

document.pic.src = "pic1.gif" | window не нужно ставить в самом начале. Предполагается, что это все и так внутри окна. Команда document.pic.src указывает на рисунок, которому дано имя pic. Это понятно? Документ — это страница, pic — имя элемента, а SRC — источник элемента, "pic1.gif".
document.write(location.href) | write() — это метод объекта document. Location.href показывает полный URL окна. Обратите внимание, что location и dосument находятся на одном уровне (оба выделены зеленым цветом). Это значит, что вы получаете адрес документа того же уровня.

.

Разбор иерархии объектов

  • Самая большая путаница в том, что некоторые объекты также являются и свойствами.
  • Window — только объект.
  • Document является свойством окна, но в свою очередь и объектом.
  • Form — это свойство документа, но также и объект со своими свойствами!
  • Value (значение) и SRC (источник) — только свойства!
  • Здесь представлены не все объекты и свойства. Однако этого достаточно, чтобы вы поняли концепцию в целом... Все команды начинаются сверху от window и идут по нисходящей. То есть, нельзя написать document.text.form или pic.src.document. Это неправильный порядок, следует писать слева направо от главного к второстепенному.
  • Важно: чтобы показать содержимое поля формы, существует свойство value (значение), например, document.form.text.value. Если вы просто напишете document.form.text, это даст информацию о поле формы, но не о его содержании!

    Поле с флажком может иметь value "on" или "off". Текстовое поле может иметь value "hidden" (скрытое), если вы не хотите, чтобы пользователь его видел. Ясно?

Ваше задание

Напишите полные команды, начиная с Window, хотя обычно это не требуется. Пускай имя изображения будет mypic, имя формы myform.

  1. Форма:
  2. Содержание поля lname (фамилия):
  3. Содержание поля fname (имя):
  4. Измените название картинки на "marigold.gif":

Концепция - Что я имею в виду - Действие иерархии объектов - Разбор иерархии объектов - Задание

Вперед, на Урок 9

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 9. Создание функции

Урок 9
Создание функции

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Cоздавая переменную, вы присваиваете имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.

Скрипт

Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает.
Вот обе части:

<SCRIPT LANGUAGE="javascript">

<!-- Скрыть от браузеров, не читающих Javascript

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;

defaultStatus = "Вы прибыли на страницу " + t +
    ".";
}
// не скрывать -->

</SCRIPT>

...и команда onLoad в <BODY>:

<BODY BGCOLOR="хххххх" onLoad="dateinbar()">

Эффект

Эффект скрипта можно увидеть в строке состояния. Этим же скриптом мы пользовались для получения даты на прошлыx уроках.

.

Разбор скрипта

Что это <!-- --> за штуки такие?

Еще одна команда. Возможно, она кажется вам знакомой. Этими знаками вы пользуетесь для комментариев в теле HTML:

<!-- Это текст комментария, не видимый на странице -->

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

Однако соблюдайте несколько правил:

  • Команды комментария должны находиться между <SCRIPT> и </SCRIPT>. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.
  • Текст после команды <!-- должен находиться на одной строке.
  • Перед заключительной командой --> должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.
  • Нет, совсем не обязательно писать текст к этим командам. Я вставил его, чтобы вам проще было понять их назначение.
  • Пользуйтесь приведенной выше схемой, и у вас не будет проблем.

Вернемся к разбору

Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.

function dateinbar()
{
var d = new Date();
var y = d.getFullYear();
var da = d.getDate();
var m = d.getMonth() + 1;
var t = da + '/' + m + '/' + y;
defaultStatus = "Вы прибыли на страницу " + t +
    ".";
}

Схема довольно понятная. Вы пишете "function" и даете ей любое имя, какое вашей душе угодно, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript.
Н о обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, я как бы создаю новый метод для выполнения задачи.
На этот раз я выбрал имя "dateinbar()" (дата в строке состояния), потому что это функция и делает — помещает дату в строку состояния.

Очень важно!
Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}. Видите, я поставил их сразу после имени функции и в самом конце?

Текст внутри фигурных скобок должен быть вам уже знаком. Тот же скрипт мы использовали пару уроков назад.

  • Создается переменная для года;
  • Еще одна для числа;
  • Еще одна для месяца;
  • Затем четвертая для даты целиком;

Последняя команда новая:

defaultStatus = "Вы прибыли на страницу " + t + ".";

"defaultStatus" (строка состояния по умолчанию) — свойство объекта window. Его цель — поместить текст в строку состояния внизу окна браузера. Но почему не написать просто window.status?

Хороший вопрос. Этого нельзя сделать, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, берем defaultStatus. Есть только одна строка состояния — она же и по умолчанию.

Команда "onLoad="

Ребята, у нас новый обработчик! Команда onLoad (на вход, загрузку) (обратите внимание на заглавные буквы) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}.
Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.

Расположение элементов

Это имеет не последнее значение. Вы знаете, что onLoad идет в строку BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.

Практически любой набор команд JavaScript можно записать в виде функции.

Ваше задание

Сегодня не самое простое задание. Создайте функцию, которая вызовет два запроса (prompt). (Подсказка: один следует за другим с новой строки.) Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом:

Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!

Непременно создайте переменную для адреса страницы.

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

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 10

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 10. Команды onUnload и onMouseOut

Урок 10
Команды onUnload и onMouseOut

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Это два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). Я свел их в одном уроке, потому что обе они начинают действовать после того, как вы что-то сделали. onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей onMouseOut начинает действовать, если курсор увести со ссылки. Вы также знаете, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnload действует, когда пользователь уходит со страницы.

Скрипт

С мышью:

<A HREF="les10.htm" onMouseOver="window.status='Эй! Убирайся с меня!';
return true"
onMouseOut="window.status='Так-то лучше, спасибо'; return true">
Наведите курсор на эту ссылку и уведите обратно</A>

При уходе со страницы:

<BODY onUnload="alert('Уже уходите?')">

Эффект

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

Наведите курсор на эту ссылку и уведите обратно

.

Разбор скрипта

Эффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Помните, несколько уроков назад мы разделяли два обработчика событий запятой, чтобы они происходили одновременно? Здесь не тот случай. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.

Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.

Ваше задание

Потренируемся с функцией, onMouseOver и onMouseOut.

  • Создайте страницу с гипертекстовой ссылкой.
  • Когда курсор находит на ссылку, в строке состояния должны появляться слова: «Привет, пользователь название браузера!».
  • Когда курсор уходит со ссылки, в строке состояния должен появляться текст: «Не скучаете у нас на U RL страницы?»
  • Если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время»;
  • Время должно определяться через функцию.
  • Не пользуйтесь командой onClick, чтобы вызвать окно предупреждения, возьмите команду onUnload.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 11

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 11. Новые окна

Урок 11
Новые окна

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Это первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функции поместить две разные страницы в одном документе.

Начнем с основ.

Скрипт

<SCRIPT LANGUAGE="javascript">

window.open('opened.html', 'joe', config='height=300,width=300')
self.name="main window"

</SCRIPT>

Эффект

Вы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с двумя ссылками: на HTML Goodies и закрывающая окно.

.

Разбор скрипта

Расположение на странице
Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать без задержки. Когда вы имеете дело с функцией, скрипт помещается между командами <HEAD>. Здесь я хочу сделать вам другое предложение.

Если вы собираетесь открывать новое окно, ставьте скрипт ближе к концу документа. Проще говоря, пусть он идет в последнюю очередь. Причина простая: сначала загрузится страница, а потом всплывет окошко. Если команда стоит в начале, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Скорее всего он закроет новое окно, не успев им воспользоваться.

Это только мое мнение. На самом деле можно ставить скрипт куда угодно, и он будет работать. Просто я считаю, что чем позже откроется новое окно, тем лучше для вас и для посетителей ваших страниц.

Не стоит злоупотреблять всплывающими окнами. По себе и по другим знаю, как это иногда раздражает. Если же появление нового окна оправдано, то хорошо бы предупредить об этом заранее.

window.open
Нельзя сказать яснее, чем это: window (окно) — объект, a open (открыть) — метод, который на него воздействует.

Конфигурация нового окна
Информация об этом находится в круглых скобках (это называется примером, помните?) Вот схема, которой вы будете следовать:

('URL документа в новом окне', 'Название нового окна', config='параметры нового окна')

Сегодняшний образец:
('opened.html','joe',config='height=300,width=300')

  • opened.html — это URL страницы, которая появится в новом окне. Если страница располагается на другом сервере, то добавьте http:// и так далее.
  • joe — название нового окна. Через минуту я объясню вам, для чего оно нужно. config= указывает, что следующие команды относятся к конфигурации нового окна.

Команды конфигурации
Они сообщают, что новое окно будет размером 300 на 300 пикселей.

Кстати, всегда делайте ваше окно немножко больше, чем нужно вам. Может быть, у кого-то другое разрешение экрана, и ваши размеры окна ему не годятся.

Обратите внимание, что команды height (высота) и width (ширина) разделены только запятой без пробелов, а значения поставлены в одинарные кавычки, так как эти два элемента являются подкомандами config. Пробел для браузера означает конец команды. Ошибка.
Есть множество подкоманд для команды config. Про высоту и ширину вы уже знаете, они определяются в пикселях. Остальные подкоманды употребляются со словами «yes» или «no» в зависимости от того, нужны ли в новом окне эти элементы. (Можно ставить «1» вместо «да» и «0» вместо «нет».) Помните, никаких пробелов между подкомандами и одинарные кавычки.

  • toolbar= отвечает за наличие панели инструментов c кнопками НАЗАД, ВПЕРЕД, СТОП и т.д.
  • menubar= отвечает за наличие строки меню с элементами ФАЙЛ, ПРАВКА, ВИД и т.д.
  • scrollbars= отвечает за наличие полосы прокрутки. Я никогда не делаю новое окно с полосой прокрутки. По-моему, это убивает весь эффект.
  • resizable= указывает, сможет ли пользователь изменить размер окна по своему желанию.
    • Я вас умоляю, никогда не ставьте здесь «нет», если только это не художественная инсталляция!
  • location= отвечает за наличие адресной строки, где виден URL страницы.
  • status= отвечает за наличие строки состояния.

От строки с заголовком вы не избавитесь никогда, хотите вы этого или нет.

Может быть, вы думаете, что все вышеперечисленное — свойства. Нет. Если вам проще их запомнить, считая свойствами, отлично, считайте их чем угодно. Но в действительности они называются характеристиками или атрибутами. А в общем, назови хоть горшком, научись только пользоваться.

Тэги в новом окне
Всплывающее новое окно — это не просто рамка для страницы.
Как видите, я поставил две ссылки. Первая открывает домашнюю страницу HTML Goodies в главном окне. Вот как это получается:

<A HREF="http://www.htmlgoodies.com" TARGET="main window"></A>

У большого окна есть имя, «main window» (главное). Вот почему я называл его главным на протяжении всего урока. В скрипте это обозначено строкой self.name="main window". Добавляем в ссылку HREF TARGET="--" (цель) и указание на main window.

А если надо, чтобы страница загружалась в маленьком окошке? Что ж, как оно называется? «joe». Помните? Просто нужно написать «joe» после команды target.

С помощью многократных команд window.open можно вызывать многократные окна. Только следите за тем, чтобы у каждого нового окна было свое имя. Можете связывать окна ссылками при условии, что правильно указываете имена окон в команде target.

Закрыть окно
Вторая ссылка нового окна закрыла его. Вот как это сделано:

<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>

Это обычная ссылка HREF, которая никуда не ведет. Видите пустые кавычки? Команда onClick="self.close" закрывает окно и никуда не ведет.
self (само, себя) — это свойство может относиться к любому объекту. В нашем случае это свойство окна. Команда close (закрыть) закрывает окно.

Еще кое-что
Допустим, вы хотите открыть окно по команде, а не когда пользователь заходит на страницу. Вот как это можно сделать:

<A HREF="les11.htm"
    onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">Щелкните, чтобы открыть
    'joe'</A>

И вот что у вас выйдет (если вы еще не закрыли маленькое окно, сделайте это, потому что ссылка попытается его открыть):

Щелкните, чтобы открыть 'joe'

Это ссылка HREF, которая направлена на самое себя. Команда onClick делает работу, а параметры содержатся в скобках().

В следующем Уроке мы поговорим о том, как из одной страницы сделать две.

Ваше задание

Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300 пикселей и с двумя ссылками:

  • Одна откроет новую страницу в главном окне.
  • Вторая откроет новую страницу в том же окне.
  • Страница, которая откроется в том же маленьком окне, должна содержать ссылку, закрывающую окно.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 12

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 12. Новые окна

Урок 12
Новые окна через функцию

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

В Уроке 11 мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках.

Сейчас мы попробуем создать функцию, которая откроет новое окно, причем и новое окно, и все его содержимое будет вписано в тот же документ HTML. То есть в буквальном смысле слова мы вложим две страницы в одну.

Скрипт

<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
var OpenWindow=window.open("", "newwin",
"height=300,width=300");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Новое окно</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='white'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<font size=+1>Новое окно</font><P>")
OpenWindow.document.write("<a href=
'http://jsp.newmail.ru' target='main window'>
Эта ссылка<BR>откроется в главном окне</a><p>")
OpenWindow.document.write("<P><HR><P>")
OpenWindow.document.write("<a href=''
onClick='self.close()'>
Эта закроет окно</a><p>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
self.name="main window"
}
</SCRIPT>

...и в строке BODY:

onLoad="openindex()"

Помните, текст в скобках должен находиться на одной строке.

Эффект

Эффект тот же, что и в прошлом уроке: открылось окно того же размера с теми же ссылками. Разница в том, что все это было написано на одной странице. Чтобы увидеть, как действует скрипт,

с одной разницей — здесь новое окно запускается кнопкой, а не командой onLoad.

.

Разбор скрипта

Главная часть скрипта, содержащая функцию, помещается между командами <HEAD> и </HEAD>, как большинство функций.

По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Вот так:

var OpenWindow=window.open("", "newwin", "height=300,width=300');

Это было на прошлом уроке. Единственная разница в том, что вы не указываете URL. Видите пустые парные кавычки? Они говорят браузеру, что он должен искать информацию о новом окне. То же самое, что и не ставить URL в ссылку, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. Точно так же и тут. Браузер стал бы загружать новую страницу, а не выполнять скрипт.

Теперь начинаем писать страницу HTML, которая будет внутри нового окна. Вот первая строка текста:

OpenWindow.document.write("<HTML>")

Переменная OpenWindow (то есть новое окно) говорит, что этот текст должен быть вписан в документ.

Взгляните на скрипт. Каждая новая строка следует той же схеме. Можно написать сотню строк, создающих законченную страницу. Наш скрипт совсем небольшой, так как это наглядное пособие.

Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные. Иначе будут проблемы.

Наконец командой onLoad в строке BODY запускается функция.

Ваше задание

Сегодня вам придется написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя, вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеется, допишите еще ссылку, которая закроет окно.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 13

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод и оформление © Татьяна.


Урок 13. Метод confirm

Урок 13
Метод confirm (введение в if и else)

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Команда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку «Отмена» в диалоговое окно. И то, и другое — методы.

Одна команда сама по себе многого не дает. Нет никакой разницы, что вы выбираете — «ОК» или «ОТМЕНА». Но стоит добавить функции IF (если) и ELSE (иначе), и готовы отличные эффекты.

Скрипт

<SCRIPT LANGUAGE="javascript">

confirm("Уверены, что хотите войти?")

</SCRIPT>

Знакомо? Пора бы уже. То же самое, что и alert, кроме слова confirm. Вот основной пример

того, что делает скрипт. Как видите, немного. Но вот вам та же команда с некоторыми добавлениями:

<SCRIPT LANGUAGE="javascript">

if (confirm("Уверены, что хотите на прошлый урок?") )

{
parent.location='http://www.jsp.newmail.ru/les12.htm';
alert("Счастливого пути");
}

else
{
alert("Tогда оставайтесь");
}

</SCRIPT>

Эффект

Это уже кое-что. Вот ссылка, которая задаст вопрос. Только на этот раз, если нажмете «OK», то пойдете по ссылке, а если щелкнете по «Отмене», то останетесь.

Здорово, а? Давайте разберемся, как это делается.

.

Разбор скрипта

У вас есть выбор
Во-первых, скрипт говорит:

if (confirm("Вы уверены, что хотите пойти на прошлый урок?") )

Это значит Если (Здесь ваш шанс сделать выбор)

В нашем случае сonfirm предлагает альтернативу: «OK» и «Отмена». Можно сказать, Да и Нет. Обратите внимание на скобки. После команды IF всегда идут скобки, но, как известно, команды сonfirm тоже требует скобок. Следовательно, берем две пары скобок, одна внутри другой.

Сразу же после этого идут команды, выполняемые при каждом варианте ответа. Обратите внимание на фигурные скобки{}. Ведь в действительности это функции. Первая из них показывает, что должно произойти, если пользователь выберет ОК (или Да).

{
parent.location='http://www.jsp.newmail.ru/les12.htm';
alert("Счастливого пути");
}

Если помните, несколько уроков назад я говорил, что parent.location означает ссылку. Дальше идет обыкновенная команда alert. Не забудьте про точки с запятой в конце строк.

А что если я выберу отмену?
Мы уже знаем, что если выбрать ОК, запускается функция IF (если). Отмена — другой выбор. Видите, сразу после фигурной скобки идет команда ELSE (иначе), как бы «если нет». И тогда следующий текст...

else
{
alert("Tогда оставайтесь");
}

...означает: если нет, тогда вызвать окно и не менять страницу.

Все это вместе и дает пользователю возможность выбора: входить или не входить.

Это самые основы использования IF и ELSE. Позже команде IF мы посвятим целый урок. Она того заслуживает, как вам кажется? Аплодисменты команде IF, дамы и господа!

Ваше задание

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

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 14

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 14. Математические переменные

Урок 14
Математические переменные

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

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

Скрипт

<BODY>
<SCRIPT LANGUAGE="javascript">
var numsums = 10 + 2
alert("10 + 2 равно " + numsums)
var x = 10
alert("десять — это " + x)
var y = x * 2
alert("10 X 2 = " + y)
var z = "Привет " + "Пока"
alert(z)
</SCRIPT>
</BODY>

Эффект

.

Разбор скрипта

<BODY>
<SCRIPT LANGUAGE="javascript">
var numsums = 10 + 2
alert("10 + 2 равно " + numsums)
var x = 10
alert("десять — это " + x)
var y = x * 2
alert("10 X 2 = " + y)
var z = "Привет " + "Пока"
alert(z)
</SCRIPT>
</BODY>

Скрипт устанавливает переменную numsums. Видите, она равна 12 (10+2)? Затем он переводит переменную в alert и показывает, что 10 + 2 = переменная или 12. Ясно?

Другая переменная, х, приравнивается к 10, и alert тоже показывает ее значение.

Следующая переменная, y, равна x, умноженному на 2. Дважды десять — двадцать, не правда ли? Ответ тоже виден в окне alert.

Наконец создается переменная z, которая доказывает, что с помощью знаков исчисления можно соединять текст. И снова метод alert.

Посмотрите еще раз, как работает скрипт.

  • Переменные начинаются с VAR (от слова variable, переменная), следом идет имя, знак = и значение переменной. VAR можно не писать, но я советую вам не отказываться от него, пока вы не набьете руку.
  • Имя переменной может состоять из любого количества букв. Но лучше давать им названия, которые что-то значат. И, ради собственного удобства, не слишком длинные. Не пользуйтесь пробелами.
  • Имена переменных различают регистр! То есть 'Х' и 'х' — это две разные переменные.
  • Значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе скрипт поймет их как текст с числовым значением 0!
  • Сложение, вычитание, умножение и деление выражаются знаками: +, -, *, и / соответственно.
  • Знак плюс (+) выполняет две задачи: складывает числа или печатает вместе два фрагмента текста.
  • Во всех языках программирования есть зарезервированные слова, например, названия команд. В любой книжке есть их перечень. Этими словами называть переменные нельзя. Например, не надо использовать в качестве переменной, скажем, слово onMouseOver.
  • Если необходимо, вместо пробела ставьте знак _ user_name.

Ваше задание

Перепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 15

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 15. Смена картинки через onMouseOver

Урок 15
Смена картинки через onMouseOver

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Вспомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в Уроке 4.

Еще раз обратите внимание, что не требуются тэги <SCRIPT> и </SCRIPT>. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

Скрипт

<a href="http://nonags.online.ru/main.html"
    onMouseOver="document.pic1.src='a.gif'"
    onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"></a>

.

Эффект

..

Разбор скрипта

<a href="http://nonags.online.ru/main.html"
    onMouseOver="document.pic1.src='a.gif'"
    onMouseOut="document.pic1.src='b.gif'">

<IMG SRC="b.gif" BORDER=0 NAME="pic1"> </a>

Вы уже знаете о событиях достаточно, чтобы самостоятельно разобрать скрипт. Когда убираете курсор с картинки, появляется b.gif. Когда наводите на картинку, появляется а.gif.

Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.

  • onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
  • Так как необходимо ставить кавычки после onMouseOver= и onMouseOut=, название файла *.gif ставится в одинарные кавычки.
  • document.pic1.src следует иерархии объектов, о которой мы говорили в Уроке 8. Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
  • В этом примере onMouseOver меняет источник изображения на а.gif.
  • ОnMouseOut заставляет объект изображение показывать а.gif.
  • Имейте в виду, что для наилучшего эффекта картинки должны быть одинакового размера.

Ваше задание

Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 16

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 16. Смена картинок через функцию

Урок 16
Смена картинок через функцию

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Вот вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.

В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.

Скрипт

<HTML>
<HEAD>
<title></title>
<SCRIPT LANGUAGE="JavaScript">
function up()
{
document.mypic.src="up.gif"
}
function down()
{
document.mypic.src="down.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>Пример анимации</h2>

<A HREF="http://www.jsp.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0>
</BODY>
</HTML>

Эффект

Простенькая анимация

Если быстро водить мышью туда-сюда, кенгуру как будто подпрыгивает.

.

Разбор скрипта

  • Не забывайте про регистр и <script language= "javascript">

function up()
{
document.mypic.src="up.gif"
}

function down()
{
document.mypic.src="down.gif"
}

  • Функции выполняют то же, что и команды на прошлом уроке. Помните иерархию объектов? Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().

<A HREF="http://www.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

  • Схема практически та же, что и на прошлом уроке.
  • Oбычно функция используется для многократных повторений, мы просто хотели сделать наш пример короче.
  • Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:

<SCRIPT LANGUAGE="JavaScript">

function up() {
document.mypic.src="up.gif"
}
function down() {
document.mypic.src="down.gif"
}

function up2() {
document.mypic2.src="up.gif"
}
function down2() {
document.mypic2.src="down.gif"
}

</SCRIPT>

...и две разные картинки:

<A HREF="http://www.htmlgoodies.com"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>

<a href="http://www.htmlgoodies.com"
onMouseOver="up2()" onMouseOut="down2()">
<IMG SRC="down.gif" NAME="mypic2"
BORDER=0></A>

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.

Ваше задание

Переделайте прошлое задание, создав две функции для смены картинки.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 17

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 17. Функция внутри формы

Урок 17
Функция внутри формы

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Цель этого урока — познакомить вас с использованием JavaScript в формах. Сегодняшний скрипт через форму позволяет выбрать цвет фона.

Формы всегда начинаются командой <FORM> и заканчиваются командой </FORM>. Здесь ничего нового, простой HTML.

Скрипт

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<p>Выбрать цвет фона</p>
<FORM>
<INPUT TYPE="button" VALUE="Голубой"
onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
onClick="newcolor('white')">
</FORM>
</BODY>
</HTML>

Эффект

Проверить эффект можно в новом окне.

.

Разбор скрипта

Вот снова скрипт и форма:

function newcolor(color)
{
alert("Вы выбрали " + color)
document.bgColor=color
}

<FORM>
<INPUT TYPE="button" VALUE="Голубой"
onClick="newcolor('lightblue')">
<INPUT TYPE="button" VALUE="Розовый"
onClick="newcolor('pink')">
<INPUT TYPE="button" VALUE="Вернуть"
onClick="newcolor('white')">
</FORM>

  • Обратите внимание, мы передаем в функцию newcolor() (новый цвет) неизменяемую строку текста, стоящую в скобках ('lightblue'). Она находится в одинарных кавычках, потому что имя функции стоит в двойных.
  • Когда вы нажимаете кнопку, строка в скобках передается в функцию newcolor().
  • Функция ждет, пока поступит необходимая ей информация. Помните, во всех функциях до сих пор скобки были пустые? Потому что у них были все необходимые данные. В данном случае дополнительная информация поступает в функцию, когда пользователь нажимает на кнопку. Кнопка содержит ту же функцию, только теперь у нее есть необходимые данные, то есть цвет.
    Форма передает цвет двум элементам в разделе <SCRIPT>: методу alert и строке document.bgColor. Получив все данные, функция вступает в действие: всплывает окно и меняется цвет фона.
  • Не запутайтесь: VALUE (значение) в команде INPUT не является свойством JavaScript, она помещает текст на кнопку.

Ваше задание

Посмотрим, хорошо ли вы помните материал предыдущих уроков. Перепишите скрипт так, чтобы, открываясь, страница просила пользователя ввести имя. При выборе цвета должно всплывать окно со словами «Эй, (имя)! Вы выбрали (цвет)...» Желаю успеха.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 18

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 18. Поля форм и свойство value (значение)

Урок 18
Поля форм и свойство value

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Сегодня мы продолжим начатое в Уроке 17. Будем передавать в функцию данные, которые пользователь введет в поле формы. Затем эти данные будут использованы для поиска в Yahoo.

Скрипт

<SCRIPT LANGUAGE="JavaScript">
function Gofindit()
{
var search = document.formsearch.find.value;
{
var searchUrl = "http://av.yahoo.com/bin/query?p=" + search;
location.href = searchUrl;}}
</SCRIPT>
<FORM NAME="formsearch">Найдите в Yahoo:
<INPUT NAME="find" SIZE="40" TYPE="text">
<INPUT TYPE="button" VALUE="Искать"
    onClick="Gofindit()">
</FORM>

Эффект

Найдите в Yahoo:

.

Разбор скрипта

От вас снова потребуется четкое понимание иерархии объектов.

  • Во-первых, создаем функцию с переменной search(искать), которая будет результатом чего-то, происходящего в объекте document, под названием formsearch, внутри элемента find (найти), который обладает свойством value(значение).
  • Вторую функцию помещаем внутри первой. Видите вторую пару {фигурных скобок}?
  • Для второй функции создаем еще одну переменную searchUrl, представляющую собой адрес поисковой машины Yahoo плюс значение переменной search, полученное через команду document.formsearch.find.value.
  • Наконец, location.href приравнивается к переменной searchUrl. После выполнения функции пользователь попадет на итоговую страницу.
  • Теперь переходим к командам формы. Их две: текстовое поле, куда пользователь вводит свой запрос, и кнопка, запускающая функцию.
  • Обратите внимание, что форма в целом получила имя formsearch. Помните, что мы говорили об иерархии объектов?
  • Затем называем текстовое поле find. Опять иерархия. Видите, как мы идем от большого к малому?
  • Дальше соединяем кнопку с командой onClick, которая запускает функцию.
  • Наконец заканчиваем командой </FORM>. Готово.

Ваше задание

Измените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...»

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 19

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 19. Передача данных в функцию

Урок 19
Передача данных в функцию

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Продолжим разговор о взаимодействии форм и JavaScript.

Обычно JavaScript в соединении с формами используется для проверки ввода данных. У нас еще будет разговор на эту тему. Два следующих урока подготовят вас к нему.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doit()
{
alert("document.myform.fname.value — это "
+ document.myform.fname.value)

var greeting="Привет, "

alert(greeting + document.myform.fname.value
+ " " + document.myform.lname.value)

alert("Количество букв в имени "
+ document.myform.fname.value.length)
}
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="myform">
Ваше имя:
<INPUT TYPE="text" NAME="fname"><p>
Ваша фамилия:
<INPUT TYPE="text" NAME="lname"><p>
<INPUT TYPE="button" VALUE="Отправить" onClick="doit()">
</FORM>
</BODY>
</HTML>

Эффект

Ваше имя:

Ваша фамилия:

.

Разбор скрипта

Начнем с элементов формы:

<FORM NAME="myform">
Ваше имя:
<INPUT TYPE="text"
    NAME="fname"><p>
Ваша фамилия:
<INPUT TYPE="text"
    NAME="lname"><p>
<INPUT TYPE="button" VALUE="Отправить"
    onClick="doit()">
</FORM>

Видите, мы дали форме имя myform. Поле ввода для имени пользователя названо fname, а поле для фамилии — lname. Теперь у каждого элемента есть имя.

Данные, которые введет пользователь, станут значением (value) соответствующих текстовых полей. Понятно? Тому, что написано в поле fname, будет присвоено имя fname.

Когда пользователь нажмет на кнопку (обработчик события onClick), запустится функция doit().

Теперь посмотрим на функцию:

function doit()
{
alert("document.myform.fname.value — это "
+ document.myform.fname.value)

var greeting="Привет, "

alert(greeting + document.myform.fname.value + " "
+ document.myform.lname.value)

alert("Количество букв в имени "
+ document.myform.fname.value.length)
}

Такой передачи данных, как на предыдущих уроках, не происходит. Видите, в скобках функции doit() ничего нет. Но по иерархическим командам понятно, что функция вызывает данные, введенные в форму.

Мы тщательно следуем иерархии объектов: за объектом документ следует объект форма (на него указывает имя формы, myform), за ним следует объект поле формы (на него указывает имя поля, fname), за ним следует свойство значение (value). Без свойства value данные, переданные пользователем, не попали бы в иерархическую команду.

Дальше переменная greeting (приветствие). Приветствие показано в команде alert(greeting).

Когда пользователь нажимает на кнопку, всплывает окно с его именем.

Второе окно включает в себя переменную greeting. Появляется надпись: «Привет, (имя) (фамилия)», составленная с помощью данных, полученных через форму. Еще раз обратите внимание на value.

Наконец всплывает третье окно c неким текстом и вызывает следующее: document.myform.fname.value.length. Этo команда, которая передает длину (length) слова, введенного в поле формы. Если fname содержит «Коля», то длина равна 4. Команда length следует за value.Таким образом она точно сосчитает буквы в тексте, а не что-нибудь другое. length — это тоже свойство.

Ваше задание

Составьте документ HTML с формой aform. В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «Мне нравится ». Когда пользователь нажмет на кнопку, должно всплывать окно со следующей надписью:

  1. Мне нравится геометрическая фигура такого-то цвета. (по результатам тех данных, которые пользователь вводит в форму)
  2. Покажите длину (length) «фигуры».

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 20

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 20. Случайные числа

Урок 20
Случайные числа

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

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

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
{
var now=new Date()
var num=(now.getSeconds())%10
var num=num+1
alert(num)
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Случайное число</h1>
<form>
<INPUT TYPE="button"
VALUE="Случайное число от 1 дo 10"
onClick="rand()">
</FORM>
</BODY>
</HTML>

Эффект

Случайное число

.

Разбор скрипта

  • Сегодня начнем с функции:

function rand()
{
var now=new Date()
var num=(now.getSeconds())%10
var num=num+1
alert(num)
}

  • Случайный выбор числа осуществляется в несколько шагов:
    • Во-первых, создаем функцию, к примеру, rand().
    • Потом создаем переменную для метода new Date().
    • И еще одну переменную, num. Она содержит метод getSeconds(), так как в данном случае мы воспользуемся секундами, чтобы выбрать случайное число. Элемент %10 говорит скрипту, что нужно выбирать из десяти чисел.
  • Мы уже говорили, что JavaScript, как и многие другие компьютерные языки, начинает отсчет с нуля. Таким образом, прибавляя к случайному числу единицу (num=num+1), мы задаем числа не от 0 до 9, а от 1 до 10.
  • Наконец alert показывает число.
  • Теперь элемент, запускающий функцию:

<form>
<INPUT TYPE="button" VALUE="Случайное число от 1 дo 10" onClick="rand()">
</form>

  • Это обыкновенная кнопка и событие через onClick, с которым вы не раз встречались. Все очень просто.

Ваше задание

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

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 21

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 21. Введение в if

Урок 21
Введение в if

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Сегодня вы познакомитесь с командой IF (если), которая дает возможность выбора.

За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт знает, где начинаются и кончаются верные условия, потому что они заключены в {фигурные скобки}.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function askuser() {
var answer=" "
var statement="Отвечай, да или нет"
var answer=prompt("Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}
</SCRIPT>
</HEAD>

<BODY>
<h2>Горчица</h2>
<FORM>
<INPUT TYPE="button" VALUE="Жми!" onClick="askuser()">
</FORM>
</BODY>
</HTML>

Эффект

Горчица

.

Разбор скрипта

  • Начнем с кнопки:

    <FORM>
    <INPUT TYPE="button" VALUE="Жми!" onClick="askuser()">
    </FORM>

    Здесь ничего нового, простая форма с кнопкой, которая запускает функцию askuser() (спросить пользователя).

  • Фрагмент скрипта с функцией:

function askuser() {
var answer=" "
var statement="Отвечай, да или нет"
var answer=prompt("Любишь горчицу?")
if ( answer == "да")
{statement="Я тоже обожаю горчицу!"}
if(answer == "нет")
{statement="Я тоже горчицу терпеть не могу!"}
alert(statement)
}

  • Значение переменной answer (ответ) равно тому, что введет пользователь по запросу.
  • На все те случаи, когда пользователь не отвечает «да» или «нет», создается переменная statement (заявление).
  • Дальше запрос prompt приравнивается к answer. Теперь у нас две переменные под одним именем. Пока имейте это в виду.
  • Следом за if идет условие в (круглых скобках).
  • В условии ставим не один, а два знaка равенства ==! Одинарный знак = используется вне скобок.
  • Помните, отрезки текста ставятся в кавычки.
  • Вот как разворачивается действие:
    • Запрашивается ваше мнение;
    • Скрипт сверяет его с условиями;
    • Если ответ «да», появляется окно со словами: «Я тоже обожаю горчицу!»
    • Если ответ «нет», появляется окно со словами: «Я тоже терпеть не могу горчицу!»
    • Если ответ ни тот, ни другой, тогда переменная answer остается пустой и заявление «Отвечай, да или нет» отсылается в alert.
  • Помните, что JavaScript чувствителен к регистру. Tо есть если вы напишете «НЕТ» или «Нет», условие не будет выполнено! Чтобы условие было верно, необходимо ввести «нет». Исправить это можно, добавив еще несколько условий IF на все случаи жизни.

Ваше задание

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

Возможный ответ здесь (откроется в новом окне)

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 22

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 22. If и Else

Урок 22
If и Else

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Сегодня у нас в меню случайное число, две функции и знакомство с командой Else на закуску.

If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rand()
{now=new Date()
num=(now.getSeconds())%10
num=num+1
}
function guessnum()
{guess=prompt("Угадай, какое?")
if (eval(guess) == num)
{alert("ПРАВИЛЬНО!!!")
rand()
}
else
alert("Нет. Попробуй еще раз.")
}
</SCRIPT>
<BODY onLoad="rand()">

<h3>Я загадал число от 1 до 10</h3>

<FORM NAME="myform">

<INPUT TYPE="button" VALUE="Угадай"
NAME="b1"
    onClick="guessnum()">

</FORM>
</BODY>
</HTML>

Эффект

Я загадал число от 1 до 10

.

Разбор скрипта

  • Начнем со строки BODY:

    <body bgcolor="хххххх" onLoad="rand()">

    На этот раз функция запускается не кнопкой через onClick, а командой onLoad, чтобы к тому времени, когда пользователь нажмет на кнопку, число уже было выбрано. Если сделать это, как в прошлом уроке, то каждый раз, нажимая на кнопку, вы будете получать новое число. А оно должно оставаться одним и тем же, пока вы гадаете.

  • Первая функция:

    function rand() {
    now=new Date()
    num=(now.getSeconds())%10
    num=num+1
    }

    Функция выбирает наугад число от 0 до 9 и привязывает его к num. Потом прибавляет к num единицу, чтобы выбор осуществлялся между 1 и 10. Мы делали это на прошлом уроке.

  • Вторая функция:

    function guessnum()
    {guess=prompt("Угадай, какое?")
    if (eval(guess) == num)
    {alert("ПРАВИЛЬНО!!!")
    rand()
    }
    else
    alert("Нет. Попробуй еще раз.")
    }

    Этот фрагмент написала Эндри, потому что она очень умная. В памяти компьютера уже есть число, полученное через первую функцию. Вторая дает вам возможность угадать его. Смотрите, что происходит:

    • С помощью запроса создается переменная guess (догадка).
      Функция eval() вычисляет или выполняет строку в скобках (выражение, команду или последовательность команд) и подставлает полученное значение вместо себя. Она не является методом какого-либо объекта, но может использовать свойства уже существующего. В данном случае переводит текст, полученный с помощью запроса, в нашу функцию для последующей обработки.
      Обратите внимание на {фигурные скобки}. Все это очень похоже на Урок 21.
    • Переходим к IF/Else. Если (if) guess (догадка) равна загаданному числу num, тогда запускается команда alert("ПРАВИЛЬНО").
    • Если это не так, а иначе (else), тогда запускается другая команда alert.
  • Это вам уже знакомо:

    <form name="myform">
<input type="button" value="Угадай"
        name="b1" onClick="guessnum()">
</form>

    Кнопка запускает функцию, которая дает возможность угадать задуманное число.

Ваше задание

Придется вам постараться! Измените сегодняшний скрипт так, чтобы при неверной догадке он сообщал пользователю, что он назвал слишком большое или слишком маленькое число.

Подсказка! В этом случае возможны только три решения: слишком много, слишком мало или правильно. Подумайте вот о чем: нужна ли вам команда Else или сойдет и парочка дополнительных If?

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 23

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 23. Случайный выбор фраз и рисунков

Урок 23
Случайный выбор фраз и рисунков

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

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

Скрипт

<SCRIPT LANGUAGE="JavaScript">
var0="От пирогов не толстеют"
var1="Кто ходит в гости по утрам"
var2="До пятницы я совершенно свободен"
now=new Date()
num=(now.getSeconds() )%3

if (num == 0)
{cliche=var0}
if (num == 1)
{cliche=var1}
if (num == 2)
{cliche=var2}
document.write(cliche + "<br>")
document.write("Случайная цифра: "
+ num)
</SCRIPT>

</BODY>
</HTML>

Эффект

Моя домашняя страница

Как говорится...

(Обновите страницу несколько раз, чтобы увидеть разные фразы и цифры.)

.

Разбор скрипта

  • Начнем с цифры:

    var0="От пирогов не толстеют"
    var1="Кто ходит в гости по утрам"
    var2="До пятницы я совершенно свободен"
    now=new Date()
    num=(now.getSeconds() )%3
    document.write("Случайная цифра: "
    + num)

    document.write должна располагаться на одной строке!

  • Это вы можете разобрать и сами, все было на прошлых уроках.
    Мы создали три переменные. Это неизменяемые фрагменты текста, и потому заключены в двойные кавычки.
  • Следующий шаг: программа берет случайную цифру с помощью часов вашего компьютера. %3 указывает на то, что будет выбрана цифра между 0, 1 и 2. На этот раз мы не прибавляем к num единицу, так как нам подходит и 0.
  • Наконец команда document.write() говорит, что выбранная цифра будет показана на странице.
  • Теперь взглянем на другой фрагмент скрипта:

if (num == 0)
{cliche=var0}
if (num == 1)
{cliche=var1}
if (num == 2)
{cliche=var2}
document.write(cliche + "<br>") >

  • Помните, что условия после IF требуют двойного знака равенства ==.
  • Если условие верно, будет выполнена команда, заключенная в {фигурные скобки}. Возможны только три результата, поэтому мы написали три условия, чтобы одно из них оказалось верным.
  • Обратите внимание еще раз, что условие заключено в (круглые скобки), а результат в {фигурные}.
  • Наконец команда document.write(cliche) напишет на странице то изречение, которое было присвоено переменной cliche (см. начало скрипта).

Ваше задание

Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 24

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод и оформление © Татьяна.


Урок 24. Введение в циклы FOR

Урок 24
Введение в циклы FOR

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Все языки программирования имеют дело с циклами (loop). В JavaScript бывают циклы двух видов: While и For.

В двух словах, циклы For используются, когда известно количество повторений. Циклы While — когда вы не знаете точно, сколько раз нужно повторять команду. В сегодняшнем примере мы рассмотрим цикл For.

Скрипт

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Посчитаем до пяти</H3>
<script language="JavaScript">
for (i=1; i<=5; i=i+1)
{
document.write(i + "<BR>");
}
</SCRIPT>

...вот и все.

</BODY>
</HTML>

Эффект

Посчитаем до пяти

...вот и все.

.

Разбор скрипта

  • Во-первых, какой короткий скрипт. Можно немножко отдохнуть, как вам кажется? Вот чистый скрипт без текста, который мы добавили для красоты:

<SCRIPT LANGUAGE="JavaScript">
for (i=1; i<=5; i=i+1)
{}
</script>

  • Посмотрим на синтаксис фрагмента for (i=1; i<=5; i=i+1). В нем три части. Все они разделены точкой с запятой.
  • i=1 устанавливает начальное значение переменной, управляющей циклом. В данном случае это 1, но можно было установить 10 или 100. Это просто точка отсчета.
  • i<=5 условие, определяющее, сколько в цикле будет повторений. В нашем случае цикл будет повторяться до тех пор, пока i не больше пяти. Видите? Мы начали с одного и досчитаем до пяти.
  • i=i+1 определяет значение прибавляемой величины. В нашем случае программа будет прибавлять 1 к i. Программа может прибавлять и 2, и 20, и 567.
  • Наконец команда document.write, печатающая цифры на странице. Обратите внимание на <BR> — так цифры печатаются с новой строки. С таким же успехом можно было написать их в одну строку, разделив запятыми.
  • Этот JavaScript повторится пять раз, написав на странице цифры от 1 до 5. Мы могли бы заставить его досчитать до миллиона, но ваш браузер завис бы на веки вечные.

Ваше задание

Напишите документ HTML с заголовком «Сюрприз». Начните с белого фона. Потом с помощью JavaScript досчитайте до 50000.
На этом этапе цвет фона меняется на желтый и появляется текст: «Скоро будет еще один цветной сюрприз...»
Снова досчитайте до 50 тысяч, и тогда фон должен опять поменяться. Успеха.

Подсказка: никаких команд в {фигурные скобки} ставить не надо.

Примечание: Владельцам компьютеров на 900MHz и выше лучше выбрать числа побольше, иначе эффекта практически не видно.

Возможный ответ здесь)

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 25

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 25. Введение в циклы WHILE

Урок 25
Введение в циклы WHILE

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Сейчас вы увидите, что такое циклы While. Помните, я говорил, что циклы For используются, когда вы знаете, сколько раз нужно их повторять, а циклы While — когда не знаете. Первый же пример нарушает правило! Это нужно для того, чтобы показать вам, как пользоваться переменными, чтобы сосчитать повторения цикла и помочь вам подготовиться к заданию.

Скрипт

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
loops=3
num=1
while (num <= loops)
{
document.write("Добрый ")
num=num+1
}
document.write("Вечер!")
</SCRIPT>
</BODY>
</HTML>

Эффект

.

Разбор скрипта

<SCRIPT LANGUAGE="JavaScript">
loops=3
num=1
while (num <= loops)
{
document.write("Добрый ")
num=num+1
}
document.write("Вечер!")
</SCRIPT>

Еще одна коротенькая программа, мы ее мигом разберем.

  • Синтаксис у While и For похож. Разница в том, что мы устанавливаем точку отсчета и величину возрастания прямо в команде For. Команда While содержит только условие.
  • while(num<=loops) говорит программе, что она должна повторять цикл еще и еще раз, пока значение num меньше или равно значению переменной loops. Видите знак <=?
    Другими словами, программа повторит цикл трижды, один раз для num=1, один раз для num=2 и еще один раз для num=3.
  • Каждый раз, когда программа выполняет цикл, она пишет «Добрый» и прибавляет 1 к num. Когда num доходит до 4, цикл заканчивается. 4 не меньше или равно 3, поэтому программа напишет «Добрый» три раза.
  • Завершающий штрих — команда document.write со словом «Вечер».

Ваше задание

Снова не такое простое. Во-первых, заставьте работать сегодняшнюю программу. Потом измените ее так, чтобы пользователь получал запрос: «Сколько раз пожелать вам доброго вечера?» Для ответа создайте переменную. Помните команду eval(), которая меняет текст на число? В конце программа должна написать «Добрый» столько раз, сколько ее просили.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 26

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 26. Введение в массивы

Урок 26
Введение в массивы:
функция внутри функции

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Сегодня мы приступим к нашей последней новой теме — массивы (array). Вы уже узнали о переменных. Каждая переменная имеет одно значение, но иногда вам необходим массив (array), или переменная, которая имеет множество значений.
В этом примере программа просит пользователя угадать телевизионный канал из перечня телеканалов. Запрос повторяется до тех пор, пока пользователь не угадает. Каждый раз при нажатии кнопки выбирается новый телеканал.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
tv=new Array()
tv[0]="ОРТ"
tv[1]="РТР"
tv[2]="ТВЦ"
tv[3]="НТВ"
tv[4]="ТВ6"
num=0
function picktv()
{
now=new Date()
num=(now.getSeconds())%5
}
function whichtv()
{
picktv()
guess=" "
while (tv[num] != guess.toUpperCase())

{guess=prompt("Угадайте мой любимый телеканал:
ОРТ, РТР, ТВЦ, НТВ или ТВ6?")

if (guess.toUpperCase() == tv[num])
{alert("Это мой любимый телеканал!")}
else
{alert("Нет, попробуйте еще раз.")}}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>

<INPUT TYPE="button" VALUE="Угадайте"
onClick="whichtv()">

</FORM>
</BODY>
</HTML>

Эффект

.

Разбор скрипта

<SCRIPT LANGUAGE="JavaScript">
tv=new Array()
tv[0]="ОРТ"
tv[1]="РТР"
tv[2]="ТВЦ"
tv[3]="НТВ"
tv[4]="ТВ6"
num=0

  • tv=new Array() объявляет, что tv представляет собой массив. С пустыми (скобками) массив может быть какой угодно длины. Можно также указать длину массива, например, tv=new Array(5).
  • Помните, что массив array может иметь множество значений. Можно представить себе массив в виде таблицы:

    tv

    tv[0] | tv[1] | tv[2] | tv[3] | tv[4]
    ОРТ | РТР | ТВЦ | НТВ | ТВ6

  • Обратите внимание, мы заранее указываем переменную num, у которой одно значение, равное 0, и массив tv, который имеет 5 значений.
  • Теперь функция picktv():

function picktv()
{
now=new Date()
num=(now.getSeconds())%5
}

  • Функция picktv() наугад выбирает число от 0 до 4, которое становится индексом tv. Помните, от нуля до четырех ПЯТЬ чисел. То есть если num равно 2, то любимый телеканал — tv[2], или ТВЦ.
  • Теперь функции whichtv() и picktv():

function whichtv()
{
picktv()
guess=" "
while (tv[num] != guess.toUpperCase())

{guess=prompt("Угадайте мой любимый телеканал:
ОРТ, РТР, ТВЦ, НТВ или ТВ6?")

if (guess.toUpperCase() == tv[num])
{alert("Это мой любимый телеканал!")}
else
{alert("Нет, попробуйте еще раз.")}}
}

Команда guess=prompt должна находиться полностью на одной строке.

  • Вот кое-что новенькое! Видите, первым делом функция вызывает другую функцию, picktv(). Таким образом, когда бы вы ни нажали на кнопку, будет выбираться новый телеканал.
  • Строка while (tv[num] != guess.toUpperCase()). Метод или действие toUpperCase() (в верхний регистр) используется для перевода всего, что бы вы ни напечатали, в верхний регистр.
  • Программа повторяет цикл While, пока пользователь не угадает правильный телеканал. Фрагмент с циклом While уже должен казаться вам вполне знакомым.
  • Обратите внимание на If и Else. В игре возможны только два результата: либо вы правы, либо ошибаетесь.
  • Теперь кнопка, которая все это запускает:

    <FORM>
    <INPUT TYPE="button" VALUE="Угадай"
    onClick="whichtv()">
    </FORM>

    Тут ничего нового.

Еще кое-что о массивах:

В JavaScript есть несколько встроенных массивов. В массивах можно указывать формы. Можете передать форму командой document.myform или document.forms[0], если это первая форма. Массивы всегда начинаются с нуля. Вторая будет document.forms[1]. Третья document.forms[2] и так далее...

Для рисунков тоже есть готовый массив. Можно указать pic1.gif как document.pic1.src или как document.images[0].src. Просто продолжайте следовать схеме, прибавляя номер в [квадратных скобках].

Более-менее поняли, что такое массивы?

Ваше задание

Напишите программу JavaScript, которая содержит кнопку с надписью: «Щелкните, чтобы попасть на случайный сайт». Когда пользователь нажмет на нее, запустится функция, которая наугад выберет число и сайт из массива внутри команды JavaScript top.location.href = urls[num]. top (вершина) — это свойство объекта window, оно относится к главному окну браузера. location.href, другой объект со свойством, содержит адрес URL.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 27

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 27
Как сложить все вместе: слайд-шоу

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Три последних урока посвящены тому, как сложить все вместе.

Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В сегодняшнем примере пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой If и переменной num. Ничего нового? Не совсем!

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "leo.gif"
img2 = new Image ()
img2.src = "dino.gif"
img3 = new Image ()
img3.src = "rhino.gif"
function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.animal.src=eval("img"+num+".src")
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="leo.gif" NAME="animal" BORDER=0>
<p>

<A HREF="JavaScript:slideshow()">
Щелкните, чтобы увидеть следующую картинку</A>

</CENTER>
</BODY>
</HTML>

Эффект

Щелкните, чтобы увидеть
следующую картинку

Разбор скрипта

Разобьем его на две части:

<SCRIPT LANGUAGE="javascript">
var num=1
img1 = new Image ()
img1.src = "leo.gif"
img2 = new Image ()
img2.src = "dino.gif"
img3 = new Image ()
img3.src = "rhino.gif"

  • Вот кое-что новое! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
  • img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.
  • (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.
  • Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.

Теперь часть №2:

function slideshow()
{
num=num+1
if (num==4)
{num=1}
document.animal.src=eval("img"+num+".src")
}
</script>
</head>
<body>

  • Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.
  • slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
  • Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.

И наконец:

<a href="JavaScript:slideshow()">Щелкните,
чтобы увидеть следующую картинку</a>

  • Тут кое-что новенькое. Видите, вызывается не функция, а JavaScript? Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.

В Эксплорере работает и обычная схема, то есть:
<a href="" onClick="slideshow()">Щелкайте</a>

Ваше задание

Перепишите сегодняшний скрипт. Покажите первым leo.gif, как в примере. Однако дальше новый cкрипт должен показать img3.src (num=3), потом img2.src, потом img1.src. Когда num=0, измените num на 3.

В общем, перепишите скрипт задом наперед.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 28

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 28. Анимация

Урок 28
Анимация

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

Здесь с помощью JavaScript создается анимационная картинка. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Помните, как это делается? Через команды new Image() и img.src, стоящие вне функции.

Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера. Какая же это анимация!

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image (77,76)
img1.src = "pic1.gif"
img2 = new Image (77,76)
img2.src = "pic2.gif"
img3 = new Image (77,76)
img3.src = "pic3.gif"
function startshow()
{
for (i=1; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
for(x=1; x<800; x=x+1)
{}
num=num+1
if(num==4)
{num=1}
}
document.mypic.src=img1.src
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0>
<p>

<A HREF="JavaScript:startshow()">
Показать анимацию</a>

</CENTER>
</BODY>
</HTML>

Эффект

Показать анимацию

(В Експлорере скрипт не работает.)

.

Разбор скрипта

Обратите внимание еще раз, что рисунки, как и переменная num, вынесены за рамки функции:

<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image (77,76)
img1.src = "pic1.gif"
img2 = new Image (77,76)
img2.src = "pic2.gif"
img3 = new Image (77,76)
img3.src = "pic3.gif"

И сама функция:

function startshow()
{
for (i=1; i<21; i=i+1)
{document.mypic.src=eval("img"+num+".src")
for(x=1; x<800; x=x+1)
{}
num=num+1
if(num==4)
{num=1}
}
document.mypic.src=img1.src
}
</SCRIPT>

  • startshow() содержит кое-что новое, вложенные циклы (nested loops)! Видите, внутри первого цикла for находится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.
  • Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 800 после появления каждой картинки. На это уходят доли секунды.
  • Внешний цикл заставляет программу повторяться 21 раз. Видите, это обозначено в функции: for (i=1; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.
  • Когда цикл закончится, картинка снова вернется к pic1.gif.
  • Вот команда, которая помещает первое изображение на страницу:

    <IMG SRC="pic1.gif" NAME="mypic"BORDER=0>

  • И наконец ссылка, которая запускает анимацию:

    <A HREF="JavaScript:startshow()">Display animation</a>

    Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.

Ваше задание

Перепишите программу. Пусть первым будет pic1.gif, как в сегодняшнем примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет быстро. 1600 будет умеренно. 2400 будет медленно. Запускать анимацию должна текстовая ссылка «Показать анимацию».

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Вперед, на Урок 29

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Урок 29. Подтверждение ввода

Урок 29
Подтверждение ввода

красным цветом даны примечания переводчика
Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Оглавление (в новом окне)

Концепция

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

Снова придется вернуться к формам. В сегодняшнем примере JavaScript проверит данные, которые ввел пользователь. Нужно будет ввести в форму свое имя и номер телефона из 7 или 9 знаков (ххххххх или ххх-хх-хх). Подтверждение данных часто имеет большое значение.

Этот пример возвращает нас к свойству length (длина) и показывает в действии два новых метода: indexOf(), charAt(). Сам скрипт будет длиннее, чем обычно. Ну, вы готовы? Поехали.

Скрипт

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Вы должны ввести свое имя")
document.dataentry.fn.focus()}
}
function validphone(phone)
{
len=phone.length
digits="0123456789"
if(len != 7 && len != 9)
{alert("Неверное количество знаков в номере")
document.dataentry.phone.focus()}

for(i=0; i<3; i++)
{if (digits.indexOf(phone.charAt(i))<0)
{alert("Это должны быть цифры")
document.dataentry.phone.focus()
break}
}

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="dataentry">
<h2>Подтверждение данных</h2>

Введите свое имя:<br>
<INPUT TYPE="text" NAME="fn"
onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
<INPUT TYPE="text" NAME="phone" SIZE=10 >

<INPUT TYPE="button" VALUE="Отправить"
onClick="validphone(phone.value)">

</BODY>
</HTML>

Эффект

Подтверждение данных

Введите свое имя:

Введите номер телефона (ххх-хх-хх или ххххххх):

  • Обратите внимание на курсор, он стоит в поле для ввода имени. Ничего не пишите, нажмите tab или щелкните по странице.
  • Теперь введите имя и переходите к следующей строке.
  • Напечатайте 123 и нажмите «Отправить».
  • Обратите внимание, после сообщения об ошибке курсор снова стоит в поле для телефонного номера. Напечатайте 12д или /12 и нажмите «Отправить».
  • Напечатайте 1234567 и нажмите «Отправить».

.

Разбор скрипта

В скрипте две функции, validfn() и validphone(). Одна проверяет, введено ли имя, другая проверяет телефонный номер. Займемся первой:

function validfn(fnm)
{
fnlen=fnm.length
if (fnlen == 0)
{alert("Вы должны ввести свое имя")
document.dataentry.fn.focus()}
}
.....
<body>
.....

<INPUT TYPE="text" NAME="fn"
onBlur="validfn(fn.value)">

  • Функция validfn(fnm) вызывается обработчиком события onBlur. onBlur запускается, когда курсор переходит на следующий элемент, в данном случае, когда мы выходим из текстового поля fn. Этот обработчик мы уже разбирали на пятом уроке.
  • Заметьте, что параметр fn.value передается из формы в функцию, где получает новое имя fnm. fn.value можно было бы обозначить как document.dataentry.fn.value, но раз мы находимся в документе и внутри формы, это не обязательно.
  • Помните, содержимое поля формы передает команда имя_формы.value. Одного имени мало.
  • Длине имени пользователя присвоена переменная fnlen. Таким образом, если пользователь введет имя Коля, значение fnlen будет равно 4. Помните свойство length?
  • Если пользователь не вписал свое имя, значит, длина равна 0. Тогда программа вызывает окно с сообщением об ошибке, и ставит курсор или focus на прежнее место. Форма не столько проверяет, правильно ли вписано имя, сколько было ли что-нибудь вписано вообще.
  • Теперь посмотрим, как программа проверяет телефонный номер:

    function validphone(phone)
    {
    len=phone.length
    digits="0123456789"
    if(len != 7 && len != 9)
    {alert("Неверное количество знаков в номере")
    document.dataentry.phone.focus()}

    for(i=0; i<3; i++)
    {if (digits.indexOf(phone.charAt(i))<0)
    {alert("Это должны быть цифры")
    document.dataentry.phone.focus()
    break}
    }

  • Эта функция подлиннее. Давайте разберем ее шаг за шагом. Во-первых, длине телефонного номера присваивается переменная len. Переменная digits содержит все цифры.
  • Потом команда If проверяет, равна ли длина номера 7 или 9 знакам, хотя и звучит это несколько неуклюже. Двойной знак && в Javascript означает «проверить оба свойства».
  • Если условие не выполнено, программа говорит пользователю о том, что он ввел неверное количество цифр, и снова устанавливает курсор или focus в поле для ввода.
  • for(i=0; i<3; i++) проверяет первые 3 цифры номера одну за другой.
  • if (digits.indexOf(phone.charAt(i))<0) знакомит нас с двумя новыми методами: indexOf() и charAt().
  • Посмотрим на phone.charAt(i). Предположим, телефонный номер 123, и i = 2. Знак на второй позиции — цифра 3. Это не опечатка! Помните, порядковые номера начинаем считать с нуля. Таким образом, phone.charAt(0) = 1, phone.charAt(1) = 2, a phone.charAt(2) = 3!
  • indexOf — это метод, дающий порядковый номер для заданного значения. При if (digits.indexOf(phone.charAt(i))<0), JavaScript ищет значение phone.charAt(i) в переменной digits.

    Если телефонный номер 1234567 и i = 1, то программа ищет вторую цифру в переменной digits и находит ее, возвращая значение 1, так как digits = «0123456789».

    Если номер телефона 12д и i = 2, программа ищет «д»; в переменной digits. Не найдя ее, она возвращает -1. Если значение = -1 (<0), тогда появляется окно с сообщением об ошибке и курсор или focus устанавливается на прежнее место. Для телефонного номера ххххххх так можно проверить все 7 цифр.

  • И последнее — код HTML для формы:

Введите свое имя:<br>
<INPUT TYPE="text" NAME="fn"
onBlur="validfn(fn.value)">

<SCRIPT LANGUAGE="JavaScript">
document.dataentry.fn.focus()
</SCRIPT>

Введите номер телефона (ххх-хх-хх):<br>
<INPUT TYPE="text" NAME="phone" SIZE=10>

<INPUT TYPE="button" VALUE="Отправить"
onClick="validphone(phone.value)">

  • Используя JavaScript с формами, давайте каждому элементу уникальное имя, которое потом будет обозначено в скрипте. Это вы уже проходили.

Ваше задание

Во-первых, изучите сегодняшнюю программу и заставьте ее работать. Потом внесите несколько изменений. Попросите ввести телефонный номер в формате ххх-хххх. Пусть функция validphone(phone) проверит, стоит ли дефис на позиции 3. Команда != в JavaScript означает «не равно». Это вам понадобится.

Возможный ответ здесь

Концепция__Скрипт__Эффект__Разбор скрипта__Задание

Послесловие

Далее авторы советуют приобрести справочник с остальными, неизученными командами, так как у вас уже достаточно базовых знаний и самоучитель вам больше не нужен (при условии, конечно, что вы не пропускали домашних заданий), и поздравляют с окончанием начальной школы. А я прошу прощения у авторов за то, что весьма существенно сократила их лирическое послесловие, как и за несколько незначительных изменений в тексте других уроков. Отдельная благодарность моему Пумперникелю за мысль использовать названия телеканалов в Уроке 26. Русским читателям спасибо за внимание. Если найдется еще что-нибудь интересное, сейчас же дам знать. Поскольку я переводчик, а не программист, то не даю серьезных консультаций по скриптам. Прошу сообщать об опечатках, остальные претензии и пожелания по содержанию учебника направляйте, пожалуйста, американскому автору. Пока.

Татьяна.

_

авторы Джо Бернс и Эндри Грауни. Оригинал и многое другое на английском языке © EarthWeb Inc.
Перевод, оформление и верстка © Татьяна.


Новое окно - JOE

Это новое окно,
я назвал его "Джо".

Если щелкнeте сюда, получите
HTML Goodies в главном окне.

Щелкните сюда,
чтобы закрыть это окно.


Большое спасибо


Оглавление

  1. Введение
    2.
  2. Сообщения об ошибках, выдаваемые браузером
    3.
  3. Дата и время
    4.
  4. Команда onMouseOver
    5.
  5. Еще несколько обработчиков событий
    6.
  6. Запросы пользователю и переменные
    7.
  7. Концепция свойств
    8.
  8. Иерархия объектов
    9.
  9. Создание функций
    10.
  10. Команды onUnload и onMouseOut
    11.
  11. Как открыть новое окно
    12.
  12. Новые окна через функцию
    13.
  13. Метод confirm
    14.
  14. Математические переменные
    15.
  15. Смена картинки через onMouseOver
    16.
  16. Функция для смены картинки
  17. Функция внутри формы
    18.
  18. Поле формы и свойство value
    19.
  19. Ввод данных в функцию
    20.
  20. Случайные числа
    21.
  21. Введение в if
    22.
  22. If и else
    23.
  23. Случайный выбор изображений и фраз
    24.
  24. Введение в циклы for
    25.
  25. Введение в циклы while
    26.
  26. Массивы
    27.
  27. Слайд-шоу
    28.
  28. Анимация
    29.
  29. Проверка данных, введенных в форму
    30.