Javascript: опрацювання рядків

Розробка уроку

Тема: опрацювання текстової інформації засобами JavaScript.

Мета: навчитися створювати скрипти для опрацювання текстової інформації засобамиJavaScript.

Учень повинен вміти:

застосовувати теоретичні знання для вирішення практичних завдань;
cкладати, редагувати, налагоджувати та виконувати скрипти JavaScript;
аналізувати результати виконання скриптів.

Обладнання: комп'ютери зі встановленими ОС й браузером.

Структура уроку

Організаційний момент
Актуалізація опорних знань
Інструктаж з ТБ
Вивчення нового матеріалу
Вироблення практичних навичок
Підбиття підсумків уроку, виставлення оцінок
Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Програму мовою JavaScript можна вставити в будь-яке місце HTML за допомогою тегу SCRIPT. Наприклад:

<!DOCTYPE HTML> <html><head><meta charset="utf-8"> </head> <body> Початок документа... <script> alert( 'Привіт, я вивчаю JavaScript!' ); </script> ...Кінець документа </body> </html> Зазвичай код Javascript записують в окремий файл, розташування якого вказують як значення атрибута src контейнера <script>. Наприклад, таким чином: <script src="/my/script.js"> </script> При цьому файл /my/script.js містить javascript-код, який інакше потрібно розташувати всередині контейнера <script>. Це дуже зручно, бо один і той самий файл зі скриптами можна підключити на різних сторінках.

3. Інструктаж з ТБ
4. Вивчення нового матеріалу

В JavaScript будь-які текстові дані подають рядками (тексту). Рядки записують за допомогою подвійних або одинарних лапок, у вживанні яких немає різниці. var text = "рядок"; var anotherText = 'інший рядок'; Подані далі приклади операторів, властивостей і методів перевірити в середовищі розробника. Таке середовище для Mozilla Firefox викликати натисканням клавіш Ctrl + Shift + k.

Примітка. Звернення до методу завжди йде з дужками, а до властивості — без дужок.

Конкатенація — дописування одного рядка до іншого. var a = 'Java'; var b = "Script"; alert(a + b); // JavaScript length — властивість повертає довжину рядка — кількість символів. var s = "JavaScript"; alert(s.length); // 10 charAt — метод доступ до символу. var str = "jQuery"; alert(str.charAt(1)); // "Q" Примітка. В JavaScript немає окремого типу «символ». Тому charAt повертає рядок, що містить один символ.

[…] — доступ до символу. var str = "Доступ []"; alert(str[5]); // п Різниця між цим способом і charAt полягає у такому: якщо символу немає, то charAt повертає порожній рядок, а дужки [...] — undefined (невизначене значення): alert( "".charAt(0) ); // порожній рядок alert(""[0]); // undefined toLowerCase і toUpperCase — методи зміни регістру всіх символів рядка на нижній / верхній: alert("JavaScript".toLowerCase()); // javascript alert("JavaScript".toUpperCase()); // JAVASCRIPT indexOf(підрядок [, початкова_позиція]) — метод пошуку підрядка, повертає позицію, на якій розташовано підрядок або −1, якщо його не знайдено. Метод indexOf шукає збіг з урахуванням регістру. var s = "JavaScript is programing language"; alert(s.indexOf("JavaScript")); // 0 alert(s.indexOf("or")); // -1 alert(s.indexOf("is")); // 11 alert(s.indexOf("Is")); // -1 alert(s.indexOf("JavaScript",0)); // 0 alert(s.indexOf("v",0)); // 2 Наступний приклад демонструє використання indexOf для підрахунку кількості повторень літери в рядку. var s = "Віслюк Іа-Іа дивиться на віадук";// шукаємо в цьому рядку var target = "Іа"; // шукаємо цей підрядок var pos = 0; // шукаємо з цієї позиції while (true) { var foundPos = s.indexOf(target, pos); if (foundPos == -1) break; alert(foundPos); // № позиції: 7, 10 pos = foundPos + 1; // продовжити пошук з наступної } Пошук розпочато з позиції 0. Після знаходження підрядка на позиції foundPos, наступний пошук продовжено з позиції pos = foundPos + 1. І так далі, поки є що знаходити. Запис алгоритму можна записати коротше: var s = "Віслюк Іа-Іа дивиться на віадук"; var target = "Іа"; var pos = -1; while ((pos = s.indexOf(target, pos + 1)) != -1) alert(pos); JavaScript має 3 три методи виділення підрядка з невеликими відмінностями між ними.

substring(start [, end]) — метод повертає підрядок з позиції start (включно) і до end, але не включно. alert("книгодрукування".substring(5,9)); // друк Якщо аргумент end відсутній, то виділення — до кінця рядка: alert("книгодрукування".substring(5)); // друкування substr(start [, length]) — метод повертає підрядок довжини length з позиції start (включно). alert("книгодрукування".substr(5,4)); // друк

Як і для попереднього метода, якщо другого аргумента немає, то виділення — до кінця рядка.

slice(start [, end]) — метод повертає підрядок з позиції start (включно) і до end, але не включно (як в substring). Різниця між substring і slice полягає у тому, як вони працюють з від'ємними значеннями параметрів і з тими, що вказують за межі рядка:

substring — від’ємні значення тлумачать як нульові, а занадто великі значення утинаються до довжини рядка: Крім того, якщо start > end, то аргументи міняють місцями:
slice — від’ємні значення відраховують від кінця рядка:

split(delim) — метод разбиває рядок на масив за роздільником delim.

var names = 'Христина, Оксана, Ганна'; var a = names.split(', '); for (let name of a) alert('У переліку є '+name); 5. Вироблення практичних навичок

Задача 1. Створити новий рядок, у якому перший символ зробити заголовним.

Вказівка до виконання. Спроба писати найкоротше:

var newS = s[0].toUpperCase() + s.slice(1); призводить до помилки у випадку порожнього рядка s. У цьому випадку s[0] має значення undefined, для якого немає методу toUpperCase. Є щонайменше 2 виходи:

використовувати str.charAt(0), що завжди повертає рядок;
окремо перевіряти на наявність вмісту.

Задача 2. Описати нечутливу до регістру функцію check(s), яка повертає true, якщо рядок s містить "HTML" або "XXX", а інакше — false.

Вказівка до виконання. Спочатку перевести символи рядка до нижнього регістра, а вже потім шукати.

Завдання 3. Описати функцію f(s, maxlength), яка при перевищенні довжини рядка s значення maxlength повертає рядок довжини maxlength з трикрапкою (символ …) наприкінці.

Порівняти створені коди з демонстраційними розв'язаннями: 1.txt, 2.txt, 3.txt.

6. Підбиття підсумків уроку
Виставлення оцінок.

7. Домашнє завдання

Завдання 4. Перевірити, чи розташовано у алфавітному порядку слова, записані латиницею у рядку тексту. Протестувати програму для рядка з використанням кирилиці, у тому числі українських літер, яких немає у російській абетці. Поміркувати, як потрібно змінити програму, щоб отримувати правильну відповідь і в цьому випадку.

Завдання 5. Перекласти мовою Javascript програму мовою Pascal для отримання нормальної диз'юнктивної форми булевої фукції, запис якої подавати у коді або зчитувати з клавіатури. Виведення здійснювати на екран.

Текст упорядкувала Катеринич Лариса Олександрівна, вчитель ліцею «Голосіївский» № 241 Голосіївського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації у 2018-2019 н.р.