Dynaaminen HTML ja DOM

JAVASCRIPT JA DOM KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi
IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Olion ominaisuudet

Kaikki objektit sisältävät jonkinlaisen yhdistelmä ominaisuuksia, metodeja ja tapahtumia. Ominaisuus (eli property) on jokin yksilöllinen piirre tai ominaisuus objektissa, kuten väri, koko tai yksilöllinen id.

Esimerkiksi navigator objekti sisältää ominaisuuden appName, joka sisältää selaimen nimen; location objektin ominaisuus href kertoo nykyisen sivun URL-osoitteen, document objektin ominaisuus bgColor taustavärin jne. Kun halutaan viitata objektin ominaisuuteen käytetään syntaksia:


objektinNimi.ominaisuus

Kun halutaan lisätietoa objektista, käytetään VBScriptissä syntaksia:


muuttujanNimi = objektinNimi.ominaisuus

Jos haluamme tulostaa näytölle nykyisen taustavärin, voimme viitata ominaisuuteen :


nykyinenVari = document.bgColor
document.write "Dokumentin taustaväri" &nykyinenVari

Sama esimerkki toimisi JavaScriptissä, kunhan lisäisimme muuttujan eteen tarvittavan "var" sanan sekä puolipisteet lauseiden perään.

Useimmat ominaisuudet sisältävät luku-kirjoitusoikeuden (read-write access), tosin eräät ominaisuudet sisältävät vain lukuoikeuden. Ominaisuuden arvon muuttamisen syntaksi on :


objektinNimi.ominaisuus = uusiArvo

Esimerkiksi dokumentin taustaväri voidaan kutsumalla sitä:


document.bgColor= "#FFCC00"

Internet Explorer 4.x:n sisältämä DOM malli sisältää yli 250 ominaisuutta, joita voi käyttää. Täydellinen luettelo mahdollisine arvoineen löytyy mm. Microsoftin Internet Client SDK:sta tai msdn:n kehittäjäsivuilta. Tässä on listaus käytettävissä olevista ominaisuuksista:

Ominaisuus
accessKey	location
action	loop
activeElement	lowsrc
align	map
alinkColor	margin
alt	marginBottom
altHTML	marginHeight
altKey	marginLeft
appCodeName	marginRight
appName	marginTop
appVersion	marginWidth
background	maxlength
backgroundAttachment	media
backgroundColor	method
backgroundImage	Methods
backgroundPosition	mimeTypes
backgroundPositionX	multiple
backgroundPositionY	name
backgroundRepeat	nohref
balance	noresize
behaviour	noShade
bgColor	noWrap
bgProperties	object
border	offscreenBuffering
borderBottom	offsetHeight
borderBottomColor	offsetLeft
borderBottomStyle	offsetParent
borderBottomWidth	offsetTop
borderColor	offsetWidth
borderColorDark	offsetX
borderColorLight	offsetY
borderLeft	opener
borderLeftColor	outerHTML
borderLeftStyle	outerText
borderLeftWidth	overflow
borderRight	owningElement
borderRightColor	padding
borderRightStyle	paddingBottom
borderRightWidth	paddingLeft
borderStyle	paddingRight
borderTop	paddingTop
borderTopColor	pageBreakAfter
borderTopStyle	pageBreakBefore
borderTopWidth	palette
borderWidth	parent
bottomMargin	parentElement
bufferDepth	parentStyleSheet
button	parentTextEdit
cancelBubble	parentWindow
cellPadding	pathname
cellSpacing	pixelHeight
charset	pixelLeft
checked	pixelTop
classid	pixelWidth
className	plugins
clear	pluginspage
clientInformation	port
clientHeight	posHeight
clientLeft	position
clientTop	posLeft
clienWidth	posTop
clientX	posWidth
clientY	protocol
clip	readOnly
closed	readyState
code	reason
codebase	recordNumber
codeType	recordset
color	referrer
colorDepth	rel
cols	returnValue
colSpan	rev
compact	rigthMargin
complete	rows
content	rowSpan
cookie	rules
cookieEnabled	screenX
coords	screenY
cssText	scroll
ctrlKey	scrollAmount
cursor	scrollDelay
data	scrollHeight
dataFld	scrolling
dataFormatAs	scrollLeft
dataPageSize	scrollTop
dataSrc	scrollWidth
defaultCharset	search
defaultChecked	selected
defaultSelected	selectedIndex
defaultStatus	self
defaultValue	shape
dialogArguments	shiftKey
dialogHeight	size
dialogLeft	sourceIndex
dialogTop	span
dialogWidth	src
direction	srcElement
disabled	srcFilter
display	start
domain	status
dynsrc	style
encoding	styleFloat
event	tabIndex
expando	tagName
face	target
fgColor	text
filter	textAlign
font	textDecoration
fontFamily	textDecorationBlink
fontSize	textDecorationLineThrough
fontStyle	textDecorationNone
fontVariant	textDecorationOverline
fontWeight	textDecorationUnderline
form	textIntend
frame	textTransform
frameBorder	title
frameSpacing	toElement
fromElement	top
hash	topMargin
height	trueSpeed
Hidden	type
host	units
hostname	updateInterval
href	URL
href	url
hspace	urn
htmlFor	useMap
htmlText	userAgent
httpEquiv	vAlign
id	value
indeterminate	verticalAlign
index	visibility
innerHTML	vlinkColor
innerText	volume
isMap	vspace
isTextEdit	width
keyCode	wrap
lang	x
language	y
lastModified	zindex
left
leftMargin
length
letterSpacing
lineHeight
linkColor
listStyle
listStyleImage
listStylePosition
listStyleType

Seuraava esimerkki on eräs eniten käytetyimmistä tehokeinoista netissä. Sen avulla pystytään dynaamisesti säätelemään jonkin ennalta määrätyn alueen näkyvyyttä sivulla.


<script language = "vbscript">

Sub showit()
  document.all.Jokinid.style.display = ""
End Sub

</script>

<div id= "JokinId" style="display: 'none'" >
Tämä on piilotettua tekstiä
</div>
<Select id= "Showit" onclick=showit>

Tutustu artikkelin muihin osiin:
»»» DHTML ja DOM »»» Olion ominaisuudet
»»» DHTML ja DOM »»» Olion metodit
»»» DHTML ja DOM »»» Olion tapahtumat
»»» DHTML ja DOM »»» Tapahtuman kuplinta

Dynaaminen HTML ja DOM

Olion ominaisuudet

Tallenna tämä sivu kirjanmerkkeihin!