This media is not supported in your browser
VIEW IN TELEGRAM
List Styles
Цікава ідея реалізації TODO додатка. Реалізовано за допомогою CSS і JavaScript
#css #javascript
Code Ukraine
Цікава ідея реалізації TODO додатка. Реалізовано за допомогою CSS і JavaScript
#css #javascript
Code Ukraine
Media is too big
VIEW IN TELEGRAM
Doom у PDF? Так, це реально! 🔫
Так, ти правильно прочитав — Doom запустили у PDF-документі! Тепер мочити демонів можна навіть у документах.😁
Як це працює?
Це повністю робочий порт гри, де вся магія відбувається завдяки JavaScript, який сховався всередині PDF.
Хочеш спробувати?
👉 Грати у Doom у PDF
І тепер головне питання: якщо роздрукувати цей PDF, чи буде працювати?😅
#fun #javascript #Doom
Code Ukraine
Так, ти правильно прочитав — Doom запустили у PDF-документі! Тепер мочити демонів можна навіть у документах.
Як це працює?
Це повністю робочий порт гри, де вся магія відбувається завдяки JavaScript, який сховався всередині PDF.
Хочеш спробувати?
👉 Грати у Doom у PDF
І тепер головне питання: якщо роздрукувати цей PDF, чи буде працювати?
#fun #javascript #Doom
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
JavaScript Function та Function Expressions
Функція в JavaScript — це незалежний блок коду, який виконує певне завдання. Function Expression — це спосіб зберігати функції у змінних.
Що тут відбувається?
— Ми створили іменовану функцію
— Щоб викликати функції, використовується їх ім'я та дужки
Чим відрізняються функції?
— Іменовані функції (Named Functions): можна викликати до їхнього оголошення через hoisting.
— Function Expressions: не піднімаються (hoisted), тому їх можна викликати тільки після оголошення.
Функції — це основа програмування в JavaScript. Навчіться використовувати обидва підходи залежно від завдань! 😊
#javascript #functions
Code Ukraine
Функція в JavaScript — це незалежний блок коду, який виконує певне завдання. Function Expression — це спосіб зберігати функції у змінних.
Що тут відбувається?
— Ми створили іменовану функцію
greet() та function expression у змінній displayPI.— Щоб викликати функції, використовується їх ім'я та дужки
():greet() для іменованої функції.displayPI() для функції, збереженої у змінній.Чим відрізняються функції?
— Іменовані функції (Named Functions): можна викликати до їхнього оголошення через hoisting.
— Function Expressions: не піднімаються (hoisted), тому їх можна викликати тільки після оголошення.
Функції — це основа програмування в JavaScript. Навчіться використовувати обидва підходи залежно від завдань! 😊
#javascript #functions
Code Ukraine
Що таке
Приклад:
Після виконання в
Весь попередній вміст
Переваги
— Простота та швидкість. Одним рядком можна додати до елемента складний HTML-код.
— Динамічність. HTML-контент можна створювати програмно, наприклад, на основі даних з API.
Приклад:
Результат:
Чому
1. Уразливість до XSS-атак.
При роботі з
2. Перезапис старого вмісту.
3. Низька продуктивність із великими обсягами даних.
При кожному використанні
Чим замінити
1.
Якщо потрібно змінити лише текст (без HTML), використовуйте textContent. Це безпечніше, адже текст не інтерпретується як HTML.
2.
Цей метод дозволяє додавати HTML-код у конкретне місце елемента без перезапису всього вмісту.
3. DOM-методи
Для складної логіки краще створювати елементи через методи на кшталт
Порада
Якщо ви все ж вирішили використати
#простимисловами #html #javascript
innerHTML і чому інколи його краще не використовувати?innerHTML — це властивість JavaScript, яка дозволяє працювати з вмістом HTML-елементів. Простіше кажучи, за допомогою innerHTML можна отримати або змінити все, що знаходиться всередині HTML-тега: текст, інші теги, атрибути тощо.Приклад:
// Беремо елемент <div> зі сторінки
const div = document.getElementById("example");
// Встановлюємо його вміст
div.innerHTML = "<p>Привіт, я новий текст!</p>";
Після виконання в
<div id="example"> з’явиться:<p>Привіт, я новий текст!</p>.Весь попередній вміст
<div> (якщо він був) буде замінено.Переваги
innerHTML— Простота та швидкість. Одним рядком можна додати до елемента складний HTML-код.
— Динамічність. HTML-контент можна створювати програмно, наприклад, на основі даних з API.
Приклад:
const list = ["яблуко", "банан", "апельсин"];
document.getElementById("list").innerHTML = list.map(item => <li>${item}</li>).join("");
Результат:
<ul>
<li>яблуко</li>
<li>банан</li>
<li>апельсин</li>
</ul>
Чому
innerHTML не завжди варто використовувати?1. Уразливість до XSS-атак.
При роботі з
innerHTML ви вставляєте HTML-код у сторінку. Якщо код генерується на основі сторонніх даних (наприклад, від користувача або сервера), це може призвести до впровадження шкідливого коду.2. Перезапис старого вмісту.
innerHTML повністю замінює вміст елемента. Якщо елемент мав обробники подій (додані через addEventListener), вони будуть видалені.3. Низька продуктивність із великими обсягами даних.
При кожному використанні
innerHTML вся внутрішня структура елемента пересоздається, навіть якщо зміни мінімальні.Чим замінити
innerHTML?1.
textContentЯкщо потрібно змінити лише текст (без HTML), використовуйте textContent. Це безпечніше, адже текст не інтерпретується як HTML.
2.
insertAdjacentHTMLЦей метод дозволяє додавати HTML-код у конкретне місце елемента без перезапису всього вмісту.
3. DOM-методи
Для складної логіки краще створювати елементи через методи на кшталт
document.createElement та appendChild.Порада
Якщо ви все ж вирішили використати
innerHTML, переконайтеся, що дані, які ви вставляєте, безпечні та ретельно перевірені.#простимисловами #html #javascript
async і defer для керування скриптамиУ світі веб-розробки оптимізація часу завантаження сторінок має вирішальне значення. Два потужні атрибути тега
<script> - async і defer - можуть істотно вплинути на продуктивність сайту. Давайте почнемо з основ і дізнаємося, що роблять ці атрибути і коли їх слід використовувати.Подробиці.
#javascript #html
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
У цьому нам допоможе Flexx - набір інструментів, зроблених на чистому Python. Він дає змогу писати код графічних інтерфейсів просто на пітоні та на ходу генерувати JavaScript за допомогою транслятора PScript.
Дізнатися подробиці про можливості та вивчити інструкцію можна на сторінці проекту .
#інструменти #python #javascript #gui
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
🕞 Тривалість: 3:52:18
🔗 Посилання: https://www.youtube.com/watch?v=KHxX0CgMGs4
#курс #javascript
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
Якщо ви коли-небудь заходили на головну сторінку Node, то напевно бачили цей шматок коду з картинки. Це найпростіший веб-сервер, з якого сьогодні починається майже кожен сервер, написаний на JS. Так, це все може бути прикрито фреймворком, але, по суті, всі такі сервери роблять приблизно одне й те саме.
Але сьогодні існує більш сучасний спосіб створення сервера, якому не потрібно прив'язуватися до сокета. Про нього в цій статті.
#nodejs #javascript #бекенд
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
Зазвичай інтерпретовані мови, як Python або JavaScript, вважають повільнішими за компільовані (C, Rust). Але завдяки Just-In-Time (JIT) компіляції вони можуть значно прискорюватися. Як це працює? Розбираємося! 🔍
Що таке JIT-компіляція?
JIT-компіляція – це гібридний підхід між інтерпретацією та традиційною компіляцією.
🔹 Звичайна інтерпретація – код виконується рядок за рядком, що може бути повільним.
🔹 Звичайна компіляція – код заздалегідь перекладається у машинний код, що дає високу швидкість.
🔹 JIT-компіляція – код спочатку виконується як інтерпретований, але гарячі (часто використовувані) фрагменти перекладаються у машинний код під час роботи програми.
Результат? Висока швидкість виконання без втрати гнучкості!
1️⃣ Інтерпретатор запускає код і відстежує, які частини виконуються найчастіше.
2️⃣ Гарячий код передається JIT-компілятору, який перекладає його у машинний код.
3️⃣ Збережений машинний код використовується замість повторної інтерпретації.
🔁 Це дозволяє прискорювати роботу програм під час виконання!
Де використовується JIT?
Чи є недоліки?
🔹 Початкові затримки – JIT-компілятору потрібен час на аналіз та компіляцію.
🔹 Більше споживання пам’яті – збережений машинний код займає додатковий простір.
🔹 Складність реалізації – вбудовування JIT у мову вимагає серйозних оптимізацій.
Але виграш у швидкості для довготривалих процесів перекриває ці мінуси!
Висновок
JIT-компіляція – це магія, що дозволяє інтерпретованим мовам бути швидкими. Завдяки адаптивному підходу вони можуть спочатку бути гнучкими, а потім – продуктивними!
#програмування #JIT #компіляція #JavaScript #Java #Python
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Пориньте у JavaScript, створюючи 2D-гру з нуля. Цей безкоштовний курс допоможе вам опанувати основи програмування через практику.
#javascript #gamedev
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
#javascript #шпаргалка
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM
Runtime-compat — це інструмент, який дозволяє перевірити, які функції вашого коду підтримуються в різних середовищах виконання, а які — ні.
Запустіть його, і він покаже, що буде працювати, наприклад, з Node.js, а що доведеться переписати. Зараз інструмент підтримує Node.js, Deno, Bun, Cloudflare Workers та інші середовища виконання.
#інструменти #javascript
Code Ukraine
Please open Telegram to view this post
VIEW IN TELEGRAM