1


 
 
 

МЕХЗАВОД | Сайтостроение для начинающих

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » JavaScript для начинающих » Как подключить Javascript-файл к HTML-документу.

Как подключить Javascript-файл к HTML-документу.

Страница: 1

Сообщений 1 страница 4 из 4

1

2

Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться.

Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js.

Проблема, которая очень часто появляется у начинающих пользователей:

Как подключить javacript-код или файл к html документу?

В этой небольшой заметке мы рассмотрим, как это можно сделать.
Пусть содержимое файла html будет следующее:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
Содержимое html-файла
</body>
</html>

Ничего лишнего.

Теперь код, который необходимо подключить:

alert("Javacript подключен");

Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что «Javacript подключен» при открытии файла html-документа.

Итак, рассматриваем два варианта подключения скрипта.

Вариант 1. Подключение внутри html-файла.

Делается это с помощью конструкции:

<script type="text/javascript">
…
Код javascript
…
</script>

Вставим этот код можно внутри тэга <body>, либо внутри тега <head>.

В итоге, содержимое html файла может буть следующим:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<script type="text/javascript">
alert("Javacript подключен");
</script>
Содержимое html-файла
</body>
</html>

Проверяем, что все работает:

21-10-2014 13-05-32

Отлично. Окно с сообщением появилось.

Вариант 2. Подключение внешнего файла скрипта с кодом.

Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим.

Пусть такой файл называется script.js. О том, как создать javascript файл я писал здесь.

В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.

http://s3.uploads.ru/t/gpFde.png

Как теперь подключить скрипт к html файлу?

В этом случае нужно воспользоваться тэгом

<script src="путь_к_файлу_скрипта/script.js"></script>

Об адресах и как их правильно выставлять информация здесь.

Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="script.js"></script>
</head>
<body>
Содержимое html-файла
</body>
</html>

Как правило, скрипты подключаются в области <head> документа.

Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что «javascript подключен».

Это два основных способа, как вы можете подключить код javascript к html документу. Пользуйтесь этим на практике.

3

Как правильно подключить JS- и PHP-скрипты к вашему сайту?

Сегодня я расскажу вам, как осуществляется подключение разных типов скриптов к вашему сайту. Это своего рода основа основ, и написать эту статью я должен был одной из первых. Потому – начнем.
Подключение JS-скриптов (файлы с расширением *.js) к сайту

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

Подключение JavaScript'а осуществляется двумя способами:

1. Первый – это непосредственно вставка кода в ваш сайт с помощью тегов:

<script type="text/javascript">код</script>

2. Второй – с помощью файла:

<script type="text/javascript" src="https://www.pandoge.com/main.js"></script>

Где «https://www.pandoge.com/main.js» – путь до файла скрипта. Такой вариант рекомендуется писать для файлов на удаленном (внешнем) сервере. Если же файл находится на вашем сайте, то можно просто указать относительный путь:

<script type="text/javascript" src="/main.js"></script>

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

Что касается места подключения, то все скрипты рекомендуется подключать в секции HEAD, перед закрывающим ее тегом. Например:

<head>
<title>Все для начинающего веб-мастера</title>
<script type="text/javascript" src="/main.js"></script>
</head>

Их также можно подключить в секции BODY. Например, все библиотеки рекомендуется подключать в секции HEAD, тогда как все счетчики, слайдеры, галереи и прочие скрипты – в секции BODY, также перед закрывающим тегом.
Подключение PHP-скриптов (файлы с расширением *.php) к сайту

Подключение PHP-скриптов осуществляется уже тремя способами:

1. Первый – это та же вставка кода в саму страницу сайта (обратите внимание, что если вы имеете страницу с расширением *.html – вам необходимо сменить расширение на *.php) с помощью тегов:

<?php
Код
?>

2. С помощью файла (в таком случае подключение можно осуществлять и на странице с *.html расширением):

<?php
include "main.php";
?>

Но для работы этого способа в файл .htaccess, который находится в корне вашего сайта, в самый верх, необходимо добавить эти строки:

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html .phtml

Если такого файла нет на хостинге - создайте его через любой текстовый редактор.

3. Третье – с помощью JS-скрипта. В этом случае вы также можете получить результат выполненного PHP-скрипта на сервере.

Реализация будет следующая:

<div class="result"></div>

<script> 
$(document).ready(function() {
    $(".result").load("/main.php"); 
});
</script>

Где «.result» – это класс, куда будут грузиться данные, а «/main.php», соответственно, адрес до PHP-скрипта.

Если вы грузите данные с другого сервера, то поддержка PHP на вашем сервере не обязательна. Не забывайте подключить к вашему сайту библиотеку jQuery.

Здесь правила абсолютно те же: полный адрес к файлу, если он находится на внешнем сервере, относительный – если на вашем.

Обратите внимание! Если вы хотите подключить PHP-скрипт к вашему сайту, то на сервере должна быть поддержка PHP. О том, есть ли у вас такая возможность – узнайте у своего хостинг-провайдера.

Если вы осуществляете подключение скриптов первый раз – попробуйте подключить скрипты из архива, который прикреплен в конце статьи. Если в обоих случаях вы получили сообщение «Hello World!» – значит, вы все сделали правильно.

4

Как добавить JavaScript в HTML

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

JavaScript необходимо загружать и запускать одновременно с разметкой. Это можно сделать как внутри HTML-документа, так и в отдельном файле, который браузер загрузит одновременно с HTML.

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

Можно добавить JavaScript-код в HTML-документ при помощи специального тега <script>. Он может быть помещен в раздел <head> HTML-документа, <body> или после него. В зависимости от того, когда необходимо загрузить JavaScript.

Как правило, JavaScript-код помещается внутри раздела <head>, что позволяет держать его за пределами основного содержимого HTML-документа.

Но если ваш сценарий должен запускаться в определенном месте разметки страницы, тогда его размещают в <body>.

Рассмотрим следующий HTML-документ с заголовком Today’s Date:
index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
</head>

<body>

</body>

</html>

На данный момент файл содержит разметку без тега script в HTML. Допустим, мы хотим добавить в него следующий JavaScript-код:

let d = new Date();
alert("Today's date is " + d);

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

Начнем с того, что добавим скрипт между тегами <head>. Он даст сигнал браузеру о том, что нужно запустить сценарий, прежде чем загрузится остальное содержимое страницы:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>

<body>

</body>

</html>

Теперь при загрузке страницы с HTML script вы увидите сообщение, которое будет выглядеть так:
http://s8.uploads.ru/t/fW36F.png
Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега <body> и перезагрузить страницу. Поскольку HTML-документ достаточно прост, вы не заметите никакой разницы.

Чтобы внести изменения в структуру HTML-документа, нужно разместить код после раздела <head>. Теперь дата будет отображаться на странице:
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
</head>

<body>

  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today’s date is " + d + "</h1>"
  </script>

</body>

</html>

При загрузке приведенного выше HTML-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:
http://sg.uploads.ru/t/6lxRj.png
Небольшие сценарии могут отлично работать внутри HTML-файла. Но для больших скриптов этот подход неэффективен. Их внедрение делает разметку громоздкой и сложной для понимания. Далее мы рассмотрим, как подключить отдельный JavaScript-файл в HTML-документе.
Работа с отдельным JavaScript-файлом

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

Преимущества использования отдельного JavaScript-файла:

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

Для демонстрации подключения JavaScript-файла к документу без тега script в HTML создадим небольшой веб-проект. Он будет состоять из файла script.js, расположенного в каталоге js/, файла style.css, расположенного в каталоге css/ и главной страницы index.html, расположенной в корне проекта:
http://sg.uploads.ru/t/7AzSo.jpg
Можно начать с HTML-шаблона из раздела выше:
index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
</head>

<body>

</body>

</html>

Теперь переместим JavaScript-код, который будет показывать дату в виде заголовка <h1>, в файл script.js:
script.js

let d = new Date();
document.body.innerHTML = "<h1>Today’s date is " + d + "</h1>"

Без script type text html ссылку на этот сценарий можно разместить <body> или под ней:

<script src="js/script.js"></script>

Тег <script> указывает на файл script.js, размещенный в каталоге js/ веб-проекта. Посмотрим на эту строку в контексте нашего HTML-файла, размещенную под разделом <body>:
index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
</head>

<body>

</body>

<script src="js/script.js"></script>

</html>

Отредактируем файл style.css, добавив цвет фона и стиль заголовка <h1>:
body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

Теперь можно добавить ссылку на CSS-файл:
index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

</body>

<script src="js/script.js"></script>

</html>

Теперь, когда мы добавили JavaScript и CSS, можно загрузить страницу index.html в браузере. Она будет выглядеть следующим образом:
http://s8.uploads.ru/t/hmbF7.png
JavaScript-код, размещенный в отдельном файле, а не в HTML script src, можно вызвать из других страниц тем же способом, описанным выше.

Страница: 1

Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » JavaScript для начинающих » Как подключить Javascript-файл к HTML-документу.

создать форум