🎯 JavaScript မှာ Websites တွေကို Interactive ဖြစ်အောင် ဘယ်လိုလုပ်မလဲ?

JavaScript Lesson-15 မှာတော့ Event Listeners အကြောင်းကို အပြည့်အစုံ လက်တွေ့သင်ကြားပေးထားပါတယ်! ✨

▶️ YouTube Video Link

ဘာတွေသင်ရမလဲဆိုတော့...

🖱 Page Click Events - စာမျက်နှာအနှံ့ click ဖမ်းနည်း
🔘 Button Event Handling - querySelector() နဲ့ button control
📝 Inline onclick - Traditional event handling method
🗑 Event Removal - removeEventListener() အသုံးပြုနည်း
🚫 One-time Events - တစ်ခါတည်းသာ run မယ့် events

Event Listeners ကိုနားလည်ပီဆိုရင် Static Websites တွေကို Dynamic & Interactive Websites အဖြစ် ပြောင်းလဲတည်ဆောက်နိုင်မှာနော်! 💪

📂 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကိုပေးထားပါတယ် 👇
🔗 Source Code File
🔗 Note

#JavaScript #WebDevelopment #EventListeners

🌐 Real-world APIs တွေနဲ့ JSON Data ဘယ်လိုအလုပ်လုပ်လဲ?

JSON Lesson - 3 မှာတော့ APIs တွေနဲ့ JSON Data Fetching အကြောင်းကို အပြည့်အစုံ လက်တွေ့သင်ကြားပေးထားပါတယ်! 🚀

▶️ YouTube Video Link

ဘာတွေသင်ရမလဲဆိုတော့...

🛒 Fake Store API - Product data fetching & display
👥 Random User API - User information retrieval
🔗 Fetch API Usage - Modern JavaScript fetching techniques
📦 JSON Data Processing - API responses ကို process လုပ်နည်း
🎯 DOM Manipulation - Fetched data ကို webpage မှာပြသနည်း

📂 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကိုပေးထားပါတယ် 👇
🔗 Source Code File
🔗 Note
🔗 API links များ

API နဲ့ JSON ကိုနားလည်ပီဆိုရင် Real-world Web Applications တွေ တည်ဆောက်ဖို့ အခြေခံအုတ်မြစ်ခိုင်ခိုင်ရသွားပြီ! 💪

#JSON #API #JavaScript #WebDevelopment #FetchAPI

JavaScript Lesson 16 | Page Lifecycle Events အကြောင်း

ဒီ Lesson 16 မှာ Browser Page ရဲ့ Life Cycle အတွင်း ဖြစ်ပေါ်လာတဲ့ အဓိက Window Events တွေကို ဘယ်လိုထိန်းချုပ်ရမလဲဆိုတာကို ပြောပြပေးထားပါတယ်ဗျ။

▶️ YouTube Video Link

ဘာတွေသင်ရမလဲဆိုတော့...

🔹 Page Load ပြီးဆုံးချိန်မှာ အလုပ်လုပ်မယ့် Code တွေအတွက် window.onload နဲ့ onload attribute ကို အသုံးပြုပုံ။
🔹 Window အရွယ်အစားပြောင်းလဲတာကို Real-time ဖမ်းယူနိုင်ဖို window.onresize အသုံးပြုပုံ။
🔹 Scroll Event: User ရဲ့ Scroll ကို ခြေရာခံခြင်း။

🔥 လက်တွေ့: scroll event ကို သုံးပြီး Reading Progress Bar

📂 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကိုပေးထားပါတယ် 👇
🔗 Source Code File
🔗 Note

🔥 ဒီ Lesson ပြီးရင်...
သင့် Website တွေကို Responsive ဖြစ်အောင်နဲ့ User Interaction ကို ပိုမိုကောင်းမွန်အောင် လုပ်ဆောင်နိုင်မှာပါ။

#JavaScript #JSMynamar #WebDevelopment #PageLifecycle #WindowEvents #Programming #LearnJavaScript

🌐 Real-world APIs တွေနဲ့ JSON Data ဘယ်လိုအလုပ်လုပ်လဲ?

ဒီသင်ခန်းစာမှာ modern JavaScript ကိုအသုံးပြုပြီး JSON data တွေကို ဘေးကင်းလုံခြုံစွာ ဘယ်လို fetch လုပ်ရမလဲဆိုတာကို လေ့လာသွားမှာဖြစ်ပါတယ်။

Success ဖြစ်တာ၊ Error တက်တာနဲ့ Cleanup လုပ်ငန်းစဉ်တွေကို ကျွမ်းကျင်စွာ ကိုင်တွယ်နိုင်ဖို့ .then(), .catch(), နဲ့ .finally() တို့ စုပေါင်းအလုပ်လုပ်ပုံကို နားလည်သဘောပေါက်သွားစေရပါမယ် 🚀

▶️ YouTube Video Link

📂 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကိုပေးထားပါတယ် 👇
🔗 Source Code File
🔗 Note
🔗 API links များ

API နဲ့ JSON ကိုနားလည်ပီဆိုရင် Real-world Web Applications တွေ တည်ဆောက်ဖို့ အခြေခံအုတ်မြစ်ခိုင်ခိုင်ရသွားပြီ! 💪

#JSON #JavaScript #FetchAPI #AsyncJS

ဒီ Lesson 17 မှာ JavaScript Keyboard Events တွေကို အသုံးပြုပြီး Note app တွေ၊ Chat app တွေမှာ မြင်နေရတဲ့ Keyboard shortcut တွေ၊ Auto-expanding textarea တွေကို ကိုယ်တိုင် ဘယ်လို ရေးရမလဲဆိုတာ လေ့လာရမှာဖြစ်ပါတယ်ဗျ။

▶️ YouTube Video Link

ဘာတွေသင်ရမလဲဆိုတော့...

🔹 keydown vs keyup
🔹 event.key: ကိုယ်နှိပ်လိုက်တဲ့ Key တွေကို ဘယ်လို Detect လုပ်မလဲ။
🔹 Modifier Keys: Shift, Ctrl နဲ့ Alt Key တွေကို အသုံးပြုနည်း။
🔹 Keyboard Shortcuts: Ctrl + Enter လိုမျိုး Shortcut တွေ ဖန်တီးနည်း။

📂 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကိုပေးထားပါတယ် 👇

🔗 Source Code File
🔗 Note File

🔥 သီအိုရီတွေချည်းပဲ မဟုတ်ဘဲ လက်တွေ့ Project တစ်ခုကို တိုတိုရှင်းရှင်း Code တွေနဲ့ အတူတူ တည်ဆောက်သွားမှာ ဖြစ်လို့ JavaScript Beginner တွေအတွက် အသင့်တော်ဆုံးပါပဲ။ 🚀

#JavaScript

JavaScript မှာ == နဲ့ === ဘယ်အချိန်မှာ ဘယ်ဟာသုံးမလဲ? 🧐

JS ရေးတဲ့အခါ အဖြစ်များဆုံး Bug တွေက ဒီ Comparison တွေကနေ စတတ်ပါတယ်။

🔹 Double Equals (==): သူက "Loose Equality" ပါ။ Value တူရင် ရပြီဆိုပြီး လက်ခံတယ်။ ဥပမာ - 5 == "5" ဆိုရင် true လို့ ထွက်ပါတယ်။ သူက Data Type မတူရင်တောင် အတင်းတူအောင် ညှိပြီး စစ်ပေးတာ (Type Coercion) ကြောင့်ပါ။

🔹 Triple Equals (===): သူက "Strict Equality" ပါ။ ပိုပြီး စည်းကမ်းကြီးပါတယ်။ Value ရော Data Type ပါ တူမှ true ပေးတာပါ။ ဥပမာ - 5 === "5" ဆိုရင် false လို့ပဲ ထွက်ပါလိမ့်မယ်။ (Number နဲ့ String မို့လို့ပါ)

✅ Recommendation: Coding Standard အရ Bug ကင်းပြီး ပိုမိုတိကျစေဖို့ === ကိုပဲ အမြဲတမ်း သုံးဖို့ အကြံပေးချင်ပါတယ်!

အသေးစိတ်ကို YouTube မှာ video တင်ပေးထားပါတယ်ဗျ။ 👉 https://youtu.be/fperb5XeUbk

မိတ်ဆွေတို့ကရော ဘယ်တစ်ခုကို ပိုသုံးဖြစ်လဲ? မသိသေးတဲ့ သူငယ်ချင်းတွေရှိရင်လည်း Forward လုပ်ပေးလိုက်ပါဦးနော်! ✨

#Tech4U #JavaScript #WebDevelopment #ProgrammingTips #MyanmarDev

ဒီ Lesson 18 မှာ JavaScript Form Events တွေကို အသုံးပြုပြီး Web Form တွေမှာ User ရိုက်ထည့်လိုက်တဲ့ Data တွေကို Real-time ဘယ်လို ဖမ်းမလဲ၊ Input box တွေရဲ့ UI ကို Event တွေနဲ့ ဘယ်လို ထိန်းချုပ်မလဲဆိုတာ လေ့လာရမှာ ဖြစ်ပါတယ်ဗျ။

▶️ YouTube Video Link

ဘာတွေသင်ရမလဲဆိုတော့...

🔹 input event: စာရိုက်နေစဉ်မှာတင် အချက်အလက်တွေကို Real-time ဖော်ပြနည်း။
🔹 change event: Input တန်ဖိုး ပြောင်းလဲသွားမှုကို ဘယ်လို Detect လုပ်မလဲ။
🔹 focus event: Input box ကို နှိပ်လိုက်တဲ့အခါ Background color ပြောင်းလဲအောင် ဖန်တီးနည်း။
🔹 Event Listeners: Form elements တွေနဲ့ JavaScript ကို ချိတ်ဆက်အသုံးပြုပုံ။

📁 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကို ပေးထားပါတယ် 👇

🔗 Source Code File

🔥 သီအိုရီတွေချည်းပဲ မဟုတ်ဘဲ လက်တွေ့ Code တွေနဲ့ အတူတူ တည်ဆောက်သွားမှာ ဖြစ်လို့ JavaScript Beginner တွေအတွက် အသင့်တော်ဆုံးပါပဲ။ 🚀

#JavaScript #WebDevelopment #Tech4U #FormEvents

🔥 Async / Await with JSON (Modern JavaScript)

ဒီသင်ခန်းစာမှာ modern JavaScript ရဲ့ async / await ကိုအသုံးပြုပြီး API ကနေ JSON data တွေကို သန့်ရှင်းသပ်ရပ်စွာ ဘယ်လို fetch လုပ်ရမလဲဆိုတာကို လေ့လာသွားမှာဖြစ်ပါတယ်။

ယခင်သုံးနေကျ .then() syntax တွေအစား ပိုမိုခေတ်မီတဲ့ ရေးထုံးတွေနဲ့ အစားထိုးပုံအပြင် try...catch ကိုအသုံးပြုပြီး Error တွေကို စနစ်တကျ ကိုင်တွယ်ပုံကိုပါ ရှင်းပြပေးထားပါတယ်ဗျ 🚀

▶️ YouTube Video Link

📁 Source Code ကို Download ရယူရန် အောက်မှာ telegram channel ကို ပေးထားပါတယ်။ 👇
🔗 Source Code File
🔗 Note
🔗 API links များ

API နဲ့ JSON ကိုနားလည်ပြီဆိုရင် Real-world Web Applications တွေ တည်ဆောက်ဖို့ အခြေခံအုတ်မြစ်ခိုင်ခိုင်ရသွားပြီ! 💪

#JSON #JavaScript #FetchAPI #AsyncJS #ModernJS

ဒီ video မှာ JavaScript Form Events တွေကို လက်တွေ့အသုံးချပြီး Web Form တစ်ခုမှာ User ရဲ့ လုပ်ဆောင်ချက်တွေကို ဘယ်လို Control လုပ်မလဲဆိုတာ လေ့လာရမှာ ဖြစ်ပါတယ်။ အထူးသဖြင့် Form Validation နဲ့ User Interaction ပိုင်းအတွက် အသုံးဝင်တဲ့ Event တွေကို Project အသေးလေးတစ်ခုနဲ့ လက်တွေ့ ရှင်းပြပေးထားပါတယ်။

▶️ YouTube Video Link

📁 Source Code ကို Download ရယူရန် 👇

🔗 Source Code File

#JavaScript #WebDevelopment #FormEvents #Tech4U #CodingMyanmar #BeginnerProject

🖱 Neodrag: Framework အစုံမှာ သုံးလို့ရတဲ့ Drag-and-Drop Library အသစ်!

Frontend Developer တွေအတွက် Project တိုင်းမှာ Framework မတူပေမဲ့ Drag-and-drop feature ထည့်ချင်ရင် Library တစ်ခုတည်းနဲ့ အကုန်ဖြေရှင်းလို့ရမယ့် Neodrag အကြောင်း ဖြစ်ပါတယ်ဗျ။

💡 ဘာတွေ ထူးခြားလဲ?

🔹Multi-Framework: React, Svelte, Vue, SolidJS နဲ့ Vanilla JS အထိ အကုန်လုံးမှာ Support လုပ်ပါတယ်။
🔹Ultra Lightweight: Bundle size က 3.46KB ပဲရှိလို့ Website ကို လေးမသွားစေပါဘူး။
🔹Consistent Logic: Framework တွေသာ ကွဲသွားမယ်၊ အလုပ်လုပ်ပုံ (Core logic) က အတူတူပဲမို့ သင်ယူရတာ လွယ်ကူပါတယ်။
🔹Developer Friendly: TypeScript support အပြည့်ပါတယ်၊ SSR (Server-Side Rendering) နဲ့လည်း အဆင်ပြေပြေ အလုပ်လုပ်ပါတယ်။

Framework တစ်ခုချင်းစီအတွက် Library အသစ်တွေ လိုက်ရှာစရာမလိုတော့ဘဲ ဒီတစ်ခုတည်းနဲ့တင် အလုပ်ပြီးသွားမှာပါဗျာ။

အသေးစိတ်ကို ဒီမှာ လေ့လာနိုင်ပါတယ်-
🔗 https://api.daily.dev/r/ub4hasyqC

#Tech4u #Neodrag #JavaScript #FrontendDev #WebDevelopment #ReactJS #VueJS #Svelte #OpenSource #MyanmarDevs

Developer တိုင်း သိထားသင့်တဲ့ NPM အကြောင်း🔥

Web Development ကို လေ့လာတဲ့အခါ Library တွေ၊ Tool တွေကို တစ်ခုချင်းစီ လိုက်ရှာပြီး ဒေါင်းနေရတာ အချိန်ကုန်သလို စိတ်ပျက်စရာလည်း ကောင်းပါတယ်... 😫

ဒီပြဿနာကို NPM (Node Package Manager) က ဘယ်လို အစွမ်းထက်ဆုံး ဖြေရှင်းပေးလိုက်သလဲ?

ဒီနေ့မှာတော့ Developer တစ်ယောက် သိထားသင့်တဲ့ NPM ရဲ့ အလုပ်လုပ်ပုံ Flow တစ်ခုလုံးကို နားလည်လွယ်ဆုံး ပုံစံနဲ့ စုစည်းဖော်ပြပေးလိုက်ပါတယ်။

📌 အပြည့်အစုံဖတ်ရန်
📌 PDF file နဲ့ဖတ်ရန်

#Tech4UMyanmar #NPM #WebDevelopment #NodeJS #Programming #JavaScript

JavaScript လေ့လာနေသူတွေအတွက် Tools (၄) မျိုး

Coding ရေးတဲ့အခါ အချိန်ကုန်သက်သာစေဖို့နဲ့ Professional တစ်ယောက်လို သေသပ်တဲ့ Code တွေ ထွက်လာဖို့ဆို ဒီ Tool တွေကို သုံးကြည့်ပါဗျ။ 💻🚀

#Tech4U #JavaScript #JS #CodingTools #WebDevelopment

Real-time Web App တွေမှာ HTTP အစား ဘာလို့ WebSockets ကို သုံးကြတာလဲ? 🤔🔌

Chat applications တွေ၊ Online gaming တွေနဲ့ Live notifications တွေလိုမျိုး Data အချက်အလက်တွေကို ချက်ချင်း Real-time ပြောင်းလဲပေးဖို့ လိုအပ်တဲ့အခါ WebSockets က မရှိမဖြစ် အရေးပါလာပါတယ်။ ⚡️📱

ပုံမှန် HTTP Request/Response ပုံစံမျိုးမဟုတ်ဘဲ Client ကော Server ပါ တစ်ချိန်တည်းမှာ အပြန်အလှန် Message တွေ အချိန်မရွေး ပို့နိုင်တဲ့ Full-duplex Communication Channel ကို WebSockets က ဘယ်လိုဖန်တီးပေးလဲဆိုတာ ပုံလေးတွေထဲမှာ ရှင်းပြပေးထားပါတယ်ဗျာ။

📌 အပြည့်အစုံဖတ်ရန်
📌 PDF file နဲ့ဖတ်ရန်

#JavaScript #WebSockets #WebDevelopment #CodingMyanmar