Как вызвать javascript из html

Как вызвать JS функцию на html странице запросом от ОС?

Есть html страница с javascript сценарием, всё это открыто на локальной машине c debian в chromium, как я могу вызывать функции из сценария на этой странице средствами ОС? PS пробовал xdotool и обработку нажатия клавиш на JQ — костыль на костыле UPD: решил вопрос через веб-сокеты. На «серверной части» открыл сокет и шлю когда необходимо команду, а в «клиентской части» на JS жду данные с этого сокета и запускаю свою функцию.

Отслеживать
Oleg Miroshin
задан 13 мар в 8:55
Oleg Miroshin Oleg Miroshin
11 4 4 бронзовых знака

Уточните, какого рода запрос от ос вас интересует? Это некий bash скрипт или событие системы? Почитайте про api которое вам предоставляет хром, если то что вы хотите сделать возможно, подход там

13 мар в 12:44

Спасибо за ответ, это не совсем событие системы — это прерывание GPIO, которое обрабатывает стороння библиотека на С++, а затем уже выполняет bash скрипт

Как запустить функцию javascript в html

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

     Chair The Laid back Action     Heigth  id="weigth">80 cm  reset       type="text/javascript"> // Получаем элемент button на странице const btn = document.querySelector('button'); // Определяем функцию и логику внутри const handler = () =>  document.getElementById('weigth').innerHTML = 0; > // Вешаем на событие onclick кнопки нашу функцию btn.onclick = handler;

Создаём свою функцию

Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в предыдущей статье. Попутно мы также объясним некоторые важные детали работы с функциями.

Предпосылки:	Базовая компьютерная грамотность, базовое понимание HTML и CSS, первые шаги в JavaScript, Функции — блоки кода используемые многократно.
Задача:	Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.

Активное обучение: построение функции

Пользовательская функция, которую мы собираемся построить, будет называться displayMessage() . Она отобразит настраиваемое окно сообщения на веб-странице и будет действовать как настраиваемая замена встроенной в браузер функции alert(). Мы видели эту функцию раньше. Введите следующую команду в консоли JavaScript браузера на любой странице:

alert("This is a message");

Функция alert принимает один аргумент — строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.

Функция alert ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.

Примечание: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.

Основная функция

Для начала давайте соберём основную функцию.

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

Откройте файл function-start.html и скопируйте его себе на компьютер. Код HTML в нем предельно прост: body содержит только одну кнопку. Также здесь представлен базовый CSS для создания настраиваемого окна сообщений и пустой элемент для размещения нашего JavaScript.
Затем добавьте строку внутри элемента :

function displayMessage() >

var html = document.querySelector("html"); var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel); var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn); closeBtn.onclick = function ()  panel.parentNode.removeChild(panel); >;

Рассмотрим этот код по строкам (прим. — в оригинале статьи: «bit by bit»).

var html = document.querySelector("html");

Затем мы используем ещё одну функцию DOM API, называемую Element.setAttribute() , чтобы установить атрибут class на нашей панели со значением msgBox . Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса .msgBox для стилизации окна сообщения и его содержимого.

Наконец, мы вызываем функцию DOM с именем Node.appendChild() в переменной html , которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель как дочерний элемент, который мы хотим вложить внутрь элемента . То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.

var panel = document.createElement("div"); panel.setAttribute("class", "msgBox"); html.appendChild(panel);

В следующих двух разделах используются те же функции createElement() и appendChild() , которые мы уже видели, чтобы создать два новых элемента: и , и вставить их на страницу, как дочерних элементов панели . Мы используем свойство Node.textContent , которое представляет текстовое содержимое элемента, для вставки сообщения внутри абзаца и символ «x» внутрь кнопки. Нажатие/активация этой кнопки будет закрывать окно сообщения.

var msg = document.createElement("p"); msg.textContent = "This is a message box"; panel.appendChild(msg); var closeBtn = document.createElement("button"); closeBtn.textContent = "x"; panel.appendChild(closeBtn);

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

Вкратце, обработчик onclick — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик onclick равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию Node.removeChild() DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель .

.onclick = function ()  panel.parentNode.removeChild(panel); >;

В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:

div class="msgBox"> p>This is a message boxp> button>xbutton> div>

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

Вызов функции

Теперь у вас есть определение функции, написанное в вашем элементе , но оно ничего не будет делать в том виде, в каком оно есть.

displayMessage();

var btn = document.querySelector("button");

.onclick = displayMessage;

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

.onclick = displayMessage();

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

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

Улучшение функции с параметрами

В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.

function displayMessage()

function displayMessage(msgText, msgType)

.textContent = "This is a message box";

.textContent = msgText;

.onclick = displayMessage;

к этому блоку:

.onclick = function ()  displayMessage("Woo, this is a different message!"); >;

Более сложный параметр

Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр msgType установлен, функция отображала другой значок и другой цвет фона.

Примечание: иконки warning и chat были найдены на iconfinder.com, и разработаны Nazarrudin Ansyari. Спасибо! (Фактические страницы значков были перемещены или удалены.)

width: 200px;

измените на:

width: 242px;

padding-left: 82px; background-position: 25px center; background-repeat: no-repeat;

if (msgType === "warning")  msg.style.backgroundImage = "url(icons/warning.png)"; panel.style.backgroundColor = "red"; > else if (msgType === "chat")  msg.style.backgroundImage = "url(icons/chat.png)"; panel.style.backgroundColor = "aqua"; > else  msg.style.paddingLeft = "20px"; >

displayMessage("Woo, this is a different message!");

к одному из них:

displayMessage("Your inbox is almost full — delete some mails", "warning"); displayMessage("Brian: Hi there, how are you today?", "chat");

Примечание: Если у вас возникли проблемы с запуском примера, не стесняйтесь проверять свой код на готовой версии GitHub (см. также в режиме реального времени) или обратитесь к нам за помощью.

Вывод

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

В этом модуле

Принятие решений в вашем коде — условные конструкции
Зацикливание кода
Функции — Переиспользуемые блоки кода
Создайте свою собственную функцию
Возвращаемое значение функции
Введение в события
Создание галереи

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

3 способа запуска функции или кода Javascript (js) при загрузке страницы.

Сегодня хочу рассказать об одной проблеме, которая часто возникает у людей, которые начинают изучать Javascript.

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

Особенность языка Javascript в том, что его код выполняется последовательно, строка за строкой, как они написаны в исходном коде.

    #block   Документ без названия  К элементу с id #block не будет применяться правило css (background-color:yellow), т.к. строка

$("#block").css("background-color", "yellow");

Будет выполняться раньше, чем загрузиться html-строка:

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

Я хочу рассказать о трех способах, как это можно сделать.

Все мои уроки по Javascript здесь.

1 способ. С использованием библиотеки jQuery.

Чаще всего сам им пользуюсь, наиболее простое и удобное решение, но требует подключения библиотеки Jquery.

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

    #block   Документ без названия

2 способ. С помощью элемента body и атрибута onload.

    #block    Документ без названия  Выбирайте тот способ, который более всего подходит к вашей ситуации, и применяйте его на практике.