JavaScript Приклади
Що може робити JavaScript?
JavaScript може змінювати вміст HTML
JavaScript може змінювати атрибути HTML
JavaScript може змінити стиль CSS
JavaScript може приховувати елементи HTML
JavaScript може показувати приховані елементи HTML
Де вставити JavaScript
JavaScript в <head>
JavaScript в <body>
JavaScript у зовнішньому файлі
JavaScript у зовнішній URL-адресі
JavaScript у зовнішній папці
JavaScript Виведення
JavaScript Синтаксис
JavaScript інструкції
JavaScript числа
JavaScript рядки
JavaScript змінні
JavaScript оператори
JavaScript присвоєння
JavaScript вирази (з використанням констант)
JavaScript вирази (з використанням рядків)
JavaScript вирази (з використанням змінних)
JavaScript ключові слова
JavaScript коментарі
JavaScript чутливий до регістру
JavaScript Інструкції
Інструкції JavaScript — це команди браузеру
Код JavaScript — це послідовність інструкцій
JavaScript інструкції відокремлюються крапкою з комою
Допускається кілька інструкцій в одному рядку
Інструкції JavaScript можна згрупувати в блоки коду
Рядок коду можна розривати після оператора або коми.
JavaScript Коментарі
Однорядкові коментарі
Однорядкові коментарі в кінці рядка
Багаторядкові коментарі
Однорядковий коментар для запобігання виконанню
Кілька рядків коментарів, щоб запобігти виконанню
JavaScript Змінні
JavaScript змінні
JavaScript змінні як алгебра
JavaScript числа та рядки
JavaScript ключове слово var
Оголошення багатьох змінних в одній інструкції
Оголошення багатьох змінних багаторядковим
Змінна без значення повертає значення undefined
Повторне оголошення змінної не знищить значення
Додавання чисел JavaScript
Додавання рядків JavaScript
Додавання рядків і чисел
JavaScript Арифметика
Оператор додавання (+)
Оператор віднімання (-)
Оператор множення (*)
Оператор ділення (/)
Оператор модуля (%)
Оператор збільшення (++)
Оператор зменшення (--)
JavaScript Присвоєння
Оператор присвоєння =
Оператор присвоєння +=
Оператор присвоєння -=
Оператор присвоєння *=
Оператор присвоєння /=
Оператор присвоєння %=
JavaScript Конкатенація рядків
Додавання двох рядків за допомогою оператора конкатенації (+)
Додавання двох рядків разом із пробілом у першому рядку
Додавання двох рядків разом із пробілом між ними
Додавання двох рядків за допомогою оператора +=
Додавання рядків і чисел
JavaScript Типи даних
Оголошення (створення) рядків
Оголошення (створення) чисел
Оголосити (створити) масив
Оголосити (створити) об’єкт
Знайдіть тип змінної
Додавання двох чисел і рядка
Додавання рядка і двох чисел
Змінна undefined
Порожня змінна
JavaScript Об’єкти
Створіть змінну JavaScript
Створіть об’єкт JavaScript
Створити персональний об’єкт (один рядок)
Створити персональний об’єкт (кілька рядків)
Доступ до властивостей об’єкта за допомогою .property
Доступ до властивостей об’єкта за допомогою [property]
Доступ до властивості функції як метод
Доступ до властивості функції як властивості
JavaScript Функції
Проста функція
Функція з аргументом
Функція з аргументом 2
Функція, яка повертає значення
Функція, яка перетворює градуси Фаренгейта в градуси Цельсія
Виклик функції без ()
JavaScript Події
Подія onclick змінює елемент HTML
Подія onclick змінює власний елемент
Подія onclick викликає функцію
JavaScript Рядки
Рядки можна записувати в одинарних або подвійних лапках
Покажіть кілька прикладів рядків
Зворотна коса риска перед лапками приймає лапки як лапки
Знайдіть довжину рядка
Ви можете розбити текстовий рядок за допомогою зворотної косої риски
Ви не можете зламати код за допомогою зворотної косої риски
Знайдіть позицію першого входження тексту в рядку - indexOf()
Пошук тексту в рядку та повернення тексту, якщо знайдено - match()
Заміна символів у рядку - replace()
Перетворити рядок у верхній регістр - toUpperCase()
Перетворення рядка на нижній регістр - toLowerCase()
Розбити рядок на масив - split()
JavaScript Числа
Числа можна записувати як з десятковими дробами, так і без них
Дуже великі чи дуже малі числа можуть бути записані в експоненті
Число вважається точним лише до 15 цифр
Арифметика з плаваючою комою не завжди точна на 100%
Але це допомагає множити і ділити на 10
Додавання двох чисел призводить до нового числа
Додавання двох числових рядків призводить до об’єднаного рядка
Додавання числа та числового рядка також призводить до об’єднаного рядка
Додавання числового рядка та числа також призводить до об’єднаного рядка
Поширена помилка під час додавання рядків і чисел 1
Поширена помилка під час додавання рядків і чисел 2
Під час ділення JavaScript намагатиметься перетворити рядки на числа
Під час множення JavaScript намагатиметься перетворити рядки на числа
Під час віднімання JavaScript намагатиметься перетворити рядки на числа
JavaScript НЕ перетворюватиме рядки на числа під час додавання
Число, поділене на рядок, є NaN (не число)
Число, поділене на числовий рядок, є числом
Глобальна функція JavaScript isNaN() повертає, якщо значення є числом
Використання NaN у математичній операції завжди повертатиме NaN
Використання NaN у математичній рядковій операції призведе до конкатенації NaN
NaN (не число) – це число (так! typeof NaN повертає число)
Нескінченність повертається, якщо ви обчислюєте число за межами найбільшого можливого числа
Ділення на нуль також породжує нескінченність
Infinity – це число (typeof Infinity повертає число)
Константи, яким передує 0x, інтерпретуються як шістнадцяткові
Метод toString() може виводити числа як шістнадцяткові, вісімкові та двійкові
Числа можуть бути об’єктами
Числа та об’єктм не можна безпечно порівнювати
Об’єкти та об’єкти не можна безпечно порівнювати
JavaScript Числові методи
Метод toString() перетворює число на рядок
Метод valueOf() повертає число як число
Метод toExponential() повертає число в експоненціальному записі
Метод toFixed() округлює число до певної кількості цифр
Метод toPrecision() — число, записане заданої довжини
Глобальний метод Number() перетворює змінні на числа
Глобальний метод Number() може навіть перетворювати дати в числа
Глобальний метод parseInt() перетворює рядки на числа
Глобальний метод parseFloat() перетворює рядки на числа
MAX_VALUE повертає найбільше можливе число в JavaScript
MIN_VALUE повертає найменше можливе число в JavaScript
POSITIVE_INFINITY символізує нескінченність
POSITIVE_INFINITY повертається при переповненні
NEGATIVE_INFINITY представляє негативну нескінченність
NEGATIVE_INFINITY повертається при переповненні
NaN представляє "Not-a-Number" (Не число)
Арифметика, виконана над рядком, призведе до NaN
Використання властивості Number для змінної поверне значення undefined
JavaScript Математика
Math.PI повертає значення PI
Math.round(x) повертає округлене значення x
Math.pow(x, y) повертає значення x у степені y
Math.sqrt(x) повертає квадратний корінь із x
Math.abs(x) повертає абсолютне (додатне) значення x
Math.ceil(x) повертає округлене значення x
Math.floor(x) повертає значення x, округлене вниз
Math.sin(x) повертає sin кута x (у радіанах)
Math.cos(x) повертає косинус кута x (у радіанах)
Math.max() повертає число з найбільшим значенням зі списку аргументів
Math.min(), щоб повернути число з найменшим значенням зі списку аргументів
Перетворення Цельсія у Фаренгейт
JavaScript Рандом / Випадкові значення
Math.random() повертає випадкове число від 0 (включно) до 1 (виключено)
Як повернути випадкове ціле число від 0 до 9 (обидва включені)
Як повернути випадкове ціле число від 0 до 10 (обидва включені)
Як повернути випадкове ціле число від 0 до 99 (обидва включені)
Як повернути випадкове ціле число від 0 до 100 (обидва включені)
Як повернути випадкове ціле число від 1 до 10 (обидва включені)
Як повернути випадкове ціле число від 1 до 100 (обидва включені)
Як повернути випадкове ціле число між x (включено) та y (виключено)
Як повернути випадкове ціле число між x та y (обидва включені)
Пояснення Random
JavaScript Дати
Використовуйте Date(), щоб відобразити сьогоднішню дату й час
Використовуйте getFullYear() для відображення року
Використовуйте getTime(), щоб обчислити кількість мілісекунд з 1970 року
Використовуйте setFullYear(), щоб встановити конкретну дату
Використовуйте toUTCString(), щоб перетворити сьогоднішню дату (відповідно до UTC) у рядок
Використовуйте getDay(), щоб відобразити день тижня у вигляді числа
Використовуйте getDay() і масив, щоб відобразити день тижня як назву
Показати годинник
JavaScript Масиви
Створити масив I
Створити масив II
Доступ до елемента масиву
Змінити елемент масиву
Доступ до повного масиву
Знайдіть довжину масиву
Цикл по масиву
Додати елемент до масиву
Додати невизначені "діри" до масиву
Як розпізнати масив I
Як розпізнати масив II
JavaScript Методи масиву
Додати елемент до масиву
Видалити останній елемент масиву - pop()
Об’єднати всі елементи масиву в рядок - join()
Об’єднати два масиви - concat()
Об’єднати три масиви - concat()
Додайте елемент у позицію 2 у масиві - splice()
Перетворення масиву на рядок - toString()
Додати нові елементи на початок масиву - unshift()
Видалити перший елемент масиву - shift()
Виберіть елементи з масиву - slice()
JavaScript Сортування масиву
Сортування масиву в порядку зростання
Сортувати масив у порядку спадання
Сортування масиву чисел за зростанням
Сортувати масив чисел за спаданням
Сортування чисел (за алфавітом або цифрами)
Сортування чисел масиву у довільному порядку
Знайти найменше число в масиві
Знайти найбільше число в масиві
Знайдіть найменше число в масиві за допомогою Math. min()
Знайдіть найбільше число в масиві за допомогою Math. max()
Використання "саморобного" методу myArrayMin
Використання "саморобного" методу myArrayMax
Сортувати об’єкти за числовими властивостями
Сортувати об’єкти за властивостями рядка
JavaScript Ітерація масиву
Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.reduceRight()
Array.every()
Array.some()
Array.indexOf()
Array.lastIndexOf()
Array.find()
Array.findIndex()
JavaScript Перетворення типу
Відобразити тип усіх типів змінних
Відобразити конструктор усіх типів змінних
Перетворення числа на рядок за допомогою String()
Перетворення числа на рядок за допомогою toString()
Дізнатися, чи є змінна масивом
Дізнатися, чи є змінна датою
JavaScript Булеві (логічні) значення
Відобразити значення Boolean(10 > 9)
Відобразити значення 10 > 9
Все, що має справжнє значення, є true
Логічне значення нуль є false
Логічне значення мінус нуль є false
Логічне значення порожнього рядка є false
Логічне значення undefined є false
Логічне значення null є false
Логічне значення false є false
Логічне значення NaN є false
Пояснення Булевих (логічних) значень
JavaScript Порівняння
Призначте 5 до x і відобразіть значення (x == 8)
Призначте 5 до x і відобразіть значення (x == 5)
Призначте 5 до x і відобразіть значення (x === 5)
Призначте 5 до x і відобразіть значення (x === "5")
Призначте 5 до x і відобразіть значення (x != 8)
Призначте 5 до x і відобразіть значення (x !== 5)
Призначте 5 до x і відобразіть значення (x !== "5")
Призначте 5 до x і відобразіть значення (x > 8)
Призначте 5 до x і відобразіть значення (x < 8)
Призначте 5 до x і відобразіть значення (x >= 8)
Призначте 5 до x і відобразіть значення (x <= 8)
JavaScript Умови
JavaScript Цикли
Цикл For
Зациклення масиву
Зациклення заголовків HTML
Цикл While
Цикл Do While
Розірвання циклу
Розірвання і продовження циклу
Використовуйте інструкцію for...in, щоб перебрати елементи об’єкта
JavaScript Обробка помилок
JavaScript Регулярні вирази
JavaScript Об’єкти
Створення змінної JavaScript
Створення об’єкта JavaScript
Створення об’єкта JavaScript (один рядок)
Створення об’єкта JavaScript (кілька рядків)
Створення об’єкта JavaScript за допомогою new
Створення об’єктів JavaScript за допомогою конструктора
Створення вбудованих об’єктів JavaScript
Найкращий спосіб створення змінних JavaScript
Об’єкти JavaScript є змінними
JavaScript Властивості об’єкта
Доступ до властивостей за допомогою .property
Доступ до властивостей за допомогою [property]
Доступ до властивостей за допомогою for in
Додавання нових властивостей до існуючих об’єктів
Видалення властивостей з об’єктів
Пояснення властивостей об’єкта
JSON Об’єкти
Доступ до властивостей за допомогою .property
Доступ до властивостей за допомогою [property]
Перебирання властивостей
Перебирання значень властивостей
Доступ до вкладених об’єктів JSON
Змініть значення за допомогою крапкової нотації
Змініть значення за допомогою позначення в дужках
Видалити властивості об’єкта
Пояснення властивостей об’єкта JSON
JSON Масиви
Доступ до значень масиву
Перебирання масиву за допомогою for-in
Перебирання масиву за допомогою for
Доступ до вкладених масивів JSON
Змінити значення масиву
Видалити елементи масиву
JSON Парсинг (аналіз, розбір)
Використовуйте аналіз JSON
Використання аналізу JSON у прикладі AJAX
Використання аналізу JSON для масиву
Розбір дат
Розбір дат за допомогою функції reviver
Розбір функцій
JSON Stringify (Строкування)
Використовуйте JSON stringify
Використання JSON stringify у масиві
Stringify дат
Stringify функцій
Stringify функцій за допомогою методу toString()
JSON PHP
Отримати JSON з файлу php
Отримати масив JSON з php
Отримати JSON з бази даних
Перебрати результат із бази даних
Надішліть JSON за допомогою методу POST
JSON HTML
Створіть таблицю HTML на основі даних JSON
Створіть динамічну таблицю HTML
Створіть спадний список HTML на основі даних JSON
JSON JSONP
Простий JSONP приклад
Створіть динамічний тег script
JSONP приклад із динамічним результатом
JSONP приклад із функцією зворотного виклику