Работа со строками в языке 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

В 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. Напишите функцию, которая преобразует строку в массив слови удаляет лишние пробелы.

<script>

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

function stringToarray(str) {

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

}

var arr = stringToarray(str);

document.write(arr);

</script>

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

<script>

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 в качестве аргумента и вставляет тире (-) между словами. При этом все символы строки необходимо перевести в верхний регистр.

<script>

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. Напишите функцию, которая принимает строку в качестве аргумента и преобразует регистр первого символа строки из нижнего регистра в верхний.

<script>
var str = prompt(‘Введите строку’,’’);  
 function cursive_letter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
document.writeln(cursive_letter(str)); 
</script>

5. Напишите функцию, которая принимает в качестве аргумента строку и и заменяет регистр каждого символа на противоположный. Например, если вводится «КаЖдЫй ОхОтНиК», то на выходе должно быть «кАжДыЙ оХоТнИк».

<script>
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

Скачано с www.znanio.ru