Шпаргалка по JavaScript №12 - Теперь все вместе

Опубликовано maxpestun, 27 Дек 2010

В этой шпаргалке описано веб-приложение целиком. Определен код HTML, JavaScript и связь между ними. Информационно нового здесь ничего узнать нельзя, зато можно увидеть, как должен выглядеть код целиком.

Все вместе.

Для начала определим HTML код:

<html>
    <head>
        <title>My First Javascript</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Теперь создадим два элемента для взаимодействия с пользователем: поле для ввода текста и меню для выбора числа. Наш код будет печатать введенную фразу указанное число раз при нажатии кнопки (третьего элемента для взаимодействия с пользователем :-) ):

<html>
    <head>
        <title>My First Javascript</title>
    </head>
    <body>
        Hello World!
        <p>Say what? <input id="sayThis" size=40>
        <P>How many times? <select id='howMany'>
            <option value=1>1</option>
            <option value=5 selected>5</option>
            <option value=10>10</option>
            <option value=20>20</option>
        </select>
        <p><button onClick='doLoop()'>Do It!</button>
    </body>
</html>

Для связи кода HTML и JavaScript используются ID тэгов. Код JavaScript следующий:

function doLoop() {
    var sayWhat = document.getElementById('sayThis').value;
    var maxLoop = document.getElementById('howMany').value;
    var str = ''; // здесь будет храниться итоговая строка.
    for (var i=1; (i<=maxLoop); i++) {
        str=str+i+':'+sayWhat+'<br>';
    }
    document.getElementById("results").innerHTML=str;
}

Теперь на всякий случай приведу весь текст страницы целиком:

<html>
    <head>
        <title>My First Javascript</title>
    </head>
    <body>
        Hello World!
        <p>Say what? <input id="sayThis" size=40>
        <P>How many times? <select id='howMany'>
            <option value=1>1</option>
            <option value=5 selected>5</option>
            <option value=10>10</option>
            <option value=20>20</option>
        </select>
        <p><button onClick='doLoop()'>Do It!</button>
        <p><div id="results"></div>
        <script type='text/html'>
            function doLoop() {
                var sayWhat = document.getElementById('sayThis').value;
                var maxLoop = document.getElementById('howMany').value;
                var str = ''; // здесь будет храниться итоговая строка.
                for (var i=1; (i<=maxLoop); i++) {
                    str=str+i+':'+sayWhat+'<br>';
                }
                document.getElementById("results").innerHTML=str;
            }
        </script>
    </body>
</html>

Итог.

Вот мы и разобрали почти весь JavaScript. Конечно, можно изучать язык глубже, однако для старта или понимания, что происходит на странице этих шпаргалок более чем достаточно. Используя их можно написать любой сложности код, который будет легко понимаем другими программистами, так как он не будет содержать каких-либо “специфических особенностей” ситнаксиса. Удачного программирования!

maxpestun's блог

Новости


	Ой, всё 10 Сен 2015
	Форум OSSPortal временно переведён в read-only 21 Июн 2015
	Релиз Alvex 2015.02 Community 07 Фев 2015