Поиск…
замечания
JavaScript (не путать с Java ) - это динамический, слабо типизированный язык, используемый для клиентской стороны, а также для серверных скриптов.
JavaScript - это язык с учетом регистра. Это означает, что язык считает, что заглавные буквы отличаются от их нижестоящих копий. Ключевые слова в JavaScript - это строчные буквы.
JavaScript - это стандартная реализация стандарта ECMAScript.
Темы этого тега часто ссылаются на использование JavaScript в браузере, если не указано иное. Только файлы JavaScript не могут запускаться непосредственно браузером; необходимо встроить их в HTML-документ. Если у вас есть код JavaScript, который вы хотите попробовать, вы можете вставить его в некоторый контент-заполнитель, подобный этому, и сохранить результат как example.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// YOUR CODE HERE
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
Версии
Версия | Дата выхода |
---|---|
1 | 1997-06-01 |
2 | 1998-06-01 |
3 | 1998-12-01 |
E4X | 2004-06-01 |
5 | 2009-12-01 |
5,1 | 2011-06-01 |
6 | 2015-06-01 |
7 | 2016-06-14 |
8 | 2017-06-27 |
Использование API DOM
DOM означает D ocument O bject M odel. Это объектно-ориентированное представление структурированных документов, таких как XML и HTML .
Установка свойства textContent
Element
- один из способов вывода текста на веб-страницу.
Например, рассмотрим следующий тег HTML:
<p id="paragraph"></p>
Чтобы изменить свойство textContent
, мы можем запустить следующий JavaScript:
document.getElementById("paragraph").textContent = "Hello, World";
Это выберет элемент, который с paragraph
id и настроит его текстовое содержимое на «Hello, World»:
<p id="paragraph">Hello, World</p>
Вы также можете использовать JavaScript для создания нового элемента HTML программно. Например, рассмотрим документ HTML со следующим телом:
<body>
<h1>Adding an element</h1>
</body>
В нашем JavaScript мы создаем новый <p>
с свойством textContent
и добавляем его в конец тела html:
var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
Это изменит ваше тело HTML на следующее:
<body>
<h1>Adding an element</h1>
<p>Hello, World</p>
</body>
Обратите внимание, что для управления элементами в DOM с использованием JavaScript код JavaScript должен запускаться после создания соответствующего документа в документе. Это может быть достигнуто путем размещения тегов JavaScript <script>
после всего вашего другого содержимого <body>
. Кроме того, вы можете также использовать прослушиватель событий для прослушивания, например. window
onload
, добавление вашего кода в этот прослушиватель событий задержит запуск вашего кода до тех пор, пока не будет загружен весь контент на вашей странице.
Третий способ убедиться, что все ваши DOM загружены, заключается в том, чтобы обернуть код манипуляции DOM с помощью функции тайм-аута 0 мс . Таким образом, этот код JavaScript переупорядочивается в конце очереди выполнения, что дает браузеру возможность закончить выполнение некоторых не-JavaScript-вещей, которые ждали завершения, прежде чем приступать к этой новой части JavaScript.
Использование console.log ()
Вступление
Все современные веб-браузеры, NodeJs, а также почти все другие среды JavaScript поддерживают запись сообщений на консоль с использованием набора методов ведения журнала. Наиболее распространенным из этих методов является console.log()
.
В среде браузера функция console.log()
используется преимущественно для целей отладки.
Начиная
Откройте консоль JavaScript в своем браузере, введите следующую команду и нажмите Enter :
console.log("Hello, World!");
Это запустит на консоль следующее:
В приведенном выше примере функция console.log()
печатает Hello, World!
на консоль и возвращает undefined
(показано выше в окне вывода консоли). Это связано с тем, что console.log()
не имеет явного возвращаемого значения .
Регистрирующие переменные
console.log()
может использоваться для записи переменных любого типа; не только строки. Просто передайте переменную, которую вы хотите отобразить в консоли, например:
var foo = "bar";
console.log(foo);
Это запустит на консоль следующее:
Если вы хотите регистрировать два или более значения, просто разделите их запятыми. Пространства будут автоматически добавляться между каждым аргументом во время конкатенации:
var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);
Заполнители
Вы можете использовать console.log()
в сочетании с заполнителями:
var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
Это запустит на консоль следующее:
Объекты регистрации
Ниже мы видим результат регистрации объекта. Это часто полезно для регистрации ответов JSON от вызовов API.
console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});
Это запустит на консоль следующее:
Запись элементов HTML
У вас есть возможность регистрировать любой элемент, который существует в DOM . В этом случае мы регистрируем элемент body:
console.log(document.body);
Это запустит на консоль следующее:
Конечная нота
Дополнительные сведения о возможностях консоли см. В разделе « Консоль» .
Использование window.alert ()
Метод alert
отображает окно визуального предупреждения на экране. Параметр метода оповещения отображается пользователю простым текстом:
window.alert(message);
Поскольку window
является глобальным объектом, вы можете вызвать также следующую сокращенную форму:
alert(message);
Так что делает window.alert()
? Итак, давайте рассмотрим следующий пример:
alert('hello, world');
В Chrome это создаст всплывающее окно:
Заметки
Метод
alert
технически является свойством объектаwindow
, но поскольку все свойстваwindow
автоматически являются глобальными переменными, мы можем использоватьalert
как глобальную переменную вместо свойстваwindow
- это означает, что вы можете напрямую использоватьalert()
вместоwindow.alert()
.
В отличие от использования console.log
, alert
действует как модальное приглашение, означающее, что alert
вызове кода приостанавливается до тех пор, пока на запрос не будет дан ответ. Традиционно это означает, что никакой другой код JavaScript не будет выполняться до тех пор, пока предупреждение не будет уволено:
alert('Pause!');
console.log('Alert was dismissed');
Однако спецификация фактически позволяет другому коду, инициируемому событиями, продолжать выполнение, даже если модальный диалог все еще отображается. В таких реализациях возможен запуск другого кода, пока отображается модальный диалог.
Более подробную информацию об использовании метода alert
можно найти в теме подсказок модалов .
Использование предупреждений обычно обескураживается в пользу других методов, которые не блокируют взаимодействие пользователей со страницей, чтобы создать лучший пользовательский интерфейс. Тем не менее, это может быть полезно для отладки.
Начиная с Chrome 46.0, window.alert()
блокируется внутри <iframe>
если его атрибут sandbox не имеет значения allow-modal .
Использование window.prompt ()
Простым способом получения ввода от пользователя является метод prompt()
.
Синтаксис
prompt(text, [default]);
- text : текст отображается в поле подсказки.
- default : Значение по умолчанию для поля ввода (необязательно).
Примеры
var age = prompt("How old are you?"); console.log(age); // Prints the value inserted by the user
Если пользователь нажимает кнопку « ОК» , возвращается входное значение. В противном случае метод возвращает null
.
Возвращаемое значение prompt
всегда является строкой, если пользователь не нажимает кнопку « Отмена» , в которой в этом случае он возвращает значение « null
. Safari является исключением, когда пользователь нажимает кнопку «Отмена», функция возвращает пустую строку. Оттуда вы можете преобразовать возвращаемое значение в другой тип, например целое число .
Заметки
- Пока отображается окно приглашения, пользователю не разрешается обращаться к другим частям страницы, так как диалоговые окна являются модальными окнами.
- Начиная с Chrome 46.0 этот метод блокируется внутри
<iframe>
если его атрибут sandbox не имеет значения allow-modal.
Использование DOM API (с графическим текстом: Canvas, SVG или файл изображения)
Использование элементов холста
HTML предоставляет элемент холста для создания растровых изображений.
Сначала создайте холст для хранения информации пикселя изображения.
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
Затем выберите контекст для холста, в данном случае двумерный:
var ctx = canvas.getContext('2d');
Затем установите свойства, связанные с текстом:
ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
Затем вставьте элемент canvas
в страницу, чтобы вступить в силу:
document.body.appendChild(canvas);
Использование SVG
SVG предназначен для построения масштабируемой векторной графики и может использоваться в HTML.
Сначала создайте контейнер SVG-элемента с размерами:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
Затем создайте text
элемент с желаемыми характеристиками позиционирования и шрифта:
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
Затем добавьте фактический текст для отображения в text
элемент:
text.textContent = 'Hello world!';
Наконец добавьте text
элемент в наш svg
контейнер и добавьте элемент контейнера svg
в документ HTML:
svg.appendChild(text);
document.body.appendChild(svg);
Файл изображения
Если у вас уже есть файл изображения, содержащий нужный текст и помещенный на сервер, вы можете добавить URL-адрес изображения, а затем добавить изображение в документ следующим образом:
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
Использование window.confirm ()
Метод window.confirm()
отображает модальное диалоговое окно с необязательным сообщением и двумя кнопками: «ОК» и «Отмена».
Теперь давайте рассмотрим следующий пример:
result = window.confirm(message);
Здесь сообщение является необязательной строкой, отображаемой в диалоговом окне, и результатом является логическое значение, указывающее, было ли выбрано значение «ОК» или «Отмена» (true означает «ОК»).
window.confirm()
обычно используется для запроса подтверждения пользователя перед тем, как совершить опасную операцию, например, удалить что-то в панели управления:
if(window.confirm("Are you sure you want to delete this?")) {
deleteItem(itemId);
}
Результат этого кода будет выглядеть в браузере:
Если вам это нужно для последующего использования, вы можете просто сохранить результат взаимодействия пользователя с переменной:
var deleteConfirm = window.confirm("Are you sure you want to delete this?");
Заметки
- Аргумент является необязательным и не требуется спецификацией.
- Диалоговые окна - это модальные окна - они не позволяют пользователю получить доступ к остальной части интерфейса программы, пока диалоговое окно не будет закрыто. По этой причине вам не следует злоупотреблять какой-либо функцией, которая создает диалоговое окно (или модальное окно). И независимо от того, есть очень веские причины, чтобы избежать использования диалоговых окон для подтверждения.
- Начиная с Chrome 46.0 этот метод блокируется внутри
<iframe>
если его атрибут sandbox не имеет значения allow-modal. - Обычно принято называть метод подтверждения с удалением окна, поскольку объект окна всегда неявный. Тем не менее, рекомендуется явно определять объект окна, поскольку ожидаемое поведение может измениться из-за реализации на более низком уровне уровня с помощью так называемых методов.