Validate Script tag within XHTML - javascript

The "span" tag is invalid, how do I make it valid?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<script type="text/javascript">
var locations = [
[
'Kirklevington Village Hall',
'<span style="font-size:2;"><b>Kirklevington Village Hall</b>,<br />Forest Lane,<br />Kirklevington,<br />Stockton on tees,<br />TS15 9LX</span>',
54.4825,
-1.33663
]
];
</script>

Enclose your script in <![CDATA[ and ]]> to make it appear as a comment to the validator.
More info here

The simplest way is to put the script code to a separate file, say foo.js, and refer to it using <script "src=foo.js" type="text/javascript"></script>. Other methods involve various techniques for “escaping” the content of the script element, and they are clumsy and error-prone.
The XHTML 1.0 spec, appendix C, recommends: “Use external scripts if your script uses < or & or ]]> or --.”

Related

JavaScript in HTML/XML: not well formed error

I'm trying to get information out of a JSON and I get an error that my XML is not well formed. It points to
if((jsonResponse[0].error) && (jsonResponse[0].error.type == 101)) {
----------------------------^
Here's the context:
<?xml version="1.0" encoding="UTF-8" ?>
<!--As DOCTYPE either the strict XHTML declaration or
"-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"
shall be used as described in the HbbTV-standard: A.2.6.2.-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Required XML-namespace as described in the HbbTV-standard: A.2.6.2.-->
<html xmlns="http://www.w3.org/1999/xhtml">
Wrap your JavaScript in CDATA section so that && isn't interpretted as markup:
<script>
<![CDATA[
JaveScript code here
]]>
</script>
Much better solution is move out your script code into separated file and use src attribute to define path, you won't need work with cdata anymore.

What does while javascript while(i<9) mean?

On this site about javascript shorthands, by Sam Deering, a long-hand example is as follows (the site uses a before-and-after format):
var i=0;
while (i<9)
{
//do stuff
i++; //say
}
While I don't understand this, I do understand the short-hand version, which is:
var i=9;
while(i--)
{
//goes until i=0
}
I don't know about if i is the same in both loops, but assume that they both loop 9 times.
Because I would like to expand my limits and improve my programming skills, what does the while (i<9) mean, and how can I use it (with other numbers)?
In XML, e.g. XHTML, you must escape < properly as <.
In HTML it's not necessary to do so inside script elements because their contents are parsed in a special way, but XML does not do these nasty things.
For example, you can write index.xhtml:
<!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">
<head><title>Some document</title></head>
<body>
<script type="text/javascript">
var i=0;
while (i < 9) i++;
console.log(i); // 9
</script>
</body>
</html>
Most people don't want to XML-escape JavaScript operators in inline scripts, so they use CDATA sections:
<!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">
<head><title>Some document</title></head>
<body>
<script type="text/javascript">
<![CDATA[
var i=0;
while (i < 9) i++;
console.log(i); // 9
]]>
</script>
</body>
</html>
Your HTML file most probably has some encoding quirks. < corresponds to the less than symbol < in HTML entities. So really you can read that as while (i<9).

I'm trying to use JavaScript and XPath on this basic xhtml page... but im getting no results?

As the title describes, here is my basic xhtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();
var alertText = 'Level 2 headings in this document are:\n'
while (thisHeading) {
alertText += thisHeading.textContent + '\n';
thisHeading = headings.iterateNext();
}
console.log(alertText);
</script>
</head>
<body>
<h2>… Your HTML content here …</h2>
</body>
</html>
Output is:
Level 2 headings in this document are:
web browsers process the html from top to bottom. Your script runs before the rest of the page exists. Move it down, or execute the code on the window onload event.
Number 1 XPath mistake: your content is in a namespace, but you are searching for it in no-namespace. You need //x:h2, with prefix x bound to the XHTML namespace.

How can I remove additional html object on a page

for some very hard reason i get inserted additional ... before the beggining of my page, before my real <head> starts. This comes from another app i cant remove it.
So the code looks like this:
<html><head><title>Object moved</title></head><body>
<h2>Object moved to here.</h2>
</body></html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
... normal content from here on...
So im asking how on earth can i remove the additional head on the begginig of my page. i can edit css, add javascript, jquery, php... but i just dont know the solution to this problem.
Is this possible at all?
Take the body tags out of the head.
Should be
<head>
stuff
<title>Object moved</title>
</head>
<body>
stuff
<h2>Object moved to here.</h2>
</body>
Remove the first <title> and <h2> tags by putting the code below in your <head>. This will make the extra <html> tag at the beginning have no effect on your page.
<script type="text/javascript">
var e = document.getElementsByTagName( 'title' );
e[0].parentNode.removeChild( e[0] );
e = document.getElementsByTagName( 'h2' );
e[0].parentNode.removeChild( e[0] );
</script>
Works in FireFox, didn't test in other browsers.

getElementsByTagNameNS in (X)HTML documents

I have a question on Javascript and DOM; shouldn't the following code retrieve the three foo:bar elements in the body? The alert window displays zero. It doesn't work in any browser I have (not even Chrome Canary). Thank you for helping, have a nice weekend.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="http://example.com">
<head>
<title>Hello!</title>
<script type="text/javascript">
function bodyLoad() {
var extElements = document.getElementsByTagNameNS('http://example.com', 'bar');
alert(extElements.length);
}
</script>
</head>
<body onload="bodyLoad();">
<foo:bar>First Foo-Bar</foo:bar>
<foo:bar>Second Foo-Bar</foo:bar>
<foo:bar>Third Foo-Bar</foo:bar>
</body>
</html>
You are likely serving the document with the wrong content type. The browser has to treat it as XML for namespaces to be recognized, so you need to use application/xhtml+xml or another XML content-type, and not text/html.
As an aside, your Doctype is wrong. If you want to use a DTD, then you will need one that includes the elements you are using from the foo namespace. If you don't, then just get rid of the Doctype — it has no bearing on rendering mode in XML documents (again, text/html documents are treated as tag soup, not XML).

Categories