Самоучитель по JavaScript




Самоучитель по JavaScript


    Введение
    Введение От переводчика Э тот самоучитель по JavaScript попался мне на глаза во время блужданий по дырам Интернета и поразил своей доступностью и эффективностью. Бескорыстная любовь к согражданам...
    Урок 1
    От переводчика Э тот самоучитель по JavaScript попался мне на глаза во время блужданий по дырам Интернета и поразил своей доступностью и эффективностью. Бескорыстная любовь к согражданам подвигла...
    Урок 2 Сообщения об ошибках
    Концепция З наете, какая тема вообще не обсуждается ни в одной из миллиона книг по JavaScript, которые я перечитал? Сообщения об ошибках. Вероятно, авторы этих книг полагают, что вы с самого перво...
    Урок 3 Дата и время
    Концепция И з Урока 1 вам известно, что существует такой объект как документ. Иначе в нем ничего нельзя было бы написать. Сегодня мы поговорим о семи методах объекта: getDay(), getDate(), getMonth...
    Урок 4 Команда onMouseOver
    М ы обсудили объекты и методы. Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaSc...
    Скрипт
    A HREF=http://www.newmail.ru onMouseOver=window.status='Бесплатный хостинг'; return trueСсылка/A Все это должно быть на одной строке....
    Эффект
    Ссылка Наведите курсор на ссылку и посмотрите на строку состояния в окне браузера....
    Разбор скрипта
    В ы уже знаете достаточно, чтобы понять смысл написанного. Давайте быстро разберем скрипт и попробуем его изменить. Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой...
    Ваше задание
    П осмотрим, не удастся ли мне запутать вас. Я собираюсь дать вам новый метод, alert () (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы о...

    Урок 5 Еще несколько обработчиков событий
    C ейчас вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме. Так что если вам не чужд...
    Команды и эффекты
    Команда onClick (на щелчок) Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onCl...
    Ваше задание
    Н а этот раз я предлагаю вам создать форму, которая будет взаимодействовать с пользователем. Форма должна иметь три элемента: поле ввода с просьбой ввести имя; два поля для флажков с вопросом о то...
    Урок 6 Запрос пользователю и переменные
    В этом уроке у меня две концепции. Одна только для тех случаев, когда вы решите запросить у пользователя информацию. Вторая, создание переменных, останется с вами на всю вашу жизнь в JavaScript. М...
    Скрипт
    SCRIPT LANGUAGE=javascript /* Скрипт предназначен для того, чтобы получить от пользователя информацию и поместить ее на страницу */ var user_name = prompt (Напишите свое имя,Здесь); document.write...
    Эффект
    /* Скрипт предназначен для того, чтобы получить информацию от пользователя и поместить ее на страницу */ var user_name = prompt ("Напишите свое имя","Здесь"); document.write("Привет, " + user_name...
    Разбор скрипта
    Стоп! Что это такое /* */? Д а, я вставил еще одну новую команду. Эти штуки означают комментарий внутри скрипта. Если помните, урока три назад я уже показывал вам двойную дробь //, отделяющую текс...
    Ваше задание
    ...повтор пройденного. O тлично, мы прошли шесть уроков. Пора приниматься за скрипты потруднее. Моя цель не сбить вас с толку, а показать, что у вас уже достаточно знаний для создания шикарных эфф...
    Урок 7 Концепция свойств
    И ерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать. Нам известно, что существуют объекты, например, docu...
    Скрипт
    Ниже вы увидите множество скриптов, но все они составлены по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в document.write(). Внимание: 1) заго...
    Эффект
    Н екоторые сведения о вашем компьютере: var an = navigator.appName; var av = navigator.appVersion; var acn = navigator.appCodeName; var ua = navigator.userAgent; document.write("Вы пользуетесь " +...
    Разбор скрипта
    Поговорим о каждой группе отдельно... Почему местами шрифт жирный? Да так, ради забавы. Найдите в скрипте элементы, которые написаны жирным шрифтом. Я просто добавил команды B и /B по обеим сторон...
    Ваше задание
    O тлично, умники, сделайте-ка вот что: пользуясь одной из вышеперечисленных команд, напишите JavaScript, который создает ссылку на страницу на вашем сервере. Например, если вы находитесь на www.yo...
    Урок 8 Иерархия объектов
    У фф! Сделаем паузу и посмотрим, что мы уже знаем. В JavaScript есть объекты, похожие на существительные или предметы. У объектов есть свойства, которые описывают их, как прилагательные описывают...
    Что я имею в виду
    Действие иерархии объектов
    В се команды начинаются с наивысшего объекта, window (окно браузера), и идут по нисходящей. Окна и рамки (frames) принадлежат объекту window. Их не нужно перечислять, если только их не больше одно...
    Разбор иерархии объектов
    Самая большая путаница в том, что некоторые объекты также являются и свойствами. Window — только объект. Document является свойством окна, но в свою очередь и объектом. Form — это свойство докумен...
    Ваше задание
    Н апишите полные команды, начиная с Window, хотя обычно это не требуется. Пускай имя изображения будет mypic , имя формы myform . Форма: Содержание поля lname (фамилия): Содержание поля fname (имя...
    Урок 10 Команды onUnload и onMouseOut
    Э то два последних обработчика событий, которые вы должны иметь в своем арсенале: onMouseOut и onUnload (обратите внимание на заглавные буквы). Я свел их в одном уроке, потому что обе они начинают...
    Скрипт
    С мышью: A HREF=les10.htm onMouseOver=window.status='Эй! Убирайся с меня!'; return true onMouseOut=window.status='Так-то лучше, спасибо'; return true Наведите курсор на эту ссылку и уведите обратн...
    Эффект
    Поместите курсор на ссылку и обратно несколько раз, глядя на строку состояния. Это первый эффект. Нажмите на ссылку, чтобы увидеть второй. Наведите курсор на эту ссылку и уведите обратно...
    Разбор скрипта
    Э ффекты с мышью, как вы уже догадались, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновр...
    Ваше задание
    П отренируемся с функцией, onMouseOver и onMouseOut. Создайте страницу с гипертекстовой ссылкой. Когда курсор находит на ссылку, в строке состояния должны появляться слова: «Привет, пользователь н...
    Урок 11 Новые окна
    Э то первый из двух уроков, посвященных открытию новых окон. Сначала вы узнаете, как через команды Javascript открыть новый документ HTML в другом окне. Второй урок научит вас, как с помощью функц...
    Скрипт
    SCRIPT LANGUAGE=javascript window.open('opened.html', 'joe', config='height=300,width=300') self.name=main window /SCRIPT...
    Эффект
    В ы видели, как действует скрипт, когда открывали страницу. Всплыло второе окно с двумя ссылками: на HTML Goodies и закрывающая окно....
    Разбор скрипта
    Расположение на странице Начнем с расположения скрипта на странице. До сих пор я говорил, что лучше помещать скрипты повыше, чтобы они первыми загружались в память компьютера и начинали работать б...
    Ваше задание
    Я не показал вам в действии все доступные характеристики окна, так что в качестве задания напишите скрипт, который откроет новое окно со всеми характеристиками. Пусть оно будет размером 250 на 300...
    Урок 12 Новые окна через функцию
    В Уроке 11 мы открывали окно с помощью команды window.open. Окно заполнялось другим документом HTML, который мы указывали в скобках. Сейчас мы попробуем создать функцию, которая откроет новое окно...
    Скрипт
    SCRIPT LANGUAGE=JavaScript function openindex() { var OpenWindow=window.open(, newwin, height=300,width=300); OpenWindow.document.write(HTML) OpenWindow.document.write(TITLEНовое окно/TITLE) OpenW...
    Эффект
    Э ффект тот же, что и в прошлом уроке : открылось окно того же размера с теми же ссылками. Разница в том, что все это было написано на одной странице. Чтобы увидеть, как действует скрипт, с одной...
    Разбор скрипта
    Г лавная часть скрипта, содержащая функцию, помещается между командами HEAD и /HEAD, как большинство функций. По самой обычной схеме функция получает имя openindex(). Теперь подходим к основному м...
    Ваше задание
    Сегодня вам придется написать функцию, которая открыла бы окно с зеленым фоном и приветствием: «Привет, имя пользователя , вот твое окно!» Имя пользователя можно узнать с помощью запроса. Разумеет...
    Урок 13 Метод confirm (введение в if и else)
    К оманда confirm (подтвердить) действует очень похоже на alert, за исключением того, что добавляет кнопку «Отмена» в диалоговое окно. И то, и другое — методы. Одна команда сама по себе многого не...
    Скрипт
    SCRIPT LANGUAGE=javascript confirm(Уверены, что хотите войти?) /SCRIPT Знакомо? Пора бы уже. То же самое, что и alert, кроме слова confirm. Вот основной пример того, что делает скрипт. Как видите,...
    Эффект
    Это уже кое-что.Только на этот раз, если нажмете «OK», то пойдете по ссылке, а если щелкнете по «Отмене», то останетесь. Здорово, а? Давайте разберемся, как это делается....
    Разбор скрипта
    У вас есть выбор Во-первых, скрипт говорит: if (confirm(Вы уверены, что хотите пойти на прошлый урок?) ) Это значит Если ( Здесь ваш шанс сделать выбор ) В нашем случае сonfirm предлагает альтерна...
    Ваше задание
    Не пугайтесь, вы это можете. Преобразуйте скрипт, о котором мы сегодня говорили, в функцию. Да, и сделайте так, чтобы при отмене, кроме окна, еще появлялась какая-нибудь надпись в строке состояния...
    Урок 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...
    Ваше задание
    П ерепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad. body...
    Урок 15 Смена картинки через onMouseOver
    В спомним обработчики событий onMouseOver и onMouseOut. Мы уже делали нечто похожее — с помощью этих команд появлялся текст в строке состояния. Это было в Уроке 4 . Еще раз обратите внимание, что...
    Скрипт
    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 В ы уже знаете о событиях достаточно, чтобы...
    Ваше задание
    C оздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит. body...
    Урок 16 Смена картинок через функцию
    В от вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию. В общем, когда вам нужна только одна команда JavaScript,...
    Скрипт
    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=h...
    Разбор скрипта
    Не забывайте про регистр и script language= javascript function up() { document.mypic.src=up.gif } function down() { document.mypic.src=down.gif } Функции выполняют то же, что и команды на прошлом...
    Ваше задание
    Переделайте прошлое задание, создав две функции для смены картинки. body...
    Урок 17 Функция внутри формы
    Ц ель этого урока — познакомить вас с использованием JavaScript в формах. Сегодняшний скрипт через форму позволяет выбрать цвет фона. Формы всегда начинаются командой FORM и заканчиваются командой...
    Скрипт
    html head SCRIPT LANGUAGE=JavaScript function newcolor(color) { alert(Вы выбрали + color) document.bgColor=color } /SCRIPT /HEAD BODY pВыбрать цвет фона/p FORM INPUT TYPE=button VALUE=Голубой onCl...
    Разбор скрипта
    Вот снова скрипт и форма: function newcolor(color) { alert(Вы выбрали + color) document.bgColor=color } FORM INPUT TYPE=button VALUE=Голубой onClick=newcolor('lightblue') INPUT TYPE=button 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...
    Эффект
    Найдите в Yahoo:...
    Разбор скрипта
    О т вас снова потребуется четкое понимание иерархии объектов. Во-первых, создаем функцию с переменной search (искать), которая будет результатом чего-то, происходящего в объекте document , под наз...
    Ваше задание
    И змените скрипт так, чтобы он вызывал другую поисковую систему. И еще, пусть при подаче запроса выскакивает окошко с надписью «Сейчас поищем...» body...
    Урок 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 + +...
    Эффект
    function doit() { alert("document.myform.fname.value — это " + document.myform.fname.value) var greeting="Привет, " alert(greeting + document.myform.fname.value + " " + document.myform.lname.value...
    Разбор скрипта
    Н ачнем с элементов формы: FORM NAME=myform Ваше имя: INPUT TYPE=text NAME=fnamep Вашафамилия: INPUT TYPE=text NAME=lnamep INPUT TYPE=button VALUE=Отправить onClick=doit() /FORM Видите, мы дали фо...
    Ваше задание
    С оставьте документ HTML с формой aform . В ней должно быть два текстовых поля, одно для геометрической фигуры, другое для цвета, и кнопка. Напишите функцию с переменной, которая содержит слова «М...
    Урок 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 VA...
    Эффект
    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 VA...
    Урок 21 Введение в if
    С егодня вы познакомитесь с командой IF (если) , которая дает возможность выбора. За IF следует условие и указание, что делать, если оно верно. Верным может быть одно условие или несколько. Скрипт...
    Скрипт
    HTML HEAD SCRIPT LANGUAGE=JavaScript function askuser() { var answer= var statement=Отвечай, даилинет var answer=prompt(Любишь горчицу?) if ( answer == да) {statement=Ятоже обожаю горчицу!} if(ans...
    Эффект
    Горчица Разбор скрипта Начнем с кнопки: FORM INPUT TYPE=button VALUE=Жми! onClick=askuser() /FORM Здесь ничего нового, простая форма с кнопкой, которая запускает функцию askuser() (спросить пользо...
    Ваше задание
    П ерепишите программу так, чтобы она спрашивала, какого вы пола. Пусть в зависимости от ответа меняется фоновый цвет страницы. Помните, что в JavaScript различаются строчные и заглавные буквы, так...
    Урок 23 Случайный выбор фраз и рисунков
    П режде чем мы перейдем к следующей теме, позвольте мне показать вам еще один пример использования IF . Важно, чтобы вы хорошо овладели этой техникой, которая позволяет создавать более оригинальны...
    Скрипт
    SCRIPT LANGUAGE=JavaScript var0=От пирогов не толстеют var1=Кто ходит в гости по утрам var2=До пятницы я совершенно свободен now=new Date() num=(now.getSeconds() )%3 if (num == 0) {cliche=var0} if...
    Эффект
    SCRIPT LANGUAGE=JavaScript var0=От пирогов не толстеют var1=Кто ходит в гости по утрам var2=До пятницы я совершенно свободен now=new Date() num=(now.getSeconds() )%3 if (num == 0) {cliche=var0} if...
    Урок 24 Введение в циклы FOR
    В се языки программирования имеют дело с циклами (loop). В JavaScript бывают циклы двух видов: While и For . В двух словах, циклы For используются, когда известно количество повторений. Циклы Whil...
    Скрипт
    HTML HEAD /HEAD BODY H3Посчитаем до пяти/H3 script language=JavaScript for (i=1; i=5; i=i+1) { document.write(i + BR); } /SCRIPT ...вот и все. /BODY /HTML...
    Эффект
    HTML HEAD /HEAD BODY H3Посчитаем до пяти/H3 script language=JavaScript for (i=1; i=5; i=i+1) { document.write(i + BR); } /SCRIPT ...вот и все. /BODY /HTML...
    Урок 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...
    Эффект
    loops=3 num=1 while (num...
    Разбор скрипта
    Сегодня начнем с функции: function rand() { var now=new Date() var num=(now.getSeconds())%10 var num=num+1 alert(num) } Случайный выбор числа осуществляется в несколько шагов: Во-первых, создаем ф...
    Ваше задание
    Н апишите программу JavaScript, в которой пользователь нажимал бы кнопку, а программа предлагала бы ему случайную цифру от 0 до 5 со словами: Ваша случайная цифра: х. body...
    Моя домашняя страница
    Как говорится... var0="От пирогов не толстеют"; var1="Кто ходит в гости по утрам?"; var2="До пятницы я совершенно свободен"; now=new Date() num=(now.getSeconds() )%3 if (num == 0) {cliche=var0} if...
    Разбор скрипта
    Начнем с цифры: var0=От пирогов не толстеют var1=Кто ходит в гости по утрам var2=До пятницы я совершенно свободен now=new Date() num=(now.getSeconds() )%3 document.write(Случайная цифра: + num) do...
    Ваше задание
    Измените программу так, чтобы она показывала рисунок, выбранный наугад из трех: pic1.gif, pic2.gif и pic3.gif. body...
    Разбор скрипта
    Во-первых, какой короткий скрипт. Можно немножко отдохнуть, как вам кажется? Вот чистый скрипт без текста, который мы добавили для красоты: SCRIPT LANGUAGE=JavaScript for (i=1; i=5; i=i+1) {} /scr...
    Ваше задание
    Н апишите документ HTML с заголовком «Сюрприз». Начните с белого фона. Потом с помощью JavaScript досчитайте до 50000. На этом этапе цвет фона меняется на желтый и появляется текст: «Скоро будет е...
    Разбор скрипта
    SCRIPT LANGUAGE=JavaScript loops=3 num=1 while (num = loops) { document.write(Добрый ) num=num+1 } document.write(Вечер!) /SCRIPT Еще одна коротенькая программа, мы ее мигом разберем. Синтаксис у...
    Ваше задание
    С нова не такое простое. Во-первых, заставьте работать сегодняшнюю программу. Потом измените ее так, чтобы пользователь получал запрос: «Сколько раз пожелать вам доброго вечера?» Для ответа создай...









Начало        




Книжный магазин