Ваш помощник в обучении

Array

leafleafleafDocy banner shape 01Docy banner shape 02
Updated on 03.06.2022

Практическое применение. Даты. Случайные числа. Условные операторы.

Содержание

Вопрос 1. Даты вывода

Вопрос 2. Случайные числа

Вопрос 3. Условные операторы

Вопрос 4. Петли

Вопрос 5. Операторы Break и Continue

Литература

Вопрос 1. Даты вывода.

По умолчанию JavaScript будет использовать часовой пояс браузера и отображать дату в виде полной текстовой строки:

Thu Jun 04 2020 04:06:01 GMT+0300 (Москва, стандартное время)

Создание объектов даты.

Объекты Date создаются с помощью нового конструктора Date (). Существует 4 способа создания нового объекта Date:

new Date()

new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds)

new Date(date string)

Этот пример покажет текущую дату:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(), creates a new date object with the current date and time:</p>

<p id=«demo»></p>

<script>

var d = new Date(); document.getElementById(«demo»).innerHTML = d;

</script>

</body>

</html>

Таблица 1.

Методы получения дат

Метод

Описание

getFullYear()

Получить год как четырехзначный номер (гггг)

getMonth()

Получить месяц в виде числа (0-11)

getDate()

Получить день в виде числа (1-31)

getHours()

Получить час (0-23)

getMinutes()

Получить минуту (0-59)

getSeconds()

Получить второй (0-59)

getMilliseconds()

Получить миллисекунду (0-999)

getTime()

Получение времени (в миллисекундах с 1 января 1970)

getDay()

Получить день недели в виде числа (0-6)

Так можно получить время из браузера:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript getHours()</h2>

<p>Метод getHours() Выводит время браузера:</p>

<p id=«demo»></p>

<script>

var d = new Date(); document.getElementById(«demo»).innerHTML = d.getHours();

</script>

</body>

</html>

Вопрос 2. Случайные числа.

Math.random() Возвращает случайное число между 0 (включительно) и 1 (монопольно). Math.random() всегда возвращает число ниже 1.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Math</h2>

<p>Math.floor() используемый с Math.random() * 101 возвращает число в промежутке между 0 and 100

(both included):</p>

<p id=«demo»></p>

<script> document.getElementById(«demo»).innerHTML = Math.floor(Math.random() * 101);

</script>

</body>

</html>

Вопрос 3. Условные операторы.

Условные операторы используются для выполнения различных действий, основанных на различных условиях. Очень часто, когда вы пишете код, вы хотите выполнять различные действия для различных решений. Для этого можно использовать условные операторы в коде. В JavaScript у нас есть следующие условные операторы:

  • if Используется для указания блока кода, который будет выполняться, если указанное условие равно true.
  • Используйте else для указания блока кода, который будет выполняться, если одно и то же условие ложно.
  • Использовать else, если необходимо указать новое условие для проверки, если первое условие ложно.
  • Используйте переключатель, чтобы указать множество альтернативных блоков кода, которые будут выполняться.

Оператор if.

Используйте оператор if для указания блока кода JavaScript, который будет выполняться, если условие истинно.

if (condition) {

block of code to be executed if the condition is true

}

<!DOCTYPE html>

<html>

<body>

<p>Отобразит «Добрый день!» если на часах меньше 18:00:</p>

<p id=«demo»>Добрый вечер!</p>

<script>

if (new Date().getHours() < 18) { document.getElementById(«demo»).innerHTML = «Добрый день!»;

}

</script>

</body>

</html>

Инструкция else.

Используйте инструкцию else для указания блока кода, который будет выполняться, если условие имеет значение false.

if (condition) {

block of code to be executed if the condition is true

} else {

block of code to be executed if the condition is false

}

Оператор Else If.

Используйте оператор Else If для указания нового условия, если первое условие имеет значение false.

true false

if (condition1) {

block of code to be executed if condition1 is true

} else if (condition2) {

block of code to be executed if the condition1 is false and condition2 is

} else {

block of code to be executed if the condition1 is false and condition2 is

}

<!DOCTYPE html>

<html>

<body>

<p>Нажмите кнопку для приветствия по времени:</p>

<button onclick=«myFunction()»>Нажимаем сюда</button>

<p id=«demo»></p>

<script>

function myFunction() { var greeting;

var time = new Date().getHours(); if (time < 10) {

greeting = «Доброе утро»;

} else if (time < 20) { greeting = «Доброго дня»;

} else {

greeting = «Доброго вечера»;

}

document.getElementById(«demo»).innerHTML = greeting;

}

</script>

</body>

</html>

Вопрос 4. Петли.

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

Различные виды петель.

JavaScript поддерживает различные виды циклов:

  • for – циклы по блоку кода несколько раз;
  • for/in – циклический перебор свойств объекта;
  • while – циклы через блок кода, в то время как указанное условие истинно;
  • do/while – также циклы через блок кода, в то время как указанное условие истинно.

Цикл for.

Цикл for записывается следующим образом:

for (statement 1; statement 2; statement 3) { code block to be executed

}

Заявление 1 выполняется (один раз) перед выполнением блока кода.
Заявление 2 определяет условие выполнения блока кода.
Заявление 3 выполняется (каждый раз) после выполнения блока кода.

Сначала вы будете использовать заявление 1 для инициализации переменной, используемой в цикле i = 0.

<script>

for (i = 0, len = cars.length, text = «»; i < len; i++) { text += cars[i] + «<br>»;

}

<script>

Это не всегда так, JavaScript не волнует. Заявление 1 является необязательным. Вы можете инициировать много значений в заявление 1 (разделенных запятой):

И вы можете опустить заявление 1 (например, когда ваши значения установлены до начала цикла):

<script> var i = 2;

var len = cars.length; var text = «»;

for (; i < len; i++) {

text += cars[i] + «<br>»;

}

<script>

Часто заявление 2 используется для оценки состояния исходной переменной. Это не всегда так, JavaScript не волнует. Заявление 2 также является необязательным. Если заявление 2 возвращает true, цикл начнется снова, если он возвращает false, цикл закончится. Если вы опустите заявление 2, вы должны предоставить break внутри цикла. Иначе петля никогда не закончится. Это приведет к сбою Вашего браузера. Читайте о перерывах в следующей главе этого руководства.

Часто заявление 3 увеличивает значение начальной переменной. Это не всегда так, JavaScript не волнует, и заявление 3 является необязательным. Заявление 3 может делать что угодно, например отрицательное значение i–, положительное значение i = i + 15 или что- либо еще. Заявление 3 также может быть опущен (например, при увеличении значений внутри цикла):

<script> var i = 0;

var len = cars.length; for (; i < len;) {

text += cars[i] + «<br>»; i++;

}

<script>

Цикл for/in.

Инструкция JavaScript for/in выполняет циклический перебор свойств объекта:

<!DOCTYPE html>

<html>

<body>

<h2>Петли JavaScript</h2>

<p>Педеберем все значения объекта.</p>

<p id=«demo»></p>

<script> var txt = «»;

var person = {fname: «John», lname: «Doe», age:25}; var x;

for (x in person) {

txt += person[x] + «»;

}

document.getElementById(«demo»).innerHTML = txt;

</script>

</body>

</html>

Цикл while

Цикл while проходит через блок кода до тех пор, пока заданное условие имеет значение true.

while (condition) {

code block to be executed

}

Внимание! Если вы забыли увеличить переменную, используемую в условии, цикл никогда не завершится. Браузер повиснет.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript while</h2>

<p id=«demo»></p>

<script>

var text = «»; var i = 0; while (i < 10) {

text += «<br>Номер сейчас» + i; i++;

}

document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Цикл do/while.

Цикл do/while является вариантом цикла while. Этот цикл будет выполнять блок кода один раз, прежде чем проверять, если условие истинно, то он будет повторять цикл до тех пор, пока условие имеет значение true.

do {

code block to be executed

}

while (condition);

В приведенном ниже примере используется цикл do/while. Цикл всегда будет выполняться по крайней мере один раз, даже если условие ложно, так как блок кода выполняется перед тестированием условия:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript do… while</h2>

<p id=«demo»></p>

<script> var text = «» var i = 0;

do {

text += «<br>Сейчас номер» + i; i++;

}

while (i < 10); document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Вопрос 5. Операторы Break и Continue.

Оператор break «выскакивает» из цикла. Инструкция Continue «перескакивает» на одну итерацию в цикле. Операторы break и Continue являются единственными операторами JavaScript, которые могут «выскочить» из блока кода.

Инструкция break.

Оператор break можно использовать для перехода из цикла. Инструкция Break прерывает цикл и продолжает выполнение кода после цикла (если таковой имеется):

<!DOCTYPE html>

<html>

<body>

<p>A loop with a break.</p>

<p id=«demo»></p>

<script>

var text = «»; var i;

for (i = 0; i < 10; i++) { if (i === 3) { break; }

text += «Это номер: » + i + «<br>»;

}

document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Инструкция Continue.

Инструкция Continue прерывает одну итерацию (в цикле), если заданное условие происходит, и продолжает следующую итерацию в цикле. В этом примере пропускается значение 5:

<!DOCTYPE html>

<html>

<body>

<p>Пропускаем значение i = 5.</p>

<p id=«demo»></p>

<script>

var text = «»; var i;

for (i = 0; i < 10; i++) { if (i === 5) { continue; }

text += «The number is » + i + «<br>»;

}

document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Ссылки.

Чтобы пометить операторы JavaScript перед операторами с именем метки и двоеточием:

label:

statements

Оператор break без ссылки на метку может использоваться только для выпрыгнуть из петли или переключателя. С помощью ссылки на метку оператор break можно использовать для перехода из любого блока кода:

<!DOCTYPE html>

<html>

<body>

<p id=«demo»></p>

<script>

var cars = [«BMW», «Volvo», «Saab», «Ford»]; var text = «»;

list: {

text += cars[0] + «<br>»; text += cars[1] + «<br>»; text += cars[2] + «<br>»; break list;

text += cars[3] + «<br>»; text += cars[4] + «<br>»; text += cars[5] + «<br>»;

}

document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Для самостоятельного изучения, пример ввода:

<!DOCTYPE html>

<html>

<body>

<p>Enter a number and click OK:</p>

<input id=«id1» type=«number» min=«100» max=«300» required>

<input id=«id2» type=«number1» min=«100» max=«300» required>

<button onclick=«myFunction()»>OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id=«demo»></p>

<script>

function myFunction() {

var inpObj = document.getElementById(«id1»); if (!inpObj.checkValidity()) {

document.getElementById(«demo»).innerHTML = inpObj.validationMessage;

} else {

document.getElementById(«demo»).innerHTML = «Input OK»;

}

}

</script>

</body>

</html>

Литература:

  1. https://learn.javascript.ru.
  2. https://innerhtml.ru.
  3. https://webref.ru.
  4. https://htmlbase.ru.

Статьи

Раздел 2 -Предыдущий Практическое применение. События. Строковые методы. Массивы. Вперед - Раздел 2 Практическое применение. Автоматическое и ручное слайд-шоу. Галерея.

    Powered By EazyDocs