Passing Arguments to External JavaScript Files
This post covers the topic of passing arguments to external JavaScript files. I want to say up front that there doesn’t seem to be a 100% bulletproof way of doing this. If there is, I don’t know about it (so please share if you know how).
Note that this ideas should not be applied to a production environment without proper load testing.
Bad solutions for libraries
Throughout my adventures, I came across several potential solutions that were clearly not right for me. One idea was to use server-side programming to read the argument and customize the response. For a library, this idea isn’t feasible because users would become tied to my server. Many developers choose to host libraries on their own servers in order to remove external dependencies.
Another idea I came across was assigning an id to the element and passing the arguments as data-* attributes. The resulting tag would look something like this:
The script could then use the id to programmatically locate itself and parse the arguments. Given the previous tag, the name could be retrieved like this:
const name = document.getElementById('helper').getAttribute('data-name');Unfortunately, this won’t work for a library because the script would always require the same ID. This is essentially the same as the original problem, except conflicts would occur with the HTML ID, instead of the JavaScript $ variable.
Passing arguments via the query string
In my opinion, the most logical way to pass an argument to a script file is through the query string of its src attribute. Using the query string, the previous tag would look like this:
The problem now becomes retrieving the src attribute from the element. Without an id, there is no way of getting a direct handle on the element. However, you can get a handle on all of the page’s elements using getElementsByTagName() . From there, it becomes a matter of determining exactly which script to access. Normally, during page load, the script that is currently executing is the last element returned by getElementsByTagName() . This means that the correct element can be located using the following code:
let scripts = document.getElementsByTagName('script'); let script = scripts[scripts.length - 1];This code relies on the fact that scripts are normally executed in the order in which they are encountered by the browser. Unfortunately, this approach cannot be applied to scripts which are loaded asynchronously because there is no guaranteed execution order. And, because a library can potentially be loaded asynchronously, this approach is not applicable to libraries.
Another idea is to loop through each element and inspect it individually. The following loop iterates over each element. By splitting the src attribute on the ? character, the script’s URL is separated from the query string. We can then skip over any scripts that don’t have a query string.
for (let i = 0, len = scripts.length; i < len; i++) < let src = scripts[i].getAttribute('src').split('?'); let url = src[0]; let args = src[1]; if (!args) < continue; >>The problem isn’t quite solved yet though. If multiple scripts have a query string, how do we distinguish between them? One technique is to look for the specific named argument. The following code extracts the individual arguments and their values from the query string. Since our example is using the argument, we can search for that particular argument.
let argv = args.split('&'); for (let j = 0, argc = argv.length; j < argc; j++) < let pair = argv[j].split('='); let argName = pair[0]; let argValue = pair[1]; if (argName !== 'name') < continue; >>Our code now identifies all scripts that pass a name argument through the query string. Unfortunately, as a library developer you have no way of knowing if your code will be run on a page alongside another script that also uses a name argument. You can try using an argument name which is very unlikely to be duplicated, but that approach is not 100% reliable either.
You can add another level of checking by also comparing the script URL, which we already stored in the url variable. The problem with this approach is that the script name must be hard coded, and renaming the script file requires the script to be edited. This normally wouldn’t be too much of a hassle, but it is unsuitable for libraries. If only there were a way to get the script’s name from within the script itself.
As it turns out, there is a way to get the script’s name. Unfortunately, the technique is Mozilla specific. Firefox’s Error objects have a fileName property which contains the full URL, including the query string, of the file where the Error originated. The following expression provides the URL of the file in which it is run. Of course, this solution is not applicable to libraries.
Summary
Passing arguments to external scripts can be tricky. If you own the script, then you can easily make many of the techniques shown here work for you. The real problem is faced by library developers, whose code can be deployed in countless environments. Libraries can utilize many of these techniques, but as I mentioned at the beginning of this post, none of them are 100% bulletproof.
Привет, мир!
В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .
Перед скриптом.
. После скрипта.
Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.
Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Современная разметка
Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:
Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.
Атрибут language : language=…>
Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.
Обёртывание скрипта в HTML-комментарии.
В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
Файл скрипта можно подключить к HTML с помощью атрибута src :
Здесь /path/to/script.js – это абсолютный путь до скрипта от корня сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.
Можно указать и полный URL-адрес. Например:
Для подключения нескольких скриптов используйте несколько тегов:
Как правило, только простейшие скрипты помещаются в HTML. Более сложные выделяются в отдельные файлы.
Польза отдельных файлов в том, что браузер загрузит скрипт отдельно и сможет хранить его в кеше.
Другие страницы, которые подключают тот же скрипт, смогут брать его из кеша вместо повторной загрузки из сети. И таким образом файл будет загружаться с сервера только один раз.
Это сокращает расход трафика и ускоряет загрузку страниц.
В одном теге нельзя использовать одновременно атрибут src и код внутри.
Нижеприведённый пример не работает:
Нужно выбрать: либо внешний скрипт , либо обычный код внутри тега .
Вышеприведённый пример можно разделить на два скрипта:
Итого
- Для добавления кода JavaScript на страницу используется тег
- Атрибуты type и language необязательны.
- Скрипт во внешнем файле можно вставить с помощью .
Нам ещё многое предстоит изучить про браузерные скрипты и их взаимодействие со страницей. Но, как уже было сказано, эта часть учебника посвящена именно языку JavaScript, поэтому здесь мы постараемся не отвлекаться на детали реализации в браузере. Мы воспользуемся браузером для запуска JavaScript, это удобно для онлайн-демонстраций, но это только одна из платформ, на которых работает этот язык.
Задачи
Вызвать alert
Создайте страницу, которая отобразит сообщение «Я JavaScript!».
Выполните это задание в песочнице, либо на вашем жёстком диске, где – неважно, главное – проверьте, что она работает.