+7(967)234-82-75
Заказать звонок
+7(967)234-82-75
Заказать звонок

Уроки JS | Урок №2 - Hello world

Подготовка нужных инструментов?

Первым делом стоит выбрать удобный редактор кода, если вы этого еще не делали. Есть масса редакторов Atom, Visual Code, Notepad++, Sublime Text и др.

Я буду использовать редактор Sublime Text.

 

Далее стоит установить следующие плагины:

  • Emmet - упрощает создание html/xml и css кода;
  • JavascriptBeautify - соблюдение валидного кода js не будет лишним.

Если вы все подготовили для удобства, то поехали!

 

Структура

Для начала сделаем нормальную структуру нашего проекта.
Я создал главный файл index.html и папку js.
Внутри папки js, создал файл app.js.

Отлично, наша структура готова для дальнейшей работы.

 

Подключение js скриптов

Я буду опираться на то, что вы уже знаете HTML разметку. 
Для начала следует знать, если вы разрабатываете сайт, то js код можно писать прямо в HTML документе, внутри тега <script> подробнее можете прочитать тут, ниже показано как:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>Какой-то странный абзац</p>
	<script type="text/javascript">
		/* Ваш javascript код */
	</script>
</body>
</html>

Комментарии в javascript бывают однострочными, начинающимися с // и многострочными /*...*/.

Можно также подключить js файл и в файле index.html, напишем такой код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="main"></div>
	<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Js файл можно подключать как в head, так и в body. Следите за последовательностью подключаемых файлов, это важно в случае объявления переменных.

 

alert

Это функция, которая выводит на экран сообщение и приостанавливает выполнение скрипта, пока пользователь не нажмет "OK". Имеется похожие функции, с которыми познакомимся позднее.

В файле app.js пишем такой код:

alert("Hello world!");

 

console.log

Познакомимся с важной функцией как console.log поможет во многом, в выявлении ошибок и не только.
Напишем простой алгоритм вывода цикла в консоль.

Напишем такой код в файле app.js:

console.log('Hello world!');

Я в функцию console.log передал строку "Hello world", результат которого ниже на скрине:

Консоль в браузере Google Chrome вызывается горячей клавишей F12. 

 

Изменение DOM

Хорошо, с выводом сообщений в консоль разобрались, рассмотрим еще один способ, с которым будете работать практически всегда при программировании на js. Это изменение DOM, как расшифровывается и что это такое подробно описано тут.
В файле app.js пишем:

let elem = document.getElementById('main');
elem.innerHTML += '<h1>Hello world!</h1>';

JavaScript'е переменные уже являются объектами, которые имеют свойства и методы по умолчанию исходя из этого, в примере выше объявляем переменную elem сохранив в нее div элемент.
Объект document управляет всей html страницей, и дает доступ ко все элементам на странице. практически всегда с ней будем работать. И так, что такое document, мы разобрались, далее мы с помощью свойства innerHTML, добавляем внутрь элемента #main html строку.

Обо всех переменных, свойствах и методах поговорим более подробно в последующих уроках.

После обновления страницы, результат будет как на скрине ниже:

 

Итого

  • Мы познакомились со всплывающим сообщением alert, которое приостанавливает выполнение скрипта, пока не будет нажата кнопка "OK";
  • Научились выводить сообщения в консоль, которая поможет в дальнейшем в выявлении ошибок и не только;
  • Изменили HTML документ с помощью javascript кода.

В следующем уроке рассмотрим переменные и типы данных. Всего хорошего!

Просмотров 134
Автор Вусал Мамедов
Комментарии
Комментариев нет
Ответ на комментарий
отменить
Авторизуйтесь
чтобы оставлять комментарии
Заказать звонок
*
*
Заказать звонок
В ближайшее время мы с Вами свяжемся!
Заказать
*
*
*
Отправить
Мы уже обрабатываем ваш заказ.
В ближайшее время мы с Вами свяжемся!
Спасибо
Информация отправлена, мы скоро свяжемся с вами!