Вывод html с помощью javascript

Введение в JavaScript — простой вывод

Изучение Node.js, JQuery, и Angular.js может быть очень веселым, но я думаю, что иметь некие базовые знания очень важно, и знать, как использовать простой JavaScript. Эта серия статей посвятит вас в JavaScript.

Прежде, чем мы перейдем к синтаксису, давайте узнаем, где мы можем запустить JavaScript.

Традиционно JavaScript использовался внутри браузеров, таких как Mozilla Firefox, Internet Explorer, Chrome, Opera, или Safari. Авторы добавляют JavaScript код в HTML страницы, которые получают пользователи, посещая веб-сайт. JavaScript код выполняется в браузере (то, что мы называем «на стороне клиента», в отличие от запуска «на стороне сервера»).

Обратите внимание

В последнее время люди начали использовать JavaScript также и на сервере. Возможно, самая известная среда для работы JavaScript на сервере это Node.js, но есть и другие. К примеру, io.js (форк от Node.js).

Мы можем выделить три основные части того, что мы обычно называем «JavaScript».

  1. Сам язык. Он достаточно стандартный среди различных сред, как на стороне браузера, так и сервера.
  2. DOM API — как язык может взаимодействовать с различными частями веб страницы в браузере.

    И, хотя с этой стороны браузеры достаточно близки друг к другу, все же они отличаются. Некоторые библиотеки, особенно заметна Query, пытаются предоставлять унифицированный API.

  3. API на сервере (или просто API), предоставляемый Node.

    js или одной из других систем на стороне сервера.

В этой серии статей мы посмотрим все три основных компонента.

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

Редактор или IDE

Можно использовать любой текстовый редактор.

На MS Windows вы можете использовать даже встроенный Notepad, но я бы рекомендовал что-нибудь более функциональное. Вы можете скачать Notepad++, который очень похож на Notepad, но с кучей разных фич, или Aptana Studio. Научиться работать в последней будет сложнее, так что возможно, вы заходите начать с чего-то попроще.

Вставка или подключение

Вы можете как вставить JavaScript код прямо внутрь HTML файла, так и подключить внешний файл, содержащий весь JavaScript код. В большинстве случаев последнее предпочтительнее, но для нашего первого примера мы вставим JavaScript внутрь некоего HTML (просто для того, чтобы делать всю работу в одном файле).

Чтобы это сделать, мы просто добавляем открывающий тег . Между ними мы пишем наш JavaScript код.

Ввод и вывод

Самое первое, что нам нужно узнать, это как взаимодействовать с кодом JavaScript, работающим в браузере. Есть несколько способов, которыми JavaScript может показать текст для пользователя (вывод). Самый простой — функция alert:

alert

Это покажет в браузере всплывающее окно (попап) с текстом. (Вы можете нажать Try! и страница откроется в отдельном окне). Функция alert() сейчас используется редко, но это простой способ продемонстрировать работу JavaScript.

examples/js/alert.html
Try!

Если хотите попробовать сделать это самостоятельно, откройте ваш редактор и создайте файл с расширением .html (например, hello.html) и вставьте код ниже в ваш файл. Затем вернитесь в браузер и откройте файл в браузере (большиство браузеров позволяет это сделать с помощью меню File/Open File).

document.write

examples/js/document_write.html
First line

Last line Try!

В этом примере у нас есть некоторый текст (First line), затем JavaScript код, а затем еще немного текста (Last line). Этот код на JavaScript использует функцию document.write для изменения содержимого страницы. Он просто вставит

Hello World

после «First line», но до «Last line».

Эта функция часто использовалась, когда нужно было изменить что-то отображаемое на странице. Сегодня есть более продвинутые способы.

console.log

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

examples/js/console.html
Try!

Большинство веб-браузеров предоставляют то, что называется «JavaScript console». Это дополнительное окно (которое не видно в нормально режиме), где браузер выводит предупреждения и ошибки, сгенерированные кодом JavaScript. Разработчики также могут выводить информацию в эту консоль с помощью вызова console.log().

Для того, чтобы увидеть консоль, вам нужно будет ее открыть. Если вы используете Chrome на OSX вы можете открыть консоль с помощью Command-Option-J.

Источник: https://ru.code-maven.com/introduction-to-javascript

IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов

. Есть несколько способов вставить JavaScript сценарий в код HTML страницы.

Пример HTML страницы:

Правильный способ вставки JavaScript-кода в HTML документ. Тэг , у тэга написана программа на языке JavaScript, которая вычисляет факториалы чисел от 1 до 9 и выводит результат на экран. Можете попробовать скопировать данный пример в свой текстовый редактор, сохранить его в формате HTML и посмотреть результат работы в браузере.

Для самых ленивых привожу скрин результата работы программы:

Тут стоит немного пояснить, как вы знаете, факториал нуля равен единице. Но интерпретатору JavaScript это неизвестно, поэтому считать факториалы я начал с единицы.

Устаревший способ вставки сценариев JavaScript в HTML страницу. Тэг размещайте свой код написанный на JavaScript. Я бы не советовал использовать вам такой способ вставки, хотя в принципе работать он должен.

Что делать, если пользователь отключил поддержку JavaScript в браузере. Или что делать если браузер не поддерживает JavaScript

За нас уже все придумали и особо размышлять тут не над чем, для ситуаций, когда у пользователя в настройках браузера отключена поддержка JavaScript, или браузер не поддерживает JavaScript, существует парный тэг , в него не надо помещать никаких сценариев, а вот написать, между открывающим тэгом и закрывающим тэгом , что-нибудь типа «Мужик, в настройках твоего браузера отключены скрипты или он не поддерживает их вовсе» стоит.

Все дело в том, что содержимое элемента NOSCRIPT, будет отображаться только тогда, когда браузер не поддерживает работу со скриптами или их поддержка отключена. Думаю, что на некоторых страницах сайтов было бы неплохо размещать этот тэг, с пояснениями, что будет доступно посетителю после того как он включит поддержку JavaScript сценариев например.

Естественно, что для вставки в HTML страницы нужно использовать первый способ вставки JavaScript-кода в HTML-документы, так же вы можете использовать просто тэг и вставлять код без указания атрибута type, современные браузеры вас поймут. А не современные могут и не понять. Но стандартом HTML рекомендован именно первый способ, который я описал.

Методы вывода данных в JavaScript – document.write () и alert (), confirm ()

После того, как мы поговорили о способах встраивания JavaScript кода в HTML-страницы, неплохо было бы посмотреть, какие средства есть у JavaScript, для вывода на экран результатов своей работы. А этих средств не так уж и много, всего-то два.

Первый способ в JavaScript вывести информацию в окно браузера — document.write ()

Если быть совсем уж точным, то следует сказать, что document это объект JavaScript, причем для web разработчика самый важный из встроенных JavaScript объектов, а write (), это метод объекта document, который грубо говоря, предназначен для внесение изменений в код HTML-документа, то есть для добавления новых элементов и текстовых строк в открытую HTML страницу. Но обо всех этих вопросах, я планирую поговорить в других публикациях рубрики «Заметки о JavaScript».

Ну и конечно, я не буду оригинален и мы с вами посмотрим, как при помощи метода write (),  объекта document вывести строку «Привет, мир!»

Метод 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 () выведет без проблем.

Метод write() объекта documentКакой-то заголовок//

В этом примере мы объявили, то есть создали переменную “a”, а затем инициализировали её (присвоили ей значение  — «Джигурда»). После выполнения кода, браузер выводит окно с кнопкой OK. Причем на странице не создается никаких новых элементов. Исходный код и код элементов после выполнения сценария будут одинаковыми.

Третий способ в JavaScript вывести информацию в окно браузера – метод confirm ()

Метод confirm () — метод JavaScript объекта window, он выводит нам диалоговое окно, с двумя кнопками «ОК» и «Отмена». Так же как и в случае с методом alert (), метод confirm () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.

Метод write() объекта documentКакой-то заголовок// a = «ZamrtkiNaPolyah.ru?»;confirm(«Нравится ли Вам мой блог, «+a+»??»);

В примере, переменной “a” я присвоил значение “ZamrtkiNaPolyah.ru?”, и передал её методу  confirm () так же я передал этому методу две строки «Нравится ли Вам мой блог » и «??», а так же соединил все это вместе при помощи оператора конкатенации + (склейки строк). После чего в окне браузера появилось диалоговое окно, с переданной строкой и двумя кнопками “Ok” и «Отмена».

Разница между размещением JavaScript-кода в BODY и HEAD

Предлагаю теперь посмотреть, изменится ли что-нибудь в отображение нашего документа, от того, где мы поместим сценарий JavaScript, внутрь элемента BODY или внутрь элемента HEAD. А так же посмотрим, что произойдет со страницей, если мы напишем сначала document.write, а затем alert или confirm и наоборот.

И так давайте сделаем пример, в котором мы разместим наш скрипт между тэгами , где сначала будет идти метод alert () объекта window, а затем document.write.

Вывод данных в JavaScript// alert(«Для продолжения выполнения скрипта нажмите OK»);document.write(i + «! = » + fact + «Какой-то заголовок

Если вы скопируете и сохраните этот пример в своем текстовом редакторе с расширение .

html, я использую бесплатный редактор с подсветкой синтаксиса Notepad++, то увидите, что сначала у Вас появится окно с текстом-предупреждением.

А только после того как Вы нажмете на кнопку “OK”, начнется исполнение оставшегося кода, то есть посчитается факториал и document.write создаст новые элементы в открытой HTML страницы.

Теперь давайте изменим пример и напишем, тот код, который находился ниже метода alert () над ним и посмотрим, что у нас получится.

Вывод данных в JavaScript// document.write(i + «! = » + fact + «alert(«Для продолжения выполнения скрипта нажмите OK»);Какой-то заголовок

А получится у нас следующее:

Так же как и в прошлый раз у нас появляется окно с предупреждением, но на HTML-страницы уже отображены результаты вычисления факториала, которые мы вывели, с помощью document.write.

Из всего вышесказанного и увиденного следует несколько интересных особенностей, метод alert () или confirm останавливает выполнение JavaScript кода, до того момента, пока окно не будет закрыто или не нажато ОК, в случае с методом confirm (), если не будет соответствующих инструкций «Отмена» тоже можно жать. А вот document.write () ничего не останавливает, а дописывает нужную строчку. Что бы разобраться, куда document.write дописывает строчку, нужно попробовать разместить JavaScript-код внутрь элемента BODY. Но перед этим давайте создадим на нашей HTML странице какой-нибудь заголовок. В итоге у нас получится следующее:

Вывод данных в JavaScriptКакой-то заголовок// document.write(i + «! = » + fact + «alert(«Для продолжения выполнения скрипта нажмите OK»);

И видим, что вначале у нас появилось окно с предупреждением, которое остановило выполнение 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 () может работать, только с элементарными типами данных, то есть со строками, числами и логическими значениями.

В примере, я переменной “a” присвоил значение “ZamrtkiNaPolyah.ru?”, и передал её методу confirm () так же я передал этому методу две строки «Нравится ли Вам мой блог » и «??», а так же соединил все это вместе при помощи оператора конкатенации + (склейки строк). После чего в окне браузера появилось диалоговое окно, с переданной строкой и двумя кнопками “Ok” и «Отмена».

Разница между размещением JavaScript-кода в BODY и HEAD

Предлагаю теперь посмотреть, изменится ли что-нибудь в отображение нашего документа, от того, где мы поместим сценарий JavaScript, внутрь элемента BODY или внутрь элемента HEAD. А так же посмотрим, что произойдет со страницей, если мы напишем сначала document.write, а затем alert или confirm и наоборот.

И так давайте сделаем пример, в котором мы разместим наш скрипт между тэгами …, где сначала будет идти метод alert () объекта window, а затем document.write. (sample)

Если вы скопируете и сохраните этот пример в своем текстовом редакторе с расширение .

html, я использую бесплатный редактор с подсветкой синтаксиса Notepad++, то увидите, что сначала у Вас появится окно с текстом-предупреждением, а только после того как Вы нажмете на кнопку “OK”, начнется исполнение оставшегося кода, то есть посчитается факториал и document.write создаст новые элементы в открытой HTML страницы.

Источник: https://zametkinapolyah.ru/veb-programmirovanie/zametki-po-javascript/algoritmicheskij-yazyk-programmirovaniya-javascript-metody-vyvoda-dannyx-v-javascript-alert-confirm-i-document-write-vstavka-javascript-v-html-stranicy.html

Работа с Формами на JavaScript

Нажатие кнопки

РЕЗУЛЬТАТ:

Нажатие кнопки

Флажок (CHECKBOX)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true — есть, false — нет.

Метод

  • click( ). Вызов этого метода меняет состояние флажка.

Пример

Метод click флажка


Флажок
Состояние флажка можно изменить и этой кнопкой

РЕЗУЛЬТАТ:

Метод click флажка

Переключатель (RADIO)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • length. Количество переключателей в группе.
  • checked. Состояние переключателя: true — переключатель включен, false — выключен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true — есть, false — нет.

Метод

  • click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример

Метод click группы переключателей


Мужской Женский
Состояние переключателей можно изменить и этой кнопкой

РЕЗУЛЬТАТ:

Метод click группы переключателей

Список (SELECT)

Свойства

  • name. Имя объекта.
  • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
  • length. Количество элементов (строк) в списке.
  • options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

  • value. Значение атрибута VALUE.
  • text. Текст, указанный после тега OPTION.
  • index. Индекс элемента списка.
  • selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
  • defaultSelected. Отражает наличие атрибута SELECTED: true — есть, false — нет.

Методы

  • focus( ). Передает списку фокус ввода.
  • blur( ). Отбирает у списка фокус ввода.

Пример

Работа с готовым списком


Чай Кофе Молоко Какао Сок

РЕЗУЛЬТАТ:

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый — свойству selected.

Пример

Динамическое заполнение списка

РЕЗУЛЬТАТ:

Динамическое заполнение списка

Поле ввода (TEXT)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

Заполните анкету


Фамилия:
Имя:
Возраст:
Телефон:

РЕЗУЛЬТАТ:

Заполните анкету

Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.

Текстовая область (TEXTAREA)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое области.
  • value. Текущее содержимое области.

Методы

  • focus( ). Передает области фокус ввода.
  • blur( ). Отбирает у области фокус ввода.
  • select( ). Выделяет содержимое области.

Пример

Отправьте телеграмму


Явка в норме
Явка провалена

РЕЗУЛЬТАТ:

Отправьте телеграмму

Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

Это тестовая область

Поле ввода пароля (PASSWORD)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

Регистрация


Идентификатор:
Пароль:
Проверка пароля:

Как я могу использовать select box как навигационное меню?

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:

Home
Links
Contact Info

Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.

Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением 'self.location =' на 'top.framename.location ='

Как я могу использовать картинку для кнопки submit?

Часто возникает вопрос: «Как инициировать форму по картинке, а не по кнопке submit?» Решение столь же просто, как этот пример:

Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y — не переменные объектов continue или cancel, а фактически часть имени «continue.x». Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:
if (request.normalItem) act();
if (request.

continue.x) // Noooo! Produces horrible error messages! doContinuingThings();
Тем не менее рассмотрите это:
if (request['normalItem']) act();
if (request['continue.x']) // Much better 🙂 doContinuingThings();
Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

Совет

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y.

Следующий серверный JavaScript мог бы использоваться для этого:
x=0;
y=0;
if ((request['my_submit_image.x']) (request['my_submit_image.y'])) { x = parseInt(request['my_submit_image.

x']); y = parseInt(request['my_submit_image.y']);
}

Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах.

Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL.

Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

home.html

Enter your name:

next.html
userName = document.search;
userName = userName.substring(userName.indexOf(«=»)+1);
document.write(«Greetings, » + userName + «

«);

Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке — это:
Document.form.selectObject[document.form.selectObject.selectedIndex].value
Для доступак тексту элемента используйте свойство text:
Document.form.selectObject[document.form.selectObject.selectedIndex].text

Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код:

Male
Female
Not Specified

приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender.

Чтобы определить значение выбранной кнопки (или checkbox'а), вам нужно проверить свойство checked каждого из элементов. Например:
function checkIt() { theGroup = document.theForm.gender; for (i=0; i< theGroup.length; i++) { if (theGroup[i].checked) { alert("The value is " + theGroup[i].

value); break; } }
}

Для получения и установки значения radio button value на javascript можно использовать следующие функции:

function getCheckedValue(radioObj) {
    if(!radioObj)
        return «»;
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return «»;
    for(var i = 0; i < radioLength; i++) {         if(radioObj[i].checked) {             return radioObj[i].value;         }     }     return ""; } function setCheckedValue(radioObj, newValue) {     if(!radioObj)         return;     var radioLength = radioObj.length;     if(radioLength == undefined) {         radioObj.checked = (radioObj.value == newValue.toString());         return;     }     for(var i = 0; i < radioLength; i++) {         radioObj[i].checked = false;         if(radioObj[i].value == newValue.toString()) {             radioObj[i].checked = true;         }     } }

Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус.

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

Используйте обработчик события onSubmit (или action=»javascript:myFunction();«) для накопления данных из других форм в вашей странице и инициируйте их все сразу.

Как я могу отключить поле текстового ввода?

Используйте обработчик onfocus для вызова функции blur():

Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)
{ this.blur(); } disable text field enable text field

Как сделать загрузку страницы при выборе флажка?

Используйте обработчик OnChange для вызова функции submit():
Только новые

Сохранение данных в локальное хранилище браузера:

sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).

localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.

открыть скрытый текст

Особенности onClick, onSubmit, onReset

  • метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
  • метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
  • метод reset() у формы — влечет за собой вызов обработчика onReset у формы
  • НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!

DOM объект элемента INPUT:

interface HTMLInputElement : HTMLElement { attribute DOMString accept; attribute DOMString alt; attribute DOMString autocomplete; attribute boolean autofocus; attribute boolean defaultChecked; attribute boolean checked; attribute DOMString dirName; attribute boolean disabled; readonly attribute HTMLFormElement? form; readonly attribute FileList? files; attribute DOMString formAction; attribute DOMString formEnctype; attribute DOMString formMethod; attribute boolean formNoValidate; attribute DOMString formTarget; attribute unsigned long height; attribute boolean indeterminate; readonly attribute HTMLElement? list; attribute DOMString max; attribute long maxLength; attribute DOMString min; attribute boolean multiple; attribute DOMString name; attribute DOMString pattern; attribute DOMString placeholder; attribute boolean readOnly; attribute boolean required; attribute unsigned long size; attribute DOMString src; attribute DOMString step; attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; attribute Date? valueAsDate; attribute double valueAsNumber; attribute unsigned long width; void stepUp(optional long n); void stepDown(optional long n); readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

Другие примеры работы с формами на javascript
Читать дальше: Методы и функции JavaScript
<\p>

Источник: https://htmlweb.ru/java/forms.php

Работа с элементами страницы в JavaScript

Работа с формами

Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) свойств).

Мы можем, к примеру, обратиться к любой форме, как к энному свойству массива, например, к форме с номером 0:

document.forms[0].innerHTML = '!';

HTML код станет выглядеть так:

!

А можем перебрать все формы с помощью цикла:

var forms = document.forms; for (var i = 0; i < forms.length; i++) { forms[i].innerHTML = '!'; }

HTML код станет выглядеть так:

! !

Следующем образом — document.forms[i].elements — можно найти общее количество форм на странице.

Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега . Например, если форме дать имя test, то к ней можно обратиться так — document.forms['test'] или так — document.forms.test.

В следующем примере форме с именем form1 поставим текст '!', а форме с именем form2 — текст '?' (двумя разными способами):

document.forms.form1.innerHTML = '!';
document.forms['form2'].innerHTML = '?';

HTML код станет выглядеть так:

! ?

Обращение к свойствам форм

У каждой формы есть свойство elements, которое содержит массив свойств формы. С его помощью можно обратиться к определенному свойству формы по его номеру.

Для примера давайте обратимся к форме номер 1, а затем к ее свойству номер 0:

document.forms[1].elements[0].value = '!';

HTML код станет выглядеть так:

Можно также перебрать все свойства формы с помощью цикла. Давайте получим форму с номером 1 и всем свойствам этой формы поставим value '!':

var elements = document.forms[1].elements; for (var i = 0; i < elements.length; i++) { elements[i] = '!'; }

HTML код станет выглядеть так:

При необходимости с помощью двух вложенных циклов можно перебрать все формы и все свойства внутри них.

К свойствам формы, так же, как и к самим формам, можно обращаться по имени из атрибута name:

document.forms.form1.elements.input1.value = '!';

HTML код станет выглядеть так:

Это не все приемы работы с формами, при необходимости смотрите подробности в справочнике JavaScript тут: работа с формами.

Продвинутая работа с атрибутами

Вы уже знаете один из способов работы с атрибутами тегов, однако есть альтернативный вариант — с помощью методов getAttribute, setAttribute, removeAttribute и hasAttribute.

Метод getAttribute считывает значение указанного атрибута (и атрибут class тут уже не будет исключением), setAttribute — записывает новое значение в атрибут, removeAttribute удаляет атрибут совсем, а hasAttribute проверяет наличие или отсутствие атрибута у свойства.

Давайте получим значение атрибута value для инпута с помощью getAttribute:

function func() { var elem = document.getElementById('test'); alert(elem.getAttribute('value'));
}

А теперь запишем новое значение 'www' в атрибут value:

function func() { var elem = document.getElementById('test'); elem.setAttribute('value', 'www');
}

Удалим атрибут value совсем:

function func() { var elem = document.getElementById('test'); elem.removeAttribute('value');
}

HTML код станет выглядеть так (исчезнет атрибут value):

Ну, а теперь проверим наличие атрибута value у нашего свойства:

function func() { var elem = document.getElementById('test'); alert(elem.hasAttribute('value')); //выведет true
}

Получение свойств по их классу

Вы уже знаете метод getElementsByTagName, который получает группу свойств по названию тега. Существует аналогичный метод getElementsByClassName, который получает свойства по их классу (то есть по содержимому атрибута class).

Так же, как и для других подобных методов, нельзя обратиться ко всем свойствам одновременно, нужно использовать цикл. В примере ниже мы получаем все свойства с классом www и ставим им текст '!':

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

function func() { var elems = document.getElementsByClassName('www'); for (var i = 0; i < elems.length; i++) { elems[i].innerHTML = '!'; } }

HTML код станет выглядеть так:

!

!

!

Текст абзаца.

Получение свойств селектором CSS

В настоящее время в JavaScript появились более продвинутые методы получения свойств, в которых можно использовать любые селекторы CSS.

Для этого можно использовать два метода: querySelector и querySelectorAll. Метод querySelector является аналогом getElementById, только принимает не id свойства, а любой селектор, а возвращает ссылку на один найденный свойство (если под селектор попадает много свойств, то она вернет ссылку на первый свойство).

В примере ниже с помощью querySelector мы получаем инпут с классом test и выводим на экран содержимое его атрибута value:

function func() { var elem = document.querySelector('input.test'); alert(elem.getAttribute('value'));
}

А сейчас мы получим свойство с id равным test:

function func() { var elem = document.querySelector('#test'); alert(elem.getAttribute('value'));
}

Обратите внимание

Давайте теперь разберем querySelectorAll. Этот метод, в отличии от querySelector, получает группу свойств и работать с ними нужно как с группой (перебирать циклом и т.п.). В примере ниже мы получаем все свойства с классом www и ставим им текст '!':

Текст абзаца.

Текст абзаца.

Текст абзаца.

Текст абзаца.

function func() { var elems = document.querySelectorAll('.www'); for (var i = 0; i < elems.length; i++) { elems[i].innerHTML = '!'; } }

HTML код станет выглядеть так:

!

!

!

Текст абзаца.

Атрибуты data-

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

Если вы хотите обратиться к таким атрибутам как с свойствам объекта, то это делается не на прямую, а при помощи специального свойства dataset:

Товар Джинсы

function func() { var elem = document.getElementById('elem'); alert(elem.dataset.price); //выведет 1000 alert(elem.dataset.productNumber); //выведет 5
}

Обратите внимание – атрибут data-price превратился в dataset.price, а data-product-number превратился в productNumber.

К таким атрибутам можно также обращаться с помощью методов типа getAttribute, в этом случае следует писать полное название атрибута:

Товар Джинсы

function func() { var elem = document.getElementById('elem'); alert(elem.getAttribute('data-price'); //выведет 1000 alert(elem.getAttribute('data-product-number'); //выведет 5
}

Разница между способами получения атрибутов

На самом деле работа с атрибутами через свойства (так: elem.value) и через getAttribute (так: elem.getAttribute('value')) — это не одно и то же.

При изменении свойства elem.value атрибут elem.getAttribute('value') не меняется:

function func() { var elem = document.getElementById('elem'); elem.value = 'new'; //поменяли свойство alert(elem.getAttribute('value')); //выведет 'old' — не изменилось!
}

То есть, изменение свойства на атрибут не влияет, он остается таким же.

А вот изменение атрибута обновляет свойство:

function func() { var elem = document.getElementById('elem'); elem.setAttribute('value', 'new'); //поменяли атрибут alert(elem.value); //выведет 'new' — elem.value изменилось!
}

Эту особенность можно использовать.

Получается, что атрибут elem.getAttribute('value') хранит исходное значение даже после того, как пользователь заполнил поле и свойство изменилось.

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

Источник: http://code.mu/books/javascript/dom/rabota-s-elementami-stranicy-v-javascript.html

Вам может понравиться

В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.

JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.

Создание элемента. Метод document.createElement

Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:

document.createElement(«тег»);

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

Например, нам необходимо создать элемент-div — частый гость html-страниц. Тогда метод будет использован так:

var div = document.createElement(«div»);

Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div-a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.

Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):

div.className = «someClass»;

Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():

div.innerHTML = «Some text with bold text«;var text = document.createTextNode(«Some text»);

В первом случае вы можете добавить не только текст, но и любые html-теги.

Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div-у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:

родительский_элемент.appendChild(дочерний_элемент);

Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.

Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement(), причем добавляется он в самый конец родительского элемента.

Например, создадим изображение и добавим его внутрь div-а с id=»picHolder»:

var picHolder = document.getElementById(«picHolder»);var img = document.createElement(«img»);img.src = «images/stone3.jpg»;picHolder.appendChild(img);

Нажмите на кнопочку, пожалуйста.

Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.

Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.

Использование метода insertBefore

Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:

var insertedElement = родительский_элемент.insertBefore(новый_элемент, существующий_элемент);

Пример: вставляем текст абзаца в div с id=»text» после заголовка h2:

var text = document.getElementById(«text»),firstParagraph = text.firstElementChild;var p = document.createElement(«p»);p.innerHTML = «Lorem ipsum dolor sit amet, consectetur adipisicing elit.               Natus pariatur, ipsa dolorum adipisci.»;text.insertBefore(p, firstParagraph );

В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом «Пока это первый абзац».

Использование метода insertAdjacentHTML  и других

Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:

  1. «beforeBegin» — перед элементом.
  2. «afterBegin» — внутрь элемента, в самое начало, т.е. сразу за открывающим тегом.
  3. «beforeEnd» — внутрь элемента, в конец, т.е. перед закрывающим тегом.
  4. «afterEnd» — после элемента.

Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:

элемент.insertAdjacentText(строка, «строка текста»);элемент.insertAdjacentHTML(строка, код_html);элемент.insertAdjacentElement(строка, элемент);

Использовать их нужно в зависимости от потребности.

Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):

Код примера (с одним из вариантов строк):

var h3 = document.getElementById(«header-text»);h3.insertAdjacentText(«afterEnd», «Ваш текст»);

А теперь используем вставку кода html:

Добавлять будем код «

  • ваш текст внутри
  • «

    • Пункт 1
    • Пункт 2
    • Пункт 3
    • Пункт 4

    var first = document.getElementById(«ul-code»).firstElementChild; //первый элемент li списка ulvar htmlCode = «

  • Новый пункт
  • «; // добавляемый html-кодfirst.insertAdjacentHTML('afterBegin', htmlCode);

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

    В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor():

      var r = Math.floor(Math.random() * 256);    var g = Math.floor(Math.random() * 256);  var b = Math.floor(Math.random() * 256);    return «rgb(» + r + «,» + g + «,» + b + «)»;var h3Elem = document.getElementById(«header-elem»);var elem = document.createElement(«span»);elem.innerHTML = «Некая строка»;elem.style.color = randomColor();h3Elem.insertAdjacentElement(«beforeBegin», elem);

    Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому

    Источник: http://html-plus.in.ua/sozdanie-html-yelementov-v-javascript/

    Ввод вывод данных в Javascript:

    Для того чтобы взять данные из формы vvod для обработки в javascript нужна строчка:

    А в HTMLкоде форма:

    Введи число a

    Введи число b

    Для вывода данных из javascript:

    Сумма =

                Сумма

    Удобно пользоваться для вывода данных следующий способ :

    В скрипте прописываем строчку:

    document.getElementById(«nameId«).innerHTML=s;

    // примерно означает: получить элемент по идентификатору id из объекта document (страничка) и на его место вставить (innerHTML) новое значение (s).

                А в Html должен быть блок с идентификатором. Например блок или блок а в ней ячейки с идентификацией.

    Здесь вставится значение sиз javascript.

               

                  Здесь вставится значение sиз javascript.<\p>

               

    Так же можно в качестве идентификатора использовать теги, для идентификации тогда в javascriptнужна строчка:

    document.getElementByTagName(«Tag«)[порядковый номер тэга] отсчет с 0.

    document.getElementsByName

    Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

    Важно

    Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.

    Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.

    Пример определения высокосного года:

    Обычный год или високосный

    function doyear() {

    var s,year;

    var a=document.vvod.a.value;

    year = parseInt(a);

    if ( (a%4 == 0) && ( a%100 != 0) )

    { s = «високосный»;}

    else if (a%100 == 0 && a%400 == 0)

    { s = «високосный»;}

    else
    { s = «обычный»;}

    //console.log(s);

    document.getElementById(«nameId»).innerHTML=year;

    document.getElementById(«nameId2»).innerHTML=s; }; Введи годУказынный год: Здесь будет год. Здесь будет ответ, является ли указанный год високосным.

    Вот пример вставки в href значение введенное в форму:

    05   Untitled
    06
    07
    11    window.addEventListener('DOMContentLoaded', function() {
    12      var form = document.querySelector('#forma1'),
    13      phone = form.querySelector(«[name='phone']»),
    14      a = document.querySelector('a.gid'),
    15      href = a.getAttribute('href');
    16      phone.addEventListener('input', function(event) {
    17        event.preventDefault();
    18        a.setAttribute('href',href+encodeURIComponent(this.value))
    27
    29

    Источник: http://web.frubuk.ru/index.php/vvod-vyvod-dannykh

    Ссылка на основную публикацию