sauberes trennen von js-code zwischen browsern?

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/sauberes_trennen_von_js-code_zwischen_browsern_135005/page_1 - zur Vollversion wechseln!

tomstig schrieb am 20.01.2005 um 20:45

ich code gerade für die schule an einem rätselscript (zahl raten).
script schaut so aus:

Code: PHP

<html>
<head>
<title>Raten</title>
<style type="text/css">
body, td{
	font-size: 10pt;
	font-family: Arial;
}
td.border{
	border: 2px solid #000000;
}
.button{
	border-top: 1px solid #cccccc;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #cccccc;
	background-color: #ffffff;
}
</style>

<script type="text/javascript">
a = Math.round((Math.random()*100));
b = 0;

function rate(){
		
	var zahl = document.getElementsByName('feld')[0].value;
	  
	if(zahl.length != 0){
	 	
		b++;	
	 	
		if(document.getElementById || document.layers){ 	
	 		if(zahl == a){		
				document.getElementById('answer').style.backgroundColor = "green";
				document.getElementById('answer').style.color = "white";
				document.getElementById('answer').style.fontWeight = "bold";
				document.getElementById('answer').firstChild.nodeValue = "Richtig!";
				document.getElementById('button').disabled = true;
			}else if(zahl < a ){
			 	document.getElementById('answer').firstChild.nodeValue = "Die Zahl ist höher";
			}else{
				document.getElementById('answer').firstChild.nodeValue = "Die Zahl ist niedriger";
			}
			
		document.getElementById('versuche').firstChild.nodeValue = "<b>Anzahl der Versuche:</b> " + b + a;
		}
	 	
	 	if(document.all){
			if(zahl == a){		
				document.getElementById('answer').style.backgroundColor = "green";
				document.getElementById('answer').style.color = "white";
				document.getElementById('answer').style.fontWeight = "bold";
				document.getElementById('answer').innerText = "Richtig!";
				document.getElementById('button').disabled = true;
				
				//highscore(b);
			
			}else if(zahl < a ){
			 	document.getElementById('answer').innerText = "Die Zahl ist höher";
			}else{
				document.getElementById('answer').innerText = "Die Zahl ist niedriger";
			}
			
		document.getElementById('versuche').innerHTML = "<b>Anzahl der Versuche:</b> " + b + a;
		}
	}

 	
}

/*
function show_highscore(){	
	if(!document.cookie)
		
	else
		return document.cookie;
}
	
	
function edit_highscore(score){
	if(!document.cookie)
		document.cookie = score;
	else if(document.cookie > score)
		document.cookie = score;
}
*/	 


</script>
</head>
<body>
<table align="center" width="200px">
 <tr>
  <td id="versuche" colspan="2" class="border">
   <b>Anzahl der Versuche:</b> 0
  </td>
 </tr>
 <tr>
  <td id="highscore" colspan="2" class="border">
   <b>Dein persönlicher Highscore:</b> -
  </td>
 </tr>
 <tr>
  <td id="answer" colspan="2" style="text-align: center" class="border">
   Richtig?
  </td>
 </tr>
 <tr>
  <td>
   <input type="text" name="feld" maxlength="3" onkeyup="if(document.getElementsByName('feld')[0].value > 100) document.all.feld.value = 100">
  </td>
  <td>
   <input type="button" id="button" value="Raten" onclick="rate()" class="button">
  </td>
 </tr>
</table>
</body>
</html>

die highscore funktionen sind auskommentiert, weil ich hier angestanden bin, ob ich abfragen nicht mit if(IE) und if(NS) abkürzen kann, als dass ich jedesmal if(document.all) und if(document.get...) schreiben muss. weiters gab es vorher nur eine highscore funktion, die je nach parameter den highscore eingetragen oder abgerufen hat. jetzt hab ich 2 gemacht, wobei die abruf-funktion nicht wie vorher nur daten zurückgeben soll, sondern gleich das ganz übernehmen soll....

da ich natürlich texte ändern will, und das nicht mit inputs lösen wollte sondern mit innerText und nodeValue hab ich natürlich vorher auch abfragen müssen, ob document.all oder document.getElementById und je nachdem den code ausführen.

jetzt hab ich aber schon oft in sources gelesen, dass man zuerst eine variable IE anlegt und auf der den wert von document.all speichert (true oder false) und eine variable NS mit document.getElementById oder document.layers. nachher macht man nur noch if(IE) und if(NS) und die sache hat sich.

jetzt meine fragen:
- akzeptiert mittlerweile jeder browser (oder die geläufigsten) nodeValue?
- darf innerText überhaupt noch verwendet werden (wie ich etwas über innerText in einem anderen forum gefragt hab, war das gleich ein skandal)?
- wie gehts wirklich mit IE und NS?
- was muss ich auf NS speichern? var NS = (document.getElementById || document.layers);?

tia, mfg

that schrieb am 20.01.2005 um 20:57

document.getElementById sollte inzwischen jeder Browser können. Auch nodeValue ist in DOM-1 definiert, allerdings readonly. Sowohl IE als auch Gecko verstehen jedenfalls innerHTML.

IE und NS Variablen würde ich nicht machen, eher z.B. eine eigene setNodeValue Funktion, die je nach Browser das richtige tut.

Jede Browserabfrage im normalen Code (d.h. nicht in Funktionen eingepackt) ist IMHO ein Zeichen für schlechtes Design.

tomstig schrieb am 20.01.2005 um 21:06

Zitat von that
Jede Browserabfrage im normalen Code (d.h. nicht in Funktionen eingepackt) ist IMHO ein Zeichen für schlechtes Design.

also abfrage in funktion und dann mit <body onload="xyz()"> abrufen?

und wie könnte diese funktion ausschauen? weil ich glaub, dass var ns = document.firstChild nicht geht...

that schrieb am 20.01.2005 um 22:34

Wozu onLoad? Einfach im Script vorher definieren die Funktion, dann bei Bedarf aufrufen.

Aber warum verwendest du statt der Krücken nicht einfach das (nicht standardkonforme, aber weit verbreitete) innerHTML Property?

tomstig schrieb am 20.01.2005 um 23:20

vor allem du als nicht ms-benutzer solltest das wissen, weil ich nehm kaum an, dass du den ie verwendest....

klartext: firefox verstehts nicht

that schrieb am 20.01.2005 um 23:48

Zitat von tomstig
vor allem du als nicht ms-benutzer solltest das wissen, weil ich nehm kaum an, dass du den ie verwendest....

klartext: firefox verstehts nicht

Ich weiß nicht was du probiert hast, aber folgendes geht bei mir mit Mozilla 1.7.5 sowie Firefox 1.0 und auch mit Konqueror 3.3 unter Linux einwandfrei:

Code: PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>innerHTML Test</title>
</head>

<body>

<div id="test">Test</div>
<p>
<a href="#" onclick="document.getElementById('test').innerHTML = '<b>Hallo</b>'; return false;">Click me</a>
</p>

</body>
</html>

tomstig schrieb am 20.01.2005 um 23:57

aha, strange, sry... :confused:

ist vorher nicht gegangen, lag wohl der fehler woanders...

aber trotzdem wäre es interessant zu wissen, wie man das saubere trennen am besten aufbauen kann...

edit: bin jetzt draufgekommen: innerHTML geht, innerText nicht...

that schrieb am 21.01.2005 um 00:21

Zitat von tomstig
aber trotzdem wäre es interessant zu wissen, wie man das saubere trennen am besten aufbauen kann...

Du machst für alles, was unterschiedlich funktioniert, je eine Funktion, die diesen Unterschied kapselt. Diese verwendest du dann in deinem restlichen Code anstelle hässlicher "if"s.

watchout schrieb am 21.01.2005 um 05:21

und genau diese gekapselten codeschnipsel schreibst du in "conditional comments".

that schrieb am 21.01.2005 um 10:44

Zitat von watchout
und genau diese gekapselten codeschnipsel schreibst du in "conditional comments".

Code:

<!--[if IE]>
Achtung, Sie verwenden einen nicht standardkonformen Browser!
<a href="http://getfirefox.com">Get Firefox now!</a>
<![endif]-->

tomstig schrieb am 21.01.2005 um 13:01

hehe, die muss ich noch einbauen ^^

mhh, für alles eine eigene funktion klingt nach viel aufwand :/

Rektal schrieb am 21.01.2005 um 22:48

Nicht wirklich. Es sind nicht viele, und die brauchst nicht nochmal fuer spaeter schreiben. Und brauchen wirst sie immer wieder