JavaScript урок 3. Основные операторы языка JavaScript и конструкции

Условные операторы языка javaScript

В javaScript условие осуществляет оператор if

Рассмотрим синтаксис условного оператора:

Синтаксис:

 if (условие)  
{
	// если истина
	operator1;
	operator2;
}
else
{
	// если ложь
	operator3;
	operator4;
}

Пример:

let a = prompt('Введите наибольшую цифру в 8-й системе счисления'); if (a != 7) { // если истина alert( 'Неверно!' ); } else { // если ложь alert( 'Верно!' ); }

let a = prompt('Введите наибольшую цифру в 8-й системе счисления'); if (a != 7) { // если истина alert( 'Неверно!' ); } else { // если ложь alert( 'Верно!' ); }

В качестве условия может использоваться логическое выражение или переменная.

Часть конструкции после служебного слова else — необязательна.

В условии используются следующие операции отношений:

1. если значения имеют разные типы, то они не идентичны;
2. если значения являются числами, имеют одинаковые значения и не являются значениями NaN — они идентичны.

Для оператора равенства стоит использовать символ «==»

//num1 == num2

Для оператора идентичности стоит использовать «===»

//num1 === num2

Рассмотрим простой пример с использованием оператора языка javascript if:

Пример 1: выводить в модальное окно «а больше 1», если запрошенная переменная a действительно больше единицы, иначе выводить сообщение «а не больше 1»

✍ Решение:
 

1
2
3
4

let a = prompt("Введите число 11", "0");
if (a = 11) 
    document.write("Введенное значение верно.");
}

Теперь рассмотрим используемые в javascript логические операторы для построения сложных (например, двойных) условий:

В большинстве языков программирования также как и в javascript используется так называемое "правило лжи". Рассмотрим пример:

let a=1;
if (a)
	alert(a);

Как в данном примере поступит интерпретатор? как будет проверять условие, состоящее просто из одной переменной? - По правилу лжи:

ЛОЖНО:

• Null значения
• Undefined
• NaN
• 0
• Пустая строка ("")
• false

Пример использования "правила лжи" со строковой переменной:

let s="";
if (s)
	alert("строка не пуста");
else
	alert("строка пуста");

Пример 2: Запрашивать у пользователя имя (метод javascript prompt). Если имя введено, то выводить "Привет, имя!". Если пользователь не ввел имя или щелкнул cancel (значение null) выводить "Привет, незнакомец!"

↓

✍ Решение:
 

Тернарный оператор javaScript

Оператор включает в себя три операнда:

(1. условие ? 2. выполнить, если условие истинно : 3. выполнить, если условие ложно)

Синтаксис:

(логич. выражение) ? выражение 1 : выражение 2

(логич. выражение) ? выражение 1 : выражение 2

Рассмотрим синтаксис тернарного оператора на примере:

str1 = (y%2) ? "нечетное" : "четное"

✍ Решение:

let a = 1, b = 2, max = 0;
...
document.write(max);

if (a * b < 6) {
  result = 'Мало';
} else {
  result = 'Много';
}

Оператор переключения в javaScript - switch

Оператор switch javascript служит для проверки переменной на множество значений:

Синтаксис:

switch (переменная или выражение) { case вариант1: //..блок операторов.. break case вариант2: //..блок операторов.. break default: //..блок операторов.. }

switch (переменная или выражение) { case вариант1: //..блок операторов.. break case вариант2: //..блок операторов.. break default: //..блок операторов.. }

Сравним с оператором IF:

1
2
3
4
5
6
7
8
9
10
11
12
13

let a = 2;
switch(a) 
{
	case 0: // if (a === 0)
	case 1: // if (a === 0)
		alert("Ноль или один"); // тогда выводим ...
		break;
	case 2: // if (a === 2)
	        alert("Два"); // тогда выводим ...
		break;
	default: // else
		alert("Много"); // иначе выводим ...
}

...
case 0: 
case 1: 
	alert("Ноль или один"); 
	break;
...

✍ Решение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let number = prompt("Введите число 1 или 2:");
switch (number) { 
case "1"
  {
    document.write("Один");
  };
    break;
case "2"
  {
    document.write("Два");
  };
  break;
default
  {
    document.write("Вы ввели значение, отличное от 1 и 2");
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13

let value = "2";
 switch (value) {
 case "1":
 case "2":
 case "3":
 document.write("Hello");
 break;
 case "4":
 case "5": 
 document.write("World");
 default:
 document.write("Error");
 }

Задание Js 3_8. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение:

- На ветке сидит 1 ворона
- На ветке сидит 4 вороны
- На ветке сидит 10 ворон

Рекомендации:

1. В зависимости от введенного числа, меняется окончание у слова "ворона".
2. Для проверки использовать оператор Switch javascript.
3. Сохраните данную страницу в папке результатов (она пригодится для дальнейших работ).

↓

Циклические операторы языка javaScript - For

Синтаксис:

for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }

for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }

• В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:

for(let i = 0; условие; приращение счетчика) { //..блок операторов.. }

for(let i = 0; условие; приращение счетчика) { //..блок операторов.. }

• В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, i++ указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1:

for(let i = 0; условие; i++) { //..блок операторов.. }

for(let i = 0; условие; i++) { //..блок операторов.. }

• Условие цикла - это и есть конечное значение счетчика: например, i<10 - счетчик, достигнув значения 10, останавливает цикл:

for(let i = 0; i<10; i++) { //..блок операторов.. }

for(let i = 0; i<10; i++) { //..блок операторов.. }

Рассмотрим пример использования цикла for в javascript:

0
1
2
...
8
9

✍ Решение:
 

for (let i=...;...;...){
sum = sum + ...;
}
...

let i = 0;
for (; i < 3;) {
  alert( i++ ); // 0 1 2
}

Операторы выхода из цикла break и continue в javaScript. Оператор Exit

Рассмотрим работу операторов break и continue на примере:

1
2
3
4
5
6

for (let i=0;i<10;i++)
{
	if (i==4) continue;
	document.write(i+"<br>");
	if (i==8) break;
}

✍ Решение:
 

Рассмотрим пример:

✍ Решение:
 

Интересная работа с циклом for возможна при использовании одновременно двух счетчиков в цикле.
Рассмотрим пример:

i=0 j=2 
i=1 j=3 
i=2 j=4

✍ Решение:
 

Перед выполнением следующего задания рассмотрим пример динамического построения html-страницы при помощи javascript.

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

✍ Решение:
 

Задание Js 3_11.
Написать скрипт, который выводит теги input (элементы управления) разного типа, в зависимости от введенной цифры:

1 - текстовое поле,
2 - кнопка,
3 - radio (переключатель).

Количество выведенных тегов должно тоже запрашиваться.

Вспомним теги:

Для 1 - текстовое поле: <input type="text">   Для 2 - кнопка: <input type="button">   Для 3 - radio: <input type="radio">

Для 1 - текстовое поле: <input type="text"> Для 2 - кнопка: <input type="button"> Для 3 - radio: <input type="radio">

Пример вывода:

↓

Количество тегов?

↓

1

↓

<table border="1" width="30%">
  <tr> <!-- строка --> 
     <td>-</td><td>-</td><!-- две ячейки в строке --> 
  </tr>
</table>

Циклические операторы языка javaScript - While

Синтаксис оператора while:

while (условие) { //..блок операторов.. };

while (условие) { //..блок операторов.. };

✍ Решение:
 

Как работают операторы break и continue в цикле while?

let a = 1;
while (a < 1000){
	a*=2;
	if (a==64)
		continue;
	if (a==256)
		break;
	alert(a);
}

1
2
3
4
5
6
7

let counter = 5;
 while (counter < 10) {
   counter++;
   document.write("Counter " + counter);
   break;
   document.write("Эта строка не выполнится.");
 }

1
2
3
4
5
6
7
8
9

let x = ...;
let y = ...;
counter = 1;
chislo=x;
while (...){
	chislo=x*...;
	counter=...;
}
alert(chislo);

Цикл с постусловием do..while

Синтаксис:

do { //..блок операторов.. } while (условие);

do { //..блок операторов.. } while (условие);

✍ Решение:
 

1
2
3
4
5
6
7
8
9
10
11
12
13

let counter = prompt("Введите число");
let factorial = 1;
document.write("Факториал числа: " + counter + "! = ");
do {
     if (counter == 0) {
                factorial = 1;
                break;
     }
     factorial = factorial / counter;
     counter = counter + 1;
}
while (counter > 0);
document.write(factorial);

Циклические операторы языка javaScript - цикл For In

Цикл for in предназначен для прохода по массивам, коллекциям и объектам:

✍ Решение:
 

Задание Js 3_17. Распечатать все свойства объекта window. Выводить каждое свойство с новой строки, чередуя цвет выводимых свойств: черный | синий.
Результат:

Рекомендации:

• Использовать дополнительную переменную для проверки четности.
• Использовать условный оператор If.

Оператор обработки исключений в javaScript - try..catch

В некоторых случаях код на странице не работает непонятно по какой причине. Где искать ошибку? В таких случаях можно применить оператор try..catch.

Рассмотрим работу оператора на примере:

✍ Решение:
 

Итоговое задание Js 3_19.
Создать игру для двоих:

1. Программа просит первого игрока ввести число от 1 до 100 (второй игрок не видит введенное число). Затем второго игрока просит угадать введенное число. В ответ выводится сообщение «мало» либо «много» в зависимости от введенного ответа. Если игрок угадывает, - выводится поздравление. Если не угадывает – игра продолжается (до тех пор, когда число действительно будет угадано).
2. Просчитывать число попыток и выдавать результат, когда число разгадано.

↓

↓