вот ссылка на Evernote.
вот мои оценочные запросы на дискурсе mozilla.
как настроить локальный тестовый сервер:
- один из самых простых способов сделать это — использовать модуль Python http.server.
- откройте командную строку и проверьте, установлен ли Python. (введите команду python -V)
- если все в порядке, перейдите в каталог, в котором находится ваш пример, с помощью команды cd.
- введите команду для запуска сервера в этом каталоге.
- (python -m http.serverили py -3 -m http.server)
- Вы можете перейти на этот сервер, перейдя по URL-адресу localhost:8000 в своем веб-браузере. Здесь вы увидите содержимое каталога в списке — щелкните HTML-файл, который хотите запустить.
Примечание. Если у вас уже есть что-то, работающее на порту 8000, вы можете выбрать другой порт, выполнив команду сервера, за которой следует альтернативный номер порта, например python3 -m http.server 7800 (Python 3.x) или python -m SimpleHTTPServer 7800 (Python 2.x). Затем вы можете получить доступ к своему контенту на локальном хосте: 7800.
JavaScript ПЕРВЫЕ ШАГИ
ЧТО ТАКОЕ JS?
JavaScript — это язык сценариев или программирования, который позволяет вам реализовывать сложные функции на веб-страницах — каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию для вашего просмотра — отображает своевременные обновления контента, интерактивные карты, анимированные 2D/ 3D-графика, прокручиваемые видео-музыкальные автоматы и т. д. — можете поспорить, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS)
функциональность, построенная поверх клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют дополнительные возможности для использования в коде JavaScript.
API — это готовые наборы строительных блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы сложно или невозможно реализовать. Они делают для программирования то же самое, что и готовые мебельные комплекты для домостроения — гораздо проще взять готовые панели и скрутить их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, идти и искать подберите нужную древесину, обрежьте все панели до нужного размера и формы, найдите винты нужного размера и затем соедините их вместе, чтобы сделать книжную полку.
Обычно они делятся на две категории.
-сторонние API
-браузерные API
API-интерфейсы браузера встроены в ваш веб-браузер и могут предоставлять данные из окружающей компьютерной среды или выполнять полезные сложные действия. Например:
DOM (Document Object Model) API позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.
Geolocation API извлекает географическую информацию. Вот как Google Maps может найти ваше местоположение и нанести его на карту.
API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику.
Audio and Video APIs, такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере. .
Сторонние API по умолчанию не встроены в браузер, и вам, как правило, приходится брать их код и информацию из Интернета. Например:
Twitter API позволяет вам делать такие вещи, как отображение ваших последних твитов на вашем веб-сайте.
API Карт Google и API OpenStreetMap позволяют встраивать пользовательские карты на ваш веб-сайт и выполнять другие подобные функции.
очень распространенное использование JS заключается в динамическом изменении HTML и CSS для обновления пользовательского интерфейса через DOM API.
безопасность браузера:
У каждой вкладки браузера есть своя отдельная корзина для запуска кода (в техническом плане эти корзины называются «средами выполнения») — это означает, что в большинстве случаев код в каждой вкладке запускается совершенно отдельно, и код в одной вкладке не может напрямую запускаться. воздействовать на код на другой вкладке — или на другом веб-сайте. Это хорошая мера безопасности — если бы это было не так, то пираты могли бы начать писать код для кражи информации с других сайтов и тому подобное.
Порядок работы JS:
вам нужно быть осторожным, чтобы объекты, на которые есть ссылки в вашем коде, существовали, прежде чем вы попытаетесь что-то с ними сделать.
интерпретируемый и скомпилированный код:
JS — это легкий интерпретируемый язык программирования. веб-браузер получает код JS в его исходной текстовой форме и запускает сценарий из него. с технической точки зрения большинство современных интерпретаторов JS фактически используют метод, называемый своевременной компиляцией, для повышения производительности; исходный код JS компилируется в более быстрый двоичный формат во время использования скрипта, чтобы его можно было запустить как можно быстрее. однако JS по-прежнему считается интерпретируемым языком, поскольку компиляция выполняется во время выполнения, а не заранее.
JS применяется к HTML-странице так же, как и CSS, с помощью элемента ‹script›.
стратегии загрузки скрипта:
Распространенной проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором он отображается. Если вы используете JavaScript для управления элементами на странице (или, точнее, объектную модель документа), ваш код не будет работать, если JavaScript загружается и анализируется до HTML, с которым вы пытаетесь что-то сделать.
Во внешнем случае нам не нужно было использовать событие DOMContentLoaded, потому что атрибут defer решил проблему за нас. Мы не использовали решение отсрочки для внутреннего примера JavaScript, потому что отсрочка работает только для внешних скриптов.
асинхронно и отложить
async и defer предписывают браузеру загружать сценарии в отдельном потоке, в то время как остальная часть страницы (DOM и т. д.) загружается, поэтому загрузка страницы не блокируется во время процесса выборки.
сценарии с асинхронным атрибутом будут выполняться сразу после завершения загрузки. Это блокирует страницу и не гарантирует какой-либо определенный порядок выполнения.
сценарии с атрибутом defer будут загружаться в том порядке, в котором они находятся, и будут выполняться только после того, как все загрузится.
Если ваши скрипты должны запускаться немедленно и у них нет никаких зависимостей, используйте async.
Если ваши скрипты должны ждать обработки и зависят от наличия других скриптов и/или DOM, загрузите их с помощью defer и поместите соответствующие элементы ‹script› в том порядке, в котором вы хотите, чтобы браузер выполнял их.
Комментарии:
// однострочный комментарий
/* многострочный комментарий */
ПЕРВЫЙ Всплеск JS
переменные - это в основном имена для значений (например, числа или строки текста). вы создаете переменную с ключевым словом let, за которым следует имя вашей переменной.
константы также используются для именования значений, но, в отличие от переменных, вы не можете изменить установленное значение. создать с ключевым словом const
вы можете присвоить значение вашей переменной или константе со знаком равенства =, за которым следует значение, которое вы хотите ему присвоить.
думаю как программист:
Одна из самых сложных вещей в программировании — это не синтаксис, который вам нужно выучить, а то, как его применять для решения реальных проблем. вам нужно начать думать как программист — это обычно включает в себя просмотр описаний того, что ваша программа должна делать, определение того, какие функции кода необходимы для достижения этих целей, и как заставить их работать вместе.
это требует сочетания тяжелой работы, опыта работы с синтаксисом программирования и практики, а также немного творчества.
функции:
функция проверкиУгадай ( ) {
Сообщить("Я заполнитель");
}
используется ключевое слово функция, за которым следует имя с круглыми скобками после него. после этого ставим две фигурные скобки { }. внутри фигурных скобок находится весь код, который мы хотим запускать всякий раз, когда мы вызываем функцию.
когда мы хотим запустить код, мы вводим имя функции, за которым следуют круглые скобки.
проверитьУгадай();
операторы:
вы также можете использовать оператор + для объединения текстовых строк (в программировании это называется конкатенацией).
также доступны некоторые сокращенные операторы, называемые расширенными операторами присваивания. например, если вы хотите добавить новую текстовую строку к существующей и вернуть результат, вы можете сделать это:
let name1 = ‘Бинго’;
name1 += ‘привет!’;
когда мы запускаем тесты true/false, мы используем операторы сравнения.
===строгое равенство (это точно такое же?)
!==неравенство (разве это не одно и то же?)
‹меньше чем
›больше, чем
события:
события — это то, что происходит в браузере — нажатие кнопки, загрузка страницы, воспроизведение видео и т. д. — в ответ на которые мы можем запускать блоки кода. прослушиватели событий отслеживают определенные события и вызывают обработчики событий, представляющие собой блоки кода, которые запускаются в ответ на срабатывание события.
guessSubmit.addEventListener(‘click’, checkGuess);
обратите внимание, что нам не нужно указывать скобки для функций при написании внутри addEventListener().
функция setGameOver() {
предположениеField.disabled = истина;
предположениеОтправить.отключено = Истина;
resetButton = document.createElement('кнопка');
resetButton.textContent = «Начать новую игру»;
документ.тело.приложение (кнопка сброса);
resetButton.addEventListener('щелчок', resetGame);
}
петли:
Циклы — это очень важная концепция в программировании, которая позволяет выполнять часть кода снова и снова, пока не будет выполнено определенное условие.
const fruit = [‘яблоки’, ‘бананы’, ‘вишни’];
for (const Fruit of Fruits) {
console.log(фрукты);
}
строка const fruit = [‘яблоки’, ‘бананы’, ‘вишни’]; создает массив. массив представляет собой набор элементов. Цикл for…of позволяет получить каждый элемент массива и выполнить над ним некоторый код JS. строка for (const Fruit of Fruits) говорит:
получить первый предмет в фруктах
задайте для переменной fruit этот элемент, а затем запустите код, заключенный в скобки { }.
получить следующий элемент в фруктах и повторять 2, пока не дойдете до конца фруктов.
в JS большинство элементов, которыми вы будете манипулировать в своем коде, являются объектами. объект представляет собой набор связанных функций, хранящихся в одной группе.
querySelector()метод объекта document. querySelector() принимает одну часть информации — селектор CSS, который выбирает элемент, на который вы хотите сослаться.
УСТРАНЕНИЕ НЕПОЛАДОК JS
типы ошибок
синтаксические ошибки
логические ошибки
console.log(); это действительно полезная функция отладки, которая выводит значение на консоль.
Math.floor(Math.random()*100) + 1;
Math.random() генерирует случайное десятичное число от 0 до 1.
Math.floor() округляет переданное ему число до ближайшего целого числа.
другие распространенные ошибки:
SyntaxError: отсутствует; перед заявлением:
Эта ошибка обычно означает, что вы пропустили точку с запятой в конце одной из строк кода, но иногда она может быть более загадочной.
SyntaxError: отсутствует ) после списка аргументов:
Это довольно просто — обычно это означает, что вы пропустили закрывающую скобку в конце вызова функции/метода.
SyntaxError: ожидаемое выражение, получено ‘string’ или SyntaxError: неопределенный строковый литерал
Эти ошибки обычно означают, что вы пропустили открывающую или закрывающую кавычку строкового значения. В приведенной выше первой ошибке строка будет заменена неожиданным символом (символами), обнаруженными браузером, вместо кавычек в начале строки. Вторая ошибка означает, что строка не заканчивается кавычкой.
ПЕРЕМЕННЫЕ
переменные могут содержать что угодно — не только строки и числа. переменные также могут содержать сложные данные и даже целые функции для удивительных вещей.
примечание: мы говорим, что переменные содержат значения. это важное различие. переменные сами по себе не являются значениями; они являются контейнерами для значений. вы можете думать о них как о маленьких картонных коробках, в которых вы можете хранить вещи.
let myName = ‘Bedri’;
пусть myAge = 29;
не путайте переменную, которая существует, но не имеет определенного значения, с переменной, которой вообще не существует — это очень разные вещи.
примечание о var:
мы рекомендуем использовать в коде let, а не var . нет причин использовать var, если только вам не нужна поддержка IE 10 или более ранней версии в вашем коде.
обновление переменной:
как только переменная была инициализирована значением, вы можете изменить (или обновить) это значение, присвоив ему другое значение.
* переменные чувствительны к регистру.
типы переменных:
номера:
пусть мой возраст = 17;
строки:
пусть моеИмя = «Бедри»;
логические значения:
пусть iAmAlive = истина;
пусть тест = 6 ‹ 3;
массивы:
пусть myNameArray = ['Крис', 'Боб', 'Джим'];
пусть myNumberArray = [10, 15, 40];
массив имен[0];
мой числовой массив [2];
* обратите внимание, что массивы в JS имеют нулевой индекс.
объекты:
в программировании объект — это структура кода, которая моделирует реальный объект. у вас может быть простой объект, который представляет собой коробку и содержит информацию о ее ширине, высоте и длине, или у вас может быть объект, который представляет человека и содержит данные об его имени, росте, весе и т. д.
let dog = {имя: «пятно», порода: «далматинец»};
чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:
динамическая типизация:
в отличие от некоторых других языков, вам не нужно указывать, какой тип данных будет содержать переменная (числа, строки, массивы и т. д.).
*оператор под названием typeof — возвращает тип данных переменной, которую вы вводите после него.
константы в JS
они похожи на переменные, за исключением того, что:
- вы должны инициализировать их при объявлении.
- вы не можете присвоить им новое значение после того, как вы их инициализировали.
обратите внимание, что вы можете обновлять, добавлять или удалять свойства объекта, объявленного с помощью const, потому что даже если содержимое объекта изменилось, константа по-прежнему указывает на тот же объект.
когда использовать const и когда использовать let
мы придерживаемся следующего принципа:
используйте const, когда это возможно, и используйте let, когда необходимо.
это означает, что если вы можете инициализировать переменную при ее объявлении и вам не нужно переназначать ее позже, сделайте ее константой.
БАЗОВАЯ МАТЕМАТИКА в JS — ЧИСЛА И ОПЕРАТОРЫ
типы чисел:
целые числа: числа с плавающей запятой без дроби. Они могут быть как положительными, так и отрицательными, т.е. 10, 400 или -5.
числа с плавающей запятой: (с плавающей запятой) имеют десятичные точки и десятичные разряды, например 12,5 и 56,7786543.
удвоения: это особый тип чисел с плавающей запятой, которые имеют большую точность, чем стандартные числа с плавающей запятой (это означает, что они точны до большего количества знаков после запятой).
полезные числовые методы:
например, чтобы округлить число до фиксированного числа знаков после запятой, используйте метод toFixed():
const lotOfDecimal = 1,76658454309435;
множество десятичных знаков;
const twoDecimalPlaces = lotOfDecimal.toFixed(2);
два десятичных знака;
преобразование в числовые типы данных:
передача строкового значения в конструктор Number() для возврата числовой версии того же значения.
пусть myNumber = ‘74’;
Число(моеЧисло) + 3;
операторы сравнения:
‹кнопка›Запустить машину‹/кнопка›
‹p›Машина остановлена.‹/p›
const btn = document.querySelector («кнопка»);
const txt = document.querySelector('p');
btn.addEventListener («клик», updateBTN);
функция updateBTN() {
if (btn.textContent === ‘Запустить машину’) {
btn.textContent = ‘Остановить машину’;
txt.textContent = «Машина запущена»;
} еще {
btn.textContent = «Запустить машину»;
txt.textContent = ‘Машина остановлена’;
}
}
ОБРАБОТКА ТЕКСТА — STRINGS в JS
в JavaScript вы можете выбрать одинарные или двойные кавычки для заключения строк.
экранирование символов в строке:
Экранирование символов означает, что мы что-то делаем с ними, чтобы убедиться, что они распознаются как текст, а не как часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом.
const bigmouth = ‘Я не имею права занимать свое место…’;
объединение строк:
для объединения строк в JavaScript можно использовать другой тип строки, который называется литерал шаблона.
вы можете включать в него переменные, заключенные в символы ${ }, и значение переменной будет вставлено в результат.
const name = ‘Крис’;
const Greeting = `Привет, ${name}`;
console.log(приветствие);
вы можете использовать ту же технику для объединения двух переменных.
конкатенация в контексте:
конкатенация с использованием «+»:
вы также можете объединять строки с помощью оператора +. однако литералы шаблонов обычно дают более читаемый код.
числа против строк:
Объект Число преобразует все переданное ему в число, если это возможно.
И наоборот, у каждого числа есть метод toString(), который преобразует его в эквивалентную строку.
включая выражения в строках:
Вы можете включать выражения JavaScript в литералы шаблонов, а также простые переменные, и результаты будут включены в результат:
многострочные строки:
Литералы шаблонов учитывают разрывы строк в исходном коде, поэтому вы можете писать строки, охватывающие несколько строк.
Чтобы получить эквивалентный вывод с использованием обычной строки, вам нужно включить в строку символы разрыва строки (\n):
const output = ‘Мне нравится песня.\nЯ поставил ей оценку 90%.’;
ПОЛЕЗНЫЕ СТРОКОВЫЕ МЕТОДЫ
const browserType = ‘mozilla’;
browserType.length;
browserType[browserType.length-1];
проверка, содержит ли строка подстроку:
const browserType = ‘mozilla’;
if (browserType.включает('zilla')) {
console.log('Найдена zilla!)
} еще {
console.log('Зиллы здесь нет!');
}
проверка, начинается ли строка или заканчивается определенной подстрокой
два специальных метода для этого:
заканчивается()
нахождение позиции подстроки в строке:
если строка содержит подстроку, indexOf() возвращает индекс первого вхождения подстроки.
если не содержит, возвращается -1.
const tagline = ‘MDN — Ресурсы для разработчиков от разработчиков’;
console.log(tagline.indexOf('разработчики')); — возвращает 20
нахождение последующих вхождений:
вы можете сделать это, передав значение, которое больше, чем индекс предыдущего вхождения, в качестве второго параметра метода.
const firstOccurence = tagline(indexOf('разработчики');
const secondOccurence = tagline(indexOf('разработчики', firstOccurence + 1);
здесь мы указываем методу искать подстроку «разработчики», начиная с индекса 21 (firstOccurence + 1), и он возвращает индекс 35.
извлечение подстроки из строки:
Метод slice().
const browserType = ‘mozilla’;
console.log(browserType.slice(1, 4)); // «ози»
изменение регистра:
const radData = ‘Мое имя — MuD’;
console.log(radData.toLowerCase());
console.log(radData.toUpperCase());
обновление частей строки:
const browserType = ‘mozilla’;
const updated = browserType.replace('moz', 'van');
*если вы хотите изменить все вхождения, используйте replaceAll()
*обратите внимание, что replace() не изменяет строку, для которой она была вызвана, а возвращает новую строку.
Примеры активного обучения:
const citys = [‘lonDON’, ‘MANCHESTer’, ‘BİRminGham’, ‘liVERpool’];
для ( пусть город городов) {
const нижний = city.toLowerCase();
const firstLetter = lower.slice(0, 1);
const с заглавной буквы = lower.replace(firstLetter, firstLetter.toUpperCase());
постоянный результат = с заглавной буквы;
for (пусть станция станций) {
const scode = station.slice(0, 3);
const scolon = station.indexOf(';');
const sname = station.slice(scolon + 1);
const sfinal = `${scode}: ${sname}`;
постоянный результат = sfinal;
МАССИВЫ
* аккуратный способ хранения списка элементов данных под одним именем переменной. это спископодобные объекты.
*квадратные скобки [-]
const random = [‘дерево’, 795, [0, 1, 2, 3]];
длина массива: сколько элементов в нем.
вы также можете изменить элемент в массиве, присвоив одному элементу массива новое значение.
const shopping = ['хлеб', 'молоко', 'сыр', 'хумус'];
покупки[0] = ‘тахини’;
const random = ['дерево', 795, [0, 1, 2, 3];
случайный[2][0];
const birds = ['Попугай', 'Сокол', 'Сова'];
console.log(birds.indexOf('Сокол'));
чтобы добавить один или несколько элементов в конец массива: используйте push()
cities.push('значение');
добавление в начало: используйте unshift()
чтобы удалить последний элемент: используйте pop()
чтобы сохранить элемент в новой переменной:
const removeCity = city.pop();
для первого элемента: используйте shift()
чтобы удалить элемент, если индекс известен: splice()
постоянные города = [‘x’, ‘y’, ‘z’, ‘t’];
const index = city.indexOf('z');
если (индекс !== 1 ) {
cities.splice( index, 1) –первый аргумент: с чего начать удаление элементов. 2-й: сколько предметов будет удалено.
}
доступ к каждому элементу:
вы можете сделать это, используя оператор for…of.
const birds = [‘x’, ‘y’, ‘z’, ‘t’];
for (const птица из птиц) {
console.log(птица);
}
делаем то же самое с каждым элементом в массиве: map()
функция double(число) {
номер возврата*2;
}
постоянные числа = [5, 2, 7, 6];
const удвоенный = number.map(double);
чтобы создать новый массив, содержащий только те элементы исходного массива, которые соответствуют некоторому тесту: filter()
функция isLong(город) {
возвратить city.length › 8;
}
const citys = ['Лондон', 'Ливерпуль', 'Тотнес', 'Эдинбург'];
const long = city.filter(isLong);
преобразование между строками и массивами: split()
он принимает один параметр, символ, которым вы хотите разделить строку, и возвращает подстроки между разделителем в виде элементов массива.
const data = ‘xyz,tuv,qpr’;
const citys = data.split(',');
присоединиться():
const commaSeparated = city.join(',');
*вместо этого можно использовать .toString(). но с объединением вы можете указать другие разделители, тогда как toStringвсегда использует запятую.
*узнал в результате активного обучения:
forEach (функция(элемент, индекс) {
let newElement = `${element} ( ${index} )`;
мойМассив[индекс] = новыйЭлемент;
}
let myString = myArray.join('-');
