НОУ ИНТУИТ | Основы JavaScript. Лекция 1: Программирование

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.07.2011 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 87 студентам

| Поделиться |

Поддержать программу

Аннотация: В лекции рассматривается отличие JavaScript от других языков web-программирования, переменные, типы переменных (float, integer, string, boolean, array, objects), а так же рассматриваются условия (if) и циклы (for).

Введение

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

Она поможет также новичкам разработки Web-приложений усвоить некоторые общие принципы, которые необходимо понимать, прежде чем переходить к изучению программирования на JavaScript. Может показаться скучным начинать с этого, но поверьте, работа станет намного более надежной, динамичной и креативной (читайте: значительно более эффективной), если постараться, прежде всего, усвоить эти элементарные принципы. Важно изучить базовые правила программирования, прежде чем начинать работать с конкретными языками (JavaScript в случае данного курса).

Лекция имеет следующую структуру:

Порядок, у меня будет порядок!
- Переменные
  - Типы переменных
  - Числа с плавающей точкой и целые числа
  - Логические значения
  - Строки
  - Массивы
  - Объекты
Условия
Циклы
Заключение
Контрольные вопросы

Порядок, у меня будет порядок!

Программирование в своей самой исходной форме является порождением команд и наблюдением, что они выполняются. Это смесь математики и лингвистики: определяется множество вычислений и нужно приказать машинам выполнить их, задавая порядок с помощью правильной грамматики. Грамматика в программировании является синтаксисом, т.е. способом соединения слов в словосочетания и предложения, и существенно отличается в различных языках.

Например, следующие два фрагмента кода выполняют одну и ту же задачу на JavaScript и PHP:

var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
var celsius = (fahrenheit - 32) * 5 / 9;
alert(celsius);

$fahrenheit = $_GET['fahrenheit'];
$celsius = ($fahrenheit - 32) * 5 / 9;
echo $celsius;

Посмотрите пример на JavaScript преобразования температуры из шкалы Фаренгейта в шкалу Цельсия.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JavaScript Fahrenheit conversion demo</title>
  <script type="text/javascript">
    var fahrenheit = prompt('Enter temperature in Fahrenheit',0);
    var celsius = (fahrenheit - 32) * 5 / 9;
    alert(celsius);    
    // honestly, go metric!
  </script>
</head>
<body>
</body>
</html>

Языки программирования интерпретируются, чтобы превратиться в действия или результаты. Некоторые языки, такие как JavaScript, интерпретируются браузером Web, и, чтобы заставить их "выполнить работу", достаточно поместить код в документ HTML и открыть его в браузере. Другие языки программирования, чтобы сделать их исполнимыми, необходимо перевести (компилировать) с помощью дополнительного шага. Глубоко внутри себя все компьютеры понимают только нули и единицы, но над этим существует множество уровней языков, каждый из которых выполняет различные задачи.

Переменные

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

3 + 5 = 8

Можно сказать, что вычисления начинают выполняться, когда вводится неизвестное, например, x внизу:

3 + x = 8

Перенося известные значения в правую часть, можно определить x:

x = 8 - 3 
-> x = 5

При использовании нескольких переменных выражение становится более гибким:

x + y = 8

Можно изменять значения x и y, и формула может по-прежнему оставаться справедливой:

x = 4
y = 4

или

x = 3
y = 5

То же самое происходит в языках программирования - в программировании переменные являются контейнерами для значений, которые могут изменяться. Переменные могут содержать любые виды значений, а также результаты вычислений. Переменные имеют имя и значение, разделенные знаком равенства (=).

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

Чтобы упростить изложение, давайте будем использовать в этой лекции в качестве примера язык программирования JavaScript (логично, так как этот раздел руководства по стандартам Web посвящен программированию на JavaScript). Следующий пример определяет две переменные, вычисляет результат сложения двух переменных и определяет этот результат как значение третьей переменной.

Примечание: Теги <script> присутствуют здесь, чтобы сообщить браузеру, что текст между ними является языком сценария, и что он должен интерпретироваться соответствующим образом. Атрибут типа "text/javascript" сообщает браузеру, какой это язык.

<script type="text/javascript">
var x = 5;
var y = 6;
var result = x + y;
</script>

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

На обычном языке эта последовательность будет означать следующее:

Здесь находится что-то, что не является кодом HTML; вызвать транслятор, который понимает язык типа JavaScript в текстовом формате.
Определить новую переменную (это ключевое слово var ) с именем x и присвоить ей значение 5. Конец инструкции.
Определить новую переменную с именем y и присвоить ей значение 6. Конец инструкции.
Определить новую переменную с именем result и присвоить ей в качестве значения результат сложения x и y. Конец инструкции. (Так как в присваивании значения переменной имеется вычисление, то интерпретатор затем проверяет значение x, проверяет значение y, складывает два значения и задает значение результата окончательному значению - 11)
Достаточно этого странного языка - возвращаемся к HTML и приказываем транслятору скрыться.

С переменными можно выполнять всевозможные вычисления, вставляя между ними различные операторы. Существуют классические операции, такие как сложение с помощью оператора плюс и вычитание с помощью оператора минус. Для умножения необходимо использовать звездочку ( * ), а для деления косую черту ( / ). Следующий пример показывает некоторые возможные вычисления. Отметим, что текст, перед которым стоят две косые черты //, служит в JavaScript в качестве комментариев. Когда интерпретатор JavaScript встречает их в сценарии, то он не пытается выполнить то, что следует после них в этой строке, а пропускает до конца строки - эти комментарии вставляются для людей, и не должны интерпретироваться браузером.

<script type="text/javascript">
var x = 5;
var y = 6;
var z = 20;
var multiply = x * y * z;
// multiply will be 600 
var divide = x / y;
// divide будет  0.8333333333333334
var addAndDivide = (x + z) / y;
// addAndDivide = 4.166666666666667
var half = (y + z) / 2;
// half будет  13
</script>

Как легко видеть, можно смешивать любые переменные, а также использовать в вычислениях переменные вместе с фиксированными значениями. Можно также группировать их с помощью скобок для изменения естественного порядка выполнения операторов (сначала скобки, затем умножение или деление, затем сложение или вычитание, т.е. обычный порядок вычислений классической математики).

Типы переменных

Однако все это было бы достаточно нудно, так как это можно сделать с помощью обычного калькулятора. Компьютеры являются значительно более развитыми устройствами и могут использовать значительно более сложные переменные. Именно здесь и появляются типы переменных. Существуют различные типы переменных и разные языки программирования поддерживают различные типы. Наиболее широко распространенными типами переменных являются:

Float (число с плавающей точкой): числа, такие как 1.21323, 4, 100004 или 0.123
Integer (целое число): целые числа, такие как 1, 12, 33, 140, но не 1.233
String (строка): строка текста, такая как "boat", "elephant" или "damn, you are tall!"
Boolean (булево значение): true или false, но ничего другого
Array ( массив ): совокупность значений, такая как 1,2,3,4,'I am bored now'
Objects: представление какого-то объекта. Объекты являются конструкциями, которые пытаются моделировать экземпляры объектов в реальном мире с помощью свойств и методов. Например, можно смоделировать кота (cat) как объект и определить, что он имеет четыре ноги, один хвост, и что он рыжий. Можно также определить, что он может мурлыкать, определяя метод purr(), и что он может выпрашивать чизбургер с помощью метода getCheeseBurger(). Можно также повторно использовать объект кота cat и определить другого кота со всеми свойствами исходного, но только серого цвета.

JavaScript является "слабо типизированным" языком, то есть в нем не требуется явно объявлять, какой тип данных содержат переменные. Необходимо использовать только ключевое слов var для указания, что объявляется переменная, а браузер будет определять, какой тип данных используется из контекста и использования кавычек.

Числа с плавающей точкой и целые числа

Нет ничего магического или необычного при работе с этими типами данных. Вы определяете переменные и задаете для них значения любого числового типа.

<script type="text/javascript">
  var fahrenheit = 123;
  var celsius = (fahrenheit - 32) * 5/9; 
  var clue = 0.123123;
</script>

Переменные этих типов данных можно модифицировать с помощью любых математических операторов.

Булевы значения

Булевы значения являются просто определениями "да или нет". Они задаются с помощью ключевых слов true или false.

<script type="text/javascript">
  var doorClosed = true;
  var catCanLeave = false;
</script>

Строки

Строки являются строками текста, которые могут содержать любые символы. В JavaScript строки определяют, помещая текст между одиночными или двойными кавычками.

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = "Christian";
  var age = '33';
  var hair = 'Flickr famous';
</script>

С помощью оператора + можно выполнить конкатенацию строк (технический термин, означающий "соединение вместе"), но строки нельзя вычитать одну из другой. Для изменения строк необходимо использовать функции, которые предоставляет язык. С другой стороны простая конкатенация выполняется очень легко:

<script type="text/javascript">
  var surname = 'Heilmann';
  var name = 'Christian';
  var age = '33';
  var hair = 'Flickr famous';
  var message = 'Hi, I am ' + name + ' ' + surname + '. ';
  message += 'I am ' + age + ' years old and my hair is ' + hair;
  alert(message);
 </script>

Посмотрите пример конкатенации строк.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>String concatenation demo</title>
  <script type="text/javascript">
    var surname = 'Heilmann';
    var name = 'Christian';
    var age = '33';
    var hair = 'Flickr famous';
    var message = 'Hi, I am ' + name + ' ' + surname + '. ';
    message += 'I am ' + age + 'years old and my hair is ' + hair;
    alert(message);
  </script>
</head>
<body>
</body>
</html>

Оператор += является сокращенной записью для "message = message +". Результатом этого сценария будет строка "Hi I am Christian Heilmann. I am 33 years old and my hair is Flickr famous".

Существует небольшая ловушка, о которой надо помнить при использовании конкатенации, чтобы не перепутать со сложением значений. Если требуется сложить два значения, необходимо убедиться, что оба являются числами, а не строками. Пример сравнения конкатенации и сложения показывает различие между ними. "5"+"3" будет 53, а не 8! Простейшим способом преобразования строки в число, как показано в примере, будет использование знака "+" перед строкой.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Concatenation versus adding</title>
  <script type="text/javascript">
    var x = 5;
    var y = "3";
    alert(x+y);
    y = +y;
    alert(x+y);
  </script>
</head>
<body>
</body>
</html>

Большинство языков программирования позволяют использовать одиночные или двойные кавычки для ограничения строки, но не разрешают смешивать их. Чтобы интерпретатор JavaScript не путался с определением конца строки, необходимо комментировать кавычки внутри строки с помощью обратной косой черты:

<script type="text/javascript">
  // это будет вызывать ошибку, так как интерпретатор не знает 
  // что находится после символа '. Здесь определена строка 
  // 'Isn'.
  var stringWithError = 'Isn't it hard to get things right?';
  // Это не ошибка, все хорошо  
  var stringWithoutError = 'Isn\'t it hard to get things right?';
</script>

Массивы

Массивы являются очень мощной конструкцией. Массив является совокупностью значений, каждое из которых может быть переменной или реальным значением. Например:

<script type="text/javascript">
  var pets = new Array('Boomer','Polly','Mr.Frisky');
</script>

Доступ к каждому значению можно получить с помощью счетчика массива, который является порядковым номером в массиве - представьте, что просматриваете главы в книге. Синтаксис выражения будет arrayname[index]. Поэтому, например, pets[1] выдаст строку "Polly". "Но подождите!" - слышу я вопрос - "разве не pets[2] будет указывать на Polly, при условии, что это второе значение в массиве?" - Нет. Счетчик не будет равен 2, так как компьютеры начинают считать с 0, а не с 1! Это очень распространенная причина путаницы и ошибок.

Массивы автоматически содержат специальную информацию: length (длина). Если проверить значение pets.length, то будет получено 3, так как в этом массиве содержится три элемента.

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

Объекты

Если имеется совокупность предметов, которые требуют более детального описания, чем просто изменяющееся число, то массива может оказаться недостаточно, и тогда потребуется создать объект. Объекты являются конструкциями в программировании, которые представляют или моделируют реальные вещи, такие как людей, автомобили или инструменты.

Объекты являются большой и очень развитой и многогранной частью программирования, и подробное объяснение их здесь было бы за рамками данной лекции. Скажем просто, что объект является вещью, которая имеет несколько свойств. Пусть, например, имеется объект person, можно определять различные свойства этого объекта, присоединяя их с помощью точки:

<script type="text/javascript">
  var person = new Object();
  person.name = 'Chris';
  person.surname = 'Heilmann';
  person.age = 33;
  person.hair = 'Flickr famous';
</script>

Доступ к этим свойствам можно получить с помощью записи с точкой ( person.age выдаст 33) или с помощью записи с квадратными скобками ( person['name'] выдаст "Chris"). Позже в этом курсе объекты JavaScript будут рассмотрены более подробно.

Это основные сведения о возможных типах значений переменных. Другой значительной частью программирования являются структура и логика программы. Здесь вступают в игру еще две идеи программирования: условия и циклы.

Дальше >>

Основы JavaScript

Основы JavaScript

Программирование - основные понятия!

Введение

Порядок, у меня будет порядок!

Переменные

Типы переменных

Числа с плавающей точкой и целые числа

Булевы значения

Строки

Массивы

Объекты

Вопросы и ответы

Студенты

Авторизоваться

Основы JavaScript

Основы JavaScript

Программирование - основные понятия!

Введение

Порядок, у меня будет порядок!

Переменные

Типы переменных

Числа с плавающей точкой и целые числа

Булевы значения

Строки

Массивы

Объекты

Вопросы и ответы

Студенты