ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Кластар иерархиясын жазу 5 страница
РАRАМ контейнерін қолдану РАRАМ контейнерін қолдану, параметрлерді апплет ішіне және НТМL-құжатқа беруді қамтамасыз етеді. Бұл командалық жолдың әр түрлі аргументтерімен команданы шақыру болып табылады. Параметрлерді апплет ішінде алу үшін getParametr () әдісін пайдаланған жөн. АРРLЕТ контейнерінің атрибуттарынан соdе, width және height ғана міндетті болып табылады. Қалған басқа атрибуттарды (олар тік жақшаға алынған "[ ]") түсіре беруге болады. Java-программаларды өңдеу жүйелерінің көпшілігі НТМL-құжатты, дәлірек айтқанда, Java-апплеттерді тестілеу үшін олардың макеттерін генерациялайды. Бұлай мысалы үшін, IВМ- нің АDК (Аррlet Development Kit) компаниясында жасайды. аррlet шақырылған URL құжатты алу үшін, getDocumentBase және getCodeBase әдістерін қолдануға болады. Оның біріншісі құжатқа арналған адрес базасын анықтаса, екіншісі сол уақытта апплеттің базасын анықтайды. Мұндай әдістерді аррlet құжаты орналасқан берілгендермен (мәтін немесе графика) жұмыс істегенде қолданады.
Дәріс №23-24. Өзін-өзі тексеру сұрақтары немесе тесттер 1. www- беттердегі көріну мен позициялауды басқару. 2. html-беттердегі апплеттер және басқа объектілер.
Дәріс №25-26. СТИЛЬДЕРДІҢ КАСКАДТЫ КЕСТЕЛЕРІ (CSS) · Жаңа HTML – контейнерлер. · HTML контейнерлерінің қасиеттері. · Контейнерлердің қасиеті.
Жаңа HTML – контейнерлер Стильдердің каскадты кестелері HTML 3.0. спецификациясының ішінде өңделген w3c (www Consorciom) да ұсынылған.Бірақ, олар 1997жылы ғана шынайы әсер етуші навигатор болып жасалды. HTML – тілінде оларды қолдану Netscape Navigator 4.0 және Internet Explorer 4.0 версиясымен ғана қолданыла алады. Кесте негізіндегі идея өте қарапайым. 4.0 – ші версияға HTML тілі құжаттарды контейнер түріне келтіруге сүйенетін белгілеу тіліне айналды, яғни құжат дегеніміз – бұл бір біріне салынған көптеген контейнерлер жиынтығы, олардың әрқайсысының ақпаратты көрсету қасиеті бар. Көптеген контейнерлерді біртипті контейнерлер класы деп топтауға болады, мысалы, тақырыпша және параграфтар. Контейнер қасиеті – контейнер басындағы таг атрибуты негізінде саналады. Сонымен қатар, көптеген контейнерлерде HTML – дың 3.0 версиясынан бастап осы атрибуттар жинағы типтелген. Көбінесе контейнерлер әмбебап программалау тілдерінде блоктарға кіреді. Сондықтан контейнер қасиеті айнымалы ретінде интерпретациялауға болады. Программалау тілдеріндегі сияқты, мысалы Паскальда, қасиеттің жазылуын құжаттың басында арнайы секцияға жазуға болады.бұндай секциялардың бірі – каскадты стиль секциясы. Әдетте стиль STYLE контейнерінің ішінде жазылады. <style type =”text/css”> <! – стильдің жазылуы -- > < /style> Жалпы айтқанда Netscape тағы бір стиль кестесінің нотациясын қолдайды. Ол Java Script нотациясы. <style type =”text / javascript”> <! – стильдің жазылуы -- > </style> Стиль кестесін суреттегенде біз Netscape құжатын қолданамыз, бұл Internet – тің ең атақты браузері. Internet Explorer w3c спецификасын ғана қолдайды. Бірінші мысалдан бастайық. Құжаттың тақырыбында және параграфында жазылатын мәтін стильін суреттеу керек. <html> <head> <style type =”text/css”> p {color blue; font – family: times; font – size:10pt;} h1 {color: black; font – size:12pt; font – style; Arial; text – align: center;} </style> </head> <Body> <h1> Test Style Shits in Communicator </h1> <p> This is a first part of the document </body. </html> Дәл осы мысалды Java Script - нотацияда жазайық. <html> <head> <style type =”text / javascript”> Tags. p. color =”blue”; tags. p. fontFamily=”times”; tags. p. fontSize=”10pt”; Tags. p. color=”black”; Tags. h1. fontSize=”12pt”; tags. H1. fontStyle=”Arial”; Tags. textAlign=”center”; </style> </head> <body> <h1> Test Style shits in Communicator </h1> <p> This is a first part of the document </body> </html> Енді осы стильдерді тереңірек қарастырайық. Олардың қолдану облысы және оларды құжатта орналастыру амалдары, Стильдер кестесінің найда болуымен қатар тілде үш жаңа контейнер пайда болды. Олар: STYLE, LINK, SPAN. Негізінде LINK бұл жаңа таг емес, ол ескі тагтың жаңаша қолданылуы. STYLE контейнері <style type=” … ”> … </style> стильдерінің жазылу кестесін анықтау үшін қызмет жасайды. CSS спецификациясында STYLE – ды құжаттың қандай контейнерінде қолданылатыны туралы тура айтылмайды, бірақ мысалдарда HEAD контейнерінің ішінде осы контейнері жиі қолданылады. LINK контейнері стильді жазу контекстінде берілген құжатқа стильдердің жазылуымен сыртқы файлды анықтау үшін қолданылады. Мысалы, сыртқы файл келесідей стильдер жазуынан тұрсын: /* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE CSS.HTM*/ p {color: blue; font – family: times; font – size: 10pt:} h1 {color: black; font – size: 12pt; font – style: Arial; text – align: center;} /* the end of style sheets definition */ Осы стильдер жазылуын құжат тақырыбында қолдану үшін келесі тагты қолдану керек. <html> <head> <link REL=STYLESHEET TYPE =”text/css” HREF://LOCALHOST/CSS.HTM> </head> <body> The body of the document should be here. </body> </html> CSS.HTM файлындағы стильдің жазылуы STYLE контейнеріндегі жазылуымен бірдей екендігін осы мысалдан көруге болады. SPAN контейнері ағымдағы мәтін фрагментін бейнелейтін стильді анықтау үшін қолданылады және кей жағдайларда FONT контейнеріне сәйкес. Әдетте SPAN типографиялық эффектіге жету үщін қолданылады, мысалы абзацтың бастапқы әрпінен жекелеу. <HTML> <!—Author: Paul Khramtsov Date: September 19, 1997 URL: HTTP://POLYN.KIAE.SU/INTERNET/INTRO.HTML --> <HEAD> <style TYPE=”text/css”> FS.all {color: red; font-size: 24pt; font-family: times;} H1 {color: navy; text-transform: uppercase; font-size: 18pt; font-weight: bold; font-family: times;} H2 {color: navy; font-size: 14pt; font-weight: bold; font-style: italic; font-family: times;} H3 {color: navy; font-size: 10pt; font-weight: bold; font-family: times;} P {color: navy; font-size: 12pt; font-family: times; text-align: justify;} P.HELP {color: dackgreen; font-size: 10pt; font-family: times; text-align: justify;} P.LEFT {color: navy; font-size: 12pt; font-family: times; text-align: right;} </style> </HEAD> <BODY bgcolor = lightyellow> <center> <h3> Ақпаратты технологиялар орталығы </h3> <h1> Internet ақпараттық ресурсы </h1> <h3> Профессионалдар емес үшін оқу әдістемесі </h3> <h3> Храмцов П.Б</h2> <h3> Москва, 1997</h2> <hr> </center> <p><span class = FS> C </span> 1995 жылы Internet – ке 25 жыл болды. Қазіргі кезде – бұл бүкіл әлемдегі өте үлкен ақпараттық ресурс. Сонымен қатар Internet – бұл жер шарындағы ең атақты желі. 1997 жылы Internet (Internic – Internet Information Center) рамкасында халықаралық желі координация орталығының берген бағасы бойынша желіде бірнеше ондаған миллион компьютер – серверлер үнемі қосылып тұратындығы анықталған. Осы үлкен ақпараттық ресурс толығымен орталықтандырылмаған және бір де бір мемілекетке және дүние жүзінің ірі финанстық компанияларына тәуелді емес. </Body> </HTML> Берілген мысалда SPAN контейнері <p> параграфының басында тагтан кейін қолданып тұр. Бұл абзацтың бірінші әрпін ерекшелеуге мүмкіндік береді. Стильдердің жазу таблицасының жаңа контейнерінен басқа тағы жаңа атрибуттар жасалып шығарылды.
HTML контейнерлерінің қасиеттері HTML тегіндегі жаңа атрибуттарды STYLE атрибутынан бастаған дұрыс. Бұл атрибут контейнер басындағы таг ішіндегі контейнер бейнеленген стильді анықтау үшін қолданылады. <h3 style = “line-height: 24pt; font-weight: bold; color: blue”> The blue text <h3 style = “lineHeight =’24pt’; fontWeight=’bold’; color=’blue’ ”> The blue text Сонымен қатар силь класын анықтауға болады және CLASS атрибутының көмегімен қолдануға болады. <style type = “text/css”> H3.class1 {font-size: 12pt; color = blue} </style> ….. <h3.class = “class1”> This is a blue text Осы жағдайда біз үшінші дәрежелі тақырып класын андықтадық, сонымен қатар кез келген контейнерге қолданылатын класты анықтауға болады. <style type = “text/css”> all.class1 {font-size: 12pt; color = blue} </style> Класты анықтағаннан басқа ат берілетін стильді құруға болады. Аты берілген стиль берілген бір класты анықтау негізінде құрылады. <style type = “text/css”> all.class1 {font-size: 12pt; color = blue} #C1 {font-size:20;} </style> <h3.class = “class1”> This is a blue text <h3.class = “class1” id = “C1”> This is a blue text
Контейнерлердің қасиеті Бірінші топқа шрифт қасиеті жатады Font-size, font-family, font-weight, font-style Екінші топқа мәтін қасиеті жатады Line-height, text-decoration, text-transform, text-align, text-indent Үшінші топқа мәтін блогының қасиеті жатады margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color Төртінші топқа фон түсін және текст түсін бейнелеуіштер құрастырады: color, background-image, background-color. Сонымен қатар, тізім элементтерін пулькалар типін және HTML-белгі элементтерінің басқа қасиеттер қатарын анықтайтын қасиеттері бар болады.
Дәріс №25-26. Өзін-өзі тексеру сұрақтары немесе тесттер 1. Www-беттерді ұсыну және ұстануды бөлу технологиясы.CSS. 2. Стильдің күрделі кестелері. Селекторлар, қасиеттер, қасиеттің мәні. Псевдоклассы.
Дәріс №27-28. WEB –ТАРМАҚ БЕТТЕРІН КӨРУДІ БАСҚАРУ. JAVASCRIPT · JavaScript объекттері - Navigator'а объекттері модельдері · Кластар иерархиясын жазу
JavaScript объекттері - Navigator'а объекттері модельдері Қазіргі заманғы гипермәтіндік ақпараттық жүйелерді бірнеше компоненттердің бірігуі түрінде елестетуге болады: гипермәтіндік объектілерді сақтау жүйесі, гипермәтіндік объектілерді бейнелеу жүйесі, гипермәтіндік объектіні дайындау жүйесі және гипермәтіндік объектіні көруді программалау жүйесі. Осы көзқарастың арқасында World Wide Web 1996 жылы ғана аяқталған және функционалды толық түрін алды. Ең бірінші болып сақтау және көру жүйесі жасалды (1989-1991 жж) және бұлар қазіргі кезде дамуын жалғастырып келеді. 1990 жылдың аяғында бірінші рет құжатты дайындау жүйесі пайда болды. Соңында 1995 жылы көру сценарийін басқару тілдері бірінші рет ұсынылды. Деректер базасының гипермәтінді көру процедураларының программалануы Netscape, Microsoft немесе Sun – ң жаңалықтары емес. Бірнеше дәрежедегі барлық локальды гипермәтіндік жүйелер практика жүзінде гипермәтіндік объектіні манипуляция жасау ететін программалау құралын қамтиды. Кей жағдайларда барлық гипермәтіндік деректер базасы үлкен бір программа ретінде ұсынылуы мүмкін, бұндағы гипермәтіндік тармақ ол – программалық модульдер, ал олалдың арасындағы байланыс – бір модульден екіншісіне беруді басқару, Осындай жақын келу жағдайы традициялық статистикалық белгінің алдында белгілі гипермәтіндік желіні орнатудың ыңғайлағы, деректер базасының фрагментін айналдыру программасын ойлап табу қабілеті, белгілі қарапайым компоненттерден гипермәтіндік объектіні генерациялау. Динамикалық объектіні статистикалықтан алу өте оңай, көру рограммасының бар болу жағдайына байланысты жүйеде гипермәтіндік деректер базасын интерактивті режимде көру пакеттік режимге ауысуы мүмкін. Бұнда оператор қызметі программа командаларымен ауысады. Гипермәтіндік беттерді көру программасын скрипт деп атайды. Sh типті командалық интерпретатор үшін жазылған. Бұрындағыдай локальді жүйеде World Wide Web гипермәтіндік құжатты көру программалауынжа екі қадам болады: скриптті көруді программасын жасау немесе байт – код компиляциясы. Біріші қадам World Wide Web дәстүрін жалғастырады, гипермәтіндік бетті өңдеу үшін қарапайым текстік редактор керек және гипермәтіндік құжаттың өзі оператор адамға оңай оқылуы керек. Екінші қадам программаны орындау эффектісін арттырады және оның қауіпсіздігін қамтамасыз етеді. Бірінші қадам сияқты, екінші қадам да программалауға объектілі – бағытталған қадамға жүгінеді. Байт – код немесе оны мобильді – код деп те атайды. Олар Java программалау технологиясының контексінде көп жазылған, сондықтан барлық ойымызды скриптке аударайық, нақтырақ айтқанда JavaScript тілінде жазылған скрипт туралы. Navigator объектісінің – JavaScript объектісінің моделі. JavaScript – ң идеясы өте қарапайым. JavaScript программасында орындалатын операциялар жақсы танымал және түсінікті объектілер әрекетін бейнелейді, Олар Netscape Navigator прораммасымен жұмыс істеу облысы және HTML тілі контейнерінің элементі болып табылады. JavaScript – ң объектілі – бағытталуы осымен тоқталмайды. Қасиеттер жиынтығы бар және объектілер функциясының жиынтығынан тұратын объектілер ғана бар. Ақырғылары әдіс деп аталады. Әдістерден басқа функциялар да бар, олар дәстүрлі программалау тілінің функцияларына өте ұқсас және ол стандартты математикалық типпен жұмыс істеуге немесе программаны орындау процесін басқаруға мүмкіндік береді. Сонымен қатар JavaScript – те программалық үзілу аналогі деген оқиға бар. Осы оқиғалар World Wide Web – те жұмыс істеуге бағытталған, мысалы, Navigator жұмыс істеу облысына бетті жүктеу немесе гипермәтіндік сілтемені таңдау. Оқиғаларды қолдана отырып гипермәтіндік бет және программа авторы динамикалық объектіні көруді ұйымдастыра алады, мысалы, жүгіртпелі жол немесе көптерезелі интерфейсті басқару.
Кластар иерархиясын жазу Барлық JavaScript объектісінің құрылуы Navigator жұмыс істеу облысынан бастау алады, оларды келесідей иерархия түрінде көруге болады,
Қолдануға осы объект класынан басқа өзінің жеке объектісін құруға болады. Бірақ әдетте көптеген программа осы класс жүйесін қолданады және жаңасын құрмайды.
Дәріс №27-28. Өзін-өзі тексеру сұрақтары немесе тесттер 1. JavaScript тілі. Синтаксисі. Функциялары, объекттер. 2. JavaScript тілі. Құжаттың объекті моделі
Дәріс №29-30. ОБЪЕКТІЛЕР ӘДІСІ ЖӘНЕ ОБЪЕКТІЛЕР ҚАСИЕТІ. ЕСЕПТЕУ АҒЫМЫН БАСҚАРУ · Объектілер әдісі және объектілер қасиеті · Оқиғалар · Массивтер · Графика
Объектілер әдісі және объектілер қасиеті Осы кластардың әрқайсысы әдістер кластарының объектісін басқару функциясынан тұрады. Осы әдістердің ең бастысы объектілердің мәндерін тағайындайтындар болып табылады. Әдетте бұлар меншіктеу операциясы арқылы бөлінеді. Бірақ қарапайым программалау тіліндегі операторлардың типтері JavaScript – те де қолданылады (+,-,*, /, %, >>,<<, +=, -=,...). Сонымен қатар "+" қосу операторы жолмен жұмыс істегенде жолдың соңына тағы жаңа жолды қосуды білдіреді. s = "string1"+"string2" JavaScript – те сандар және стандартты класстарды жазу операцияларынан басқа есептеу ағымын басқару командалары да бар. break – циклдан шығу; while(i < 6) { if(i==3) break; } continue –цикл соңына көшу; while(i < 6) { if(i==3) continue; } for - цикл; for(i=0;i<9;i++) {... } for – объектіні меншіктеу операторы; for(i in obj) { str = obj[i] } if..else - шартты оператор; if(i>0) {... } else {... } wile - шартты цикл; wile(j==k) { j++; k--; } var – айнымалыларды хабарлайтын оператор. var kuku = "kuku" Айнымалылар типі оған меншіктелетін мәнмен анықталады. Осы көрсетілген операторлар JavaScript – ң операторларының толық жиынтығы емес, бірақ осы операторлар арқылы практикалық жұмыстарды орындауға болады.
Оқиғалар Тілдің маңызды элементі оқиға болып табылады. Программист оқиғаны скрипттің программалық кодының белгілі бір бөлігін орындау үшін қолданады. Ең жиі қолданылатын амалдардың бірі – Navigator беттерін жүктеу кезінде анықталған іс - әрекетті орындау. Барлық оқиғаларды толық санамай – ақ олардың ішіндегі көп қолданылатынын ғана қарастырайық. Netscape Navigator 3.0 пайда болуы және JavaScript 1.1 версиясының пайда болуы Website – ы көру сценариін басқару мүмкіндіктерін бақылауды жалғастыруға мүмкіндік берді. Тілдің жаңа версияларында мыналар қарастырылған: JavaScript және Java арасындағы байланыс мүмкіндігі, plug-ins орнатылғанын анықтау, объектінің (Area, Function, Image) жаңа типтері анықталған және басқа да ерекшеліктер. Құрастырушылардың ойынша осылар JavaScript программасының қызметін арттырады.
Массивтер Біз қарастыратын жаңа объектілердің бірінші типі массивтер болып табылады. “Array” типі JavaScript 1.1- де Navigator мен бейнеленетін әртүрлі объектілерді манипуляция жасау ету үшін келтірілген. Бұл берілген Website бетінің барлық гипермәтіндік сілтемелерінің тізімі, берілген беттің барлық суретінің тізімі, берілген беттің барлық applet – ң тізімі, форманың барлық элементтерінің тізімі. Array() конструкторын қолдану арқылы қолданушы өзінің жеке массивін құра алады. Бұл келесідей әрекетпен іске асады. new_array = new Array() new_array5 = new Array(5) colors = new Array ("red","white","blue") Массивтің өлшемі динамикалық өзгеруі мүмкін. Ең бірінші массивті анықтау керек, содан барып оның бір элементіне мән меншіктеуге болады, Осы мән меншіктелгеннен соң барып, массивтің өлшемі де өзгереді. colors = new Array() colors[5] = "red" Осы жағдайда массив 6 элементтен тұрады, яғни массивтің бірінші элементі 0 индексінен басталады. Массив үшін үш әдіс анықталған: join, reverse, sort. Join символдар жолында массив элементтерін біріктіреді. Бұл әдісте аргумент ретінде бөлгіш көрсетіледі. colors = new Array("red","white","blue") string = acolors.join("+") Символдар жолындағы string меншіктеу мәнін қабылдағанда біз келесі жолды аламыз. string = "red + white + blue" Басқа әдіс reverse – бұл массив элементтерінің ретін өзгертеді, ал sort әдісі элементтерді өсуі бойынша реттейді. Массивтерде екі қасиет бар: length және prototype. Length – массивтің элементтерінің санын анықтайды. Егер массивтің элементтеріне бірнеше ескішіл операция орындау керек болса, онда мына цикл типтерін қолдануға болады. color = new Array("red","white","blue") n = 0 while(n!= colors.length) {.... цикл денесінің операторы...} Prototype қасиеті массив объектісіне қасиет қосуға мүмкіндік береді.
$$$002-010-002$3.2.15.4 Графика Navigator 3.0 – ге дейін JavaScript – те Image типіндегі құрылған объектілер қолданып келеді. Тілдің жаңа версиясында осы типті объектілер үшін конструкторлар пайда болады. new_image = new Image() new_image = new Image (width,height) Әдетте мультипликация жасау мақсаты үшін графикалық объектілер массивін жасайды, одан кейін олар бірінен кейін бірі орындалады. img_array = new Array() img_array[0] = new Image(50,100) img_array[1] = new Image(50,100) .... img_array[99] = new Image(50,100) Image объектісінің 10 қасиеті бар, оның ішінде ең маңыздысы src.img_array массив элементіне нақты бір суретті меншіктеу үшін келесі командалар тізбегін орындау керек. img_array[0].src = "image1.gif" img_array[1].src = "image2.gif" ... img_array[99].src = "image100.gif" Осы жағдайда атты меншіктеу цикілінде қолдануға болар еді, онда олар константадан және индекстік айнымалының мәнінен тұруы мүмкін. Тілдің жаңа версиясында Image типі объектіні HTML тегінде IMG деп атын өзгертуге болады. Сонымен қатар егер Image форманың ішінде қолданылса, онда ол осы форманың қасиеті болатынын ескеру керек. Бұл келесі графикалық объектілер үшін әртүрлі құрама аттар қолдану керек дегенді білдіреді. <img name=car src=car.gif> <--- Құжатқа қоса салынған объект document.car.src = "car1.gif"
<form name=kuku> <img name=car src=car.gif> <-- Құжатқа қоса салынған объект </form> document.kuku.car.src = "car1.gif" Бірақ скрипттерді мысалдарда қолданғанда берілген бетте барлық графикалық объектілердің массивінде индекс бойынша Image – ге көп көңіл бөлетіні жиі кездеседі. Мысалы біздің объект беттегі екінші Image болсын, ол форманың ішінде болмаса, оның сыртында болса да бәрібір, оған әрқашан индекс бойынша қарауға болады. document.images[1].src = "car1.gif" Енді осы мысалды Image массивімен кеңейте отырып, біз мультипликациясы бар құжат құрамыз. <HTML> <HEAD> <SCRIPT> function multi_pulti() { img_array = new Array() img_array[0] = new Image(50,100) .... img_array[99] = new Image(50,100) img_array[0].src = "image1.gif" ... img_array[99].src = "image100.gif" n=0 while(n==0) { document.images[0].src = img_array[0].src ... } } </SCRIPT> </head> <body onLoad="multi_pulti()"> <img src=image1.gif> </body> </html>
Дәріс №29-30. Өзін-өзі тексеру сұрақтары немесе тесттер 1. Web-сервер және браузердің өзара байланыс принциптері. 2.Клиент – сервер қатынасының негізі. 3. Жоғары деңгейлі протоколдар.
3. ПРАКТИКАЛЫҚ ЖӘНЕ ЛАБОРАТОРИЯЛЫҚ САБАҚТАР
№1 зертханалық сабақ Қарапайым HTML файлдарын құру
Зертханалық сабаққа арналған оқу-әдістемелік нұсқаулар №1 Сабақ мақсаты: · Тэгтермен жұмыс істеуді үйрену. · Құжатта мәтіндерді орналастыруды үйрену.
Сабақтан алған білімді тексеру тапсырмалары №1 Тапсырма 1. Қарапайым HTML файлын құру. 1. Өз каталогыңызда құрастырылған Web- бетті сақтау үшін KURS бумасын құрыңыз. 2. Блокнот (Notepad) программасын қосыңыз. 3. Ашылған редактор терезеде қарапайым HTML файлын жазыңыз: Не нашли, что искали? Воспользуйтесь поиском:
|