Js не видит функцию из подключаемого файла

Обновлено: 15.01.2025

Файл index.html обрабатывается силами web-сервера и автоматически загружается в браузер пользователя при обращении к сайту (главной странице).

Файл index.html имеет классическую разметку документа:

Задача

Также мы хотим сделать эту загрузку в фоне, без перезагрузки страницы index.html . То есть пользователь не увидит в адресной строке браузера другого адреса. Перезагрузки страницы не будет.

Файл text.html имеет разметку:

Предпосылки. Зачем это нужно?

Каждая отдельная страница сайта перестаёт быть статичной (уже собранной). В результате, мы разделяем потенциальную страницу на части. Например:

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

Решение задачи

Для начала подключим на страницу index.html файл со скриптом, который будет называться gettext.js .

В файле index.html внутри элемента <head> поместим элемент <script> с атрибутом src и его значением gettext.js

Логика работы такая:

Посылаем запрос на сервер.
Дожидаемся ответа. Ловим содержимое файла.
Вносим нужные изменения в документ.

Отредактируем файл gettext.js

пустая строка (по умолчанию),
arraybuffer
blob
document
json
text

Восьмая строка инициирует запрос на сервер методом send() и отправляет его.

Результат работы

Мы видим итоговую страницу с нужным нам содержимым. На favicon не обращаем внимания т. к. браузер Chrome вдруг решил его поискать.

title в разметке title на вкладке

В инструментах разработчика на вкладке Network мы видим последовательность загрузки данных для главной страницы сайта

В ответе сервера браузер уже понимает пришедшие данные и подсвечивает HTML-синтаксис, указывая на элементы <h1> и <p> . То есть браузер уже сам разобрал пришедший тип данных string и подсветил разработчику открывающиеся и закрывающиеся элементы.

Смысл этого кода, в том, чтобы при нажатии по ссылке не переходить по адресу, а вывести адрес на экран.
Тут заменяется адрес 2х ссылок на вызов функции.

Вверху - это урезанный пример.
У меня же ругается на то, что нет этой функции:
Uncaught ReferenceError: reply_guild is not defined(…)

Подгружаю к некой странице(вкладке, как угодно) скрипт.
И в нём есть эта функция.

И нифига не работает.

Последний раз редактировалось Артист, 11.11.2016 в 14:26 .

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

Тут ты устанавливаешь вызов функции текстом. Текст ничего не знает о функциях, он просто текст.
Соответственно, когда юзер кликает на такую ссылку (*утирировано*) браузер преобразует текст в код в контексте страницы и пытается вызвать функцию по её имени. Но на самой странице такой функции нет, функция твоего скрипта скрыта от станицы(иначе могли бы быть атаки на привилегированный код со стороны страницы).
Нужные функции надо назначать явно, например:

Последний раз редактировалось Aetae, 11.11.2016 в 14:52 . Спасибо, понял ))
И получается проще просто назначить функцию, уже в ней получить ссылку, и запретить переход вернув false. Последний раз редактировалось Артист, 11.11.2016 в 21:08 .

Ещё один нубский вопрос, как передать значение в функцию(чтобы event остался)?
А то так проверять немного не умно:

Последний раз редактировалось Артист, 13.11.2016 в 20:54 . Так проверять - нормально, если действия однотипные. Что ты подразумеваешь под "event остался" я не понял.
Если чтоб передавать и event и параметры - см. мой пост. Без дополнительной функции-обёртки по-хорошему не обойтись. Последний раз редактировалось Aetae, 13.11.2016 в 21:19 .

Хз, вроде проще передать в функцию цифру чем получать ссылку и искать в ней подстроку.

Допустим, у меня есть файл с именем app.js. Довольно просто:

Что делать, если у меня есть функции внутри "tools.js". Как бы я импортировал их для использования в apps.js?

Или . я должен превратить "инструменты" в модуль, а затем требовать его? << кажется сложным, я скорее делаю основной импорт файла tools.js.

Что меня оттолкнуло, так это require наличие папки в том же каталоге в Windows. Вы должны использовать адресацию в стиле Unix: ./mydir вместо простого старого mydir .

Вам может потребоваться любой файл js, вам просто нужно объявить то, что вы хотите выставить.

И в вашем файле приложения:

+1 Отлично сделано, даже ограничивает импортированный код своим собственным пространством имен. Я должен сделать это к сведению на потом. Интересно, можно ли импортировать внешние скрипты. require("http://javascript-modules.googlecode.com/svn/functionChecker.js") похоже, неправильно импортирует модуль. Есть ли другой способ импортировать внешние скрипты? А что если мне нужно передать переменную в функцию Like, bar: function (a, b) как вызвать функцию bar () внутри функции foo (), означает, как получить доступ к одной функции с помощью другой

Если, несмотря на все остальные ответы, вы по-прежнему хотите традиционно включить файл в исходный файл node.js, вы можете использовать это:

Конкатенация пустой строки +'' необходима для получения содержимого файла в виде строки, а не объекта (вы также можете использовать, .toString() если хотите).
Eval () не может использоваться внутри функции и должен вызываться внутри глобальной области видимости, иначе никакие функции или переменные не будут доступны (т.е. вы не можете создать include() служебную функцию или что-то в этом роде).

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

Также обратите внимание, что это не будет работать "use strict"; (когда вы находитесь в «строгом режиме» ), потому что функции и переменные, определенные в «импортированном» файле, не могут быть доступны с помощью кода, который выполняет импорт. В строгом режиме применяются некоторые правила, определенные в более новых версиях языкового стандарта. Это может быть еще одной причиной, чтобы избежать решения, описанного здесь.

Репутация: нет
Всего: нет

у меня так со всеми функциями в которых применяю jquery .
кстати странно что в опере и ie даже alert, который в начале скрипта, не включается.

где именно я туп?

Репутация: 1
Всего: 22

не работает в ie
(замена typeof(LFstatus) == "undefined")

а это весь код? в начале надеюсь все нормально прописано =)

Репутация: 84
Всего: 385

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально !

Репутация: нет
Всего: нет

ну можно предположить что он закрыт. это только кусок кода.
проблему решил так:

правда всплыла другая:

кстати функция doLogin(), которая вызывается при нажадии батона из предыдущего примера, тоже не работает и IE ругается "Предполагается наличие объекта". Он так ругается и при вызове остальных функций.

видимо я безнадежно туп в js

Репутация: 27
Всего: 52

Репутация: нет
Всего: нет

а что в ней такого плохого? или это в свзяли с моей жопорукостью?

Репутация: 27
Всего: 52

Ну Вы же сами написали, что проблемы "со всеми функциями в которых применяю jquery". Вот я и предложил вариант.

Репутация: нет
Всего: нет

Репутация: 1
Всего: 22

как показывает практика jquery работает в 99.9% случаях -
если не работает, то скорее всего это связано не с броузером, не с системой, а с тем кто пытается ее прикрутить =)

Репутация: 27
Всего: 52

Действительно виноват видимо я, что никак не могу "прикрутить" простую вещь (jquery.js-то хорош - он не причем):

Ну "глючит" в IE - ничего не могу придумать.

Репутация: 1
Всего: 4

у вас вызов идет dologin() а функция doLogin(), что является разными обьектами. Всегда помните, что в js РеГиСтР ИмЕеТ ЗнАчЕнИе

Репутация: 84
Всего: 385

И в чем проявляется глюк? Я чего-то не заметил. Достаточно адекватно себя ведет и в Опере и в IE6-м.

Добавлено через 2 минуты и 23 секунды
версия - jQuery 1.2.1 не в этом дело?

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально !

Репутация: 27
Всего: 52

Ну так как – работает jquery.js в 99.9% случаев?
И на ком (на чем) лежит ответственность за тот факт, что в незамысловатом правиле стилей за один прием ломаются сразу две декларации – на браузере, на системе, на том, кто пытается ее прикрутить или все же на библиотеке?

Репутация: 84
Всего: 385

А на такой jQuery работает? Она взята исходниками с их сайта и местами поравлена.
Для простоты - вот пример "в комплекте".

Правда правки довольно значительны. Но может удастся их протолнуть и в базовый jQuery.

Присоединённый файл ( Кол-во скачиваний: 4 )
jquery.pack.zip 14,66 Kb

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально !

Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.

[ Время генерации скрипта: 0.1840 ] [ Использовано запросов: 21 ] [ GZIP включён ]

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Урок №
Учебник
по регулярным выражениям
Урок №
Работа с регулярными
выражениями. Глава 1.
Урок №
Работа с регулярными
выражениями. Глава 2.
Урок №
Работа с регулярными
выражениями. Глава 3.
Урок №
Работа с регулярными
выражениям. Глава 4.
Урок №
Отличия
от PHP версии

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

Урок №
новая вкладка с new.code.mu
Доступные события
Урок №
новая вкладка с new.code.mu
Перемещение элемента по окну
Урок №
новая вкладка с new.code.mu
Перемещение на другой элемент
Урок №
новая вкладка с new.code.mu
Объект event.dataTransfer
Урок №
новая вкладка с new.code.mu
Картинка при перетягивании
Урок №
новая вкладка с new.code.mu
Вид курсора

Урок №
Введение
в ООП в стиле ES6
Урок №
Основы
работы с ООП
Урок №
Наследование
классов в JavaScript
Продвинутая работа
с классами на JavaScript -->
Урок №
Применение
ООП при работе с DOM
Урок №
Практика
по ООП в JavaScript
Тут скоро будут еще уроки
по функциональному и прототипному
стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Урок №
новая вкладка с new.code.mu
Функции resolve reject
Урок №
новая вкладка с new.code.mu
Метод catch
Урок №
новая вкладка с new.code.mu
Цепочки промисов
Урок №
новая вкладка с new.code.mu
Перехват ошибок
Урок №
новая вкладка с new.code.mu
Promise.all
Урок №
новая вкладка с new.code.mu
Promise.race
Урок №
новая вкладка с new.code.mu
async await
Урок №
новая вкладка с new.code.mu
Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Урок №
Учебник
jQuery для новичков
Урок №
Основы
работы с jQuery
Урок №
Манипулирование
элементами страницы
Урок №
Работа
с набором элементов
Урок №
Работа
с событиями jQuery
Урок №
Эффекты и анимация
библиотеки jQuery
Урок №
Практика на отработку
библиотеки jQuery
Урок №
Работа с
библиотекой jQueryUI
Урок №
Популярные плагины
библиотеки jQuery

В данном уроке мы разберем анонимные функции и замыкания на языке JavaScript.

Режим use strict

В JavaScript существует специальный режим, по которому код будет выполнятся по современному стандарту ES5, а не по более старому (это по умолчанию).

Этот режим включается директивой "use strict"; или 'use strict'; и ставится в начале скрипта:

Строгий режим можно активировать только для кода функции:

Исходный код функции и результат

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

Функция как переменная

В JavaScript функции - это такие же переменные. К примеру, если у нас есть какая-то функция - мы можем записать ее в другую переменную - и эта функция станет доступна с другим именем:

Можно также создать безымянную функцию и записать ее в какую-то переменную:

Так как функция - это переменная, то невозможно существование переменной и функции с одинаковым именем. В следующем примере функция func будет затерта и вместо нее станет строка 'hello':

Функциональные выражения и объявление функций

Функцию можно объявить двумя способами: первый способ вы изучали в предыдущих уроках, а второй способ - это сделать безымянную функцию и записать ее в какую-либо переменную:

Первый способ называется Function Declaration (объявление функции), а второй - Function Expression (функциональное выражение):

По сути это одно и то же, но есть существенная разница: функции, объявленные как Function Declaration, создаются до выполнения кода. Поэтому их можно вызвать до объявления, например:

А функциональные выражения создаются в момент выполнения кода и недоступны выше. Поэтому такой код выдаст ошибку:

Функциональные выражения

Функциональные выражения достаточно удобная штука - можно, например, записать в переменную одну из функций, в зависимости от условия:

Особенности Function Declaration при use strict

Function Declaration при use strict видны только внутри блока, в котором объявлены. В данном случае функция func объявлена внутри ифа, но не будет видна снаружи:

Без use strict все будет нормально.

Передача функции по ссылке

Функции в JavaScript - это объекты. А объекты в JavaScript копируются по ссылке - это значит, что если у нас есть две переменные с одной и той же функцией - в них не лежит копия этой функции, а обе эти переменные ссылаются на одну и ту же функцию:

Анонимные функции

Функции, не имеющие имени, называются анонимными. Такие функции бывают полезны в тех случаях, когда имя функции нам без надобности и нет смысла тратить время на придумывание этого имени.

Пример: пусть у нас есть переменная elem, в которой лежит ссылка на какой-то элемент. Привяжем в качестве события onclick анонимную функцию:

Тоже самое при addEventListener:

Впрочем, если имя функции вам нужно, например, для того, чтобы открепить ее через removeEventListener - можно дать и имя:

Это имя будет доступно только внутри самой функции - и нигде извне.

Функция как параметр другой функции

Пусть у нас даны 2 функции:

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

Наша функция go запишет первую функцию в переменную func1, а вторую - в func2, затем просуммирует числа, возвращаемые этими функциями и выведет их на экран:

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

Рассмотрим еще пример: сейчас в функцию и go будем передавать параметром разные функции - и будем видеть разный результат:

А можем вообще использовать анонимную функцию, создаваемую в момент передачи параметра:

Функция в функции

Одну функцию можно объявить внутри другой. В этом случае внутренняя функция не будет доступна извне:

Зачем это нужно: внутренняя функция может быть использована как вспомогательная и это удобно, что она не доступна извне - мы не захламляем глобальную область видимости лишними функциями.

Функция, возвращающая функцию

Функция может возвращать другую функцию, например так:

В этом случае, если мы посмотрим результат работы внешней функции - мы увидим исходный код внутренней функции:

Чтобы увидеть результат работы внутренней функции - нужно вызвать внешнюю функции с двумя круглыми скобками:

Могут быть и такие вызовы функций: func()()() и func()()()() - и так далее до бесконечности. Для этого нужно, чтобы внутренняя функция тоже возвращала функцию, та - еще одну и так далее.

Область видимости переменных

Давайте вспомним про область видимости переменных. Напомню, что внешняя переменная видна внутри функции:

То же самое будет, если у нас функция содержит внутри другую функцию - переменные внешней функции видны во внутренней:

Замыкания

Пусть у нас есть переменная num, определенная снаружи функции:

Если вызвать нашу функцию - то она сначала увеличит переменную num на единицу, а затем вернет новое значение num:

Если вызвать нашу функцию несколько раз - каждый раз она будет выводить на единицу больше, так как каждый вызов func приводит к увеличению внешней переменной num:

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

Обернем всю нашу конструкцию в функцию (назовем ее createCounter), а функцию func, которая у нас была ранее, сделаем анонимной и сделаем так, чтобы новая функция createCounter возвращала эту анонимную функцию:

Рассмотрим подробнее, что тут происходит: переменная num является локальной внутри функции createCounter, но при этом она доступна в анонимной функции (это мы видели в предыдущих примерах). В строчке var counter = createCounter() анонимная функция запишется в переменную counter. Получится, что у нас далее есть функция counter, внутри которой доступна переменная num из createCounter.

Давайте убедимся в этом:

Давайте теперь запустим функцию counter несколько раз - мы увидим, что каждый раз она будет выводить на единицу больше:

Еще раз: преимуществом такого подхода является то, что переменная num не видна снаружи createCounter и ее никто не сможет случайно затереть. Снаружи она не видна, но доступ к ней есть - через функцию counter, но только через нее.

Такая штука называется замыкание. Замыкание - это функция со всеми доступными внешними переменными (типа num в нашем случае). Эти переменные называются лексическим окружением функции.

Давайте вернемся назад к счетчику - осталось самое интересное: если createCounter вызвать несколько раз, записав результат в разные переменные - каждая из них станет независимым счетчиком.

В следующем примере у нас есть 2 функции: counter1 и counter2 - и они работают совершенно не мешая друг другу (получается, что у каждой из них своя переменная num):

Вызов функции на месте

При программировании иногда возникает задача сделать анонимную функцию и сразу ее вызвать в момент создания.

Зачем это нужно: те переменные и вспомогательные функции, которые мы объявим внутри нашей анонимной функции останутся локальными и не будут засорять своими именами глобальную область видимости.

Для вызова функции на месте хотелось бы сделать что-то в таком роде:

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

Так тоже будет работать:

Но более принято брать такие функции в круглые скобки, вот так:

Давайте посмотрим, что же нам дает вызов функции на месте: сделаем внутри такой функции переменную message. Наша переменная будет доступна только внутри функции, и не будет доступна снаружи:

Иногда во избежания ошибок в начале ставится точка с запятой (ошибки могут возникнуть при сжатии файла минимизатором):

Читайте также: