javascript und das <!-- valid?

[Paradise]

Hallo,

ich hab den http://www.htmlvalidator.com/ welcher mir zum <!-- sagt

In XHTML documents, style and script content must not be in a comment because it technically means that the browser will see it as a comment and not as actual style or script content (though browsers are currently forgiving about this). However, not using comments makes your document less compatible with pre HTML 3.2 browsers (but most browsers now in use are HTML 3.2+ compatible). For maximum compatibility, AI Internet Solutions recommends putting the script (especially longer scripts) in an external file and using the "src" attribute to specify the external file. The next best option for XHTML documents would be to not put the script content in a comment and to disregard pre HTML 3.2 browsers.

Lösche ich die <!-- und //--> gibt dieser die Meldung nicht mehr aus.

ABER
dann mault http://validator.w3.org und schmeist gleich 90 fehlermeldungen raus und beschwerd sich über zb

for(var i=0;i<links.length;i++){

mit

character ";" not allowed in attribute specification list

was ist den nun richtig

Gruß
Paradise

[hero-master]

Moin paradise,

Zitat von Paradise

was ist den nun richtig

Das sind 2 paar Schuhe. Hast du dir den Text oben durchgelesen und verstanden was da steht?
So wie ich das sehe ist es eher ein Hinweis, als eine Fehlermeldung, oder?
Du hast wohl das JS als Kommentar stehen und wird auch nur so interpretiert. Hat also keine Funktion, außer Platz zu nehmen
Den Hinweis kannst du gerne überlesen, jedoch solltest du dir eben bewusst sein, dass dein JS einen Fehler hat, auch wenn es gerade nicht aktiv ist...

[rewboss]

Es gibt hier vieles zu sagen.

1. Das mit dem <!-- und // --> ist nicht mehr aktuell. Vor zehn Jahren war das noch empfehlenswert, um das JavaScript von Browsern zu verstecken, die weder <script> noch <noscript> verstanden. Solche Browser sind aber schon längst ausgestorben.

2. Es empfiehlt sich trotzdem, das Skript in eine externe Datei auszulagern und dieses mit <script src="..."> einzubinden.

3. Will man aber aus irgendeinem Grund das JavaScript nicht auslagern, muss man den Code als CDATA auszuzeichnen; sonst geht der Validator davon aus, dass es sich um HTML handelt -- und wenn ein < oder ein & vorhanden ist, spuckt er Fehlermeldungen aus. Und so macht man das:

<script type="text/javascript">
// <![CDATA[

tuIrgendEtwas();

// ]]>
</script>

Dasselbe übrigens auch mit CSS:

<style type="text/css">
/* <![CDATA[ */

body{ background: #fff; }

/* ]]> */
</style>

CDATA zeichnet Daten aus, die vom HTML- bzw. XML-Parser nicht geparst werden soll.

[tkl]

wenn das javaskrip so gecodet wurde:

<script language="JavaScript">
<!--
alert("Hallo Welt!");
//-->
</script>

funktioniert es. Dann schützen die Kommentarzeichen den code davor angezeigt zu werden, wenn der darstellende Browser so alt ist, das er mit dem script-tag nichts anfangen kann. Ob solche Browser(die kein skript-tag kennen) in der freien Wildbahn überhaupt noch existieren bezweifle ich.

Wenn der Java-code ohne das skript-tag im html-code auftaucht, dann ist dies eh ein fehlerhafter code.

.. Upps war zu langsam: [rewboss] hats auf den punkt gebracht.

Grusss
tkl

[Paradise]

Hach ihr seit die besten

Alle <!-- durch // <![CDATA[ ersetzt und weder http://validator.w3.org noch der Htmlvalidator haben was zu motzen

[Paradise]

Zu früh gefreud

This document contains 4 CDATA sections. Using CDATA sections is not recommended due to poor browser support (even some newer browsers fail to properly support it) and due to other complications. AI Internet Solutions recommends avoiding CDATA sections if possible.

Das komische ist nur das dies sich nur auf diese bezieht:
Die über general.js.php eingebundenen:

<script type="text/javascript">
// <![CDATA[
PopUp = function(autoapply){
	this.types = [];
	this.defaults = {
		width:800,
		height:600,
		top:0,
		left:0,
		location:false,
		resizable:false,
		scrollbars:false,
		status:false,
		toolbar:false,
		menubar:false,
		center:true,
		title:"Dieser Link wird in einem neuen Fenster geöffnet"
	}
	this.addType({
		name:"standard",
		location:true,
		resizable:true,
		scrollbars:true,
		status:true,
		toolbar:true,
		menubar:true
	});
	if(autoapply) this.apply();
}
o = PopUp.prototype;
o.apply = function(){
	var links = document.getElementsByTagName("a");
	if(!links) return;
	for(var i=0;i<links.length;i++){
		var l = links[i];
		if(l.className.indexOf("popup") > -1){
			this.attachBehavior(l,this.getType(l));
		}
	}
}
o.addType = function(type){
	for(var prop in this.defaults){
		if(type[prop] == undefined) type[prop] = this.defaults[prop];
	}
	this.types[type.name] = type;
}
o.getType = function(l){
	for(var type in this.types){
		if(l.className.indexOf(type) > -1) return type;
	}
	return "standard";
}
o.attachBehavior = function(l,type){
	var t = this.types[type];
	l.title = t.title;
	l.popupProperties = {
		type: type,
		ref: this
	};
	l.onclick = function(){
		this.popupProperties.ref.open(this.href,this.popupProperties.type);
		return false;
	}
}
o.booleanToWord = function(bool){
	if(bool) return "yes";
	return "no";
}
o.getTopLeftCentered = function(typeObj){
	var t = typeObj;
	var r = {left:t.left, top:t.top};
	var sh = screen.availHeight-20;
	var sw = screen.availWidth-10;
	if(!sh || !sw) return r;
	r.left = (sw/2)-(t.width/2);
	r.top = (sh/2)-(t.height/2);
	return r;
}
o.getParamsOfType = function(typeObj){
	var t = typeObj;
	var c = this.booleanToWord;
	if(t.center){
		var tc = this.getTopLeftCentered(typeObj);
		t.left = tc.left;
		t.top = tc.top;
	}
	var p = "width="+t.width;
	p+=",height="+t.height;
	p+=",left="+t.left;
	p+=",top="+t.top;
	p+=",location="+c(t.location);
	p+=",resizable="+c(t.resizable);
	p+=",scrollbars="+c(t.scrollbars);
	p+=",status="+c(t.status);
	p+=",toolbar="+c(t.toolbar);
	p+=",menubar="+c(t.menubar);
	return p;
}
o.open = function(url,type){
	if(!type) type = "standard";
	var t = this.types[type];
	var p = this.getParamsOfType(t);
	var w = window.open(url,t.name,p);
	if(w) w.focus();
	return false;
}
// ]]></script>

<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function() {
	new rokmoomenu($E('ul.nav'), {
		bgiframe: false,
		delay: 500,
		animate: {
			props: ['opacity', 'width', 'height'],
			opts: {
				duration:400,
				fps: 100,
				transition: Fx.Transitions.sineOut
			}
		}
	});
});
// ]]>
</script>

<script type="text/JavaScript">
// <![CDATA[
function Social_Load() { 
var d=document; if(d.images){ if(!d.Social) d.Social=new Array();
var i,j=d.Social.length,a=Social_Load.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.Social[j]=new Image; d.Social[j++].src=a[i];}}
}
Social_Load('/files/images/icons/wong_trans_ani.gif','/files/images/icons/yigg_trans_ani.gif','/files/images/icons/digg_trans_ani.gif','/files/images/icons/del_trans_ani.gif','/files/images/icons/furl_trans_ani.gif','/files/images/icons/yahoo_trans_ani.gif','/files/images/icons/spurl_trans_ani.gif')
function schnipp() { 
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function schnupp(n, d) { 
  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=schnupp(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
  }
function schnapp() { 
  var i,j=0,x,a=schnapp.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=schnupp(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  }
// ]]>
</script>

und nur einen der direkt in der header.php sitzt

<script type="text/javascript">
// <![CDATA[
var selected;
var submitter = null;

function submitFunction() {
    submitter = 1;
}
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}  

function selectRowEffect(object, buttonSelect) {
  if (!selected) {
    if (document.getElementById) {
      selected = document.getElementById('defaultSelected');
    } else {
      selected = document.all['defaultSelected'];
    }
  }

  if (selected) selected.className = 'moduleRow';
  object.className = 'moduleRowSelected';
  selected = object;

// one button is not an array
  if (document.getElementById('payment'[0])) {
    document.getElementById('payment'[buttonSelect]).checked=true;
  } else {
    //document.getElementById('payment'[selected]).checked=true;
  }
}

function rowOverEffect(object) {
  if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}

function rowOutEffect(object) {
  if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}

function popupImageWindow(url) {
  window.open(url,'popupImageWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
// ]]>
</script>

dabei sind in der header.php noch mehr. Diese werden aber nicht beanstandet...

[Boris]

Es reicht mehr als aus, wenn du CDATA einmal angibst um alle JavaScripte herum

[rewboss]

Zitat von Paradise

Zu früh gefreud

Ist aber nur eine Empfehlung, die von Erbsenzählern ausgedacht wurde. Die CDATA-Anfangs- und Endtags werden ja auskommentiert. Jeder User-Agent, der mit CDATA nichts anfangen kann, sieht nur JavaScript- bzw. CSS-Kommentare. Jeder User-Agent, der CDATA richtig versteht (etwa der W3C-Validator) setzt es auch korrekt um. Wo liegt bitte schön da das Problem?

Trotzdem: Auch aus anderen Gründen empfiehlt es sich, JavaScript und CSS auszulagern. Dann braucht man die CDATA-Blocks auch nicht mehr. Und damit wird gemeint, nicht per PHP zu includieren, sondern im HTML über <script> bzw <link> einzubinden.