Лабораторная работа № 9 JavaScript. Условия. Циклы. Инструкция if в JavaScript Инструкция if в JavaScript имеет такую конструкцию: if (условие) инструкция Основные логические операторы

Лабораторная работа № 9
JavaScript. Условия. Циклы.
Инструкция if в JavaScript
Инструкция if в JavaScript имеет такую конструкцию:
if (условие)
      инструкция
Основные логические операторы: (>, <, >=,<=, == (равно), != (не равно)).
Инструкция выполняется только в том случае, если результатом выполнения условия явялется true. Если при выполнении условия должно произойти больше одного действия, их можно объединить в блок при помощи фигурных скобок:
if (условие) {
    инструкция1;
    инструкция2;
    инструкция3;
}
Условия можно объединить, используя логическое И (&&) или логическое ИЛИ (||):
if (условие1 || условие2) {
    ...
}
Есть также вторая форма для инструкции if, она содержит перечень действий, которые должны выполниться, когда результат условия равен false:
if (условие) {
     действие1;
} else {
     действие2;
}
Если результат проверки условия равен true, выполняется действие1, а если false - действие2.
Если проверяется несколько условий с использованием нескольких if, то else относится к ближайшему if:
if(условие1) {
     if (условие2) {
          ...
     }
} else {
     ...
}
Также можно применять инструкцию else if, если у вас есть много вариантов для выполнения кода:
if(n == 1) {
     действие1;
}
else if (n == 2){
     действие2;
}
else if (n == 3) {
      действие3;
}
else {
     действия в противном случае;
}
Инструкция if имеет аналогичную запись:
(n == 1) ? действие1  :  действие2 
Циклы JavaScript
В JavaScript поддерживает следующие виды циклов: for, while, do..while.
Цикл For
Цикл for исполняет блок команд пока заданное условие является истинным.
Синтаксис:
for (блок определения;условие;блок изменения) {
//Блок команд, который будет повторно выполняться пока условие истинно
}
Когда цикл for начинает исполнение происходит следующее:
Выполняются выражения заданные в блоке определения (в данном блоке определяются служебные переменные цикла такие как счетчик цикла);
Производится оценка условия и если оно истинно (равно true) выполнение переходит к шагу 3. Если условие ложно (равно false) цикл завершается;
Выполняется блок команд;
Выполняются выражения заданные в блоке изменения (в данном блоке над счетчиком цикла производятся какие-либо изменения) и выполнение переходит к шагу 2.
Пример
for (i=1;i<=30;i++) {
document.write (i+'
');
}
Цикл While
Цикл while выполняет блок кода, пока заданное условие истинно.
Цикл while выполняет действия аналогичные циклу for и отличается от него только синтаксисом.
Синтаксис:
while (условие) {
//Блок команд, который будет повторно выполняться если условие истинно
}
Перепишем код из предыдущего примера под цикл while:
Пример
var i=1;
while (i<=30) {
document.write (i+'
');
i++;
}
Цикл do..while
Цикл do..while часто называют циклом с постусловием, потому что в отличие от предыдущих циклов он вначале исполняет блок команд и только потом проверяет заданное условие.
Если условие истинно блок команд выполняется еще раз, если условие ложно цикл завершает исполнение.
Синтаксис:
do {
//Блок команд, который будет выполнен больше одного раза если условие истинно
}
while (условие);
В примере ниже цикл do..while исполнит блок кода, несмотря на то, что условие ложно изначально.
Пример
var i=20;
do {
document.write('Если Вы видите этот текст код в цикле был исполнен.');
}
while (i<=3);
Команда break
С помощью команды break Вы можете досрочно "обрывать" выполнение цикла.
Пример
//Задаем цикл, который должен выводить значения от 1 до 20
for (i=1;i<=20;i++) {
document.write(i + '
');
//Прервем выполнения цикла после того, как он досчитает до 5
if (i==5) {
break;
}
}
Команда continue
Команда continue обрывает текущую итерацию выполнения цикла и переходит к следующей.
Пример
//Задаем цикл который должен выводить значения от 1 до 15
for (i=1;i<=15;i++) {
//Пропустим 3, 10 и 13 круг выполнения цикла
if (i==3) {
continue; }
else if (i==10) {
continue; }
else if (i==13) {
continue; }
document.write(i+'
');
}
Примечание. Функция document.write выводит текст только во время загрузки страницы. В этом и заключается основная ошибка многих начинающих JavaScript-программистов - они пытаются использовать document.write в ответ на пользовательские события, например, onclick, в результате чего получают пустую страницу.
Запомните, если вы хотите изменить содержимое блока, то нужно найти этот блок в DOM-дереве, например, по его идентификатору, и изменить у него свойство innerHTML.
document.getElementById('content').innerHTML = 'Новое содержимое';
Например, вывод текста в абзац (тег р) с Id=’go’. Будет выглядеть так:
document.getElementById('go').innerHTML = 'Новое содержимое';

Задание 1:
1. Используя различные циклы, для последовательности целых чисел вычислить: сумму положительных элементов, произведение чисел, которые делятся на 3, максимальный элемент и среднее арифметическое всех элементов.
Количество элементов можно задавать с помощью окна ввода, либо задать символ для окончания ввода. Также можно сформировать последовательность случайным образом либо ввести ее с помощью окна ввода. Выводить результат необходимо в документ.

JavaScript. Массивы.
Как и большинство языков программирования, JavaScript предоставляет средство для работы с формализованными данными большого объема - массивы. Массив - это список переменных, к каждой из которых можно получить доступ по её номеру. Массив создаётся следующим образом:
// создание пустого массива
var myArray = new Array()
// задание значений первых двух элементов
myArray[0] = 'Москва'
myArray[1] = 'Хабаровск'
// создание нового массива
// и резервирование места для
// 100 переменных
var myArray = new Array(100)
// создание нового массива
// и явная инициализация первого элемента
var myArray = new Array('Элемент');
// косвенное создание массива
// из двух элменетов
var myArray = ['первый элемент', 'второй элемент']

Все массивы, независимо от способа создания, представляют собой экземпляры класса (объекта) Array. Добавление элементов производится простой инициализацией соответствующего элемента.
var myArray = new Array()
myArray[0] = 'Питер'
Массивы в JavaScript не обязательно должны быть "сплошными", т.е. содержать все элементы. При необходимости можно создавать так называемые "разреженные" массивы:
var myArray = new Array();
myArray[0] = 'Питер'
// пропустим myArray[1]
myArray[2] = 'Гомель'
// пропустим myArray[3]
myArray[4] = 'Рязань'
myArray[5] = 'Псков'
for(i = 0; i < 6; i++)
alert(myArray[i])

Этот код создаёт массив и заполняет только необходимые элементы. Теперь если мы попробуем получить значение не инициализированного элемента (в примере это первый и третий), то получим "undefined". Использование разреженных массивов иногда очень удобно, но требует опыта и внимательности, поэтому на начальном этапе лучше от них отказаться. Кроме того, разреженные массивы не дают выгоды по использованию памяти, т.к. место резервируется для всех элементов, в том числе не инициализированных.
Элементами массива могут быть переменные любого типа. Интересная особенность JavaScript - массив может одновременно содержать элементы различных типов, в том числе массивы:
// массив с элементами разных типов
var myArrayS = new Array();
myArrayS[0] = 'Ярославль';
myArrayS[1] = 10000;
myArrayS[2] = 'Ямал';
myArrayS[3] = 5000;
for(i = 0; i < myArrayS.length; i += 2)
alert('Город: ' + myArrayS[i] + '\n' +
'Население: ' + myArrayS[i + 1] + '\n')
//
// массив с элементами-массивами
var myArrayA = new Array()
myArrayA[0] = new Array('Ярославль', 10000);
myArrayA[1] = new Array('Ставрополь', 5000);
for(i = 0; i < myArrayA.length; i++)
alert('Город: ' + myArrayA[i][0] + '\n' +
'Население: ' + myArrayA[i][1] + '\n')
Класс Array содержит единственное свойство - length, позволяющее узнать текущую длину массива:
var myArray = new Array();
...
// узнать количество элементов
alert(myArray.length)
// добавить эдемент последним
myArray[myArray.length] = 'последнее значение'
Обратите внимание, что значение Array.length на единицу больше номера последнего элемента массива, т.к. нумерация в массиве начинается с нуля, а свойство length показывает общее количество элементов.
Класс Array так же содержит ряд методов, существенно упрощающих некоторые рутинные операции с массивами:
Array.join()
Получение списка элементов массива в виде одной строки без разделителей.

Array.join(разделитель)
Получение списка элементов массива в виде одной строки, причем элементы массива разделены строкой "разделитель"

Array.reverse()
Изменение порядка сортировки массива. Этот метод "переворачитвает" массив: первый элемент становится последним и наоборот.

Array.sort()
Сортировка массива по алфавиту. Если массив содержит числовые данные, то при сортировке используются их строковые представления.

Array.sort(функция_сортировки)
Сортировка массива по пользовательскому критерию, который задаётся с помощью собственной функции сортировки.


Рассмотрим небольшой пример:
// функция сортировки массива
function sortByLength(a, b)
{
if(a.length > b.length) return 1;
else
if(a.length = b.length) return 0;
else return -1;
}

// инициализация массива
var myArray = new Array()
myArray[0] = 'Ярославль'
myArray[1] = 'Ямал'
myArray[2] = 'Ставрополь'
myArray[3] = 'Омск'
myArray[4] = 'Анапа'
alert('исходный массив:\n\n' + myArray.join('\n'))
// сортируем по алфавиту
myArray.sort();
alert('сортированный по алфавиту:\n\n' + myArray.join('\n'))
// сортируем в обратном порядке
myArray.reverse();
alert('перевёрнутый:\n\n' + myArray.join('\n'))
// сортируем по длине с помощью собственной функции
myArray.sort(sortByLength);
alert('сортированный по длине:\n\n' + myArray.join('\n'))
Пользоваться методами массива очень просто. Самое интересное в этом примере - функция сортировки. Она должна всегда иметь два параметра и возвращать число. Порядок сортировки определяется знаком возвращаемого числа. Если число отрицательное - первый аргумент должен в массиве располагаться раньше второго, если положительное - позже. Если элементы равны, то обычно возвращается ноль, а порядок элементов не изменяется.

Задание 2:
1. Используя различные циклы, для массива целых чисел вычислить: сумму положительных элементов, произведение чисел, которые делятся на 3, максимальный элемент и среднее арифметическое всех элементов.
Количество элементов можно задавать с помощью окна ввода, либо задать символ для окончания ввода. Также можно сформировать массив случайным образом либо ввести ее с помощью окна ввода. Выводить результат необходимо в документ.
2. Выполнить сортировку массива.

JavaScript. Строки.
Строковые литералы или строковые переменные являются в языке JavaScript объектом типа string, к которому могут быть применены методы, определенные в языке. Создание нового объекта требует вызова функции-конструктора объекта. Для того чтобы создать строковый объект, надо применить конструктор newstring, например:
s=newString("результат=")
Объект string имеет единственное свойство length (длина_строки). Выражение s.length выдает значение 10, равное длине строки, содержащейся в строковом объекте s. Объект string имеет два типа методов. С методами, непосредственно влияющими на саму строку, мы сейчас и познакомимся, рассматривая примеры обработки текстовой информации.
Одним из часто используемых методов является метод выделения из строки отдельного символа. Метод charAt(ni) возвращает символ, позицию которого определяет параметр ni. Символы в строке перенумерованы, начиная с 0.
Пример 1. Вывод символов строки в "столбик"
Напишем сценарий, при выполнении которого заданный текст выводится в "столбик", т.е. на каждой строке размещается по одному символу.
При решении задачи из заданной строки последовательно выбираются символы. Формируется новая строка, в которой за каждым символом ставится последовательность символов, обеспечивающая переход на новую строку. Когда строка результата сформирована, то она размещается в текстовом поле формы, тем самым для исходной строки осуществляется вывод в "столбик". Сценарий, осуществляющий обработку строки, приведен в листинге 1.
Листинг 1. Вывод символов строки в "столбик"


Вывод символов строки в "столбик"



Символы текущей строки в столбик



Введите строку:








Метод substr (n1,n2) позволяет выделять из строки подстроку. Параметр n1 задает позицию первого символа подстроки; параметр n2 определяет количество символов в подстроке. Например, если строка s="сборник", то в результате выполнения substr (0,4) будет выделена подстрока "сбор".
Пример 2. Вычисление количества повторений строки в тексте
Напишем программу, которая определяет, сколько раз заданное слово встречается в определенном тексте. В тексте слова разделяются пробелами. После того как очередное слово найдено, просмотр продолжается с символа, следующего за найденным словом.
HTML-код документа представлен в листинге 2.
Листинг 2. Количество заданных слов в тексте


Количество заданных слов в тексте



Количество заданных слов в тексте



Введите текст:



Введите слово:



Количество слов в тексте:





Основные функции работы со строками.
Конвертирование в String
Вы можете конвертировать число, булево выражение или объект в строку:
var myNumber = 24; // 24
var myString = myNumber.toString(); // "24"
Вы можете сделать это так же с помощью String():
var myNumber = 24; // 24
var myString = String(myNumber); // "24"
Если вы не уверены, что значение не является null или undefined, вы можете использовать String(), которая всегда возвращает строку, независимо от типа значения.
Разделение строки в подстроки
Чтобы разделить строки в массив подстрок, вы можете использовать метод split():
var myString = "coming,apart,at,the,commas";
var substringArray = myString.split(","); // ["coming", "apart", "at", "the", "commas"]
var arrayLimited = myString.split(",", 3); // ["coming", "apart", "at"]
Как видно в последней строке, второй параметр функции - это лимит количества элементов, которое будет в итоговом массиве.
Получение длины строки
Чтобы найти, сколько символов в строки, мы используем свойство length:
var myString = "You're quite a character.";
var stringLength = myString.length; // 25
Поиск подстроки в строке
Есть два метода для поиска подстроки:
Использование indexOf():
var stringOne = "Johnny Waldo Harrison Waldo";
var wheresWaldo = stringOne.indexOf("Waldo"); // 7
indexOf() метод начинает поиск подстроки с начала строки, и возвращает позицию начала первого вхождения подстроки. В данном случае - 7 позиция.
Использование lastIndexOf():
var stringOne = "Johnny Waldo Harrison Waldo";
var wheresWaldo = stringOne.lastIndexOf("Waldo"); // 22
Метод возвращает начальную позицию последнего вхождения подстроки в строку.
В обоих методах, если подстрока не найдена, возвращается значение -1, и оба принимают необязательный второй аргумент, указывающий положение в строке, где вы хотите начать поиск. Таким образом, если второй аргумент «5», indexOf() начинает поиск с 5 символа, игнорируя символы 0-4, в то время как lastIndexOf() начинает поиск с символа 5 и идет в обратном направлении, игнорируя символы 6 и дальше.
Замена подстроки
Чтобы заменить вхождение подстроки в строке на другую подстроку, вы можете использовать replace():
var slugger = "Josh Hamilton";
var betterSlugger = slugger.replace("h Hamilton", "e Bautista");
console.log(betterSlugger); // "Jose Bautista"
Первый аргумент - то, что вы хотите заменить и второй аргумент - новая строка. Функция заменяет только первое вхождение подстроки в строку.
Чтобы заменить все вхождения, нужно использовать регулярное выражение с глобальным флагом:
var myString = "She sells automotive shells on the automotive shore";
var newString = myString.replace(/automotive/g, "sea");
console.log(newString); // "She sells sea shells on the sea shore"
Второй аргумент может включать специальный шаблон или функцию.
Получить символ по заданной позиции в строке
Получить символ мы можем с помощью функции charAt():
var myString = "Birds of a Feather";
var whatsAtSeven = myString.charAt(7); // "f"
Как часто бывает в JavaScript, первая позиция в строке начинается с 0, а не с 1.
В качестве альтернативной функции можно использовать charCodeAt() функцию, которая код символа.
var myString = "Birds of a Feather";
var whatsAtSeven = myString.charCodeAt(7); // "102"
var whatsAtEleven = myString.charCodeAt(11); // "70"
Заметьте, что код для символа «F» (11 позиция) другой, нежели у символа «f» (позиция 7).
Соединение строк
В большинстве случаем, чтобы соединить строки, можно использовать оператор «+». Но так же можно использовать метод concat():
var stringOne = "Knibb High football ";
var stringTwo = stringOne.concat("rules."); // "Knibb High football rules"
Таким способом мы можем соединить множество строк в одну в том порядке, в котором они записаны:
var stringOne = "Knibb ";
var stringTwo = "High ";
var stringThree = "football ";
var stringFour = "rules.";
var finalString = stringOne.concat(stringTwo, stringThree, stringFour);
console.log(finalString); // "Knibb high football rules."
Извлечение подстроки
Есть 3 способа получения строки из части другой строки:
Используя slice():
var stringOne = "abcdefghijklmnopqrstuvwxyz";
var stringTwo = stringOne.slice(5, 10); // "fghij"
Используя substring():
var stringOne = "abcdefghijklmnopqrstuvwxyz";
var stringTwo = stringOne.substring(5, 10); // "fghij"
В обеих функция первый параметр - символ, с которого начинает подстрока (начиная с 0 позиции) и второй аргумент (необязательный) - позиция символа, до которого возвращается подстрока. В примере (5, 10) возвращается строка между позицией 5 и 9.
Используя substr():
var stringOne = "abcdefghijklmnopqrstuvwxyz";
var stringTwo = stringOne.substr(5, 10); // "fghijklmno"
Первый аргумент - позиция символа, с которого начинается новая строка и второй аргумент количество символов от начальной позиции новой строки. Т.е. (5, 10) возвращает 10 символов, начиная с 5 позиции.
Перевод строки в верхний или нижний регистр.
Есть 4 метода для перевода. Первые 2 переводят строку в верхний регистр:
var stringOne = "Speak up, I can't hear you.";
var stringTwo = stringOne.toLocaleUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU"
var stringThree = stringOne.toUpperCase(); // "SPEAK UP, I CAN'T HEAR YOU"
Другие 2 переводят строку в нижний регистр:
var stringOne = "YOU DON'T HAVE TO YELL";
var stringTwo = stringOne.toLocaleLowerCase(); // "you don't have to yell"
var stringThree = stringOne.toLowerCase(); // "you don't have to yell"

Задание 3:
1. Слова в заданном тексте разделяются пробелами. Напишите программу, которая определяет количество слов в тексте.
2. Напишите программу, в которой все слова А заменены словом В, где А и В - заданные слова, возможно, различной длины.
3. Напишите программу, которая "сжимает" заданный текст, т. е. заменяет все подряд идущие пробелы на один.


Приложенные файлы

  • doc 35278735
    Размер файла: 102 kB Загрузок: 0

Добавить комментарий