9.2. Web-технологиялар: HTTP, DHTML, CSS, JavaScript

Электрондық пошта мекенжайымен қатар (e-mail), интернеттегі мекенжайлар www.mvd.ru (URL) – www жүйесіндегі сервер мекенжайлары. Интернетке қосылып, көрсетілген мекенжайға сілтеме жасай отырып,  компьютер экранында бастапқы бетті (Web-бет) білдіретін алғашқы құжатты көруге болады. Онда дыбыстық және бейне үзінділері бар басқа құжаттарға, беттерге, графикалық элементтерге (суреттер мен фотосуреттер) сілтемелер болуы мүмкін. Мұнда web парағы интернетке қосылған компьютерде сақталған құжатқа дейінгі түрі екенін түсінеміз. Бұл құжат арнайы форматқа ие (HTML форматы).

Веб беттерді сақтайтын интернетке қосылған компьютер физикалық веб-сервер немесе веб-түйін деп аталады. Сервердегі веб-беттер мазмұн ерекшеліктеріне сәйкес қалталарға біріктіріледі. Мұндай қалталардың жиынтығы виртуалды Веб серверді немесе веб-сайтты құрайды (олар жай «сайт» дейді)

              HTTP (Hyper Text Transfer Protocol – RFC 1945, RFC 2616) – гипермәтінді жіберудегі қолданбалы деңгейдегі хаттама. HTTP орталық нысаны тұтынушы сұранысындағы URL көрсететін қор. Әдетте мұндай қорларға сервердегі сақтаулы файлдар жатады. Хаттаманың ерекшелігі – сұраныс пен жауапты бір қорды түрлі параметрлер арқылы көрсете алу мүмкіндігі: форматтау, кодтау тілі және т.б. хабарламаны кодтау мүмкіндігін көрсетуінің мүмкін болуы арқасында тұтынушы және сервер екіжақты мәліметтермен алмаса алады, алғашында бұл хаттама тек символды ақпаратты жіберуге ғана арналған. Мәліметтер символ түрінде жадыдан көп орын алатындықтан, хабарламалар байланыс арнасында қосымша жүктейтіндіктен бұл қорды жай ысырап ету болып көрінеді, дегенмен бұл форматтың өзіндік артықшылықтары да бар. Желі арқылы берілетін хабарламаларды оқу жеңіл, алынған мәліметтерді сараптай келе, жүйелік әкімші қатені тез тауып, оны түзете алады. Қажетті қосымша рөлін адам кейде өзара байланысты қосымша қызметін қажетті форманы қолмен енгізу арқылы жүзеге асыра алады.

HTTP басқа хаттамалармен салыстырғанда, жадысыз хаттама болып табылады. Бұл алдыңғы клиент сұраныстарын сақтамайтынын көрсетеді. HTTP қолданатын компоненттер жеке өз алдына соңғы сұраныс пен жауапқа қатысты ақпаратты сақтай алады. Мысалы, сұраныс жіберетін тұтынушылық Web қосымша жауаптардың кешіктірілуін қадағалай алады, ал web-сервер ІР-адресті және клиенттердің соңғы сұраныстарының атауларын сақтай алады.

HTTP хаттамасымен жұмыс істейтін барлық бағдарламалық қамтамасыз ету үш негізгі категорияға бөлуге болады(сурет 9.3):

– Серверлер – ақпаратты сақтау және өңдеу қызметтерін жеткізуші (сұраныстарды өңдеу).

– Тұтынушы – сервер қызметтерін пайдаланушылар (сұраныс жіберу).

– Транспорттық қызмет жұмыстарын қолдау мақсатындағы Проксисерверлер.

                         suret_9.3.png

                                                            Сурет 9.3 HTTP-ның классикалық схемасы

Негізгі тұтынушы браузерлер, мысалы: Internet Explorer, Opera, Mozilla Firefox, Netscape Navigator және басқалары. Кеңінен таралған Web-серверлер: Internet Information Services (IIS), Apache. Анағұрлым кеңінен таралған прокси-серверлер: Squid, UserGate, Multiproxy, Naviscope. HTTP-сеансының «классикалық» схемасы мынадай.

1. TCP-қосылуды орнату.

2. Тұтынушы сұранысы.

3. Сервер жауабы.

4. TCP- қосылудың үзілуі.

Осылайша, тұтынушы серверге сұраныс жіберіп, жауап алады, сонымен өзара әрекеттесу тоқтайды. Әдетте тұтынушы сұранысы HTML құжатты немесе қандай да бір қорды жіберуді талап ету болып табылады, ал сервердің жауабында осы қордың коды болуы тиіс. Тұтынушы серверге жіберетін HTTP – сұраныс құрамына келесі компоненттер кіреді.

– Қалып жолы (кейде оны белгілеу үшін жол статус немесе сұраныс жолы дейді).

– Тақырып аты өрісі.

– Бос жол.

– Сұраныс бітімі.

Қалып жолын атау жолағымен бірге кейде сұраныс атауы деп те атайды.

HTML (ағылшш. HyperText Markup Language) – World Wide Web-те веб-беттерді құру және жариялау үшін қабылданған тіл. HTML авторларға қаражат ұсынады:

- Мәтінді пішімдеу, яғни веб құжаттарға тақырыптарды, мәтінді, кестелерді, тізімдерді, фотосуреттерді және т. б. қосу;

- гиперсілтемені тінтуірді басу арқылы басқа веб беттерге өту үшін гиперсілтемелерді кірістіру;

- қашықтағы қызметтермен транзакциялар үшін формалар құру және толтыру, мысалы, ақпарат іздеу, билеттерді брондау, тауарларға тапсырыс беру және т. б.;

- бейне, дыбыс және басқа да сыртқы нысандарды веб құжаттарға тікелей қосу.

Шын мәнінде, қазіргі заманғы веб бет үш тілдік құрал арқылы қалыптасады:

- HTML тілі құжаттың логикалық құрылымын (тақырыптар, абзацтар, графикалық кескіндер және басқа нысандар) көрсету үшін қолданылады (сурет 9.4);

- CSS каскадтық стильдер тілі құжатты көрсету тәсілін (мәтін мен фон түстері, қаріптер, беттегі жеке нысандарды туралау және орналастыру тәсілдері және т. б.) көрсету үшін қолданылады;

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

                                    suret_9.4.png

Сурет 9.4 HTML технологиясы

Бұл жағдайда html құжаты веб беттің қалған компоненттері орналастырылатын орта болып табылады.

Қарапайым html құжатының мысалын келтірейік:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

                               <title> Менің алғашқы құжатым</title>

</head>

<body>

                               <p>Бұл html құжат.</p>

</body>

</html>

Мұнда «Бұл html құжаты» сияқты пайдаланушыға арналған ақпаратпен бірге басқару құрылымдары бар, олар тегтер деп аталады, олар бұрыштық жақшалармен қоршалған.

Динамикалық HTML немесе DHTML – интерактивті веб-сайтты құру тәсілі, ол статикалық HTML белгілеу тілін, ендірілген (және Клиент жағында орындалатын) JavaScript сценарий тілін, CSS (каскадты стиль кестелері) және DOM (Document Object Model - құжаттың объектілік моделі) тіркесімін қолданады.

Оны веб-браузерде қосымшаны құру үшін пайдалануға болады: мысалы, қарапайым навигация үшін немесе формалардың интерактивтілігін беру үшін. DHTML элементтерді экранда динамикалық түрде сүйреу үшін пайдаланылуы мүмкін. Ол сондай-ақ браузерге негізделген бейне ойындарды жасау құралы ретінде қызмет ете алады.

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

Ең алдымен, екі ұғымды – пішімдеу мен дизайнды ажырату қажет. Бұл жерде MS Word мәтіндік редакторының мысалына жүгінген жөн. Ол редакторлардың WYSIWYG класына жатады (what you see is what you get);  орналасу және көру процестері бір бөлікке біріктірілгенін білдіреді. Керісінше, LaTeX-тегі орналасу көріністен бөлек: алдымен автор таңбалау командаларын қолдана отырып, құжатты орналастырады, содан кейін оны таратады және нәтижені қарайды.

90-жылдардың басында веб жасаушылар пішімдеуді дизайннан ажырату қажет екенін түсінді. Нәтижесінде CSS стильдерінің каскадтық кестелері жасалды.

CSS – белгілеу тілін қолдана отырып жазылған құжаттың сыртқы түрін сипаттайтын ресми тіл. Әдетте, мұндай тілдер HTML және XML болып табылады.

CSS (Cascading Style Sheets - стильдердің каскадты кестесі) – белгілеу тілі арқылы жазылған құжаттың сыртқы келбетін сипаттау технологиясы. Көбінесе HTML және XHTML форматындағы Web-парақшаларды безендіру құралы ретінде қолданылады, сонымен қатар XML, SVG және XUL форматындағы құжаттармен де қолданыла береді.

«Стильдердің каскадты кестесі» терминін 1994 жылы Хокон Виум Ли ұсынған. Ол Берт Боспен біріге отырып CSS-ті дамытуға атсалысқан.

Web-парақша құрушылар гүлдер, шрифтер, құжат көрінісіндегі өзге де аспектілерді орнату үшін CSS-ті пайдаланады. CSS-ті құрудағы басты мақсат құжат көрінісі (CSS-ке жазылған) мен мазмұнды (HTML немесе басқа белгілеу тілінде жазылған) екіге бөлу болған. Бұл бөлініс құжатқа қолжетімділікті арттырады, оның көрінісін кеңірек басқару мүмкіндігін береді, сонымен қатар мазмұн құрылымындағы қайталанушылық пен қиындықтарды азайтады.

Сондай-ақ CSS бір құжатты түрлі стиль арқылы және шығару әдістері арқылы көрсетуге мүмкіндік береді, мысалы, экрандағы көрініс, баспа, дауыстап оқу (арнайы дауыстық браузер немесе экраннан оқу бағдарламасы).

CSS стандартын анағұрлым толығырақ ұстанатын браузерлер Gecko (Mozilla Firefox және т.б.) және WebKit (Arora, Google Chrome, Safari), сондай-ақ Opera браузері болып табылады.

Internet Explorer-ге келсек, оның тек 8-ші нұсқасы ғана толығымен CSS 2.1-ді және жекелеген түрде – CSS3 қолдайды.

CSS қолданудың артықшылықтары:

– Қараудың түрлі құрылғылары үшін парақшаның бірнеше дизайны;

– сайт парақшасының жүктелу уақытын мәліметтерді ұсыну ережелерін жеке CSS-файлға көшіру есебінен азайту;

– дизайнның жалғаспалы өзгеруінің қарапайымдылығы;

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

CSS қолданудың кемшіліктері:

– түрлі браузерлердегі беттеудің түрлі көрінісі (әсіресе ескі), олар CSS-тің бірдей мәліметтерін түрліше түсіндіреді;

– көбінесе тек бір CSS файлдың өзін түзету ғана емес, HTML тегтері және CSS селекторларымен күрделі әрі қиын байланысқан серверлік кодтарды да алмастыру қажеттілігінің болуы.

JavaScript (LiveScript атауы алғашында оны құрушысының есімімен Брендан Эйхпен атаған, кейін Netscape Navigator браузері құрамында таралған) бағдарламалаудың нысанды бағыттық скриптік тілі жұртшылыққа алғаш рет 1995 жылы таныстырылды.

Әдетте қосымшалардың нысандары үшін бағдарламалық рұқсат болуы үшін кірістірілген тіл ретінде қолданылады. Ол браузерлерде Web- парақшаларға белсенділік беру үшін сценарийлер тілі ретінде кеңінен қолданысқа түскен.

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

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

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

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

JavaScript құрылымы бойынша бөлшектері бір-бірінен елеулі түрде ерекшеленетін үш бөлікке ұқсайды деуге болады:

– ядро (ECMAScript);

– браузердің нысандық моделі (Browser Object Model или BOM);

– құжаттың нысандық моделі (Document Object Model или DOM).

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

Парақшаға JavaScript кодын қосу үшін, <script></script> тегтерін қолдануға болады.

JavaScript-ті қолдану саласы өте кең:

– Web-қосымшалардың тұтынушы бөлігінде;

– AJAX;

– Comet технологиясында;

– Браузерлердегі операциялық жүйелерде;

– браузер белгілерінде орналастырылатын шағын бағдарламалар құру үшін (Букмарклеттер) қолданылады;

– JavaScript-те жазылған қосымшалар Java 6 және одан кейінгі шыққан нұсқаларында да қолданатын серверлерде жүзеге асырыла береді, сервер жағында JavaScript-ті өңдеуге болатын серверлік қосымшалар түзуге мүмкіндік береді;

 – мобильді қосымшаларды өңдеу тілі ретінде (Mojo SDK платформасында Palm web OS-те);

–  виджеттерді жүзеге асыру үшін, сондай-ақ виджеттердің тетіктері үшін (Apple_Dashboard, Microsoft Gadgets, Google Desktop Gadgets, Klipfolio Dashboard);

– қолданбалы бағдарламалық қамтамасыз етуді жазу үшін (Mozilla Firefox шығыс кодының 57% JavaScript-те жазылған);

– қосымша нысандарының рұқсат беретін скриптік тілі ретінде;

– ағымдық әрекеттерді автоматты түрде жүзеге асыру үшін кеңселік қосымшаларда, макростарды жазу, Web-қызмет тұрғысынан рұқсаттың берілуін ұйымдастыру;

– Excel Services 2010-да қосымшаларды бағдарламалаудың екі жаңа интерфейсі қосылды: REST API және JavaScript Object Model (JSOM).