Как подключить Javascript файл к html документу?
Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться. Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js.
Проблема, которая очень часто появляется у начинающих пользователей: Как подключить javacript-код или файл к html документу?
В этой небольшой заметке мы рассмотрим, как это можно сделать.
Все мои уроки по Javascript здесь.
Пусть содержимое файла html будет следующее:
Документ без названия Содержимое html-файла
Ничего лишнего. Теперь код, который необходимо подключить:
alert("Javacript подключен");
Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что «Javacript подключен» при открытии файла html-документа. Итак, рассматриваем два варианта подключения скрипта.
Вариант 1. Подключение внутри html-файла.
Делается это с помощью конструкции:
Вставим этот код можно внутри тэга , либо внутри тега . В итоге, содержимое html файла может буть следующим:
Документ без названия Содержимое html-файла
Проверяем, что все работает:
Отлично. Окно с сообщением появилось.
Вариант 2. Подключение внешнего файла скрипта с кодом.
Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим. Пусть такой файл называется script.js. О том, как создать javascript файл я писал здесь.
В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.
Как теперь подключить скрипт к html файлу? В этом случае нужно воспользоваться тэгом
Об адресах и как их правильно выставлять информация здесь.
Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:
Документ без названия Содержимое html-файла
Как правило, скрипты подключаются в области документа. Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что «javascript подключен». Это два основных способа, как вы можете подключить код javascript к html документу.
Пользуйтесь этим на практике.
Все мои уроки по Javascript здесь.
Не видит JS-файл
Добрый день! При попытке сделать script src=‘js/script.js’ не выполняет его, а присоединяет к url, типа 127.0.0.1:port/js/script.js Во всем проекте дал rwx всем файлам, не помогло. Мозилла, Федора 32 (виртуалка)
p0f1g1st
17.10.20 10:08:09 MSK
Пример разметки бы приложил, что ли.
Nervous ★★★★★
( 17.10.20 10:17:03 MSK )
не выполняет его, а присоединяет к url
eternal_sorrow ★★★★★
( 17.10.20 11:13:02 MSK )
Я ничерта не понял но рискну предположить что у тебя кривой контенттайп для жс в нжиниксе
ya-betmen ★★★★★
( 17.10.20 11:44:16 MSK )
Выше верно указали, что-то с заголовками на сервере. Content-type, может content-disposition: attachment, etc в этом направлении смотреть.
Stack77
( 17.10.20 11:55:24 MSK )
У тебя ПХП головного мозга, пройди какие-нибудь нормальные курсы HTML для начала
script src=‘js/script.js’ не выполняет его, а присоединяет к url, типа 127.0.0.1:port/js/script.js
Относительные урлы так и работают, всё правильно
Goury ★★★★★
( 17.10.20 11:56:57 MSK )
Последнее исправление: Goury 17.10.20 11:57:44 MSK (всего исправлений: 1)
Ответ на: комментарий от Goury 17.10.20 11:56:57 MSK
То он так скорее всего объяснил «хорошо», что ничего не понятно. Там видимо или с заголовками типа content-* что-то не то или в mime types для js какая-то ерунда вместо application/javascript.
Stack77
( 17.10.20 12:07:06 MSK )
Ответ на: комментарий от Stack77 17.10.20 12:07:06 MSK
Мой обширный опыт общения с рукожопыми пыхерами (о получении которого я крайне сожалею, но прошлого не вернуть) подсказывает что он пытается в контексте вебсервера зацепить локальный файл.
Заголовки тут ни при чём, фаерфокс умеет выполнять JS с неправильным контент-тайпом, просто в консоль поругается на него.
Goury ★★★★★
( 17.10.20 12:16:30 MSK )
Ответ на: комментарий от Goury 17.10.20 12:16:30 MSK
Всё может быть. Я бы с таким ником как у ТС вообще бы забил на это дело XD. Ну, а если серьезно, то согласен, нужно нормально проблему обозначать, чай не Ванги разгадывать.
Не подключается js файл в html
Не судите строго если проблема глупая. Выучил основы JavaScript и продолжаю путь изучая React. Я почти всегда использую отдельно html и отдельно js файлы. Начав учить React, в туториале всегда js пишется в html файле, и нет инструкций как добавить js файл с Reactом в html. Из базы js я знаю что подключается посредством добавления тега . Узнал, что чтобы добавить React непосредственно в html, надо в head добавить скрипты с реактом, и написать index.html:
React Application const Func = () => < return Hello React
; > ReactDOM.render(, document.getElementById("root")); React Application script.js:
import React from "react"; import ReactDOM from "react-dom"; const Func = () => < return Hello react
; > ReactDOM.render(, document.getElementById("root")); Уточнение: читал что может быть из-за стрелочных функций, однако если это и может быть проблемой, у меня не работает ни такой формат функции, ни с словом function
Правильно подключаем Javascript в HTML
Javascript (часто можно увидеть сокращенную для написания версию JS) это язык программирования, который очень часто применяется в web-разработке. В этой статье мы расскажем, как подключить javascript к html документу. Сделать это можно двумя способами: встроить js-код непосредственно в сам html файл, так и с помощью подключения внешнего файла javascript
Первый способ: вставляем js-код прямо в html
Вставить javascript-код можно просто добавив его в любое место вашей html страницы, внутри тега
Например, вот так может выглядеть ваша html-страница с подключенным js-кодом:
JS в HTML Вот мы и вставили js-код прямо в html файл. Но такое решение приемлемо, когда вы вставляете небольшой код, который нужно выполнить именно на этой странице. Тогда он не будет сильно тормозить загрузку страницы. Но лучше всего прописывать js-код в отдельном файле, а затем подключать его в html.
Второй способ: подключаем внешний файл
У этого метода есть ряд преимуществ.
- Разделение файлов упрощает дальнейшую работу с ними. Представьте себе, когда у вас несколько тысяч строк js-кода, очень легко во всем этом потеряться.
- Файлы js можно закешировать и тогда ваш сайт будет грузиться быстрее.
- Вы можете загружать js-код только после того, как вся ваша верстка прогрузится.
Давайте предположим, что у вас вот такая структура:
site/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.htmlТогда, чтобы подключить js файл script.js вам нужно прописать в html следующее:
Выглядеть это будет вот так:
JS в HTML Если же у вас немного другая структура или вам нужно подключить js файл в html документе, который не находится в корне, а лежит, к примеру в папке templates, то используйте символы «./» чтобы задать вложенность.
Для наглядности, предположим у вас такая структура:
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── templates └── contact.htmlТогда путь к файлу script.js из contact.html будет такой:
Вот так можно подключать js к html файлам.
Кстати, обратите внимание, что и в первом и во втором способе можно не указывать type=»text/javascript» для тега script. Это уже необязательно.