WebDev

Noformējumam ir jābūt atdalītam no satura! Lūk tieši tādēļ mums ir iespēja web-lapas HTML failā glabāt tikai strukturizētu saturu, bet CSS un JavaScript pārvietot uz atsevišķiem failiem. Ieguvums ir ne tikai “tīrāks” lapas kods, kas atvieglo izstrādi un modificēšanu nākotnē, un ātrdarbību, bet tas ir arī pluss no SEO viedokļa, jo tādi meklētāji kā Google varēs vieglāk indeksēt saturu. Ar CSS viss ir vienkārši un skaidri – glabājam to atsevišķā failā un izvairāmies no “inline” stilu definēšanas (<div style=”…”).

Arī JavaScript var pilnībā atdalīt no lapas satura un ne tikai glabāt to atsevišķos failos, bet arī nelietot tādus event`us kā onClick, onMouseOver, onLoad u.t.t. JavaScript web-lapā ir papildus funkcionalitāte un nedrīkst paļauties uz tā atbalstu lietotāja pārlūkprogrammā, jo tas var būt gan vienkārši atslēgts, gan izfiltrēts, gan netikt atbalstīts mobilajās ierīcēs.

Agrāk mēs to darījām šādi:

<a id="mylink" href="#" onMouseOver="something(this);">...</a>

Bet pareiza pieeja šajā gadījumā ir izvairīties no onMouseOver event`a (tā pat kā no jebkura cita) un atsevišķā javascript failā piemērot vajadzīgo papildus funkcionalitāti šim elementam:

document.getElementById('mylink').onMouseOver = function() {
    // Kods, kurš izpildīsies pēc peles uzbīdīšanas uz saites
};

Šāda pieeja ir arī nesalīdzināmi parocīgāka, ja vēlamies pievienot papildus funkcionalitāti uzreiz vairākiem elementiem. Tad ir nepieciešams atrast visus šos elementus (piemēram, pēc klases nosaukuma) un piešķirt tiem izpildāmo kodu. Piemērs:

HTML:

<img src="img1.jpg" class="popupImg" alt="attēls1" />
<img src="img2.jpg" class="popupImg" alt="attēls2" />
<img src="img3.jpg" class="popupImg" alt="attēls3" />

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.onload = function(){ // Izpildam tikai pēc lapas ielādes
   var nodes = getElementsByClass('popupImg'); // Atrodam visus elementus ar klasi "popupImg"
   for(i=0; i<nodes.length; i++) {
      nodes[i].onclick = function() {
         // Norādam kas notiks pēc onClick event`a:
         alert(this.alt);
      };
   }
}
 
// Papildus funkcija, kas atgriež masīvu ar visiem vienas klases elementiem
function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}