Web-технологиялар: JavaScript және PHP тілдері. 9786010417007

Citation preview

---

ӘЛ-ФАРАБИ атындағы ҚАЗАҚ ҰЛТТЫҚ УНИВЕРСИТЕТІ

Б. Бөрібаев М. Абдрахманова

WEB-ТЕХНОЛОГИЯЛАР: JAVASCRIPT ЖӘНЕ PHP ТІЛДЕРІ 2-бөлім Оқу құралы

Алматы «Қазақ университеті» 2016

1

ӘОЖ 004 (075.8) КБЖ 32.973 я 73 Б 79 Баспаға әл-Фараби атындағы Қазақ ұлттық университеті механика-математика факультетінің Ғылыми кеңесі және Редакциялық-баспа кеңесі шешімімен ұсынылған (№1 хаттама 6 қараша 2015 жыл)

Пікір жазған Техника ғылымдарының докторы, профессор Ш.А. Джомартова

Б 79

Бөрібаев Б. Web-технологиялар: JavaScript және PHP тілдері: оқу құралы. 2-бөлім / Б. Бөрібаев, М. Абдрахманова. – Алматы: Қазақ университеті, 2016. – 188 б. ISBN 978-601-04-1700-7 Оқу құралы техникалық мамандықтар бойынша оқылатын «Web-технологиялар», «Интернет-технологиялар» пәндерінің бағдарламасына сәйкес жазылған. Мұнда дербес компьютерлерде сайт жасау тәсілдері қарастырылып, интернет желісіндегі мәліметтер орналастыру, оларды басқару істерін атқаратын HTML, РНР тілдері арқылы баяндалған. Кітапта осы программалау тілінен көптеген мысал келтіріліп, оларды орындау жолдары талқыланады. Әрбір жұмыс бақылау сұрақтары және тапсырмалармен толықтырылған. Оқу құралында келтірілген мысалдар мен зертханалық жұмыстарды «Web-программалау», «Интернет ортасында программалау» пәндерінде де қолдануға болады. Бұл құралды жоғары оқу орындары студенттерімен қатар колледждерде оқитындар және өз бетімен компьютерде сайт жасауды үйренушілер де пайдалана алады.

ӘОЖ 004 (075.8) КБЖ 32.973 я 73 © Бөрібаев Б., Абдрахманова М., 2016 © Әл-Фараби атындағы ҚазҰУ, 2016

ISBN 978-601-04-1700-7

2

КІРІСПЕ

Қазіргі кезде ғаламтор ортасындағы web-сайттарды программалаудың жаңа технологиясын игерген мамандар күннен-күнге көптеп қажет етілуде. Сондықтан өскелең ұрпақ интернеттегі мәліметтермен, оларды құру, жетілдіру саласында жаңа web-технологиялармен танысып, сайттар жасау принциптерін игеріп, оларды өздерінің болашақ мамандықтарында пайдалануды үйренулері тиіс. Күннен-күнге интернет желісінің кең өріс алуына байланысты web-сайттар жасау жұмыстары өзекті іске айналды. Әрбір мекеме немесе жеке тұлға өзі және бизнесі жайлы жарнамалық мәліметтерді жылдам құрастыратын, өзгертетін деңгейде болуы тиіс. Ғаламторда мәлімет өңдеудің жаңа түрлері, буындары пайда болғандықтан, олардың жұмыс істеу принципін игеріп, бар мүмкіндіктерін өз мамандықтарына байланысты мәселелерді шешуде тиімді қолдана білу – бүгінгі халық шаруашылығының барлық саласындағы мамандардың басты міндеттерінің бірі. Қазіргі жаһандық желіге қойылатын ең негізгі талап байланыс арналары өзгеріске ұшырағанымен, кез келген мәліметті бір орыннан екінші орынға сенімді түрде жеткізу қажеттілігі болып табылады. Біз желілерді пайдалана отырып, көптеген қалаларды, елдерді аралап, кітапханаларды, мұражайларды көріп, дүниежүзілік ғылыми және мәдени жетістіктермен танысып, мүмкіндігіміз болса, оларға өз үлесімізді қоса аламыз. Назарларыңызға ұсынылып отырған бұл оқу құралының мақсаты студенттерді қарапайым динамикалық мүмкіндіктері бар сайттар жасауға үйрету болып табылады. Ол мұнан бұрын жарық көрген құралдың екінші бөлігі болып саналады. Бұл пәнді оқытуға қойылатын талап – www (world wide web) жаһандық кеңейтілген өрмек түріндегі ақпараттарды құрудың әдіс-тәсілдерімен таныстыру. Мұнда web-сайттар жасау құралдарының құрамы мен құрылымын игеру (CSS стильдер кестелері, JavaScript, PHP тілдері), оларды студенттердің болашақ мамандықтарында пайдалана білуге үйрету; компьютер желілерінің және ақпараттық web-технологиялар құрудың практикалық негіздерін меңгеру; осы аймақтағы мәселелерді жүзеге асыру үшін керекті практикалық дағдыларды қалыптастыру; желідегі web-парақтар жұмысы мен олардың құрылымын білу әрі іс жүзінде пайдалану; web-парақтар жасау істерінің мақсаты мен міндетін анықтай білу; интернет ортасында программалауды үйрену; белгілі компьютер желілері мен web-технологияларының артықшылықтары мен кемшіліктерін анықтай алу және оларды дамыту істерін білу; қазіргі ақпараттық технологияларды білу мен мекемені (ұйымды) басқаруда оларды тиімді пайдалану істері қарастырылған. Барлық материал практикалық есептер мен мысалдар арқылы түсіндіріледі. Мысалдарды РНР енгізілген Internet Explorer программасы арқылы немесе басқа браузерлер көмегімен орындап тексеруге болады. Студенттердің тақырыпты тереңірек түсінуі мақсатында әрбір бөлім тақырыбына байланысты бақылау сұрақтары, жаттығулар және тест тапсырмалары берілген. 3

1-бөлім

JAVASCRIPT ПРОГРАММАЛАУ ТІЛІ

Жалпы мағлұматтар JavaScript программалау тілін Netscape пен Sun Microsystems фирмалары бірлесе отырып жасаған, ол интерактивті HTML құжаттар құру үшін қолданылады. Тілдің алғашқы нұсқасын 1995 жылы Брендан Эйч (Brendan Eich) сценарийлер тілі ретінде Netscape Navigator 2.0 браузері үшін ұсынған болатын. Кейіннен ол Netscape және Microsoft фирмаларының барлық браузерлерінде (Internet Explorer 3.0-ден бастап) пайдаланыла бастады. Microsoft фирмасы бұл тілді өзінше дамыта отырып, оны қысқаша Jscript деп атады. JavaScript – браузерге түсінікті программалау тілі. Браузер бұл тілдегі командалар үшін жеке трансляторды керек етпейді, олар браузердің ішкі интерпретаторы арқылы өңделе береді. Скриптер тілі тұтынушыларды өзінің қарапайымдылығымен, шағын сценарийлер арқылы динамикалық парақтар – қозғалатын суреттер жасау, түрлі түстерді жеңіл іске қосу, суырылып шығатын жаңа терезелерді пайдалану мүмкіндіктерімен қызықтырды. Мұндай әрекеттерді HTML тілінде жасауға болмайтын еді. JavaScript – HTML тәгтерімен қатар пайдаланылуға арналған тіл. Web-программалаумен тығыз байланысты тағы да Java тілі бар. JavaScript және Java тілдері атаулары ұқсас болғанымен, екі түрлі технология мен концепцияға жатады. Олардың ортақ қасиеті жазылу синтаксистерінің ұқсастығымен ғана шектеледі. Java – нақты компьютер мен нақты операциялық жүйеге тәуелді болып саналмайтын, өзіндік компиляторы бар жалпы мақсаттағы әмбебап программалау тілі. Браузерлерде тікелей орындала алатын Java-программалар апплеттер деп аталады. Гипермәтіндік құжаттағы жұмыс істеу ерекшеліктеріне қарай апплеттер мен скриптердің айырмашылығы орасан зор. Апплеттің парақта орналасуы оларға суреттердің қойылуына ұқсас болып келеді. Ол экранда жеке терезеге орналасып, ішіндегі парақтың басқа элементтерімен тікелей байланыссыз жеке жұмыс істейді, анимациялық қозғалыстар енгізеді, графикалық ақпараттарды енгізу/шығарудың күрделі формаларын құрастыра алады. Ал JavaScript тілі болса, HTML-парақтарда программалық жолмен қарапайым сұхбаттасу терезелерін жасап, солардың сыртқы түрлерін, өзара орналасуларын, деңгейлерін өзгертетін дәрежеде жұмыс істейді. JavaScript программасы скрипт немесе сценарий деп аталады, ол HTMLпрограммасы ішінде орналаса береді немесе жеке файлға да жазылады. Ондай файлды да браузер оқып орындай алады. Скриптердегі динамика мен интерактивтілік қасиеттердің пайда болуы браузердің құжатты тек көрсетіп қана қоймай, оның объектілік моделін жасап, кейін4

нен сол модельдің экрандағы бейнеге сәйкес орналасуын қадағалайтындығынан деп түсіну керек. Сондықтан егер модельде бір нәрсе өзгерсе, ол бірден экранда да өзгеріп бейнеленеді. Браузер терезесін екі түрлі тәсілмен: 1) HTML тәгтерін жазып, олардың файлын браузерге жүктеу; 2) құжаттың объектілік моделіне әсер ету арқылы өзгерте аламыз. Мұндағы алғашқы тәсіл статикалық түрдегі гипермәтіндік құжат тұрғызады. Ал екіншісі тұрғызылған бейнені өзгерту мүмкіндігін береді. Міне, осындай қасиеті бар, ең көп таралған тілдердің бірі болып табылатын JavaScript тілін ақпараттық технологияларды оқып үйренуге тырысатын әрбір маман игеруі тиіс. JavaScript тіліндегі жазылған программа немесе сценарий операторлар тізбегінен тұрады, бір жолға бірнеше оператор жазылса, олардың арасына нүктелі үтір (;) қойылады. Егер бір жолға бір оператор ғана жеке жазылса, оның соңына ешнәрсе қоймауға да рұқсат етілген. Бір операторды бірнеше жолға жазуға да болады. Құрылымдық программалауға сәйкес программаны жеке-жеке бөліктерден тұратындай түрде жазу ұсынылады. Бұл программаны зерттеу мен қателерді іздеуді жеңілдетеді. JavaScript программаларында да Си тіліндегі секілді түсініктемелерді қолдануға болады. Жол соңына жалғаса орналасатын түсініктеме беру үшін оны екі қиғаш сызықтан (//) кейін жазуға болады. Егер түсініктеме мәтіні бірнеше жолға жазылатын болса, оларды /* және */ символдарының ортасына жазу керек. JavaScript тілінде бас әріптер мен кіші әріптер әр түрлі символдар болып саналады.

5

№1-1 зертханалық жұмыс

HTML ТІЛІНДЕ СКРИПТЕРДІ ПАЙДАЛАНУ

Зертханалық жұмыстың мақсаты: HTML-құжат құрамына JavaScript тілінде жазылған скрипттерді енгізуді үйрену.

1.1. Программаға скриптер енгізу Кейбір JavaScript тілін сүйемелдемейтін браузерлердің бұрынғы нұсқалары оларды орындамайды. Ондай браузерлер скриптерді түсінбейтін болғандықтан, JavaScript тілінің операторларын комментарий тәгтерінің

Скриптері бар парақтың соңы

1.1-сурет. Үшбұрыштың ауданын табу

Скриптерде екі айнымалы сипатталып инициалданады, содан соң өрнектің мәні құжатқа жазылады. Мұнда JavaScript тілінің экранға мәлімет шығаратын alert функциясы қолданылған, ол ішінде ОК батырмасы бар ақпараттық шағын терезе (1.1-сурет) ашады. Терезедегі мәлімет оқылып болған соң батырма басылса, терезе экраннан алынып тасталады да, браузер келесі командаларды орындауға көшеді. Егер alert функциясының аргументі ретіндегі мәтін көлемді болса, оны «+» (біріктіру операциясы) таңбасы арқылы бірнеше жолға жазуға болады, мысалы: 7

alert("JavaScript тілін 1995 жылы Netscape фирмасы " + "браузерлердің келесі нұсқалары үшін жасап шығарған"); Мұндай функция нәтижесі 1.2-суреттегідей болады. Alert() функциясында қажет болғанда мәліметті «\n» символы арқылы екі-үш жолға бөліп шығару мүмкіндігі де қарастырылған (1.3-сурет): alert("Бірінші қатар.\nАл, мынау екінші қатар.");

1.2-сурет. Терезеге көлемді мәлімет шығару

1.3-сурет. Мәліметтерді екі жолға шығару

Аlert() функциясы жиі қолданылады, тұтынушыға мәлімет берумен қатар ол программадағы қателерді іздеп түзету кезінде де кең пайдаланылады. Келесі скрипт Web-параққа мәтін шығарып, HTML тәгтерін де пайдалана отырып, құжатты толық бейнелейді. Мұнда мәтін қызыл түсте шығарылады. 1.2-мысал. document.write тәсілін пайдалану

Мысал нәтижесі 1.4-суретте көрсетілген. Мұнда document сөзі шығарылатын мәтінді (HTML құжатын) жариялайды. Ол құжатқа бір сөз немесе сан жазылуы (write) тиіс. Жазылатын тізбек жақша ішінде функция тәрізді көрсетіледі. DOCUMENT объект болып саналады. Одан нүктемен бөлініп жазылған WRITE (жазу) сөзі объект тәсілі деп аталады. 8

Бұл сценарий жұмысы: "Бір объект (бұрыннан белгілі) құрып, оған мәлімет жазу керек" дегенді білдіреді.

1.4-сурет. document.write тәсілін пайдаланып, мәтінді шығару

Жақша ішіндегі мәтін тырнақшаға алынып жазылғанына назар аудару керек. HTML тілінде олар қажет етілмейтін, ал мұнда олар міндетті болып табылады. Жақша ішіндегі мәтін – қарапайым HTML кодтары. RED сөзі жалқы тырнақшаға (апостроф) алынған, егер қостырнақша қойылса, сөз тіркесі толық аяқталған болар еді. Мұнда олай емес екендігі білініп тұр, яғни қостырнақша ішінде басқа бір тіркесті пайдалану үшін оны жалқы тырнақшаға алу керек.

1.2. Меншіктеу тәсілдері Айнымалылар алдын ала сипатталуы тиіс, ол үшін var түйінді сөзі қолданылады: var x; // х айнымалысын сипаттау var у=5; // у айнымалысын мән бере отырып сипаттау var mes="Скриптер тілі"; // Сөз тіркесін мән // меншіктей отырып сипаттау Айнымалылар идентификаторлармен белгіленеді. Идентификатор – міндетті түрде әріптен басталатын латын әріптері мен цифрлар тізбегі. Астын сызу белгісі «_» әріп болып саналады. Бас әріп пен кіші әріп әр түрлі символ болып табылады. Мысалы, Counter және counter идентификаторлары екі түрлі айнымалыны көрсетіп тұр. Айнымалының типі сценарийде сақталған ақпараттың типіне байланысты болып, сол мәліметтің типі өзгерсе, айнымалының типі де өзгереді. Меншіктеу операторынан кейін айнымалының мәні өзгереді. Меншіктеу операторы программаның кез келген жерінде тұра береді және ол айнымалының 9

тек мәнін ғана емес, типін де өзгерте алады. Меншіктеу операторы мынадай түрде беріледі: а=b мұндағы а – біз бір мән бергіміз келетін айнымалы, b – айнымалының жаңа мәнін анықтайтын өрнек. Сценарийде мынадай айнымалылар жазылған болсын делік: var var var var

n=3725 x=2.75 p=true s="Программа орындалды"

n және х айнымалыларының типі – number, р айнымалысының типі – логикалық, s айнымалысының типі – string. JavaScript тілінде барлық стандартты және тұтынушының өзі анықтайтын функциялар үшін function типі анықталған. JavaScript объектілері үшін object типі бар. Оbject типті айнымалылар объектілерді сақтайтындықтан, оларды жай объектілер деп атай береді. Сценарийлердегі бөлігінде және бөлігінде де сипатталған айнымалылар екеуінде де бірдей жұмыс істей береді, бұларды осы құжаттағы кез келген сценарий пайдалана алады. Мұндай айнымалылар глобальді (ауқымды) деп аталады, ал функция ішінде анықталған айнымалылар локальді, яғни жергілікті болып саналады. Меншіктеу операторының оң жағында орналасатын өрнек операндтардан (мәндер мен айнымалылардан) және операция таңбаларынан (+, -, *, /) тұрады. Мысалы, а*b формуласында а және b операндтар, * таңбасы – көбейту операциясы. Есептелген мәннің типіне қарай өрнек арифметикалық, логикалық және тіркестік типтердің біріне жатқызылады. 1.1-кестеде көрсетілген арифметикалық операциялардың орындалу нәтижесінде өрнектер құрылады. 1.1-кесте Арифметикалық операциялар Операция + * / % ++ --

Аталуы Қосу Азайту Көбейту Бөлу Бүтін сандарды бөлгеннен кейінгі қалдық Операнд мәнін бірге өсіру Операнд мәнін бірге кеміту

Өрнектегі операторлар арифметикалық операциялардың басымдылықтарына (приоритеттеріне) қарай солдан оңға қарай есептеледі. Керекті жағдайда өрнекке жақша енгізу арқылы операциялар реттілігін өзгертуге болады. JavaScript тілінде теңдіктің оң және сол жағында орналасқан операндтарға арифметикалық 10

амалдар қолданып, нәтижені сол жақтағы операндқа меншіктейтін операторлар анықталған. Операциялардың мұндай қысқарған түрлері 1.2-кестеде көрсетілген. 1.2-кесте Меншіктеу операторының қысқаша жазылу жолдары Оператор X += Y X –= Y X *= Y X /= Y X %= Y

Соған сәйкес меншіктеу операторы X = X+Y X = X-Y X = X*Y X = X/Y X = X%Y

1.3. Логикалық операциялар Шарт ретінде логикалық өрнектер де жазыла береді, ондайда келесі логикалық операциялар қолданылады: Белгіленуі == != > >= < 5 d>=0 num>10 bonus d> { d = a[i]; s = i; } var a = new Array("2","48","000","99") ; a.sort(Compare); var s = a[0]; function Compare(a,b) { return b.length-a.length; } var a = new Array("34","81","234","6739"); a.sort(Compare) ; var s = a[0]; function Compare(a,b) { if (a < b) return 1; else if(a > b) return -1; else return 0; } var str = new String("3481234627892"); var s = 0; for (var i = 0; i < str.length; i++) if (str.charAt(i) == "2") s++; var str = new String ("3481234627892"); var s=0; for(var i = str.indexOf("2"); i >= 0; i = str.indexOf("2",i + 1)) s++; var str = new String ("Университет"); var sub = str.substring(3,5); var s = 0; for (var i = str.indexOf(sub); i >= 0; i = str.indexOf(sub,i + 1)) s++;

9. Топ студенттері фамилиялары мен аттарының бiрiншi әрпiн шығарыңыздар. 10. Әрбiр сөзден кейiн бiр бос орын қалдырылған сөйлемдер берiлген. Құрамында берiлген әрiптен басталатын сөздердiң санын анықтаңыздар. 11. Әрбiр сөзден кейiн бiр бос орын қалдырылған сөйлем берiлген. Сөйлемдегі ең ұзын сөздi табыңыздар. 12. Әрбiр сөзден кейiн бiр бос орын қалдырылған сөйлем берiлген. Сөйлем ішіндегі жақшалардың дұрыс қойылғанын тексерiңіздер. 13. Берілген сөз тіркесіндегі әрбiр нүктенi көп нүктемен (яғни үш нүктемен) алмастырыңыздар. 14. Алдыңғы есеп шартындағы қатар келген нүктелердiң әрбiр тобын бiр нүктемен алмастырыңыздар. 15. Дүкендегi кассир көмекшiсiне арналған программа құрыңыздар. Программа тауардың бағасын, мөлшерiн, сатып алынған тауарлар бағасының қосындысын есептеп, сатып алушының берген ақшасының мөлшерiн сұрап, оған қайтарылатын соманы да анықтайды. 16. Әрбiр сөзден кейiн бiр бос орын қалдырылған сөйлем берiлген. Барлық сөздердi керiсiнше жазып шығыңыздар. 17. Пернетақтадан енгiзiлген сөздердегi әрiптердiң санын есептейтiн программаны тәсілдерді қолданбай do … while циклінде орындаңыздар. 18. Енгізілген сөз тiркесiндегі сөздердiң санын анықтайтын программа жазыңыздар. Бiр сөз екiншiсiнен бiр бос орын арқылы айырылады деп санау керек. 19. Мәтiнi пернетақтадан енгiзiлген телеграмманың бағасын есептейтiн программа жазыңыздар. 20. Берiлген сөзде бiрiншi және соңғы әрiптердiң қайсысы көп кездесетiнiн анықтайтын программа жазыңыздар. 21. «а» әрпiмен аяқталатын атау септiгiндегi зат есiм берiлген. Осы сөздi септеп, басып шығарыңыздар.

57

№1-6 зертханалық жұмыс

БРАУЗЕР ОБЪЕКТІЛЕРІ МЕН ОҚИҒАЛАРЫ

Зертханалық жұмыстың мақсаты: Браузер объектілерімен JavaScript тілінде жұмыс жасауды үйрену.

6.1. Құжаттың объектілік моделі Браузер экранын өзгерту немесе жаңа терезелер жасау үшін браузердің ішкі мүмкіндіктерімен танысып, оның ішкі объектілерін пайдалану керек. Браузер тәгтерді экранда көрсетіп қана қоймай, ол құжаттың иерархиялық моделіне сәйкес объектілер тұрғызады. Браузер жұмыс кезінде модельді тұрақты түрде бақылап отырады. Егер объект қасиеті өзгерсе, экрандағы бейне де өзгереді. JavaScript тілі арқылы объект қасиеттерін өзгертуге болады, сондықтан ол экран динамикасын жүзеге асыра алады. Кез келген құжаттың объектілік моделі әрқашан нақты сайттың бейнесінен тәуелсіз түрдегі бір құрылымда болады (1.47-сурет).

window

event

frames

links

history

document

images

navigator

anchors

screen

location

forms

elements 1.47-сурет. Құжаттың объектілік моделінің құрылымы

Схемада көрсетілген барлық «объектілер» негізінде бір объектінің экземплярлары, яғни даналары болып табылады. Браузер әр нақты құжат үшін сол даналарды жеке-жеке түрде құрастыра алады. Сол даналарды бұдан кейін «объектілер» деп атаймыз. 58

6.2. Window объектісі Window иерархияның жоғарғы жағында орналасады. Бұл қалған объектілердің одан төмен орналасып, соның қасиеттері түрінде қарастырылатынын білдіреді. Үш тәсілді біз бұрыннан білеміз, олар: alert, prompt және confirm. Егер тәсіл келесі түрде жазылса: Window.alert ("alert функциясы – бұл window объектісінің тәсілі болып табылады "}; онда браузер осы хабарламаны шығаратын қосалқы терезе ашады. Біз бұрын былай жазатынбыз: alert("alert функциясы – бұл window объектісінің тәсілі болып табылады");

1.48-сурет. alert функциясын пайдаланудың жаңа жолы

Негізгі объект болып саналатын window объектісінің атын жазбауға да болады. Келесі жолдардың нәтижелері бірдей болады: window.alert("Ат айналып қазығын табар"); alert("Ат айналып қазығын табар");

6.2.1. Жаңа терезелер ашу Көп жағдайда пайдаланушыға жұмыс нәтижесін көрсету үшін бұрынғы терезе ашық тұрғанда, жаңа терезе ашуға тура келеді. Жаңа терезе ашу үшін window объектісінің open тәсілін қолданамыз. Оны келесі тәсілдердің бірін қолдану арқылы жазуға болады: var var var var

айнымалы айнымалы айнымалы айнымалы

= = = =

open(); open(файл); open(файл, терезе_аты); open(файл,терезе_аты, терезе_параметрлері);

59

Мұндағы – айнымалы – ашылатын терезеге нұсқауыш; – файл – сөз тіркесі (строка). Ашылған терезеде көрсетілетін файл аты. Егер бұл параметр берілмесе, бос терезе ашылады; – терезе_аты – сөз тіркесі. Терезе аты сол терезеге мәлімет шығару үшін керек (window объектісінің name қасиеті мәні); – терезе_параметрлері – сөз тіркесі, ол терезе қасиеттерін сипаттайды. Егер параметр берілмесе, үнсіз келісім бойынша тағайындалған қасиеттер қолданылады. Параметрлер арасындағы үтірден соң бос орын қоймаған дұрыс. Параметрі

Мәні

width

Сан Сан yes, no,1, 0 yes, no,1, 0 yes, no,1, 0

height scrollbars resizable menubar location status toolbar

yes, no,1, 0 yes, no,1, 0 yes, no,1, 0

Сипаттамасы Пиксель, терезе ені. Минимал мәні – 100 Пиксель, терезе биіктігі. Минимал мәні – 100 Айналдыру жолағын береді Терезе көлемін өзгертуді көрсету үшін қажет Меню өрісі бейнелетінін көрсету үшін қажет Адрес енгізу өрісі бейнелетінін көрсету үшін қажет Статус жолағы бейнеленетінін көрсету үшін қажет Батырмалар (саймандар) тақтасы бейнеленетінін көрсету үшін қажет

1.49-сурет. Терезе параметрлерін сипаттау

Ит суреті – dog01.jpg бар терезе ашудан мысал келтірейік.

1.50-сурет. Сурет орналасқан терезе бейнесі

60

1.16-мысал. Сурет орналасқан терезені ашу

Браузерді тексеру

Браузерді тексеру

Негізгі мәтінге оралу үшін браузердің саймандар тақтасында орналасқан Артқа қарай (Назад) батырмасын басыңыз.

Осы программа нәтижесі 1.50-суретте келтірілген. Мұнан кейін терезенің әр түрлі параметрлерін өзгертіп көруге болады. Терезеде көрсетілетін файл ретінде мыналарды көрсете аламыз:  HTML-файл, мысалы, file1.htm;  сурет файлы, мысалы, ./pic/fish.gif;  мәтіндік файл, мысалы, 010401.txt. Мұнан кейін әр түрлі параметрлерді өзгертіп көруге болады. Сlose тәсілі ашық терезені жабады. Мұндағы close() немесе window.close() ағымдағы терезені жабады. Ал win.close() немесе window, win.close() осы терезеден Open тәсілі арқылы ашылған win нұсқауышы бар терезені жабады: var win = window.open(...);

6.3. Document объектісі Document объектісі ... блоктарында орналасқан тәгтерді модельдейтін объектілер үшін қажет. Document объектісінің кең тараған тәсілі – write тәсілі. Бұл тәсіл құжат терезесіне мәлімет жазу үшін керек. Write тәсілін қолдану алдында жазба ашу 61

қажет (Open тәсілі), ал оны ашқан соң кейіннен жабу керек (close тәсілі) болады. Open тәсілі форматы: айнымалы.Document.open(); Мұндағы: айнымалы – бұл мәлімет жазылатын терезеге нұсқауыш. Write тәсілі форматы: Document.write(жазба); немесе айнымалы.Document.write(жазба); Мұндағы айнымалы – бұл шығарылатын мәлімет көрсетілетін терезеге нұсқауыш. Егер айнымалы берілмесе, онда мәлімет ағымдағы терезеге жіберіледі; жазба – шығарылатын мәлімет көрсетілетін сөз тіркесі. Close тәсілі форматы: Document.close(); немесе айнымалы.Document.close(); Мұндағы айнымалы – жазба шығарылмай жабылатын терезеге нұсқауыш. Document.open тәсілін қолдану міндетті емес, өйткені Document.write тәсілі жабылған құжатқа мәлімет жазу кезінде оның ішіндегі ескі мәліметті өшіріп, оны жаңа жазба үшін ашады. 1.17-мысал. Document.write тәсілін пайдалану арқылы терезе құру: var win = open("","","width=300,height=100"); win.Document.write("Мысалы: Бұл парақ "); win.Document.write("программалық тәсілмен құрылған."); win.Document.close(); Терезеге мәтін шығару кезінде write функциясы бірнеше рет қолданылғанымен, оның нәтижесі бір тұтас абзац ретінде шығарылады.

1.52-сурет. Бірнеше write функциясын қатар пайдалану нәтижесі

62

Write тәсілі арқылы терезеге жай мәтіннен басқа тәгтермен белгіленген мәтінді де шығаруға болады ( 1.53-сурет). 1.18-мысал. Тәгтермен белгіленген мәтінді write тәсілі арқылы шығару var win = open("","","width=300,height=100"); win.document.write(" Мысал " + "" + "

" + "Бұл парақ " + " программалық тәсілмен құрылған. "); win.document.close();

1.53-сурет. write тәсілі арқылы тәгтермен белгіленген мәтінді шығару

6.4. Оқиғалар Браузер тұтынушы әрекеттерін қадағалап, соларға сәйкес әрекет ете алады. Егер терезеде тышқанды шерту сілтемеге сәйкес келсе, браузер жаңа құжат жүктейді. “Alt + ” пернелерін қатар басу терезені бұрынғы қалпына қайтарады. Егер тұтынушы тышқан курсорын суретке алып барса, браузер шағын терезеге сол тәгіне, яғни суретке сәйкес alt-мәтінді шығарады. Тұтынушы бағыттауыш пернелерді басса, браузер сәйкесінше терезедегі мәтінді жылжытады. Бұлардың бәрі тышқан мен пернетақтаның браузерге тұтынушының не істеп жатқаны жайлы «хабар беріп» отыратынын білдіреді. Оған қоса браузер құжаттың жүктелуі жайлы да толық хабардар болып отырады. Егер сурет жүктелмесе (дискіде жоқ, сервермен байланыс үзілді), браузер оның орнына тіктөртбұрыш қояды. Осындай ақпараттық хабарламалар оқиғалар деп аталады. Кейбір оқиғаларға браузер бірден жауап береді, ал басқаларына жайбарақат қарап тұра беруі де мүмкін. Мұндайда браузерге не істеуі керек екендігі айтылмаған деп ұққан жөн. HTML коды арқылы браузер салған батырма 1.54-суреттегідей болады:

63

Батырма ... тәгінің ішкі тәгі арқылы берілген. Value атрибуты батырма бетіндегі жазуды береді, ал type атрибуты енгізу өрісінің типін сипаттайды. Браузер батырманы шерткенде, оған жауап бере ме? Әрине, ол экранда батырманы басқанды көрсетеді, бірақ басқа еш нәрсе істемейді. Ал енді басқа батырмаларды қарастырайық.



1.54-сурет. Қарапайым батырманы экранға шығару

Экранға «Сәлем!» сөзі бар alert терезесі шығады (1.55-сурет), өйткені мұндағы тәгінің onСlick атрибуты бар. Оның мәні ретінде "alert('Сәлем!')" сөзі жазылған.

1.55-сурет. Құпиялы батырманы пайдалану нәтижесі

64

OnСlick атрибуты браузерге батырма басылғанда не істеу керек екендігін білдіріп тұр. Атрибут мәні ретінде ұзын сөз жазу қажет емес, сондықтан көбінесе төмендегідей программаланады. 1.19-мысал. Батырманы басу кезінде оқиғаны өңдеуші функцияны шақыру



OnСlick оқиғасы туғанда батырманы шерткенде жұмыс істейтін Fun() функциясы сол оқиғаның өңдеуіші, яғни күн-ай мерзімі мен уақытты экранға шығарушы болып табылады (1.56-сурет).

1.56-сурет. Оқиға өңдеуіші ретінде функцияны пайдалану нәтижесі

Осы программаны браузерге жүктеп, бірнеше тәжірибе жүргізіңіздер. 1. Батырмадағы сөзді өзгертіп, «Күнтізбе» орнына басқа мәтін жазыңыздар. 2. Fun функциясы кодын басқаға, мысалы, мынаған өзгертіңіздер: var sum = 0; for (var i = 100; i; i --) sum += i; alert("Қосынды 1 + 2 + ... + 100 = " + sum); 65

3. Өз функцияларыңызды жазып шығыңыздар. Мысалы, бір сан енгізіп, оның квадратын немесе кубын табыңыздар. Сонымен, JavaScript HTML кодтарында оқиғаларды өңдейтін программалар жазуға мүмкіндік береді де, оны интерактивті парақ ретіндегі, яғни тұтынушы әрекетіне жауап беретіндей күйге келтіре алады. Тәгтегі onСlick түйінді сөзі – «оқиғалық» атрибуттың аты, оның алдына «on» сөзі қойылып жазылады. Мұндай атрибут мәні скриптік код болып табылады. Егер оқиға орындалса, атрибут аты арқылы кодталған скрипт іске қосылады. OnСlick атрибуты «экрандағы белгілі нүктені тышқанмен шерткенде» орындалатын оқиғаны өңдеуді жүзеге асырады. Мысалы: қабырғасының ұзындығы берілген жағдайда квадраттың ауданын анықтау программасын жазайық. Ауданның мәні қабырғаның мәні өзгерген сәтте есептелуі тиіс. Екі мәтіндік өріс енгізілген форма құрайық: оның бірі квадрат қабырғасының мәнін енгізу, ал екіншісі ауданның есептелген мәнін шығару үшін қажет. Жаңарту батырмасы форма өрістерін тазалайды. Квадрат ауданы change оқиғасы туындаған мезетте, формадағы numl деген элемент мәні өзгергенде және элемент фокусын жоғалтқанда есептеледі. 1.20-мысал. Квадрат ауданын есептеу

Change - элемент мәнін өзгерту оқиғасы

Квадрат ауданын 1.57-сурет. Элемент мәнін өзгерту есептеу оқиғасын өңдеу

Қабырғасының ұзындығы:

Аудан:



66

6.5. Интерактивті құжат мысалы Экранда бір енгізу өрісі және төмендегідей сипаттамалары бар төрт батырма болсын, олар: – ағымдағы күн-ай мерзімі мен уақытты береді; Уақыт Сәлем 2*2 Жауап Жабу

– жаңа терезе ашып, оған сәлемдесу мәтінін шығарады да, терезені жабады; – есептелетін өрнекті енгізу өрісі; – енгізу өрісіндегі арифметикалық өрнектің мәнін көрсету өрісі; – терезе жабу батырмасы.

Енді осы әрекеттерді программалайық. 1.21-мысал. Бірнеше элементі бар интерактивті парақ құру

Интерактивті парақ

Интерактивті парақ

67

Мұндағы: CurTime функциясы Уақыт батырмасын шертуді өңдейді. Hallo функциясы Сәлем батырмасын шертуді өңдейді. alert функциясы Жауап батырмасын шертуді өңдейді. alert функциясы өзінің аргументі болып келетін eval функциясының мәнін есептеп шығарады eval(Document. forma.calc.value). Еval функциясының аргументі болып берілген енгізу өрісінің мәні саналады. Мұндағы: forma – бұл объект, ол мынадай блок бейнесі: ...; calc - бұл объект, ол мынадай тәг бейнесі ; value – бұл calc объектісінің қасиеті. Window.close (...) функциясы Жабу батырмасын өңдейді. CurTime және Hallo функциялары сипатталған блогы HTML коды тақырыбында келтірілген. Себебі браузер функция сипатталуын оларды пайдаланғанға дейін оқуы тиіс, өйткені құжат тақырыбы, ең алдымен, орындалады. Программа жұмысының нәтижесі (1.58- және 1.59-суреттер):

1.58-сурет. Интерактивті парақ және оның Уақыт пен Жауап батырмаларын шерту нәтижелері

68

1.59-сурет. Интерактивті парақтың Сәлем батырмасын шерту нәтижесі

6.6. Window объектісінің тәсілдері 1. Тәсіл түрі – open(файл, терезе_параметрі). Терезе ашып, оның параметрлерін тағайындайды. Мысалы: var okno = window.open("./pic/dog01.jpg","", "width=250, height=300,left=50,top=100" + "scrollbars=1,resizable=no,menubar=no"+ "location=no,status=no,toolbar=no"+"fullscreen=no"); 2. Тәсіл түрі – alert(хабарлама). Мәліметі бар ақпараттық терезе шығарады (1.60сурет). Мысалы: window.alert("Палуанның жаманы – \n"+ "Шалдырған соң өкінер,\n"+ "Күзетшінің жаманы,\n"+ "Алдырған соң өкінер\n"+ "Мақал"); 1.60-сурет. alert тәсілін пайдалану нәтижесі 3. Тәсіл түрі – confirm(хабарлама). Екі батырмасы бар (ОК және Отмена) сұрақ мәліметі көрсетілетін терезе шығарады. Функция нәтижесі: егер ОК басылса, функция нәтижесі – true, ал егер Отмена басылса, false болады.

69

6.7. Document объектісінің тәсілдері 1. open() тәсілі браузер терезесіне жазу жазады. Бұрынғы терезе мәліметі өшіріледі. 2. close()тәсілі браузер терезесіндегі жазбаны жабады. 3. clear() тәсілі браузер терезесін тазалайды. 4. write(str) тәсілі құжаттың str мәні ретінде берілген сөз тіркесін – мәтінді және HTML кодын жазады. 5. writeln(str) тәсілі жаңа жолға көшумен аяқталатын мәтінді және HTML кодын жазады. Жаңа жолға көшу браузер экранында тек тәгі ішінде орналасса ғана көрінеді. Write және writeln тәсілдерін пайдалану келесі жағдайларда:  ұзын HTML кодты қысқа скрипт алмастыра алса;  құжат браузер ерекшелігін – экран мүмкіндігі және т.б. есепке алынып тұрғызылса;  құжат толық программалық жолмен жасалса ғана тиімді болып табылады.

6.8. Программалық басқару принципі Браузер гипермәтіндік парақ ішіндегі әрбір тәг үшін объект жасай алады. Ал сол объектімен программалаушы name атрибутында көрсетілетін оның аты арқылы қатынас құра алады. Сонымен, тәгтерді программалық басқару мүмкіндігі пайда болады. Мысалы, HTML кодында экранға сурет шығаратын мынадай тәг берілген болсын делік:

Осы тәг арқылы pic атты стандартты image объектісінің бір данасын мынадай эквивалентті конструкциялар арқылы пайдалануға болады: window.document.images["pic"] window.document.images.pic немесе ағымдағы терезе ішінде болса: document.images["pic"] document.images.pic Мысалы, image объектісінің суреті бар файлға нұсқайтын src қасиеті бар екені белгілі. Программада осы қасиетті төмендегі жолды жазып оқуға болады: document.images.pic.src

70

Тек оқып қана қоймай, бұл қасиеттің мәнін де өзгерте аламыз: document.images.pic.src = "./pic/ris2.gif" сонда сурет сәйкесінше басқа суретке ауысады.

6.9. блогы Гипермәтіндік құжаттармен жұмыс істей отырып, мәтіндерді енгізу өрісіне жазып, меню пунктері және жалауша арқылы бір жолды таңдап, батырмаларды шертуге болатынын көргенбіз. Мұндайда әрекетке байланысты құжаттың соған жауап беретінін байқаймыз. Осы интерфейстік элементтердің бәрі браузер экранына контейнер-команда ... арқылы шығарылады, ал батырмалар, енгізу өрісі, жалаушалар және меню осы блок ішіндегі әр түрлі тәгтер арқылы беріледі. ... блогы форма деп аталады. Оның ашылу тәгінде мынадай атрибуттар жазылады. action форманы желі бойынша жөнелту адресін береді. Форманы оны өңдейтін программасы (CGI-скрипт) бар серверге жіберуге болады немесе оның мәні ретінде электрондық пошта адресі көрсетілсе, форма e-mail арқылы жөнелтіледі. Мысалы, былай жазуға болады:

Егер ол көрсетілмесе форма сайттағы адресі бойынша жөнелтіледі, enctype – желі арқылы берілетін мәліметтерді кодтауды береді. Мұнда біз формадан алынған мәліметтерді өңдейтін программаларды қарастырмаймыз. Бірақ браузер тұтынушы толтырған форманы сіздің электрондық адресіңізге жібереді. Сол мәліметтерді қарап шығуға немесе басқа программа арқылы оны өңдеуге болады. Көбінесе төмендегідей толтырылған мәндер дұрыс жұмыс істейді:

мұндағы method - форманы тасымалдау тәсілін береді. Атрибуттың екі мәні бар: get және post. post тәсілі әмбебап болып саналады (форма URL-ден бөлек жіберіледі). Get мәні форманың URL-мен бірге жіберілетінін көрсетеді. e-mail арқылы былай жіберуге болады:

name - форма атын береді. Мұны скриптерде форма өрістерін пайдалану үшін береді. Егер форманы ешқайда жібермеу керек болса, тек name көрсетіледі: 71

Енді JavaScript кодтарында осы форманы былай пайдалануға болады: document.anketa. Егер форманың work атты жолдық өрісі болса, сол жолды айнымалыға меншіктеуге болады: var str = document.anketa.work.value; Осы өріс мәнін өзгерте де аламыз: document.anketa.work.value = "веб-мастер"; Бұдан кейін бұл өріс мәні өзгереді. 1.22-мысал. Форманы электрондық пошта арқылы жіберудің үлгісі. Басыңыз “Тазалау” Тапсырысты толтырыңыз.

Сіздің атыңыз:
Сіздің адресіңіз:
Жөнелту:

72

Бақылау сұрақтары: 1. JavaScript тіліндегі объектілерге сипаттама беріп, мысалдар келтіріңіз. 2. Windows объектісінің атқаратын қызметін сипаттаңыз. 3. Document объектісінің атқаратын қызметі. 4. Объектілерді программалық басқару мүмкіндігін қалай орнатуға болады? Тапсырмалар: 1. Әрбір он студент үшін сауалнамада келесі мәліметтер келтіріледі: тегі, екі бақылау жұмысының бағасы. Студенттер бірнеше топқа бөлінеді. «Үздіктер» қатарына екі бақылау жұмысының бағасы бес, «жақсы үлгерушілерге» бір бағасы 4, «үлгерушілерге» бір бағасы 3, ал «үлгермеушілерге» бір бағасы 2 студент кіреді. Әрбір топтағы студенттің санын анықтау сценарийін жазу керек. 2. Әрбір алты студент үшін сауалнамада келесі мәліметтер: тегі, сессиядағы төрт бағасы толтырылады. Әр топтағы студенттер санын анықтау сценарийін жазыңыз. Топтар келесі түрде анықталады: барлық сабақтан 5 алғандар «үздіктер», бір сабақтан 2 алғандар «үлгермеушілер», қалған студенттер «үлгерушілер». 3. Тестілеу нәтижесі бойынша сауалнама толтырылады: тегі, әрбір тесті орындау нәтижесі (егер сәтті тапсырылса, плюс, егер тест орындалмаса, минус). Егер тестің барлығы орындалса, жұмыс 5-ке, төртеуі орындалса, 4-ке, үш тест орындалса, 3-ке, басқа жағдайда 2-ге бағаланады. Бағасын есептеу және қорытынды шығару сценарийін жазыңыз. Қорытындыда 5, 4, 3, 2 алған студенттер саны жөнінде мәлімет беріледі.

73

№1-7 зертханалық жұмыс

БРАУЗЕР ОҚИҒАЛАРЫН ӨҢДЕУ

Зертханалық жұмыстың мақсаты: Браузер оқиғаларын JavaScript тілінде өңдеуді үйрену.

7.1. Оқиғаларды өңдеуіштер Алдыңғы мысалдарда функция мәнін есептегенде, мәндерді енгізу және сол мәндерге байланысты нәтиже алу мүмкіндігі пайдаланылмады. Интерактивті құжаттарды формаларды қолдана отырып, әр түрлі әрекеттер атқаруға болады. Мысалы, үшбұрыш ауданын табу кезінде мәлімет енгізу үшін Қабырғасы мен Биіктігі сияқты өрістері бар форма құрып, сол формада тағы да Есептеу батырмасын жасайық. Осы батырманы тышқанмен шерткенде, үшбұрыш ауданының мәні шығатын болсын делік. Қолданушының әрекеттері (мысалы, тышқан батырмасын шерту) жоғарыдағы айтылған оқиғаларды орындауды жүзеге асырады. Оқиғалар көп жағдайда қолданушының HTML формасы элементтерімен орындаған әрекеттеріне байланысты атқарылады. Оқиғалардың болатын сәтін анықтап, соларды өңдеу істері форма элементтерінің параметрлерінде беріледі. Оқиғаларды өңдеу параметрлерінің аты on сөзінен басталады да, содан кейін оқиғаның аты жазылады. Мысалы, click (шерту) оқиғасын өңдеу параметрі onclick түрінде болады. JavaScript тілінің операторлары оқиғаларды өңдеу істерін жүзеге асырып, оның параметрінің мәні ретінде жазылады. Оқиғаларды өңдеу параметрі ретінде оқиға пайда болған сәтте орындалуы тиіс функцияны шақыру арқылы беруге де болады. Мұндай жағдайларда төмендегідей форма қолданылуы керек:

Қабырғасы: Биіктігі:

1.23-мысал. Формадағы мәндерді өңдеу. Берілген қабырғасы мен биіктігі арқылы үшбұрыштың ауданын есептеу функциясын жазып, ондағы мәндерді енгізу үшін форма құрайық.

74



Формадағы мәндерді өңдеу

Формада мәндері енгізілетін сценарий мысалы

Қабырғасы:

Биіктігі:



Осы программалық кодтағы саre функциясын шақыру арқылы орындалатын оқиғаларды өңдеу параметрінің мәніне толығырақ тоқталып өтейік. Браузер бұл HTML-парақты интерпретациялауы кезінде JavaScript объектілері құрылады. Объектілердің бір-бірімен байланысы иерархиялық (сатылық) түрде болады.

1.61-сурет. Формадағы мәндерді өңдеу мысалының нәтижесі

75

Иерархияның ең жоғарғы деңгейінде браузер терезесі ретінде қолданылатын window объектісі орналасқан. Window объектісі барлық басқа объектілердің шығар тегі немесе атасы ретінде қарастырылады. Әрбір HTML құжатында window объектісінен басқа document объектісі болады, document объектісінің қасиеттері осы құжаттың ішкі мазмұнына: фон түсіне, қаріп (шрифт) түсіне және т.б. қарай анықталады. Соңғы мысалдағы форма (form) document объектісі ұрпағы, ал форманың барлық ішкі элементтері form объектісінің ұрпағы (баласы) болып табылады. Объектіге сілтеме жасау тәгінің name параметрінде берілген аты арқылы жүзеге асырылады. Форманың бірінші өрісіне енгізілген үшбұрыш қабырғасының мәнін алу үшін мынадай конструкция жазылуы тиіс: document.form1.st1.value Формаға және оның элементтеріне сілтеме жасағанда, document объектісін көрсетпеуге болады. Қарастырылған мысалдағы бірінші өріске енгізілген мәнді алу үшін мынадай атаулар тізбегі жазылады: form1.st1.value Сонымен, функцияға қарапайым типтегі мәлімет берілетін болса (мысалы, сандар), функцияға параметр оның мәні арқылы беріледі. Мысалдағы а формальді параметріне forml.st1.value нақты (нақты) параметр мәні меншіктеледі, ал b формальді параметріне form1.st2.value нақты параметр мәні беріледі. Осыдан кейін барып функция тұлғасы орындалады. Функцияның нақты параметрі объект болған кезде жағдай өзгереді. Мұндай сәтте параметрлердің берілуі сілтеме немесе аты арқылы жүргізілді деп айтылады. Жоғарыдағы мысалымызға сәйкес программалық код мынадай түрде жазылсын делік:

Тік бұрышты үшбұрыштың ауданын есептеу

Қабырғасы:

Биіктігі:



Мұндағы care1 функциясын шақырғанда нақты параметр ретінде форманың мәтіндік өрістерінің аттары қолданылады. Ауданды есептеу кезінде қолданушы енгізген мәндер пайдаланылады. Сондықтан care1 функциясының сипаттамасы мынадай түрде болады: 76

function care1(a,h) { var s=(a.value*h.value)/2; document.write("Аудан: ",s); return s; } Үшбұрыштың қабырғасының мәні a.value тізбегі, ал биіктігі h.value арқылы жазылады. Енді толық сценарийі бар құжатты сипаттау мысалын келтірейік. 1.24-мысал. Параметрлерді сілтеме арқылы беру. Берілген қабырғасы мен биіктігі арқылы үшбұрыштың ауданын есептеу сценарийін жазып шығайық. Функцияның нақты параметрлері ретінде форманың мәтіндік өрістерінің аттарын қолданайық. Осының HTML коды төменде көрсетілген.

Параметрлер ретінде форманың мәтіндік өріс аттары

Үшбұрыш ауданын есептеу

Қабырғасы:

Биіктігі:



1.62-сурет. Параметрлерді сілтеме арқылы беру мысалы нәтижесі

77

Келесі бөлімде берілген мысалда саre2 функциясына тек бір параметр – форма аты беріледі, ал функция ішінде нақты берілген мәндер анықталады.

7.2. Функция параметрі ретінде форма атын пайдалану Берілген қабырғасы мен биіктігі арқылы үшбұрыштың ауданын есептеу сценарийін функцияның нақты параметрі ретінде форма атын қолдана отырып тағы да бір жазайық. саre2 функциясында форма аты болып табылатын obj параметрі бар, оған мәтіндік өріс арқылы қолданушы мән енгізе алады. Есептеулерде форма арқылы берілген мәндерді пайдалану үшін obj.sti.value конструкциясын қолдану қажет, яғни форма өрісінің атын көрсетіп, сонан соң оның мәнін таңдау керек. 1.25- мысал. Функция параметрі ретінде форма атын қолдану.

Функция параметрі – форма аты

Үшбұрыштың ауданын есептеу

Қабырғасы:

Биіктігі:



Алдыңғы мысалдарда да мән есептелген болатын, бірақ оның нәтижесін экранға шығаруда document объектісінің write тәсілі қолданылған еді. Енді 78

есептелген мәнді жазатын форманың Аудан өрісін анықтайық. Құжат тұлғасынде форма өрістері төмендегідей түрде сипатталған болсын:

Қабырғасы: Биіктігі:

Аудан

Енді саre3 функциясын мынадай түрде жазайық: function саrе3(obj) { var a = obj.st1.value var h = obj.st2.value var s = (a* h)/2; obj.res.valuers } Есептеу батырмасын шерту нәтижесінде res атты өрісте керекті нәтиже шығады. Келтірілген мысалдарда оқиғаларды өңдеу параметрінің мәні функция (оқиға орындалған сәтте шақырылған) болған. Жалпы жағдайда оқиғаларды өңдеу параметрінің мәні JavaScript тілінің басқа да операторлары болуы мүмкін. Келесі мысалда да үшбұрыштың ауданын есептеу үшін функцияны сипаттаймыз. Есептеу батырмасын шерту нәтижесінде res атты өрісте керекті нәтиже шығады. Мұнда оқиғаларды өңдеу параметрінің мәні ретінде меншіктеу операторы пайдаланылады. 1.26-мысал. Оқиғаларды өңдеу параметрінің мәнін есептеу үшін меншіктеу операторын қолдану. Берілген қабырғасы мен биіктігі арқылы үшбұрыштың ауданын есептеу функциясын құрайық.

Оқиғаларды өңдеу параметрінің мәні ретінде меншіктеу операторы

Берілген қабырғасы мен биіктігі арқылы үшбұрыштың ауданын есептеу

Қабырғасы:

Биіктігі:

79

Аудан:



1.63-сурет. Оқиғаларды өңдеу параметрінің мәнін есептеу үшін меншіктеу операторын қолдану мысалы нәтижесі

7.3. Орташа кірісті есептеу Бірінші жарты жылдықтың әр айындағы жалақы туралы ақпарат енгізіледі. Қарастырылып отырған кезеңде бір айдағы орташа кірісті анықтайтын сценарий жазу керек. 1.64-суретте форманың өрістері толтырылып, нәтижесі есептелгеннен кейінгі құжат бейнесі көрсетілген. Қарастырылып отырған кезеңдегі орташа кірісті есептеу программалық кодын көрсетейік (1.27-мысал). 1.27- мысал. Орташа табысты есептеу

Орташа табысты есептеу

Келесі айлар үшін тағайындалған жалақы қосындысын енгізіңіз

Қаңтар: Ақпан: Наурыз: Сәуір: Мамыр: Маусым: Жартыжылдық орташа жалақы: