Jump to content
  • 0

JS и DOCTYPE

Ivan-P

Asked by Ivan-P,

 Share

Question

Ivan-P Explorer

Ivan-P

Posted
Posted

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

Начал учить код по книге 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
Николя223 Explorer

Николя223

Posted
Posted (edited)

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

Edited by Николя223
  • Like 1
Link to comment
Share on other sites
  • 0
Crystal-3 Explorer

Crystal-3

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

 

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

  • Like 3
Link to comment
Share on other sites
  • 0
Crystal-3 Explorer

Crystal-3

Posted
Posted

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

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

<!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
Crystal-3 Explorer

Crystal-3

Posted
Posted

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

 

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

 

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

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

Не работает.

 

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

Link to comment
Share on other sites
  • 0
Crystal-3 Explorer

Crystal-3

Posted
Posted

Может так вам надо? (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
SelenIT Explorer

SelenIT

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

 

Это всё как раз потому, что 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
Crystal-3 Explorer

Crystal-3

Posted
Posted

Попробуйте вместо 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
Vin Explorer

Vin

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
Ivan-P Explorer

Ivan-P

Posted
  • Author
Posted

 

Попробуйте вместо 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
Go to question listing
×
×
  • 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

  I accept