document.write()
forms.elements.radio.click()
| Манипулатор на събития | |
| Събитие | Изпълнение |
| onAbort | Прекъсване при трансфериране на страница |
| onBlur | Напускане на обект |
| onChange | Промяна на обект |
| onClick | Щракване върху обект |
| onError | Скриптът открива грешка |
| onFocus | Обектът е активен |
| onLoad | Завършено трансфериране на обекта |
| onMouseover | Показалецът на мишката е преместен върху обекта |
| onSelect | Съдържанието на обекта е маркирано |
| onSubmit | Формата е изпратена за обработка |
| onUnload | Прозорецът е напуснат |
Събитията (events) са действия, които изпълняват потребителите при посещение
на WEB страница. Преместване показалеца на мишката върху изображение на формата
за обработка са примери за събития.
Java Script обработва събития, използвайки команди наречени event handlers
(манипулатори на събития). Действието на потребителя върху страницата активира
съответната команда в скрипта.
Когато пишете скрипта той трябва да реагира само на тези събития, която вие
считате, че трябва да се случат.
Например страницата ви ще се трансферира чудесно и без активиране събитието
onLoad. Но командата onLoad ще бъде използвана, ако веднага след
трансефрирането на страницата желаете да задействате скрипта.
В JavaScript стойност (value) се приема част от информацията. Типовете
стойност, които се различават в JavaScript са описани в таблица 1.2. Най-често
срещаният тип са числовите стойности; дума или думи, оградени в кавички се
разглеждат като низ (string).
Променливите (variables) съдържат стойности. Например на променливата myName
е присвоен низ "Dori". Допустим е следния начин на присвояване. myName = "Dori",
където знакът "=" може да се интерпретира като "установявам на"
Имената на променливите не могат да съдържа интервали или друга пунктация и
не могат да бъдат служебни думи в JavaScript.
| Тип | Описание | Пример |
| Number | Присвоява числова стойност | 3.14 |
| String | Символ, заграден в кавички | "Hello world" |
| Boolean | Истина или лъжа | True False |
| Null | Празна стойност | |
| Object | Произволна стойност асоциирана с обект | |
| Function | Стойност връщана от функция |
| Оператор | Действие |
| x + y (numeric) | Сумира x и y |
| x + y (string) | Свързва x и y |
| x - y | Изважда y от x |
| y * y | Умножава x и y |
| x / y | Разделя x на y |
| x % y | Изчислява модул от x и y (т.е. остатъкът от делението |
| x++, y++ | Добавя единица |
| x--, y-- | Изважда единица |
| -x | Обръща знака на х |
| Оператор | Действие |
| x = y | На х се присвоява y |
| x += y | Аналогично е на x = x + y |
| x -= y | Аналогично е на x = x - y |
| x *= y | Аналогично е на x = x * y |
| x /= y | Аналогично е на x = x / y |
| x %= y | Аналогично е на x = x % y |
Ако смесиш числова стойност с низ при сумиране на две стойности, резултатът
ще бъде низ. Например "car" + 5 се получава "car5" .
| Оператор | Действие |
| x = y | Връща true (истина), ако x е равно на y |
| x != y | Връща true ако x е различно от y |
| x > y | Връща true ако x по-голямо от y |
| x >= y | Връща true ако x по-голямо или равно на y |
| x <= y | Връща true ако x по-малко от y |
| x <= y | Връща true ако x по-малко или равно на y |
| x && y | Връща true ако ако стойностите на x и y са trure |
| x || y | Връща true ако ако стойностите на x или y са trure |
| !x | Връща true, ако х е false (лъжа) |
Скриптовете могат да се разполагат в две секции върху HTML страницата: между
таговете <HEAD> И </HEAD> (header script - заглавен скрипт) или <BODY> </BODY>
(body script скрипт в тялото на документа). Двойката тагове които играят роля
на контейнер за скрипта са: <SCRIPT> </SCRIPT>.
Пример: chap02\script01.html
Първи скрипт:
<SCRIPT LANGUAGE = JAVASCRIPT TYPE ="TEXT/JAVASCRIPT"> - Това е тагът, с който
започва скрипта. Той информира браузъра, че ще получава JavaScript оператори.
Атрибутът LANGE=JAVASCRIPT идентифицира кой език за скритпиране ще се използва,
а атрибутът TYPE = "TEXT/JAVASCRIPT", уведомява, че скриптът е обикновен текст,
организиран като JavaScript.
2. document.write.("Hello, world!") - показва надписа Hello World.
3. </SCRIPT> уведомява браузъра, - отново
да очаква HTML>
Върху страницата могат да се разполагат
неограничен брой тагове <SCRIPT>
Пример: chap02\script02.html
Пример: chap02\script03.html
1. <!- - Hide script from old browsers - Отваряне не HTML коментар
2. document.write. ("Hello world") - Oператор на JavaScript
3. // End Hiding script from old browsers - -> - // означава коментар в
JavaScript а - -> идентификация за край на коментар в HTML.
Ако имате съобщение за потребителите на браузъри с по-стари версии, добавете
го в таг <NOSCRIPT>. Този таг ще се обработи както от по-старите версии, така
и от по-новите при изключване на JavaScript.
// коментар на един ред
/*
коментар на
няколко реда
*/
Пример: chap02\script04.html
alert ( "text" ) - Изпраща на посетителя на
сайта текст в прозорец
Пример: chap02\script05.html
1. <SCRIPT LANGUAGE = JavaScript1.2 TYPE = "TEXT/JavaScript"> - дефинира се
номера на версията на JavaScript която се изисква за изпълнение на скрипта. В
случая браузърът се нуждаят от JavaScript 1.2 или по-късна версия.
2. window.location = "jswelcome.html" - Този ред информира браузърът да смени
текущата страница, в случая jswelcome.html.
3. </SCRIPT>
Не e задължително да се да се добавят
атрибутите LANGUAGE или TYPE
Пример: chap02\script06.html
Плавно пренсочване
<H2 ALIGN = CENTER>
<A HREF = "script.html" onClick = "window.location = 'jswelcome.htm'
return false">
Welcome to our site_c'mon in! </A> </H2>
Пример: chap02\script07.html
Използва се:
1. if (navigator.appName == "Netscape" {
Тук се проверява името на приложението атрибут appName на обекта navigator.
Ако името е "Netscape", ще се изпълни скрипта
2. document.write ( "You're runnin Netscape")
3. } затваряне на секция
4. else
Тази секция е незадължителна. Изпълнява се ако
горния скрипт не се изпълни
Съществува алтернативен метод за запис на условия, който има следния вид:
(condition) ? truePart : falsePart
което приблизително съответства на:
if ( condition) {
truePart
}
else {
falsePart
}
Plun-in компонентите на браузъра осигуряват на автора на Web страницата
множество опции за включване на звук, видео и анимация. Проблемът възниква от
това, че не сте сигурни дали потребителят притежава необходимите plun-in
компоненти. JavaScript е в състояние да ви помогне в откриването на
инсталираните от потребителя plun-in и в случай на липсващи компоненти да го
насочите към страницата, откъдето той да ги изтегли. В примера се търси видео
компонента QuickTime. Скриптът проверява за наличието на вересия 2.0 на
QuikTime.
Пример: chap02\script08.html
1. if (navigator.plugins["QuickTime Plug-in 2.0"]) {
В този случай се проверява дали обектът navigator.pluins съдържа името
?QuickTime Plug_in 2.0;
Ако името на plug-in компонента QuickTime бъде променено то Apple, ще се
наложи да промените вашия скрипт.
2. document.write("<embed src='images/CometAnim.mov' width=320
height=250 loop=false autoplay=true>")
Тъй като QuicTime е налице, скриптът записва малко HTML в прозореца
на документа. Тагът <embed> се използва за разполагане на QuickTime филм в Web
страниците
3. else {
document.write("<img src='images/cometanim.jpg' width=320
height=208 alt='comet'>")
}
В такъв случай филмчето се замества с JPEG изображение
Може да се възползвате от възможността да покажете JPEG изображение, като
добавите код в секция <BODY> на страницата:
<NOSCRIPT>
<IMG SRC = ?IMAGES/ cometanim.jpg? Alt = " " WIDTH = "320" HEIGHT = "208"
</NOSCRIPT>
Този скрипт търси конкретен plug-in компонент по име. Ако името се промени,
трябва да промените скрипта.
При наличието на повече plug-in компоненти, вероятно ще трябва да повтаряте
теста. За целта се използва цикъл, който се завърта определен брой
пъти.
Пример: chap02\script09.html
Обърнете внимание че примера съдържа два скрипта - един в заглавната секция и
един в основната секция. Заглавния скрип проверява наличието на компонента
Flash, а скриптът в основната секция записва едно от двете съобщения в
прозореца на браузъра, в зависимост от резултата на проверката за plug-in
компонента.
1. hasFlash = false
Първото, което осъществява заглавният скрипт, е настройка на булевата (или
логическата) променлива с име hasFlash. Булевата променлива може да има
стойности истина или лъжа.
2. for (i=0; i<navigator.plugins.length; i++) {
С този ред започва цикълът. Променливата i традиционно се използва като
брояч. Първоначално броячът се занулява. Разделителят ";" сигнализира, че на
същия ред се разполага и друг оператор. Следващата част се прочита по следния
начин "ако i е по-малко от броя на plug-in компонентите, тогава добави 1 към
стойността на i". Обектът navigator.plugins.length подава броя на
инсталираните plug-in. Чрез оператора ++ се увеличава стойността на i с
единица.
3. if (navigator.plugins[i].name.indexOf("Flash") >= 0) {
От този ред започва условната проверка вътре в цикъла. Обектът
navigator.plugins[i] използва квадратни скоби за индикация, че ще се проверява
plug-in в списъка с текущата стойност на i. Ако цикъла е превъртян веднъж, да
речем два plug-in компонента, следващата стойност на и в цикъла че е 2
(JavaScript започва да брои от 0, а не от 1). Метода indexOf() връща къде (и
ако) е намерен низ "Flash" в navigator.pligins [i].name. Ако низът не е намерен,
стойността е равнозначна на първоначалната (т.е. 0).
4. hasFlash = true
Когато проверката е удовлетворена, променливата hasFlash получава стойност
истина и заглавния скрип свършва.
5. if (hasFlash) {
Скриптът в основната секция показва как нещата могат да се подразбират в
JavaScript. Този ред се чете по следния начин "ако hasFlash е истина, премини
към следващата стъпка". В този случай наличието на променлива в скобите на
оператор if означава, че стойността на променливата трябва да е истина, за да
продължи.
6. document.write ( "You have Flash, you lucky person, you!" )
Ако проверката е вярна
7. else {
document.write ( "Sorry, you don't have Flash" )
Ако проверката не е вярна
Функцията се разглежда като множество оператори изпълняващи една задача. По
време на изпълнението на скрипта функциите могат да бъдат извиквани
многократно. Ето как изглежда една функция
function saySomething() {
alert ( "Four score and seven years ago" )
}
Извикването на функция може да се извърши и при изпълнение на събитие,
когато потребителя щракне върху бутон, може да се използва следния код:
<INPUT TYPE = BUTTON VALUE = "Lincoln"
onClick = "saySomething()"
function saySomenthing ( message ) {
alert ( message )
}
Пример: chap02\script10.html
Кодът на бутона също се променя
<INPUT TYPE=BUTTON VALUE="Lincoln"
onClick="saySomething( 'Four score and seven years ago...')">
При извикване на функцията данните 'Four score and seven years ago...' се
предават в параметър message. Параметрите могат да бъдат произволни по тип
данни.
Към една функция може да се прикачат няколко бутона:
<INPUT TYPE=BUTTON VALUE="Kennedy"
onClick="saySomething('Ask not what your country can do for you...')">
<INPUT TYPE=BUTTON VALUE="Nixon"
onClick="saySomething('I am not a
crook!')">
Разполагане на няколко скрипта върху
страница
Пример: chap02\script11.html
Може да се използва само една двойка заглавни
тагове <SCRIPT>
Пример: chap02\script12.html
1.myMsg = "Hey, I know JavaScript - check out my kewl scroller! ... "
Присвояване стойност на променливата
2. i = 0
Нулиране на променливата i
3. function scrollMsg() {
Създаване на функцията
4. window.status = myMsg.substring(i,myMsg.length) + myMsg.substring(0,i-1)
Тук се определя атрибутът на лентата за състояние window.status на обекта
прозорец. Това е реда в долната част на прозореца на браузъра, който показва
текущото състояние. Превъртащото се съобщение се основава на разделянето на
myMsg на две части. Методът substringg ( x, y ) въздейства на обекта, в случаят
това е низът myMsg и връща част от него, започвайки от символа х и спирайки
един символ преди y. Така че в случая първото разклонение (instance) на
substring() взима част от myMasg. започвайки от i и завършваща на 56, което е с
един символ по-късо от символната последователност в стъпка 1. Първо се
получава дясната част myMsg, започваща от позиция i и продължава до края на
низа.
7. setTimeout("scrollMsg()",50)
Добавяне на пауза в процеса. В скобите се посочва името на функцията, която
желаете да спрете за след запетайката интервала в милисекунди.
Една секунда е равна на 1000
милисекунди.
По-полезно е когато се показва допълнителна информация за хипервръзките,
преди активирането им.
Пример: chap02\script13.html
<H2>Click here to find out more about <sean.html>` onMouseover="window.status='Best kid in the world';return true" onMouseout="window.status='';return true">my son</A>, or here to find out more about <A HREF="cat.html"> onMouseover="window.status = ''; return true" my son </A>
При среща на събитие onMouseover JavaSctrip изпълнява действието предвидено
при преминаване показалеца на мишката над хипервръзката. Действието в този
случай се определя от присвояване на символен низ 'Best kid in the wolrd' на
обекта window.status (например лентата на състояния) при преминаване на
показалеца върху хипервръзката my son. Следващата част; return true е
необходима за визуализация на съобщението, ако липсва съобщението няма да
поработи. Събитието onMouseout изключва window.status. Отново е необходимо
return true за да работи скриптът.
Пример: chap03\script01.html
1. <A HREF="next.html"> next.htm </A>
Хипервръзката започва със специфициране на мястото, което ще се посети от
браузъра при щракване върху изображението, в конкретния случай това е
страницата next.html.
2. onMouseover="document.arrow.src='images/redArrow.gif'"
Когато потребителят премести показалеца на мишката върху изображението,
заместващо такова redArrow.gif от папката images, се записва в прозореца на
документа.
3. onMouseout="document.arrow.src='images/blueArrow.gif'">
След като мишката се премести, изображението blueArrow.gif се възстановява
обратно.
4. <IMG SRC="images/blueArrow.gif" WIDTH=147 HEIGHT=82 BORDER=0
NAME="arrow"></A>
Останалата част от хипервръзката на изображението дефинира местонахождението
на оригинално изображение на страницата и затваря тага на
хипервръзката.
За да реализирате излюзия за анимация трябва, заместващото изображение да се
появи незабавно, За целта всички изображения се зареждат в кеша на браузъра и
след това се поставят в скрипта.
Пример: chap03\script02.html
1. if (document.images) {
arrowRed = new Image
arrowBlue =
new Image
arrowRed.src = "images/redArrow.gif"
arrowBlue.src = "images/blueArrow.gif"
}
Този код проверява дали браузърът разбира от графични обекти. Ако разбира,
кодът присвоява arrowRed и arrowBlue на два отделни графични обекта.
2. else {
arrowRed = ""
arrowBlue = ""
document.arrow = ""
}
Този код е за по-старите браузъри
<A HREF ="next.html"> onMouseover="document.arrow.src=arrowRed.src" </A>
onMouseout="document.arrow.src=arrowBlue.src"><IMG SRC="images/blueArrow.gif"
WIDTH=147 HEIGHT=82 BORDER=0 NAME="arrow"></A>
Останалата част на rollovers се разполага в тага за описание на хипервръзката.
Когато потребителят разположи показалеца на мишката върху синята стрелка,
скриптът заменя синята стрелка с червена document.arrow.src = arrowRed.src).
След като курсорът на мишката напусне областта на изображението, скриптът връща
изображението на синята стрелка
Пример: chap03\script03.html
Пример: chap03\script04.html
Пример: chap03\script05.html
flyOff = new Image
tankOff = new Image
heliOff = new Image
flyOn = new Image
tankOn = new Image
heliOn = new Image
flyOff.src = "images/flyer.gif"
tankOff.src = "images/tanks.gif"
heliOff.src = "images/helicopter.gif"
flyOn.src = "images/flyer2.gif"
tankOn.src = "images/tanks2.gif"
heliOn.src = "images/helicopter2.gif"
Тези редове са добавени, тъй като скриптът работи с повече изображения. За
всяко от изобретенията се въвежда активно и неактивно изображение. В секция
else на if ( document.images ) е наложително добавянето на празни променливи
за по-старите версии на браузърите.
2. <A HREF ="flyPage.html"> flyPage.html </A>
nMouseover="document.textField.src=flyText.src;
document.flyImg.src=flyOn.src"
onMouseout="document.textField.src=bgText.src;
document.flyImg.src=flyOff.src">
Различното в този таг за хипервръзка са по двата оператора за присвояване на
събитията onMouseover и onmouseout, като операторите се разделят с ";".
Символът позволява последователно записване на командите, така че можете да
го използвате за групиране на оператори за присвояване
Пример: chap03\script06.html
Пример: chap03\script07.html
Пример: chap03\script08.html
1. adImages = new Array("images/banner1.gif","images/banner2.gif",
"images/banner3.gif")
thisAd = 0
imgCt = adImages.length
Този код полага основите на скрипта, създавайки три променливи. Първата,
adImages = new Array създава нова променлива adImages и я запълва с нов вид
обект, @наре'ен масив (array). Масивът съдържа множество от свързана информация.
В този случай се съдържат имената на трите GIF файла, които ще се използват за
създаване на циклично появяващ се банер. Другите две променливи hitsAd i imgCt
се инициализират (получават начални стойности). Присвоявайки на imagCt
стойността adImages.length, определя броя на елементите в масива, можете да
добавите или вадите изображения (банери) от масива.
2. funciton rotate()
3. if ( document.imates) {
Проверка дали браузърът разбира изображението
4.thisAd ++
5. if (thisAd == imgCt) {
thisAAd = 0
6. document.addBaner.src adImages [thisAd]
Изображението, което ще се появява в Web циклично е с име adBaner; името е
дефинирано като част от тага IMG, като ще видим в стъпка 9. Този код казва, че
сорсът на изображението adBaner се намира в масива adImages; стойността на
променливата thisAd дефинира кой от трите GIF файла да се използва момента.
7. setTimeout ( "rotate()", 3 * 1000 )
Този ред определя колко често да се сменят GIF файловете в банера. Командата
setTimeout задава появата на определено действие по разписание, единица за
мярка е милисекунди.
8. <BODY BGCOLOR = WHITE onLoad = "rotate()">
Задава въртене на банер, като за целта командата onLoad извиква функцията
rotate().
9. <IMG SRC = "images/baner1.gif" WITH = 400 HEIGHT = 75 NAME = "adBaner">
Тук се определя имат на циклично появяващото се
изображение
Пример: chap03\script09.html
1. if (document.adBanner.complete) {
Проверка за завършване показването на банера
2. thisAd++
3. if ( thisAd == imgCt ) {
thisAd = 0
При достигане на стойността нулирай
4. document.adBaner src = adImages [thisAd]
}
setTimeout ( "rotate()", 3 * 1000 )
Пример: chap03\script10.html
1. adURL = new Array("negrino.com","sun.com","microsoft.com")
На променливата adUrl се присвояват трите съставни части на новия масив.
Включени са само имената на домейните, тъй като URL - адресите се довършват
по-късно.
2. function newLocation() {
document.location.HREF = "http://www." + adURL[thisAd]
}
Присвоява на обекта document.location.HREF = ( прозорец за текущия документ )
стойността на символни низ http://www.(обърни внимание на точката), който се
свързва със стойността на adUrl; тъй като това е масив, трябва да се посочи
елемента в него. Той се посочва с променливата htisAd, която определя
стойността сив зависимост от това, кога посетителят е щракнал върху банера.
3. <A HREF ="javascript:newLocation()">><IMG SRC="images/banner1.gif"
WIDTH=400 HEIGHT=75 NAME="adBanner" BORDER=0></A>
Извикването на JavaScript функцията newLocation в тага за хипервръзка в
същност е похвата за реализация на поставената задача.
Показването на слайдове в Web сайтовете представя на потребителя изображение
и му предоставя контрол върху посоката на показване (напред или назад).
JavaScript предлага необходимият интерактивен конрол. Пример: chap03\script11.html
1. myPix = new
Array("images/pathfinder.gif","images/surveyor.gif","images/surveyor98.gif")
thisPic = 0
Започва се с декларирането на две променливи, като myPix е отново масив с три
GIF елемента (трите изображения на шоуто от слайдове). Променливата thisPic ще
се използва в скрипта като брояч.
2. imgCt = myPix.Length - 1
Осигурява броя на елементите.
3. function procesPrevious() {
Функция която осъществява
превъртането
4. if ( document.image && thisPic > 0 {
thisPic--
Ако документът разбира от изображения и променливата thisPic е със стойност
по-голяма от нула, стойността на thisPic намалява с единица (оператор && е and
или)
5. document.myPicture.src = myPix [thisPic]
С този ред уведомяваме документа, че myPicture.src се намира в стойността на
променливата myPix, която от своя страна е зависима от стойността на thisPic.
6. function processNext() {
@@if (document.images && thisPic < imgCt) {
@@@@@thisPic++
@@@@@@document.myPicture.src=myPix[thisPic]
@@}
}
Тази функция е огледално подобие на функцията processPrevious. Преминава се
към следващото изображение в шоуто чрез проверка, дали стойността на tisPic e
по-малка от imgCt; ако това е така, добавя се единица към стойността (виж фиг.
3.11 и 3.12).
7. <P><IMG SRC="images/pathfinder.gif" NAME="myPicture" WIDTH=201 HEIGHT=155>
Дефинирането на стойността за myPicture се осъществява в така IMG. Този ред
съобщава, че изходният файл на изображението pathfinder.gif, но за това
изображението в скрипта се генерира името myPicture.
8. <P><A HREF ="javascript:processPrevious()">> </A>
Previous</A>
Ето как се извиква функция на JavaScript от хипервръзка. При щракване върху
хипервръзката Previous се извиква processPrevious < < е HTML означение за
два знака "<", които уточняват посоките на придвижване на
хипервръзките.
9. <A HREF ="javascript:processNext()">>Next >></A>
Скриптът извиква функцията processNext при щракване върху хипервръзката Next
gt; > е HTML, които уточняват посоките на придвижване на
хипервръзките.
Ограничението на предшестващия скрипт се състоеше в това, че при достигане на
последния слайд в в която и да е от посоките, скриптът просто спира. Следващия
скрипт продължава да функционира и след изчерпване на последното
изображение.
Пример: chap03\script12.html
1. myPix = newArray ( "images/callisto.jpg","images/europa.jpg",
"images/io.jpg", "images/ganymede.jpg" )
В променливата myPix се зарежда изображенията
на четирите спътника на Юпитер.
2. functioon ( chgSlide (direction) {
В този скрипт отделните функции processNext и processPrevious, използвани в
предишния пример се заместват с функция chgSlide, на която се подава параметър
direction с две допустими стойности 1 или -1.
3.if (document.images) {
@@thisPic = thisPic + direction
@@if (thisPic > imgCt) {
@@@@@thisPic = 0
@@}
Вътре в обичайната проверка дали браузърът разбира изображенията,
променливата thisPic приема стойност равна на собствената и увеличена със
стойността на direction. Ако стойността на thisPic превишава стойността на
imgCt, тогава на thisPic се присвоява нула.
4. if ( thisPic < 0 ) {
thisPic = imgCt
}
Ако стойността на thisPic e по-малка от 0, тогава thisPic приема стойността
на imgCt.
5. <P><A HREF ="javascript:chgSlide(-1)">><<
Previous</A> </A>
<A HREF ="javascript:chgSlide(1)">>Next >></A>
В този ред хипервръзката извиква функцията chgSlide на JavaScript и предава
стойност -1 (посока Previous - предшестващ) или 1 (посока Next - следващ)
Подадената стойност се превръща в параметър
direction.
Пример: chap03\script13.html
1. myPix = new Array("images/redBanner.gif","images/blueBanner.gif",
"images/greenBanner.gif")
Конструиране на масива съдържащ
изображенията.
2. imgCt = myPix.lentgh
Зареди в imgCt броя на елементите на масива, в
случая три.
3. if (document.images) {
randomNum = Math.floor((Math.random() * imgCt))
document.myPicture.src = myPix[randomNum]
}
Ако документът различава графични обекти, създай променливата randomNum.
Променливата получава стойност от математическия израз Math.random генерира
случайно число между 0 и 1, което се умножава по стойността в imgCt.Math.floor
закръглява резултатът да е по-малкото цяло число, което означава, че числото ще
е между 0 и 2.
5. document.myPicture.src = myPix
[randomNum]
6. <BODY BGCOLOR=WHITE onLoad="choosePic()">
Използвайте командата onLoad за стартиране на
функция choosePic.
7. <IMG SRC="images/spacer.gif" WIDTH=400 HEIGHT=75 NAME="myPicture">
Визуализираното изображение получава името myPicture така, че използвайки
скрипта може да смените изображението.
В обикновения HTML може да се дефинират "горещи" области, които при
активиране от страна на потребителя го изпращат към определена страница.
Съчетаването е показано в:
Пример: chap03\script14.html
1. if (document.images) {
img1 = new Image
img2 = new Image
img3 = new Image
imgRed = new Image
Изпълни бърза проверка, дали браузъра на потребителя поддържа използваното в
document.image ниво на JavaScript. Ако всичко е наред създай четири графични
обекта.
2. img1.src = "images/testGreen1.gif"
img2.src = "images/testGreen2.gif"
img3.src = "images/testGreen3.gif"
imgRed.src = "images/testRed.gif"
}
Задай първоначални изображение на новите
графични обекти.
3. else {
img1 = ""
img2 = ""
img3 = ""
imgRed = ""
document.roll = ""
}
Ако проверката за съвременна версия на браузра е несполучлива, задайте на
променливите стойност null, за да се избегне съобщението за грешки в
скрипта.
4. <MAP NAME = "roll_map">
Задаване име на картата с изображение
5. <AREA SHAPE=RECT HREF ="sec1.html" onMouseover="document.roll.src=img1.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,0,120,60">
<AREA SHAPE=RECT HREF ="sec2.html" onMouseover="document.roll.src=img2.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,60,120,120">
<AREA SHAPE=RECT HREF ="sec3.html" onMouseover="document.roll.src=img3.src"
onMouseout="document.roll.src=imgRed.src" COORDS="0,120,120,180">
Тука се задава формата и размерът на трите правоъгълни "горещи" области в
картата с изображения; за всяка област се определя в скрипта събитието
onMouseover, което присвоява ответния сорс на обекта
document.roll.src.
6. </MAP>
<A HREF ="home.html"> onMouseout="document.roll.src=imgRed.src"> </A>
<IMG USEMAP="#roll_map" SRC="images/testRed.gif" WIDTH=120 HEIGHT=180
BORDER=0 NAME="roll" ALIGN=LEFT HSPACE=20></A>
Тук отваряте тага за хипервръзка и задавате начални стойности за onMouseover и
onMouseout. Описанието на картата с изображения е приключило така, че затворете
тага MAP и задайте име на картата в таг IMG; използвайте testRed.gif за
първоначално изображение и го наречете и го наречете roll. Накрая затворете
тага за хипервръзката чрез </A>.
Пример: chap03\script15.html
1. bGrounds = new Array("red","white","blue")
thisBG = 0
bgColorCount = bGrounds.length
Променливата bGrounds съдържа имената на използването цветове. Може
безпроблемно да използвате и шестнадесетичните стойности на цветовете; може да
смесите на използваните цветове. Може безпроблемно да използвате и
шестнадесетичните стойности на цветовете; можете да смесите съответните
стойности с имената на цветовете. ПРоменливата htisBG се инициализира с нула, а
в променливата bgColor се зарежда дължината на масива bgGrounds, която в случая
е три.
2. function rotataBG () {
дефиниране на функцията
3. if ( document.images ) {
thisBG++
Ако документът знае как се борави с изображения, тогава стойността на thisBG
нараства с единица
4. if ( thisBG == bgColorCount )
{
thisBG = 0
}
Ако thisBGG е равно на bgColorCount, тогава на hitsBG се присвоява нула. В
противен случай цикъла продължава,
5. document.bgColor = bGrounds [thisBG]
Променливата bGrounds предава на определения от thisBG цвят на
document.bgColor.
6. setTimeout ( "rotateBG()", 3 * 100 )
Командата setTimeout извиква функцията rotateBG
през 3000 милисекунди.
Един фрейм съдържа поне три HTML страници. Първият се нарича фреймсет и
дефинира размерите на все от дъщерните му фреймове (child). В JavaScript
обръщението към фреймсета е като главен или родител. Останалата част от
страниците се вкарва в панелите, създадени от фреймсета и се разглеждат като
подчинение страница (child pages). Ето пример за създаване на два подчинени
фрейма "left" и "content"
Пример: chap04\ex1\frameset1.html
Когато някой посещава страницата ви, той е превръща в подчинен фрейм на соя
главен прозорец. Чрез този скрипт може да се предотврати "завладяването" на
страницата и да наложите появяването и в самостоятелен прозорец.
Пример: chap04\ex1\frame1.html
Показване на страницата като част от друг сайт.
Пример: chap04\ex1\left1.html
1. Отделяне на страницата
if (top.location != self.location) {
Първо проверете местоположението на текущата страница (slef) в йерархията,
ако тя е разположена на върха (top), няма необходимост от действия.
2. top.location = self.location
Ако текущата страница не е на върха на йерархията, направете е такава. Така в
текущия прозорец ще бъде само вашата страница.
Когато търсещата машина включи страницата ви в своя индекс, тя не знае, че
страницата ви е част от фрейм. Когато хипервръзката доведе посетителя до
страницата ви, появява се само тя, а не целия проектиран фреймсет.
Пример: chap04\ex2\frameset.html
Пример: chap04\ex2\frame2.html
Пример: chap04\ex2\left2.html
1. if (top.location == self.location) {
Проверете дали текущата страница (self) е от ниво top. Ако не е тя е
разположена във фреймсет.
2. top.location.HREF = = "frameset2.html"
Ако местонахождението на страницата е на върха, заменете текущата страница с
URL адреса на фреймсета. Това ще визуализира фреймовете в сайта както сте ги
създали.
Ако разполагате с голям сайт, в който определен брой страници са разположение
във фрейм, методът от предшестваща секция е неудобен. Предлагаме ви по-добре
работещ метод за големите сайтове.
Пример: chap04\ex3\frameset.html
Пример: chap04\ex3\frame3a.html
Пример: chap04\ex3\frame3b.html
Пример: chap04\ex3\frame3c.html
Пример:chap04\ex3\left3.html
Зареждане на фрейм
Създаване и зареждане на динамичен фрейм
Споделяне на функции между фреймове
Запазване на информацията във фреймове
Едновременно зареждане на няколко фреймове
За едновременно зареждане на няколко фреймове
Mреализираме:
Откриване на браузъри с използване на фреймове
Откриване на браузъри чрез фреймове:
5. Работа с прозорците на браузъра
Зареждане на друго съдържание в прозорец
Отваряне на нов прозорец чрез графична хипервръзка
Превъртане на прозорец
Съвети
Обновяване на един прозорец от друг
За обновяване на един прозорец от друг
Създаване на нови страници в JavaScript
Затваряне на прозорец
Създаване на панел за управление
Позициониране на прозореца върху екрана
Истинност на въведената във форми информация
Проверка на паролите
Навигационни менюта тип select-and-go
Избор на елементи от менюто
Работа с радио бутони
Настройка на едно поле чрез друго
Проверка за подходящо записване
Автоматично присвояване на стойност в поле:
Истинност на пощенски кодове Zip
Валидност на електронните адреси
Създаване на динамични страници
Разполагане на текущата дата в Web страница
Работа с дни от седмицата
Показване на съобщение за определен час през деня
Конвертиране на 24 часовия формат за време към AM/PM формат
Генериране на обратно броене
Идентифициране на предшестваща страница
Динамично записване на текст в документ
Методи на обекта Date
JavaScript и Cookiess
Създаване на първото Cookies
Прочитане на cookie
Показване на cookie-та
Използване на cookies като броячи
Изтриване на cookie-та
Едновременна обработка на множество cookie-та
За поддържане на съставни cookie-та
Показване на съобщения "Newto You"
Java и Plung_ins
Проверка за поддръжка на Java
Какви са размерите на монитора?
Използване на Java за показване на текст
Използване на plug-ins за озвучаване
Прослушване на звуков файл чрез rollover
Работа с DHTML и външни файлове
Преместване на обект в двумерно пространство
Придвижване на обект в тримерно пространство
Придвижване на DHTML обект в Netscape
Придвижване на обект в тримерно пространство във всички браузъри
Преместване на DHTML текст (само за Netscape)
Преместване на текст във всички браузъри
Модификация на филтъра Drop Shadow само за IE
Завъртане на сянка в IE
Модификация на филтър Glow за IE
Спускащи се менюта за всички браузъри
Подвижни менюта само за IE
Етикети със съвети за всички браузъри
Използване на външен файл .js (за всички браузъри)
Тестване и настройка на Java Script
1. linkURL = "frame3a.html"
Настройте linkURL, като страница по подразбиране, която ще се появява във
фрейма със съдържание дори и в случаите, когато зареждате фреймсета с препратка
към страницата със съдържание.
2. if (parent.document.URL) {
Не всеки браузър, обработващ JavaSctrip, разбира от URL обект. Ако текущият
браузър не разбира, ще пропуснете следващите стъпки (до стъпка 5), а това се
осъществява чрез стъпките в оператор if.
3. callingURL = parent.document.URL
Ако бразузърът не възприема URL обект. стойността се записва в променливата
callingURL.
4. if (callingURL.indexOf('?') != -1) {
Опитвайте се да предадете на фреймсет-страницата името на страницата, която
ще се наложи във фрейма със съдържание. Това се реализира, като вземе името на
зарежданата страницата (фреймсет страницата) и добавите към нея "?" и след това
името на желаната страница. Стъпката проверява за наличието на "?" в
callingURL. Ако има, ще изпълните следващата стъпка.
5. linkURL =
callingURL.substring(callingURL.indexOf('?')+1,callingURL.length)
Тук взаимната URL и избирате само частта, следва след "?", а атрибутът за
дължина подава дължината на callingURL. Методът substring() връща само
необходимата ви част от callingURL от 1-вия символ след въпросителния знак до
края на URL.
6. document.writeln('<FRAMESET COLS="30%,70%">')
document.writeln('<FRAME SRC="left3.html" NAME="left">')
document.writeln('<FRAME SRC="' + linkURL + '" NAME="content">')
document.writeln('</FRAMESET>')
Тази част от скрипта записва динамично фреймсета. Ако браузърът разбита от
URL обекти URL е предаден с "?", фреймът със съдържание получава необходимият
URL. В противен случай страницата взима фрейма със съдържание по подразбиране,
който бе дефиниран в linkURL в стъпка 1.
7. top.location.HREF = = "frameset3.html?frame3a.html"
От страницата, която искате да бъде във фрейм чрез този код предизвиква
зареждането на фреймсет-страницата. Заредете в top.location.HREF = името на
фреймсет-страницата, последователно от "?" и името на необходимата
страница.
"\" В съответствие с HTML стандартите, браузърът може да интерпретира
началото на затварящия таг "</" вътре в document.write() като край на
реда.Обратно наклонената черта ви "отървава от "/", като позволява да записвате
HTML без да се предизвикват грешки.
Пример: chap04\ex4\frameset4.html
Пример: chap04\ex4\frame4a.html
Пример: chap04\ex4\frame4b.html
Пример: chap04\ex4\frame4c.html
Пример: chap04\ex4\left4.html
Общоприето е да имате един фрейм, който играе ролята на навигационен
инструмент за сайта и зарежда различни страници в главния фрейм. В листинг
CHAP04\EX4\FRAMESET4.HTM
1. pageArray = new Array ("","frame4a.html","frame4b.html","frame4c.html")
Създаваме нов масив с име pageArray, в който се съдържат URL адресно, достъпни
от лентата за навигация. Показани са три възможни страници, които могат да се
визуализират във фрейм content, така че са необходими три URL. Първата оставена
празна позиция в масива е позицията 0; така че може да използвате позициите
1, 2, 3 от масива, отговарящи на страници 1, 2, и 3
2. function setContent(thisPage) {
parent.content.document.location.HREF = = pageArray[thisPage]
}
Създаваме, нова функция setContent, която при получаване номера на страницата
зарежда изисканата страница във фрейм content. Това се реализира чрез търсене
на родител за текущия документ и зареждане на нова страница в в този фрейм чрез
настройка на location.HREF = и URL сорса за фрейм-документа.
3. <H2><A HREF
="javascript:setContent(1)">>Page 1</A><BR> </A>
В тялото на страницата създайте хипервръзки към страниците, които ще заредите
в главния прозорец. При щракване връзката се извиква функцията setContent на
JavaScript и се предава номерът на страницата (в случая е 1) за зареждане.
Повторете реда с нов номер на страницата, която желаете да се визуализира във
фрейм content.
Пример: chap04\ex5\frameset5.html
Тъй като JavaScript е в състояние динамично да създаде съдържание
на страницата, тази възможност е полезна за зареждане на динамични данни във
фреймове, базирани върху други фреймове или предпочитания на потребителя. В
листинга е показан фреймсет, зареждащ страница с фиктивно
съдържание.
Пример: chap04\ex5\left5.html
И страница за навигация, която може да създаде страница и да я зареди в
главния фрейм.
Пример: chap04\ex5\frame5.html
За зареждане на динамичен фрейм от друг фрейм
1. function writeContent(thisPage) {
parent.content.document.write("<HTML><HEAD></HEAD><BODY BGCOLOR=WHITE>
<H1>")
parent.content.document.write("You are now looking at page "+
thisPage+".")
parent.content.document.write("</H1></BODY></HTML>")
parent.content.document.close()
}
Създаваме нова функция writeContent(), която при получаване номера на
страницата създава динамична такава и я зарежда във фрейма content. Това се
реализира чрез намиране на родителя за текущия документ, след което се открива
фреймът content. Завършвате с document.close(), така че всичко записано да се
визуализира.
2. <A HREF = = "javascript: writeContent (1)"> Page 1 </A>
В тялото на страницата създавайте хипервръзки към страниците, които ще
зареждате в главния прозорец. При щракване върху хипервръзката се извиква
функцията writeContent на JavaScript, като и се подава номера на страницата,
която желаете да създадете и заредите. Фигура 4.9 показва резултата. Повторете
реда с нов номер на страницата и така за всяка страница, която желаете да
създадете и визуализирате, във фрейм content.
Общата структура на фреймове използва постоянен фрейм за навигация и фрейм за
съдържание, в които могат да се покажат множество различни страници. Ако всички
тези страници със съдържание трябва да се обръщат към идентичен JavaScript код,
разумно е функцията да се разположи в постоянна присъстваща страница, вместо
да бъде дублирана за всевъзможно страници със съдържание. Следващия скрипт
зарежда страници във фреймсета.
Пример: chap04\ex6\frameset6.html
За да използвате функцията в друга страницата
реализирайте:
Пример: chap04\ex6\left6.html
1. function setBanner() {
Създаване на фрейм за навигация
2. if(document.images) {
Проверка дали браузърът поддържа обект images. Ако поддържа изпълнението на
следващия ред ще предизвика грешка
3. bannerImg=newImage
bannerImg.src='blueBanner.gif'
Създайте ново изображение с има banerTmd и заредете сорса като URL на
избраното изображение. Сменяйки стойността на променливата или използвайки
случайно избрано изображение, ще променяте банера за всяка страница, от която
се извиква тази функция
4. return(bannerImg.src)
Връща стойността на новия зареден
банер
5. return ("")
Скриптът ще достигне до този ред, само ако браузърът не поддържа обект
images. Така, че скриптът връща празен низ вместо изображение.
6. document.adBaner.src = parent.left.setBaner()
Следващите скриптове са разположение във фрейм content, зарежда локална
променлива adBanerс новото изображение на банера, което се връща от setBaner в
parent.left (фрейм за навигация)
Пример: chap04\ex6\frame6a.html
Пример: chap04\ex6\frame6b.html
Пример: chap04\ex6\frame6c.html
В ситуации, подобни на описаните в предшестващия пример, можете да
проследите и съхраните полезна информация отвъд фреймовите, запазвайки
променливите в постоянна фрейм-страница. Следващия пример илюстрира колко пъти в
рамките на една сесия посетителят е посетил всяка страница със съдържание. Пример: chap04\ex7\frameset.html
Пример: chap04\ex7\left7.html
1. page1Count = 0
page2Count = 0
page3Count = 0
Във фрейма за навигация се инициализират три променливи, които ще проследявате
за всяка страница със съдържание
Пример: chap04\ex7\frame7a.html
2. parent.left.page1Count++
В заглавната област (<HEAD>) на фрейма със съдържание добавете единица към
брояча page1Count, чието местонахождение е във фрейма за навигация. За всяка
страница със съдържание използвайте различна променлива за брояч
3. document.write (page.left.page1Count)
В основната област (<BODY>) използвате променливата page1Count, която показва
колко пъти посетителят е минал през страницата за една сесия
Пример: chap04\ex7\frame7b.html
Пример: chap04\ex7\frame7c.html
За да промените съдържанието на няколко фрейма с едно щракване, възползвайте
се от JavaScript.
Пример: chap04\ex8\frameset8.html
Пример: chap04\ex8\left8a.html
function setFrames(newPage) {
parent.content.document.location.HREF = = "frame" + newPage + ".html"
document.location.HREF = = "left" + newPage + ".html"
}
Тази функция подава променливата newPage, която в последствие се използва за
определяне местоположението на двата фрейма, които ще се зареждат. Фреймът
content се връща в изходно състояние, променяйки стойността на
parent.content.document.location.HREF =, а фреймът left (текущият) се връща в
изходно положение, променяйки стойността на document.location.HREF =.
Например при извикване на setFrames ('8b') фреймът content се връща към
frame8b.htm а във фрейма left - "left8b.htm". Извикването на setFrames ('8a')
връща във фрейма content "frame8a.htm". Във всеки един от случаите лявата
навигационна страница показва текущо визуализираната страница във фрейма със
съдържание и не позволява избора на опцията.
Ако желаете да заредите синхронно повече от два фрейма, просто ги добавете
към списъка. т.е. трябва да добавите друг ред, специфициращ значението на
document.location.HREF = за всеки добавян фрейм. Ако ще променяте два фрейма, много
един то които не е текущ, просто следвайте модела от предшестващата стъпка, но
специфицирайте и двете местонахождения, започвайки от обекта parent.
Пример: chap04\ex8\fframe8a.html
Пример: chap04\ex8\frame8b.html
Пример: chap04\ex8\frame8c.html
Пример: chap04\ex8\left8b.html
Пример: chap04\ex8\left8c.html
Друго удобен метод за използване на фреймове е откриването на версията и
и възможностите на браузъра. В този пример посетителите ще спират при влизане,
ако браузърите им не поддържат JavaScript.
Пример: chap04\ex9\frame9.html
Пример: chap04\ex9\frameset9.html
document.write('<FRAMESET COLS="100%,*" FRAMEBORDER=NO BORDER=0>
<FRAME SRC="frame9.html" SCROLLING=AUTO></FRAMESET>')
Създаване на динамичен фреймсет с единна страница. Ако потребителя не разполага
с JavaScript, те попадат в тялото на страницата, където се показват
предупреждаващите съобщения.
Често се налага създаването на нови прозорци. Може да се създаде прозорец,
съдържащ някой от елементите които се виждат в стандартен прозорец.
Пример: chap05\script01.html
1. function newWindow() {
catWindow = window.open ('pixel2.jpg'. 'catWin',
widht = 330, height = 250' )
На променливата catWindow се присвоява обект на отворен прозорец, в който се
съдържа изображението pixel2.jpg. Новият прозорец с име catWin. Имената са
необходими за създаване на препратка към прозореца в хипервръзката или друг
скрипт. Ширината на новия прозорец е 330 пиксела, а височината е 250 пиксела
(параметрите са незадължителни).
2. <A HREF = = "JavaScript">: newWindow()" > Pixel </A>
В тага за хипервръзка се изпълнява функцията newWindow() на JavaScript, когато
се щракне върху хипервръзката.
В стъпка 1 ако се сложат интервали между запетайките в параметрите за ширина
и височина на някой браузъри скритата може да не се изпълни.
В предшестващия случай щракването върху хипервръзка водеше до създаване на
нов прозорец и запълването му с изображение. Да разгледаме случай с няколко
хипервръзки, насочени към един и същ нов прозорец
Пример: chap05\script02.html
1. function newWindow (gookgif) {
Деклариране на функция с
параметър
2. bookWindow = window.open(bookgif, 'bookWin', 'width=140,height=160')
bookWindow.focus()
В променливата bookWindow, отваряме обекта Window, след което следва
параметрите на прозореца. Съдържанието на прозореца се помества в променливата
bookgif. Името на новия прозорец е bookWin, а с параметрите за ширина
височина се определят размерите му.
3. В този ред се използва методът focus() който информира прозореца, че го
отваряте и го разполагате отпред. методът focus() може винаги да се използва
за визуализация на прозореца; при наличието на няколко отворени такива,
прозорецът отворен с focus() се разполага най-отгоре.
4 <P><A HREF ="javascript:newWindow('java-sm.gif')">>Java for the
World Wide Web: Visual QuickStart Guide</A>
И трите хипервръзки работят идентично, така че за яснота в тази стъпка ще
разгледаме само една от тях. Хипервръзката извиква функцията newWindow на
JavaScript и я запълва с името на файла с изображението на книгата, към която
сочи хипервръзката; за тази хипервръзка файлът е 'java-sm.gig'. Това е всичко
за тук. Но възниква въпроса. А къде е bookgif? Къде е посочена тази
променлива?". В този скрипт променливата се посочва по подразбиране в
хипервръзката. В стъпка 1 дефинирахме функцията newWindow ('java-sm.gif').
Името на изображението се превръща в стойност на bookgif. С други думи,
хипервръзката предава стойността на bookgif на функцията. В другите две
хипервръзки на страницата мястото на "Java-sm.gig" се заема от изображенията на
другите книги.
Противоположния на focus() метод е blur() води до изместване на прозореца
зад другите отворени прозорци. Методите focus() и blur() за обекта Window се
свързва с изпълнението на съответните събития onFocus и onBlur.
Вместо хипертекстови връзки можете да използвате графични хипервръзки за
отваряне на нови прозорци.
Пример: chap05\script03.html
1. function newWindow(bookgif) {
bookWindow = window.open(bookgif, 'bookWin', 'width=140,height=160')
bookWindow.focus()
}
В променливата bookWindow се зарежда обектът отворен прозорец със своите
параметри. След което методът focus() премества bookWindow
най-отпред.
2.<P><A HREF ="javascript:newWindow('java-sm.gif')">>Java for the
World Wide Web: Visual QuickStart Guide</A>
Този код е аналогичен и за трите хипервръзки; първо се извивка функцията
newWindow, като и се предава стойността на изображението (за тази хипервръзка
това е 'java-big.gif') и съответните големи GIF файлове за другите хипервръзки.
Между двойката тагове за хипервръзките <A> </A> специфицирайте и изходното
изображение за миниатюрата, която в случая е "java-sm.gif" и еквивалентните
малки GIF файлове за другите връзки.
Когато отваряте нов прозорец, бихте желали той да се превърта така, че да
поставите на видно място важната за потребителя информация. В следващия скрипт
е показан се отваря прозорец, съдържащ три изображение и превърта прозореца до
избраното такова.
Пример: chap05\script04.html
1. function newWindow(downscroll) {
2. bookpixWindow = window.open('bookpix.html', 'bookpixWin',
'width=150,height=170,scrollbars=yes')
Настройте параметрите за новия прозорец и ги запишете в променливата
bookixWindow.
3. bookpixWindow.focus()
Този ред осигурява разполагането на създадения прозорец пред другите
отворени.
4. setTimeout("bookpixWindow.scroll(0,"+downscroll+")",1000)
Ето къде се проявява превъртането. Настроили сте променливата bookixWindow да
превърта 0 пиксела хоризонтално и в зависимост от стойността на променливата
downscroll, толкова пиксела вертикално. Командата за превъртане е вложена в
командата setTimeout тъй като прозореца трябва първо да се създаде, а после да
се превърта. Ето защо имате изчакване от една секунда (1000 милисекунди), за
да се генерира прозорецът.
5.<P><A HREF ="javascript:newWindow(0)">>Java for the World Wide Web:
Visual QuickStart Guide</A>
<P><A HREF ="javascript:newWindow(160)">>Quicken 98 for Macintosh:
Visual QuickStart Guide</A>
<P><A HREF ="javascript:newWindow(320)">>Quicken 99 for Windows:
Visual QuickStart Guide</A></H3>
И трите хипервръзки настройват стойността на downscroll, която се подава на
функцията newWindow (стъпка 1). В този случай, 0 пиксела е стойността в първата
хипервръзка, 160 е във втората и 320 в третата - стойности, които ще се заредят
в downscroll, след щракване върху съответната хипервръзка. В горните редове не
фигурират таговете <P>, който се включват в реалните скриптове за
яснота.
За разлика от Netscape, Internet Explorer не може да превърта прозорци,
съдържащи URL от друг сървър. Можете да превъртате съдържанието само на същия
домейн.
Прозорците се превъртат от версия 3.0 на
горе
Ако се занимавате с форми и данни, въведени от потребителите, вероятно
бихте искали да разберете как да изпратите въведена информация за показването в
друг прозорец. Ситуацията е възможна при продажба на стоки и въведената от
потребителя информация трябва да се дублира в прозореца за обобщения и
потвърждения. В разглеждания пример ще се използват два прозореца: главен
прозорец или прозорец родител, в който ще се получава и визуализира
информацията, въведена в подчинените прозорци или прозорци деца. В скрипта е
показан главен прозорец.
Пример: chap05\script05.html
1. newWindow = window.open('child.html', 'newWin',
'toolbar=yes,location=yes,scrollbars=yes,width=300,height=100')
С този ред от скрипта се създава подчинен прозорец, като се използва файл
child.html. Останалата част от реда описва параметрите на подчинения
прозорец
2. <FROM NAME = "outputForm">
Върху родителската страница е разположена елементарна форма, която е
проектирана така, че скриптът лесно да попълни текстово поле с информация,
получена от подчинения прозорец. Редът отваря така FORM
и присвоява име на формата
3. <INPUT TYPE=TEXT SIZE=20 NAME="msgLine" VALUE="">
Този ред специфицира, че дължината на текста във формата няма да превишава 20
символа и името на текстово поле е mngLIne. Полето се индицира със стойност
null, т.е. първоначално полето е празно, след което следва затварящият таг
Form. А сега да разгледаме подчинения прозорец.
Пример: chap05\child.html
4. function updateParent(textField) {
В променливата textField се намира съдържанието на формата в в подчинената
страница child page.
5. opener.document.outputForm.msgLine.value = "Hello " + textField.value + "!"
В този ред се въвежда атрибутът opener, който определя обратната връзка към
главния прозорец. Разглежда се формата outputForm, намира се полето msgLIne и
се вмъква стойността на израза, разположена след знака "=". Изразът взима
думата "Hello", добавя стойността на полето textField, и накрая добавя
удивителен знак.
6. <FORM>
<INPUT TYPE=TEXT onBlur="updateParent(this)" SIZE=20>
</FORM>
Това е тагът FORM в подчинената HTML страница. Настройва се текстовото поле
и се изпълнява функцията updateParent при възникване на събитие onBlur, т.е.
при напускане на текстовото поле след въвеждането на информацията.
В предшестващите примери се използваха няколко HTML файлове за създаване на
различни прозорци. Това може да се избегне тъй като можете да вградите HTML в
скрипта и да създадете нова HTML страница динамично. Това е особено полезно,
защото можете да използвате преимуществата на JavaScript запълване на
страниците с динамично съдържание.
Пример: chap05\script06.html
1. newWindow = window.open('', 'newWin',
'toolbar=yes,location=yes,scrollbars=yes,resizable=yes,width=300,
height=300')
С този ред се отваря нов прозорец, настройват се параметрите му и се
назначават на променливата newWindow.
2. newWindow.document.write("<HTML><HEAD><TITLE>Generated
Window</TITLE></HEAD><BODY BGCOLOR=WHITE>
<H2> This window shows the result from the other window</H2>")
Това е интелигентно решение. Скриптът е записан в прозореца на документа
означаван с newWindow. Генерират се заглавната секция на HTML и първата част от
основната секция на страницата.
3. for (i=0; i<100; i++) {
Тук се стартира цикъл с променлива брояч i. Инициализирайте брояча с нула
преди за започнете след което стройността на брояча ще нараства с единица
докато стигне 100.
4. newWindow.document.writeln("<BR>The loop is now at: " + i)
В цикъла се записва текст в страницата с помощта на командата document.write.
Командата writeln автоматично добавя символ за връщане ( return character ) но
се налага и добавянето на <BR> за нов ред.
5. newWindow.document.write("</BODY></HTML>")
Ето къде се записват затварящите тагове на
HTML страницата.
6. newWindow.document.close()
Накрая чрез командата close() уведомявате браузъра, че сте осъществили
записване в документа newWindow.
Пример: chap05\script07.html
1. function openWindow() {
newWindow = window.open('', 'newWin',
'toolbar=yes,location=yes,scrollbars=yes,width=300,height=200')
Отваряне на прозорец със съответните
параметри
2. function closeWindow() {
Дефиниране на функцията за затваряне на
прозореца
3. if (newWindow && !newWindow.closed) {
newWindow.close()
Оператора if осъществява проверка, използвайки логическо И (&&), като ще се
върне True само ако двете стойности са True. В този случай, newWindow трябва
да е налице и да не е затворен (! е означението за логическо НЕ ). Ако
резултатът от проверката е True, скриптът прилага командата за затваряне на
обекта newWindow.
4. <H3><A HREF ="javascript:openWindow()">>Open a new
window</A> </A>
Щракването върху хипервръзката "Open a new window" извиква функцията
open.Window и създава нов прозорец.
5. <A HREF ="javascript:closeWindow()">>Close the window</A></H3> </A>
Аналогично, щракването върху хипервръзка "Close the window" затваря
подчинен прозорец
Използването на един от подчинените прозорци като панел за управление
(control panel) - прозорец с контроли, въздейства върху други прозорци разширява
възможностите на интерфейсното проектиране в Web сайта. Панелите за управление
биха подпомогнали потребителите при взаимодействието им с вашия сайт.
Пример: chap05\script08.html
1. newWindow = window.open('cpanel.html', 'newWin', 'width=225,height=200')
Единственото действие, което реализира скриптът от листинга 5.10 е отварянето
на нов прозорец (панел за управление), използвайки HTML във файла cpanel.html.
Получавате два прозореца.
Пример: chap05\cpanel.html
2. function updateParent(newURL) {
Сега работите в CPANEL.HTM. Този ред дефинира новата функция upadeParent,
съдържаща стойността на променливата newURL.
3. opener.document.location = newURL
Редът информира главния документ openr че атрибута, определящ
местонахождението се намира в променливата newURL.
4. <A HREF ="javascript:updateParent('about.html')">>About the
Authors</A><BR> </A>
При щракване върху хипервръзката "About the Authors" (за авторите) се
активира функцията upadeteParrent и в newURL се зарежда името на HTML
страницата. Останалите връзки работят по подобен начин.
Пример: chap05\script09.html
1. leftPos = 0
2. if (screen) {
leftPos = screen.width-225
Проверка дали съществува обекта screen. Това е по-хитрия начин да проверите
дали браузърът възприема обекта screen преди за започнете използването му. Ако
обектът може да се обработи от браузъра, променливата lefPos приема стойност
равна на ширината на екрана минус 225 пиксела - това е ширината на управляващия
панел.
3. newWindow = window.open('cpanel.html', 'newWin',
'width=225,height=200,left='+leftPos+',top=0')
Отваряне на нов прозорец (панел за управление), като се използва HTML във
файла CPANEL.HTML. Левият параметър съдържа стойността на leftPos. Това
означава,че панелът за управление ще се отвори в горния десен ъгъл на екрана
(
Показване на
предупреждаващо съобщение при зареждане на прозорец
Пример: chap05\script10.html
1. <BODY BGCOLOR=WHITE onLoad="alert('Welcome to this page!')">
Диалоговите рамки alert изискват потребителя да извърши някакво действие.
Така, че ако потребителят ако не е пред екрана на компютъра си процеса спира,
докато не се изпълни изискващото от диалоговата рамка alert. Повече информация в
глава 11.
Формите се използват за събиране на информация от посетителите и потребителите
на сайта.
Формите могат да съдържат полезни елементи от графичния интерфейс, а именно
полетата за въвеждане на информацията, радио-бутони, полета за отметка (chech
boxes, падащи менюта, списъци с елементи. Освен това HTML формите могат да
съдържат полета с пароли, които предпазват въведената потребителска информация
от любопитни погледи.
След попълването на формата с едно щракване върху бутона Submit информацията
се изпраща към Web сървъра, където CGI (Common Gateway Interface - стандартен
интерфейс за прехвърляне на данни от форми към обработващи програми CGI-скрипт,
който се изпълнява на Web сървъра) интерпретира данните и ги обработва.
Най-често данните след това се записват в база данни за по-късно използване.
Полезно е данните да се проверяват за коректност, т.е. да са точни и в правилен
формат преди да се записват върху сървъра. JavaScript е подходящият инструмент
за проверка на данните или валидността на формата (form validation). Въпреки,
че CGI може да проверява валидността, значително по-бърза и ефикасна
е проверката от JavaScript на клиентската машина.
Всеки път, когато изискате от потребителя да въведе парола, препоръчително е
да я въведе два пъти за да няма недоразумения. Ако между двете въвеждания на
паролата няма съответствие съответно се показва съобщение.
Пример: chap06\script01.html
1. function validForm(passForm) {
if (passForm.passwd1.value == "") {
alert("You must enter a password")
passForm.passwd1.focus()
return false
След като дефиниране функцията, проверете дали името в полето passd1 е
зададена празна стройност, както се вижда от израза == "". Ако това е така,
сложете диалогова рамка aler, която да изисква въвеждане на стойност, върнете
показалеца в полето passwd1 и дайте стойност на false на функцията.
2. if (passForm.passwd1.value != passForm.passwd2.value) {
alert("Entered passwords did not match")
passForm.passwd1.focus()
passForm.passwd1.select()
return false
}
return true
Ако стойността в passwd1 не съвпада със стойността на passwd2 , време е да се
появи още една диалогова рамка alert. В този случай, ги връщаме към поле
passwd1. и маркирате съдържанието му да е на разположение за замяна на
предполагаемото невярно съдържание; а функцията връща false. Ако проверката е
успешна ще се върне true.
Вероятно сте срещали достатъчно примери на стандартни навигационни менюта в
Web; те се състоят от две стъпки - правите своя избор от предложено меню, след
това щраквате бутон GO за да достигнете местонахождението. С малко JavaScript
код бихте могли да изпратите потребителите директно на мястото, което са
избрали от менюто, елиминирайки бутон GO. Този вид менюта се наричан
selec-and-go (избери и премини)
Пример: chap06\script02.html
1. function jumpPage(newLoc) {
Създаване на функция с параметър
2. newPage = newLoc.options[newLoc.selectedIndex].value
Започваме кода вътре в скобите и се придвижваме на вън. Обектът
newLoc.selectedIndex ще е число от 0 до 5 (тъй като в менюто са 6 възможни
избора). Задавайки някое от числата, получаваме стойността, съответстваща на
опция от менюто, която от своя страна е име на Web страница към която ще се
придвижваме. След което резултата се присвоява на променливата
NewPage.
3. if (newPage != "") {
window.location.HREF = = newPage
Проверка дали на променливата е зададена стойност. Ако има прозореца се
прехвърля на URL, който е специфициран в избраната опция на менюто.
4. <SELECT NAME="newLocation" onChange="jumpPage(this.form.newLocation)">
Тагът <SELECT> създава меню NAME = "newLocation". Когато потребителят избере
опция от менюто при изпълнение на събитието onChange се извиква функцията
JumpPage, на която се подава htis.form.newLocation, даваща стойност на
newLoc. Обектът this.form.newLocation съдържа URL на съответната избрана от
менюто опция, както е специфицирано в оператора OPTION VALUE.
Едно от преимуществата на този скрипт, е че след добавяне на JavaScript
функцията, не се налага нейното модифициране при добавяне, отстраняване или
промяна на опциите в падащото меню. Само стойността на опциите (URL адресите,
свързани с опциите на менюто) изискват настройка. По тези причини скриптът
работи достатъчно добре с WYSIWYG редактори на страници.
В примерното меню изброяваме цвят на колата, потребителя маркира своето
предпочитание от три цвята Red (червено), Green (зелено) или Blue (синьо),
Когато менюто не е разгънато потребителя вида надпис "Choose a color" (изберете
цвят). Тъй като цветът е задължителен атрибут на колата, потребителят трябва да
избере един от тях и не може да се пропусне този елемент.
Пример: chap06\script03.html
1. function submitIt(carForm) {
Дефиниране на функция за обработване
съдържанието на формата
2. colorChoice = carForm.color.selectedIndex
Променливата colorChoice получава числов резултат, базиран на избрания от
потребителя цвят. Опцията No choice има стойност 0 Red, 1 Green, 2 Blue.
Числото съответства на последователността посочена в менюто.
3. if (carForm.color.options[colorChoice].value == "") {
alert("You must pick a color")
return false
Сега проверяваме стойността на colorChoice. Ако стойността е нула (==""),
тогава формата генерира съобщение за напомняне
4. return true
В останалите случаи всичко е наред и е време за преминем към следващата
задача за оценка валидността на данните.
Позволяват да се избере само едно предпочитание от група опции. Използват се
когато изборът на една от опциите е задължителен. В случая се избира кола с
две или четири врати.
Пример: chap06\script04.html
1. function submitIt(carForm) {
doorOption = -1
Дефиниране на функцията и присвояване стойност по подразбиране която не е
валидна.
2. for (i=0; i<carForm.DoorCt.length; i++) {
Стартираме цикъл за проверка на
радиобутоните
3. if (carForm.DoorCt[i].checked) {
doorOption = i
Това е проверка дали отбелязан радиобутон, променливата doorOption получава
стойността на i.
4. if (doorOption == -1) {
alert("You must choose 2 or 4 door")
return false
Ако не е направен избор се появява
съобщение
5. return true
Ако стойността е различна значи е направен
избор
Във формите често се случва след направен избор, той да диктува стойността за
други полета. Например, предполагаме, че подвижния капак на покрива на
автомобила (sunroof) е в наличност само за моделите с две врати. Това би могло
да се използва по два начина; първо, проверяват въведения записи и активирате
диалогова кутия alert при неправилен избор, може да опростите въвеждането на
информацията, като при маркиране на sunroof, автоматично се активира и бутона
за модел с две врати.
Пример: chap06\script05.html
1. if (carForm.DoorCt[doorOption].value == "fourDoor" &&
carForm.sunroof.checked) {
alert("The sunroof is only available on the two door model")
return false
}
return true
Това е доста прям подход. Ако стойността на радио бутона е "fourDoor" и е
активирано полето за отметка пред sunroof, тогава се активира диалогова рамка
alert със съобщение за грешка. В противен случай, е изпълнено.
Следващата част от скрипта настройва дейността
на полето
1. function doorSet(sunroofField) {
Както винаги първо дефинираме
функцията
2. if (sunroofField.checked) {
for (i=0; i<document.myForm.DoorCt.length; i++) {
След това е сложена отметка пред полето sunroof така, че стартираме цикъл,
който ще сканира всички полета doorCt.
3. if (document.myForm.DoorCt[i].value == "twoDoor") {
Търсите полето two-door (две врати)
4. document.myForm.DoorCt[i].checked = true
След като откриете полето за две врати, изберете го, като му присвоите
стойност true.
5. <INPUT TYPE=CHECKBOX NAME="sunroof" VALUE=YES
onClick="doorSet(this)">Sunroof (Two door only)
По-долу в секцията BODY е кодът за проверка на полето sunroof за отметка. При
възникване на събитие onClick се извиква функцията doorSet, на която се подава
стойността (this). Необходимо е събитието да предизвиква изпълняването на
функцията.
В полетата за пощенски код могат да се въвеждат
само цифрови стойности
Пример: chap06\script06.html
1. function isNum(passedVal) {
Дефиниране на функцията с isNum с променливата
passedVal
2. if (passedVal == "") {
return false
Ако pasedVal е празна тогава Zip кодът не е цифров; функцията връща false и
скриптът генерира съобщение за грешка.
3. for (i=0; i<passedVal.length; i++) {
Сканиране дължината на passedVal, като броячът
i нараства
4. if (passedVal.charAt(i) < "0") {
return false
}
if (passedVal.charAt(i) > "9") {
return false
}
Операторът charAt проверява символа в позиция i. Ако символът е по-малък от
"0" или по-голям от "9". Ако резултатът е true пощенския код е
цифров.
5. function submitIt(carForm) {
if (carForm.zip.value == "" && carForm.dealerList.selectedIndex == -1) {
alert("You must either enter a Zip code, or pick the dealer closest to you")
carForm.zip.focus()
return false
}
Функцията осигурява или въвеждане на Zip код или избиране на стойност от
превъртащата се текстова рамка. Това се реализира чрез проверка за невъведена
стойност или маркиране на две съответни полета. Ако проверката е True, активира
се диалогова рамка alert за потребителя, а показалецът се връща в полето Zip
посредством метода focus().
Пощенските кодове извън пределите на САЩ могат да съдържат не само цифри;
дори може и да няма пощенски кодове в адресите.
Интернет адресите са достатъчно трудоемки за въвеждане, особено за нови
потребители. Налага се да се следи за знака "@".
Пример: chap06\script07.html
1. function validEmail(email) {
Дефиниране функция за проверка на
email
2. invalidChars = " /:,;"
Създаване на променливата invalidChars която съдържа 5-те невалидни символа
за email.
3. if (email == "") {
return false
}
Проверка за въведен адрес
4. for (i=0; i<invalidChars.length; i++) {
Цикъл за сканиране на невалиден символ в
адреса
5. badChar = invalidChars.charAt(i)
if (email.indexOf(badChar,0) > -1) {
return false
}
Променливата badChar запазва позицията на недействителния символ в низа
invalidChars. Например ако невалидния символ е ":" а позицията е 2 (помни че
броенето започва от 0) indexOf търси позицията на символа в низа. Ако резултатът
на функцията indexOf е -1, символът не е в низа и резултатът няма де е
false.
6. atPos = email.indexOf("@",1)
if (atPos == -1) {
return false
}
Променливата atPos съдържа позицията на знака "@". Използвайки indexOf,
скриптът проверява за първи символ "@", започвайки от втора позиция в адреса.
Ако местонахождението на знака "@" е в позиция -1, това означава че
липсва.
7. if (email.indexOf("@",atPos+1) > -1) {
return false
}
Сега скриптът потвърждава наличието на знака "@", отхвърляйки всичко с
повече от един знак "@", като проверката на символите започват от 1 след
намерения първи знак "@". Знакът "!" означава "not", така, че ако бъде срещнат
знак "@" в произволна позиция която не е -1, проверката на низа е
несполучлива.
8. periodPos = email.indexOf(".",atPos)
if (periodPos == -1) {
return false
}
Сега скриптът проверява за наличието на точка след знака "@". Ако няма
резултата е false.
9. if (periodPos+3 > email.length) {
return false
}
return true
Накрая скриптът изисква поне два символа след
точката в адреса.
10. function submitIt(carForm) {
if (!validEmail(carForm.emailAddr.value)) {
alert("Invalid email address")
carForm.emailAddr.focus()
carForm.emailAddr.select()
return false
}
return true
Ако променливата validEmail е "nottrue" (не е истина), тогава да се активира
alert с предупреждение "невалиден адрес". Когато потребителят щракне върху бутон
ОК в диалоговата рамка, скриптът връща показалеца в полето email във формата,
извиквайки emailAaddr чрез командата select().
Пример: chap06\script08.html
JavaScript може да определи текущата дата и час от компютъра (получава го
като число), като манипулира по различен начин с цифрите. Скриптът извърша
конвертирането на число в дата.
Пример: chap07\script1.html
1. dayName = new Array
("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
Най-напред създаваме нов масив, в който ще се съдържат данните от седмицата.
Елементите в масива се разделят със запетайки; символните низове се заграждат в
кавички.
2. monName = new Array ("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December")
Създаване на масив с имената на
месеците
3. now = new Date
Последното нещо, което реализираме в тази част на скрипта е създаването на
нова променлива за дата now в командата newDate, която изисква от JavaScript
създаването на нов обект newDate и запълването му с текущата дата.
4. document.write("<H1>Today is " + dayName[now.getDay()] + ", " +
monName[now.getMonth()] + " " + now.getDate() + ".</H1>")
Във втората част от скрипта се съдържа един ред, който директно се пише в
прозореца на документа. Командата document.write разполагат оградения в скоби
израз на прозореца.
Тагът <H1> определя максимален размер на буквите.
Обектът dayName [now.getDay()] се интерпретира от дясно на ляво; командата
getDay() извлича деня от седмицата; чрез добавяне на now към него се получава
текущият ден от седмицата. Числовият резултат препраща към елемент от масива
dayName. Месеца се получава аналогично като деня от седмицата.
Пример: chap07\script2.html
Пример: chap07\script3.html
Пример: chap07\script4.html
1. function showMilitaryTime() {
if (document.theForm.showMilitary[0].checked) {
return true
{
return false
Проверка кой бутон е натиснат
2. function showTheHours(theHour) {
3. if (showMilitaryTime() || (theHour > 0 && theHour < 13)) {
return (theHour)
}
Този ред казва, че ако времето ще се показва в 24 часов формат или
резултатът, съдържащ времева част е по-голям от нула, но по-малък от 13, тогава
числото просто се слава в променливата hteHour. Операторът || е логическо
ИЛИ.
4. if (theHour == 0) {
return (12)
}
return
(theHour-12)
Ако променливата theHour е нула, тогава се връща резултат 12, в противен
случай се връща theHour минус 12
5. function showZeroFilled(inValue) {
if (inValue > 9) {
return ":" + inValue
}
return ":0" + inValue
}
Украсяване на резултата; когато секундите са по-малко от 10 се включва водеща
нула.
6. function showAmPm() {
if (showMilitaryTime()) {
return ("")
}
if (now.getHours() < 12) {
return (" am")
}
return (" pm")
}
Показва надписите AM/PM.
8. function showTheTime() {
now = new Date
Функцията първо запълва променливата now с
текущата дата.
9. document.theForm.showTime.value = showTheHours(now.getHours()) +
showZeroFilled(now.getMinutes()) + showZeroFilled(now.getSeconds()) +
showAmPm()
Конструиране стойността на часа, която се появява в поло на формата, като се
свързват резултатите от всички функции.
10. setTimeout("showTheTime()",1000)
Показване на времето.
Пример: chap07\script5.html
1. now = new Date
Присвояване датата на променливата
now
2. thisYr = now.getYear()
if (thisYr < 1900) {
thisYr = thisYr+1900
}
nextYr = thisYr + 1
Тази стъпка се съобразява с факта, че JavaScript не разбора то година 2000 и
последващи. Това действително отстраняване на бъга Y2K. Започва се със
зареждане на променливата thisYr с порцията за годината в now. След това
условието проверява "Ако това thisYr е по-малко от 1900, тогава присвои на
thisYr стойност равна на настоящата плюс 1900. "След което се настройва
стойността за новата променлива nextYr на thisYr плюс 1.
3. anniv = new Date(thisYr,6,21)
if (anniv.getTime() < now.getTime()) {
anniv.setYear(nextYr)
}
Това е първата от трите подобно настройки на променлива. Променливата anniv
се запълва с текущата година, след което се специфицира датата на годишнината
21 Юли. Скриптът показва 6,21 ( а не 7,21) защото броенето започва от 0.
В следващата проверка се установява дали времето на годишнината е по-малко от
текущото време. Ако това е така увеличете с единица номера на годината.
Обработката с малки промени е аналогична за променливите birthday и xmas, които
се настройват в следващите два блокови код.
4. function dayToDays(inTime) {
return (Math.floor(inTime.getTime() / (1000 * 60 * 60 * 24)))
}
JavaScript запазва датите в милисекунди, започвайки от 1 януари 1970. За да
могат да се сравнят две дати, променете стойностите така, че да отговорят на
брой дни от 1 януари 1070 г. Първо получете числото милисекунди за ден, като
умножите 1000 (милисекунди в една секунда) а 60 (брой секунди в минута),
на 60(брой минути в час) и 24 (брой часове в денонощие). Разделете броя
милисекунди на стойността, която връща getTime(), на полученото число -
получавате броя на дните считано от 1 януари 1070 г. Функцията Math.floor() се
грижи резултата да е цяло число.
5. function daysTill(inDate) {
return dayToDays(inDate) - dayToDays(now)
}
Тази функция подава дата в inDate и връща броя дни между inDate и текущата
дата.
Скриптът от тялото на документа (започва с document.write) е познат. Той
взима резултатите от пресмятанията и ги съединява всичките в текстов низ, а
полученият резултат се записва в прозореца на документа.
Пример: chap07\script6.html
1. if (document.referrer != "") {
Ако предшестващата страница е представена като document.referrer и не е
празна, продължаваме по-нататък със скрипта. Обектът document.referrer може да
е празен, ако потребителят не е посещавал преди това други страници, а директно
е отворил браузъра си във вашата страница.
2. document.write("<H1>I hope you like this page better than " +
document.referrer + ".</H1>")
Ако обектът document.referrer не е празен, запишете в документа с помощта на
символен низ съобщение до потребителя, като свържете съдържанието на
document.referrer с низа, разполагайки го в средата.
Възможността за запис на информация в Web страница в отговор на действие е
добър трик, който може да се използва в много ситуации. В примера е показан
календар с (хипервръзки). Щракването върху съответната дата показва въведените
въведените събития за деня в текстово каре до календара.
Пример: chap07\script7.html
1. dayInfo = new Array
dayInfo[1] = "Canada Day"
dayInfo[4] = "Independence Day\rEllen's birthday"
dayInfo[11] = "Stan's birthday"
dayInfo[16] = "Sheila's birthday"
dayInfo[19] = "Web Design World '99"
dayInfo[20] = "Macworld Expo\rWeb Design World '99"
dayInfo[21] = "Our anniversary\rMacworld Expo\rWeb Design World '99"
dayInfo[22] = "Sean's birthday\rMacworld Expo\rWeb Design World '99"
dayInfo[23] = "Macworld Expo\rWeb Design World '99"
Първият ред дефинира нов масив dayInfo, а следващите редове въвеждат
информация в масива в позиция n, където n е номерът в квадратните скоби, който
от друга страна идентифицира деня в месеца. ТАка че dayInfo[22] представлява
22-рия ден от месеца. Всеки ред представлява ден, в който има едно или повече
събития. Ако елементът го няма в масива, това означава, че за този ден няма
фиксирани съобщения. Например липсата на запис в dayInfo[14] означава, че няма
събития, които да се показват на 14-тия ден от месеца.
В някой редове се виждат символите " \r", това е начинът, по който се
записва преминаването на нов ред, така всяко събитие се разполага на нов
ред.
2. function showInfo(thisDay) {
document.calendar.dateInfo.value = dayInfo[thisDay]
}
Функцията showInfo() получава деня от месеца, използва го за получаване не
информация от масива dayInfo[] и разполага данните в текстовата област dateInfo,
което в същност е името на карето, разположено до календара.
| Метод | Описание | Връщана ст. |
| getDate() getUTCDate() | Ден от месеца | 1-31 |
| getDay() getUTCDay() | Ден от седмицата | 0-6 |
| getFulllYear() getUTCFulllYear() | Година | 1900 |
| getHours() getUTCHours() | Час от деня | 0-23 |
| getMilliseconds() getUTCMilliseconds() | Брой милисекунди | 0-999 |
| getMinutes() getUTCMinutes() | Брой минути от последния час | 0-59 |
| getMonth() getUTCMonth() | Месец от годината | 0-11 |
| getSeconds() getUTCSeconds() | Брой секунди от последната минута | 0-59 |
| getTime() | Число милисекунди от полунощ на 1 I 1970 | |
| getTimezoneOffset() | Разлика между локалното и GMT време в секунди | 0-1439 |
| getYear() | Полето за година в датата | 0-99 за години 1900-1999 за 4 цифри |
| parse() | Получава низ date/time | Милисекунди от 1 I 1970 |
| setDate() setUTCDate() | Определя деня, получавайки | 1-31 |
| setFillYrar() setUTCFillYrar() | Определя годината при подаване на 4 цифри | Дата в милисекунди |
| setUTCHours() setHours() | Определя часа получавайки число между 0-23 | Дата в милисекунди |
| setMiliseconds() setUTCMiliseconds() | Определя милисекундите получавайки число | Дата в милисекунди |
| setMinutes() setUTCMinutes() | Определя минутите получавайки число между 0-59 | Дата в милисекунди |
| setMonth() setUTCMonth() | Определя месеца получавайки число от 0-11 | Дата в милисекунди |
| setSeconds() setUTCSeconds() | Определя секундите получавайки число между 0-59 | Дата в милисекунди |
| setTime() | Определя датата, получавайки число в милисекунди | Дата в милисекунди |
| setYear() | Определя годината получавайки две или четири цифри | Дата в милисекунди |
| toGMTString() | GMT дата и час във формат стринг | day dd mmm yyy hh |
| toString() | Локална дата и час във формат стринг | |
| UTC() | Получава датата във формат година, месец, ден | Дата в милисекунди |
| valueOf() | Число в милисекунди считано от 1 I 1970 | Дата в милисекунди |
Cokie в терминологията на Web е уникален низ от информация. който се доставя
от Web сървъра на браузъра при първата им среща и който се определя при всяко
следващо посещение. Отдалеченият сървър записва своята част от cookie и
съдържащата се информация за вашето посещение; вашият браузър извършва същата
операция във вид на обикновен текстов файл върху твърдия диск.
Като автор на JavaScript кодове, можете да използвате cookies за много
полезни неща. Ако сайтът ви изкисва регистрация, чрез cookies можете да
запишете потребителската идентификация и пароли така, че при всяко следващо
посещение потребителя да не въвежда тази информация отново. Можете да
проследите чрез кои части на сайта ви се движи посетителят и колко пъти е
посещавал.
Важно е да разберете какво не може да правите с cookies: не можете да
получите реална информация за посетителя, като електронния му адрес; не можете
да използвате cookies за проверка съдържанието на неговите твърди дискове;
cookies не предават компютърни вируси. Cookie е един обикновен текстов файл
върху твърдия диск на потребителя, където програмистите на JavaScript могат да
запазват някаква информация.
Cookies винаги включва адреса на сървъра от който е изпратен. Това е
основната идея, залегнала в cookie-технологията: идентификация. Можете да го
разглеждате като CallerID (идентификатор на посетителя) за Web с вариации по
сценария - всеки Web сайт използващ cookies присвоява на браузъра ви по някакъв
личен ID, който може да се разпознае при следващо посещение. Когато се
върнете към Web сайт, който при първото ви посещение ви е издал cookie,
сървърът може да запита браузъра дали е от притежателите на cookie. Ако това е
вярно, сървърът може да поправи запазената в cookie информация, която
първоначално са обменили. Имайте предвид, че cookies просто идентифицират
използвания компютър а не човека, който работи с него.
Под Windwodws 95 и 98 Netscape съхранява cookies в
C:\PROGRAM FILES\NETSCAPE\USER\<user name>\COOKIES.TXT
А Internet Explore 4.0
C:\WINDOWS\COOKIES
Cookie е текстов низ с определен формат:
cookieName = cookieValue
expires = expirationDateGMT
path URLpath
domain = siteDomain
Първата част от символния низ определя името и присвоява стойност на cookie -
това е задължителна част от cookie останалите части са опционални. Сдаващата
част описва датата, до която е валиден низът след настъпването на тази дата
браузърът автоматично ще изтрие този низ. След датата следва URL адреса, който
позволява записването на URL в cookie. Накрая можете да включите в cookies
стойността на домейна.
Пример: chap08\script01.html
Настройката на cookie се въвежда чрез стойност във форма от потребителя. В
примера е показана форма която може и да не проработи, но всъщност cookie е
създадено. Останалите примери в главата се базират върху този.
1.expireDate = new Date
Получаване на текущата дата.
2. expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
В този ред се получава частта за месеца expireDate, към месеца се добавя 6,
след което частта за месеца за expireDate се присвоява на нова стойност. С
други думи, срокът на cookie изтича след 6 месеца.
3. userName = ""
Инициализирайте с стойност null променливата
userName
4. if (document.cookie != "") {
userName = document.cookie.split("=")[1]
}
Започвате условна проверка с това, дали обектът dcument.cookie не съдържа
стойност null. Методът split ("=") разделя записа на cookie. Отбелязваме,че
cookiePield може да приема произволни имена за полетата cookie. Така, че на
променливата userName се назначава стойност, върната от document.cookie.split
("=") [1], което е стойността на cookie.
5. function setCookie() {
userName = document.myForm.nameField.value
Следващите редове обновяват стойността на userName с резултата от информацията,
въведена от потребителя в текстовото поле.
6. document.cookie = "userName="+userName+";expires=" +
expireDate.toGMTString()
Ето къде се записва cookie. В document.cookie поставяте името на потребителя
и датата, до която е валиден низът (промените, че cookie е просто текстов низ,
ката, че можете да използвате техники за конструирането му, като използват
знак "+" за съчетаване на на елементите). Методът toCMTStrnting() конвертира
обекта expireDate Date в текстов низ така, че да може да се запише в
cookie.
7. <BODY BGCOLOR=WHITE onLoad="document.myForm.nameField.value = userName">
В тага <BODY> събитието onLoad разполага името на потребителя в именованото
поле при зареждане на страницата, ако във файла cookie има запазено
име.
8. <INPUT TYPE=TEXT NAME="nameField" onBlur="setCookie()"></H1>
Накрая ви трябва този HTML за създаване на формата и определяне на имената за
нея и полето и. Когато потребителя напусне текстовото поле, се изпълнява
събитието onBlur, което извивка функцията setCookie.
В скрипта се предполага, че първото cookie съдържа името на потребителя.
Разглежданите по-късно скриптове ще покажат, как сее поддържат няколко cookie-та
и как да получавате cookie по име вместо по номер.
Променете настройките на браузъра си така, написаните cookies да се виждат,
за да проумеете какво се случва зад декорите. Например в Netscape опцията
Preference в секцията Advanced. След избора ще се появи диалогова рамка, в
която ще видите първоначалната стойност на cookie, която позволява да се
отхвърли cookie ако не желаете до го приемете.
След като сте поставили в скрипта cookie, ще ви се налага да го поправяте за
да ви е полезно. Последния пример създаде cookie, идентифициращо се като "Tom".
Сравнително лесният скрипт ще ви демонстрира как да получите стойността на
cookie и да я покажете върху екрана (в реални условия).
Пример: chap08\script02.html
1. if (document.cookie != "") {
Преди всичко проверете дали стойността на
обекта document.cookie не е нула.
2. document.write("Hello, "+ document.cookie.split("=")[1])
document.write ("Hello, " + document.cookie.split ("=") [1] )
Ако cookie_то не е празно, въведете текстов низ ("Hello, " - обърни внимание
а интервала след запетайката) и го съчетайте с разделената стойност на
cookie.
Забележи, че не е необходимо да се посочва кое cookie в cookie-файла се чете?
Това е така, защото едно cookie може да се прочете само от сървъра, който е
записан на първо място. Вътрешният механизъм за обработка на cookie от
браузъра не позволява да се пречете низ, който е записан от друг. Ще имаш
достъп само до създадените от тебе cookies.
Ще разгледаме скрипт който прочита всички cookies, идващи от вашият сървър,
като се показват имената и стойностите. Ако няма cookies, скриптът издава
съобщение. Ако се открият се показват всяко едно на нов ред.
Пример: chap08\script03.html
1. if (document.cookie == "") {
document.write("There are no cookies here")
Ако няма cookie покажи съобщението
2. else {
thisCookie = document.cookie.split("; ")
Ако има присвои ги на променливата thisCookie. Командата split (";") създава
масив от cookies. По-късно скриптът ще е в състояние да с обръща към всяка
стойност от масива.
3. for (i=0; i<thisCookie.length; i++) {
Стартира се цикъл, като в началото на
променливата i, се присвоява 0.
4. document.write("Cookie name is '"+thisCookie[i].split("=")[0])
document.write("', and the value is '"+thisCookie[i].split("=")[1]+"'<br>")
След като скриптът се придвижва през масива, той записва символния низ
"Cookie name is" в прозореца на документа, след който следва името на cookie,
а след това следващият свързан document.write и се добавя текстов низ "and the
value is" и самата стойност на cookie.
Тъй като cookies се запазват непроменените през множеството сесии между Web
сървъра и браузъра, може да се използват като броячи за преминава на определен
потребител през страницата. Това е аналогично на броячите в страниците. Тъй
като cookie е специфичен за всеки потребител, можете да получите информация за
броя негови посещения. Ще разгледаме възможността за създаване на такъв
индивидуален брояч, а скриптът може да се преработи и за други цели. Пример: chap08\script04.html
1. expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
Тези два реда са аналогични на предишните
примери
2. hitCt = eval(cookieVal("pageHit"))
Променливата pageHit е името на cookie. Методът eval променя текстовия низ
(това, от което се нуждае променливата, за да го използва като брояч)
3. hitCt++
Увеличаване на брояча е единица
4. document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString()
Обновената информация се записва в cookie за използване в бъдеще. Ще се запише
в текстов низ, който е съставен от низа "pageHit=" увеличената стойност на
hitCt и добавено";expres=" с датата на свършване, която е увеличена с шест
месеца в предшестващата стъпка.
5. function cookieVal(cookieName) {
Дефиниране на функцията
6. thisCookie = document.cookie.split("; ")
Променливата получава резултатите от масива,
генериран от метода split(";")
7. for (i=0; i<thisCookie.length; i++) {
Тук започва цикъл, като в стъпка 3 на примера
от секция "Показване на cookies"
8. if (cookieName == thisCookie[i].split("=")[0]) {
Проверка дали cookieName съвпада с първия
елемент от cookie-масива
9. return thisCookie[i].split("=")[1]
Ако проверката е неуспешна връща се стойността
на cookie
10. return 0
Ако няма повече елементи в масива, връща се стойност нула и се излиза от
цикъла.
11. document.write("You have visited this page
" + hitCt + " times.")
При изпълнението на този скрипт натисни F5 за да видиш нарастването на
брояча. Една от възможностите за използване на cookie за проследяване на
последното посещение на потребителя в сайта и показване на страниците през
които е минал. Например в сайта с онлайн списанието на Microsoft Slate
(http://www.slate.com) има страница, с корица, която илюстрира художествено
произведение и имената на статиите за деня. Ако потребителя посети сайта
еднократно, той ще види само тази страница, а ако посети сайта повече от един
път за 24 часа - чак тогава се допуска директно към страницата със съдържанието
на сайта.
Изтриването на cookie-та от даден запис е лесно осъществимо. Една от добре
работещите техники се състои в установяване на минала дата в променливата за
срок на съществуване, което предизвиква автоматично изтриване на cookie от
браузъра. В листинга е показано как да накарате едно cookie да
остарее.
Пример: chap08\script05.html
1. if (document.cookie != "") {
С тази проверка се установява, че cookie-та не съдържа стойност null, т.е.
cookie-записът не е празен. Ако проверката че cookie е празен низ, тогава
скриптът нищо не прави.
2. if (confirm("Do you want to delete the cookies?")) {
Тази проверка е вмъкната в последната и казва на браузъра да разположи в
диалогова рамка за потвърждение с включените текстови низове.
3. thisCookie = document.cookie.split("; ")
В този ред съдържанието на cookie-записа се
разделя в масив
4. expireDate = new Date
expireDate.setDate(expireDate.getDate()-1)
Първо получете текущата дата и я съхранете в expireData. След това от
текущата дата извадете единица и запишете стойността в expireData;
т.е.крайният срок е с вчерашна дата.
5. for (i=0; i<thisCookie.length; i++) {
Започва цикъл който изтрива всички
cookie-та
6. cookieName = thisCookie[i].split("=")[0]
Получаване името на изходното cookie
7. document.cookie = cookieName + "=;expires=" + expireDate.toGMTString()
cookie с променена крайна дата се записват на
твърдия диск
8. document.write("<H1>Number of cookies deleted: " + thisCookie.length +
"</H1>")
Този ред съобщава за броя на изтритите cookies
в прозореца на документа.
Пример: chap08\script06.html
1. now = new Date
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
Инициализиране на променливите
2. hitCt = eval(cookieVal("pageHit"))
hitCt++
Броячи
3. lastVisit = cookieVal("pageVisit")
Получаване резултата от функцията
4. if (lastVisit == 0) {
lastVisit = ""
5. document.cookie = "pageHit="+hitCt+";expires=" + expireDate.toGMTString()
document.cookie = "pageVisit="+now+";expires=" + expireDate.toGMTString()
Тези два реда записват низа отново на диска с обновен номер и дата на
посещение.
6. function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return 0
}
7. document.write("You have visited this page " + hitCt + " times.")
Скриптът, който е разположен в секцията <BODY>, записва стойността на брояча,
съчетана с някакъв текст на екрана.
8. if (lastVisit != "") {
document.write("<br>Your last visit was " + lastVisit)
}
Проверка дали потребителя е бил тук.
Може да уведомявате редовните посетители на
вашият сайт какво ново има.
Пример: chap08\script07.html
1. now = new Date
expireDate = new Date
Зареждане на текущата дата в две
променливи
2. expireDate.setMonth(expireDate.getMonth()+6)
До коя дата ще бъде валидно cookie-то
3. lastVisit = new Date(cookieVal("pageVisit"))
Тук се използва стандартната функция cookieVal която насочва стойността на
lastVisit към датата на последното посещение.
4. document.cookie = "pageVisit="+now+";expires=" + expireDate.toGMTString()
Този ред записва cookie, разполага текущата дата в полета pageVisit и
стойността на expireDate в полето expires.
5. function cookieVal(cookieName) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return "1 January 1970"
}
Това е познатата функция cookieVal. Единствената разлика е, че връща "1
January 1970" вместо нула, ако не е намерено име на cookie, което малко
опростява следващия код. Особеността на датата е в това, че JavaScript използва
тази дата за начало на отброяване на времето.
6. function newCheck(yyyy,mm,dd) {
Получаване параметрите за годината, месеца и
деня.
7. lastChgd = new Date(yyyy,mm-1,dd)
Променливата lastChgd получава текущата дата, но от месеца е извадена
единица. 8. if (lastChgd.getTime() > lastVisit.getTime()) {
document.write("<IMG SRC='new.gif' WIDTH=28 HEIGHT=11 ALT='new'>")
}
Ако датата в lastChgd е по-късна от посочената в lastVisit, тогава графичният
елемент "New" ще се запише в прозореца на документа.
9. newCheck(1999,5,4)
Тази функция се извиква след различни хипервръзки. тя получава годината,
месеца и датата за добавянето на реда към страницата. Ако видите малкото
изображение "New" това означава, че редът е бил добавен след последното посещение
на потребителя на страницата.
Java аплетите за програми, които се изтеглят от браузъра на потребителите и
се изпълняват от Java интерпретатора на браузъра. Един аплет може да извършва
доста неща, които JavaScritp не може; можете да създавате цялостни приложения
на Java със собствени потребителски интерфейси.
Plun-ins за програми разширяващи възможностите на браузърите за изпълнението
на определени функции. Обикновено plug-ins се пишат на езиците С или С++, за
постигане на оптимална скорост при изпълнение. Общодостъпни plug-ins са
Shockwave и Flash на Macromedia, които позволяват да се наблюдава анимация и
Quick Time на Apple, с помощта на който могат да се гледат дигитални филми и
друго мултимедийно съдържание.
Пример: chap09\script01.html
Преди да извикате Java-аплет в страницата си,проверете дали браузърът на
потребителя е в състояние да обработва Java. Това заключение може да се направи,
като разберете версията на браузъра, но това не е достатъчно тъй като
съществува опция в браузъра, позволяваща да се заключи поддръжката на Java. И
така желаете да използвате код, който пита браузъра дали Java е включен или е
възможен. Като страничен ефект скрипта ще уведоми, ако JavaScript не е
допустим.
1. document.writeln("<H1>Java is ")
Записва се текстов низ
2. if (!navigator.javaEnabled()) {
Проверка дали Java не е достъпен
3. document.writeln("not ")
Ако не е се записва това
4. document.writeln("enabled.</H1>")
Ако скриптът е стигнал до тук означава, че Java е достъпен. Обратната черта
пред Н1 означава "Escape". Така браузъра коректно интерпретира затварянето на
тага
5. <NOSCRIPT>
<H1>JavaScript is not enabled.</H1>
</NOSCRIPT>
Ако Java не е достъпен. Това е обикновен
HTML.
С Java може да се разбере това.
Пример: chap09\script02.html
1. sWidth = 0
sHeight = 0
Нулиране на променливите
2. if (navigator.appName == "Netscape" && navigator.javaEnabled()) {
Проверка дали Java е достъпен и дали
потребителя използва Navigator.
3. sWidth = java.awt.Toolkit.getDefaultToolkit().getScreenSize().width
sHeight = java.awt.Toolkit.getDefaultToolkit().getScreenSize().height
Откриване размерите на екрана
5. if (sWidth == 0 || sHeight == 0) {
Проверка дали променливите съдържат още
нули
6. sWidth = 640
sHeight = 480
Ако е така им се дават стойности по
подразбиране
7. document.writeln("<H1>Your screen dimensions are: " + sWidth + " x " +
sHeight + ".</H1>")
Показване стойностите на
променливите.
8. newWin = window.open("","newWin","width=" + sWidth + ",height=" + sHeight)
Отваряне на нов прозорец с размерите на
екрана
Този скрипт подава текст от JavaScript в Java
аплет.
Пример: chap09\script03.html
1. document.myApplet.newText(tempText)
Този ред взима въведения текстов низ и го показва в диалогова рамка на
JavaScript. Въведеното от потребителя се разполага в обект
document.myApplet.newText. Отбелязваме, че myApplet е името на Java аплета,
който ще извърши работата по показването на текстова.
2. <BODY onLoad="startUp()" BGCOLOR=WHITE>
Към стандартния HTML BODY таг добавете функцията starUp, която ще се
стартира при зареждането на страницата. На фиг. 9.4 е показан
резултатът
3. <APPLET CODE="Applet1.class" WIDTH=600 HEIGHT=50 NAME="myApplet">
В този HTML ред се използва таг APPLET с кода, размерите на екрана в
пиксели и името на Java аплета.
Предшестващия пример проверява дали въведеният в диалоговата рамка на
JavaScript текст ще се побере върху екрана в противен случай, той просто ще
излезе извън дясната граница на екрана.
Три типа шрифт са във всяка виртуална машина на Java. Тези типове шрифтове
са Serif (сериен), Sans Serif (несериен) и Mono. Причината да се назовават
типовете шрифтове е за осигуряване сигурността на работата на всеки компютър;
виртуалната машина прави съответствие между трите типа шрифтове с реално
присъстващите в компютъра, върху който се изпълнява. В повечето случаи се
избират следните три шрифта съответно Time Roman Helvetica и Courier.
Обикновено, когато желаете да покажете форматиран текст, използвайте
най-лесния метод, работещ в Netscape или Internet Explore 4.0, който се нарича
Cascading Style Sheets (йерархични стилове). Използването на Java за налагане на
стил върху текст е полезно, ако текстът е генерират от Java. Например в много
сайтове се използват Java аплети за различни етикети. Използването на този
метод ще ви помогне да приложите съответен текстов стил за етикетите.
В примера ще използваме plug-in Live Audio на Netscape за прослушване на
звуков файл. Ще създадем бутони за управление (използвайки HTML форма) за
стартиране, пауза и спиране на звука, за увеличаване и намаляване силата на
звука. В листинга се съдържат няколко функции, които поддържа функции за контрол
Тази задача няма да работа в Internet Explore тъй като програмата използва
ActiveX технология (собствена версия на Microsoft за plug-ins) за управлението
на озвучаването.
Пример: chap09\script04.html
1. function startSound() {
document.mySound.play(false)
Тази функция просвирва звуковия файл
2. function pauseSound() {
document.mySound.pause()
Пауза в просвирването
3. function stopSound() {
document.mySound.stop()
Спиране на изпълнението
4. function changeVol(changeBy) {
Получава стойност за променливата
5. currentVol = document.mySound.GetVolume()
Стойността за силата на звука
6. if (currentVol < 100 && currentVol > 0) {
Проверка дали стойността е валидна
7. document.mySound.setvol(currentVol+changeBy)
Ако стойността е извън допустимите граници се заменя със стойността на
changeBy, която показва или +10 единици или -10 в зависимост кой бутон е
натиснат.
8. <EMBED SRC="jurassic.wav" NAME="mySound" MASTERSOUND AUTOSTART=NO
HIDDEN=TRUE>
Тагът EMBED на HTML изисква няколко късчета информация. Атрибутът SRC
предоставя името на звуковия файл NAME се грижи за името на файла или URL
адреса на звуковия файл за нуждите на JavaScript; MASTERSOUND е задължителен
атрибут, когато се използва име за звуков файл. Стойността NO в атрибута
AUTOSTART означава, че звуковия файл няма да се стартира автоматично. .
Установяването на атрибута HIDEN в TRUE осигурява, Е при зареждане на
LiveAudio неговият вграден аудио контрол панел няма да се покаже.
9. <INPUT TYPE=BUTTON VALUE="Vol +" onClick="changeVol(10)">
Установяване на бутона Vol
Пример: chap09\script05.html
1. function playSound(SName) {
Получава стойност за променливата
2.if (document.embeds[SName] != null && document.embeds[SName].IsReady()) {
Този ред проверява, дали вградения обект, в случая звуков файл от тага EMBED
е в състояние not null (т.е. звуковия файл дали е налице) и дали звуковият файл
е готов и достъпен за просвирване.
3. document.embeds[SName].play(false);
Изпълнение на звуковият файл. Параметъра false осигурява еднократно
изпълнение.
4. <P><A HREF ="javascript:void('')">
onMouseover="playSound('moof')"><IMG </A>
SRC="dogcow.gif" WIDTH=43 HEIGHT=34 BORDER=0 ALIGN=LEFT HSPACE=30></A>
JavaScript:void("") уведомява тага да не се свързва към други HTML страници.
При преместване на показалеца на мишката върху графична хипервръзка ще се чуе
звукът издаван от животно. Тагът IMG специфицира смяна на изображението.
Останалият таг EMBED работи аналогично на предишния пример.
Всеки браузър интерпретира DHTML по различен начин. За повече информация
провери проекта W3C стандарти на http://www.webstandards.org.
Пример: chap10\script03.html
1. if (document.all) {
Стартирайте един от специфичните скрипове, проверявайки дали съществува
обектът document.all. Ако той съществува значи работите с Internet
Explorer.
2. topPos = document.all.mover.style.pixelTop
leftPos =
document.all.mover.style.pixelLeft
Може да избегнете част от специфична за браузъра код, като инициализирате
променливи за двата браузъра и след това правите препратки към тях. Тук
инициализирайте позициите top и left на летящата пеперуда в Internet
Explorer.
3. topPos = document.mover.top
leftPos = document.mover.left
По същия начин определя позицията left и top за
Netscape
4. if ((halfChance() || topPos >= maxHeight) && topPos > 5) {
topPos -= chgXBy
Тези редове отново изчислява посоката на промяната на позицията top, но този
път въз основа на променливата, инициализирана за двата браузъра. Следващите
редове от скрипта правят същото за оста Y.
5. if (document.all) {
document.all.mover.style.pixelTop = topPos
document.all.mover.style.pixelLeft = leftPos
Сега да променим стъпка 2, като предназначим специфичните за Internet Explore
атрибути въз основа на общите променливи. В случая осите X и Y и се промененият
въз основа на topPos и leftPos.
6. document.mover.top = topPos
document.mover.left = leftPos
Сега променяме и стъпка 3 където бяхме описали специфичните на Netscape
атрибути.
И в този пример се декларират три стила; leftfore, който настройва левият
обект от преден план; mover установява обекта подлежащ на анимация; rightforeза
десния обект от преден план. Настройката на z-указателя за стилове позволява
предивижането на изображението да става пред или зад други обекти.
Пример: chap10\script04.html
1. function slide() {
Създаване на функцията
2. document.mover.left+=2
Преместване лявата страна на mover на два
пиксела.
3. if (document.mover.left < document.rightfore.left) {
setTimeout("slide()",20)
Ако при преместването не се е визуализирала лявата страна на обекта със стила
mover до този момент, преди да се покаже изображението със стила rightfore,
използвате setTimeout за пауза около 20 милисекунди и отново изпълнете
slide.
Във всеки стил от примера е включен z-Index (z-указател). Обектът с най-висока
стойност на z-Index се показва при заемането на едно и също пространство от два
обекта.
За да направите този скритп изпълни за Internet Explorer поменете стъпка 2 на
document.all.mover.style.pixelLeft
<document.all.dightfore,stylepixelLeft)
Пример: chap10\script05.html
Установихме, че разликата е в два реда. Но комбинирането на двата скрипта в
един, който да работи на произволен браузър е малко по-сложно.
Пример: chap10\script06.html
1. if (firstTime) {
if (document.all) {
rightDotPos = document.all.rightfore.style.pixelLeft
}
else {
rightDotPos = document.rightfore.left
}
firstTime = false
Това е стъпката за инициализация, където променливата rightDotPos се настройва
да посочва лявата граница на местонахождението на изображението rightfore, както
за Netscape, та и за Internet Explorer. Тази стъпка се изпълнява само веднъж,
така че завършва с присвояване на стойността false на променливата
firsTime.
2. document.all.mover.style.pixelLeft += 2
currPos = document.all.mover.style.pixelLeft
Тези два реда от кода са изпълними само в Internet Explorer. Първият
премества изображението, а вторият запазва общата променлива currPos текущата
позиция на изображението.
3. document.mover.left += 2
currPos = document.mover.left
Това е версия на стъпка 2 за Netscape. Първият ред премества изображението, а
торият записва в currPos текущата му позиция.
4. if (currPos < rightDotPos) {
Ако текущата позиция на избора е вляво от
rightPos продължава преместването
DHTML третира текста просто като още един обект. Ето пример за преместване на
текст.
Пример: chap10\script07.html
1. function moveIt() {
Създаване на функцията
2. document.mover.top+=2
document.mover.left+=2
Преместване на обекти със стила mover на долу с 2 пиксела през 2 пискела,
като премествате горната и лявата граници.
3. if (document.mover.top <= (window.innerHeight-100)) {
setTimeout("moveIt()",20)
Ако най-горните пикесли на преместваната област не са достигнали 100 пиксела
от долната част на прозореца,използвайте setTimeout за изчакване на 20
милискеунди преди отново да се изпълни movelt().
Пример: chap10\script08.html
1. keepGoing = true
Инициализиране на променливата
2. function moveIt() {
Създаване на функцията
3. if (document.all) {
document.all.mover.style.pixelTop += 2
document.all.mover.style.pixelLeft += 2
Ако документа съществува потребителя работи с Internet Explorer и текста се
придвижва надолу
4. if (document.all.mover.style.pixelTop > (document.body.clientHeight-100))
keepGoing = false
За Internet Explore, ако горната част на текста се намира на разстояние 100
пиксела от долната част на прозореца, в keepGgoing се появява false.
5. document.mover.top += 2
document.mover.left += 2
Ако потребителя използва netscape, преместване
на долу
6. if (document.mover.top > (window.innerHeight-100)) {
keepGoing = false
7. if (keepGoing) {
setTimeout("moveIt()",20)
Ако в keepGoing стойността все още е true, използвайте setTimeout за
изчакване на 20 милисекунди преди отново да се изпълни moveIt().
В IE съществува тип данни filter (филтри), които предоставя достъп на
JavaScript до различни методи за модифициране на обектите. В примера е
показано използването на филтър shadow (падаща сянка, извивка се с dropShadow
за модифициране на появяващия текст. Филтърът стартира на 50 пиксела над и под
оригиналния текст, като постепенно се приближава все по-близко до текста,
докато не се застъпят
Пример: chap10\script09.html
1. function doDrop(xCoord, yCoord) {
Създаване на функцията с две променливи за
подаване.
2. if (document.all && xCoord > 1) {
Ако потребителят е е в прозорец на браузъра Internet Explorer и подадената
координата Х е по-голяма от единица, изпълнете следващите стъпки:
3. xCoord -= 1
yCoord -= 1
Извади единица от двете координата X и Y, за да преместиш dropShadow по-близо
до оригиналното изображение.
4. document.all.dropText.style.filter="dropShadow(offX=" + xCoord+ ", offY="
+ yCoord + ")"
Зареди отново стила на филтъра в обекта dropText с нова стойност на
променливата dropShadow, като променената стойност на Х (offX) зададете на
координатата Y (yCord), а промяната на Y (offY) се разположени в координатата y
(yCoord).
5. setTimeout("doDrop(" + xCoord + "," + yCoord + ")", 100)
Пауза от 100 милисекунди и отново извикайте doDrop за нова ревизия на
координатите X и Y.
В листинга е използван филтър за сянка за модифициране на появяващия се
текст. В този пример сянката стартира на 90 градуса спрямо оригиналния текст и
се завърта на 360 градуса.
Пример: chap10\script10.html
1. function doShadow(newDirection) {
Създаване на функцията на която се подава
текущата посока на сянката
2. if (document.all && newDirection < 360) {
Ако браузъра е IE и стойността на newDirection е по-малка от 360 (максималното
число градуси), изпълни следните стъпки
3. newDirection += 10
document.all.dropText.style.filter="shadow(direction=" + newDirection +")"
Добавяне на 10 градуса към new Direction за настройка на новата позиция на
сянката и установяване във филтъра новите стойности на shadow, премествайки
падащата сянка.
4. setTimeout("doShadow(" + newDirection + ")", 100)
Пауза преди изпълнението на
функцията.
В примера е показано използването на филтъра glow (светлосянка) за
модифициране вида на текста. В този пример ефекта от филтъра започва с яркост 5
и достига до максимална стойност 255.
Пример: chap10\script11.html
1. function doGlow(newStrength) {
Създаване на функцията
2. if (document.all && newStrength < 255) {
Проверка дали браузъра е IE и текущата яркост е
по-малка от максималната.
3. newStrength += 10
document.all.glowText.style.filter="glow(strength=" + newStrength+ ")"
Увеличаване на яркостта с 10 и задаване нова
стойност на стила.
4. setTimeout("doGlow(" + newStrength+ ")", 100)
Пауза 100 милисекунди
Пример: chap10\script12.html
1. function toggleMenu(currElem) {
Дефиниране на функцията. Променливата е текущият елемент избран от
потребителя.
2. menuObj = eval("document.all." + currElem + ".style")
menuObj.pixelTop = toggleVal(menuObj.pixelTop)
За потребителите на IE, установи menuObj въз основа на currElem и стандартния
за IE модел на обектен документ. В следващия ред menuObj превключва
най-високата си позиция, ако менюто е разгънато и най-ниската, ако менюто се
сгъва при щракване
3. menuObj = eval("document." + currElem)
menuObj.top = toggleVal(menuObj.top)
Потребителите на Netscape извършва същите действие. Променливата menuObj
поучава стойност въз основа на currElem и обектния документ; най-високата
позиция се променя в зависимост от това, дали менюто е било спуснато или
сгънато.
4. function toggleVal(inVal) {
if (inVal == -5) {
return -90
}
return -5
На функцията се подава позицията, а тя връща противоположната стойност . Ако и
се подава -5; връща -90; ако и се подаде -90 връща -5
Всичко което е разположено между таговете SPAN играе роля на спускащо се
меню.
Друго интересно средство е възможността за добавяне на елементи в средата на
страницата, като браузърът може да пренареди текста така, че той да се спусна
около тях.
Пример: chap10\script13.html
1. function toggleMenu(currMenu) {
if (document.all) {
Създаване на функция за предаване на препратка към текущото меню. Ако
браузърът е IE се изпълнява следващите стъпки.
2. thisMenu = eval("document.all." + currMenu + ".style")
В променливата thisMenu се посочва препратка към необходимото меню, както се
използва командата eval.
3. if (thisMenu.display == "block") {
thisMenu.display = "none"
else
thisMenu.display = "block"
Ако атрибутът за показване на thisMenu е "block". Този код го променя на
"none", сменя се на "block". Това е което превключва показването на
менюто.
4. return false
Ето го и номера. Функцията togleMenu() се извиква от събитието onClock чрез
таговете <А>. Ако се върне false атрибутът HREF = няма да се зареди в
прозореца.
5. else {
return true
Ако браузъра на посетителя не е IE, скриптът връща true, което предизвиква
зареждането на нова страница в прозореца на браузра. В този стил, ако браузъра
продължи тази функционалност информацията от менюто се показва върху същата
страница, докато браузърите, които не я поддържа, просто зареждат нова Web
страница, в която се показват необходимите данни.
6. <A HREF ="page2.html"> onClick="return
toggleMenu('menu2')">Tragedies</A> </A>
Тук се извика функцията toggleMenu(). Подаването на стойността "menu1"
предизвиква показване на всичко, което е включено в таговете <SPAN>. Новото
щракване върху хипервръзката предизвиква изчезването на тази
информация.
Това е удобен метод за показване на
допълнителна информация.
Пример: chap10\script14.html
1. if (document.all) {
docObj = "document.all."
styleObj = ".style"
Това е един от вариантите на част от полезен код,който може да се използва в
много DHTML скриптове. При еднократно настройване на тези променливи, те могат
да се използват многократно за създаване на специфични за браузърите обекти,
без да се изисква специфична проверка за самия браузър.
2. function popUp(evt,currElem) {
Тук се създава функцията на която се подават две променливи evt, събитие,
което води до извикване на функцията и cttelem, текущия елемент, който ще се
покаже по желание на потребителя.
3. popUpWin = eval(docObj + currElem + styleObj)
В този ред се създава обект въз основа на currElem< поддържан от всички
браузури и docObj, и styleObj, които са инициализирани в стъпка 1.
4. popUpWin.top = parseInt(evt.y)+2
popUpWin.left = Math.max(2,parseInt(evt.x)-125)
Тук се определя позициите top и left на етикета за потребителите на Internet
Explorer. Променливите evt.x и evt.y съдържат x и y позициите на показалеца при
възникване на събитието onMouseover, а съвета се показва на разстояние от 125
пиксела отляво и 2 пиксела отгоре.
5. popUpWin.top = parseInt(evt.pageY)+2
popUpWin.left = Math.max(2,parseInt(evt.pageX)-125)
Тук се определят позициите top и left на етикета за потребителите на
Netscape. Netscape запазва стойностите x и y на показалеца в evt.pageX и
evt.pageY.
6. popUpWin.visibility = "visible"
window.status = ""
Независимо от типа на браузъра, тези две стъпки се изпълняват за всички.
Първата показва прозореца popUpWin, а втората почиства областта на състоянието
в прозореца на браузъра.
7. function popDown(currElem) {
popUpWin = eval(docObj + currElem + styleObj)
popUpWin.visibility = "hidden"
Тази функция действа обратно на popUP(). Прави
етикета със съвета невидим.
8. <AREA SHAPE=RECT COORDS="121,214,136,230" HREF ="javascript:void('')"
onMouseout="popDown('popUp1')" onMouseover="popUp(event,'popUp1');return true">
Това предизвиква показване на всичко което е оградено с тагове <SPAN> с
идентификатор ID = "popUp1, в етикета със съвета.
Ако имате общ код, който се използва в целия сайт, излишно е включването му в
отделни страници. Може просто да се създаде външен файл на Java Script, а в
страниците да се включат препратки към него. Отделните страници извикват js
файла, като добавят нов атрибут SRC в така <SCRIPT>>
Пример: chap10\home.html
Пример: chap10\prees.html
Пример: chap10\contact.html
- <SCRIPT SRC="external.js" LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
Добавянето на атрибут SRC в тага <SCRIPT> изисква използване на браузъри
c />/>/* поддържащи JavaScritp 1.1 и по-късни версии.
Този метод се използва за скриване на JavaScript от потребителите. Той не е
работоспособен, ако потребителят пороверява само кеш файлове в
браузъра.
В тази страница можете да включите повече от един header скрипт. Допустимо е
в една страница да съществуват препратки към различни js файлове и да съдържат
уникални за страницата елементи.
Пример: chap11\script1.html