Практическое применение. События. Строковые методы. Массивы.

Содержание

Вопрос 1. События

Вопрос 2. Строковые методы

Вопрос 3. Массивы

Литература

Вопрос 1. События.

События HTML являются «вещами», происходящими с элементами HTML.

Когда JavaScript используется в HTML-страницах, JavaScript может «реагировать» на эти события.

Событие HTML может быть что-то браузер делает, или что-то пользователь делает. Вот несколько примеров событий HTML:

Веб-страница HTML завершила загрузку.
Изменено поле ввода HTML.
Нажата кнопка HTML.

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

В данном случае, элемент Button получит атрибут onclick (с кодом):

<!DOCTYPE html>

<html>

<body>

<button onclick=«document.getElementById(‘demo’).innerHTML=Date()»>Хочу узнать дату и время<button>

</body>

</html>

В этом случае, элемент button будет заменен:

<!DOCTYPE html>

<html>

<body>

<button onclick=«this.innerHTML=Date()»>Замени меня на дату и время </button>

</body>

</html>

Таблица 1.

Основные события

Событие	Описание
onchange	Изменен HTML-элемент
onclick	Пользователь щелкает элемент HTML
onmouseover	Пользователь перемещает указатель мыши на элемент HTML
onmouseout	Пользователь перемещает мышь от элемента HTML
onkeydown	Пользователь нажимает клавишу клавиатуры
onload	Браузер завершил загрузку страницы

Вопрос 2. Строковые методы.

С помощью JavaScript методы и свойства также доступны для примитивных значений, поскольку JavaScript обрабатывает примитивные значения как объекты при выполнении методов и свойств.

Длина строки.

Свойство length возвращает длину строки:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы</h2>

<p>JavaScript возвращает длину строки:</p>

var txt = «ABCD3434734987348934PQRSTUVWXYZ»;

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

</script>

</body>

</html>

Поиск строки в строке.

Метод IndexOf () возвращает индекс (положение) первого вхождения заданного текста в строку:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы </h2>

<p>IndexOf() возвращает позицию первого совпадения в тексте, учитывая, что первый элемент это ноль:</p>

var str = «Please locate where ‘locate’ occurs!»; var pos = str.indexOf(«occ»);

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

</script>

</body>

</html>

Метод LastIndexOf () возвращает индекс последнего вхождения заданного текста в строке:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы</h2>

<p>The lastIndexOf() method returns the position of the last occurrence of a specified text:</p>

var str = «Please locate where ‘locate’ occurs!»; var pos = str.lastIndexOf(«locate»);

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

</script>

</body>

</html>

1. Извлечение строковых деталей.

Существует 3 способа извлечения части строки:

срез (начало, конец);
подстрока (начало, конец);
substr (начало, длина).

Метод slice ().

slice () извлекает часть строки и возвращает извлеченную часть в новой строке. Метод принимает 2 параметра: начальный индекс (положение) и Конечный индекс (позиция). Если опустить второй параметр, метод выполнит срез оставшейся части строки.

Этот пример нарезает часть строки из позиции 7 в положение 13:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы </h2>

<p>Метод slice() возвращает слово в диапазоне от начала строки:</p>

var str = «Apple, Banana, Audi, Volvo»; var res = str.slice(7,13);

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

</script>

</body>

</html>

Если параметр имеет отрицательное значение, позиция учитывается от конца строки. Этот пример нарезает часть строки из позиции-12 в положение-6:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы </h2>

<p> Метод slice() возвращает слово в диапазоне от конца строки:</p>

var str = «Audi, Ferrari, Apple, Banana, Kiwi»; var res = str.slice(-12,-6);

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

</script>

</body>

</html>

Замена содержимого строки.

Метод Replace () заменяет указанное значение другим значением в строке. Метод Replace () не изменяет строку, в которой он вызывается. Возвращает новую строку.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript строковые методы </h2>

<p>Заменим ниже «BMW» на «AUDI» по нажатии кнопки:</p>

<button onclick=«myFunction()»>Замена</button>

<p id=«demo»>Купите BMW</p>

function myFunction() {

var str = document.getElementById(«demo»).innerHTML; var txt = str.replace(«BMW», «AUDI»); document.getElementById(«demo»).innerHTML = txt;

}

</script>

</body>

</html>

По умолчанию функция Replace () учитывает регистр. Написание Microsoft (с верхним регистром) не будет работать. Чтобы заменить регистр без учета регистра, используйте регулярное выражение с пометкой « i « (нечувствительно):

<!DOCTYPE html>

<html>

<body>

<h2> JavaScript строковые методы </h2>

<p> Заменим ниже «BMW» на «AUDI» по нажатии кнопки:</p>

<p id=«demo»>Вам нравится BmW</p>

function myFunction() {

var str = document.getElementById(«demo»).innerHTML; var txt = str.replace(/BMW/i,»Audi»); document.getElementById(«demo»).innerHTML = txt;

}

</script>

</body>

</html>

Для замены всех совпадений, используйте регулярное выражение с флагом /g (глобальное совпадение).

Преобразование в верхний и нижний регистр.

Строка преобразуется в верхний регистр с toUpperCase () или toLowerCase () для преобразования в нижний регистр:

<!DOCTYPE html>

<html>

<body>

<p>Переделываем текст в верхний регистр:</p>

<p id=«demo»>Hello World!</p>

function myFunction() {

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

}

</script>

</body>

</html>

Преобразование строки в массив.

Строка может быть преобразована в массив с помощью метода Split ().
Если разделитель опущен, возвращаемый массив будет содержать всю строку в index [0].
Если разделитель ««, возвращаемый массив будет массивом из одного символа.

<!DOCTYPE html>

<html>

<body>

<p>Click «Try it» to display the first array element, after a string split.</p>

function myFunction() { var str = «a,b,c,d,e,f»;

var arr = str.split(«,»); document.getElementById(«demo»).innerHTML = arr[0];

}

</script>

</body>

</html>

Вопрос 3. Массивы.

Массивы JavaScript используются для хранения нескольких значений в одной переменной.

Массив — это специальная переменная, которая может содержать более одного значения за раз.

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

var car1 = «Saab»; var car2 = «Volvo»; var car3 = «BMW»;

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

Создание массива.

Использование литерала массива является самым простым способом создания массива JavaScript.

var array_name = [item1, item2, …];

Использование ключевого слова JavaScript New.

В следующем примере также создается массив и присваиваются ему значения:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Массивы</h2>

var cars = new Array(«Saab», «Volvo», «BMW»); document.getElementById(«demo»).innerHTML = cars;

</script>

</body>

</html>

Доступ к элементам массива.

Вы ссылаетесь на элемент массива, ссылаясь на номер индекса. Эта инструкция обращается к значению первого элемента:

var name = flats [0];

А так заполняют массив, например первый элемент:

flats [0] = «Mikes»;

Доступ к полному массиву можно увидеть на примере:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

var cars = [«Saab», «Volvo», «BMW»]; document.getElementById(«demo»).innerHTML = cars;

</script>

</body>

</html>

Элементы массива могут быть объектами.

JavaScript-переменные могут быть объектами. Массивы — это специальные виды объектов. Из-за этого можно иметь переменные различных типов в одном массиве. Объекты можно иметь в массиве. Можно иметь функции в массиве. Массивы можно иметь в массиве:

myArray[0] = Date.now; myArray[1] = myFunction; myArray[2] = myShips;

Циклические элементы массива.

Лучший способ перебора массива — использовать цикл «for»:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Массивы</h2>

<p>Лучший способ выводить или заполнять массив, это использовать цикл for:</p>

var fruits, text, fLen, i;

fruits = [«Banana», «Orange», «Apple», «Mango»]; fLen = fruits.length;

text = «<ul>»;

for (i = 0; i < fLen; i++) {

text += «<li>» + fruits[i] + «</li>»;

}

text += «</ul>»; document.getElementById(«demo»).innerHTML = text;

</script>

</body>

</html>

Удаление и дополнение элементов массива.

Метод POP () удаляет последний элемент из массива:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript методы массивов</h2>

<p>Метод pop() убирает последний элемент из массива.</p>

var fruits = [«Banana», «Orange», «Apple», «Mango»]; document.getElementById(«demo1»).innerHTML = fruits; fruits.pop(); document.getElementById(«demo2»).innerHTML = fruits;

</script>

</body>

</html>

Поскольку массивы JavaScript являются объектами, элементы могут быть удалены с помощью оператора JavaScript Delete:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript методы массивов </h2>

<p>Deleting elements leaves undefined holes in an array.</p>

var fruits = [«Banana», «Orange», «Apple», «Mango»]; document.getElementById(«demo1»).innerHTML =

«The first fruit is: » + fruits[0]; delete fruits[0];

document.getElementById(«demo2»).innerHTML =

«The first fruit is: « + fruits[0];

</script>

</body>

</html>

Метод Push () добавляет новый элемент в массив (в конце):

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript методы массивов</h2>

<p>Метод push() добавляет новый элемент в массив.</p>

var fruits = [«Banana», «Orange», «Apple», «Mango»]; document.getElementById(«demo1»).innerHTML = fruits; function myFunction() { document.getElementById(«demo2»).innerHTML =

fruits.push(«Kiwi»);

document.getElementById(«demo1»).innerHTML = fruits;

}

</script>

</body>

</html>

Слияние (сцепление) массивов.

Метод concat () создает новый массив путем слияния (сцепления) существующих массивов:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript методы массивов </h2>

<h2>concat()</h2>

<p>Методы concat() используются для сращивания массивов:</p>

var arr1 = [«Cecilie», «Lone»];

var arr2 = [«Emil», «Tobias», «Linus»]; var arr3 = [«Robin», «Morgan»];

var myChildren = arr1.concat(arr2, arr3); document.getElementById(«demo»).innerHTML = myChildren;

</script>

</body>

</html>

Сортировка массивов.

Назначение функции Compare заключается в определении альтернативного порядка сортировки. Функция Compare должна возвращать отрицательное, нулевое или положительное значение в зависимости от аргументов:

function(a, b){return a-b}

Когда функция Sort () сравнивает два значения, она отправляет значения в функцию Compare и сортирует значения в соответствии с возвращаемым (отрицательным, нулевым, положительным) значением. При сравнении 40 и 100 метод Sort () вызывает функцию Compare (40100). Функция вычисляет 40-100 и возвращает-60 (отрицательное значение). Функция сортировки будет сортировать 40 как значение ниже 100. Этот фрагмент кода можно использовать для экспериментов с сортировкой по числу и по алфавиту:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array Sort</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick=«myFunction1()»>Sort Alphabetically</button>

<button onclick=«myFunction2()»>Sort Numerically</button>

var points = [40, 100, 1, 5, 25, 10]; document.getElementById(«demo»).innerHTML = points; function myFunction1() {

points.sort(); document.getElementById(«demo»).innerHTML = points;

}

function myFunction2() { points.sort(function(a, b){return a – b});

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

}

</script>

</body>

</html>

Литература:

https://learn.javascript.ru.
https://innerhtml.ru.
https://webref.ru.
https://htmlbase.ru.

Статьи

Конспект

WebRazrab

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

Курс Web-разработка

Практическое применение. События. Строковые методы. Массивы.

Содержание

Вопрос 1. События.

Основные события

Вопрос 2. Строковые методы.

Длина строки.

Поиск строки в строке.

1. Извлечение строковых деталей.

Метод slice ().

Замена содержимого строки.

Преобразование в верхний и нижний регистр.

Преобразование строки в массив.

Вопрос 3. Массивы.

Создание массива.

Использование ключевого слова JavaScript New.

Доступ к элементам массива.

Элементы массива могут быть объектами.

Циклические элементы массива.

Удаление и дополнение элементов массива.

Слияние (сцепление) массивов.

Сортировка массивов.

Литература:

Статьи