Forum Moderators: open
Use XHTML as actual XHTML, which means serving pages as application/xhtml+xml so you can't use document.write as you're not supposed to in the first place; use alert() for debugging.
Don't use innerHTML, it's total junk and is completely unreliable; stick to using the DOM and all the element methods that for some reason refer to elements as nodes (just how amateurs refer to elements as tags).
Don't put scripts in the body element, put them in the head element; people will say that hurts performance, it doesn't but what it does do is NOT allow lazy coding practices.
Don't use frameworks EVER. They don't work when things get mission critical, they're wholly unreliable, and they easily alienate dial-up users who have more market share then IE6 in the US/UK/etc.
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
$p = explode('Validator',$_SERVER['HTTP_USER_AGENT']);
if (count($p)>1) {$mime = 'application/xhtml+xml';}
else {$mime = 'text/html';}
}
header('content-type: '.$header->mime.'; charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
1.) It only takes a little PHP and basic understanding of headers to get XHTML to work in all browsers and degrade to regular HTML for IE8 and older...
2.) document.write does not work with XHTML and if you use it then you cut yourself off from using XHTML easily as well as being stuck in the position of having junk code.
3.) No, innerHTML is horribly unreliable and does not correctly process things in to the DOM which makes scripting with AJAX loaded content a 50/50 and I only prefer 100% chance of things working in normal circumstances.
Stick to using importNode and other node related methods. I don't see why anyone who values standards would promote the use of an unreliable proprietary Microsoft method?
That or maybe you've been lucky to have it work well enough in your given situations though I really stress the browsers out so it probably comes down to the context of what we're working on.
26KB is not small, that's over six seconds on dial-up.
don't have time to deal with code that can't be used reliably once much less not used over and over again
3.) In regards to innerHTML not being reliable try scripting with content loaded via AJAX and "added" to the DOM via innerHTML.
<DOCTYPE html>
<html>
<head>
<title>innerHTML Testing</title>
</head>
<body>
<p>In regards to innerHTML not being reliable try scripting with content loaded
via AJAX and "added" to the DOM via innerHTML. It proves to be a 50/50 chance
hit-or-miss in my experience. I can't think of anything really specific since
working with the DOM alleviated the issues and that was about a year and a half
ago for me. I may have an older build of Version 2.9 that still uses innerHTML
somewhere so if you'd like me to look in to that I'll see if I can find an example.
</p>
<input type="button" id="loadContent" value="Load Content" >
<div id="dynamicContent"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Attach event listener to button
$('#loadContent').click(function () {
$.get('snippet.htm', function (data) {
var dynamicContent = document.getElementById('dynamicContent'),
foo;
// Load some dynamic content and use innerHTML to add it to this document
dynamicContent.innerHTML = data; // <a id='foo' href='#'>Foo</a>
// Now find the newly added content and attach an onclick handler
foo = document.getElementById('foo');
foo.onclick = function () {
alert('It worked');
return false;
};
});
});
});
</script>
</body>
</html>
<a id='foo' href='#'>Foo</a>
Actually it is a proprietary Microsoft method that so happens to be supported by all the browsers.
In regards to it being added to HTML5, that's JScript, what is JScript doing in an HTML specification?
4?.) I've read that you can't actually get a 56K connection over the phone lines because of certain laws hence why a 56K modem is limited to 36K speeds. With my 56K modem I never got more then 4.7KB a sec which is 37,600 kilobits because I remember comparing the speed to when I got my first cable modem and was like whoa.
Additionally every instance of jQuery I have encountered is over 70KB minimized, not the 26KB you're talking about.
Still if you're willing to get things to work on IE6 why not get things to work for dial-up users and benefit from writing your own code directly?
innerHTML is totally reliable and is used by many of the top JavaScript frameworks. Claiming that it's junk and unreliable is, quite frankly, totally wrong.
Can you provide an example?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function findObjectProperty(objectId, propertyName){
var el = document.getElementById(objectId);
alert(objectId +'.'+ propertyName +' = '+ el[propertyName]);
}
function add_element(parentId, newElementId){
//naughty stuff here, adding an element via innerHTML,
//then later setting a custom user-defined property on the element.
document.getElementById(parentId).innerHTML += '<div id="'+ newElementId +'" class="newElement"></div>';
var div = document.getElementById(newElementId);
div.foo = "bar";
div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.foo; //accessing div.foo here works fine
}
window.onload = function(){
add_element("container", 'element_1');
add_element("container", 'element_2');
add_element("container", 'element_3');
add_element("container", 'element_4');
findObjectProperty('element_1', 'foo'); //"undefined"
findObjectProperty('element_2', 'foo'); //"undefined"
findObjectProperty('element_3', 'foo'); //"undefined"
//odd thing is, no matter how many elements you add, only the last ones 'foo' property will be found
//correctly in the alerts from findObjectProperty.
//Problem does not exist with default properties such as id or className or even innerHTML for example.
findObjectProperty('element_4', 'foo'); //"bar"
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
function add_element(parentId, newElementId){
var newEl = document.createElement('div');
document.getElementById(parentId).appendChild(newEl);
newEl.className = 'newElement';
newEl.id = newElementId;
newEl.foo = 'bar';
newEl.appendChild(document.createTextNode('This is '+ newElementId +', this.foo = '+ newEl.foo));
}
function add_element(parentId, newElementId){
document.getElementById(parentId).innerHTML += '<div id="'+ newElementId +'" class="newElement"></div>';
var parentEl = document.getElementById(parentId);
var currentInnerHTML = parentEl.innerHTML;
var innerHTMLtoAppend = '<div id="'+ newElementId +'" class="newElement"></div>';
parentEl.innerHTML = currentInnerHTML + innerHTMLtoAppend;
var div = document.getElementById(newElementId);
div.foo = "bar";
div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.foo; //accessing div.foo here works fine
}
function add_element(parentId, newElementId){
var currentHtml = document.getElementById(parentId).innerHTML;
document.getElementById(parentId).innerHTML += '<div id="'+ newElementId +'" class="newElement" foo="bar"></div>';
var div = document.getElementById(newElementId);
//div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.foo; //accessing div.foo here works fine
div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.getAttribute("foo"); //accessing div.foo here works fine
}
function findObjectProperty(objectId, propertyName){
var el = document.getElementById(objectId);
alert(objectId +'.'+ propertyName +' = '+ el.getAttribute(propertyName));
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function findObjectProperty(objectId, propertyName){
var el = document.getElementById(objectId);
alert(objectId +'.'+ propertyName +' = '+ el.getAttribute(propertyName));
}
function add_element(parentId, newElementId){
var currentHtml = document.getElementById(parentId).innerHTML;
document.getElementById(parentId).innerHTML += '<div id="'+ newElementId +'" class="newElement" foo="bar"></div>';
var div = document.getElementById(newElementId);
div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.getAttribute("foo"); //accessing div.foo here works fine
}
window.onload = function(){
add_element("container", 'element_1');
add_element("container", 'element_2');
add_element("container", 'element_3');
add_element("container", 'element_4');
findObjectProperty('element_1', 'foo'); //"undefined"
findObjectProperty('element_2', 'foo'); //"undefined"
findObjectProperty('element_3', 'foo'); //"undefined"
findObjectProperty('element_4', 'foo'); //"bar"
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I think I can explain. :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
i just want to have some advice of what to do and what to read(offline/ebooks)to learn and at the end master javascript
However, is the second number, 61%, a subset of the first (as in, 61% of the 65% with internet) or a measurement of US citizens with broadband? It's pertinent, because one suggests 4% dialup and the other suggests 39% dialup, the latter of which I tend to believe is the more accurate number.
The really inefficient thing about JQuery in this case is that most people who program with it use the $ selector to refer to an element or group of elements they already accessed. This isn't so bad for IDs, but for classes you wind up spending more time scanning for elements than processing them.
var a = '1';
alert(a);
var b = 1;
alert(b);
var a = '1';
alert(a+'\n\n'+typeof a);
var b = 1;
alert(b+'\n\n'+typeof b);
var a = '1';//global scope
function my_example()
{
var b = 1;//local scope
}
var ids = {'example1':'text','example2':4};
alert(ids['example1']+' = '+typeof ids['example1']);
alert(ids['example2']+' = '+typeof ids['example2']);
try {alert(c);} catch(err) {alert(err);}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<meta name="description" content="Example description." />
<meta name="keywords" content="word 1, something spiffy, mm donuts" />
<meta name="language" content="en" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/" />
<!--
Move your scripts to external files at a later point.
Only put global variables and your window.onload event in onload/don't cache.
Cache index.js, don't store global variables there.
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
-->
<script type="text/javascript">
//<![CDATA[
//XHTML needs to escape scripting, use the first and last line of JavaScript comments to do this.
my_example_function(parameter1,parameter2)
{
alert('parameter1 = '+parameter1+'\n\nparameter2 = '+parameter2);
}
window.onload = function()
{
alert('Oh hai!');
my_example_function('ABC',123);
// Add more functions to call here later on.
}
//]]>
</script>
</head>
<body>
<h1>JavaScript example</h1>
</body>
</html>
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
$mime_ua = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml');
if ($mime_ua) {$mime = 'application/xhtml+xml';}
else {$mime = 'text/html';}
}
else {$mime = 'text/html';}
header('content-type: '.$header->mime.'; charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<meta name="description" content="Example description." />
<meta name="keywords" content="word 1, something spiffy, mm donuts" />
<meta name="language" content="en" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/" />
<!--
Move your scripts to external files at a later point.
Only put global variables and your window.onload event in onload/don't cache.
Cache index.js, don't store global variables there.
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
-->
<script type="text/javascript">
//<![CDATA[
//XHTML needs to escape scripting, use the first and last line of JavaScript comments to do this.
my_example_function(parameter1,parameter2)
{
alert('parameter1 = '+parameter1+'\n\nparameter2 = '+parameter2);
}
window.onload = function()
{
alert('Oh hai!');
my_example_function('ABC',123);
// Add more functions to call here later on.
}
//]]>
</script>
</head>
<body>
<h1>JavaScript example</h1>
</body>
</html>
var global = 1;
function foo() {
var global = 2;
function bar() {
anothervar = 1;
alert(global);
}
}
No, it was 61% of Americans, not 61% of those that had internet (not a subset). I paid careful attention to the numbers before posting it because I wanted to be certain.
