Jump to content
  • 0

JS и DOCTYPE


Ivan-P
 Share

Question

Дамы и господа!

Начал учить код по книге HeadFirst "Изучаем JavaScript".

Есть вот такой код:

 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>iRock</title>
        <link href="style.css" rel="stylesheet">
        <script>
         
            function resizeRock() {
                document.getElementById("rockImg").style.height = (document.body.clientHeight - 100)*0.9;
            }

            
            function greetUser() {
                alert('Hello, I am your pet rock');
            }
            
            function touchRock() {
                var userName = prompt("Как Вас зовут?", "Введите ваше имя.");
                if (userName) {
                    alert("Рад Вас видеть " + userName + ".");
                    document.getElementById("rockImg").src="rock2.png";
                }
            }
            setInterval("document.getElementById('rockImg').src='rock.png';",2000);    
        </script>
        </head>
    <body onload = "resizeRock(); greetUser();">
        <div>
            <img src="rock.png" alt="iRock" id="rockImg" onclick = "touchRock();">
        </div>
    </body>    
</html>

 

Картинка должна менятся в зависимости от размеров окна. Но resizeRock()   работает только если убрать <!DOCTYPE HTML>

  • Like 1
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Если я правильно помню лекции Selenit - а, то в режиме совместимости можно вписывать стили без указания едениц измерения.   С доктайпом - их же нужно писать, например "100px"

Edited by Николя223
  • Like 1
Link to comment
Share on other sites

  • 0

Ivan-P, знаю эту книгу. Так вот почему я не смогла осилить это задание) А в их примере доктайпа нет.

SelenIt, я все же не могу понять, почему не работает с доктайпом? Мне ж теперь тоже интересно, я столько времени потратила, пытаясь найти причину, а оно вот что оказывается)

Link to comment
Share on other sites

  • 0

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

 

Вторая проблема - в Quirks mode элемент body по умолчанию подхватывает высоту вьюпорта, в стандартном режиме он по умолчанию имееет высоту контента, а высоту вьюпорта подхватывает корневой элемент (aka html, аka document.documentElement).

  • Like 3
Link to comment
Share on other sites

  • 0

Ребята, это какой-то замкнутый круг!

Пытаюсь исправить этот код, упростила до минимума, здесь нет вообще единиц измерения:

<!doctype html><html>  <head>    <meta charset="UTF-8">    <title>iRock</title>    <script type="text/javascript">		function resizeRock() {        document.getElementById("rockImg").style.height = document.body.clientHeight;      }	</script>  </head>  <body onload="resizeRock();" onresize="resizeRock();">    <div>      <img id="rockImg" src="rock.png" alt="iRock">    </div>  </body></html>

Высота картинки должна подстраиватся под высоту клиентского окна.

Но нет, опять работает только без доктайпа.

Ох, уж этот JS...

 

Link to comment
Share on other sites

  • 0

Я поняла объяснение SelenIT, спасибо ему большое.

 

Николя223, именно так я и начинала исправления: отнимаю 100рх и умножаю на 90%.

 

Один из вариантов, а их было много, так как не уверена в синтаксисе:

document.getElementById("rockImg").style.height = (document.body.clientHeight - "100px") * "90%";

Не работает.

 

В итоге я упростила код, чтоб не было вообще единиц измерения, но и он нерабочий, вернее работает, но без доктайпа.

Link to comment
Share on other sites

  • 0

Может так вам надо? (document.body.clientHeight - 100) * 0.9 + 'px';

 

Спасибо Вам за отклик, но увы...

Реакция как бы есть, но совсем не то что нужно: картинка стала совсем маленькой и вообще не реагирует на изменения высоты браузера.

 

Если добавляю в свой предыдущий код

 

document.getElementById("rockImg").style.height = document.body.clientHeight+"px";

 

 

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

 

Видимо у меня совсем кривые руки.

Ну а книгу однозначно в топку, вместо того чтобы научить, она меня только запутала, даже пропало желание изучать JS.

Link to comment
Share on other sites

  • 0
картинка стала совсем маленькой и вообще не реагирует на изменения высоты браузера
вообще кошмар - картинка (а это такой серый камушек) постоянно увеличивается, независимо уменьшают или увеличивают высоту браузера. В итоге этот камень вырастает до громадных размеров.

 

Это всё как раз потому, что document.body в стандартном режиме не похватывает размеры окна браузера, а растягивается по контенту. А поскольку контент в данном случае - сама картинка, плюс еще у body, скорее всего, есть дефолтные 8-пиксельные padding-и, плюс под картинкой 5-пиксельный отступ из-за display:inline; vertical-align:baseline, то и получается, что при каждом событии картинке присваивается высота, где-то на 20-21px больше предыдущей.

 

Попробуйте вместо document.body отталкиваться от document.documentElement.

  • Like 2
Link to comment
Share on other sites

  • 0

Попробуйте вместо document.body отталкиваться от document.documentElement.

 

Супер, работает! Ну наконец-то мой камень-неадекват сдался ;)

 

SelenIT, спасибо огромное за такое подробное объяснение, без Вашей помощи я бы никогда не справилась.

Вот и учись после этого по таким учебникам)

 

Специально для ТС (может ещё заглянет) рабочий вариант кода:

function resizeRock() {    document.getElementById("rockImg").style.height = (document.documentElement.clientHeight - 100) * 0.9 + 'px';      }
  • Like 1
Link to comment
Share on other sites

  • 0

У меня тоже был такой учебник, но я его почти не читал, т.к. даже тогда (2 года назад) был староват и примитивен, мягко говоря.

Если уже есть опыт программирования, читайте лучше Фленагана. Если же JS для вас – первый язык, попробуйте http://www.codecademy.com

Link to comment
Share on other sites

  • 0

 

Попробуйте вместо document.body отталкиваться от document.documentElement.

 

Супер, работает! Ну наконец-то мой камень-неадекват сдался ;)

 

SelenIT, спасибо огромное за такое подробное объяснение, без Вашей помощи я бы никогда не справилась.

Вот и учись после этого по таким учебникам)

 

Специально для ТС (может ещё заглянет) рабочий вариант кода:

function resizeRock() {    document.getElementById("rockImg").style.height = (document.documentElement.clientHeight - 100) * 0.9 + 'px';      }

Спасибо! Но что-то по этой книге перехотелось учится))

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy