JavaScript чіт-лист

JavaScript чіт-лист PDFНижче ви можете знайти шпаргалку Javascript як у .pdf, так і в тексті.


Contents

JavaScript чіт-лист

  • Посилання для завантаження

Основи JavaScript

Почнемо з основ – як включити JavaScript на веб-сайт.

Включення JavaScript на сторінку HTML

Щоб включити JavaScript всередину сторінки, вам потрібно її обернути

За допомогою цього вводу браузер може ідентифікувати та виконати код належним чином.

Виклик зовнішнього файлу JavaScript

Ви також можете розмістити JavaScript у власному файлі та назвати його всередині свого HTML. Таким чином, ви можете зберігати різні типи коду окремо один від одного, створюючи кращі впорядковані файли. Якщо ваш код знаходиться у файлі, який називається myscript.js, Ви б це назвали:

У тому числі коментарі

Коментарі важливі, оскільки вони допомагають іншим зрозуміти, що відбувається у вашому коді, або нагадують, якщо ви щось забули. Майте на увазі, що вони повинні бути позначені належним чином, щоб браузер не намагався їх виконувати.

У JavaScript у вас є два різні варіанти:

  • Однорядкові коментарі - Щоб включити коментар, який обмежений одним рядком, передуйте йому //
  • Багаторядкові коментарі - Якщо ви хочете написати довші коментарі між декількома рядками, загорніть їх / * і * / щоб уникнути його виконання

Змінні в JavaScript

Змінні - це резервні значення, які можна використовувати для виконання операцій. Ви повинні бути їм знайомі з класу математики.

вар, const, дозволяє

У вас є три різні можливості для оголошення змінної в JavaScript, кожна зі своїми спеціальностями:

  • вар - Найпоширеніша змінна. Її можна перепризначити, але отримати доступ лише до функції. Змінні, визначені за допомогою вар переходимо до вершини, коли виконується код.
  • const - Не можна перепризначити та не отримати доступ до того, як вони з’являться в коді.
  • дозволяє - Схожий на const, то дозволяє змінна може бути перепризначена, але не повторно оголошена.

Типи даних

Змінні можуть містити різні типи значень та типи даних. Ти використовуєш = призначити їх:

  • Числа - вар вік = 23
  • Змінні - var x
  • Текст (рядки) - var a = "init"
  • Операції - var b = 1 + 2 + 3
  • Справжні чи неправдиві твердження - var c = вірно
  • Постійні числа - const PI = 3,14
  • Об'єкти - var name = {firstName: "Джон", lastName: "Doe"}

Є більше можливостей. Зауважте, що змінні залежать від регістру. Це означає прізвище і прізвище буде оброблятися як дві різні змінні.

Об'єкти

Об'єкти - це певні види змінних. Вони є змінними, які можуть мати свої власні значення та методи. Останні - це дії, які ви можете виконувати над об’єктами.

var person = {
firstName: "Джон",
lastName: "Doe",
вік: 20,
національність: "німецька"
};

Наступний рівень: масиви

Далі в нашому чіт-аркуші JavaScript - це масиви. Масиви є частиною багатьох різних мов програмування. Вони є способом організації змінних та властивостей у групи. Ось як створити його в JavaScript:

var fru = ["Банан", "Яблуко", "Груша"];

Тепер у вас є масив, який називається фрукти який містить три елементи, які можна використовувати для майбутніх операцій.

Методи масиву

Коли ви створили масиви, ви можете зробити з ними кілька речей:

  • concat () - Об’єднайте кілька масивів в один
  • indexOf () - Повертає перше положення, в якому заданий елемент з'являється в масиві
  • join () - Об'єднайте елементи масиву в один рядок і поверніть рядок
  • lastIndexOf () - надає останню позицію, в якій даний елемент з'являється в масиві
  • поп () - Видаляє останній елемент масиву
  • push () - Додайте новий елемент наприкінці
  • зворотний() - Сортування елементів у порядку зменшення
  • shift () - Видаліть перший елемент масиву
  • скибочка () - Витягує копію частини масиву в новий масив
  • сортувати () - сортує елементи за алфавітом
  • сплайс () - Додає елементи у визначений спосіб та положення
  • toString () - Перетворює елементи в рядки
  • відхилити () —Додає новий елемент на початку
  • valueOf () - Повертає примітивне значення вказаного об'єкта

Оператори

Якщо у вас є змінні, ви можете використовувати їх для виконання різних видів операцій. Для цього вам потрібні оператори.

Основні оператори

  • + - Доповнення
  • - - віднімання
  • * - Множення
  • / - Відділ
  • (...) - Оператор групування, операції в дужках виконуються раніше, ніж зовні
  • % - Модуль (залишок)
  • ++ - номери приросту
  • -- - Номери зменшення

Оператори порівняння

  • == - Дорівнює
  • === - рівне значення та рівний тип
  • != - Не рівні
  • !== - Не рівне значення чи не однаковий тип
  • > - Більш чим
  • < - Менше ніж
  • > = - Більше або рівне
  • <= - Менше або рівне
  • ? - Термінальний оператор

Логічні оператори

  • && - Логічні та
  • || - логічний або
  • ! - Логічного немає

Побітні оператори

  • & - І твердження
  • | - АБО заява
  • ~ - НЕ
  • ^ - XOR
  • << - Зміна вліво
  • >> - Правий зсув
  • >>> - Зміна нуля заповнення права

Функції

Функції JavaScript - це блоки коду, які виконують певне завдання. Основна функція виглядає так:

назва функції (параметр1, параметр2, параметр3) {
// що робить функція
}

Як бачите, він складається з функція ключове слово плюс ім'я. Параметри функції знаходяться в дужках, і навколо них є фігурні дужки. Ви можете створити свою власну, але щоб полегшити своє життя - також існує ряд функцій за замовчуванням.

Виведення даних

Поширеним додатком для функцій є вихід даних. Для виводу у вас є такі параметри:

  • попередження () - Виведіть дані у вікні попередження у вікні браузера
  • підтвердити () - Відкриває діалогове вікно так / ні та повертає значення true / false залежно від клацання користувача
  • console.log () - Записує інформацію на консоль браузера, добре для налагодження
  • document.write () - Напишіть безпосередньо в документ HTML
  • підказка () - Створює діалог для введення користувачем

Глобальні функції

Глобальні функції - це функції, вбудовані в кожен браузер, здатний працювати з JavaScript.

  • decodeURI () - Розшифровує a Уніфікований ідентифікатор ресурсу (URI) створений encodeURI або подібне
  • декодуванняURICкомпонент () - Розшифровує URI-компонент
  • encodeURI () - Кодує URI в UTF-8
  • encodeURIComponent () - Те саме, але для компонентів URI
  • eval () - Оцінює код JavaScript, представлений у вигляді рядка
  • isFinite () - Визначає, чи є передане значення кінцевим числом
  • isNaN () - Визначає, чи є значення NaN чи ні
  • Кількість () —– Повертає число, перетворене з його аргументу
  • розборуFloat () - Розбирає аргумент і повертає число з плаваючою комою
  • parseInt () - Розбирає свій аргумент і повертає ціле число

Петлі JavaScript

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

for (до циклу; умова для циклу; виконання після циклу) {
// що робити під час циклу
}

У вас є кілька параметрів для створення циклів:

  • для - Найпоширеніший спосіб створення циклу в JavaScript
  • поки - Встановлює умови, за яких цикл виконує
  • робити поки - Подібно до поки цикл, але він виконується принаймні один раз і виконує перевірку в кінці, щоб побачити, чи виконується умова для виконання ще раз
  • перерва —Використовується для зупинки та виходу з циклу за певних умов
  • продовжувати - Пропустіть частини циклу, якщо виконані певні умови

Якщо - Інше Заяви

Ці типи тверджень легко зрозуміти. Використовуючи їх, ви можете встановити умови, коли виконується ваш код. Якщо застосовуються певні умови, щось робиться, якщо ні - виконується щось інше.

якщо (умова) {
// що робити, якщо виконується умова
} else {
// що робити, якщо умова не виконується
}

Подібна концепція до якщо ще є перемикач заява. Однак, використовуючи комутатор, ви вибираєте один з декількох блоків коду для виконання.

Струни

Струни - це те, що JavaScript викликає текст, який не виконує функції, але може з'являтися на екрані.

var person = "Джон Доу";

В цьому випадку, Джон До - це рядок.

Втеча персонажів

У JavaScript рядки позначені одинарними або подвійними лапки. Якщо ви хочете використовувати лапки в рядку, вам потрібно використовувати спеціальні символи:

  • \ ' - Єдина цитата
  • \ " - Подвійна цитата

Крім цього у вас також є додаткові символи втечі:

  • \\ - зворотна коса
  • \ b - Резервна область
  • \ f - Форма подачі
  • \ n - Нова лінія
  • \ r - Повернення вагона
  • \ t - горизонтальний табулятор
  • \ v - вертикальний табулятор

Строкові методи

Існує багато різних способів роботи з рядками:

  • charAt () - Повертає символ у вказаному положенні всередині рядка
  • charCodeAt () - дає вам Unicode персонажа на цій позиції
  • concat () - З’єднайте (з'єднує) дві або більше рядків в одну
  • fromCharCode () - Повертає рядок, створений із заданої послідовності кодових одиниць UTF-16
  • indexOf () - Забезпечує позицію першого входження вказаного тексту в рядку
  • lastIndexOf () - Такий же, як indexOf () але з останнім явищем, пошук назад
  • матч () - Вилучає збіги рядка проти шаблону пошуку
  • замінити () - Знайдіть і замініть вказаний текст у рядку
  • пошук () - Виконує пошук відповідного тексту та повертає його позицію
  • скибочка () - Витягує розділ рядка і повертає його як новий рядок
  • розділити () - Розбиває об’єкт рядка на масив рядків у заданій позиції
  • substr () - Схожий на скибочка () але витягує підрядку залежно від заданої кількості символів
  • підрядник () - Також схожий на скибочка () але не можна приймати негативні показники
  • toLowerCase () - Перетворення рядків у малі регістри
  • toUpperCase () - Перетворення рядків у верхній регістр
  • valueOf () - Повертає примітивне значення (яке не має властивостей чи методів) рядкового об'єкта

Синтаксис регулярних виразів

Регулярні вирази - це шаблони пошуку, які використовуються для поєднання символьних комбінацій у рядках. Шаблон пошуку може бути використаний для пошуку тексту та тексту для заміни операцій.

Модифікатори шаблону

  • е - Оцініть заміну
  • i - Виконайте нечутливе до регістру відповідність
  • г - Виконайте глобальну відповідність
  • м - Виконайте декілька рядків
  • с - Обробляйте рядки як єдиний рядок
  • х - Дозволити коментарі та пробіли у шаблоні
  • U - Неправильний візерунок

Кронштейни

  • [abc] - Знайдіть будь-який із символів між дужками
  • [^ abc] - Знайдіть будь-якого символу, якого немає в дужках
  • [0-9] - використовується для пошуку будь-якої цифри від 0 до 9
  • [A-z] - Знайдіть будь-який символ із верхнього регістру А до малого z
  • (a | b | c) - Знайдіть будь-яку з альтернатив, розділених на |

Метахарактеристики

  • . - Знайдіть єдиний символ, за винятком нової лінії чи термінатора рядка
  • \ ш - Слововий символ
  • \ Ш - Немовний символ
  • \ d - Цифра
  • \ D - Нецифровий символ
  • \ с - Пробіл символів
  • \ S - Непробільний символ
  • \ b - Знайдіть відповідність на початку / в кінці слова
  • \ B - Збіг не на початку / в кінці слова
  • \ 0 - символ NUL
  • \ n - Новий символ рядка
  • \ f - Характер подачі форми
  • \ r - Характер повернення каретки
  • \ t - вкладка символів
  • \ v - Вертикальний символ вкладки
  • \ xxx - Символ, вказаний восьмеричним числом xxx
  • \ xdd - Символ, визначений шістнадцятковим числом dd
  • \ uxxxx - Символ Unicode, визначений шістнадцятковим числом XXXX

Квантори

  • н+ - Відповідає будь-якому рядку, що містить принаймні один n
  • n * - Будь-який рядок, який містить нуль або більше входів n
  • н? - Рядок, що містить нуль або один випадок n
  • n {X} - Рядок, що містить послідовність X n 's
  • n {X, Y} - Рядки, що містять послідовність від X до Y n’s
  • n {X,} - Збігає будь-який рядок, що містить послідовність принаймні з X n
  • n $ - Будь-який рядок з n в кінці
  • ^ н - Рядок з n на початку цього
  • ?= n - Будь-який рядок, який супроводжується певним рядком n
  • ?!н - Рядок, який не супроводжується певним рядком ni

Числа і математика

У JavaScript ви також можете працювати з числами, константами та виконувати математичні функції.

Властивості чисел

  • MAX_VALUE - Максимальне числове значення, представлене в JavaScript
  • MIN_VALUE - Найменше додатне числове значення, представлене в JavaScript
  • NaN - Значення "Не число"
  • NEGATIVE_INFINITY - Від’ємне значення нескінченності
  • POSITIVE_INFINITY - Позитивна цінність нескінченності

Числові методи

  • toExponential () - Повертає рядок із закругленим числом, записаним у вигляді експонентних позначень
  • toFixed () - Повертає рядок числа із заданою кількістю десяткових знаків
  • до точності () - Рядок числа, записаного із заданою довжиною
  • toString () - Повертає число у вигляді рядка
  • valueOf () - Повертає число як число

Властивості математики

  • Е - номер Ейлера
  • LN2 - Природний логарифм 2
  • LN10 - Природний логарифм 10
  • LOG2E - Основа 2 логарифму Е
  • LOG10E - Основа 10 логарифму Е
  • ПІ - Число PI
  • SQRT1_2 - квадратний корінь 1/2
  • SQRT2 - квадратний корінь 2

Математичні методи

  • abs (x) - Повертає абсолютне (позитивне) значення x
  • acos (x) - Аркозін х, в радіанах
  • asin (x) - Дуга х, в радіанах
  • атан (х) - Арктангент x як числове значення
  • atan2 (y, x) - Арктангент частки його аргументів
  • стеля (х) - Значення x округляється до найближчого цілого числа
  • cos (x) - косинус x (x знаходиться в радіанах)
  • exp (x) - Значення Eх
  • поверх (х) - значення x округлюється до найближчого цілого числа
  • журнал (x) - Природний логарифм (основа Е) x
  • max (x, y, z, ..., n) - Повертає число з найвищим значенням
  • хв (х, у, з, ..., п) - Те саме для числа з найменшим значенням
  • порох (х, у) - X до сили у
  • випадковий () - Повертає випадкове число між 0 і 1
  • кругла (х) - значення x округлюється до найближчого цілого числа
  • гріх (х) - Синус x (x знаходиться в радіанах)
  • sqrt (x) - квадратний корінь х
  • засмага (x) - Тангенс кута

Робота з датами в JavaScript

Ви також можете працювати з та змінювати дати та час за допомогою JavaScript. Це наступний розділ на шпаргалці JavaScript.

Встановлення дат

  • Дата() - Створює новий об'єкт дати з поточною датою та часом
  • Дата (2017, 5, 21, 3, 23, 10, 0) - Створіть спеціальний об’єкт дати. Цифри представляють рік, місяць, день, годину, хвилини, секунди, мілісекунди. Ви можете опустити все, що завгодно, крім року та місяця.
  • Дата ("2017-06-23") - Декларація дати у вигляді рядка

Витягнення значень дати та часу

  • getDate () - Отримайте день місяця як число (1-31)
  • getDay () - будній день як число (0-6)
  • getFullYear () - Рік як чотиризначне число (yyyy)
  • getHours () - Отримайте годину (0-23)
  • getMilliseconds () - мілісекунда (0-999)
  • getMinutes () - Отримайте хвилину (0-59)
  • getMonth () - Місяць як число (0-11)
  • getSeconds () - Отримайте другий (0-59)
  • getTime () - Отримайте мілісекунди з 1 січня 1970 року
  • getUTCDate () - день (дата) місяця у вказану дату відповідно до загального часу (також доступний для дня, місяця, повного року, годин, хвилин тощо)
  • розбору - Розбирає рядкове подання дати та повертає кількість мілісекунд з 1 січня 1970 року

Встановити частину дати

  • setDate () - Встановіть день як число (1-31)
  • setFullYear () - Встановлює рік (необов'язково місяць та день)
  • setHours () - Встановити годину (0-23)
  • setMilliseconds () - Встановити мілісекунди (0-999)
  • setMinutes () - Встановлює хвилини (0-59)
  • setMonth () - Встановити місяць (0-11)
  • setSeconds () - Встановлює секунди (0-59)
  • setTime () - Встановіть час (мілісекунди з 1 січня 1970 р.)
  • setUTCDate () - Встановлює день місяця на вказану дату відповідно до загального часу (також доступний для дня, місяця, повного року, годин, хвилин тощо)

Режим DOM

DOM - це Модель об'єкта документа сторінки. Це код структури веб-сторінки. JavaScript пропонує безліч різних способів створення та маніпулювання елементами HTML (звані вузлами).

Властивості вузла

  • атрибути - Повертає живу колекцію всіх атрибутів, зареєстрованих на елементі
  • базаURI - Забезпечує абсолютну базову URL-адресу HTML-елемента
  • дочірні вузли - надає колекцію дочірніх вузлів елемента
  • першою дітьми - Повертає перший дочірній вузол елемента
  • lastChild - Останній дочірній вузол елемента
  • наступний сибінг - дає вам наступний вузол на тому ж рівні дерева вузлів
  • nodeName —Повертає ім'я вузла
  • nodeType - Повертає тип вузла
  • nodeValue - Встановлює або повертає значення вузла
  • власникДокумент - Об'єкт документа верхнього рівня для цього вузла
  • parentNode - Повертає батьківський вузол елемента
  • попередній сибінг - Повертає вузол безпосередньо перед поточним
  • textContent - Встановлює або повертає текстовий вміст вузла та його нащадків

Методи вузлів

  • appendChild () - Додає новий дочірній вузол до елемента як останній дочірній вузол
  • cloneNode () - Клонує елемент HTML
  • порівнятиДокументПозиція () - Порівняє положення документа з двох елементів
  • getFeature () - Повертає об'єкт, який реалізує API визначеної функції
  • hasAttributes () - Повертає true, якщо елемент має будь-які атрибути, інакше false
  • hasChildNodes () - Повертає true, якщо елемент має будь-які дочірні вузли, інакше false
  • Вставити перед () - Вставляє новий дочірній вузол перед вказаним існуючим дочірнім вузлом
  • isDefaultNpace () - Повертає true, якщо заданий простір іменURI за замовчуванням, інакше false
  • isEqualNode () - Перевіряє, чи два елементи рівні
  • isSameNode () - Перевіряє, чи два елементи є одним вузлом
  • isSupported () - Повертає значення true, якщо визначена функція підтримується на елементі
  • lookupNamespaceURI () - Повертає URI простору імен, пов'язаний із заданим вузлом
  • lookupPrefix () - Повертає DOMString, що містить префікс для заданого URI простору імен, якщо він присутній
  • нормалізувати () - Приєднується до суміжних текстових вузлів і видаляє порожні текстові вузли в елементі
  • RemoveChild () - Вилучає дочірній вузол з елемента
  • ЗамінитиКільду () - Замінює дочірній вузол в елементі

Елементні методи

  • getAttribute () - Повертає задане значення атрибута елемента вузла
  • getAttributeNS () - Повертає рядкове значення атрибута із заданим простором імен та іменем
  • getAttributeNode () - Отримує вказаний вузол атрибута
  • getAttributeNodeNS () - Повертає вузол атрибута для атрибута із заданим простором імен та іменем
  • getElementsByTagName () - Забезпечує колекцію всіх дочірніх елементів із вказаним іменем тегу
  • getElementsByTagNameNS () - Повертає живу HTMLCollection елементів з певним іменем тегу, що належить даному простору імен
  • hasAttribute () - Повертає true, якщо елемент має будь-які атрибути, інакше false
  • hasAttributeNS () - Забезпечує значення true / false, що вказує, чи має поточний елемент у заданій просторі імен вказаний атрибут
  • deleteAttribute () - Вилучає заданий атрибут з елемента
  • deleteAttributeNS () - Вилучає вказаний атрибут з елемента в межах певного простору імен
  • deleteAttributeNode () - Забирає вказаний вузол атрибута та повертає видалений вузол
  • setAttribute () - Встановлює або змінює вказаний атрибут на вказане значення
  • setAttributeNS () - додає новий атрибут або змінює значення атрибута із заданим простором імен та іменем
  • setAttributeNode () - Встановлює або змінює вказаний вузол атрибута
  • setAttributeNodeNS () - Додає елемент вузла атрибутів у просторі імен

Робота з браузером користувача

Окрім HTML елементів, JavaScript також може врахувати браузер користувача та включити його властивості до коду.

Властивості вікна

  • зачинено - Перевіряє, чи було вікно закрито чи ні, і повертає значення true чи false
  • defaultStatus - Встановлює або повертає текст за замовчуванням у рядку стану вікна
  • документ - Повертає об'єкт документа для вікна
  • кадри - Повертає всіх