Просмотров: 57 040

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

Предположим, что у вас есть 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, которые находятся в одной папке.

21-10-2014 13-04-21

Как теперь подключить скрипт к 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 документу. Пользуйтесь этим на практике.

Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?

Уберите то, что НЕ работает, добавьте то, что работает и удвойте вашу выручку.

Курс по настройке целей Яндекс Метрики..

Курс по настройке целей Google Analytics..

  • сергей

    спасибочки

  • https://www.facebook.com/app_scoped_user_id/745749112249669/ Oxana Korsun

    Спасио!

  • Серега

    Спасибо)

  • yrj

    норм

  • Вячелав

    Подскажите почему не работает скрипт:

    аидлтьвдьсыэж вдмлвждыдм вдмоылмэылмы

    var text = $(«.split»);
    var split = new SplitText(text);
    function random(min, max){
    return (Math.random() * (max — min)) + min;
    }
    $(split.chars).each(function(i){
    TweenMax.from($(this), 2.5, {
    opacity: 0,
    x: random(-500, 500),
    y: random(-500, 500),
    z: random(-500, 500),
    scale: .1,
    delay: i * .02,
    yoyo: true,
    repeat: -1,
    repeatDelay: 10
    });
    });

    html, body {
    height: 100%;
    }

    body {
    overflow: hidden;
    }

    .box {
    max-width: 70vw;
    padding: 30px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    font-size: 30px;
    line-height: 1.5;
    transform: translateY(-50%);
    perspective: 400px;
    }

    .source {
    color: skyblue;
    margin: 0 auto;
    }