Меню
Спросить
JS

Hello JavaScript!

1 октября 2017
Hello JavaScript!

Всем привет, первая статья в этом разделе - JavaScript для начинающих. Будем постепенно осваивать силу данного языка, если это твой первый язык и ты только начинаешь изучать программирование, то тебе стоить прочитать или посмотреть все видео с этого раздела. Сегодня в этой статье поговорим и познакомимся с языком JavaScript и напишем свою первую Hello JS! Поехали =)

JavaScript

JavaScript - это язык программирования, не путать с Java, хотя он похож на него. В большей степени он предназначен для программного управления элементами HTML страницы. Я думаю тебе все это не особо интересно, более подробно можно посмотреть в википедии. JavaScript это клиентский язык, то есть его код исполняется на стороне пользователя, в отличии от PHP языка. На данном языке написано множество библиотек и фреймворков, самой популярной на сегодняшний день, по моему мнению, я считаю библиотеку JQuery. Изучив JavaScript, ты с легкостью освоишь данную библиотеку. Говоря простым языком JavaScript даст тебе возможность управлять html документом, с его помощью можно написать не только сайт, но и веб-приложения, как раз для них и существуют фреймворки, например, Angular или Vue. Но мы начнем с простого и постепенно ты уже сам выберешь себе свой фреймворк или библиотеку, хотя ты можешь и писать на чистом, нативном JavaScriptе. Даже если тебе нужен будет простейший калькулятор, без данного языка тебе не обойтись.

JavaScript, начало работы

Для того, чтобы начать программировать на JavaScript, тебе не нужно абсолютно ни чего скачивать или устанавливать. Достаточно знать HTML и CSS языки. Давай создадим для примера пустую HTML страницу. Теперь определимся, где писать сам код JS.
Первый вариант - писать в самом html документе, использовав тег script, внутри которого и будет твой код:

  1. <body>
  2.     <script>
  3.         // Здесь код JavaScript
  4.     </script>
  5. </body>

Ты можешь указать атрибут type со значением text/javascript, но говорят он теперь не обязателен в нашем веке.
Второй способ и лучше придерживаться его - писать код JS во внешнем файле, при этом подключив его к странице html. Возможно ты уже подключал стили к сайту, так вот подключить свой скрипт не сложнее.
Создаем файл с любым названием, я назову его script, добавим расширение к файлу. Если у документов HTML расширение .html, у стилей CSS - .css, у JavaScript файла соответственно будет расширение .js, в итоге получился файл - script.js. Открываем его и учитываем, что кодировка должна быть такой же как и у сайта. Теперь осталось подключить данный файл в HTML документе. Используем все тот же тег script, атрибут type(не обязательно) и атрибут src - путь к файлу.

  1. <head>
  2.     <script type="text/javascript" src="script.js"></script>
  3. </head>

Подключать желательно в теге head, но можно и в теле html документа, а можно и по другому, но сначала поговорим от чего зависит место подключения файла.
Во-первых, если мы подключаем в теге head, то та часть html кода, которая находится после, то есть ниже тега script, грузится будет дольше, в зависимости от веса файла, во-вторых, поэтому можно его подключить в конце тела страницы, то есть он подключиться, только после того, когда загрузится тело сайта, но это не всегда полезно и может кому-то не подойти по размеру, есть выход.
Используем атрибуты async или defer.

ASYNC и DEFER

Эти два атрибута похожи, но все таки различаются. Смысл их применения прост. Допустим мы расположили внешние файлы в теге head, что естественно будет мешать быстрому отображению всего сайта, так вот данные атрибуты сделают загрузку внешнего файла асинхронной, простым языком - документ загрузится самостоятельно и внешние файлы не будут мешать его загрузке, а сами файлы начнут выполнения кода после того, как полностью загрузятся. Этим они и похожи, а вот различаются порядком исполнения кода из файлов. То есть:
если используем атрибут async, то первым выполнится код того файла, который быстрее загрузится,
а при использовании атрибута defer, код будет исполнятся по порядку их написания, при чем не важно кто первее загрузился.
Например:
async

  1. <head>
  2.     <script type="text/javascript" src="one.js" async></script>
  3.     <script type="text/javascript" src="two.js" async></script>
  4. </head>

Тут выполнится код того, кто первее загрузился.
defer

  1. <head>
  2.     <script type="text/javascript" src="one.js" defer></script>
  3.     <script type="text/javascript" src="two.js" defer></script>
  4. </head>

В данном случае, если файл two.js загрузится быстрее, то он не выполнится в любом случае, пока не загрузится и выполнится файл one.js, так как он первый в очереди.
Думаю с этим понятно, поехали дальше =)

alert('Hello JS!')

Мы уже создали страницу html и отдельный файл scrip.js, так же мы его подключили, теперь напишем код первой программы =)
Для первого раза мы сделаем вывод информации на экран и сложение двух чисел:

  1. alert('Hello JS! Сколько будет 2+2, 2+2 = '+(2+2));

Поясню:
alert - это команда для вывода сообщения, текст сообщения содержится в круглых скобках и в апострофах или в кавычках.

Вот наш результат:

alert - hello JS!

Заключение

На сегодня все друзья, желаю удачи в изучении JavaScripta, до следующей части. Всем спасибо, пока =)

Следующая статья