Перейти до основного контенту
Лайфхаки

Як виводити значення в javascript: простий та ефективний спосіб

8 хв читання
831 переглядів

Однак, якщо потрібно відобразити значення користувачеві, більш зручним способом буде використання функції document.write(). Ця функція дозволяє динамічно додавати вміст на сторінку. Наприклад, наступний код:

СпосібПрикладОпис
console.log()console.log ("Привіт, світ!");
alert()alert ("Привіт, світ!");
document.write()document.write ("Привіт, світ!");
innerHTMLdocument.getElementById("output").innerHTML = " Привіт, світ!";

Будьте уважні при використанні функції document.write (), оскільки він перезапише всю сторінку, якщо буде викликаний після завантаження документа.

console.log(10);

У цьому прикладі функція console.log () виведе число 10 на консоль розробника.

Ви також можете передати функції console.log () кілька значень через кому:

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

У цьому прикладі функція console.log () виведе два рядки "Hello" і "world!"в консоль розробника, розділивши їх пробілом.

Щоб вивести значення змінних, просто передайте їх імена функції консолі.log(). Наприклад:

let x = 5;let y = 10;console.log(x, y);

У цьому прикладі функція console.log () виведе значення змінних x та y на консоль розробника.

let person = ;console.log(person);

У цьому прикладі функція console.log () виведе об'єкт person на консоль розробника.

Для використання document.write() необхідно викликати цей метод в контексті об'єкта document. Наприклад, можна написати:

Цей код додасть рядок " Привіт, світ!"у HTML-код сторінки, яка буде відображена при її завантаженні.

var name = "Анна"; document.write ("Привіт," + name+"!");

Цей код виведе " Привіт, Анна!"на сторінці, оскільки змінна name буде замінена на значення"Анна".

За використовуваним методом є кілька недоліків. По-перше, якщо виклик document.write() відбувається вже після того, як контент сторінки був повністю завантажений, це може привести до непередбачуваних результатів. По-друге, якщо на сторінці вже є якийсь контент, то при виклику document.write() цей контент буде замінений на новий.

alert(message);

В результаті з'явиться модальне вікно з переданим значенням message.

Однак слід бути обережним при використанні alert (), особливо на сайтах з великим обсягом даних. Вікна alert () можуть перервати досвід користувачів і стати дратівливими. Тому рекомендується використовувати alert () тільки з метою налагодження та тестування.

  • console.log (10) – - виведе число 10 в консоль
  • console.log ("Привіт, світ!"); - виведе рядок " Привіт, світ!"в консоль
  • console.log (true) – - виведе значення true в консоль

Якщо потрібно вивести кілька значень, їх можна передати в якості аргументів функції console.log(). Наприклад:

  • console.log(10, 20, 30); - виведе числа 10, 20 і 30 в консоль
  • console.log ("Привіт,", " мир!"); – виведе рядки "Привіт," і " мир!"в консоль
  • var x = 5;
    console.log (x) – - виведе значення змінної x в консоль
  • var name = "John";
    console.log ("Привіт,", name,"!");- виведе рядок " Привіт, John!"в консоль

Як вивести значення змінної в JavaScript

  1. Використання функції alert alert(variable);
  2. Використання функції console.log console.log(variable);
  3. Використання методу document.write document.write(variable);
  4. Використання методу innerHTML Метод innerHTML дозволяє присвоїти значення змінної вмісту певного HTML-елемента. Необхідно вибрати елемент за допомогою JavaScript і змінити його вміст за допомогою атрибута innerHTML. document.getElementById('elementID').innerHTML = variable;
console.log('Hello, world!');
alert('Привет, мир!');
document.write('Привет, мир!');

4. innerHTML: якщо ви хочете вивести значення в певний елемент сторінки, ви можете використовувати властивість innerHTML . Наприклад:

document.getElementById('myElement').innerHTML = 'Привет, мир!';

5. textContent: ця властивість також дозволяє виводити значення в певний елемент сторінки. Наприклад:

document.getElementById('myElement').textContent = 'Привет, мир!';