Проблемы с JavaScript и строгим кодом XHTML - PullRequest
2 голосов
/ 23 ноября 2011

У меня проблема с выполнением строгих требований XHTML для назначения класса. Присвоение класса говорит использовать java-скрипт для генерации таблицы, но во внешнем файле javascript можно использовать только массив. Это привело к некоторым проблемам при попытке удовлетворить требования XHTML Scrict. «Правило», которое я нарушаю, таково:

Строка 147, Колонка 38: тип документа не допускает здесь элемент "script"

script type = "text / javascript"

Элемент, указанный выше, был найден в контексте, где он не разрешен. Это может означать, что у вас неправильно вложенные элементы - например, элемент «style» в разделе «body» вместо «head» - или два элемента, которые перекрываются (что недопустимо).

Одной из распространенных причин этой ошибки является использование синтаксиса XHTML в документах HTML. Из-за правил HTML для неявно закрытых элементов эта ошибка может создавать каскадные эффекты. Например, использование «самозакрывающихся» тегов XHTML для «meta» и «link» в разделе «head» документа HTML может привести к тому, что синтаксический анализатор выведет конец раздела «head» и начало «body» раздел (где «ссылка» и «мета» не допускаются; следовательно, сообщается об ошибке).

Строка, которая генерирует эту ошибку:

<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>

Проблема в том, что этот код находится в тегах 'body'. Я не уверен, как я могу скопировать этот код, чтобы поместить его в заголовок при создании таблицы в нужном месте на странице. Любая помощь приветствуется. Я действительно мало знаю о XHTML Strict или Javascript, это всего лишь часть 3-недельного модуля для класса, и весь мой опыт связан с лекцией / чтением.

Полный код, Подозреваемый направлен вниз:

<!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>

Ответы [ 2 ]

5 голосов
/ 23 ноября 2011

Элементы скрипта не допускаются внутри таблиц, кроме случаев, когда они находятся внутри ячейки данных или заголовка. Если вы хотите сгенерировать часть таблицы из скрипта, вы должны сгенерировать все таблицы из скрипта.

Кроме того, в XHTML комментарий - это комментарий, так что на самом деле у вас нет сценария, а просто элемент сценария, содержащий комментарий. Вы можете не заметить, потому что вы, вероятно, говорите браузеру обрабатывать документ как HTML (с расширением .html для локальных файлов или с типом содержимого text / html для тех, которые обслуживаются по HTTP). Избавьтесь от комментария . Затем вы обнаружите, что < в скрипте вызовет больше ошибок (потому что разметка - это разметка внутри скрипта в XHTML (в отличие от HTML)). Обернуть содержимое флагами CDATA .

Вообще говоря, я бы не рекомендовал XHTML для любого нового проекта. Различия между тем, как XHTML должен обрабатываться, и тем, как браузеры на самом деле обрабатывают его, когда вы притворяетесь, что это HTML, создают больше проблем, чем оно того стоит.

Похоже, у вас также есть данные, подходящие для списка, а не таблицы (наличие только одного столбца - большая подсказка), поэтому я полностью избавился бы от таблицы.

2 голосов
/ 23 ноября 2011

Вам не нужно генерировать всю таблицу с помощью Javascript, вам просто нужно использовать лучший метод, чем document.write, для вывода ваших элементов.Так как это для класса, я не могу дать вам точный код, но вы должны быть в состоянии использовать комбинацию document.getElementById (), document.createElement ('td') и appendChild ().

Somethingнапример: document.getElementById ('classes'). appendChild (newChild);

В качестве примечания: Квентин полностью прав насчет семантических вопросов: XHTML вряд ли будет правильным выбороми макеты не табличного содержимого на основе таблиц крайне устарели.Однако я понимаю, что это для проекта класса, поэтому у вас может не быть выбора.

...