На данном этапе изучения JavaScript вопросы, непосредственно связанные с HTML-документами, можно отложить в сторону и основное внимание уделить анализу принципов программирования. Это важный момент с практической точки зрения, а полученные навыки могут в дальнейшем быть использованы в любом языке при составлении сценариев или написании программ. Для начала нужно познакомиться с переменными, выражениями, типами данных и операторами - названия эти могут звучать несколько непривычно для тех, кому не приходилось еще писать программ. Однако беспокоить это не должно. Наличие даже небольшого опыта работы быстро сделает перечисленные выше термины простыми и понятными.
Используемым нами языком программирования будет JavaScript. У языка JavaScript есть еще несколько названий, с которыми, возможно, читателю уже приходилось сталкиваться. Версия компании Microsoft этого языка называется JScript. Последняя убрала из названия языка "Java" для того, чтобы не получать лицензию на использование названия "Java" у владельца торговой марки - компании Sun Microsystems.
За очень редкими исключениями, каждый используемый оператор JavaScript выполняет определенные действия с различными наборами информации или данных. Данные могут представляться текстовой информацией, отображаемой на экране с помощью соответствующих операторов JavaScript, или в виде флажка на форме (включен или выключен). Каждая отдельная часть информации в программировании называется значением. В обычном понимании термин значение ассоциируется с числом, характеризующим количество чего-либо. В программировании, тем не менее, этот термин не столь утрирован. Например, текстовая строка является значением. Отдельное число является значением. Опция элемента управления (которая либо активна, либо нет) также является значением.
В JavaScript значения могут быть нескольких типов. В таблице приведены формальные типы данных JavaScript .
| Тип данных | Пример | Описание |
|---|---|---|
| Строковый | "любая строка" | набор символов, заключённый в кавычки |
| Числовой | 45 | любое число, не в кавычках |
| Булев (логический) | true, false | Логическое "ДА" или "НЕТ" |
| null | null | Совершенно не имеет никакого значения |
| объект | *** | Программный объект, определяемый своими свойствами и методами (массивы также являются объектами) |
| функция | Fun_1() { *** } | Определение функции |
Использование языка, в котором задействовано такое незначительное количество типов данных, упрощает решение многих задач программирования. Особенно если сравнивать его с другими языками программирования, где столь часто разработчики сталкиваются с проблемами, связанными с несогласованностью типов данных (целочисленных, действительных чисел или чисел с плавающей запятой). В некоторых примерах книги иногда используются формальные ссылки или условные названия объектов и переменных. В настоящих сценариях и программах их можно заменять собственными названиями. Все строки заключаются в кавычки.
Встречаются ситуации, когда тип значения напрямую связан с используемым сценарием. Например, если пользователь вводит в текстовом поле формы число, то браузер запомнит это число как значение строкового типа string. Если в сценарии предусмотрено выполнение некоторых арифметических действий с этим числом, то перед тем как данное число использовать в математических преобразованиях, его необходимо сначала привести к числовому типу number. Примеры подобного преобразования типов приведены ниже.
Приготовление по рецепту блюда на кухне имеет, по сравнению с подготовкой данных для использования в программе, одно преимущество. На кухне приходится иметь дело с вполне реальными вещами: морковкой, молоком или филе из лосося; при этом от повара требуется только следовать готовому рецепту. Компьютер, если проводить аналогию, тоже следует инструкциям при управлении данными. Иногда такие данные представляют что-то вполне реальное, как, например, текст, введенный в текстовое поле формы. Однако, как только нужное значение получено программой, изменить заранее определенный набор действий бывает крайне сложно.
На самом деле данные, с которыми работает программа, являются ни чем иным, как простым набором битов (единиц и нулей, если хотите) в памяти компьютера. Если выражаться более точно, то данные в модернизированных с помощью JavaScript Web-страницах занимают часть памяти компьютера, выделяемой специально для использования браузером. В былые времена программистам нужно было знать конкретные адреса в оперативной памяти, по которым хранились значения, и откуда, в случае необходимости, их можно было востребовать. Поскольку на внутреннем уровне организации программы степень сложности осталась прежней, использование современных программных языков, вроде JavaScript, призвано избавить программистов от такой рутиной работы.
Наиболее удобным способом использования данных в сценарии является такой, при котором данные присваиваются в качестве значения переменной. Переменную удобно представить себе в виде контейнера, в котором хранится информация. Как долго эта переменная будет хранить информацию, зависит от нескольких факторов. Но после того как Web-страница удаляется с экрана (или окна), все используемые ею переменные немедленно удаляются из памяти.
В JavaScript создать переменную можно несколькими способами. Но только один из них применим практически во всех случаях. Этот способ подразумевает использование ключевого слова var, после которого указывается имя, которое будет присвоено переменной. Например, чтобы таким образом определить переменную под названием myAge, нужно воспользоваться следующим оператором JavaScript: var myAge
Этот оператор дает знать браузеру, что позже указанная переменная может быть использована для хранения информации. Любые данные, присвоенные этой переменной, могут в дальнейшем изменяться.
Чтобы присвоить переменной значение, используются операторы присвоения. Наиболее распространенным среди них является знак равенства. Если описанной выше переменной myAge нужно присвоить значение сразу при описании (такой комбинированный процесс описания и присвоения значения еще называется инициализацией переменной), то в описании переменной используется еще и оператор присваивания: var myAge=45
С другой стороны, если переменная описана в одном месте, а позже ей нужно присвоить другое значение, то сделать это можно следующим образом:
var myAge
myAge=45
Ключевое слово var для данной переменной в документе используется один единственный раз: при описании или инициализации. Переменные в JavaScript могут принимать значения любого типа. В отличие от многих других языков, в JavaScript нет необходимости при описании переменной указывать тип ее значений. Фактически, тип переменной может меняться в процессе выполнения программы. Эта либеральность просто сводит с ума некоторых классических программистов, привыкших, что и для данных, и для переменных нужно указывать тип. Однако, я не думаю, что вы такой уж опытный и застарелый программист, что вас это сколь-нибудьпоставит в тупик.
В программировании переменные всегда ценны их содержимым или значением. Например, после присвоения значения переменной, определяющей возраст автора книги,
var myAge=45
каждый раз, когда эта переменная будет использоваться в выражении, ее значение (45) автоматически будет применяться в любом операторе. Если известно, что, например, читатель на 15 лет моложе, то можно ввести новую переменную, значение которой будет рассчитываться, исходя из указанной выше информации и уже известной переменной. Сделать это можно так:
При следующем использовании в сценарии переменной yourAge ее значение будет рассчитано и окажется равным 30. Если позже в сценарии значение переменной myAge будет изменено, то на переменную yourAge эти изменения никак не повлияют, поскольку при описании переменной yourAge и расчете ее значения, значение переменной myAge было равно 45.
Возможно, на это в свое время никто не обратил внимания, но в прошлом уроке можно было увидеть, как происходит вычисление выражений. Имеется в виду второй оператор сценария document.write ():
document.write("of " + navigator.appNmae + ".")
При использовании метода document.write () (под этим термином в JavaScript подразумевается команда) следует указывать в скобках все необходимые параметры. В данном случае это текстовая строка, которая будет отображаться на Web-странице. В использованном примере параметр является одним выражением, состоящим из трех отдельных строк:
"of " navigator.appName "."
Использование знака плюс (+) в JavaScript является одним из способов объединения строк. Перед тем как JavaScript сможет отобразить данную строку, нужно выполнить некоторые простенькие расчеты. Первым этапом является вычисление значения свойства navigator.appName. Это значение равно строке, содержащей название используемого браузера. После того как соответствующее значение будет успешно преобразовано к строковому типу, JavaScript сможет закончить процесс объединения трех строк в одно целое. Такая результирующая строка и будет отображена на Web-странице.
Использование вычисляемых выражений позволяет реализовать более гибкий, по сравнению с примененным ранее, способ вызова метода document.write(). Вместо того, чтобы в явном виде указывать объединяемые строки в качестве параметра метода document.write(), можно записать эти строки в отдельную переменную, а потом уже задать эту переменную в качестве параметра метода. Вот как будет выглядеть наш метод в том случае, если предварительно объявить переменную и задать ей значение:
var textToWrite = "of " + navigator.appName + "." docunment.write(textToWrite)
Этот метод будет выполняться, поскольку значение переменной textToWrite преобразуется в необходимый вид данных. Метод docunment.write() примет значение этой переменной строкового типа и выполнит свою часть работы по отображению данных на экране. Это довольно характерный пример. Он еще раз подчеркивает, что при ознакомлении со сценариями или их отладке следует всегда обращать внимание на то, как именно производится в сценарии вычисление каждого выражения (переменной, значения, свойства объекта). В противном случае можно биться об заклад, что при изучении JavaScript (или любого другого языка) огромное количество времени у вас уйдет на попытку разобраться, откуда в сценарии появляется то или иное значение переменной.
Как уже упоминалось ранее, тип данных сильно влияет на выполнение операторов сценария, особенно если один из операндов не того типа, который можно ожидать в данном конкретном случае. Хотя в JavaScript предпринята серьезная попытка разрешить подобного рода проблемы путем преобразования типов данных, следует понимать, что мысли пользователей JavaScript все же угадывать не может. Если пользователь склонен трактовать переменную несколько иначе, чем это делает JavaScript, то вряд ли он может рассчитывать на получение приемлемого результата. Возьмем, например, сложение чисел, которые могут быть записаны в текстовом строковом формате. В самом обычном случае арифметическая операция сложения двух чисел проблем не вызывает, в ее результате можно получить вполне ожидаемый результат:
var sum=3+3 // результат = 6
Но если одним из чисел является строка, то JavaScript попытается преобразовать и второй операнд в строковый тип. В этом случае арифметическая операция по сложению чисел превращается в процесс слияния двух строк. Поэтому в выражении 3+"3" результат ="33" "Cтрочность" второго операнда "задает тон" всей операции. Первое значение автоматически преобразуется в строковый тип, а результатом операции является объединение двух строк. В этом можно убедиться самостоятельно. Если такой процесс несколько расширить и рассмотреть сумму из трех слагаемых
var sum=3+3+"3" // результат="63"
то вначале полученное конечное значение может показаться нелогичным. Однако логика все же есть. Выражения вычисляются слева направо. Поэтому первый знак плюс связан с первыми двумя числами и результатом выполнения такой операции является число 6. Но поскольку к числу 6 прибавляется строчное выражение "З", то конечным результатом, по причине использования в JavaScript правила "строчность", будет "63".
Большинство из того, что с точки зрения типов данных будет важно в дальнейшей работе, имеет непосредственное отношение к математическим операциям, вроде тех, что описаны выше. Тем не менее, некоторые методы требуют, чтобы в качестве параметров в них указывались данные одного или двух конкретных типов. Хотя JavaScript предоставляет широкие возможности по преобразованию типов, на данном этапе изучения книги имеет смысл более детально познакомиться с двумя способами такого преобразования: чисел в строки и строк в числа.
Как несложно заметить в последнем разделе, если числовое значение сохранено в качестве строки, что может иметь место, например, при введении значения в текстовом поле, у сценария могут появиться проблемы при попытке использовать это значение в математических операциях. В JavaScript предусмотрены две встроенные функции, которые можно использовать для преобразования чисел, представленных в виде строки, к числовому формату: это функции parseInt() и parseFloat() .
В JavaScript существует разница между целыми числами и числами с плавающей точкой. Целые числа (integer) всегда являются целыми. У них нет десятичной точки и справа от целой части у них ничего не задается. Числа с плавающей точкой (floating-point), в противоположность целым, могут содержать дробную часть справа от десятичной точки. С точки зрения вычисления арифметических операций в JavaScript разницы между целыми числами и числами с плавающей точкой нет: число - оно и в Африке число. Единственная ситуация, когда следует различать целые и нецелые числа, так это при передаче их в качестве параметров в некоторых методах, которые не могут обрабатывать дробную часть. Например, параметры метода scroll() должны быть числами целыми, поскольку они определяют число пикселей по вертикали и горизонтали, на которые нужно прокрутить окно. А на часть пикселя окно прокрутить не удастся даже самому ловкому пользователю.
Чтобы использовать любую из указанных функций преобразования типов, ей в качестве параметра следует передать ту строку, которую нужно преобразовать к числовому формату. Например, внизу приведен код преобразования значения двух различных строк в числовые значения с помощью функции parseInt():
parseInt("42") // результат = 42
parseInt("42.33") // результат = 42
Несмотря на то, что во второй строке передается строчный вариант числа с плавающей точкой, возвращаемое функцией значение соответствует целочисленному типу. В данном случае не использовалось никакое округление (хотя другие математические функции могли бы помочь и в этом). Десятичная точка и все, что стоит за ней, просто отбрасывается.
В качестве результата функция parseFloat(), если это возможно, возвращает целое число. В противном случае в качестве результата возвращается число с плавающей точкой, как это и показано ниже:
parseFloat("42") // результат = 42
parseFloat("42.33") // результат = 42.33
Поскольку эти две функции преобразуются к возвращаемому результату, то в тех местах, где нужно выполнить преобразование строковой переменной в числовое значение, следует просто вставить одну из этих функций. В отношении использованного ранее примера суммирования трех значений, одним из которых была строка, данную рекомендацию можно реализовать следующим образом:
var sum=3+3+parseInt("3") // результат = 9
Как правило, преобразовывать числа в строки приходится намного реже, чем строки в числа. Как можно было видеть в приведенных выше примерах, JavaScript больше привязан к строковым типам данных, а не к числовому формату, когда дело доходит до смешанного их использования в операторах. В любом случае, это является еще одним хорошим способом уберечь собственный код от всяких недоразумений и несоответствия типов. Наиболее простым способом преобразования чисел в строки является рецепт, взятый из описанных выше примеров и основанный на исключительной "любви" JavaScript к строкам. Путем добавления пустой строки к числу из последнего можно получить строковый эквивалент:
("" + 2500) // результат = "2500"
("" + 2500).length // результат = 4
В последнем примере вся изящность вычисления выражений проиллюстрирована с необычайной наглядностью. Наличие кавычек приводит к тому, что числовое выражение преобразуется к строковому типу. Строка string в JavaScript является объектом, который имеет связанные с ним свойства. Одним из этих свойств является length, значение которого равно количеству символов в строке. Количество символов в строке "2500" равно 4. Обратите внимание на то, что длина length - это число, а не строка.
В выражениях используется огромное число операторов. Ранее операторы нами уже использовались. Например, знак равенства (=) использовался в качестве оператора присвоения значения переменной. В предыдущем примере со строками символ плюс (+) использовался для объединения двух строк. Оператор выполняет, как правило, определенного рода вычисления (операции) или сравнивает два значения (значение с каждой стороны оператора называется операндом) с целью получения третьего. В данной главе будут кратко обсуждаться два типа операторов - арифметические и операторы сравнения. Далее будет описано значительно большее число операторов, но вам главное понять, как функционируют базовые элементы, описываемые здесь. Тогда работу остальных будет понять намного проще.
Может показаться странным говорить о текстовых строках в контексте "арифметических" вычислений. Но выше уже приводился пример использования оператора (+) в тех случаях, когда одним из операндов является строка. Оператор в виде знака плюс дает указание JavaScript объединить две строки именно в том месте, где размещен оператор. Оператор объединения строк ничего не знает о словах и пробелах, так что программисту нужно заранее позаботиться о том, чтобы любые две объединяемые строки имели достаточное количество пробелов - даже если для этого придется добавлять эти самые пробелы специально:
firstName = "Jonny" lastName = "Dooraley" fullName = firstName+" "+lastName // результат="Jonny Dooraley"
В JavaScript для обозначения арифметической операции сложения тоже используется знак плюс. Когда обеими операндами являются числа, JavaScript будет трактовать операцию как арифметическое сложение двух чисел, а не как объединение строк. В JavaScript встроены арифметические операторы сложения (+), вычитания (-), умножения (*) и деления (/).
Другим важным типом операторов являются те, с помощью которых можно проводить сравнение двух или более значений на предмет совпадения. Такого типа сравнение в качестве результата продуцирует значение логического типа "Boolean": true (истина) или false (ложь). В таблице 2 представлен список операторов сравнения. Оператор, с помощью которого можно определять эквивалентность двух элементов, состоит из пары знаков равенства (чтобы отличить его от знака равенства, используемого в операторе присвоения).
| Оператор | Описание |
|---|---|
| = | Равно |
| != | Не равно |
| < | Меньше |
| > | Больше |
| >= | Больше или равно |
| <= | Меньше или равно |
Вот уж где поистине самое подходящее место для операторов сравнения, так это в тех конструкциях сценария, где принимаются решения. Для сравнения: повар на кухне такие процедуры делает очень часто: если соус слишком жидкий, то нужно добавить муки.