Подключение JavaScript
Здаров, че. Начнем?
В одной из предыдущих статей(тык), я рассказывал про братков JS. В рассказе о CSS я показывал, что каскадные таблицы стилей могут подключаться как напрямую в HTML-страницу(внутрь тега style), так и отдельным файлом с форматом расширения *.css.
С JavaScript дела обстоят почти так же. Его можно подключить тоже двумя способами.
1-ый способ подключения
С помощью тега <script>js-код</script>. Т.е, весь код, который мы будем писать на JS, мы должны поместить внутрь этого тега.
Пример:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>JS-page</title>
</head>
<body>
<script>alert("Ку-ку, ёпта");</script>
</body>
</html>
Как видишь, есть одно отличие от того, как мы подключали CSS. Там мы весь CSS-код помещали внутрь тега <style> и при этом, обязательным условием является его размещение внутри тега <head>.
Здесь же мы можем разместить тег <script> в любом месте HTML-страницы и все будет работать. Но, запомни, js-код лучше всего размещать в конце страницы, перед </body>. Почему? Потому что, ёпта. Потому что на странице может быть до хера контента, например, текста, картинок, видео и всякой другой хероты, которая может не успеть загрузиться на страницу, а ты через JS уже будешь пытаться как-то управлять этими данными. И, естественно, ты пойдешь на хер и никакой код не выполнится. Все что произойдет в лучшем случае – браузер засрет тебе консоль ошибками(не критично), а в худшем – на твоем будущем Facebook может что-то знатно наебнуться.
Еще одна причина, по которой нужно привыкать подключать JS в конце HTML-страницы заключается в том, что когда ты уже начнешь пилить свой проект, код будет разрастаться, а вместе с ним и размер файла с кодом. Файл начнет превышать 100 КВ, а со временем будет становится все больше и больше и в итоге может весить больше 1 МВ, особенно, если ты будешь в будущем использовать различные фреймворки(об этом как-нибудь расскажу). И, если ты подключишь этот файл вверху страницы, то ничего на странице не будет загружаться, никакой контент, пока не загрузится JS-код(это можно настроить, конечно, но все же).
Запоминай эти советы, пригодятся и не тупи.
2-ой способ подключения
Все через тот же тег <script>, но с одним нюансом.
Тебе нужно создать файл с расширением .js и подключить его через атрибут src.
Создаем файл script.js со следующим содержимым:
alert('Ку-ку, ёпта');
Подключаем этот файл с помощью тега <script> через атрибут src.
Код HTML-страницы:
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>JS-page</title> </head> <body> <script type="text/javascript" src="script.js"></script> </body> </html>
Уловил? Все очень просто. Указываешь у тега script атрибут src и в него прописываешь относительный путь к файлу .js. Не забывай про кавычки!
Эффект и в 1-ом и 2-ом случае абсолютно одинаковый. Какой способ использовать лучше? Конечно же с подключением файла. Этот способ позволяет не разводить "портянку" из кода в разметке страницы.
Ты же увидел у тега script в примере выше атрибут type="text/javascript"? Это атрибут, который уточняет для браузера, что это JS-код. Его совсем не обязательно писать, но это является хорошей практикой.
Теперь о главном – мы же написали целую строчку кода на JS!!!
Вот она:
alert('Ку-ку, ёпта');
Что же она делает? Она просто-напросто выводит во всплывающем окне то, что ты ее попросишь вывести.
Это может быть текст или какое-либо арифметическое действие, например:
alert(2 + 2); //выведет 4
Окно выглядит примерно так(зависит от операционки):
Дальше поступаем так.
Ты идешь вот по этой ссылке:
https://repl.it/@JSstupid/Learn-2-JavaScriptStupid и смотришь как и че работает, и пытаешься сам вывести в окне надпись "Я мамкин хацкер!".
А я готовлю следующий материал, чувак. Удачи и приятных занятий!