1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3

• Название: 1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3
• Дата: 04.04.2023
• Размер: 265.45 Kb.
• Имя файла: Ekzamenatsionnye_voprosy.docx
• Тип: Документы; #1037669
• страница: 9 из 9

31 Логические операторы в языке JavaScript

В JavaScript есть 4 логический оператора:

|| – ИЛИ

&& – И

! – НЕ

?? – ОПЕРАТОР НУЛЕВОГО СЛИЯНИЯ

Традиционно в программировании ИЛИ предназначено только для манипулирования булевыми значениями: в случае, если какой-либо из аргументов true, он вернёт true, в противоположной ситуации возвращается false.

В традиционном программировании И возвращает true, если оба аргумента истинны, а иначе – false.

Логический оператор NOT (!) (логическое дополнение, отрицание) переводит истину в ложь и наоборот. Обычно он используется с логическими (логическими) значениями. При использовании с не булевыми значениями он возвращает false, если его единственный операнд может быть преобразован в true; в противном случае возвращает true.

Оператор нулевого слияния (??) — это логический оператор, возвращающий значение правого операнда, если значение левого операнда содержит null или undefined, в противном случае возвращается значение левого операнда.

32 Работа со строками в Javascript

Создание строк

По сути, в JavaScript есть две категории строк: строковые примитивы и объекты String.

Примитивы

Строковые примитивы создаются следующими способами:

let example1 = "BaseClass"

// или

let example2 = String("BaseClass")

Объекты

Вы можете создать объект String, используя ключевое слово new.

Единственное реальное преимущество объекта перед строковым примитивом состоит в том, что вы можете назначить ему дополнительные свойства:

let website = new String("BaseClass")

website.rating = "great!"

Все знакомые вам методы строк являются частью объекта String, а не примитива.

Конкатенация строк

Вы можете объединить (или «конкатенировать») несколько строк, чтобы создать новую, используя символ +:

Вы также можете объединять строки с переменными (нестроковые переменные будут преобразованы в строки):

Чтобы создать новую строку, добавив ее в конец существующей, используйте +=:

Вы можете объединить массив строк в одну, используя метод .join() для массива.

По умолчанию элементы разделяются запятой:

let heros = ["Superman", "Wonder Woman", "Hulk"]

heros.join()

// "Superman,Wonder Woman,Hulk"

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

let heroes = ["Superman", "Wonder Woman", "Hulk"]

heroes.join(" or ")

Вы можете разделить строку на массив с помощью метода split().

Превращаем предложение в массив слов, разбивая его по пробелам:

"Welcome to Paradise".split(" ")

// [ "Welcome", "to", "Paradise" ]

Больше / меньше

При сравнении строк с использованием операторов < и > JavaScript будет сравнивать каждый символ по буквам в том порядке, в котором они появляются в словаре. При сравнении строк с использованием < или > строчные буквы считаются большими, чем прописные.

Самый простой способ отсортировать массив строк — использовать метод Array.sort():

Многострочные строки

Вы можете добавлять новые строки, используя \n:

let result = "The winner is:\nBaseClass!"

// The winner is:

// BaseClass!

Извлечение части строки

Эти методы принимают индекс первого символа, который вы хотите извлечь из строки. Они возвращают все от этого символа до конца строки:

"I am Groot!".slice(5) // "Groot!"

"I am Groot!".substring(5) // Groot!

Второй (необязательный) аргумент — это символ, на котором вы хотите остановиться.

Метод charAt() возвращает определенный символ из строки (помните, что индексы начинаются с 0):

Если вам не важна конкретная позиция подстроки и важно только, находится ли она вообще в целевой строке, вы можете использовать includes():

"War Games".includes("Game") // true

Чтобы найти первое совпадение регулярного выражения, используйте .search().

// Найдите позицию первого строчного символа

"Ironman 3".search(/[a-z]/) // '1

Чтобы вернуть массив, содержащий все совпадения регулярного выражения, используйте match() с модификатором /g (global):

// Вернуть все прописные буквы

"This is England".match(/[A-Z]/g)

// Вывод: [ "T", "E" ]

33 Создание и использование библиотек Javascript

Шаг 1. Делаем шаблон

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

Здесь и далее предполагается, что оба файла сохраняются в одной папке.

Шаг 2. Создаем функции для своей библиотеки

Создаём и прописываем функции, которые будут выполнять нужные действия над своими аргументами и возвращать результаты.

Шаг 3. Создаём приватные или общедоступные свойства объекта библиотеки

Чтобы сохранить настройки или другие свойства, не представляющие интереса для пользователя (или просто некие промежуточные данные), мы можем объявить обычную переменную settings в области действия нашей функции, и ее нельзя будет получить за пределами оболочки.

Хотя settings не может быть получена за пределами вашей оболочки, можно создать метод, который всё-таки позволяет это (см. getSettings).
34 Обработка событий клавиатуры с помощью Javascript

keydown: возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша

keyup: возникает при отпускании клавиши клавиатуры

keypress: возникает при нажатии клавиши клавиатуры, но после события keydown и до события keyup. Надо учитывать, что данное событие генерируется только для тех клавиш, которые формируют вывод в виде символов, например, при печати символов. Нажатия на остальные клавиши, например, на Alt, не учитываются.

Для работы с событиями клавиатуры определен объект KeyboardEvent, который добавляет к свойствам объекта Event ряд специфичных для клавиатуры свойств:

altKey: возвращает true, если была нажата клавиша Alt во время генерации события

key: возвращает символ нажатой клавиши, например, при нажатии на клавишу "T" это свойство будет содержать "T".

code: возвращает строковое представление нажатой клавиши физической клавиатуры QWERTY, например, при нажатии на клавишу "T" это свойство будет содержать "KeyT", а при нажатии на клавишу ";" (точка запятой), то свойство возвратит "Semicolon".

ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации события

shiftKey: возвращает true, если была нажата клавиша Shift во время генерации события

35 Как определяется тип переменной в JavaScript?

Чтобы узнать тип переменной используется оператор typeof, который имеет такой синтаксис: typeof <переменная> или typeof(<переменная>).

Вот список примитивных типов данных JavaScript:

number (число)

string (строка)

boolean (логическое значение)

null (специальное значение null)

undefined (специальное значение undefined)

symbol (символ, используется в особых случаях, появился в ES6)

Null. Специальный примитив, используемый не только для данных, но и в качестве указателя на финальную точку в Цепочке Прототипов;

Object (Объект). Простая структура, используемая не только для хранения данных, но и для создания других структур, где любая структура создаётся с использованием ключевого слова new: new Object, new Array, new Map (en-US), new Set, new WeakMap, new WeakSet, new Date и множество других структур;

36 Ассоциативный массив в JavaScript?

Ассоциативный массив – это массив, в котором обращение к значению осуществляется по ключу.

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

Map – это коллекция «ключ-значение», которую можно использовать для создания ассоциативных массивов.

Map в отличие от объекта позволяет использовать в качестве ключей значения любых типов как примитивные, так и ссылочные.

Создание пустой коллекции:

const arr = new Map();

Создании коллекции с инициализацией начальных значений:

const arr = new Map([

  ['key1', 'value1'],

  ['key2', 'value2'],

  ['key3', 'value3']

]);

В этом примере строки «key1», «key2» и «key3» являются ключами, а «value1», «value2» и «value3» соответственно их значениями.

В качестве ассоциативного массива можно использовать обычный объект.

Создание пустого ассоциативного массива через объект:

const arr1 = {};

// с использованием стандартной функции-конструктора Object

const arr2 = new Object();

Заполнение ассоциативный массив значениями на этапе его создания:

const myArray = {

  'key1': 'value1',

  'key2': 'value2',

}

37 Способы подключения библиотеки Jquery в html-странице

Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

Состоит она из большого количества серверов, географически расположенных в разных точках мира, на каждом из которых располагается кэш контента. При этом его доставка конечному пользователю осуществляется обычно с того сервера, который ближе других расположен к нему. В результате чего сокращается время его загрузки, ускоряется отклик, увеличивается производительность сайта, а также снижается нагрузка на оригинальный сервер.

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src, в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:



38 Форматы основной функции в Jquery

Основную функциональность библиотеки jQuery выполняет функция jQuery(), которая имеет псевдоним $(). Это единственные идентификаторы, которые доступны в глобальной области видимости. Все остальные функции находятся в области имен библиотеки jQuery. Функция $() поддерживает несколько форматов:

• 
  $(<Функция>);
  
• 
  $(<Элемент объектной модели документа>);
  
• 
  $([, <Документ>]);
  
• 
  $(<Селектор>[, <Контекст>]);
  
• 
  $(, <Свойства>);
  
• 
  $(<Объект>);
  
• 
  $(<Массив DOM-элементов>);
  
• 
  $(<Коллекция элементов jQuery>);
  
• 
  $().
  

39 Как подключить регулярное выражение в коде JavaScript

В JavaScript регулярное выражение — это один из типов объектов, который используется для поиска комбинаций символов в строках.

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

Первый заключается в использовании литералов регулярных выражений. При таком подходе шаблон регулярного выражения заключают в слэши. Выглядит это так:

var regexLiteral = /cat/;

Второй задействует конструктор объекта RegExp, которому передают строку, из которой он создаёт регулярное выражение:

var regexConstructor = new RegExp("cat");

В обоих вышеприведённых примерах создаётся один и тот же шаблон — символ c, за которым следует символ a, за которым идёт символ t.

40 Управляющие символы в регулярном выражении

Назначение специальных (управляющих) символов, используемых в
регулярных выражениях, приведены в таблице.
Литерал Назначение
. Любой символ за исключением перевода строки
[abc] Групповой символ (любой символ, перечисленный в скобках)
^ Отрицание, любого символ идущего далее
^ Начало строки (если стоит первым символом в РВ)
$ Конец строки
+ Предыдущий символ должен встретится один или больше раз
? Предыдущий символ должен встретится один раз или не встретится
вообще
| Логическое «или»
{n} Предыдущий символ должен встретится «n» раз
{m,n} Предыдущий символ должен встретится от «m» до «n» раз
( ... ) Создает подвыражение, содержащее заданные в скобках литералы
\ Экранирование спец. символа
/ Границы регулярного выражения (начало и конец РВ)

Литералы, используемые в регулярных выражениях
\d Десятичная цифра
\D Любой символ, кроме десятичной цифры
\w Любая цифра, буква или знак подчеркивания
\W Любой символ, кроме цифры, буквы или знака подчеркивания
\s Пробельный символ
\S Любой символ, кроме пробельного
\b Граница слова (пробел или возврат каретки)
\B Любой символ кроме границы слова
\f Конец (разрыв) страницы
\n Перевод строки
\r Возврат каретки
\t Табуляция
\<код> Символ заданный восьмеричным кодом
\х<код> Символ заданный шестнадцатеричным кодом

41 Назначение метода replace() при использовании регулярных выражений

replace - Замена текста найденного РВ - Текст, в котором все фрагменты,

соответствующие заданному РВ, заменяются другим текстом

42 Назначение метода match() при использовании регулярных выражений

match - Выполняет поиск фрагмента строки, соответствующий заданному РВ - Массив найденных совпадений

Например Метод str.match(regexp) ищет совпадения с regexp в строке str.:

// вернет ["1", "2", "3"]

var result = "1 плюс 2 равно 3".match(/\d+/g);

43 За счет какого алгоритма обеспечивается быстродействие перестройки html-страницы во фреймворке React?

React считается быстрым из-за VirtualDOM. Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.

Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого применять изменения к реальному DOM.
При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено.

Такой подход работает быстрее, потому как не включает в себя все тяжеловесные части реального DOM.

44 Как подключить фреймворк React к html-странице

Добавляем DOM-контейнер в HTML

Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег

в месте, где вы хотите отобразить что-нибудь с помощью React. Например:

остальной HTML ... -->
<div id="like_button_container">div>

Затем назначьте созданному

уникальный атрибут id. Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.

Добавляем script-теги

Теперь добавьте три