Как вывести javascript в html
IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.
Алгоритмический язык программирования JavaScript. Методы вывода данных в JavaScript alert (), confirm и document.write (). Вставка JavaScript в HTML страницы
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Это моя первая публикация в рубрике Заметки о JavaScript. Хочу сказать, что мои скромный ресурс не претендовал, не претендует и не будет претендовать на всесторонность, а сам автор никогда не был и не будет web гуру. На страницах своего блога я совершаю попытку простым и понятным для людей языком рассказать об основах различных web технологий. И эта рубрика будет посвящена интерпретируемому языку программирования с объектно-ориентированными возможностями JavaScript.
Помимо выше сказанного, JavaScript является алгоритмическим языком (то есть, при помощи JavaScript мы как бы даем указание браузеру, как ему реагировать на определенные действия пользователя). В рубрики Заметки о HTML, а конкретно в статье, про структуру HTML-документа, мы с вами уже поговорили, из каких трех базовых элементов состоят наши страницы: HTML, HEAD и BODY.
Но простые статичные HTML страницы это же так скучно и не интересно, а нам бы хотелось добавить немного динамики и увеличить количество способов взаимодействия с посетителями наших сайтов.
Думаю, что вы знаете общую схему взаимодействия браузера с сервером, и каких-то особых пояснений не требуется. Простые HTML-страницы, это грубо говоря, обычный набор HTML элементов нарисованных для нас браузером, а ведь иногда требуется взаимодействие с клиентом и причем такое взаимодействие, которое не несло бы нагрузку на сервер нашего хостинг провайдера, когда какие-то изменения в HTML страницу пользователь может вносить не делая запрос к серверу, а прямо со своего компьютера.
И в основном для таких задач используется язык JavaScript, который встраивается в HTML-страницы, первый браузер, который поддерживал JavaScript, был Netscape Navigator, собственно программисты Netscape и придумали этот язык.
Из всего выше сказанного понятно, что для того что бы начать программировать на JavaScript достаточно web-браузера, и простого текстового редактора(желательно с подсветкой синтаксиса, такой как Notepad++). То есть для программирования на JavaScript, нам не нужны ни сервера типа Apache, MySQL, ни готовые сборки типа Denwer. Так же хочу сказать, что JavaScript используется не только с клиентской стороны, но и со стороны серверных приложений, в различных Java-приложения, но на страницах своего проекта, я буду говорить только о клиентском JavaScript.
Если же вы захотите понять все нюансы и тонкости написания сценариев на JavaScript – то я рекомендовал бы приобрести себе книгу «JavaScript подробное руководство», автор Дэвид Флэнаган, издательство O’Reilly (у самого имеется 5-ое издание этой книги). Полезнее этой книги для понимания сути происходящего может быть только постоянная практика написания JavaScript сценариев.
Что такое JavaScript. Для чего используется JavaScript. Область применения JavaScript.
Внутри тегов написана программа на языке JavaScript, которая вычисляет факториалы чисел от 1 до 9 и выводит результат на экран. Можете попробовать скопировать данный пример в свой текстовый редактор, сохранить его в формате HTML и посмотреть результат работы в браузере.
Для самых ленивых привожу скрин результата работы программы:
Тут стоит немного пояснить, как вы знаете, факториал нуля равен единице. Но интерпретатору JavaScript это неизвестно, поэтому считать факториалы я начал с единицы.
Устаревший способ вставки сценариев JavaScript в HTML страницу. Тэг размещайте свой код написанный на JavaScript. Я бы не советовал использовать вам такой способ вставки, хотя в принципе работать он должен.
Что делать, если пользователь отключил поддержку JavaScript в браузере. Или что делать если браузер не поддерживает JavaScript.
Все дело в том, что содержимое элемента NOSCRIPT, будет отображаться только тогда, когда браузер не поддерживает работу со скриптами или их поддержка отключена. Думаю, что на некоторых страницах сайтов было бы неплохо размещать этот тэг, с пояснениями, что будет доступно посетителю после того как он включит поддержку JavaScript сценариев например.
Естественно, что для вставки в HTML страницы нужно использовать первый способ вставки JavaScript-кода в HTML-документы, так же вы можете использовать просто тэг
Результатом данного примера будет вывод надписи Hello, world! в открытом окне браузера. Синтаксис очень простой, строка, заключенная в парный тэг
берется в двойные кавычки вместе с открывающим и закрывающим тэгом. После выполнения сценария, браузер создает новый элемент P, содержанием которого является строка “Hello, world!”. Если же мы захотим вывести на экран содержание переменной, то ее в кавычки брать не надо. А достаточно просто передать методу write () объекта document.
Обратите внимание, что исходный код HTML-страницы после выполнения JavaScript сценария не изменяется, а вот код HTML элементов изменится, на страницу, формируемую браузером, добавляются новые элементы, которые опять же, грубо говоря, мы передаем методу write (). И так document.write () вносит изменения в HTML документ.
Второй способ в JavaScript вывести информацию в окно браузера – метод alert ().
Метод alert () – это метод JavaScript объекта window, он выводит нам окно предупреждение с текстовым сообщением и кнопкой OK. То есть никаких новых элементов на странице, как в случае с document.write (), метод alert () не создает. Но переменную, которая будет хранить строковые, либо числовые типы данных метод alert () выведет без проблем.
Третий способ в JavaScript вывести информацию в окно браузера – метод confirm ().
Метод confirm () — метод JavaScript объекта window, он выводит нам диалоговое окно, с двумя кнопками «ОК» и «Отмена». Так же как и в случае с методом alert (), метод confirm () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.
В примере, переменной “a” я присвоил значение “ZamrtkiNaPolyah.ru?”, и передал её методу confirm () так же я передал этому методу две строки «Нравится ли Вам мой блог » и «??», а так же соединил все это вместе при помощи оператора конкатенации + (склейки строк). После чего в окне браузера появилось диалоговое окно, с переданной строкой и двумя кнопками “Ok” и «Отмена».
Разница между размещением JavaScript-кода в BODY и HEAD.
Предлагаю теперь посмотреть, изменится ли что-нибудь в отображение нашего документа, от того, где мы поместим сценарий JavaScript, внутрь элемента BODY или внутрь элемента HEAD. А так же посмотрим, что произойдет со страницей, если мы напишем сначала document.write, а затем alert или confirm и наоборот.
Теперь давайте изменим пример и напишем, тот код, который находился ниже метода alert () над ним и посмотрим, что у нас получится.
А получится у нас следующее:
Так же как и в прошлый раз у нас появляется окно с предупреждением, но на HTML-страницы уже отображены результаты вычисления факториала, которые мы вывели, с помощью document.write. Из всего вышесказанного и увиденного следует несколько интересных особенностей, метод alert () или confirm останавливает выполнение JavaScript кода, до того момента, пока окно не будет закрыто или не нажато ОК, в случае с методом confirm (), если не будет соответствующих инструкций «Отмена» тоже можно жать. А вот document.write () ничего не останавливает, а дописывает нужную строчку. Что бы разобраться, куда document.write дописывает строчку, нужно попробовать разместить JavaScript-код внутрь элемента BODY. Но перед этим давайте создадим на нашей HTML странице какой-нибудь заголовок. В итоге у нас получится следующее:
И видим, что вначале у нас появилось окно с предупреждением, которое остановило выполнение JavaScript кода, но вместе с окном на странице появился заголовок (т.к. заголовок прописан в коде HTML страницы и браузер его обрабатывает отдельно от сценария JavaScript), а затем уже выполнилась оставшаяся часть скрипта, и document.write () вывел результаты вычисления факториала, сразу после заголовка H2. То есть при размещение document.write () внутри элемента BODY, строки будут дописываться именно в том место HTML-страницы, в котором расположен document.write. А в случае, когда JavaScript код, а точнее document.write расположен внутри элемента HEAD, метод write () новые строчки дописывает сразу после открывающего тэга :
Можете в этом убедиться, просто скопировав данный пример в текстовый редактор и сохранив его в формате HTML, после чего откройте его в браузере и посмотрите код элементов HTML-страницы, если вы используете Mozilla FireFox, то для просмотра кода элементов страницы используйте плагин для верстальщика FireBug.
Как мы видим, возможности document.write сильно ограничены(можно дописывать только строчки и то в строго указанное место), а confirm () и alert () вовсе имеют свое специальное узконаправленное предназначение. Поэтому я предлагаю использовать метод write () объекта document, только для проверки работоспособности наших JavaScript программ, в последствии я расскажу о том какие все-таки методы используются для динамического изменения HTML-страницы при помощи JavaScript.
Методы вывода данных в JavaScript – document.write () и alert (), confirm ()
После того, как мы поговорили о способах встраивания JavaScript кода в HTML-страницы, неплохо было бы посмотреть, какие средства есть у JavaScript, для вывода на экран результатов своей работы. А этих средств не так уж и много, всего-то два.
Первый способ в JavaScript вывести информацию в окно браузера — document.write ().
Если быть совсем уж точным, то следует сказать, что document это объект JavaScript, причем для web разработчика самый важный из встроенных JavaScript объектов, а write (), это метод объекта document, который грубо говоря, предназначен для внесение изменений в код HTML-документа, то есть для добавления новых элементов и текстовых строк в открытую HTML страницу. Но обо всех этих вопросах, я планирую поговорить в других публикациях рубрики «Заметки о JavaScript».
Ну и конечно, я не буду оригинален и мы с вами посмотрим, как при помощи метода write (), объекта document вывести строку «Привет, мир!»(пример)
Результатом данного примера будет вывод надписи Hello, world! в открытом окне браузера. Синтаксис очень простой, строка, заключенная в парный тэг
берется в двойные кавычки вместе с открывающим и закрывающим тэгом. После выполнения сценария, браузер создает новый элемент P, содержанием которого является строка “Hello, world!”. Если же мы захотим вывести на экран содержание переменной, то ее в кавычки брать не надо. А достаточно просто передать методу write () объекта document. Обратите внимание, что исходный код HTML-страницы после выполнения JavaScript сценария не изменяется, а вот код HTML элементов изменится, на страницу, формируемую браузером, добавляются новые элементы, которые опять же, грубо говоря, мы передаем методу write (). И так document.write () вносит изменения в открытый HTML документ.
Второй способ в JavaScript вывести информацию в окно браузера – метод alert ().
Метод alert () – это метод JavaScript объекта window, он выводит нам окно предупреждение с текстовым сообщением и кнопкой OK. То есть никаких новых элементов на странице, как в случае с document.write (), метод alert () не создает. Но переменную, которая будет хранить строковые, либо числовые типы данных метод alert () выведет без проблем. ()
В этом примере мы объявили, то есть создали переменную “a”, а затем инициализировали её (присвоили ей значение — «Джигурда»). После выполнения кода, браузер выводит окно с кнопкой OK. Причем на странице не создается никаких новых элементов. Исходный код и код элементов после выполнения сценария будут одинаковыми.
Третий способ в JavaScript вывести информацию в окно браузера – метод confirm ().
Метод confirm () — метод JavaScript объекта window, он выводит нам диалоговое окно, с двумя кнопками «ОК» и «Отмена». Так же как и в случае с методом alert (), метод confirm () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.
Выводим значение переменной на экран в javascript
О всех способах вывода переменных.
Если бы мы вывели просто так окно с помощью alert, то вы бы ничего не поняли, поэтому:
Сделаем живой пример вывода переменной на экран!
Для этого нам понадобится:
Далее нам потребуется script, где будет объявлена переменная и присвоено ей значение:
Соберем такой простой код вывода переменной на экран:
Выведи переменную на экран
Результат вывода переменной на экран в javascript
Второй способ вывод переменной на экран.
Выведи переменную на экран
Результат использования вывода переменной:
Если мы откроем код с помощью исследовать элемент, то увидим, что неожиданно, кроме нашего вывода, на странице вообще ничего нет!
Результат использования вывода переменной:
Вывод переменной на экран js при загрузке страницы Итак.
Открываем исследовать элемент.
Теперь давайте откроем «исследовать элемент» и посмотрим. как вывод переменной отображается в коде.
Открываем исследовать элемент.
Очередной способ вывода переменной на экран javascript
Для того, чтобы продемонстрировать третий способ вывода переменной на экран нам понадобится:
Любой элемент Dom div, куда будем выводить переменную.
Мы должны обратиться к тегу это будет id
Далее script + функция в которой есть переменная «newvar» со значением «Третий способ вывода переменной».
Далее с помощью innerHTML будем передавать значение переменной в выше показанный «div «
Еще нам нужна кнопка button.
Где будет onclick, по нажатию будет запускать выполнение выше приведенной функции.
Выведи переменную на экран
Результат вывода переменной на экран javascript
Как вывести переменную в консоль js
Не будем тянуть кота за хвост и сразу перейдем к коду.
В этом примере будем выводить переменную в console
Возьмем выше приведенный код и добавим вместо «innerHTML» → «console.log»!
Выведи переменную в консоль
Вывести переменную в консоль:
И нажмите кнопку «Выведи переменную в консоль«
Выведи переменную в консоль
Вот такой вывод переменной должен получиться:
Сообщение системы комментирования :
Форма пока доступна только админу. скоро все заработает. надеюсь.
Использование JavaScript на веб-страницах
Клиентский JavaScript-код может встраиваться в HTML-документы четырьмя способами:
встроенные сценарии между парой тегов ;
из внешнего файла, заданного атрибутом src тега :
В языке разметки XHTML содержимое тега
Сценарии во внешних файлах
Использование тега с атрибутом src дает ряд преимуществ:
HTML-файлы становятся проще, т.к. из них можно убрать большие блоки JavaScript-кода, что помогает отделить содержимое от поведения.
JavaScript-функцию или другой JavaScript-код, используемый несколькими HTML-файлами, можно держать в одном файле и считывать при необходимости. Это уменьшает объем занимаемой дисковой памяти и намного облегчает поддержку программного кода, т.к. отпадает необходимость править каждый HTML-файл при изменении кода.
Атрибут src принимает в качестве значения произвольный URL-адрес, поэтому JavaScript-программа или веб-страница с одного веб-сервера может воспользоваться кодом (например, из библиотеки подпрограмм), предоставляемым другими веб-серверами. Многие рекламодатели в Интернете используют этот факт.
Возможность загружать сценарии с других сайтов еще больше увеличивает выгоды, получаемые от кэширования: компания Google продвигает использование стандартных, хорошо известных URL-адресов для часто используемых клиентских библиотек, что позволяет браузерам хранить в кэше единственную копию, совместно используемую многими сайтами в Веб. Привязка сценариев JavaScript к серверам компании Google может существенно уменьшить время запуска веб-страниц, поскольку библиотека наверняка уже будет храниться в кэше браузера пользователя, но при этом вы должны доверять стороннему программному коду, который может оказаться критически важным для вашего сайта. За дополнительной информацией обращайтесь по адресу: code.google.com/apis/ajaxlibs/.
Возможность загрузки сценариев со сторонних серверов, отличных от тех, где находятся документы, использующие эти сценарии, влечет за собой важное следствие, имеющее отношение к обеспечению безопасности. Политика общего происхождения предотвращает возможность взаимодействия сценария на JavaScript в документе из одного домена с содержимым из другого домена. Однако следует отметить, что источник получения самого сценария не имеет значения, значение имеет источник получения документа, в который встраивается сценарий.
Таким образом, политика общего происхождения в данном случае неприменима: JavaScript-код может взаимодействовать с документами, в которые он встраивается, даже если этот код получен из другого источника, нежели сам документ. Включая сценарий в свою веб-страницу с помощью атрибута src, вы предоставляете автору сценария (или веб-мастеру домена, откуда загружается сценарий) полный контроль над своей веб-страницей.
Обработчики событий в HTML
JavaScript-код, расположенный в теге
JavaScript-код может регистрировать обработчики событий, присваивая функции свойствам объектов Element (таким как onclick или onmouseover), представляющих HTML-элементы в документе.
Свойства обработчиков событий, такие как onclick, отражают HTML-атрибуты с теми же именами, что позволяет определять обработчики событий, помещая JavaScript-код в HTML-атрибуты. Например:
Обратите внимание на атрибут onClick. JavaScript-код, являющийся значением этого атрибута, будет выполняться всякий раз, когда пользователь будет щелкать на кнопке.
Атрибуты обработчиков событий, включенных в разметку HTML, могут содержать одну или несколько JavaScript-инструкций, отделяемых друг от друга точками с запятой. Эти инструкции будут преобразованы интерпретатором в тело функции, которая в свою очередь станет значением соответствующего свойства обработчика события.
Однако обычно в HTML-атрибуты обработчиков событий включаются простые инструкции присваивания или простые вызовы функций, объявленных где-то в другом месте. Это позволяет держать большую часть JavaScript-кода внутри сценариев и ограничивает степень взаимопроникновения JavaScript и HTML-кода. На практике многие веб-разработчики считают плохим стилем использование HTML-атрибутов обработчиков событий и предпочитают отделять содержимое от поведения.
JavaScript в URL
«Ресурсом», который определяется URL-адресом javascript:, является значение, возвращаемое этим программным кодом, преобразованное в строку. Если программный код возвращает значение undefined, считается, что ресурс не имеет содержимого.
Некоторые браузеры (такие как Firefox) выполняют программный код в URL и используют возвращаемое значение в качестве содержимого нового отображаемого документа. Точно так же, как при переходе по ссылке http:, браузер стирает текущий документ и отображает новое содержимое. Значение, возвращаемое примером выше, не содержит HTML-теги, но если бы они имелись, браузер мог бы отобразить их точно так же, как любой другой HTML-документ, загруженный в браузер.
Если необходимо гарантировать, что URL-адрес javascript: не затрет документ, можно с помощью оператора void обеспечить принудительный возврат значения undefined:
Без оператора void в этом URL-адресе значение, возвращаемое методом Window.open(), было бы преобразовано в строку и (в некоторых браузерах) текущий документ был бы затерт новым документом.
В этой главе будет рассказано о методах вывода информации силами ActionScript. По традиции в качестве выводимых данных используется строка “Hello World”. В данной же статье мы выведем на экран эту строку тремя разными способами.
Первый вариант вывода информации (функция writeln).
Самый простой и популярный способ вывести информацию на экран – это функция document.writeln(string). Нижу приведен пример:
После вызова этой функции все прежде существующее содержимое страницы будет заменено на новое. В данном случае на строку “Hello World”. Поэтому рекомендуется использовать эту функцию только при загрузке страницы, если все содержимое создается усилиями JavaScript. Также эта функция очень полезная в ситуациях, когда необходимо сократить количество обращений к серверу. Один раз скачанный файл с исходным кодом может порождать несколько различных страниц в полностью автономном режиме.
Второй вариант вывода информации (функция alert).
Функция alert(string) очень хорошо подходит для отладки кода, но не для конечного использования. После ее вызова перед пользователем появится окошко с надписью и кнопкой “Ok”. Рекомендуется не использовать подобные всплывающие окна в реальных веб-сайтах, так как они очень сильно раздражают посетителей и часто блокируются различными плагинами браузера. Пример использования функции для отладки:
После выполнения этого когда перед вами появится стандартное окно Windows (или Linux, или Mac OS) всего лишь с одним вариантом ответа. Никакие взаимодействия со страницей до нажатия на кнопку “Ok” невозможны.
Третий вариант вывода информации (функция getElementById).
Самый мощный и часто используемый способ – это использование функции getElementById(tagId).
Далее важный абзац, который стоит читать медленно и вдумчиво.
Все в HTML коде может иметь параметр ID. Любой тэг имеет вложенную в него строку (строка может быть и пустой). Через ID тэга можно обратиться к его содержимому и, соответственно, изменить. При этом другие тэги затронуты не будут. Пример:
В этом коде первым делом будет сделано обращение к документу (document), затем взят указатель на элемент-тэг, имеющий id равный “placeForText” (getElementById(“placeForText”)), а после, с помощью функции innerHTML, взят указатель на содержимое этого элемента-тэга. Используя равенство мы присваиваем содержимому элемента новое значение.
Такой подход намного лучше двух предыдущих по двум причинам: отсутствие назойливых всплывающих сообщений, возможность редактировать только часть HTML страницы. Естественно, при использовании такой функции возможен и следующий вариант:
При выполнении этого кода внутрь элемента
Такой же механизм использован на страницах с регистрацией новых пользователей. На странице расположены две ключевых области: одна пустая, вторая с формой, которую необходимо заполнить. Если пользователь пропускает какое-нибудь поле или вводит неправильную информацию и пытается отправить форму на сервер, то скрипт, ответственный за валидацию введенных данных, обнаруживает ошибку и выводит красную надпись в пустую область, не модифицируя остальную страницу.
В этой статье были разобраны все основные варианты вывода текста (чисел и других переменных, представимых в текстовом виде) на экран. В следующей статье “Шпаргалка по JavaScript №3 – Ввод информации” будет рассказано об обратном процессе.
В этой статье разберем, что такое JavaScript и для чего он нужен. Кроме этого, рассмотрим способы подключения кода JavaScript (сценариев) к странице.
Что такое JavaScript
Потребность в создании языка программирования для браузера появилась ещё в 90-е годы. В это время на веб-страницах хотелось делать уже больше, чем просто выводить статичный контент.
В 1996 году язык JavaScript был стандартизован компанией Ecma, которая занимается стандартизацией информационных и коммуникационных технологий. Сама спецификация была названа ECMAScript или сокращённо ES. По сути, JavaScript является реализацией спецификации ECMAScript. Новые версии ECMAScript выходят ежегодно и добавляют в язык новые возможности.
В настоящее время язык JavaScript уже применяется не только для веба. С помощью него можно написать обычные приложения для десктопных и мобильных операционных систем, использовать его в роли серверного языка (node.js) и др.
Виды браузеров и браузерных движков
Основные современные движки и браузеры, которые их используют:
Как осуществляется подключения кода JavaScript к странице
С помощью этого способа вы можете подключить JavaScript код к большому количеству HTML страниц. В этом случае при изменении кода скрипта не придётся его редактировать на каждой странице, к которой он подключён.
Если подключить скрипт с помощью атрибута src и дополнительно ещё указать некоторый код между открывающим и закрывающим тегом script этого элемента, то код, который указали непосредственно, будет проигнорирован, т.е. он не выполниться.
Как выполняются скрипты на странице
В этом примере используются 2 метода JavaScript:
На этом этапе увидим следующую картинку:
Атрибуты async и defer
Второе отличие от async заключается в том, что будет сохранена очерёдность выполнения скриптов.