Myanmar Coder Guide

Course Outline from w3school.com

Sunday, November 22, 2020

JS Introduction

ဒီပေ့မှာ‌တော့ JavaScript နဲဘာတွေလုပ်နိုင်တယ်ဆိုတာကို လေ့လာသွားမှာဖြစ်ပါတယ်။

JavaScript Can Chang HTML Content

JavaScript Methods တွေထဲကအသုံးအများဆုံး Method တစ်ခုကတော့ getElementById("id") ဘဲဖြစ်ပါတယ်။

ဒီ Method ကတော့ ("id") အတွင်းမှာထည့်ထားတဲ့ id ကို Select လုပ်လိုက်တာဘဲ ဖြစ်ပါတယ်။ နောက်အပိုင်းတွေမှာ ပိုမိုလေ့လာရပါဦးမယ်။

Example Code

document.getElementById("demo").innerHTML = "Hello JavaScript";
Try it Yourself !

Code ရှင်းလင်းချက်

  1. decument.getElementById("demo") ဟာ လက်ရှိ Document ထဲက Id = demo ဖြစ်တဲ့ Element ကို Select လုပ်လိုက်တာ ဘဲဖြစ်ပါတယ်။
  2. innerHTML = "Hello JavaScript";ဆိုတာကတော့ HTML Content တွေကို ပြောင်းချင်တဲ့အခါမှာ အသုံးပြုရမယ့် Code ဖြစ်ပါတယ်။ Select လုပ်ထားတဲ့ Html Element ထဲမှာ ဘာတွေဘဲ ရှိရှိ = နောက်မှာရေးထားတဲ့ဟာတွေကို အစားထိုးသွားပါလိမ့်မယ်။
  3. ; ကတော့ ကုတ်တစ်ကြောင်းဆုံးတိုင်း ထည့်ပေးရမှာ ဖြစ်ပါတယ်။
  4. . ကတော့ ကုတ်တွေရဲ့ အစီစဉ်ကို ဆက်ပေးတာ ဖြစ်ပါတယ်။

JavaScript မှာ Double quotes (") ရော Single quote (') ပါ အတူတူအလုပ်လုပ်ပါတယ်။

Example Code

document.getElementById('demo').innerHTML = 'Hello JavaScript';

ဒါဟာ အပေါ်က Example Code နဲ့ အတူတူဘဲ အလုပ်လုပ်ပါလိမ့်မယ်။


JavaScript can change HTML Attribute Value

အောက်က ဥပမာကတော့ <img> element ရဲ့ src (Source) Attribute ကို ပြောင်းလဲ ပြထားတာဖြစ်ပါတယ်။

Code တွေကိုလေ့လာကြည့်လို နားမလည်သေးရင်လည်း စိတ်မပူပါနဲ့။ ဒီပေ့မှာ ဘာတွေလုပ်နိုင်တယ်ဆိုတာကို ပြောပြတာ ဖြစ်ပါတယ်။ ဘယ်လိုလုပ်ရတယ် ဆိုတာကို မပြောပြသေးပါဘူး။

Example

In this case JavaScript changes the value of the src (source) attribute of an image.

Try it Yourself !

JavaScript Can change HTML Style (CSS)

JavaScript နှင့် Css Style တွေကို ပြောင်းလဲနိုင်ပါတယ်။ CSS Style တွေကို ပြောင်းလဲလိုတဲ့အခါ .style.cssAttribute = "CSS Value" ကို အသုံးပြုရပါတယ်။

အသေးစိတ်ကို နောက်အခန်းတွေမှာ လေ့လာရဦးမှာပါ၊

JavaScript can be change font-size.

Example

JavaScript Can Change Font Size

This is my original Font Size.

Try it Yourself !

JavaScript can be hide HTML Element.

Example

JavaScript Can Hide HTML Element

This is my original Content.

Try it Yourself !

JavaScript can be show HTML Element.

Example

JavaScript Can Show HTML Element

Try it Yourself !

No comments:

Post a Comment