Интерактивті және анимациялық веб-сайттарды кодтау
Dynamic HTML
Интерактивті сайттар жасау: DHTML негіздері, JavaScript, HTML және стилдердің үйлесімі. Сайт бетін өзгерту, анимация және динамикалық мазмұн туралы біліңіз.
Ағылшыншамен салыстырыңыз: абзацты басыңыз — түпнұсқа терезеде ашылады. Абзац астындағы EN түймесі оны мәтін ішінде көрсетеді.
Мазмұны
Кіріспе
Интерактивті немесе анимациялық веб-сайттарды кодтау
Coding interactive or animated websites
Динамикалық HTML немесе DHTML – бұл кейбір браузер әзірлеушілері HTML, стильдік кестелер және клиенттік скрипттердің (JavaScript, VBScript немесе басқа қолдау көрсетілетін скрипттер) үйлесімін, интерактивті және анимациялық құжаттар жасауға мүмкіндік беретін сипаттау үшін қолданған термин. DHTML қолданбасын Microsoft 1997 жылы Internet Explorer 4 нұсқасымен енгізді. Сенбеуге болатын дерек көзі: мерзімі – 2022 жылдың қарашасы.
Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client side scripts (JavaScript, VBScript, or any other supported scripts) that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. Unreliable source: date=November 2022
DHTML скрипт тілдеріне веб-беттің анықтама тіліндегі айнымалыларды өзгертуге мүмкіндік береді, бұл өз кезегінде бет толық жүктелгеннен кейін және қарау барысында HTML беттің мазмұнының көрінісі мен функционалдығына әсер етеді. Осылайша, DHTML-дің динамикалық сипаты – бетті қарау кезінде жұмыс істеу қабілеті, әрбір жүктелуде бірегей бет жасау емес. Керісінше, динамикалық веб-бет – кең ұғым, ол әрбір пайдаланушы үшін, жүктелу оқиғасы үшін немесе нақты айнымалы мәндері үшін әртүрлі құрылған кез келген веб-бетті қамтиды. Бұл клиенттік скрипттермен (мысалы, PHP, Python, JSP немесе ASP.NET) және серверлік скрипттермен құрылған беттерді қамтиды, онда веб-сервер мазмұнды клиентке жібермес бұрын жасайды. DHTML – Ajax-тың алдағысы болып табылады және DHTML беттері әлі де сұрау/қайта жүктеу негізінде жұмыс істейді. DHTML моделінде бет жүктелгеннен кейін клиент пен сервер арасында өзара әрекеттесу болмауы мүмкін; барлық өңдеу клиенттік жағында жүзеге асырылады. Керісінше, Ajax DHTML мүмкіндіктерін кеңейтеді, бетке қосымша әрекеттерді орындау үшін серверге желілік сұраулар (немесе «қосалқы сұраулар») жіберуге мүмкіндік береді. Мысалы, егер бетте бірнеше түймешелер болса, таза DHTML тәсілі барлық түймешелердің мазмұнын жүктейді, содан кейін тек белсенді түймешені динамикалық түрде көрсетеді, ал AJAX тек қажет болған кезде әр түймешені жүктей алады.
DHTML allows scripting languages to change variables in a web page's definition language, which in turn affect the look and function of otherwise "static" HTML page content after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. By contrast, a dynamic web page is a broader concept, covering any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client side scripting and ones created by server side scripting (such as PHP, Python, JSP or ASP. NET) where the web server generates content before sending it to the client. DHTML is the predecessor of Ajax and DHTML pages are still request/reload based. Under the DHTML model, there may not be any interaction between the client and server after the page is loaded; all processing happens on the client side. By contrast, Ajax extends features of DHTML to allow the page to initiate network requests (or 'subrequest') to the server even after page load to perform additional actions. For example, if there are multiple tabs on a page, the pure DHTML approach would load the contents of all tabs and then dynamically display only the one that is active, while AJAX could load each tab only when it is really needed.
Қолданылуы
DHTML авторларға өз беттерімен алуы қиын эффектілерді қосуға мүмкіндік береді, бұл құжат объектісінің моделін (DOM) және бет стилін өзгерту арқылы жүзеге асырылады. HTML, CSS және JavaScript комбинациясы мынадай мүмкіндіктерді ұсынады:
DHTML allows authors to add effects to their pages that are otherwise difficult to achieve, by changing the Document Object Model (DOM) and page style. The combination of HTML, CSS, and JavaScript offers ways to:
Құжатта мәтін мен суреттерді анимациялау. Соңғы жаңалықтар, қор нарығының көрсеткіштері немесе басқа да деректермен мазмұнын автоматты түрде жаңартатын тикер немесе басқа да динамикалық дисплейді енгізу. Пайдаланушының енгізген деректерін жинау үшін нысанды пайдалану, содан кейін оларды өңдеу, тексеру және деректерді серверге қайта жібермей-ақ жауап беру. Ауыстыруға арналған түймелерді немесе ашылмалы мәзірлерді қосу. Кем қолданылатын мүмкіндік – браузердегі әрекеттік ойындарды жасау. 1990 жылдардың соңы мен 2000 жылдардың басында DHTML арқылы көптеген ойындар жасалғанмен, браузерлер арасындағы айырмашылықтар оны қиынға айналдырды: ойындардың бірнеше платформада жұмыс істеуі үшін көптеген техникалық әдістер кодта іске асырылуы керек болды. Содан бері браузерлер веб-стандарттарға қарай бірікті, бұл DHTML ойындарының дизайнын тиімді етті. Бұл ойындарды барлық негізгі браузерлерде, сондай-ақ кіріктірілген браузер контекстерін қолдайтын десктоптық және мобильдік қолданбаларда ойнауға болады. "DHTML" термині соңғы жылдары қолданыстан шығып қалды, себебі ол әртүрлі веб-браузерлер арасында жақсы жұмыс істемейтін тәжірибелермен және конвенциялармен байланысты болды. Кеңейтілген DOM қолжетімділігімен DHTML қолдауы Internet Explorer 4.0 нұсқасымен енгізілді. Netscape Navigator 4.0 нұсқасында қарапайым динамикалық жүйе болғанымен, барлық HTML элементтері DOM-да көрсетілмеген. DHTML стильді әдістер кеңінен таралған кезде, технологияларға қолдау деңгейінің браузерлер арасындағы өзгешелігі оларды жасау және түзетуді қиындатты. Internet Explorer 5.0+, Mozilla Firefox 2.0+ және Opera 7.0+ ECMAScript-тен мұра етілген ортақ DOM-ді қабылдаған кезде әзірлеу оңайлады. Кейін jQuery сияқты JavaScript кітапханалары браузерлер арасындағы DOM манипуляциясының күнделікті қиындықтарын жойды, бірақ браузерлер арасындағы жақсырақ стандарттарға сәйкестік бұл қажеттілікті азайтты.
Animate text and images in their document. Embed a ticker or other dynamic display that automatically refreshes its content with the latest news, stock quotes, or other data. Use a form to capture user input, and then process, verify and respond to that data without having to send data back to the server. Include rollover buttons or drop down menus. A less common use is to create browser based action games. Although a number of games were created using DHTML during the late 1990s and early 2000s, differences between browsers made this difficult: many techniques had to be implemented in code to enable the games to work on multiple platforms. Browsers have since then converged toward web standards, which has made the design of DHTML games more viable. Those games can be played on all major browsers and in desktop and device applications that support embedded browser contexts. The term "DHTML" has fallen out of use in recent years as it was associated with practices and conventions that tended to not work well between various web browsers. DHTML support with extensive DOM access was introduced with Internet Explorer 4.0. Although there was a basic dynamic system with Netscape Navigator 4.0, not all HTML elements were represented in the DOM. When DHTML style techniques became widespread, varying degrees of support among web browsers for the technologies involved made them difficult to develop and debug. Development became easier when Internet Explorer 5.0+, Mozilla Firefox 2.0+, and Opera 7.0+ adopted a shared DOM inherited from ECMAScript. Later, JavaScript libraries such as jQuery abstracted away many of the day to day difficulties in cross browser DOM manipulation, though better standards compliance among browsers has reduced the need for this.
Құжат объектісінің үлгісі
DHTML – өзі жеке технология емес, ол үш байланысты және бір-бірін толықтыратын технологияның нәтижесі: HTML, каскадты стильдер тілі (CSS) және JavaScript. Скрипттер мен компоненттерге HTML және CSS мүмкіндіктеріне қол жеткізу үшін құжаттың мазмұны Document Object Model (DOM) деп аталатын бағдарламалау моделіндегі нысандар ретінде ұсынылады. DOM API – DHTML-дің негізі, ол құжаттағы барлық нәрсеге қол жеткізуге және оны өңдеуге мүмкіндік беретін құрылымдалған интерфейс ұсынады. Құжаттағы HTML элементтері жеке нысандардың иерархиялық ағашы түрінде қолжетімді, бұл элементтің және оның атрибуттарын қасиеттерді оқу және орнату арқылы, сондай-ақ әдістерді шақыру арқылы қарастыруға және өзгертуге мүмкіндік береді. Элементтер арасындағы мәтін де DOM қасиеттері мен әдістері арқылы қолжетімді. DOM сонымен қатар пайдаланушының перне басуы және тінтырту сияқты әрекеттеріне де қол жеткізуді қамтамасыз етеді. Осы және басқа да оқиғаларды оқиғаларды басқару функциялары мен процедураларын жасау арқылы ұстап алып, өңдеуге болады. Оқиғаларды басқарушы белгілі бір оқиға орын алған сайын басқаруды алады және құжатты өзгерту үшін DOM-ды пайдалануды қоса алғанда, кез келген қажетті әрекетті орындай алады.
DHTML is not a technology in and of itself; rather, it is the product of three related and complementary technologies: HTML, Cascading Style Sheets (CSS), and JavaScript. To allow scripts and components to access features of HTML and CSS, the contents of the document are represented as objects in a programming model known as the Document Object Model (DOM). The DOM API is the foundation of DHTML, providing a structured interface that allows access and manipulation of virtually anything in the document. The HTML elements in the document are available as a hierarchical tree of individual objects, making it possible to examine and modify an element and its attributes by reading and setting properties and by calling methods. The text between elements is also available through DOM properties and methods. The DOM also provides access to user actions such as pressing a key and clicking the mouse. It is possible to intercept and process these and other events by creating event handler functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the DOM to change the document.