Практическое применение. Написание в JS. Типы данных.
Содержание
Вопрос 1. Написание в JS
Вопрос 2. Типы данных.
Вопрос 3. Функции JS
Литература
Вопрос 1. Написание в JS.
Программы JS.
Компьютерная программа представляет собой список «инструкций», которые должны быть «выполнены» компьютером. В языке программирования эти инструкции по программированию называются операторами. Программа JavaScript — это список программных инструкций.
Ключевые слова.
Операторы JavaScript часто начинаются с ключевого слова для определения выполняемого JavaScript-действия.
Таблица 1.
Ключевые слова JS
|
Ключевое слово |
Описание |
|
break |
Завершает переключение или цикл |
|
continue |
Выскакивает из петли и начинается сверху |
|
debugger |
Останавливает выполнение JavaScript и вызывает (если доступно) функцию отладки |
|
do… while |
Выполняет блок инструкций и повторяет блок, в то время как условие истинно |
|
for |
Помечает блок инструкций для выполнения, если условие истинно |
|
function |
Declares a function |
|
if… else |
Помечает блок инструкций для выполнения в зависимости от условия |
|
return |
Exits a function |
|
switch |
Помечает блок инструкций для выполнения в зависимости от различных вариантов |
|
Try … catch |
Реализует обработку ошибок в блоке инструкций |
|
var |
Объявляет переменную |
Дефисы.
Исторически сложилось так, что программисты использовали различные способы объединения нескольких слов в одно имя переменной:
Дефисы:
- имя, фамилия, мастер-карта, Интер-Сити.
Дефисы не допускаются в JavaScript. Они зарезервированы для вычитания.
Подчеркнуть:
Если надо сделать составное имя переменной, надо ставить символ подчеркивания: Куулл_Цити.
JS и регистр.
Все идентификаторы JavaScript чувствительны к регистру. Переменные Фамилия и Фамилия, являются двумя различными переменными.
var lastname, lastName; lastName = «Андрей»; lastname = «Смирнов»;
Комментарии.
Использование комментариев для предотвращения выполнения кода подходит для тестирования кода. Добавление//перед строкой кода изменяет строки кода из исполняемой строки на комментарий.
В этом примере используется//для предотвращения выполнения одной из строк кода:
//document.getElementById(«myH»).innerHTML = «My First Page»; document.getElementById(«myP»).innerHTML = »My first
paragraph.»;
В этом примере используется блок комментария для предотвращения выполнения нескольких строк:
/*
document.getElementById(«myH»).innerHTML = «My First Page»; document.getElementById(«myP»).innerHTML = «My first
paragraph.»;
*/
Переменные.
Желательно объявлять переменные вначале сценариев. Переменные JavaScript — это контейнеры для хранения значений данных. Все переменные JavaScript должны быть идентифицированы с уникальными именами. Эти уникальные имена называются идентификаторами. Идентификаторы могут быть краткими именами (например, x и y) или более описательными именами (возраст, сумма, тоталволуме).
Общие правила построения имен переменных (уникальных идентификаторов):
- Имена могут содержать буквы, цифры, символы подчеркивания и знаки доллара.
- Имена должны начинаться с буквы.
- Имена могут также начинаться с $ и _
- Имена чувствительны к регистру (y и y-разные переменные).
Зарезервированные слова (например, ключевые слова JavaScript) не могут использоваться в качестве имен.В одном операторе можно объявить множество переменных. Для этого необходимо начать инструкцию с var и разделить переменные запятой:
var person = «John Doe», carName = «Volvo», price = 200;
В программах переменные часто объявляются без значения. Значение может быть что-то, что должно быть вычислено, или что-то, что будет предоставлено позже, как пользовательский ввод. Переменная, объявленная без значения, будет иметь значение undefined. Переменная Name будет иметь значение undefined после выполнения этого оператора:
var Name;
Если поместить число в кавычки, остальные числа будут обрабатываться как строки и объединяться.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>The result of adding 2 + 3 + «5»:</p>
<p id=«demo»></p>
<script>
var x = 2 + 3 + «5» document.getElementById(«demo»).innerHTML = x;
</script>
</body>
</html>
Операторы строки JavaScript
Оператор + и += можно также использовать для добавления (сцепления) строк.
<!DOCTYPE html>
<html>
<body>
<h2> Operators JS</h2>
<p>Пример того, как можно строить строки</p>
<p id=«demo»></p>
<script>
txt1 = «Сегодня будет»; txt1 += «солнечно»;
document.getElementById(«demo»).innerHTML = txt1;
</script>
</body>
</html>
Операторы типа JS.
typeof – возвращает тип переменной.
Instanceof – возвращает значение true, если объект является экземпляром типа объекта.
Арифметические операторы JS.
Арифметические операторы выполняют арифметические действия с числами (литералами или переменными).
Таблица 2.
Арифметические операции
|
Оператор |
Описание |
|
+ |
Дополнение |
|
– |
Вычитание |
|
* |
Умножения |
|
/ |
Деление |
|
% |
Модуль (остаток) |
|
++ |
Увеличение |
|
— |
Уменьшения |
Первые 4 оператора работают аналогично арифметическим, соответственно подробнее их рассматривать не будем. Остаток вычисляется благодаря оператору модуля (%).
<!DOCTYPE html>
<html>
<body>
<h2>The % Operator</h2>
<p id=«demo»></p>
<script> var x = 5; var y = 2;
var z = x % y; document.getElementById(«demo»).innerHTML = z;
</script>
</body>
</html>
В арифметике деление двух целых чисел создает Коэффициент и остаток. В математике результатом операции по модулю является оставшаяся часть арифметического деления. Инкремент и декремент получается за счет (++) и (–)
<!DOCTYPE html>
<html>
<body>
<h2>Оператор инкремента</h2>
<p id=«demo»></p>
<script> var x = 5; x++;
var z = x; document.getElementById(«demo»).innerHTML = z;
</script>
</body>
</html>
Приоритет оператора. Приоритет оператора описывает порядок выполнения операций в арифметическом выражении.
<!DOCTYPE html>
<html>
<body>
<p>Простая математика говорит, </p>
<p>Тем не менее, выражение считается первым, как в математике.</p>
<p id=«demo»></p>
<script>
document.getElementById(«demo»).innerHTML = (100 + 50) * 3;
</script>
</body>
</html>
Выражения в скобках полностью вычисляются до того, как значение используется в оставшейся части выражения.
Таблица 3.
Приоритет оператора
|
Значение |
Оператор |
Описание |
Пример |
|
20 |
() |
Группирование выражений |
(3 + 4) |
|
19 |
Член |
person.name |
|
|
19 |
[] |
Член |
person[«name»] |
|
19 |
() |
Вызов функции |
myFunction() |
|
19 |
new |
Создать |
new Date() |
|
17 |
++ |
Приращение суффикса |
i++ |
|
17 |
— |
Уменьшение суффикса |
i– |
|
16 |
++ |
Приращение префикса |
++i |
|
16 |
— |
Уменьшение префикса |
–i |
|
16 |
! |
Логическое не |
!(x==y) |
|
16 |
typeof |
Тип |
typeof x |
|
15 |
** |
В возведение (ес7) |
10 ** 2 |
|
14 |
* |
Умножения |
10 * 5 |
|
14 |
/ |
Division |
10 / 5 |
|
14 |
% |
Остаток дивизиона |
10 % 5 |
|
13 |
+ |
Дополнение |
10 + 5 |
|
13 |
– |
Вычитание |
10 – 5 |
|
12 |
<< |
Сдвиг влево |
x <<2 |
|
12 |
>> |
Сдвиг вправо |
x>> 2 |
|
12 |
>>> |
Сдвиг вправо (неподписанный) |
x>>> 2 |
|
11 |
< |
Менее |
x <y |
|
11 |
<= |
Меньше или равно |
x <= y |
|
11 |
> |
Больше |
x> y |
|
11 |
>= |
Больше или равно |
x>= y |
|
11 |
in |
Правильно в объекте |
«PI» in Math |
|
11 |
instanceof |
Экземпляр объекта |
instanceof Array |
|
10 |
== |
Равно |
x == y |
|
Значение |
Оператор |
Описание |
Пример |
|
10 |
=== |
Строгий равный |
x === y |
|
10 |
!= |
Неравные |
x != y |
|
10 |
!== |
Строгие неравные |
x !== y |
|
9 |
& |
Побитовое и |
x & y |
|
8 |
^ |
Побитовое исключающее |
x ^ y |
|
7 |
| |
Побитовое или |
x | y |
|
6 |
&& |
Логические и |
x && y |
|
5 |
|| |
Логические или |
x || y |
|
4 |
?: |
Состояние |
? «Yes»: «No» |
|
3 |
+= |
Назначения |
x += y |
|
3 |
+= |
Назначения |
x += y |
|
3 |
-= |
Назначения |
x -= y |
|
3 |
*= |
Назначения |
x *= y |
|
3 |
%= |
Назначения |
x %= y |
|
3 |
<<= |
Назначения |
x <<= y |
|
3 |
>>= |
Назначения |
x>>= y |
|
3 |
>>>= |
Назначения |
x>>>= y |
|
3 |
&= |
Назначения |
x &= y |
|
3 |
^= |
Назначения |
x ^= y |
|
3 |
|= |
Назначения |
x |= y |
|
2 |
yield |
Функция паузы |
yield x |
|
1 |
, |
Запятой |
5, 6 |
Вопрос 2. Типы данных.
Переменные JavaScript могут содержать множество типов данных: числа, строки, объекты и многое другое:
var length = 16; // Number
var lastName = «Johnson»; // String
var x = {firstName: «John», lastName: «Doe»}; // Object
При обычных условиях JS вычисляет выражения слева направо, соответственно различные последовательности могут дать различные результаты:
код
var x = 16 + 4 + «Volvo»;
даст результат
20Volvo
А код
var x = «Volvo» + 16 + 4;
даст результат
Volvo164
Код для теста.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Тут можно проверить разные результаты:</p>
<p id=«demo»></p>
<script>
var x = 16 + 4 + «Volvo»; document.getElementById(«demo»).innerHTML = x;
</script>
<p id=«demo1»></p>
<script>
var y = «Volvo» + 16 + 4; document.getElementById(«demo1»).innerHTML = y;
</script>
</body>
</html>
В первом примере JavaScript обрабатывает 16 и 4 как числа, пока не достигнет «Volvo». Во втором примере, поскольку первый операнд является строкой, все операнды обрабатываются как строки.
Булевы операции JS.
Логическое значение может иметь только два значения: true или false. Логические значения часто используются в условном тестировании.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Булевые операции имеют два варинта ответа: <br> true or false:</p>
<p id=«demo»></p>
<script> var x = 5; var y = 5; var z = 6;
document.getElementById(«demo»).innerHTML = (x == y) + «<br>» + (x == z);
</script>
</body>
</html>
Массивы JS.
Массивы JavaScript записываются в квадратных скобках. Элементы массива разделяются запятыми. Следующий код объявляет (создает) массив под названием Cars, содержащий три элемента (названия автомобилей):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Массив индексируется начиная с нулевого значения <br> это значит, что первый элемент в массиве будет равен [0].</p>
<p id=«demo»></p>
<script>
var cars = [«Ford»,«Volvo»,«Audi», «BMW»]; document.getElementById(«demo»).innerHTML = cars[2];
</script>
</body>
</html>
Объекты JS.
Объекты JavaScript записываются фигурными скобками. Свойства объекта записываются в виде пар «имя: значение», разделенных запятыми.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=«demo»></p>
<script>
var person = { firstName: «Сергей»,
lastName: «Владимиров», age: 27,
eyeColor: «blue»
};
document.getElementById(«demo»).innerHTML = person.firstName + «» + person.age + «лет»;
</script>
</body>
</html>
Оператор typeof.
Для поиска типа переменной JavaScript можно использовать оператор JavaScript typeof. Оператор typeof Возвращает тип переменной или выражения:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>Typeof возвращает тип переменной или выражения.</p>
<p id=«demo»></p>
<script> document.getElementById(«demo»).innerHTML = typeof «» + «<br>» +
typeof «John» + «<br>» + typeof 5;
</script>
</body>
</html>
Оператор typeof возвращает «Object» для массивов, так как в JavaScript массивы являются объектами.
Разница между Undefined и NULL.
Undefined и NULL равны в значении, но различаются по типу. Пустое значение не имеет ничего общего с undefined. Пустая строка имеет как юридическое значение, так и тип. В JavaScript переменная без значения имеет значение undefined.
Typeof также не определен.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Undefined и null равны в значении, но различаются по типу:</p>
<p id=«demo»></p>
<script> document.getElementById(«demo»).innerHTML = typeof undefined + «<br>» +
typeof null + «<br><br>» +
(null === undefined) + «<br>» + (null == undefined);
</script>
</body>
</html>
Вопрос 3. Функции JS.
Функция JavaScript — это блок кода, предназначенный для выполнения определенной задачи. Функция JavaScript выполняется, когда «что-то» вызывает его (вызывает его).
Синтаксис функции.
Функция JavaScript определяется с помощью ключевого слова Function, за которым следует имя, за которым следуют круглые скобки (). Имена функций могут содержать буквы, цифры, символы подчеркивания и знаки доллара (те же правила, что и переменные). Круглые скобки могут включать имена параметров, разделенные запятыми:
(параметр1, параметр2, …)
Код, выполняемый функцией, помещается внутри фигурных скобок: {}
function name(parameter1, parameter2, parameter3) {
code to be executed
}
Параметры функции перечислены внутри скобок () в определении функции. Аргументы функции — это значения, полученные функцией при ее вызове. Внутри функции аргументы (параметры) ведут себя как локальные переменные.
Вызов функции.
Код внутри функции будет выполняться, когда «что-то» вызывает (вызывает) функцию:
- При возникновении события (когда пользователь щелкает кнопку).
- Когда он вызывается (вызывается) из кода JavaScript.
Автоматически (Self вызывается).
Функция возврата.
Когда JavaScript достигает оператора return, функция прекращает выполнение. Если функция была вызвана из инструкции, JavaScript будет «возвращать» для выполнения кода после вызова оператора. Функции часто вычисляют возвращаемое значение. Возвращаемое значение возвращается обратно к «вызывающему объекту»:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Этот пример вызывает функцию, которая проведет вычисления и выдаст результат обратно:</p>
<p id=«demo»></p>
<script>
var x = myFunction(4, 6); document.getElementById(«demo»).innerHTML = x; function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Плюсы функций:
- Можно повторно использовать код: Определите код один раз и используйте его многократно.
- Можно использовать один и тот же код много раз с различными аргументами для получения различных результатов.
- Функции можно использовать так же, как и переменные, во всех типах формул, назначений и вычислений.
var x = toCelsius(77);
var text = «The temperature is»+ x + «Celsius»;
Литература:
- https://learn.javascript.ru.
- https://innerhtml.ru.
- https://webref.ru.
- https://htmlbase.ru.