Как сохранить файл js

Обновлено: 04.07.2024

Включение JavaScript на вашу страницу – довольно простой процесс.

Во-первых, что такое JavaScript?

С сайта школ W3C:

JavaScript был разработан для добавления интерактивности HTML-страницам.
JavaScript – это язык сценариев.
Язык сценариев – это легкий язык программирования.
JavaScript обычно встраивается непосредственно в HTML-страницы.
JavaScript – это интерпретируемый язык (это означает, что скрипты выполняются без предварительной компиляции)
Каждый может использовать JavaScript без покупки лицензии

Включая JavaScript

Вы можете включить JavaScript в свой HTML двумя способами:

Написание кода в HTML
Включить его как ссылку на внешний файл

В большинстве случаев вы будете включать JavaScript как внешний файл.

Тег сценария

При использовании тега script мы всегда должны использовать имя атрибута и значение type="text/javascript" .

Использование тега script для включения внешнего файла JavaScript

Чтобы включить внешний файл JavaScript, мы можем использовать тег скрипта с атрибутом src. Вы уже использовали атрибут src при работе с изображениями. Значением атрибута src должен быть путь к вашему файлу JavaScript.

Этот тег script должен быть включен между тегами в HTML-документе.

Файлы JavaScript

Всегда заканчивайте расширением js
Включить только JavaScript

На веб-сайтах принято помещать все файлы JavaScript в папку с именем js, например:

Простая демонстрация включения JavaScript

Вот очень простая демонстрация того, как включить внешний файл JavaScript в HTML-страницу.

Другие JavaScript

Для этого класса от вас не требуется писать какой-либо реальный код JavaScript. К счастью для вас, многие люди уже написали много JavaScript и даже позволяют вам использовать его бесплатно.

Фреймворки JavaScript

Framework — это, по сути, библиотека кода для определенного языка. Как правило, фреймворк абстрагирует общие задачи и упрощает и ускоряет для дизайнеров и разработчиков написание своего конкретного кода. Фреймворки на самом деле ничего не делают сами по себе, они просто предоставляют людям более простую платформу для разработки.

Распространенные фреймворки JavaScript:

Из этих платформ JQuery в настоящее время является самой популярной. Кроме того, вы больше всего хотели бы встретить его в качестве модного слова.

Размеры файлов JavaScript

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

Размещение JavaScript во внешнем файле — это эффективный веб-практик.

Степень бакалавра компьютерных наук, Государственный университет Северной Каролины.

Стивен Чепмен — старший разработчик Oracle PL/SQL в компании SEI Financial Services с более чем 20-летним опытом разработки программного обеспечения и консультирования.

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

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

Намного лучше, если мы сделаем JavaScript независимым от используемой веб-страницы.

Выбор кода JavaScript для перемещения

К счастью, разработчики HTML и JavaScript предоставили решение этой проблемы. Мы можем переместить наши сценарии JavaScript с веб-страницы, и они все равно будут работать точно так же.

Первое, что нам нужно сделать, чтобы сделать код JavaScript внешним по отношению к странице, которая его использует, — это выбрать сам фактический код JavaScript (без окружающих тегов сценария HTML) и скопировать его в отдельный файл.

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

Раньше существовала практика размещения JavaScript в HTML-документе внутри тегов комментариев, чтобы старые браузеры не отображали код; однако новые стандарты HTML гласят, что браузеры должны автоматически обрабатывать код внутри тегов комментариев HTML как комментарии, и в результате браузеры игнорируют ваш Javascript.

Если вы унаследовали HTML-страницы от кого-то другого с JavaScript внутри тегов комментариев, вам не нужно включать теги в код JavaScript, который вы выбираете и копируете.

Например, вы скопируете только код, выделенный полужирным шрифтом, опустив теги HTML-комментариев в приведенном ниже примере кода:

Сохранение кода JavaScript в виде файла

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

Дайте файлу суффикс .js, чтобы вы знали, что файл содержит JavaScript. Например, мы можем использовать hello.js в качестве имени файла для сохранения кода JavaScript из приведенного выше примера.

Связывание с внешним скриптом

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

Сначала удалите все, что находится между тегами script:

Это еще не говорит странице, какой JavaScript запускать, поэтому нам нужно добавить дополнительный атрибут к самому тегу скрипта, который сообщает браузеру, где найти скрипт.

Наш пример теперь будет выглядеть так:

Атрибут src сообщает браузеру имя внешнего файла, из которого должен быть прочитан код JavaScript для этой веб-страницы (в нашем примере выше это hello.js).

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

Используя то, что вы знаете

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

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

< бр />

Еще одна из тех ситуаций, которые возникли из-за проблемы, с которой я столкнулся, — я столкнулся с необходимостью сохранить некоторые данные, введенные в форму (точнее, некоторые детали конфигурации в текстовую область).

Конечно, существует множество способов сохранить что-либо на локальном компьютере пользователя, но они, как правило, включают в себя либо далеко не идеальные решения, такие как локальное хранилище браузера, файлы cookie или даже использование холста HTML. капля.

Потребность в простых решениях

Есть отличная статья (если не немного устаревшая) Эли Грея о сохранении сгенерированных файлов на стороне клиента, в которой также обсуждается его превосходная утилита FileSaver.js, которая использует те же самые функции BLOB-объектов, упомянутые выше. .

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

Ванильное JS-решение для сохранения файлов на стороне клиента

Итак, вот он, действительно простой способ создать и сохранить файл на стороне клиента из браузера на основе некоторой информации, сохраненной в текстовой области.

Что отображает следующие простые элементы в браузере (стиль не показан для простоты):

Теперь о JavaScript:

То, что мы имеем здесь, представляет собой простой вызов querySelector для браузера, который захватывает нашу кнопку с идентификатором btnSave , прикрепляет прослушиватель событий, который срабатывает при нажатии — здесь ничего особенного.

Где волшебство (ну, действительно простое волшебство) заключается в методе 'downloadToFile' выше. Мы создаем новый элемент привязки и новый объект Blob, используя аргументы content и contentType, которые мы передали.

Далее мы устанавливаем элемент href в результат URL.createObjectURL(), который создает DOMString, содержащую URL-адрес, представляющий только что созданный файловый объект.

Наконец, мы инициируем событие щелчка нашего нового элемента привязки, которое запускает процесс загрузки в браузере, перед очисткой с помощью метода URL.revokeObjectURL().

Посмотреть в действии

Вы можете просмотреть код в действии в моем CodePen или ниже в удобном iFrame.

Подведение итогов

И все. Красиво и просто, справляется со своей задачей. Иногда самое простое решение является лучшим, если вам нужно что-то легкое, но просто работающее.

В этом видео у него есть файл "Web" (наверное, textmate??). Может ли кто-нибудь рассказать мне, как создать файл «Web», index.html и myscript.js? Новый пользователь Mac и новичок в программировании, поэтому чем больше подробностей, тем лучше. Спасибо

4 ответа

< /p>

Хасан Пекташ

Веб-файл, о котором вы говорите, — это папка, каталог или то, что вы предпочитаете называть. Чтобы создать папку, просто щелкните правой кнопкой мыши в Finder и выберите «Новая папка».

С другой стороны, файл HTML и JS легче создать в текстовом редакторе. В этом случае они используют TextMate. Если вы хотите создать ЛЮБОЙ файл, вы можете легко нажать «CMD» + «N» или «Клавиша Apple» + «N» одновременно или просто выбрать «Файл»> «Новый файл». Когда вы сохраняете, важно сообщить компьютеру, что это за файл. В случае, если у нас есть файл HTML, который должен заканчиваться на «.html», и файл JavaScript, который заканчивается на «.js». Если вы хотите сохранить файл, нажмите «CMD» + «S» или «Apple key» + «S» одновременно или просто выберите «Файл» > «Сохранить». Когда вы его сохраняете, не имеет значения, какое имя вы выберете, главное, чтобы оно заканчивалось на «.html» для HTML и «.js» для JavaScript.

Я бы порекомендовал вам создать папку только для вашей разработки. Вы можете назвать его «Разработка», «Сайты», «Веб», «Веб-разработка» и т. д., а затем создать папку для своего проекта, например «HelloWorld» или «MyWebsite» и т. д. Затем сохраните файлы в нужной папке проекта.

Эдвард Дус

Большое спасибо за подробный ответ. В «написании видео вашей программы» он сохраняет все это в файле/странице Google Chrome. Как мне выполнить эту часть (где я сохраняю все, что я делаю в textmate, на странице Google Chrome. Еще раз извините за слишком упрощенные вопросы.

< /p>

Хасан Пекташ

Во-первых, он все еще сохраняет файл в TextMate. Затем он открывает их в Chrome. Файлы по-прежнему HTML и JavaScript, но он открывает консоль веб-браузера, в данном случае веб-браузер Chrome, но вы можете сделать то же самое в Safari, Firefox и т. д. То, что вы создаете, когда создаете HTML файл представляет собой исходный код того, что будет отображать веб-браузер. Если вы хотите посмотреть, что делает ваш HTML на практике, просто щелкните файл правой кнопкой мыши (в данном случае: index.html) > Открыть с помощью > Google Chrome. Хорошей практикой является посмотреть, как ведут себя все другие браузеры на основе вашего HTML.

Эдвард Дус

Сейчас у меня есть папка "Web", сохраненная на "Рабочем столе". В веб-папке у меня есть 2 файла (файл .html и файл .js). Кажется, что сохранять их на рабочем столе — неправильное место. У меня открыта консоль js, и у меня также есть html «Введение в программирование», открытое в хроме. В начале видео слева у него есть файл «Web», а под ним файлы html и js. Если бы вы могли просто сказать мне, что именно он там делает и как это воспроизвести, я был бы вам очень признателен. Надеюсь последний вопрос. спасибо

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