• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[DHTML] Basic Tutorial

Zysen

=)
Joined
Sep 18, 2010
Messages
2,270
Reaction score
170
Location
Bosnia & Herzegovina
DHTML JavaScript







DHTML stands for Dynamic Hyper Text Markup Language.
DHTML is not a language,it's a combination of JavaScript (JS), HTML, CSS and DOM.

I found a definition on the internet:

"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."


Let's start with our tutorial!


DHTML - JS (JavaScript Alone)


This example uses JS to display the current time & date on the page:

Code:
<html>
<body>

<script type="text/javascript">
document.write(Date());
</script>

</body>
</html>


I get this result for myself:

Code:
Sat Dec 11 2010 21:19:47 GMT+0100 (Central European Standard Time)


Now we will do JS + HTML DOM!
JS can be used to change the attributes or the content of HTML.


HTML Element Example - Changing Content


Code:
document.getElementById(id).innerHTML=new HTML


HTML Element Example - Changing Attribute


Code:
document.getElementById(id).attribute=new value




Now we will try JS + HTML Events:


JS can be executed as an event (like when a user click on the HTML element).

When a user clicks on the element,he needs to use this event attribute:

Code:
onclick=JavaScript



Now we will do JS + CSS:


If we want to change a style of an HTML element,we must have this code:


Code:
document.getElementById(id).style.property=new style


This is only the basics of DHTML with JavaScript (JS) + mixing of JS.



Regards,
Zysen
 
Last edited:
Back
Top