Вызвать функцию js файлу для кнопки
Обновлено: 07.07.2024
Я хотел бы вызвать файл javascript onClick кнопки в форме.tmpl.htm.
Я должен согласиться с комментариями выше, что вы не можете вызвать файл, но вы можете загрузить файл JS, как это, я не уверен, если он отвечает на ваш вопрос, но это может помочь. о, и я использовал ссылку вместо кнопки в своем примере.
если вы хотите, чтобы ваша кнопка вызывала процедуру, которую вы написали в filename.js вам нужно отредактировать имя файла.js, так что код, который вы хотите запустить, является телом функции. Ибо вы можете вызвать функцию,не исходный файл. (Исходный файл не имеет точка входа)
если текущее содержимое вашего имени файла.js is:
вы должны изменить это кому:
тогда вы должны загрузить именем.js в заголовке вашей html-страницы по строке:
, так что вы можете вызов на функции содержится в имени файла.js по вашей кнопке:
Я сделал небольшой рабочий пример. Простая HTML-страница просит пользователя ввести ее имя, и когда она нажимает кнопку, функция внутри Public/Scripts / filename.js называется передачей вставленной строки в качестве параметра, так что всплывающее окно говорит " Привет, !".
вот вызывающая HTML-страница:
и вот Public / Scripts / filename.js
это вполне возможно, я сделал что-то подобное на примере Майк Сав. Это html-страница, и она должна быть внешним тестом.JS файл в той же папке
загрузка .js сначала файл, а затем вызов функции через onclick, меньше кодирования, и довольно очевидно, что происходит. Мы вызовем файл JS zipcodehelp.js .
и содержание zipcodehelp.js - это :
надеюсь, что это поможет! Ура!
вы можете просто сделать следующее.
Допустим у вас есть файл JavaScript с именем myscript.js в корневой папке. Добавьте ссылку на исходный файл javascript в тег head вашего html-файла.
JS-файла: ( myscript.js )
похоже, что невозможно вызвать функцию во внешнем js-файле (тест на chrome версии 63.0.3239.132). Я пробовал по-разному, но не получается. Я должен использовать прослушиватель событий.
вы можете загрузить все свои скрипты в head тег, и все, что ваш скрипт делает в скобках функции. Но убедитесь, что вы меняете область переменных, если вы используете эти переменные вне скрипта.
добавление динамического скрипта в head Вы можете написать функцию и добавить элемент скрипта с src пути к файлу js
Давайте напишем простую функцию, которая возвращает массив из трех элементов — текущего значения this и двух аргументов, переданных в функцию.
Самый распространенный способ: глобальный вызов
Новички часто объявляют функции так, как показано в примере выше. Вызвать эту функцию не составляет труда:
Погодите. Откуда взялся объект window ? Почему это у нас this равен window ?
В JavaScript, неважно, выполняется ли скрипт в браузере или в ином окружении, всегда определен глобальный объект. Любой код в нашем скрипте, не «привязанный» к чему-либо (т.е. находящийся вне объявления объекта) на самом деле находится в контексте глобального объекта. В нашем случае, makeArray — не просто функция, «гуляющая» сама по себе. На самом деле, makeArray — метод глобального объекта (в случае исполнения кода в браузере) window . Доказать это легко:
То есть вызов makeArray('one', 'two'); равносилен вызову window.makeArray('one', 'two'); .
Меня печалит тот факт, что этот способ вызова функций наиболее распространен, ведь он подразумевает наличие глобальной функции. А мы все знаем, что глобальные функции и переменные — не самый хороший тон в программировании. Особенно это справедливо для JavaScript. Избегайте глобальных определений, и не пожалеете.
Правило вызова функций №1: Если функция вызывается напрямую, без указания объекта (например, myFunction() ), значением this будет глобальный объект ( window в случае исполнения кода в браузере).
Вызов метода
Давайте создадим простой объект и сделаем makeArray его методом. Объект объявим с помощью литеральной нотации, а после вызовем наш метод:
Видите разницу? Значение this в этом случае — сам объект. Почему не window , как в предыдущем случае, ведь объявление функции не изменилось? Весь секрет в том, как передаются функции в JavaScript. Function — это стандартный тип JavaScript, являющийся на самом деле объектом, и как и любой другой объект, функции можно передавать и копировать. В данном случае, мы как бы скопировали всю функцию, включая список аргументов и тело, и присвоили получившийся объект свойству make объекта arrayMaker . Это равносильно такому объявлению:
Правило вызова функций №2: В функции, вызванной с использованием синтаксиса вызова метода, например, obj.myFunction() или obj['myFunction']() , this будет иметь значение obj .
Непонимание этого простого, в общем-то, принципа часто приводит к ошибкам при обработке событий:
При использовании библиотек вроде jQuery думать об этом не надо. jQuery позаботится о том, чтобы переписать значение this в обработчике события так, чтобы значением this был элемент, вызвавший событие:
Каким образом jQuery удается изменить значение this ? Читайте ниже.
Еще два способа: apply() и call()
Логично, что чем чаще вы используете функции, тем чаще вам приходится передавать их и вызывать в разных контекстах. Зачастую возникает необходимость переопределить значение this . Если вы помните, функции в JavaScript являются объектами. На практике это означает, что у функций есть предопределенные методы. apply() и call() — два из них. Они позволяют переопределять значение this :
Эти два метода очень похожи. Первый параметр переопределяет this . Различия между ними заключаются в последющих аргументах: Function.apply() принимает массив значений, которые будут переданы функции, а Function.call() принимает аргументы раздельно. На практике, по моему мнению, удобнее применять apply() .
Правило вызова функций №3: Если требуется переопределить значение this , не копируя функцию в другой объект, можно использовать myFunction.apply( obj ) или myFunction.call( obj ) .
Конструкторы
Я не буду подробно останавливаться на объявлении собственных типов в JavaScript, но считаю необходимым напомнить, что в JavaScript нет классов, а любой пользовательский тип нуждается в конструкторе. Кроме того, методы пользовательского типа лучше объявлять через prototype , который является свойством фукции-конструктора. Давайте создадим свой тип:
Важным в этом примере является наличие оператора new перед вызовом функции. Если бы не он, это был бы глобальный вызов, и создаваемые в конструкторе свойства относились бы к глобальному объекту. Нам такого не надо. Кроме того, в конструкторах обычно не возвращают значения явно. Без оператора new конструктор вернул бы undefined , с ним он возвращает this . Хорошим стилем считается наименование конструкторов с заглавной буквы; это позволит вспомнить о необходимости оператора new .
В остальном, код внутри конструктора, скорее всего, будет похож на код, который вы написали бы на другом языке. Значение this в данном случае — это новый объект, который вы создаете.
Правило вызова функций №4: При вызове функции с оператором new , значением this будет новый объект, созданный средой исполнения JavaScript. Если эта функция не возвращает какой-либо объект явно, будет неявно возвращен this .
На предыдущих уроках по JavaScript, мы научились получать и изменять элементы на страницах. Но зачем это нужно, если можно сразу создать страницу с необходимым HTML кодом? Так мы и делаем всегда - сначала создаем статическую страницу, только одного этого недостаточно. Дело в том, что взаимодействие с пользователем происходит при помощи событий мыши или клавиатуры и нам надо как-то реагировать на эти события.
Статичная кнопка
У меня на сайте есть кнопка, при нажатии на которую ничего не происходит. Как заставить кнопку реагировать на клик пользователя (например менять текст на ней)?
<button >Кликни по мне</button>
Превращение статичной кнопки в интерактивную
Вот теперь нам пригодится навык поиска элементов на странице.
1) Шаг. Получение элемента, событие которого вы хотите обрабатывать.
Мы хотим обрабатывать событие клика на элементе с идентификатором myBtn. Поэтому объявим переменную buttonElem и при помощи метода getElementById сохраним кнопку в эту переменную.
2) Шаг. Создание функции, которая будет вызываться при возникновении события «клик».
Создадим функцию с логичным названием onButtonClick. Функция должна заменить текст на кнопке, поэтому пропишем в теле функции выражение, которое изменит содержимое тега button. Обратимся к переменной и через свойство textContent заменим надпись на кнопке. Пока на данном этапе, при нажатии на кнопку ничего не происходит. Ведь браузер еще не знает, какую функцию ему вызывать при после клика на кнопку.
3) Шаг. Связать обработчик события с событием клика и элементом.
Должен кто-то отследить событие клика по кнопке и сообщить об этом браузеру. Этот кто-то, называется обработчик событий addEventListener. Повесим на buttonElem метод addEventListener и передадим ему два аргумента: название события «Click» и название функции. Функция будет вызываться, при наступлении указанного события.
Ура! Наш JS код сработал, когда мы нажимаем на кнопку - меняется текст кнопки.
Как работают функции?
В примере используется функция обратного вызова (callback). Отличается она от обычной функции тем, что вызывается сразу после определенного события. В нашем случае, после события клика. Обычная функция выполняется сразу после загрузки страницы или через указанный интервал времени.
Если было бы нужно вызвать функцию без привязки к событиям, то мы добавили бы следующую строчку. Скобки после названия означают вызов функции без привязки к событиям и тогда текст на кнопке изменится сразу после загрузки страницы.
Если убрать скобки, тогда это будет ссылка на функцию, которую мы передаем вторым аргументом при установки слушателя событий. Мы говорим браузеру, что эту функцию нужно будет вызвать, но только после клика пользователя по кнопке. Поэтому у функции обратного вызова нельзя ставить скобки.
В качестве второго аргумента можно передавать анонимную функцию. Анонимная функция не имеет имени и вместо имени вставляется инструкция (код JavaScript), что делает эта функция.
Анонимная и именованная функция делают одно и тоже и оба варианта рабочие. Большинство разработчиков используют именованные функции, такой код проще читается. Создание обработчика событий не требует написания много строчек кода и вместо события click, можно привязывать другие события к совершенно разным элементам. А базовые принципы изложены в этой статье.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.
Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.
Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:
Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.
Выносим код события onclick в javascript-функцию
Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:
Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».
Вешаем onclick на элемент из javascript-кода
Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.
Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:
Применяем jQuery
Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:
И ещё один вариант, который идентичен предыдущему.
С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.
Читайте также: