Конспект урока по веб-дизайну на 3 курсе "Работа со строками в языке JavaScript"

БПОУ ОО «Болховский педагогический колледж»

Конспект урока по веб-дизайну

на 3 курсе

«Работа со строками в языке JavaScript»

Подготовила преподаватель информатики

Плеханова Ирина Александровна

г. Болхов, 2019

Тема: Работа со строками в языке JavaScript.

Цель: изучить методы и свойства объекта String; способствовать развитию памяти, внимания,

устной связной речи; воспитывать информационную культуру.

Оборудование: ПЭВМ, медиапроектор, наглядный материал (презентация), дидактический

материал (карточки-задания).

Ход урока

I. Организационное начало.

II. Повторительно – обучающая работа.

1. Фронтальный устный опрос.

- Каков формат записи функции?

- Каков формат записи функции с возвратом значений?

- Каков формат записи итерационного цикла for?

- Каков формат записи цикла с предусловием?

- Каков формат записи цикла с постусловием?

2. Подведение итогов этапа.

III. Работа по осмыслению и усвоению нового материала.

1. Сообщение темы и цели урока.

2. Первичное восприятие нового материала

Объект String (строковый объект) используется для хранения и обработки текстовой

информации. Он незаменим, когда требуется, например, найти позицию вхождения одной строки в

другую, вырезать из строки подстроку, разбить строку на отдельные символы и создать из них

массив и т. д.

Создание строкового объекта

С помощью конструктора String создается объект, в который «упакована» текстовая строка.

Для создания строкового объекта используется выражение следующего вида:

1. var str1 = new String(“строка”);

2. var str2 = String(“строка”);

3. var str3 = “строка”;

Интерпретатор JavaScript неявно использует объект String в качестве объекта обертки,

поэтому строковой литерал интерпретируется так, как будто был создан с помощью оператора new,

так что на строковых примитивах возможно использовать свойства и методы объекта String.

Свойства и методы объекта String

№

Формат записи

Описание метода, свойства

str.length;

длина (количество символов, включая пробелы) в строке.

Пример: “hello”.length; //5

prototype (прототип)

позволяет добавлять свойства и методы ко всем создаваемым

строковым объектам. Данное свойство используется

интерпретатором, когда функция используется как конструктор

при создании нового объекта. Любой объект, созданный с

помощью конструктора, наследует все свойства объекта, на

который ссылается свойство prototype.

str.charAt(индекс);

Возвращает символ строки с указанным индексом (позицией);

нумерация символов с 0.

Пример: “Привет”.charAt(2); //и

str.charCodeAt(номер символа

в строке);

возвращает код символа (т.е. числовое значение), стоящего на

определенной позиции в строке; нумерация символов с 0.

Пример: “привет”.charCodeAt(2); //98

srt1.concat(str2,str3,…,srt n);

объединение двух и более строк в одну.

var str1 = '1+';

var str2 = '2=';

var str3 = '3';

var result = str1.concat(str2, str3); //1+2=3

str.fromCharCode(Юникод,

Юникод, Юникод...);

Возвращает строку, созданную с помощью указанной

последовательности значений символов Unicode.

Пример: var str = String.fromCharCode(1070,1085,1080,1082,1086,1076); //Юникод

str.indexOf(‘подстрока’, номер

символа);

Возвращает позицию первого символа первого вхождения

указанной подстроки в строке с указанного номера символа. Если

подстрока не найдена – возвращает -1.

var str = 'Я учу учу Javascript';

str.indexOf('учу'); //2

str.lastIndexOf((‘подстрока’,

номер символа);

var str = 'Я учу учу Javascript';

str.indexOf('учу'); //17

Возвращает позицию последнего найденного вхождения

подстроки или -1, если подстрока не найдена.

localeCompare()

Возвращает значение, указывающее, эквивалентны ли две строки

в текущем языковом стандарте.

match()

Ищет строку, используя предоставленный шаблон регулярного

выражения, и возвращает результат в виде массива. Если

совпадений не найдено, метод возвращает значение null.

str.replace(что заменяем, на

что заменяем);

Осуществляет поиск и замену частей строки. Метод не изменяет

строку, для которой он вызывается.

var str = 'Я учу PHP';

var newStr = str.replace('PHP', 'JavaScript'); //Я учу JavaScript

search()

Возвращает позицию первого соответствия указанной подстроки

или регулярного выражения в строке.

str.slice(откуда отрезать,

докуда отрезать);

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

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

необязательный аргумент указывает позицию, на которой должно

остановиться извлечение. Если второй аргумент не указан, то

извлечено будет все с той позиции, которую указывает первый

аргумент, и до конца строки.

var str = 'Мне очень нравится JavaScript';

str.substr(19, 28)); // JavaScript

str.split(разделитель,

максимальное количество

элементов);

осуществляет разбиение строки в массив по указанному

разделителю, который указывается

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

вернется вся строка. Если он задан как пустые кавычки '' - то

каждый символ строки попадет в отдельный элемент массива.

Вторым необязательным параметром можно указать

максимальное количество элементов в получившемся массиве.

var str = 'Мне-очень-нравится-JavaScript';

var arr = str.split('-'); // ['Мне', 'очень', 'нравится', 'JavaScript']

str.substr(откуда отрезать,

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

сколько символов отрезать);

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

аргумент указывает количество символов, которое нужно

извлечь.

Пример: var str = 'Мне очень нравится JavaScript';

str.substr(10,8); //нравится

substring()

Извлекает символы из строки между двух указанных индексов,

если указан только один аргумент, то извлекаются символы от

первого индекса и до конца строки.

toLocaleLowerCase()

Преобразует символы строки в нижний регистр с учетом

текущего языкового стандарта.

toLocaleUpperCase()

Преобразует символы строки в верхний регистр с учетом

текущего языкового стандарта.

str.toLowerCase();

изменяет все символы строки в нижний регистр и возвращает

измененную строку.

var str = "Язык JAVASCRIPT";

str.toLowerCase(); //язык javascript

toString()

Возвращает строковое представление объекта.

str.toUpperCase();

изменяет все символы строки в верхний регистр и возвращает

измененную строку.

var str = "javascript+html";

str.toUpperCase(); //JAVASCRIPT+HTML

строка.trim();

Удаляет пробелы в начале и конце строки и возвращает

измененную строку. Чаще всего это нужно при вводе

пользователем каких-либо значений: он может случайно

налепить лишних пробелов - и наша задача очистить введенный

текст от них.

var str = ' строка ';

str.trim(); //строка

valueOf()

Возвращает примитивное значение объекта.

В JavaScript используются регулярные выражения, реализованные отдельным

объектом RegExp и интегрированы в методы строк.

Регулярные выражения – мощное средство поиска и замены в строке.

Регулярное выражение (оно же «регэксп», «регулярка» или просто «рег»), состоит

из шаблона (также говорят «паттерн») и необязательных флагов.

Существует два синтаксиса для создания регулярного выражения.

«Длинный» синтаксис:

regexp = new RegExp("шаблон", "флаги");

…И короткий синтаксис, использующий слеши "/":

regexp = /шаблон/; // без флагов

regexp = /шаблон/gmi; // с флагами gmi (будут описаны далее)

Слеши /.../ говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же

роль, что и кавычки для обозначения строк.

Регулярное выражение regexp в обоих случаях является объектом встроенного класса RegExp.

Основная разница между этими двумя способами создания заключается в том, что

слеши /.../ не допускают никаких вставок переменных (наподобие возможных в строках через ${...}).

Они полностью статичны.

Регулярные выражения могут иметь флаги, которые влияют на поиск.

В JavaScript их всего шесть:

- i - поиск не зависит от регистра: нет разницы между A и a (см. пример ниже).

- g - поиск ищет все совпадения, без него – только первое.

- m - многострочный режим

- s - включает режим «dotall», при котором точка . может соответствовать символу

перевода строки \n (рассматривается в главе Символьные классы).

- u – включает полную поддержку юникода. Флаг разрешает корректную обработку

суррогатных пар (подробнее об этом в главе Юникод: флаг "u" и класс \p{...}).

- y – режим поиска на конкретной позиции в тексте (описан в главе Поиск на заданной

позиции, флаг "y")

IV. Работа по выработке практических умений и навыков.

1. Решение задач

http://wm-school.ru/js/string_exercises.php

1. Напишите функцию, которая преобразует строку в массив слови удаляет лишние пробелы.

var str = prompt (‘Введите строку’,’’);

function stringToarray(str) {

return str.trim().split(" ");

}

var arr = stringToarray(str);

document.write(arr);

</script>

2. Напишите функцию, которая возвращает подстроку, состоящую из указанного количества

символов.

var str = prompt('vvedite','');

function delete_characters(str, length) {

if ((str.constructor === String) && (length>0)) {

return str.slice(0, length);

}

};

document.writeln(delete_characters(str, 7)); // Каждый

</script>

3. Напишите функцию, которая принимает строку str в качестве аргумента и вставляет тире (-

) между словами. При этом все символы строки необходимо перевести в верхний регистр.

var str = "HTML JavaScript PHP";

function insert_dash(str) {

return str.trim().toUpperCase().replace(/[^a-zA-Z0-9-]/,

"").replace(/\s/g, "-");

};

document.writeln(insert_dash(str)); // 'HTML-JAVASCRIPT-PHP'

</script>

4. Напишите функцию, которая принимает строку в качестве аргумента и преобразует регистр

первого символа строки из нижнего регистра в верхний.

var str = prompt(‘Введите строку’,’’);

function cursive_letter(str) {

return str.charAt(0).toUpperCase() + str.slice(1);

}

document.writeln(cursive_letter(str));

</script>

5. Напишите функцию, которая принимает в качестве аргумента строку и и заменяет регистр

каждого символа на противоположный. Например, если вводится «КаЖдЫй ОхОтНиК», то на

выходе должно быть «кАжДыЙ оХоТнИк».

var str = prompt(‘Введите строку’,’’);

function change_register(str) {

var new_str = "";

var len = str.length;

for (var i = 0; i < len; i++) {

if (str[i] === str[i].toLowerCase()) {

new_str += str[i].toUpperCase();

} else {

new_str += str[i].toLowerCase();

}

return new_str;

}

document.writeln(change_register(str));

</script>

V. Итог урока.

1. Фронтальная (обобщающая ) беседа.

- как определить длину строки?

- что делает метод charAt?

- какой метод сливает строки?

- как преобразовать в верхний регистр слово?

http://code.mu/javascript/string/length.html

VI. Задавание на дом.

Дунаев, с.411-423, опорный конспект

Список использованной литературы

1. Дунаев В.В. HTML, скрипты и стили. — 4-е изд., переб. и доп. - СПб: БХВ-Петербург, 2015. - 816

с: ил . – (В подлиннике).

Использованные материалы и Интернет-ресурсы

2. Учебник и задачник JavaScript [Электронный ресурс]. - URL: http://code.mu/books/javascript/

3. Учебник JavaScript [Электронный ресурс]. - URL: http://wm-school.ru/js/index.php

Скачать материал

Конспект урока по веб-дизайну на 3 курсе "Работа со строками в языке JavaScript"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы