JavaScript - Урок 1. Основные понятия
Язык программирования 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 - Урок 2. Где размещать javascript-код
Javascript-код может быть размещен как на самой странице, так и во внешнем файле.
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>). Использовать такой способ сейчас не принято.
Javascript-код во внешнем файле
Создайте в блокноте страницу (пока пустую) и сохраните ее как script.js в ту же папку, где лежит html-страница:
Это будет наша страница с javascript-кодом. Теперь нам надо подключить страницу script.js к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов (html - урок 2). Добавим этот тег в 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>
В дальнейшем мы будем пользоваться именно этим способом, как самым удобным.