Файл: 1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 03.02.2024
Просмотров: 159
Скачиваний: 1
СОДЕРЖАНИЕ
1 Прототип html-страниц веб-приложения
2 Синтаксис записи тегов и атрибутов в html
3 Блочные и строчные теги в html
7 Объект Document в DOM браузера
8 Объект Location в DOM браузера
9 Что такое селектор в CSS? (типы селекторов)
14 Назначение свойства float в CSS
15 Назначение свойства display в CSS
16 Назначение свойства position в CSS
17 Способ включения JS-кода в html страницу
18 Что такое формальные и фактические параметры у функции на языке JavaScript?
19 Создание переменной в языке JavaScript и область видимости переменной
20 Создание функции в языке JavaScript
21 Создание функционального выражения в языке JavaScript
22 Создание стрелочной функции в языке JavaScript
23 Как создать библиотеку функций языка JavaScript?
24 Что такое конкатенации строк в JavaScript?
25 Как создавать массив в JavaScript?
26 Какие символы допускается использовать при создании переменной в JavaScript?
28 Какие символы являются разделителем команд в JavaScript?
29 Назначение оператора return в JavaScript?
30 Создание объектов в JavaScript
31 Логические операторы в языке JavaScript
32 Работа со строками в Javascript
33 Создание и использование библиотек Javascript
36 Ассоциативный массив в JavaScript?
37 Способы подключения библиотеки Jquery в html-странице
39 Как подключить регулярное выражение в коде JavaScript
40 Управляющие символы в регулярном выражении
41 Назначение метода replace() при использовании регулярных выражений
42 Назначение метода match() при использовании регулярных выражений
Шаг 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-файл страницы, которую хотите отредактировать. Добавьте пустой тег
остальной HTML ... -->
<div id="like_button_container">div>
Затем назначьте созданному
Добавляем script-теги
Теперь добавьте три