Главная страница>Учебник по веб-дизайну>Учебник по Javascript

В примере кода подробно описаны различные способы вывода данных в JavaScript.

Автор：Eve Cole Время обновления：2022-08-05 09:45:26
Эта статья дает вам необходимые знания о JavaScript. В JavaScript, в отличие от таких языков, как Java, нет методов печати или вывода. В js для вывода данных используются четыре метода. подробно, надеюсь, это будет полезно всем.

Предисловие

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

  • Используйте window.alert() для отображения окна с предупреждением.
    • Используйте document.write() для записи содержимого в HTML.
  • Используйте innerHTML для записи в элементы HTML
  • document.write() документе.
  • Используйте console.log() для записи в консоль браузера.

Используйте их ниже.

window.alert()

создает новый HTML-файл, а затем использует VSCode для написания следующего кода.

<!DOCTYPE html>
<html>
    <голова>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, Initial-scale=1">
        <title>window.alert()</title>
    </голова>
    <тело>
        <p>Всплывающее окно</p>
        <тип сценария="текст/javascript">
            window.alert("Это проверка всплывающего окна!");
        </скрипт>

    </тело>
</html>

Затем откройте указанный выше файл в браузере. При открытии появится следующее всплывающее окно. После нажатия кнопки «ОК» всплывающее окно закроется, и содержимое отобразится на веб-странице.

document.write()

<!DOCTYPE html>
<html>
    <голова>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, Initial-scale=1">
        <title>document.write()</title>
    </голова>
    <тело>
        <p>Написать HTML-документ</p>
        <тип сценария="текст/javascript">
            document.write(Дата());
        </скрипт>

    </тело>
</html>

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

Отображать одновременно

<!DOCTYPE html>
<html>
    <голова>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, Initial-scale=1">
        <title>document.write()</title>
    </голова>
    <тело>
        <p>Написать HTML-документ</p>
        <button onclick="showDate()">Показать время</button>
        <тип сценария="текст/javascript">
            функция showDate() {
                document.write(Дата());
            }
        </скрипт>
    </тело>
</html>

Ниже приводится сравнение до и после выполнения document.write() после загрузки страницы, указывающее, что вызов document.write() после загрузки страницы перезапишет содержимое предыдущей страницы.

до и после

изображение-20220228153609330

InternalHTML

JavaScript. Если вы хотите получить доступ к определенному элементу HTML, вы можете использовать метод document.getElementById(id) , а затем использовать innerHTML для получения или вставки содержимого элемента.

<!DOCTYPE html>
<html>
    <голова>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, Initial-scale=1">
        <title>внутреннийHTML</title>
    </голова>
    <тело>
        <p id="inner">Управление элементами HTML</p>
        <button onclick="changeContext()">Нажмите, чтобы изменить указанное выше содержимое</button>

        <тип сценария="текст/javascript">
            функция измененияКонтекст() {
                document.getElementById("inner").innerHTML = "Измененное содержимое";
            }
        </скрипт>

    </тело>
</html>

До изменения После изменения

console.log()

Чтобы использовать метод console.log() , наш браузер должен поддерживать отладку. Обычно рекомендуется использовать Chrome. Затем используйте горячую клавишу F12 , чтобы открыть режим отладки и переключиться в меню Console в окне отладки. Поскольку здесь я использую Edge , отображается консоль. Выбор браузера в основном зависит от ваших предпочтений, но обычно рекомендуется Chrome.

<!DOCTYPE html>
<html>
    <голова>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, Initial-scale=1">
        <title>console.log</title>
    </голова>
    <тело>
        <p>Просмотр в режиме отладки браузера</p>
        <тип сценария="текст/javascript">
            вар номер1 = 11;
            вар num2 = 10;
            console.log(число1 + число2);
        </скрипт>
    </тело>
</html>

Таким образом

, вышеизложенное касается вывода в JavaScript. Хотя не существует метода System.out.println() для печати и вывода, такого как Java, вышеупомянутые четыре метода могут в основном удовлетворить потребности повседневной разработки.
Связанные статьи