Запуск JavaScript
JavaScript код пишется прямо на HTML странице внутри тега script. Этот тег можно размещать в любом месте страницы. Смотрите пример:
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
<script>здесь пишем JavaScript код<script>
</head>
<body> This is the main content of the page. </body>
</html>
Первая программа на JavaScript
Давайте напишем нашу первую программу на JavaScript. Вот она:
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
<script>alert ('Привет, мир!');<script>
</head>
<body> This is the main content of the page. </body>
</html>
Скопируйте этот код и разместите в HTML файле. Затем откройте этот файл в браузере - и вы увидите диалоговое окошко с текстом.
Особенности тега script в JavaScript
Учтите, что в теге script можно либо писать код, либо подключить файл. Попытка сделать это одновременно не будет работать. Поэтому следующий код не рабочий:
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
<script src="script.js">alert('Привет, мир!');<script>
</head>
<body> This is the main content of the page. </body>
</html>
Кеширование JavaScript файлов браузером
Браузер может кешировать подключенные JavaScript файлы. Это значит, что он сохраняет их у себя для повышения скорости загрузки сайта.
На практике это ведет к тому, что в какой-то момент при редактировании кода браузер будет применять предыдущую версию кода, а не вашу текущую.
Для борьбы с таким поведением можно чистить кеш браузера, либо использовать хитрый прием. Его суть заключается в том, что мы при подключении скрипта после имени файла ставим вопрос, знак равно и номер версии вашего скрипта. Когда браузер кеширует файл, вам просто нужно будет увеличить номер на единицу.
Смотрите пример:
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
<script src="script.js?v=1"><script>
</head>
<body> This is the main content of the page. </body>
</html>
Строгий режим в JavaScript
В современном JavaScript при написании кода первой строчкой нужно включать так называемый строгий режим. Этот режим заставляет браузер использовать все современные возможности языка.
Для включения строго режима первой строчкой скрипта необходимо и обязательно поставить команду "use strict". Давайте перепишем наш код в строгом режиме:
alert('text');
Переменные в JavaScript
Основным понятием любого языка программирования является переменная. Переменная представляет собой контейнер, в котором мы можем хранить какие-либо данные, например, строки или числа.
Каждая переменная должна иметь имя, которое может состоять из латинских букв, чисел, символов $ и знаков подчеркивания. При этом первый символ имени переменной не должен быть цифрой. Примеры названий переменных: str, my_str, myStr, a1, $, $a, $$a.
Строки в JavaScript
Как уже упоминалось ранее, данные могут иметь различный тип. Один из типов - числа, мы уже немного изучили. Давайте теперь перейдем к строкам.
Строки создаются с помощью кавычек:
alert(str); // выведет 'abc'
Кавычки могут быть не только одинарными, но и двойными:
alert(str); // выведет 'abc'
Между одинарными и двойными кавычками в JavaScript нет никакой разницы. Их использование зависит от ваших предпочтений. Я предпочитаю использовать одинарные кавычки, поэтому везде далее в курсе будут стоять именно они.
Здесь и далее, если результат вывода - строка, то я беру его в кавычки, чтобы показать, что это именно строка, вот так: выведет 'abc'. При выводе строки через alert никаких кавычек появляться не будет (то есть на экран выведется то, что у меня написано внутри кавычек).
Операции инкремента и декремента в JavaScript
Рассмотрим следующий код:
num = num + 1; // прибавляем к переменной num число 1
alert(num); // выведет 1
Как вы уже знаете, этот код можно переписать в сокращенном виде через оператор +=:
num += 1; // прибавляем к переменной num число 1
alert(num); // выведет 1
На самом деле прибавление единицы в программировании встречается так часто, что для этой операции придуман еще более сокращенный синтаксис - специальный оператор инкремент ++, увеличивающий значение переменной на 1.
Перепишем наш код с его помощью:
num++; // прибавляем к переменной a число 1
alert(num); // выведет 1
Есть также операция декремент --, уменьшающая значение переменной на 1. Смотрите пример:
num--; // отнимаем от переменной num число 1
alert(num); // выведет -1
Префиксный и постфиксный тип в JavaScript
На самом деле операции инкремента и декремента можно записывать двумя способами. Давайте рассмотрим эти способы на примере ++, а для -- все будет аналогично.
В первом способе операция записывается после имени переменной, вот так: a++, а во втором способе - перед именем переменной, вот так: ++a.
Первая форма называется постфиксной, а вторая - префиксной. Давайте посмотрим, в каких случаях проявляется разница между этими двумя формами.
Пусть у нас есть код alert(a++) и код alert(++a).
В случае alert(a++) переменная сначала выведется, а потом увеличится на единицу, а в случае alert(++a) переменная сначала увеличится на единицу, а потом выведется.
В следующем примере первый alert выведет 0, так как вначале сработает вывод на экран, а уже затем переменная увеличится:
alert(num++); // выведет 0
alert(num); // выведет 1
А теперь переменная вначале увеличится, а уже затем будет вывод на экран:
alert(num++); // выведет 1 - переменная увеличилась сразу
Такое поведение справедливо не только для вывода на экран, но и для присваивания:
let num2 = num1++; // в переменную num2 запишется 0
alert(num2); // выведет 0
alert(num1); // выведет 1 - переменная num1 поменялась после записи в num2
А теперь поменяем постфиксную форму на префиксную:
let num2 = ++num1; // в переменную num2 запишется 1
alert(num2); // выведет 1
Если наша операция выполняется на отдельной строке, то разницы между префиксной и постфиксной формами нет:
++num;
num++;
alert(num); // выведет 2