Введение в Java Script. Основные понятия. Литералы, переменные, выражения.

03.11.2022 12:19

    Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:

  • Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.
  • Проверка правильности заполнения пользовательских форм.
  • Решение "локальных" задач с помощью сценариев.
  • JavaScript-код - основа большинства Ajax-приложений.

    JavaScript позволяет создавать приложения, выполняемые на стороне клиента, т.е. эти приложения выполняются браузером на компьютере пользователя.
    Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои javascript-программы в различных браузерах.
    Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.
    Прежде, чем приступить к написанию сценариев, необходимо ознакомиться с основными понятиями, такими как литералы, переменные и выражения.

Литералы

Литералы - это простейшие данные с которыми может работать программа.

  • Литералы целого типа - целые числа в представлении:

        -десятичном, например: 15, +5, -174.

        -шестнадцатеричном, например: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0 - 9 и буквы a, b, c, d, e, f. Записываются они с символами 0х перед числом.

        -восьмеричном, например: 011, 0543. Восьмеричные числа включают только цифры 0 - 7.

  • Вещественные литералы - дробные цисла. Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73e-7. В привычном виде это 2.73Х10-7, но в javascript знак умножения и 10 заменяются символом -e-.
  • Логические значения - из два: истина (true) и ложь (false).
  • Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки. Например: "ваше имя", 'ваше имя'.


Переменные

    Переменные используются для хранения данных. Переменные определяются с помощью оператора var, после которого следует имя переменной. Имя переменной должно начинаться с буквы латинского алфавита или с символа подчеркивания. Само имя может включать буквы латинского алфавита, цифры и знак подчеркивания.

Например:
var test
var _test
var _my_test1

    Каждой переменной можно присвоить значение либо при ее инициализации (объявлении), либо в коде самой программы. Оператор присваивания обозначается знаком равно (=), но знак равенства здесь не имеет своего прямого значения. В данном случае он лишь указывает на то, что данной переменной присвоили значение.

Например:
var a=15
var b=23.15
var c='выполнено'
var s=true

    Каждая переменная имеет тип, определяемый значением переменной. Так в нашем примере: переменные a и b имеют тип number, переменная c имеет тип string, а переменная s - логический тип.

Выражения

    Выражения строятся из литералов, переменных, знаков операций и скобок. В результате вычисления выражения получается единственное значение, которое может быть числом, строкой или логическим значением.

В выражении a*b, a и b называются операндами, а * - знак операции. В javascript определены следующие операции:
 

операция

название

+

сложение

-

вычитание

*

умножение

/

деление

%

остаток от деления целых чисел

++

увеличение значения операнда на единицу

--

уменьшение значения операнда на единицу



    Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.

    Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:
 

оператор

эквивалентный оператор присваивания

X+=Y

X=X+Y

X-=Y

X=X-Y

X*=Y

X=X*Y

X/=Y

X=X/Y

X%=Y

X=X%Y



    В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.
    Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:
 

операция

название

меньше

<=

меньше или равно

==

равно

!=

не равно

>=

больше или равно

больше


    В javascript определены логические операции:

  • && - логическое И (AND),
  • || - логическое ИЛИ (OR),
  • ! - логическое НЕ (NOT).


    Результаты воздействия логических операторов на различные комбинации значений операндов показаны в таблице:
 

A

B

A&&B

A||B

!A

true

true

true

true

false

true

false

false

true

false

false

true

false

true

true

false

false

false

false

true



    Проще говоря, значение выражения A&&B истинно, если истинны оба оператора, и ложно в противном случае. Значение выражения A||B истинно, если значение хотя бы одного операнда истинно, и ложно в противном случае. Если значение операнда А истинно, то !A - ложно и наоборот.
    Для строковых литералов определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. 

Пример:

var st1="Привет";
var st2="Вася";
var st3=st1+st2;

    В результате в переменной st3 будет значение "Привет Вася".
    В конце приведем таблицу приоритетов операций в порядке их убывания. Приоритет операций определяет порядок, в котором выполняются операции в выражении.
 

название

обозначение

инкремент

++

декремент

--

отрицание

!

унарный минус

-

умножение

*

деление, остаток от деления

/,%

сложение

+

вычитание

-

сравнение

<, >, <=, >=

равенство

==

не равенство

!=

логическое И

&&

логическое ИЛИ

||

присваивание

=, +=, -=, *=, /=, %=, !=

 

Javascript-код на странице
 
    Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами <script></script>, которые в свою очередь обычно находятся в тегах <head></head>. У тега <script> должен быть указан параметр language, который и указывает язык написания скрипта:
 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="javascript">  </script>
  </head>
  <body>  
  </body>
</html>
    

    Теоретически теги <script></script> могут располагаться и в теле документа (в тегах <body></body>). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов <script></script>). Использовать такой способ сейчас не принято. 

    В настоящий момент выражение <script language="javascript"> уже устарело. Правильно будет <script type="text/javascript"> или даже просто <script>. Атрибут language использовался, когда <script> был введен в HTML 3.2 и взял имя языка. Атрибут type заменил его в HTML 4.0. В HTML 5 вы можете просто сделать <script> </script>.

 
Javascript-код во внешнем файле
 

    Создайте в блокноте страницу (пока пустую) и сохраните ее как script.js в ту же папку, где лежит html-страница.

    Это будет наша страница с javascript-кодом. Теперь нам надо подключить страницу script.js к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов. Добавим этот тег в html-страницу:

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  </body>
</html>
 
    

    В дальнейшем мы будем пользоваться именно этим способом, как самым удобным.

 

Комментарии

 

    Со временем программы становятся всё сложнее и сложнее. Возникает необходимость добавлять комментарии, которые бы описывали, что делает код и почему.

    Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.

    Однострочные комментарии начинаются с двойной косой черты //.

    Часть строки после // считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Например:

 
// Этот комментарий занимает всю строку
alert('Привет');
 
alert('Мир'); // Этот комментарий следует за инструкцией

    Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.

Например, как здесь:
 
/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
alert('Привет');
alert('Мир');

    Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */, он не будет исполняться.

    Это бывает удобно для временного отключения участка кода:

 
/* Закомментировали код
alert('Привет');
*/
alert('Мир');