Любой опытный разработчик рано или поздно неизбежно встречается с людьми, которые являются просто технически неподготовленными, и будут считать все, что он делает, черной магией. И, наоборот, для технически неграмотного человека отсутствие понимания, что делает тот или иной специалист, является плохой исходной позицией. Данная лекция в простых терминах объясняет, чем является программирование, и, будем надеяться, поможет обеим вовлеченным сторонам направить это взаимное непонимание в более продуктивное русло.
Она поможет также новичкам разработки 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>
Интерпретатор обрабатывает код инструкцию за инструкцией, где каждая инструкция заканчивается точкой с запятой. Точка с запятой указывает интерпретатору на конец инструкции, также как точка или восклицательный знак определяет конец предложения в человеческих языках.
На обычном языке эта последовательность будет означать следующее:
var ) с именем x и присвоить ей значение 5. Конец инструкции.y и присвоить ей значение 6. Конец инструкции.result и присвоить ей в качестве значения результат сложения x и y. Конец инструкции. (Так как в присваивании значения x, проверяет значение y, складывает два значения и задает значение результата окончательному значению - 11)С * ), а для деления косую черту ( / ). Следующий пример показывает некоторые возможные вычисления. Отметим, что текст, перед которым стоят две косые черты //, служит в 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.123Integer (целое число): целые числа, такие как 1, 12, 33, 140, но не 1.233String (строка): строка текста, такая как "boat", "elephant" или "damn, you are tall!"Boolean (булево значение): true или false, но ничего другогоArray ( 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]. Поэтому, например, выдаст строку "Polly". "Но подождите!" - слышу я вопрос - "разве не будет указывать на Polly, при
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'] выдаст "
Это основные сведения о возможных типах значений
Прежде всего,
Затем,
Самым простым if, который имеет синтаксис if(условие){ выполни это … }.
<script type="text/javascript">
var country = 'France';
var weather;
var food;
var currency;
if(country === 'England'){
weather = 'horrible';
food = 'filling';
currency = 'pound sterling';
}
if(country === 'France'){
weather = 'nice';
food = 'stunning, but hardly ever vegetarian';
currency = 'funny, small and colourful';
}
if(country === 'Germany'){
weather = 'average';
food = 'wurst thing ever';
currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
weather + ', the food is ' + food + ' and the ' +
'currency is ' + currency;
alert(message);
</script>
Попробуйте это самостоятельно в примере с оператором if. Изменяйте значение country (страна - France, England, Germany), чтобы увидеть различные сообщения.
<!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>Weather condition demo</title>
<script type="text/javascript">
var country = 'France';
var weather;
var food;
var currency;
if(country === 'England'){
weather = 'horrible';
food = 'filling';
currency = 'pound sterling';
}
if(country === 'France'){
weather = 'nice';
food = 'stunning, but hardly ever vegetarian';
currency = 'funny, small and colourful';
}
if(country === 'Germany'){
weather = 'average';
food = 'wurst thing ever';
currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
weather + ', the food is ' + food + ' and the ' +
'currency is ' + currency;
alert(message);
</script>
</head>
<body>
</body>
</html>
Часть country, после чего следует три знака равенства. Три знака равенства означают, что country имеет указанное значение, но также правильный тип ( if(x == 5) будет истинным для x равного 5 и x равного "5". В зависимости от того, что делает программа, это может иметь совершенно разные результаты.
Другие примеры проверки
x > 0 - x больше нуля?x < 0 - x меньше нуля?x <= 4 - x меньше или равно четырем?x != 'hello' - x не совпадает с 'hello'?x - существует ли x?country задана, то это можно сделать следующим образом:
<script type="text/javascript">
var country = 'Germany';
var weather;
var food;
var currency;
if(country){
if(country === 'England'){
weather = 'horrible';
food = 'filling';
currency = 'pound sterling';
}
if(country === 'France'){
weather = 'nice';
food = 'stunning, but hardly ever vegetarian';
currency = 'funny, small and colourful';
}
if(country === 'Germany'){
weather = 'average';
food = 'wurst thing ever';
currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
weather + ', the food is ' + food + ' and the ' +
'currency is ' + currency;
alert(message);
}
</script>
Попробуйте это самостоятельно в примере if. Измените значение country, чтобы увидеть различные сообщения.
<!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>Weather condition demo</title>
<script type="text/javascript">
var country = 'Germany';
var weather;
var food;
var currency;
if(country){
if(country === 'England'){
weather = 'horrible';
food = 'filling';
currency = 'pound sterling';
}
if(country === 'France'){
weather = 'nice';
food = 'stunning, but hardly ever vegetarian';
currency = 'funny, small and colourful';
}
if(country === 'Germany'){
weather = 'average';
food = 'wurst thing ever';
currency = 'funny, small and colourful';
}
var message = 'this is ' + country + ', the weather is ' +
weather + ', the food is ' + food + ' and the ' +
'currency is ' + currency;
alert(message);
}
</script>
</head>
<body>
</body>
</html>
В то время как предыдущий пример будет всегда пытаться создать сообщение, независимо от доступной country - и поэтому возможно порождение ошибки или утверждения "this is , данная версия более защищена. Если country не определено, сообщение никогда не будет создаваться.
Более того, можно соединять различные ||, а "и" записывается как . Пусть необходимо проверить, что значение x находится между 10 и 20 - можно сделать это с помощью следующего if(x > 10 x < 20). Если требуется убедиться, что country будет "England" или "Germany", можно воспользоваться if(country === 'England' || country === 'Germany').
Существует также предложение else, которое будет применяться всякий раз, когда первое
<script type="text/javascript">
var umbrellaMandatory;
if(country === 'England'){
umbrellaMandatory = true;
} else {
umbrellaMandatory = false;
}
</script>
<script type="text/javascript">
var names = new Array('Chris','Dion','Ben','Brendan');
var all = names.length;
if(all == 1){
names[0] = '<p>' + names[0] + '</p>';
}
if(all == 2){
names[0] = '<p>' + names[0] + '</p>';
names[1] = '<p>' + names[1] + '</p>';
}
if(all == 3){
names[0] = '<p>' + names[0] + '</p>';
names[1] = '<p>' + names[1] + '</p>';
names[2] = '<p>' + names[2] + '</p>';
}
if(all == 4){
names[0] = '<p>' + names[0] + '</p>';
names[1] = '<p>' + names[1] + '</p>';
names[2] = '<p>' + names[2] + '</p>';
names[3] = '<p>' + names[3] + '</p>';
}
</script>
Это просто ужасно и крайне неудобно. Программирование должно облегчать жизнь, и если требуется писать снова и снова один и тот же код, то видимо что-то делается неправильно. Хорошие средства программирования оставляют нудные задачи машинам и сосредотачиваются на более интересных.
В данном случае вместо loop ), так как одни и те же действия повторяются для каждого элемента
for. Он имеет синтаксис, который похож на оператор if, но с дополнительными возможностями:
for(инициализация; конечное условия; изменение){
// сделай это, сделай это сейчас
}
Обычно с помощью for несколько раз выполняют код в фигурных скобках. Для этого необходимо определить изменяющуюся
<script type="text/javascript" charset="utf-8">
for(var i = 0;i < 11;i = i + 1){
// сделай это, сделай это сейчас
}
</script>
Здесь определена i с начальным значением 0, а затем выполняется проверка, не достигла ли она значения 11 (меньше 11?). Уравнение изменения - i = i + 1 - увеличивает i на единицу при каждом выполнении i во время каждой итерации на два, то
<script type="text/javascript">
for(var i = 0;i < 11;i = i + 2){
// сделай это, сделай это сейчас
}
</script>
С помощью
<script type="text/javascript">
var names = new Array('Chris','Dion','Ben','Brendan');
var all = names.length;
for(var i=0;i<all;i=i+1){
names[i] = '<p>' + names[i] + '</p>';
}
</script>
Отметим, что внутри i в качестве счетчика
Это - в очень кратком изложении - суть программирования. Вы имеете
Почему этот код не работает? var x = hello world;
Это допустимый код? var x = 'elephant';var y = "mouse";
Что проверяет это if(x > 10 x < 20 x !== 13 y < 10)
Что делает это if(b < 10 b > 20)?
Выполните i % 2 == 0
Крис Хайлман работает Web-разработчиком уже десять лет, с тех пор как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Фото с разрешения: Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.