Шпаргалка по JavaScript №2 - Вывод информации.

Опубликовано maxpestun, 25 Ноя 2010

В этой главе будет рассказано о методах вывода информации силами ActionScript. По традиции в качестве выводимых данных используется строка “Hello World”. В данной же статье мы выведем на экран эту строку тремя разными способами.

Первый вариант вывода информации (функция writeln).

Самый простой и популярный способ вывести информацию на экран – это функция document.writeln(string). Нижу приведен пример:

<html>
    <head>
    </head>
    <body>
        <script type='text/javascript'>
            document.writeln('Hello World!');
        </script>
    </body>
</html>

После вызова этой функции все прежде существующее содержимое страницы будет заменено на новое. В данном случае на строку “Hello World”. Поэтому рекомендуется использовать эту функцию только при загрузке страницы, если все содержимое создается усилиями JavaScript. Также эта функция очень полезная в ситуациях, когда необходимо сократить количество обращений к серверу. Один раз скачанный файл с исходным кодом может порождать несколько различных страниц в полностью автономном режиме.

Второй вариант вывода информации (функция alert).

Функция alert(string) очень хорошо подходит для отладки кода, но не для конечного использования. После ее вызова перед пользователем появится окошко с надписью и кнопкой “Ok”. Рекомендуется не использовать подобные всплывающие окна в реальных веб-сайтах, так как они очень сильно раздражают посетителей и часто блокируются различными плагинами браузера. Пример использования функции для отладки:

<html>
    <head>
    </head>
    <body>
        <script type='text/javascript'>
            alert('Hello World!');
        </script>
    </body>
</html>

После выполнения этого когда перед вами появится стандартное окно Windows (или Linux, или Mac OS) всего лишь с одним вариантом ответа. Никакие взаимодействия со страницей до нажатия на кнопку “Ok” невозможны.

Третий вариант вывода информации (функция getElementById).

Самый мощный и часто используемый способ – это использование функции getElementById(tagId).

Далее важный абзац, который стоит читать медленно и вдумчиво.

Все в HTML коде может иметь параметр ID. Любой тэг имеет вложенную в него строку (строка может быть и пустой). Через ID тэга можно обратиться к его содержимому и, соответственно, изменить. При этом другие тэги затронуты не будут. Пример:

<html>
    <head>
    </head>
    <body>
        <div id='placeForText'></div>
            <script type='text/javascript'>
                 document.getElementById('placeForText').innerHTML='Hello     World!';
            </script>
    </body>
</html>

В этом коде первым делом будет сделано обращение к документу (document), затем взят указатель на элемент-тэг, имеющий id равный “placeForText” (getElementById(“placeForText”)), а после, с помощью функции innerHTML, взят указатель на содержимое этого элемента-тэга. Используя равенство мы присваиваем содержимому элемента новое значение.

Такой подход намного лучше двух предыдущих по двум причинам: отсутствие назойливых всплывающих сообщений, возможность редактировать только часть HTML страницы. Естественно, при использовании такой функции возможен и следующий вариант:

<html>
    <head>
    </head>
    <body>
        <div id='feedback'></div>
            <script type='text/javascript'>
                document.getElementById('feedback').innerHTML='<P><font  color=red>Hello World!</font>';
            </script>
    </body>
</html>

При выполнении этого кода внутрь элемента <div> будет вставлен отформатированный текст с использованием HTML тэгов. То есть мы вставляем HTML внутрь HTML. На экране появится уже привычный нам текст “Hello World!”, однако написан он будет красным цветом.

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

Итог.

В этой статье были разобраны все основные варианты вывода текста (чисел и других переменных, представимых в текстовом виде) на экран. В следующей статье “Шпаргалка по JavaScript №3 – Ввод информации” будет рассказано об обратном процессе.

2465
  • maxpestun's блог