Usage of JavaScript in XHTML

The rules for writing XHTML code are much stricter than those for compiling HTML code. Similar code below is valid in HTML, but it is invalid in XHTML.
[Javascript]
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
</Script>
<Script type = "text/javascript">
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
</Script>

In HTML, there are special rules used to determine which content in the <script> element can be parsed, but these rules are not applicable in XHTML. Because less than sign (<) will be parsed as a new tag in XHTML. However, as a tag, the tag cannot be followed by spaces, which leads to syntax errors.
There are two solutions: 1. Use the corresponding HTML Entity (<) to replace all the minor signs (<) in the Code; 2. Use a CData segment to include JavaScript code.
Method 1 code:
[Javascript]
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
</Script>
<Script type = "text/javascript">
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
</Script>

Method 2 code:
[Javascript]
Copy codeThe Code is as follows:
<Script type = "text/javascript"> <! [CDATA [
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
]> </Script>
<Script type = "text/javascript"> <! [CDATA [
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
]> </Script>

Although method 1 can make the code run normally in XHTML, it makes the code hard to understand. method 2 can solve the problem in a browser compatible with XHTML. However, many browsers are not compatible with XHTML and therefore do not support CData fragments. So use JavaScript annotations to comment out the CData mark.
Code:
[Html]
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// <! [CDATA [
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
//]>
</Script>
<Script type = "text/javascript">
// <! [CDATA [
Function compare (a, B)
{
If (a <B)
{
Alert ("a is less then B ");
}
Else if (a> B)
{
Alert ("a is greater then B ");
}
Else
{
Alert ("a is equal to B ");
}
}
//]>
</Script>

This format can be used normally in all modern browsers.
Appendix: Unsupported syntax
[Javascript]
Copy codeThe Code is as follows:
<Script> <! --
Function sayHi (){
Alert ("Hi !);
}
// --> </Script>
<Script> <! --
Function sayHi (){
Alert ("Hi !);
}
// --> </Script>

As shown in the preceding figure, adding JavaScript code to an HTML comment allows browsers that do not support <script> elements to hide embedded JavaScript code, that is, ignore the content in the <script> tag, in this case, browsers that support JavaScript must further confirm whether it contains the JavaScript code to be parsed.

Although this annotation format is recognized by all browsers and can be correctly interpreted, it is unnecessary to use it because all browsers support JavaScript.