Last active
August 15, 2025 04:53
-
-
Save sunmeat/1708b33e8c089158994ea1e5b09f0e30 to your computer and use it in GitHub Desktop.
callbacks javascript example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Приклад на колбеки</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', Courier, monospace; | |
| background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); | |
| color: #00ffe5; | |
| padding: 3rem; | |
| line-height: 1.6; | |
| } | |
| h1, h2 { | |
| text-align: center; | |
| color: #ff0077; | |
| text-shadow: 2px 2px 5px #000; | |
| } | |
| section { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid #00ffe5; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| margin: 2rem 0; | |
| box-shadow: 0 0 20px #00ffe5; | |
| } | |
| pre { | |
| background: #111; | |
| color: #0ff; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-size: 1rem; | |
| } | |
| button { | |
| background-color: #ff0077; | |
| border: none; | |
| padding: 0.8rem 2rem; | |
| color: white; | |
| font-size: 1rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| display: block; | |
| margin: 1rem auto 0; | |
| } | |
| button:hover { | |
| background-color: #00ffe5; | |
| color: #111; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h2>Запікаємо качку!</h2> | |
| <pre><code id="duck"></code></pre> | |
| <button onclick="startDuckCooking()">Приготувати качку</button> | |
| </section> | |
| <section> | |
| <h2>Зв'язуємося з іншою Планетою</h2> | |
| <pre><code id="planet"></code></pre> | |
| <button onclick="startSignal()">Відправити сигнал</button> | |
| </section> | |
| <script> | |
| // йменована функція як колбек | |
| function finishCookingDuck() { | |
| document.getElementById('duck').textContent += '\nКачка готова! До столу!'; | |
| } | |
| function bakeDuck(callback) { | |
| document.getElementById('duck').textContent = 'Качка в духовці... Трохи почекаємо...'; | |
| setTimeout(() => { | |
| callback(); // виклик переданої функції | |
| }, 3000); | |
| } | |
| function startDuckCooking() { | |
| bakeDuck(finishCookingDuck); // передаємо іменовану функцію | |
| } | |
| // лямбда-функція як колбек | |
| function sendSignal(callback) { | |
| document.getElementById('planet').textContent = 'Відправляємо сигнал у космос...'; | |
| setTimeout(() => { | |
| callback('Нема відповіді, може це й на краще.'); | |
| }, 5000); | |
| } | |
| function startSignal() { | |
| sendSignal((response) => { // лямбда як параметр | |
| document.getElementById('planet').textContent += `\n${response}`; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment