жаңа терезе ашылатын болады. Бәрінен бұрын бұл әдісті контексті тәелді мәзірді құру кезінде қолданады.
Навигатор терезесінде мәтінді айландыру
[
{window.scroll(0,i*10)};void(0);">
Мәтінді айландыру]
Жалпы айтқанда, көру программасының типін HTTP протоколының серверінде тексеруге және оны шартты генерациясыз дайын бетті көру программасына жіберуге болады
...
[Басына қайта оралу]
Бұл қарапайым HTML құжаты.
Тағы да HTML құжаты.
Бұл қарапайым HTML құжат.
Тағы да HTML құжаты.
Name:
e-Mail:
My homepage
onClick="first()">
onClick="second()">
(line 7)
(line 8)
(line 13)
(line 14) тегінен кейін) пайда болады.Бұл өңдеушілер функциялар туралы айтқанда маңызды.
Тапсырма
Қолданушымен өзара қарым-қатынас жасайтын форма құрыңыз. Бұл үшін сіз FORM командасын білуіңіз керек. Формада үш элемент болуы тиіс. Қолданушының атын енгізетін мәтіндік жол , екі тексеруші терезелер, сонымен қатар submit батырмасы. Әр элемент мынадай қызмет атқару керек:
Қолданушы мәтіндік жолды толтырған кезде, мәтіндік жол статустық жолды мәтінмен бірге «өзіңіздің есіміңізді мына жерге жазыңыз» толтырады.
Екі тексеруші терезелер статустық жолға қолданушының таңдауын көрсетіп «Сіздің таңдауыңыз...» мәтін жібереді.
Енгізу батырмасы форманы толтырғаны үшін алғыс хабарламасы бар терезе шығарады.
Жауап:
Бұның барлығын былай жасауға болады
8-Зертханалық жұмыс. Сұраныстар мен айнымалылар. Сабақтыңмазмұны:
Бұл сабақта екі тақырып. Біреуін қолданушыдан қандайда бір ақпаратты білгің келген кезде пайдалана аласыз. Екіншісін, айнымалылар құру, сіз оны JavaScript тілінде скриптер жазған барлық уақытта қолдана аласыз.
JavaScript тілінде толық сктиптерді құруға оралайық, HTML тіліне қарапайым толықтырудан басталады, сондықтан біз тегтерін тағы пайдалануымыз керек болады. Осы сабақтағы скрипте қолданушыға өз есімін жариялауды сұраймыз және бұл есімді айнымалыға меншіктейміз. Айнымалыға меншіктелген есімді
Бұл сабақ алдыңғыларға қарғанда ұзақ. Осыған дейін жасалғандардың барлығына бақылау жасау
Скрипт
Естеріңізде болсын, негізінде барлығы бір жолға жазылуы керек
Скрипт әсері. Атауларды енгізуге арналған және атауды қай жерге енгізу керектігі туралы терезе ашылады. Енгізуден кейін сәлемдеме хабарлама пайда болады Салем,<атау>. Менің бетіме қош келдіңіз!
Скриптті талдау
Тоқта!Символдарының /* және*/ сәйкестігі нені білдіреді?Бұл символдардың сәйкетігі өзара коментари бекітеді. Үш сабақ бұрын біз коментариларды анықтау үшін екі (//) еңкейген сызықты пайдаланғанбыз. Бұл екі еңкейген сызықты әржолдың басында жазамыз. Жоғарыда келтірілген символдардың сәйкестігін келкоментаридің басы мен аяғында қою керек.
Айнымалыларды құру. Бұл түсінік JavaScript тілінде жоғары маңыздылыққа ие, сондықтан оны жақсы білу керек. Сипаттамалық мысал келтірейік. Бізге күнді жазу керек болғанда getDate() функциясын қолданамыз. Біз document.write қосымшасында getDate() функция атауын толық жаздық. Біз бұл атауды бір рет қана жаздық сондықтан қиын болған жоқ. Ал егер күнді 10 немесе бетте одан да көп рет басып шығарсақ?
Бұл жағдайдан шығу функциясының жұмысының нәтижесін амалыайнымалыға меншіктеу болып табылады. Айталық “d” айнымалысы делік. Бұл жағдайда біз “d” айнымалысын меншіктегенде getdate()-ті бір рет жазуымыз керек болады, ал сосын күнді жазатын жерде функция атауының орнына “d” –ны жазамыз. Мысалға оралайық:
Мысалдың айнымалыны анықтайтын жолы:
var user_name=prompt (“терезеге төменге өз есіміңізді жазыңыз”,“мына жерге жазыңыз”)
Түсініктеме:
- var өзінен кейін жазылған сөздің айнымалы аты екнін жариялайды.
- user_name айнымалы аты. Ол өте ұзақ болмауы керек.Оны “N” деп те жазуға болады.
- Естеріңізде ұстаңыздар JavaScript тілі регистрге сезімтал, сондықтан егер “Dog” айнымалысы болса, онда then the жазбаша түрде болуы керек.
- Байқасаңыз мәтіннің бұл үзіндісінде тырнақша жоқ.
- теңдік (=) белгісі, теңдіктен кейін жазылатын функция жұмысының нәтижесіне теңестірілетінін білдіреді.
- Бұл жағдайда айнымалы қолданушының мәтіндік терезеге енгізіліміне меншіктеледі.
Сұраныс командасы. Мысалда жаңа команда, сұраныс қолданылады. Сұраныс форматы:
var variable_name=prompt(“Сұр терезедегі мәтін”, “Ақ терезедегі мәтін”)
Байқағанымыздай, командаға var сөзі және айнымалы атауы енгізілген. Егер олар болмаса, онда қолданушы енгізгендер сақталмайды.
Егер сіз қаласаңыз...
-Бос аппақ терезе алу үшін екінші тырнақшаға ештене жазбау керек.
-Егер сіз екінші тырнақшаны қоспасаңыз, терезеге енгізу анықталмайды.
-Егер ақ терезеге бірнәрсе жазсақ және қолданушы ОК-ді басса ешқандай да жаңа енгізулерсіз, онда сіз терезеге не жазсаңыз сол қолданушының енгізгені болып саналады.
-Егер ақ терезеде ештеңе жоқ болса және бірнәрсені басып шығару үшін қолданушы ОК-ді басса, онда енгізуші сөз “null”.
Кері скриптті талдауға... Енді, сіздер барлық құрамды бөліктерін білген соң, скриптке қайта ораламыз:
var user_name=prompt (“терезеге төменге өз есіміңізді жазыңыз”,);
document.write (“Салем, “+user_name+”. Менің бетіме қош келдіңіз!”);
Жұмыстың сипаттамасын берейік:
-“user_name” атаулы айнымалысына сұраныс нәтижесі меншіктелген.
-сұраныс қолданушыға өз есімін енгізуді сұрайды.
-ақ терезеде “мына жерге жазыңыз” деп жазылған.
-нүктелі үтір жолды аяқтайды.
-“document.write” функциясы “Сәлем” мәтінін жазады.
-(+) белгісі барлық бөлігі бірге жинақталады дегенді білдіреді.
-“user_name”айнымалысы құрамында қолданушының енгізгені бар. Тырнақшаның кері жоқ. Айнымалы атын баспаға жазып шығарғымыз келмесе.
-енді бір қосу амалы.
-“Менің бетіме қош келдіңіз!” мәтін нүкте және бос орынмен аяқталады.
-Нүктелі үтір.
Айнымалы туралы толық мағлұмат алғаныңыз туралы көз жеткізіңіз. Олардың пайдасы өте зор болғандықтан тілде кеңінен қолданылады.
Тапсырма
Тапсырманың мақсаты JavaScript тілінің командаларының көмегімен керемет эффектілерін құру құралдарын меңгергеніңізді көрсету болып табылады. Бұл реттегі сіздің тапсырмаңыз төменде көрсетілген скриптті көру үшін оның жекеленген бөліктерін талдап скриптің қалай жұмыс істейтінін талдап түсіндіру болып табылады. Түсіндірмелерді жоғарыдағыдай етіп жазыңыз.
Скриптті талдау:
-Стандартты жолдан бастаймыз скриптті аяқтайды
-бір өте маңызды деталь, скрипт HTML құжатта BODY тэгінің жоғарғы жағында орналасу керек, өйткені TITLE BODY тэгінен жоғары орналасады.
9-Зертханалық жұмыс. Қасиеттертүсінігі Сабақ мазмұны
Біз Java Script тілінде обьектілердің тізбектілігін оқып үйренуді бастаймыз. Java Script тілінде тізбектілік өте маңызды болып табылады.
Біз бұл обьектілерге әсер ететін “document” сияқты обьектілер, “write” сияқты әдістер бар екенін білеміз. №6 сабақта біз әдістерін қолдану үшін обьекті құрумен айналысқан болатынбыз. Енді біз қасиет түсінігін қарастырамыз. Қасиет туралы жоғарыда әңгіме еткенбіз. Олар обьектінің бөлігі немесе сапасы. №3 сабақта біз bgColor құжатының қасиетімен жұмыс істегенбіз.
Java Script тілінде қасиеттердің саны өте көп болғандықтан, біз олардың ішінен тек өзімізге қажеттісін ғана қарастырамыз.
Скрипт. Бұл сабақта скрипттер бірнешеу және олардың барлығының форматы бір. Айнымалылар атауы “object. property” хабарламасы үшін құрылған, содан кейін әрқайсысы монитор экранына шығару үшін document.write() командасына орналасады. Төмендегі қалың әріппен жазылған тақырыпшалар жаңа скрипттер дегенді білдіреді, ал тақырыпша мәтіні скрипттің бөлігі болып табылмайды.
“navigator”оьбектқасиеті
Жоғарыда, жақшада көрсетілген мәтін бір жолға жазылу керек.
"document"оьбектіқасиеті
"history" оьбектіқасиеті
бұл "location" обьектісінің екі қасиеті
Скриптер және олардың эффектілері. Сіздің компьютеріңізде келесілер болуы керек:
http://www.htmlgoodies.com/primers/jsp/hgjsp_7.html Осы беттің URL адресі
http://www.htmlgoodies.com/primers/jsp/hgjsp_6.html. алдыңғы беттің алдындағы бет.
Бұл беттің тақырыбында JavaScript Primers деп жазылған.
Құжат соңғы рет өзгертілген: 02/01/2002 15:33:05.
Бұған дейін сіз бес бетті көрдіңіз.
Скриптті талдау. Әрбір топты жекелеп алып, қарастырайық...
Кейбір жерлердегі қалың мәтін! Қалың мәтін алу үшін, сөзді және тегтерінің арасына жазу керек. Бұл "document.write" түрінің командасы болғандықтан, қалың мәтінге алуға ерекшеленген тегтар бетке мәтін түрінде жазылады, содан кейін HTML тегі сияқты интерпретацияланады. HTML беттегі мәтінді өзгертетін бұл процес басқа тегтермен де жұмыс істейді. Екі жағынан жақшамен алынған тегтер скрипттің командасы емес, мәтіннің бөлігі екеніне көзіңізді жеткізіңіз. Егер ол дұрыс болмаса, қате туралы хабарлама шығады.
"navigator"обьектісінің қасиеті.
Жоғарыда, жақшада көрсетілген мәтін бір жолға жазылу керек.
Адамдарға қасиет ұнайды. Көп адамдар браузердің сипаттамасын қалай шығарады де сұрайды. Обьект "navigator" деп аталады және оның төрт қасиеті бар. Негізгі әріптерді ұмытпаңыз!
· appName броузердің атын қайтарады.мысалы, Netscape немесе Explorer.
· appVersion браузердің номірінің версиясын және платформаны қайтарады.
· appCodeName браузерге кодтық атын және берілгендерді қайтарады, мысалы, Netscape өзінің браузерін Mozilla деп атайды.
· userAgent серверлер немен жұмыс істейтінін білу үшін, серыермен жұмыс кезінде браузермен қолданылатын берілгендерді жіберу протоколының тақырыбын қайтарады.
Браузердің версиясы туралы білім өте маңызды. Қолданушы браузерінің білімі және версия нөмірі сізге «Егер браузер осындайболса, онда мынаны жаса » айтуға мүмкіндік береді.
"document"обьектісінің қасиеті.
<SCRIPTLANGUAGE="JavaScript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("осы беттегі фон түсі" +bgc+ ".")
document.write("
осы беттегі мәтін түсі" +fgc+ ".")
document.write("
осы беттегі сілтеме түсі" +lc+ ".")
document.write("
осы беттегі активті сілтеме түсі" +al+ ".")
document.write("
осы беттегі арналғансілтеме түсі" +vlc+ ".")
document.write("
URL осы бет мекн-жайы" +url+ ".")
document.write("
сіздің осы бетке дейінгі болған бетіңіз" +ref+ ".")
document.write("
Бұл беттің тақырыбында жазылған " +t+ ".")
document.write("
Құжат соңғы рет өзгертілген " +lm+ ".")
жақшада көрсетілген мәтін бір жолға жазылу керек.
HTML құжатының қасиеті JavaScript тілінде көп тараған. Мұнда оның 9 түрі бар. Негізінде 13 қасиеті бар, бірақ оның 4-еуі бізге қиын. Олар алғашқы тоғызынан кейін жазылады.
· anchors (not shown) беттегі HREF якорлерінің санын қайтарады.
· forms (not shown) беттегі форманың тізімінің элементтерін қайтарады.
· links (not shown) әрбір жеке сілтеме үшін санды қайтарады.
Егер сіз If командасын қолдансаңыз, онда сіз «Егер қазір 18-00 ден асса, онда түнді келтіру үшін мәтінді ақ, фонды қара қылыңыз. Егер 18-00 ден аспаса онда күнді келтіру үшін мәтінді жасыл, фонды көка қылыңыз.»деп айта аласыз. Құжаттың қасиетін қолдану үшін арналған көптеген стандартты әдістер бар.
"history"обьектісінің қасиеті.
Бұл кең тараған қасиет. Бетті алдыға, артқа жылжыту сілтемелерін жасауға болады. Мысалы браузер терезесінің жоғарғы жағына «кері» және «алдыға» (Back және Forward) батырмаларын жасауға болады. Мұны жүзеге асыру үшін "history" қасиетін қолданамыз.
Объект "history" деп аталады. Бұл қолданушы болған, бет тізімі. «Тарихи» тізім сізге «кері» батырмасының көмегімен сіздің көргендеріңізді қайта айландыруға көмектеседі.
Қасиет "length" деп аталады. Ол да кең тараған. Оның қолданылуын кейін көресіз. (history) тізімінің ұзындығын бере отырып сіз скриптке сізді берілген бет санына кері қайтаруды сұрайсыз.
Кейін біз "go()" әдісімен жұмыс істеу туралы және берілген жетілдірумен history.length –пен қалай қозғалу керектігін айтамыз.
бұл "location" обьектісінің екі қасиеті.
Объект "location." деп аталады. JavaScript тілінде ол беттің URL адресін береді. location - да екі қасиет бар "host" және "hostname." Командалар бір әрекет жасағандықтан, олар бірдей, яғни олар қандай серверді қолданатынына байланысты URL адресін IP сан түрінде немесе мәтіндік форматта қайтарады.
· location.host қолданушы орналасқан URL плюс адресін қайтарады.
· location.hostname тек адресті қайтарады.
Егер сіз екі жағдайда да бірдей нәтиже алсаңыз, онда сервер сізді арнайы портқа бағыттаған жоқ. Техникалық терминдерде null порттың қасиеті.
Егер сіз бетті өзіңіздің қатты дискңізден қарап отырсаңыз, онда бұл екі команда жұмыс істемейді. Скрипт алу керек URL адрес болу үшін сізге серверден бетті қарау керек
Осы сабақта танысқаннан басқа көптеген қасиеттер бар. Осы сабақта біз тек маңыздыларын ғана қарастырдық.
Тапсырма
Жоғарыда берілген "object.property" хабарламаларының бірін қолдана отырып, сіздің серверіңізде сақталған бетке сілтеме құратын JavaScript жазыңыз. Мысалы, егер сіз www.you.com –да болсаңыз, онда JavaScript сілтемені www.you.com/joe.html бетіне құрады.
Қандай қасиетті қолдансаңыз да оған айнымалы атын меншіктеңіз.
Мүмкін жауап. Мұны көптеген әдістермен жасауға болады. Соның біреуі:
Скрипт жұмыс істеу үшін бұл бер серверде болуы керек. Егер бет қатты дискде болса, онда "location.host" жоқ.
10-Зертханалық жұмыс. Обьекттер иерархиясы Сабақ мазмұны
JavaScript тілінде зат есімге және затқа ұқсас обьектілер бар. Біз обьектіде обьект түрі қандай екенін көрсететін қасиет бар екенін білеміз. Біз қасиетке келесідей көшеміз: object.property.
Біз сонымен қатар обьектіге қолдануы мүмкін обьектіде әдіс және іс-әрекет бар екенін білеміз. Барлық әдістерде жақша () бар. Әдіске айналдыру келесідей болады: object.method(). Әр түрлі обьектілердің әр түрлі қасиеттер мен әдістерге рұқсаты бар.
Енді біз JavaScript тілін түсінудің құпиясы обьекттериерархиясы екенін білеміз..
Обьекттериерархиясының жұмыс істеуі. Барлық сілтемелер жоғарғы обьектіден басталады Window (экран браузері), және төменге жүреді. Терезе және фреймдер Window обьектісіне тиесілі. Егер обьект біреу болса, онда сізге бұл обьектіні көрсетудің керегі жоқ. Top, self, parent, және frames терезелерге арналған атау. Бұл атауларға назар аударудың қажеті жоқ, тек олардың бар екенін білсек жеткілікті.
Бірнеше мысал келтірейік:
document.mypic.src = "pic1.gif"
"Терезе" басында керек емес. Бұлардың барлығы терезеде орналасқан делік. Бұл сілтеме физикалық түрде "pic1.gif." файлы болып табылатын «mypic» деп аталатын графикалық обьектіге арналған.
Document бетінде графикалық объекті орналасқан, ал SRC обьект бастауын анықтауға арналған.
document.write(location.href)
write() бұл document обьектісінің әдісі. Location.href window терезесінің толық URL адресін шығарады. Location және Document бір деңгейде орналасқан (екеуі де жасыл). Бұл сіз сол деңгейдегі құжат адресін аласыз деген сөз.
Обьекттериерархиясын талдау.
· кейбір объектілер бір уақытта қасиет те бола алады.
· Windows басқа объект сияқты объект.
· Document бұл Window объектсінің қасиеті, ол өзі де объект бола алады.
· Form бұл Document объектісінің қасиеті, бір уақытта объект өзінің жеке қасиеттерімен
· Value және SRC бұл тек қана қасиет!
· Бұл жерде барлық объектлер мен қасиеттер көрсетілмеген. Осы келтірілгендер сілтеме жоғарыдан басталып төменге түсетінін көрсетеді. Сондықтан document.mytext.myform немесеи mypic.src.document деп жазуға болмайды.
· Өте маңызды түсінік: форма өрісінің мазмұнын шығару үшін Value қасиетін қолданамыз, яғни document.myform.mytext.value! Простое написание document.myform.mytext қарапайым жазылуы оның мазмұны туралы емес форма өрісі туралы ақпарат береді.
белгіленген немесе белгіленбегеніне байланысты Checkbox-тың "on" немесе "off" мәнін қабылдайды. Егер сіз қолданушы не жазылғанын көрмесін десеңіз текстік өрістегі "hidden" қолдана аласын. Жоғарыда айтылғандай, мәтіндік өрістің ішінде қолданушы кірісі болуы мүмкін. Бұл мәтіндік өрістің мәні.
Тапсырма
Сіз Window-ден бастап толық сілтеме жазасыз. Картина аты mypic, ал формасы-- myform екеніне назар аударыңыз.
11-Зертханалық жұмыс. Іс-әрекеттен кейінгі командалар: onUnload және onMouseOut Сабақ мазмұны
Сіздің арсеналыңызда болуы керек екі қатені өңдеуші бар: onMouseOut и onUnload (басқы және жазылған әріптерге назар аударыңыз). Бұл екі өңдеуші фактден кейінгі іс-әрекетін біріктіреді.
Сілтеме сияқты бір нәрсенің үстінен өткенде onMouseOver шақырады. onMouseOut тышқан көрсеткіші сілтемеден кеткеннен кейін іс-әрекет етеді. onLoad командасы бет жүктелген уақытта іс-әрекет етеді. Қолданушы беттен шыққанда onUnload командасы кейбір әрекеттерді жібереді.
Тышқанда жазудың үстіне және одан бөлек орналастырыңыз.
Бұл код беттен шыққанда іс-әрекет етеді:
Скрипттер және олардың эффектлері. Бірінші біреуі, одан кейін басқасы. Статусты жолды бақылай отырып, сілтеменің үстінен тышқан көрсеткішімен басып өтіңіз. Эффектіні көргеннен кейін, onUnload командасының іс-әрекетін көру үшін сілтемені басыңыз.
Скриптті талдау. mouseOver іс-әрекеті onMouseOver және onMouseOut командаларымен құрылады. Бұл командалардың арасында айырмашылық бар екеніне назар аударыңыз. Сіз олар бір уақытта орындалғанын қаламайсыз. Бірнеше сабақ алдында біз оқиға бір уақытта орындалу үшін олардың арасын үтірмен бөлдік. Мұнда бұл жағдай емес. Біз бұл оқиғалар бір уақытта орындалғанын қаламаймыз. Біз тышқан сілтемесі жоғары жүргенде бір оқиға, ал екінші оқиға тышқан сілтемесі кеткен кезде орындалғанын қалаймыз. Сондықтан біз оларды әрқайсысының "return true" жеке сөзі бар әр түрлі команда ретінде жазамыз, сондықтан мәтін фактден кейін қалады.
Біз беттен кеткен кездегі іс-әрекет HTML құжатының BODY бөлігінде onUnload="alert(осылай тез кетесіз бе?')" командасының қосылуымен құрылған. Бір жақты және екі жақты жақшалардың қолданылуын есте сақтаңыздар. Сіз мәтінді екі жақты жақшамен жаба алмайсыз, өйткені онда екі жақты жақша екі жақты жақшада болады. Броузер мұны жолдың соңы деп есептейді және жолдың қалған бөлігін қарастырмайды, яғни осыдан келіп қате туындауы мүмкін.
Тапсырма
Біз бұл тапсырмада onUnload, onMouseOver, onMouseOut командалары мен функцияларын қолданамыз.Келесі болуы керек:
· Сілтемесі бар бет құру
· Тышқан көрсеткіші сілтемеден жоғары тұрғанда, стстусты жолда келесі мәтін пайда болуы керек "Hello броузер қолданушысы < броузер аты> Мына жерді басыңыз!".
· Мәтін "Сіз беттен адреспен <бет адресі> шығуыңыз керек " деген хабарлама статусты жолда тышқан көрсеткіші сілтемеден керкенде пайда болады.
· Сілтемені шерткенде келесі мәтінді терезе пайда болу керек: "Тез кетесіз бе? Қазір тек <ағымдағы уақыт>."
· Уақытты функция көмегімен анықтау керек.
· Мәтінді терезе құруға onClick командасын қоланбаңыз. onUnload командасын қолданыңыз.
