Issues with JavaScript and XHTML Strict Code
https://stackoverflow.com/questions/8247002
-
07-03-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I have an issue with meeting XHTML Strict requirements for a class assignment. The class assignment says to use java script to generate a table, but only the array can be use in an external javascript file. This has lead to some issues when trying to meet XHTML Scrict requirements. The 'rule' i break is as follows:
Line 147, Column 38: document type does not allow element "script" here
script type="text/javascript"
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
The line that is generating this error is:
<script type="text/javascript">
<!--
for(var i=0; i<5;i++){
document.write('<tr><td class="classes">');
document.write(classArray[i]);
document.write('</td></tr>');
}
-->
</script>
The issue is this code is in the 'body' tags. I'm not sure how i can replicate this code to place it in the head while generating a table in the spot I want on the page. Any help would be much appreciated. I really don't know much about XHTML Strict or Javascript, this is just part of a 3 week module for class, and all my experience is from lecture/reading.
Full Code, Suspect is toward bottom:
<!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>Career Goals</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body
{
background-image:url('./images/marbleBG.jpg');
background-repeat:no-repeat;
background-position:right top;
background-size: 100% , 100%;
margin-top:5%;
margin-bottom:5%;
font-family: sarif;
text-align: center;
font-size: 18px;
}
table.main
{
margin-left: auto;
margin-right:auto;
height: auto;
width: 65%;
border: 0px solid black;
}
table.classes
{
margin-left: 15%;
margin-right:auto;
height: 100%;
width: auto;
text-align : left;
border-collapse: collapse;
}
td.classes
{
text-indent : 25px;
border: 1px solid;
padding: .3em;
}
th.classes
{
padding: .3em;
border: 1px solid;
}
table.centered
{
margin-left: 15%;
margin-right: auto;
border: 0px solid black;
}
h1.title
{
text-align: center;
padding-bottom:25px;
}
p.left
{
text-align: left;
font-size: 16px;
text-indent: 25px;
}
li
{
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript" src="myarray.js" ></script>
<script type="text/javascript" src="mycookie.js" ></script>
<table class="main">
<tr>
<td>
<h1 class="title"> Career Goals </h1>
<p class="left">
My goals when I complete my computer science degree with Arizona State University will include
joining a corporation where I can improve my technical skills and assist in the growth of said company.
I would like to be a part of a team of programmers with common career interests where we can motivate each
other to visibly show improvement as our careers progress.
</p>
<p class="left">
In my study with Arizona State University I have learned many popular programming languages. In my career I plan
on utilizing most, if not all, of the languages I know. The programing languages I know include:
</p>
<table class="centered">
<tr>
<td>
<ul>
<li>Java</li>
<li>C/C++</li>
<li>Scala</li>
<li>Java Scripting</li>
<li>PERL Scripting</li>
<li>Unix Scripting</li>
<li>HTML/XHTML</li>
</ul>
</td>
</tr>
</table>
<p class="left">
With Arizona State Univeristy I did not just learn programming languages, I learned industry practicies. In my career
I expect to utilize msot of these techniques, as well as learn new practicies to improve the quality of software I
assist in creating. The techniques taught by Arizona State University include:
</p>
<table class="centered">
<tr>
<td>
<ul>
<li>Extreme Programming</li>
<li>Paired Programming</li>
<li>Code Reviews</li>
<li>Refacotring Sessions</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p class="left"> At Arizona State University I have taken many classes to progress
in my computer science degree. Some of the classes that I have taken that may assist in my career goals are:
</p>
<table class="classes">
<tr>
<th class="classes">
<b>Classes Taken for Computer Science Major</b>
</th>
</tr>
<script type="text/javascript">
<!--
for(var i=0; i<5;i++){
document.write('<tr><td class="classes">');
document.write(classArray[i]);
document.write('</td></tr>');
}
-->
</script>
</table>
</td>
</tr>
<tr>
<td>
<p class="left">
More of my skills and goals can be found on my <a href="resume.html">resume</a>. If you feel my career goals would be a great addition
to your team you can contact me using my <a href="contact.html">contact form</a>.
</p>
</td>
</tr>
</table>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</body>
</html>
Solution
Script elements are not allowed inside tables except when they are inside a data or heading cell. If you want to generate part of a table from a script then you must generate all of the table from the script.
As an aside, in XHTML a comment is a comment, so you don't actually have a script there, just a script element containing a comment. You might not notice, because you are probably telling the browser to treat the document as HTML (with a .html file extension for local files or a text/html content-type for ones served over HTTP). Get rid of the comment. You will then find that the < in the script will generate more errors (because markup is markup inside a script in XHTML (unlike in HTML)). Wrap the content with CDATA flags.
Generally speaking, I would not recommend XHTML for any new project. The differences between how XHTML should be handled and how browsers actually handle it when you pretend it is HTML makes it more trouble then it is worth.
You also appear to have data suitable for a list, not a table (having only one column is a big clue), so I'd get rid of the table entirely.
OTHER TIPS
You don't have to generate the whole table with Javascript, you just need to use a better method than document.write to output your elements. Since this is for a class I am hesitant to give you exact code but you should be able to use a combination of document.getElementById(), document.createElement('td') and appendChild().
Something like: document.getElementById('classes').appendChild(newChild);
As a side note, Quentin is completely correct about the semantic questions: XHTML is unlikely to be the right choice and table-based layouts of non-tabular content are woefully out of date. However, I understand that this is for a class project so you may have no choice.
