JavaScriptНачало работы с JavaScript

Download JavaScript for free

замечания

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

Использование console.log ()

Вступление

Все современные веб-браузеры, NodeJs, а также почти все другие среды JavaScript поддерживают запись сообщений на консоль с использованием набора методов ведения журнала. Наиболее распространенным из этих методов является console.log() .

В среде браузера функция console.log() используется преимущественно для целей отладки.


Начиная

Откройте консоль JavaScript в своем браузере, введите следующую команду и нажмите Enter :

console.log("Hello, World!"); 

Это запустит на консоль следующее:

Выход журнала консоли в Google Chrome

В приведенном выше примере функция console.log() печатает Hello, World! на консоль и возвращает undefined (показано выше в окне вывода консоли). Это связано с тем, что console.log() не имеет явного возвращаемого значения .


Регистрирующие переменные

console.log() может использоваться для записи переменных любого типа; не только строки. Просто передайте переменную, которую вы хотите отобразить в консоли, например:

var foo = "bar";
console.log(foo);
 

Это запустит на консоль следующее:

console.log () может использоваться с переменными

Если вы хотите регистрировать два или более значения, просто разделите их запятыми. Пространства будут автоматически добавляться между каждым аргументом во время конкатенации:

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);
 

Это запустит на консоль следующее:

введите описание изображения здесь


Конечная нота

Дополнительные сведения о возможностях консоли см. В разделе « Консоль» .

Использование 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.

Использование 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.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.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.
  • Обычно принято называть метод подтверждения с удалением окна, поскольку объект окна всегда неявный. Тем не менее, рекомендуется явно определять объект окна, поскольку ожидаемое поведение может измениться из-за реализации на более низком уровне уровня с помощью так называемых методов.

Использование 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.
.postMessage () и MessageEvent