JAVASCRIPT ТІЛІНДЕ БАҒДАРЛАМАЛАУ

(1)

1

Қостанай мемлекеттік педагогикалық институты Жаратылыстану – математика факультеті

Информатика және компьютерлік технологиялар кафедрасы

Айтбенова Аян Алтаевна

JAVASCRIPT ТІЛІНДЕ БАҒДАРЛАМАЛАУ

Қостанай 2018

(2)

2

ӘОЖ 004.4 (075.8) КБЖ 32.973-018.1я73 А32

Авторы:

А.А. Айтбенова, Информатика және компьютерлік технологиялар кафедрасының аға оқытушысы, педагогикалық білім беру магистрі

Пікір жазғандар:

А.Т. Байманкулов - А.Байтурсынов атындағы Қостанай мемлекеттік университетінің «Ақпараттық жүйелер»

кафедрасының меңгерушісі, физика-математика ғылымдарының докторы, профессор.

З.С. Ерсултанова - Қостанай мемлекеттік педагогикалық институтының «Информатика және КТ»

кафедрасының аға оқытушысы, техника ғылымдарының кандидаты.

А32

Айтбенова А.А.

JavaScript тілінде бағдарламалау: жоғарғы оқу орындарының студенттеріне арналған оқу құралы. –Қостанай: ҚМПИ, 2018.-100б.

ISBN 978-601-7934-36-1

Ұсынылып отырған оқу құралы қазіргі кезде web–беттер құруға арналған кең қолданыстағы JavaScript тілін оқып–үйренуге арналған. Оқу құралында JavaScript тілі бойынша теориялық және практикалық сабақтарға арналған материалдар қамтылған, көптеген мысалдар келтіріліп, оларды орындау жолдары қарастырылған. Әр практикалық жұмыста өзіндік жұмыстар үшін тапсырмалар және бекіту сұрақтарымен толықтырылған.

Ұсынылған оқу құралын жоғарғы оқу орындарының студенттері, орта мектеп оқушылары мен мұғалімдер және осы тілді өздігінен үйренушілер де пайдалана алады.

ӘОЖ 002 (075.8)

КБЖ 32.973-018.1я73 Қостанай мемлекеттік педагогикалық институтының Ғылыми кеңесінің шешімімен ұсынылған.

ISBN 978-601-7934-36-1

Айтбенова А.А., 2018

ҚМПИ, 2018

(3)

3

МАЗМҰНЫ

Кіріспе... 4

1. JavaScript тілі туралы жалпы мәліметтер 1.1 JavaScript тілінің негіздері………... 5

1.2 JavaScript тілінің құрылымы………... 9

1.3 Мәліметтер типі. Операторлар, өрнектер……….. 15

1.4 Циклдік операторлар……… 17

1.5 Жолдық амалдар. Функциялар……….. 19

1.6 JavaScript тілінің объектілері………. 21

1.7 JavaScript тілінің оқиғаларды өңдеу мүмкіндіктерін пайдалану... 28 2. Практикалық жұмыстар 2.1 Практикалық жұмыс №1. Негізгі операторлар... 31

2.2 Практикалық жұмыс №2. JavaScript тілінің шартты операторлары... 39 2.3 Практикалық жұмыс №3. JavaScript тіліндегі циклдік операторлар... 41 2.4 Практикалық жұмыс №4. JavaScript оқиғалары... 45

2.5 Практикалық жұмыс №5. JavaScript функциялары... 48

2.6 Практикалық жұмыс №6. Math объектісі... 52

2.7 Практикалық жұмыс №7. Array объектісі... 54

2.8 Практикалық жұмыс №8. String объектісі... 60

2.9 Практикалық жұмыс №9. Date объектісі... 62

2.10 Практикалық жұмыс №10.Window объектісі... 67

2.11 Практикалық жұмыс №11. Форма элементтері – жалаушалар, радиобатырмалар, тізімдер... 70 2.12 Практикалық жұмыс №12. Image объектісі... 75

Қолданылған әдебиеттер... 79

Құжаттағы түстерді анықтау... 80

Тестілік тапсырмалар... 81

HTML тілінің тегтері туралы анықтамалық сөздік... 97

(4)

4

КІРІСПЕ

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

Компьютерлік техниканың бағдарламалау мүмкіндіктерін педагогикалық мақсаттарға қолдану, білім мазмұнын анықтауда, оқыту формалары мен әдістерін жетілдіруде жақсы әсерін тигізеді.

Бұл оқу құралының мақсаты – студенттерді HTML және JavaScript тілдері көмегімен қарапайым веб-беттер, сайттар жасауға үйрету болып табылады.

Берілген оқу құралы «JavaScript тілінде бағдарламалау» курсы бойынша теориялық және практикалық материалдармен танысуға көмектеседі. Осы курс бойынша практикалық жұмыстарды орындау үшін қажетті материалдар қамтылып, WWW ортасында осы тілді пайдалану жолдарынан көптеген мысалдар келтіріліп, бағдарламалық кодтар берілген. Әр практикалық жұмыста өзіндік жұмыстар үшін тапсырмалар және бекіту сұрақтарымен толықтырылған. Мұндағы көптеген мысалдарды кез–келген браузер арқылы орындап тексеруге болады.

(5)

5

1 JAVASCRIPT ТІЛІ ТУРАЛЫ ЖАЛПЫ МӘЛІМЕТТЕР 1.1 JAVASCRIPT ТІЛІНІҢ НЕГІЗДЕРІ

Мақсаты: JavaScript тілінің қысқаша тарихымен, негізгі ұғымдармен және оның мүмкіндіктерімен танысу.

Жоспары:

1. JavaScript тілі, оның қысқаша тарихы, скриптілік тілдердің тағайындалуы.

2. Негізгі ұғымдар.

3. JavaScript тілінің мүмкіндіктері.

1) JavaScript тілі, оның қысқаша тарихы, скриптілік тілдердің тағайындалуы

Netscape Communications корпорациясы ең басынан бастап World Wide Web динамикалық дамуына айтарлықтай үлес қосты. Осы саладағы жетістікке жету үшін Netscape Navigator браузерін жасау және тегін тарату (үйде пайдалану үшін) арқылы насихатталды.

Содан кейін, Netscape қысқа уақыт ішінде LiveScript деп аталатын сценарий тілін құрды, ол статикалық құжаттарды көп немесе аз интерактивті бағдарламаларға айналдыруға мүмкіндік беретін керемет құрал рөлін атқарады. Netscape Navigator браузерінің алғашқы нұсқаларында қолдау көрсетілетін LiveScript өте танымал және табысты болды. Сонымен қатар, Sun Microsystems-дағы инженерлер әртүрлі интерфейстердің стандарттарына сәйкес бағдарламалық жасақтамаға бейімделіп, Java тілін дамытты.

Netscape Communications және Sun Microsystems арасындағы келісімнің арқасында LiveScript-дің идеяларын Java құрылымымен біріктіре отырып, желілік қосымшаларды әзірлеуге және, ақырында, динамикалық веб-беттерді жасауға арналған «Mocha» деп аталатын орта болды. Ол ашық сипатта және қолданылатын бағдарламалық жасақтамадан тәуелсіз болды.

Жоба екі нұсқада 1995 жылы желтоқсанда 1.0 нұсқасында JavaScript атауымен жарияланған техникалық сипаттамаларды жасақтауға әкелді.

Өз өнімдерінде JavaScript тілін қолдануға мүдделі көптеген компаниялар жаңа технологияға қызығушылық танытты. Microsoft корпорациясы JavaScript тілін Internet Explorer браузері арқылы көрсете алады деп жариялады.

Бірақ Microsoft корпорациясы JavaScript-ні пайдалануда кейбір қиындықтарды бастан кешірді, өйткені JScript деп аталған осы тілдің алғашқы іске қосылғандығын Internet Explorer 3.0-де жеткілікті сенімді деп санауға болмайды. Бұл Microsoft-тың мәжбүрлі, стандартты JavaScript нұсқасын пайдалануына мәжбүрледі және Internet Explorer авторлық шешімі болып табылатын VBScript (Visual Basic Script) тіліндегі сценарийлерді іске қосу мүмкіндігін қамтамасыз ете бастады. Оның

(6)

6

синтаксисі мен мүмкіндіктері JavaScript-ке өте ұқсас. Алайда, JavaScript әмбебап және кеңінен қолданылатын технология болып табылады.

HTML тілі Web-беттер авторларына мәтіндік және графикалық ақпаратты бейнелеу үшін үлкен мүмкіндіктерді береді. Бірақ HTML тілі көмегімен құрылатын HTML беттер статистикалық болып қала береді – яғни, пайдаланушы бетте орналасқан ақпаратты өзгерте алмайды және де көптеген интерфейстік элементтерді қолдана алмайды. Бетті интерактивті түрде жасау үшін – скриптілік тіл қажет.

Скриптілік тілдер интерактивті беттерді құру үшін қолданылады.

Сондай скриптілік тілдің бірі JavaScript.

JavaScript –бұл қарапайым объектілі-бейімделген, браузерге түсінікті программалау тілі. Браузер бұл тілдегі командаларды орындай алады, яғни оның ішкі интерпретаторы бар. Ол Internet үшін клиенттік және серверлік қосымшаларды құру үшін арналған.

JavaScript программасы скрипт немесе сценарий деп аталады.

JavaScript тілінде жазылған бағдарламалар HTML-құжаттарының құрамына кіреді және солармен бірге тарайды. Netscape Navigator және Ms Internet Explorer типті көру программалары (яғни, браузерлер) құжаттың мәтініне енгізілген кірістірілген программаларды (Script-кодтар) таниды және оларды орындайды.

JavaScript коды HTML тілін толықтырып, оны көрнекі етеді. JavaScript тілі арқылы гипермәтіндер жаңа мүмкіндіктерге ие болады.

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

Скриптілік тілдер көбінесе мыналар үшін қолданылады:

 браузердің статустық жолындағы сұхбаттық тақталарды және хабарламаларды бейнелеу үшін;

 жүктелу уақытында беттің құрамын динамикалық түрде құру;

 беттің құрамын өзгерту;

 пайдаланушы көретін ақпаратты өзгерту;

 басқа беттер бойынша навигация;

 Web-бетке Java–апплет және Active X элементтері сияқты кірістірілген объектілерді басқару.

JavaScript көмегімен келесіні жасауға болады:

 веб-беттердің мазмұнын динамикалық түрде өзгерту;

 оқиғаларды өңдеушілерді элементтерге байланыстыру (кодты белгілі бір әрекеттер орындалғаннан кейін ғана атқаратын функциялар);

 кодты белгілі бір уақыт аралығында орындау;

(7)

7

 браузердің әрекетін басқару (жаңа терезелерді ашу, көрсетілген құжаттарды жүктеу және т.б.);

 cookie файлдарын жасау және оқу;

 пайдаланушы қай браузерді қолданатындығын анықтау (oж-ні, экранның кеңейтпесін, пайдаланушының қолданған беттерін және т.б.

анықтау);

 серверге жіберместен бұрын форманың деректерін және тағы басқаларын тексеру.

2) Негізгі ұғымдар

JavaScript программалау тілін Netscape Communications-тегі Брендан Эйк ойлап тапқан. Бұл клиент тарапынан жұмыс істейтін сценарилерді жазуға арналған объектілі-бағдарланған тіл.

JavaScript тілі объектілерге негізделген. JavaScript объектісі – реттелмеген қасиеттер жиынтығы. Олардың әрқайсысының осы қасиеттің қалай пайдаланатындығын анықтайтын атрибуттары болады.

JavaScript-тің бірге орнатылған ішкі Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp сияқты объектілері бар.

Сонымен қатар JavaScript-тің ішкі амалдары болады, олардың функция не әдіс болулары міндетті емес. Оларға қоса оның программаның орындалу логикасын басқаратын ішкі операторлар жиынтығы бар.

JavaScript тілінің негізгі ұғымдарына тоқталайық:

Типі. Деректер мәндерінің жиынтығы.

Қарапайым мәні. Типтерінің бірі Undefined–тің элементі (анықталмаған), Null (нөлдік), Boolean (логикалық - true немесе false), Number (сандық) немесе String (жолдық). Қарапайым мәндер – бұл тікелей меншіктелетін және тілді ең төменгі деңгейде жүзеге асыратын деректер.

Объект. Object; әрқайсысы қарапайым мән, объект немесе функция бола алатын реттелмеген қасиеттер жиынтығы типінің элементі болып табылады. Функция болып табылатын қасиет әдіс деп аталады.

Құрастырушы/Конструктор. Объектілерді құратын және оларды инициализациялаушы функция. Әр құрастырушының қасиеттерді мұраға қалдыруы және бөлектеуі үшін пайдаланатын сәйкес прототипі болады.

Прототип. JavaScript-те құрылымды, жағдайды және өзін-өзі ұстауды мұраға қалдыруды жүзеге асыруға арналған объект.

Құрастырушы объект құрғанда осы объектінің қасиетіне сілтеме жасауға мүмкіндік беретін құрастырушы прототипіне көрінбейтін сілтеме құрады.

Прототип қасиеттері соның негізінде жасалған барлық объектілерге бөлінеді.

Тіл объектісі. JavaScript тілін жүзеге асыруды қолдайтын, бірақ сценарилердің орындалу ортасы болып табылмайтын кезкелген объект.

Тіл объектісінің бір бөлігі өзімен бірге орнатылады, басқалары сценарилерді орындау барысында жасалады.

(8)

8

Бірге орнатылатын объект. Қандай ортада орындалуына қарамастан javascript тілін жүзеге асыруды қолдайтын және сценаридің орындалуының бастапқы сәтінде бар кезкелген объект. Барлық бірге орнатылған объектілер тіл объектісі болып табылады.

Орта объектісі. Тіл объектісі болып табылмайтын, сценарилер орындалатын орта қолдайтын кезкелген объект.

Анықталмаған мән. Айнымалыға ешбір мән меншіктелмегенін білдіретін қарапайым мән.

Undefined типі. Бұл тип анықталмаған мән болып табылатын undefined-тің жалғыз мәнінен тұрады.

Нөлдік мән. Нөлдік, бос немесе жоқ сілтемені білдіретін қарапайым мән.

Null типі. Бұл тип нөлдік болып табылатын жалғыз null мәнінен тұрады.

Логикалық мән. Ақиқат немесе жалған екендігін білдіретін Boolean типті қарапайым мән.

Boolean типі. Мына: true (ақиқат) және false (жалған) мәндерінен тұратын тип.

Логикалық объект. Бірге орнатылған логикалық объект экзепляры болып табылатын Object типті элемент. Басқаша айтқанда, логикалық объект new Boolean(value) өрнегімен жасалады, мұнда value – логикалық мән. Нәтижелік объектінің Boolean типті көрінбейтін (аты жоқ) қасиеті болады.

Жолдық мән. String типті элемент. Символдар жолын, яғни нөлдерден тұратын реттелген жиым немесе Unicode (16-биттік таңбасыз бүтін сандар) символдарын құрайды.

String типі. Бұл тип бүкіл жолдық мәндерден тұрады.

Жолдық объект. Бірге орнатылған жолдық объект экземпляры болып табылатын Object типті элемент. Басқаша айтқанда, жолдық объект new String (value) өрнегімен жасалады, мұнда value – жолдық мән. Нәтижелік объектінің String типті көрінбейтін (аты жоқ) қасиеті болады.

Сандық мән. Number типті элемент. Санның тікелей бейнесі болып табылады.

Number типі. Бүкіл сандық мәндерден тұратын тип.

Сандық объект. Бірге орнатылған сандық объект экземпляры болып табылатын Object типті элемент. Басқаша айтқанда, сандық объект new Number (value) өрнегімен жасалады, мұнда value – жолдық мән.

Нәтижелік объектінің Number типті көрінбейтін (аты жоқ) қасиеті болады.

Енді бұдан әрі осыларды қолдануды қарастырайық.

Объектілік модель. Енді біз теориядан нақты іске көшейік. Біздер оқиға, объект дегендердің не екенін білдік. JavaScript тілінің объектілік моделін қарастыруға кірісейік.

Сонымен объектілік модель мыналардан құралады:

(9)

9

 объектілерден;

 қасиеттерден;

 әдістерден;

 оқиғалардан;

 коллекциялардан.

3) Java Script тілінің мүмкіндіктері

JavaScript көмегімен HTML құжаттарының бейнеленуін және құрамын басқаруға болады. Экранда бейнеленетін құжатқа кез-келген HTML-кодты жазуға болады.

JavaScript браузердің жұмысын бақылауға мүмкіндік береді.

Мысалы: WINDOWS объектісі экранға шығарып сұхбаттық территорияларды шығаруға, браузердің жаңа терезесін құруға, ашуға және жабуға терезе өлшемдерін беруге және тағы басқа мүмкіндік беретін әдістерді қолдайды.

JavaScript құжаттардың құрамымен өзара әрекет жасауға мүмкіндік береді. Doсument объектісі және онда қамтылатын объектілер программаларға HTML құжатының бөлігін оқуға, кейде олармен өзара әрекет жасауға мүмкіндік береді. Мәтіннің өзін оқуға болмайды, бірақ, мысалы гипермәтіндік сілтемелердің тізімін алуға болады. Қазіргі таңда құжаттардың құрамымен өзара әрекет жасайтын Form объектісі және ол қамтитын объектілер кең мүмкіндіктер береді.

JavaScript пайдаланушымен өзара әрекет жасауын қамтамасыздандырады. JavaScript кез-келген математикалық есептеулерді орындауға мүмкіндік береді.

Бақылау сұрақтары:

1. JavaScript тілі қандай тіл?

2. Скриптілік тілдер не үшін қолданылады?

3. Java Script тілінің мүмкіндіктері қандай?

4. JavaScript тілін кім ойлап тапқан?

5. Скрипт немесе сценарий деген не?

6. JavaScript тілінің қандай объектілері бар?

7. Объектілік модель неден құралады?

1.2 JAVASCRIPT ТІЛІНІҢ ҚҰРЫЛЫМЫ

Мақсаты: JavaScript тілінің мәліметтер типімен, айнымалылармен, құжаттың құрылымымен және ақпаратты шығару тәсілдерімен танысу.

Жоспары:

1. Негізгі мәліметтер типі. Айнымалылар.

2. Құжаттың құрылымы.

3. Ақпаратты шығару.

(10)

10

1) Негізгі мәліметтер типі. Айнымалылар

Айнымалылардың, функциялардың және өрнектердің мәндері мынадай типті болады:

1. Бүтін сандық;

2. Нақты сандық;

3. Логикалық;

4. Жолдық;

5. Null-мәнінің «бос жиынын» белгілеу үшін арналған арнайы мән.

Айнымалылар идентификаторлармен белгіленеді. Идентификатор – міндетті түрде әріптен басталатын латын әріптері мен цифрлар тізбегі.

Айнымалы деп - алгоритмнің орындалу процесінде мәні өзгеретін шаманы айтады. Айнымалыны анықтау үшін var кілттік сөзі қолданылады.

Мысалы:

var x=1 // x-ке 1 мәні меншіктелген.

var y=2 // y-ке 2 мәні меншіктелген.

var z=3 // z -ке 3 мәні меншіктелген.

х, у, z айнымалылар болғандықтан, олардың мәндері кез келген уақытта өзгере алады. Мысалы: х=y+z //x=5, бұл 2 және 3 сандарының қосындысының нәтижесі.

2) Құжаттың құрылымы

JavaScript скриптінің коды HTML-бетте орналасады. Скрипт екі —

<SCRIPT>. . .</SCRIPT> тегтерінің арасында орналасады. Оның жалпы жазылу түрі мынандай:

...

JavaScript бағдарламасы ...

</SCRIPT>

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

<!- ...

//->

</SCRIPT>

Комментарийлер <!- ... //-> жақшаларға алынады, HTML- комментарийдің тегі жабылуы үшін "//" екі қиғаш сызықшалар қолданылады.

Құжаттың жалпы құрылымы:

(11)

11

JavaScript тілінде жазылған бағдарлама құрылымының функциялары HTML-құжатының <HEAD> бөлімінде орналасады. HTML- құжатының мысалы:

<HTML>

<HEAD>

<TITLE> JavaScript тіліндегі бағдарлама мысалы</TITLE>

<!- ...

//->

</SCRIPT>

</HEAD>

<BODY>

...

HTML-құжатының мәтіні және JavaScript-те функцияны шақыру ...

</BODY>

</HTML>

<NOSCRIPT>...</NOSCRIPT> тегтері.

<NOSCRIPT>. . .</NOSCRIPT> командасы міндетті емес болып табылады. Бұл командалардың арасында браузер JavaScript тілін көрмейтін пайдаланушылар үшін мәтін қамтылады. Бұл команданың арасында HTML тегтері орналасады.

<HTML>

<HEAD>

<TITLE> JavaScript тіліндегі бағдарлама мысалы /TITLE>

<!- ...

Java Script бағдарламасы ...

->

</SCRIPT>

<!-

Мұнда браузер JavaScript тілін көрмейтін пайдаланушылар үшін мәтін қамтылады

->

</NOSCRIPT>

</HEAD>

(12)

12

<BODY>

...

HTML-құжатының мәтіні және и JavaScript-те функцияны шақыру ...

</BODY>

</HTML>

<NOSCRIPT>...</NOSCRIPT> командасы келесі түрде көрсетілуі де мүмкін:

Сіздің браузеріңіз JavaScript -ті қолдамайды. Өтінемін, браузердің нұсқасын жаңартыңыз.

Оны <a href="http://www.microsoft.com/"> Microsoft фирмасының Web-торабында </a>, немесе - <a href="http://www.netscape.com/">

Netscape фирмасының Web-торабында </a> </center> жасауға болады </a>

</center>

</NOSCRIPT>

Сурет 1. Мысалдың нәтижесі 3) Ақпаратты шығару

JavaScript тілі ақпаратты шығарудың екі тәсілін ұсынады: alert әдісі және write әдісі.

1-тәсіл: alert әдісі. Бұл әдіс көмегімен браузер экранында кішігірім хабарламалар шығаруға болады. Олар бөлек сұхбаттық терезеде пайда болады. Ok батырмасын шерту арқылы оны жабамыз.

Мысалы:

alert('Хабарлама тақтасында хабарлама шығару мысалы')

</script>

Сурет 2. Хабарлама шығару

(13)

13

2-тәсіл: write әдісі

Бұл әдіс document объектісімен ұсынылады. Анықталған параметрлері көрсетілген document.write әдісін шақырғанда, браузер терезесінде мәтін пайда болады. Бұл әдісті шақырғанда параметр ретінде, біз экранда көргіміз келетін жолды көрсетеміз.

Мысалы:

document.write('Браузер терезесіне хабарлама шығару мысалы')

</script>

Сурет 3. Браузер терезесіне хабарлама шығару

Шығарылатын жол тілінің тегтерін қамти алады. Бұл жағдайда браузер берілген жолды, HTML құжатында орналасқан жол сияқты түрде шығарады. Мысалы,

document.write('<H1><B><I>Браузер терезесіне хабарлама шығару мысалы</I></B></H1>')

</script>

Сурет 4. Браузер терезесіне хабарлама шығару Prompt функциясы.

Prompt функциясы ақпарат енгізу үшін қажет. Оның жазылуы:

prompt(">жaзy", "үндеу бойынша енгізілетін мән");

мұнда экранға ішінде eкi батырмасы бар терезе шығады. Біз жазба мәліметті енгізу жолына жазамыз да, ОК басамыз. Сонда терезе жоқ болады да, терезеге енгізілген мәліметтер шығады.

Ол мәнді мысалы, айнымалыға меншіктеуге, артынан басқа командаларда пайдалануға болады. Егер Cancel батырмасын шертетін болсақ, онда prompt функциясы арнайы null мәнін қайтарады (бұл "null"

сөз тіркесі емес, яғни бос жол (" ") емес, ол мәліметтің арнайы мәні).

Confirm (“жол”).

Confirm (Растау) әдісі пайдаланушының таңдауы қажет болғанда қолданылады.

(14)

14

Confirm әдісі пайдаланушыға сұрақ мәтінін және «ОК» және

«Болдырмау» ларын қамтитын сұхбаттық терезесін көрсетуге мүмкіндік береді.

Confirm функциясы пайдаланушы басқан батырмаға байланысты логикалық мәнді қайтарады:

 «OK» true;

 «Болдырмау» false деп орнатылды.

Әдетте, функцияның нәтижесі мысалда көрсетілгендей әрі талдау үшін логикалық айнымалыға тағайындалады.

Мысалы,

Сурет 5. Бағдарлама коды

Сурет 6. Нәтижесі

Сурет 7. Нәтижесі Бақылау сұрақтары:

1. Айнымалылардың қандай типтері бар?

2. JavaScript тегтері қайтегтердің арасында орналасады?

3. <NOSCRIPT> тегінің атқаратын қызметі?

4. Ақпаратты шығарудың қандай тәсілдері бар?

(15)

15

1.3 МӘЛІМЕТТЕР ТИПІ.

ОПЕРАТОРЛАР, ӨРНЕКТЕР

Мақсаты: JavaScript тілінің мәліметтер типімен, операторларымен және тармақталу операторларымен танысу.

Жоспары:

1. Мәліметтер типі. Операторлар.

2. Арнайы символдарды кірістіру 3. Тармақталу операторлары.

1) Мәліметтер типі. Операторлар.

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

Скриптердегі қолданылатын тілді анықтайтын параметрлердің бірі

<Script> тегінің language атрибуты болып табылады.

JavaScript-тегі арифметикалық операторлар мынадай:

Кесте 1. Арифметикалық операторлар

Оператор Атауы

+ Қосу

- Азайту

* Көбейту

/ Бөлу

% бүтінсанды бөліндіден қалған қалдық Икрементті және декрементті операторлар

++ Операнд мәнін бірге өсіру -- Операнд мәнін бірге кеміту Меншіктеу операторы мынадай:

"=", "+=", "-=", "*=", "/=", "%="

Икрементті және декрементті операторларының жазылуы

"х++", "++х", "х--", "--х"

1. Ақпарат енгізу

Alert функциясы ақпаратты экранға шығару үшін керек. Ал ақпарат енгізу үшін prompt функциясы қажет:

prompt(">жaзy", "келісім бойынша енгізілетін мән");

мұнда экранға ішінде eкi батырмасы бар терезе шығады. Біз жазба мәліметті енгізу жолына жазамыз да, ОК басамыз. Сонда терезе жоқ болады да, терезеге енгізілген мәліметтерметтер шығады.

Ол мәнді мысалы, айнымалыға меншіктеуге, артынан басқа командаларда пайдалануға болады. Егер Cancel батырмасын шертетін болсақ, онда prompt функциясы арнайы null мәнін қайтарады (бұл "null"

сөз тіркесі емес, яғни бос жол (" ") емес, ол мәліметтің арнайы мәні).

2. Блок

(16)

16

Жүйелік жақшаға алынған командалар тізбегі {1-команда; 2- команда;..} бір команда секілді орындалады. Мұндай күрделі команда құрама немесе блок деп аталады. Жақшадан «}» кейін «;» символы қойылмайды.

3.Балама мән енгізу

Егер екі балама мәннің бірін таңдап алу керек болса, онда prompt функциясын пайдалану керек.

Бірақ бұдан гөрі қарапайым әрі жеңіл тәсіл бар, ол- confirm функциясын пайдалану:

Confirm(“жазу”);

Егер ОК батырмасын шертсек, confirm функциясы true мәнін қайтарады, ал егер Отмена батырмасы шертілсе, False мәні қайтарылады.

Олардың орнына соларға парапар<Enter> және<Esc> пернелерін пайдалануға болады.

Өрнектер:

y=x++ мына екі меншіктеулерге эквивалентті: y=x; y=y+1, y=++x мына екі меншіктеулерге эквивалентті: x=x+1; y=x, y=x-- мына екі меншіктеулерге эквивалентті: y=x; x=x-1, y=--x мына екі меншіктеулерге эквивалентті: x=x-1; y=x.

Мысалы:

1) var i = 2;

i++; // i = i + 1 қысқа жазба үшін alert(i); // 3

2) alert(5 % 2); // 1, (5-тің 2-ге бөліндісінің қалдығы) 2) Арнайы символдарды кірістіру

Біз Alert() ішінде «<br>» (және басқа HTML тегтерін) пайдалана алмаймыз, бірақ JS-те мәтінді жаңа жолға аударуға мүмкіндік беретін арнайы \n символы бар. Мысалы:

alert('Жолды \n ауыстыратын \n хабарлама');

Төмендегі кестеде JavaScript-те бар арнайы символдар бар.

Кесте 2. Арнайы символдар Арнайы символ коды Мағынасы

\n Жолды ауыстыру

\\ Кері слэш

\t Табуляция

\' Бір тырнақша

\" Қос тырнақша

\& Амперсанд Мысалы:

alert('Амперсанд \& кері слэш \\ және бір тырнақшаны \' қамтитын хабарлама');

(17)

17

2) Тармақталу операторлары

 IF шартты операторы.

If операторын берілген шарт ақиқат болғанда ғана командаларды орындау үшін қолданылады:

if(шарт) {

тұжырым }

Мысалы:

var a=7;

var b=7;

if (a==b) {

document.write("Сандар тең");

}

 IF..ELSE операторы.

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

if(шарт) {

тұжырым1 }

else {

тұжырым2 }

Мысалы:

var a=9;

var b=7;

if (a==b) {

document.write("Сандар тең");

} else {

document.write('Сандар тең емес');

}

Бақылау сұрақтары:

1. JavaScript-те қандай арифметикалық әрекеттер операторлары бар?

2. Меншіктеу операторы қандай?

3. Шартты операторлардың қандай түрлері бар?

1.4 ЦИКЛДІК ОПЕРАТОРЛАР

Мақсаты: JavaScript тілінің циклдік операторларымен танысу Жоспары:

1. Циклдік операторлар.

(18)

18

2. Циклдардың орындалуын үзу (тоқтату, кідірту) операторлары.

1) Циклдік операторлар

 FOR циклі.

Белгілі бip әрекеттердің қайталанып орындалуын цикл операторларының көмегімен ұйымдастыруға болатындығы бізге белгілі.

JavaScript бағдарламалау тілінде циклді ұйымдастырудың екі түрі бар:

1. For циклі.

2. While циклі.

For циклінің жазылуы:

for(атау; шарт; счетчиктердің өзгеру секциялары) {

тұжырым }

 WHILE циклі.

Циклдің орындалуы: алдымен шарт тексеріледі. Егер ол ақиқат болса, командалар орындалады. Keлeci жолы да осы әрекеттер қайталанады, яғни шарт тексеріледі, егер ол ақиқат болса, цикл орындалады, т.с.с. Кезекті тексеру кезінде шарт жалған болған кезде, цикл жұмысы аяқталады. Циклде шарт алдын ала тексерілетін болғандықтан, ол бірде бip рет орындалмауы да мүмкін.

While циклінің жазылуы:

while(шарт) {

Өрнек }

alert("Косынды1 + 2 + ... + 100=" + sum) ;

 DO ... WHILE циклі.

Do...while – бұл while циклінің басқа түрі. Бұл цикл блок кодын бір рет орындайды, және берілген шарт ақиқат болғанша циклді қайталап отырады.

Жазылуы:

do {

орындалатын код }

while (айнымалы<=соңғы мән);

Мысалы,

Var i = 1;

var sum = 0; while(i<= 100) {

sum += i;

i ++;

}

(19)

19

2) Циклдардың орындалуын үзу (тоқтату, кідірту) операторлары

Break және continue командалары цикл командаларының орындалу ретін өзгерту үшін қолданылады. Continue командасы циклдің одан кейінгі тұрған барлық командаларын аттап өтіп, цикл параметрінің келесі мәніне көшіреді. Ал break командасы жалпы цикл орындалуын аяқтап, одан кейінгі келесі командаларға көшіреді.

For немесе while ағымды циклдарының операторларын тоқтату үшін break операторы қызмет етеді.

Continue операторы for немесе while-дің ішіндегі ағымды итерациясының орындалуын тоқтату үшін және келесі итерацияның басына өту үшін қолданылады.

1. Циклдердің қандай түрлері бар?

2. Continue командасы 3. break командасы

1.5 ЖОЛДЫҚ АМАЛДАР. ФУНКЦИЯЛАР

Мақсаты: JavaScript тіліндегі жолдық амалдармен және функциялармен танысу

Жоспары:

1. Жолдық амалдар.

2. Функциялар.

1) Жолдық амалдар

Жолдармен жұмыс істейтін мынандай амалдар бар:

 "+" - s1+s2 жолдарын қосу (конкатенация), s1 жолының символдарынан кейін s2 жолының символдары жазылады.

 eval(s) – JavaScript-тің кірістірілген функциясы. Ол JavaScript–тің бір немесе бірнеше операторларды қамтитын s жолымен берілген кодты орындайды. Бұл функцияны оператордың орындалуы үшін ғана емес, өрнекті есептеу үшін ғана емес, өрнекті есептеу үшін де қолдануға болады. Ол берілген кодтағы соңғы есептелген өрнектің мәнін қайтарады.

 parseFloat(s) – JavaScript-тің кірістірілген функциясы. S жолында қамтылатын, санға кірмейтін жолдың басынан бірінші символына дейінгі заттық санын табады (Float типті). Егер сан табылмаса, NaN (“Not a Number”) мәнін береді.

 parseInt(s) – бүтін сандарға арналған (Integer). Негізі автоматты түрде табылады.

 parseInt(s,n) –n негізі бойынша бүтін сандар үшін арналған (2 -ден 36-дейін).

(20)

20

2) Функциялар

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

Функция - JavaScript тілінің негізгі элементі. Функция мынадай түрде сипатталады: function F(v) {s}

Мұндағы F – функцияны шақыруға болатын ат тағайындайтын функция идентификаторы; V - үтір арқылы бөлініп жазылатын функция параметрлерінің тізімі. S - нәтиже алу үшін орындалатын іс-әрекеттерден тұратын функция тұлғасы,яғни операторлар тізбегі.

Ол мыналардан құралады:

 function сөзінен;

 функция атауынан;

 жай жақшаға алынған, үтір арқылы бөлінген, аргументтер тізімінен;

 фигуралық жақшаға алынған функция денесінен.

Жазылуы:

function myFunction(arg1, arg2, ...) {

...

Операторлар тізбегі ...

}

Мұндағы, myFunction —функция атауы, arg1, arg2 — параметрлер тізімі Мысалы:

function Factorial(n) {

if((n<0)||(round(n)!=n)) {

alert("Factorial функциясы келесі аргументте анықталмаған"+n);

return NaN;

} else {

result=(n*Factorial(n-1));

return result;

} } Мысалдар:

1. function showTime() {

// функция экранға уақытты шығарады}

2. function do_Calc() {

// функция есептеулерді орындайды}

3. function askUser() {

// функция пайдаланушыны сұратады}

(21)

21

4. function randColor() {

// функция кездесоқ түстерді шығарады}

1. Жолдармен жұмыс істейтін қандай амалдар бар?

2. Функция деген не?

3. Ол қалай жазылады?

1.6 JAVASCRIPT ТІЛІНІҢ ОБЪЕКТІЛЕРІ

Мақсаты: JavaScript тілінің құрамындағы объектілермен танысу.

Жоспары:

1. Тілдің құрамындағы объектілер. Олардың қасиеттері мен тәсілдерін пайдалану. Date объектісі.

2. Array объектісі.

3. Math объектісі.

4. Window объектісі.

5. Document класы.

1)Тілдің құрамындағы объектілер. Олардың қасиеттері мен тәсілдерін пайдалану. Date объектісі

Объект — бұл мәліметтер мен функциялар жиынынан тұратын бірыңғай конструкция немесе, JavaScript терминологиясында, қасиеттер мен тәсілдер жиыны.

JavaScript тілінің ішкі объектілерін қарастыруды өте пайдалы болып саналатын Date объектісінен бастайық. Бұл объект күн-ай мерзімімен (дата) және уақытпен жұмыс істеу үшін керек.

Объект экземплярын жасау үшін (Date объектісінің ғана емес, одан басқасының да) JavaScript тілінде new түйінді сөзі қолданылады:

var now = new Date();

Енді now айнымалысы Date объектісі экземпляры болып табылады да, ол үстіміздегі дата мен уақытты береді.

Жалпы экземпляр жасау былай орындалады:

var айнымалы = new Date(параметрлер);

Мысал:

var now = new Date();

var birthday =

new Date(1954,1,8);

var bell = new Date(2003, 0,14,12,20,0);

Date объектісі экземпляры құрылғаннан кейін, оның ішкі мәліметтерін көруге болады, оны өзгерту мүмкіндігі де бар. Ол үшін көптеген тәсілдер бар, олардың тізімі тілге арналған кітап қосымшаларында келтіріледі.

Объект тәсілі атауы (тәсіл – JavaScript терминологиясында функция) экземпляр атауынан нүктемен бөлініп жазылып тұрады.

Былай жазуға болады:

var year = bell.getYear();

year айнымалысы мәні 2003 болады.

(22)

22

Date объектісінің бірнеше қарапайым скриптерін қарастырайық.

Ағымдағы күн және уақыт 3) var now = new Date();

alert(“Бүгін:”+now.getDate()+”/”+(now.getMonth()+1)+”/”+

now.getYear()+”\n Қазір:

“+now.getHours() +”:” +now.getMinutes());

Осы кодтарды жазған кезде скрипті орындау мынадай хабарлама шығуына себепші болады.

Date ішкі объектісі және оның тәсілдері

3) Тәсіл түрі – setYear(). Жыл нөмірін тағайындайды.

Мысалы:

var d = new Date();

d.setYear(2004);

alert(d.getYear());

3) Тәсіл түрі – getMonth(). Ай нөмірі мәнін береді.

Var d = new Date(2005,1,2);

var m = d.getMonth();

alert(m);

Объект — бұл мәліметтер мен функциялар жиынынан тұратын бірыңғай конструкция немесе, JavaScript терминологиясында, қасиеттер мен тәсілдер жиыны.

Функция = тәсіл (метод).

Айнымалы = қасиет (свойства).

Инкапсуляция термині «қара жәшік» ретінде қарастырылатын объектінің ішкі құрылымын жасыру деген сөз. Объектінің қасиеттері белгілі болып саналады, яғни олар – сырттан қол жеткізуге болатын айнымалылар. Бірақ бұл функциялар қалай құрылған, олар қандай алгоритммен жұмыс істейді, ол туралы программалаушыға айтылмайды.

Программалаушы немесе объектіні тұтынушы адам объектінің қосымша ішкі функциялары мен айнымалылары бар ма, олар қол жеткізуге болатын қасиеттер мен тәсілдермен қалай байланысқан, ол жағын білмейді.

JavaScript жаңа объектілерді программалауға және олардың ішкі объектілерін өзгертуге мүмкіндік береді. Енді бірнеше ішкі объектілер жұмысын қарастырайық.

JavaScript тілінің ішкі объектілерін қарастыруды өте пайдалы болып саналатын Date объектісінен бастайық. Бұл объект күн-ай мерзімімен (датамен) және уақытпен жұмыс істеу үшін керек.

Объект экземплярын жасау үшін (Date объектісінің ғана емес, одан басқасының да) JavaScript тілінде new түйінді сөзі қолданылады:

var now = new Date();

Енді now айнымалысы Date объектісі экземпляры болып табылады

(23)

23

2) Array объектісі

Бұл объект мәліметтер жиымын (массивін) жасау үшін керек. Массив

— элементтердің реттелген жиыны. Жеке элементті көрсету оның атауы мен индексін (нөмір) көрсету арқылы орындалады. JavaScript тілінде элементтерді нөмірлеу нөлден басталады.

Массивті үш түрлі тәсілмен құруға болады:

1-тәсіл.

Item = new Array();

item[0] = “жексенбі”;

item[1] = “дүйсенбі”;

item[2] = “сейсенбі”;

item[3] = “сәрсенбі”;

2-тәсіл.

Var dayNames = new Array(«жексенбі», «дүйсенбі», «сейсенбі»,

«сәрсенбі»);

3-тәсіл.

Var item = [«жексенбі», «дүйсенбі», «сейсенбі», «сәрсенбі»];

Жиымның жеке элементтерін пайдалану үшін былай жазылады:

массив__атауы [индекс]

Төмендегі скрипт:

var dayNames = new Array(«жексенбі», «дүйсенбі», «сейсенбі»,

«сәрсенбі», «бейсенбі», «жұма», «сенбі»); alert(dayNames[0]); жұмысы нәтижесінде alert терезесіне «жексенбі» мәтіні шығады.

Кесте 3. Array объектісінің әдістері:

Array әдісі

Сипаттамасы

concat Екі жиымды бір жиымға біріктіреді. Мысалы:

a = new Array(0,1,2,3,4); //дайын мәндері бар b = new Array(5,6,7,8,9); //жиым құрады

c = a.concat(b);

join Жиымның барлық элементтерін бір жолға біріктіреді. Мысалы:

a = new Array(0,1,2,3,4);

b = a.join("-"); //"0-1-2-3-4" жолдарын қайтарады.

pop Соңғы элементті жиымнан жояды және осы элементті қайтарады.

push Жиым соңына бір не одан көп элементті қосады және соңғы қосылған элементті қайтарады.

reverse Жиымды нөлдік элемент соңғы болатындай және т.б етіп төңкереді.

shift Жиымның нөлдік элементін жояды және оны қайтарады.

(24)

24

slice Жиымның бір бөлігін ерекшелейді.

Синтаксисі: slice(start, [end]). Мысалы:

newArray = myArray.slice(0, -1);

splice Жиымға элементтер қосады және ондағыны жояды.

sort Жиым элементтерін сұрыптайды.

toString Жиымның жолдық берілу түрін қайтарады.

unshift Жиымның бас жағына бір не бірнеше элементтерді қосады.

3) Math объектісі

Math математикалық классы — математик-программисттерге тригонометриялық және логарифмдік функциялар жиынын береді. Яғни ол тұрақтылар мен әдістерді қамтитын класс. Олардың шақырылу түрі:

Math.константа Math.функция(i..)

Кесте 4. Math класының тұрақтылары:

Тұрақтыла р

Түсініктемесі E

LN10 LN2 LOG10E

LOG2E PI SQRT1_2

SQRT2

Е саны (натурал логарифмдерге негізделген)

Натурал логарифм (ln10) Натурал логарифм (ln2)

10 негізді е логарифмі (log10e) 2 негізді е логарифмі (log2e) P тұрақтысы ("пи" саны)

0,5-тің квадрат түбірін есептейді (1/2 саны) 2-нің квадрат түбірін есептейді

4)Window объектісі

Window иерархияның төбесінде орналасады. Бұл қалған объектілердің одан төмен орналасып, соның қасиеттері түрінде қарастырылатынын білдіреді. Window объектісінде браузер құжатты көрсетіп тұрған терезенің қасиеттрі мен тәсілдері де болады. Үш тәсіл бізге бұған дейін белгілі болған, олар: alert, prompt және confirm.

Window иерархияның төбесінде орналасады. Бұл қалған объектілердің одан төмен орналасып, соның қасиеттері түрінде қарастырылатынын білдіреді. Window объектісінде браузер құжатты көрсетіп тұрған терезенің қасиеттрі мен тәсілдері де болады.

Үш тәсіл бізге бұған дейін белгілі болған, олар:

alert, prompt және confirm.

Егер былай жазылса:

Window.alert ("alert функциясы – бұл window объектісінің әдісі"};

— онда браузер осы хабарламаны шығаратын қосалқы терезе ашады (суретті қ.)

Бірақ бұрын былай жазатынбыз:

(25)

25

alert("alert функциясы – бұл window объектісінің әдісі ");

Басты объект болып саналатын window объектісінің атауын жазбаса да болады.

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

var айнымалы = open();

var айнымалы = open(файл);

var айнымалы = open(файл,терезе_атауы);

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

Мұндағы:

 айнымалы — айнымалы. Ашылатын терезеге нұсқауыш;

 файл — сөз тіркесі (строка). Ашылған терезеде көрсетілетін файл аты. Егер бұл параметр берілмесе, бос терезе ашылады;

 терезе_атауы — сөз тіркесі. Терезе аты сол терезеге мәлімет шығару үшін керек (window объектісінің name қасиеті мәні);

 терезе_параметрлері — сөз тіркесі. Терезе қасиеттерін сипаттау.

Егер параметр берілмесе, келісім бойынша қасиеттер қолданылады.

Параметрлер арасындағы үтірден соң, бос орын қоймаған дұрыс, браузерлер онсыз да жұмыс істей береді.

Кесте 5. Терезе параметрлерін сипаттау

Параметр Мәні Сипаттамасы

Width Сан Пиксель, терезе ені. Минимал мәні – 100 Height Сан Пиксель, терезе биіктігі. Минимал мәні –

100

scrollbars yes, no,1, 0 Айналдыру жолағын береді

resizable yes, no,1, 0 Терезе көлемін өзгертуді көрсету үшін қажет

Menubar yes, no,1, 0 Меню өрісі бейнелетінін көрсету үшін қажет

Location yes, no,1, 0 Адрес енгізу өрісі бейнелетінін көрсету үшін қажет

Status yes, no,1, 0 Статус жолағы бейнелетінін көрсету үшін қажет

Toolbar yes, no,1, 0 Батырмалар (саймандар) тақтасы бейнелетінін көрсету үшін қажет

Мысал. Ит суреті бар dog01.jpg терезе ашу.

<HTML>

<HEAD>

<TITLE>терезе</TITLE>

</HEAD>