JavaScript Variables

JavaScript variable များသည် data တန်ဖိုးများသိုလှောင်ရန်ကွန်တိန်နာများဖြစ်သည်။

ဤဥပမာတွင် x, y နှင့် z တို့သည် variable များဖြစ်သည်။ var keyword ဖြင့်ကြေငြာသည်။

Example

1. var x = 5 ;
2. var y = 6 ;
3. var z = x + y ;

Try it Yourself »

အပေါ်ကဥပမာကနေ သင်သိနိုင်ပါတယ်-

x ကတန်ဖိုး 5 သိုလှောင်သည်

y ကတန်ဖိုး 6 သိုလှောင်သည်

z တန်ဖိုးကို 11 သိုလှောင်ပါသည်

---

Using let and const (ES6)

၂၀၁၅ မတိုင်မီတွင် var keyword သည် Javascript variable တစ်ခုကိုကြေငြာရန်တစ်ခုတည်းသောနည်းလမ်းဖြစ်သည်။

၂၀၁၅ ၏ JavaScript version (ES6) သည် const keyword ကို အသုံးပြု၍ ပြန်လည် သတ်မှတ်၍ မရသော variable တစ်ခုကိုအသုံးရန်ခွင့်ပြုသည်။ let keyword ကို ကန်သက်နယ်ပယ်နှင့်အတူ variable ကိုသတ်မှတ်သည်၊၊

ဤသော့ချက်စာလုံးများ၏ခြားနားချက်ကိုဖော်ပြရန်အနည်းငယ်ရှုပ်ထွေးပြီး၎င်းသည်အဟောင်းများကို browser (ဘရောက်ဆာ) များတွင်အထောက်အပံ့မပေးသောကြောင့်ယခုသင်ခန်းစာ၏ပထမအပိုင်းသည် var ကိုအများဆုံးအသုံးပြုလိမ့်မည်။

Safari 10 နှင့် Edge 14 တို့သည် ES6 ကိုအပြည့်အဝထောက်ခံသည့်ပထမဆုံး browser များဖြစ်သည်။

Chrome 58	Edge 14	Firefox 54	Safari 10	Opera 55
Jan 2017	Aug 2016	Mar 2017	Jul 2016	Aug 2018

---

Much Like Algebra

ဤဥပမာတွင် price1, price2 နှင့် total တို့သည် variable များဖြစ်သည်။

Example

1. var price1 = 5 ;
2. var price2 = 6 ;
3. var total = price1 + price2 ;

Try it Yourself »

ပရိုဂရမ်တွင်၊ အက္ခရာသင်္ချာနည်းတူကျွန်ုပ်တို့သည်တန်ဖိုးများကိုထိန်းရန် variable များ (price1) ကဲ့သို့ အသုံးပြုသည်။

ပရိုဂရမ်တွင်၊ အက္ခရာသင်္ချာကဲ့သို့ပင်ကျွန်ုပ်တို့သည် variable များကို (total = price1 + price2) အစားတွင်းနည်းဖြစ်အသုံးပြုသည်။

JavaScript variable များသည် data တန်ဖိုးများသိုလှောင်ရန်ကွန်တိန်နာများဖြစ်သည်။

---

JavaScript သတ်မှတ်ချက်များ

Javascript variable များကိုအားလုံးသောအမည်များဖြင့်သတ်မှတ်ရမည်။

အမည်သတ်မှတ်ရာတွင် (x နှင့် y) ကဲ့သို့တိုတောင်းသောအမည်များ(သို့မဟုတ်) ပို၍ (age, sum, totalVolume)ဖော်ပြနိုင်သောအမည်များလဲဖော်ပြနိုင်သည်။

• အမည်များတွင်အက္ခရာများ၊ ဂဏန်းများ၊ _ နှင့် $ သင်္ကေများပါ ၀ င်နိုင်သည်။
• အမည်များကိုစာလုံးဖြင့်စတင်ရမည်။
• အမည်များကို $ နှင့် _ တို့ဖြင့်လည်းစတင်နိုင်သည် (သို့သော်၎င်းကိုကျွန်ုပ်တို့သင်ခန်းစာတွင်သုံးမည်မဟုတ်ပါ)။
• အမည်များသည်စာလုံးအကြီးအသေးအရေးကြီးသည် (y နှင့် Y သည်ကွဲပြားခြားနားသော variable များဖြစ်သည်)။
• JavaScript keywords များကိုအမည်များအဖြစ်အသုံးမပြုနိုင်ပါ။

JavaScript အမှတ်အသားများသည်စာလုံးအကြီးအသေးအရေးကြီးသည်။

---

The Assignment Operator

JavaScript တွင်(=)သင်္ကေတသည် "assignment" operator ဖြစ်သည်။"equal to" operator မဟုတ်ပါ။

၎င်းသည်အက္ခရာသင်္ချာနှင့်ကွဲပြားခြားနားသည်။အောက်ပါတို့သည်အက္ခရာသင်္ချာတွင်အဓိပ္ပာယ်မရှိပါ။

1. var  x = x + 5 ;

သို့သော်၊ JavaScript တွင်၎င်းသည်ပြီးပြည့်စုံသောအဓိပ္ပာယ်ရှိသည် - ၎င်းသည် x + 5 ၏တန်ဖိုးကိုသတ်မှတ်သည်။

(၎င်းသည် x + 5 ၏တန်ဖိုးကိုတွက်ချက်ပြီးရလဒ်ကို x သို့ထည့်သည်။ x ၏တန်ဖိုးသည် ၅ တိုးသည်။ )

"equal to" အော်ပရေတာကို JavaScript မှာ == လိုရေးထားတယ်။

---

JavaScript Data Types

JavaScript variable များသည်နံပါတ် ၁၀၀ နှင့် "John Doe" ကဲ့သို့စာသားတန်ဖိုးများကိုထည့်နိုင်သည်။

ရိုဂရမ်းမင်းတွင်စာသားတန်ဖိုးများကို text strings ဟုခေါ်သည်။

JavaScript သည်အချက်အလက်များစွာကိုကိုင်တွယ်နိုင်သော်လည်း၊ ယခုအချိန်တွင် number များနှင့် string များကိုသာစဉ်းစားပါ။

Strings တွေကို Quotes နှစ်ခု (သို့) တစ်ခုတည်းမှာရေးထားတယ်။number များကိုဒီတိုင်းရေးနိုင်သည်။

Quotes များတွင်းရေးသားပါက text strings ဖြစ်သွားသည်း။

Example

1. var pi = 3.14 ;
2. var person = "John Doe" ;
3. var answer = 'Yes I am!' ;

Try it Yourself »

Declaring (Creating) JavaScript Variables

Javascript မှာ variable တစ်ခုကိုလုပ်တာက "declaring" လို့ခေါ်တယ်။

var variable ကို သုံး၍ JavaScript variable ကိုကြေငြာသည်။

Example

1. var carName ;

ကြေငြာချက်အပြီးတွင် variable သည်တန်ဖိုးမရှိပါ။ (နည်းပညာပိုင်းတွင် undefined ၏တန်ဖိုးရှိသည်)

သင်ကြေငြာသည့်အခါ variable သို့တန်ဖိုးတစ်ခုသတ်မှတ်နိုင်သည်။

Variable ကိုတန်ဖိုးသတ်မှတ်ဖို့အတွက် equal(=)သင်္ကေတကိုသုံးပါ။

Example

1. var carName = "Volvo" ;

အောက်ကဥပမာမှာ carName လို့ခေါ်တဲ့ variable တစ်ခုကိုဖန်တီးပြီး "Volvo" တန်ဖိုးကိုသတ်မှတ်ပေးတယ်။

ထို့နောက် id = "demo" ဖြင့် HTML စာပိုဒ်တစ်ခုအတွင်းရှိတန်ဖိုးကို "output" လုပ်သည်။

Example

1. < p id = "demo">< /p>;


2. <script>
3. var carName = "Volvo" ;
4. document.getElementById("demo" ).innerHTML = carName;
5. </script>

Try it Yourself »

၎င်းသည် script ၏အစတွင် variable များအားလုံးကိုကြေငြာရန်ကောင်းမွန်သော program တစ်ခုဖြစ်သည်။

One Statement, Many Variables

variable တစ်ခုကိုများစွာသောကြေညာချက်တစ်ခုမှာကြေငြာနိုင်ပါတယ်။

ကြေငြာချက်ကို var နှင့်စတင်ပါ၊၊variable တွေကိုကော်မာနဲ့ခွဲပါ။

Example

1. var person = "John Doe" , carName = "Volvo" , price = 200 ;

Try it Yourself »

ကြေငြာချက်တစ်ခုသည်စာကြောင်းများစွာကိုသက်ရောက်နိုင်သည်။

Example

1. var person = "John Doe" ,
2. carName = "Volvo" ,
3. price = 200 ;

Try it Yourself »

---

Value = undefined

ကွန်ပျူတာပရိုဂရမ်များတွင် variable များကိုတန်ဖိုးမရှိဘဲကြေငြာသည်။ ဒီတန်ဖိုးဟာတွက်ချက်ရမယ့်အရာဒါမှမဟုတ် user inputလိုနောက်ပိုင်းမှာပေးမယ့်အရာဖြစ်နိုင်ပါတယ်။

တန်ဖိုးမပါပဲကြေငြာထားသော variable တစ်ခုသည် undefined ဖြစ်သည်။

carName variable သည်ဤဖော်ပြချက်အရ undefined ဖြစ်သည်။

Example

1. var carName ;

Try it Yourself »

---

Re-Declaring JavaScript Variables

အကယ်၍ သင်သည် JavaScript variable ကိုပြန်လည်ကြေငြာပါက၎င်းသည်၎င်း၏တန်ဖိုးကိုဆုံးရှုံးမည်မဟုတ်ပါ။

ဤထုတ်ပြန်ချက်များကိုထုတ်ပြန်ပြီးနောက် carName variable သည် "Volvo" တန်ဖိုးကိုဆက်လက်ရှိနေ ဦး မည်။

Example

1. var carName = "Volvo" ;
2. var carName ;

Try it Yourself »

---

JavaScript Arithmetic

အက္ခရာသင်္ချာနည်းတူဂဏန်းသင်္ချာကို JavaScript variable များဖြင့်လည်းလုပ်နိူင်သည်။ = and + ကဲ့သို့သောအော်ပရေတာများကိုသုံးနိုင်သည်။

Example

1. var carName ;

Try it Yourself »

Example

1. var x = 5 + 2 + 3 ;

Try it Yourself »

strings တွေကိုလည်းထပ်ထည့်လို့ရသေးတယ်။

Example

1. var x = "John" + " " + "Doe" ;

Try it Yourself »

ဒါကိုစမ်းကြည့်ပါ ဦး ။

Example

1. var x = "5" + 2 + 3 ;

Try it Yourself »

အကယ်၍ သင်သည်နံပါတ်တစ်ခုကို quotes ထဲထည့်ထားပါကကျန်နံပါတ်များကို string များအဖြစ်သတ်မှတ်ပြီး concatenated ဖြစ်သည်။

အခုစမ်းကြည့်ပါ။

Example

1. var x = 2 + 3 + "5" ;

Try it Yourself »

---

JavaScript Dollar Sign $

JavaScript identifiers (names) ကနေစရမယ်ဆိုတာသတိရပါ။

A letter (A-Z or a-z)

A dollar sign ($)

Or an underscore (_)

JavaScript သည်$ကိုစာတစ်စောင်အဖြစ်သတ်မှတ်သောကြောင့်, $ ပါ ၀ င်သည့်အမှတ်အသားများသည်တရားဝင် variable name များဖြစ်သည်။

Example

1. var $$$ = "Hello World" ;
2. var $ = 2;
3. var $myMoney = 5;

Try it Yourself »

ဒေါ်လာသင်္ကေတကိုအသုံးပြုခြင်းသည် JavaScript တွင်အသုံးမများပါ၊ သို့သော်ပရော်ဖက်ရှင်နယ်ပရိုဂရမ်မာများက၎င်းကို JavaScript library ရှိအဓိကလုပ်ဆောင်ချက်အတွက် alias အဖြစ်သုံးလေ့ရှိသည်။

ဥပမာအားဖြင့်၊ Java library jQuery တွင်၊ HTML element များကိုရွေးချယ်ရန်အဓိက function $ ကိုသုံးသည်။ jQuery $ ("p"); ဆိုလိုသည်မှာ "select all p elements" ကိုဆိုလိုသည်။

---

JavaScript Underscore (_)

JavaScript သည် underscore ကိုစာတစ်စောင်အဖြစ်သတ်မှတ်သောကြောင့် _ ပါ ၀ င်သည့် identifiers များသည်မှန်ကန်သော variable အမည်များဖြစ်သည်။

Example

1. var _lastName = "Johnson" ;
2. var _x = 2;
3. var _100 = 5;

Try it Yourself »

JavaScript ကို underscore ကိုအသုံးမပြုပါ။ သို့သောပရိုဂရမ်မာများအကြားသဘောတူညီမှုသည်၎င်းကို "private (hidden)" variable များအတွက် alias အဖြစ်အသုံးပြုရန်ဖြစ်သည်။

---

CSS background-origin Property

Example

အကြောင်းအရာရဲ့ဘယ်ဘက်အပေါ်ထောင့်ကနေနောက်ခံပုံကိုစဖွင့်ပါ။

1. #example1{
2.     border: 10px dashed black;
3.     padding: 25px;
4.     background-img: url("paper.gif");
5.     background-repeat: on-repeat;
6.     background-origin: content-box;
7. }

Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
background-orngin	4.0	9.0	4.0	3.0	10.5

CSS Syntax

background-origin: padding-box|border-box|content-box|initial|inherit;

Property Values

Value	Description
padding-box	Default value. The background image starts from the upper left corner of the padding edge
border-box	The background image starts from the upper left corner of the border
content-box	The background image starts from the upper left corner of the content
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

1. #example1{
2.     border: 10px dashed black;
3.     padding: 25px;
4.     background-img: url("mountain.jpg"), url(paper.gif);
5.     background-repeat: on-repeat;
6.     background-size: auto;
7. }
8. #example2{
9.     padding: 25px;
10.     background-img: url("paper.gif");
11.     background-repeat: on-repeat;
12.     background-origin: content-box, padding-box;
13. }

Try it Yourself »

CSS background-clip Property

Example

နောက်ခံပုံရဲ့အရွယ်အစားကို "auto" နဲ့ pixels တွေသတ်မှတ်နိုင်ပါသည်။

1. div{
2.     border : 10px dottet black ;
3.     padding : 15px ;
4.     background: lightblue ;
5.     background-clip : padding-box ;
6. }

Try it Yourself »

Definition and Usage

Background-clip property က element တစ်ခုအတွင်း၌နောက်ခံ (အရောင် (သို့) ရုပ်ပုံ) ဘယ်လောက်ထိတိုးချဲ့သင့်သည်ကိုသတ်မှတ်သည်။

Default value:	auto
Inherited:	no
Animatable:	no
Version:	CSS3
JavaScript syntax:	object.style.backgroundSize="60px 120px"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
background-clip	4.0	9.0	4.0	3.0	10.5

CSS Syntax

background-clip: border-box|padding-box|content-box|initial|inherit;

Property Values

Value	Description
border-box	Default value. The background extends behind the border
padding-box	The background extends to the inside edge of the border
content-box	The background extends to the edge of the content box
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

CSS background-size Property

Example

နောက်ခံပုံရဲ့အရွယ်အစားကို "auto" နဲ့ pixels တွေသတ်မှတ်နိုင်ပါသည်။

1. #example1{
2.     background-img: url("mountain.jpg");
3.     background-repeat: on-repeat;
4.     background-size: auto;
5. }
6. #example2{
7.     background-img: url("mountain.jpg");
8.     background-repeat: on-repeat;
9.     background-size: 300px 100px;
10. }

Try it Yourself »

Definition and Usage

Background-size property ကနောက်ခံပုံတွေရဲ့အရွယ်အစားကိုသတ်မှတ်ပါတယ်။ သင်သုံးနိုင်သောကွဲပြားခြားနားသော syntaxes ၄ ခုရှိသည်။ ("auto", "cover" နှင့် "contain")၊ one-value syntax (ပုံ၏အကျယ်ကိုသတ်မှတ်သည် (အမြင့်သည် "auto")၊ two-value syntax (ပထမတန်ဖိုး : ပုံအကျယ်၊ ဒုတိယတန်ဖိုး : အမြင့်)သတ်မှတ်နိုင်သည်။

Default value:	auto
Inherited:	no
Animatable:	yes
Version:	CSS3
JavaScript syntax:	object.style.backgroundSize="60px 120px"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

CSS Syntax

background-size: auto|length|cover|contain|initial|inherit;

Property Values

Value	Description
auto	Default value. The background image is displayed in its original size
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto".
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover	Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain	Resize the background image to make sure the image is fully visible
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

နောက်ခံပုံ၏ရာခိုင်နှုန်းကိုသတ်မှတ်ပါ။

1. #example1{
2.     background-img: url("mountain.jpg");
3.     background-repeat: on-repeat;
4.     background-size: 100% 100%;
5. }
6. #example2{
7.     background-img: url("mountain.jpg");
8.     background-repeat: on-repeat;
9.     background-size: 75% 50%;
10. }

Try it Yourself »

Example

နောက်ခံပုံရဲ့အရွယ်အစားကို "cover" နဲ့သတ်မှတ်ပါ။

1. #example1{
2.     background-img: url("mountain.jpg");
3.     background-repeat: on-repeat;
4.     background-size: cover;
5. }

Try it Yourself »

Example

နောက်ခံပုံရဲ့အရွယ်အစားကို "contain" နဲ့သတ်မှတ်ပါ။

1. #example1{
2.     background-img: url("mountain.jpg");
3.     background-repeat: on-repeat;
4.     background-size: contain;
5. }

Try it Yourself »

Example

နောက်ခံပုံရဲ့အရွယ်အစားကို "cover" နဲ့သတ်မှတ်ပါ။

1. #example1{
2.     background-img: url("mountain.jpg");
3.     background-repeat: on-repeat;
4.     background-size: contain,cover;
5. }

Try it Yourself »

Example

1. #example1{
2.     background-img: url("photographer.jpg"); /* The image used */
3.     background-color: #cccccc; /* Used if the image is unavailable */
4.     hight: 500px; /* You must set a specified height */
5.     baackground-position: center; /* Center the image */
6.     baackground-repeat: no-repeat; /* Do not repeat the image */
7.     background-size: cover; /* Resize the background image to cover the entire container */
8. }

Try it Yourself »

CSS background-attachment

Background-attachment property ကနောက်ခံပုံကို scroll လုပ်သင့်လားမပြင်သင့်လားဆိုတာကိုသတ်မှတ်ပါတယ်။

Example

နောက်ခံပုံပါစာမျက်နှာအားကျန်စာမျက်နှာနှင့်အတူ scroll မလုပ်ရန်သတ်မှတ်ပါ

1. body{
2.     background-img: url("img_tree.png");
3.     background-repeat: on-repeat;
4.     background-position: right top;
5.     background-attachment: fixed;
6. }

Try it Yourself »

Example

နောက်ခံပုံပါစာမျက်နှာအားကျန်စာမျက်နှာနှင့်အတူ scroll လုပ်ရန်သတ်မှတ်ပါ

1. body{
2.     background-img: url("img_tree.png");
3.     background-repeat: on-repeat;
4.     background-position: right top;
5.     background-attachment: scroll;
6. }

Try it Yourself »

CSS Background-repeat

ပုံမှန်အားဖြင့် Background-image property သည်ပုံတစ်ပုံကိုအလျားလိုက်ရောဒေါင်လိုက်ပါထပ်ခါတလဲလဲလုပ်သည်။ အချို့သောရုပ်ပုံများကိုအလျားလိုက် (သို့) ဒေါင်လိုက်သာထပ်ခါတလဲလဲလုပ်သင့်သည်၊ သို့မဟုတ်လျှင်ထူးဆန်းနေလိမ့်မည်။

Example

1. body{
2.     background-img: url("gradient_bg.gif");
3. }

Try it Yourself »

အထက်ပါပုံသည်အလျားလိုက်သာထပ်ခါတလဲလဲပြုလုပ်ပါက (background-repeat : repeat- x;) နောက်ခံသည်ပိုမိုကောင်းမွန်သောပုံဖြစ်သည်။

Example

1. body{
2.     background-img: url("gradient_bg.gif");
3.     background-repeat: repeat-x;
4. }

Try it Yourself »

ပုံအားဒေါင်လိုက်ထပ်မံလုပ်ရန် background-repeat: repeat-y;

CSS background-repeat: no-repeat

နောက်ခံပုံကိုတစ်ကြိမ်သာပြရန် background-repeat: no-repeat

Example

1. body{
2.     background-img: url("img_tree.png");
3.     background-repeat: on-repeat;
4. }

Try it Yourself »

အပေါ်ကဥပမာမှာနောက်ခံပုံကိုစာသားနဲ့အတူတူထားတယ်။ ကျွန်ုပ်တို့သည်ပုံ၏အနေအထားကိုပြောင်းလဲလိုသဖြင့်၎င်းသည်စာသားကိုအနှောင့်အယှက်မဖြစ်စေပါ။

CSS background-position

Background-position property ကနောက်ခံပုံရဲ့အနေအထားကိုဖော်ပြဖို့သုံးတယ်။

Example

1. body{
2.     background-img: url("img_tree.png");
3.     background-repeat: on-repeat;
4.     background-position: right top;
5. }

Try it Yourself »

CSS background-image

Background-image property က element တစ်ခုရဲ့နောက်ခံအနေနဲ့သုံးဖို့ image ကိုသတ်မှတ်ပါတယ်။ ပုံမှန်အားဖြင့်၊ ပုံသည်ထပ်ခါတလဲလဲဖြစ်နေသောကြောင့်၎င်းသည် element တစ်ခုလုံးကိုဖုံးအုပ်ထားသည်။

Example

စာမျက်နှာတစ်ခု၏နောက်ခံပုံကိုထားပါ။

1. body{
2.     background-img:url("paper.gif");
3. }

Try it Yourself »

Example

This example shows a bad combination of text and background image. The text is hardly readable:

1. body{
2.     background-img:url("bgdesert.jpg");
3. }

Try it Yourself »

မှတ်ချက်။နောက်ခံပုံတစ်ပုံကိုသုံးသောအခါစာသားကိုအနှောင့်အယှက်မပေးသောပုံကိုအသုံးပြုပါ။

နောက်ခံပုံကို <p> element လိုမျိုးတိကျတဲ့ element တွေအတွက်လည်းသတ်မှတ်နိုင်ပါတယ်။

Example

1. body{
2.     background-img: url("paper.gif");
3. }

Try it Yourself »

CSS Backgrounds

css background properties များကို Element တွေအတွက်နောက်ခံ effect တွေထည့်ဖို့သုံးတယ်။

In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

Background-color property က element တစ်ခုရဲ့နောက်ခံအရောင်ကိုသတ်မှတ်ပါတယ်။

Example

The background color of a page is set like this:

1. body{
2.     background-color: lightblue;
3. }

Try it Yourself »

Other Element

HTML element တွေအတွက်နောက်ခံအရောင်ကိုသတ်မှတ်နိုင်ပါတယ်။

Example

ဒီမှာ < h1 >, <p >နှင့် <div> element တွေမှာနောက်ခံအရောင်တွေကွဲပြားပါလိမ့်မယ်။

1. h1{
2.     background-color: greens;
3. }
4. div{
5.     background-color: lightblue;
6. }
7. p{
8.     background-color:yellow;
9. }

Try it Yourself »

Opacity / Transparency

opacity property က element တစ်ခုရဲ့ opacity / transparent ကိုသတ်မှတ်ပါတယ်။ ၀.၀ မှ ၁.၀ အတွင်းတန်ဖိုးတစ်ခုယူနိုင်သည်

opacity 1

opacity 0.7

opacity 0.4

opacity 0.2

Example

1. div{
2.     background-color: green;
3.    opacity: 0.3;
4. }

Try it Yourself »

မှတ်ချက်။ ။ Opacity property ကို element ရဲ့နောက်ခံမှာပွင့်လင်းမြင်သာမှုရှိစေရန်အသုံးပြုတဲ့အခါသူ့ရဲ့ element အားလုံးဟာတူညီတဲ့ပွင့်လင်းမြင်သာမှုကိုအမွေခံရသည်။ ၎င်းသည်ပွင့်လင်းမြင်သာသော element တစ်ခုအတွင်းရှိစာသားကိုဖတ်ရန်ခက်ခဲစေသည်။

Transparency using RGBA

သင်သည် element တွေကို opacity လျှောက်ထားချင်လျှင်, RGBA အရောင်တန်ဖိုးများကိုသုံးပါ။ အောက်ပါဥပမာသည်စာသားမဟုတ်ဘဲနောက်ခံအရောင်အတွက် opacity ကိုသတ်မှတ်သည်။

100% opacity

60% opacity

30% opacity

20% opacity

ကျွန်တော်တို့ရဲ့အရောင်တန်ဖိုးအနေနဲ့ RGB ကိုသုံးနိုင်သည်ကိုကျွန်ုပ်တို့၏ CSS အရောင်များအခန်းမှသင်လေ့လာသိရှိခဲ့ရသည်။ RGB အပြင်အရောင်တစ်ခုအတွက် opacity ကိုသတ်မှတ်ထားတဲ့ alpha channel (RGBA) နဲ့ RGB အရောင်တန်ဖိုးကိုသင်အသုံးပြုနိုင်တယ်။

RGBA အရောင်တန်ဖိုးကို rgba (အနီရောင်၊ အစိမ်း၊ အပြာ၊ alpha) နဲ့သတ်မှတ်ပါတယ်။ alpha parameter သည် ၀.၀ (အပြည့်အဝပွင့်လင်းမြင်သာမှု) နှင့် ၁.၀ (လုံးဝ opaque) အကြားကိန်းတစ်ခုဖြစ်သည်။

Example

The background color of a page is set like this:

1. body{
2.     background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
3. }

Try it Yourself »

CSS Multiple Backgrounds

ဒီအခန်းမှာနောက်ခံပုံများစွာကို element တစ်ခုထဲထည့်ဖို့ဘယ်လိုလေ့လာရမလဲဆိုတာကိုလေ့လာပါလိမ့်မယ်။

• backgroun-size
• backgroun-origin
• background-clip

CSS Multiple Backgrounds

CSS သည် Background-image property မှတဆင့် element တစ်ခုအတွက်နောက်ခံပုံများစွာကိုသင်ခွင့်ပြုသည်။

မတူညီသောနောက်ခံပုံများကိုကော်မာများဖြင့်ခွဲခြားထားသည်။

မတူညီသောနောက်ခံပုံများကိုကော်မာများဖြင့်ခွဲခြားထားပြီးပထမပုံရိပ်သည်ကြည့်ရှုသူနှင့်အနီးဆုံးရှိသည့်တစ်ခုချင်းစီအပေါ်တွင်ပုံဖော်ထားသည်။

Example

1. #example1{
2.      background-image : url(img_flwr.gif) , url(paper.gif);
3.      background-position : right bottom, left top;
4.      background-repeat : no-repeat, repeat;
5. }

Try it Yourself »

အောက်ဖော်ပြပါဥပမာသည် Background shorthand property ကိုသုံးသည်။

Example

1. #example1{
2.      background : url(img_flwr.gif) right bottom no-repeat , url(paper.gif) left top repeat ;
3. }

Try it Yourself »

CSS Background Size

CSS background-size property ကနောက်ခံပုံအရွယ်အစားကိုသတ်မှတ်နိုင်သည်။

အရွယ်အစားကိုအရှည်၊ ရာခိုင်နှုန်း၊ သို့မဟုတ် (contain or cover) နှစ်ခုကိုသုံးနိုင်သည်။

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

1. #div1{
2.      background-image : url(img_flwr.gif) ;
3.      background-size: 100px 80px;
4.      background-repeat : no-repeat, repeat;
5. }

Try it Yourself »

contain or cover တန်ဖိုးများ ကိုအသုံးပြုပုံ။

Example

1. #div1{
2.      background-image : url(img_flwr.gif) ;
3.      background-size: contain;
4.      background-repeat : no-repeat;
5. }
6. #div2{
7.      background-image : url(img_flwr.gif) ;
8.      background-size: cover;
9.      background-repeat : no-repeat;
10. }

Try it Yourself »

Background-size property ရဲ့ value များကို(ကော်မာခွဲထားပြီး) တန်ဖိုးများစွာကိုလက်ခံသည်။

အောက်ဖော်ပြပါဥပမာသည်ပုံတစ်ပုံချင်းစီအတွက်နောက်ခံအရွယ်အစားနှင့်ကွဲပြားသောနောက်ခံပုံ (၃) ခုရှိသည်။

Example

1. #example1{
2.      background : url(img_tree.gif) left top no-repeat , url(img_flwr.gif) right bottom no-repeat ,
3.      url(paper.gif) left top repeat;
4.      background-size : 50px , 130px , auto ;
5. }

Try it Yourself »

Full Size Background Image

ယခုတွင်ကျွန်ုပ်တို့သည် browser ၀ င်းဒိုးတစ်ခုလုံးကိုအချိန်မရွေးဖုံးကွယ်ထားသော website တစ်ခုတွင်နောက်ခံပုံရိပ်တစ်ခုထားလိုသည်။

လိုအပ်ချက်များမှာအောက်ပါအတိုင်းဖြစ်သည် -

• စာမျက်နှာတစ်ခုလုံးကိုပုံနှင့်ဖြည့်ပါ (အဖြူရောင်နေရာမရှိအောင်)
• လိုအပ်သည့်အတိုင်းပုံရိပ်ထည့်ပါ။
• စာမျက်နှာပေါ်တွင် Center ပုံရိပ်
• Scrollbars မဖြစ်ပေါ်စေပါနှင့်

အောက်ဖော်ပြပါဥပမာသည်မည်သို့ပြုလုပ်ရမည်ကိုပြသည်။ <html> element ကိုသုံးပါ (<html> element ကအမြဲတမ်း browser window ရဲ့အမြင့်ဖြစ်တယ်။ ) ထို့နောက်၎င်းကိုပုံသေဗဟိုပြုနောက်ခံထားပါ။ ထို့နောက်၎င်း၏အရွယ်အစားကို background-size property ဖြင့်ချိန်ညှိပါ။

Example

1. html{
2.     background : url(img_man.jpg) no-repeat center fixed ;
3.     background-size : cover ;
4. }

Try it Yourself »

Hero Image

You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.

Example

1. .hero-image{
2.     background : url(img_man.jpg) no-repeat center ;
3.     background-size : cover ;
4.     height: 500px ;
5.     position: relative ;
6. }

Try it Yourself »

CSS background-origin Property

နောက်ခံပုံတည်နေရာကို CSS background-origin property ကသတ်မှတ်ပါတယ်။

ဒီ property ကတန်ဖိုး ၃ မျိုးကိုယူတယ်။

• border-box - နောက်ခံပုံက border ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်
• padding-box - နောက်ခံပုံဟာ padding edge ရဲ့ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်
• content-box - နောက်ခံပုံဟာအကြောင်းအရာရဲ့ဘယ်ဘက်အပေါ်ထောင့်ကနေစတယ်

အောက်ပါဥပမာသည်နောက်ခံမူလပိုင်ဆိုင်မှုကိုဖော်ပြသည်။

Example

1. #example1{
2.     border : 10px solid black ;
3.     padding : 35px ;
4.     background : url(img_flwr.gif);
5.     background-repeat: no-repeat ;
6.     background-origin : content-box ;
7. }

Try it Yourself »

CSS background-clip Property

နောက်ခံပုံတည်နေရာကို CSS background-origin property ကသတ်မှတ်ပါတယ်။

ဒီ property ကတန်ဖိုး ၃ မျိုးကိုယူတယ်။

• border-box - (default) နောက်ခံအား border ၏အပြင်ဘက်အစွန်းကစတယ်
• padding-box - နောက်ခံ padding ရဲ့အပြင်ဘက်အစွန်းကစတယ်
• content-box - နောက်ခံပုံကို content box ထဲကနေစတယ်

အောက်ပါဥပမာသည်နောက်ခံမူလပိုင်ဆိုင်မှုကိုဖော်ပြသည်။

Example

1. #example1{
2.     border : 10px solid black ;
3.     padding : 35px ;
4.     background : yellow ;
5.     background-origin : content-box ;
6. }

Try it Yourself »

CSS Advanced Background Properties

Property	Description
background-clip	Specifies the painting area of the background
background-image	Specifies one or more background images for an element
background-origin	Specifies where the background image(s) is/are positioned
background-size	Specifies the size of the background image(s)

JS Comment

Comment ဆိုတာကတော့ ကိုယ်က Programing Language တွေကို ပြန်ဖတ်တဲ့အခါမှာ (သို့မဟုတ်) အခြားသူများဖတ်သည် အခါမှာ လွယ်ကူရှင်းလင်းစွာ သိနိုင်စေဖို့ အတွက် အသုံးပြုရတာဖြစ်ပါတယ်။

Comment များကို Program Run တဲ့အခါမျိုးမှာ ထည့်သွင်းအလုပ်မလုပ်ပါဘူး။

ဒါကြောင့် တစ်ချို့သော အလုပ်မလုပ်စေလိုတဲ့ Code များကိုလဲ Comment များအဖြစ် ရေးသားနိုင်ပါတယ်။

---

Single Line Comment

Single Line Comment ကို // ဖြင့် စတင်ရေးသားရပါတယ်။

ထို // နှင့်စသော စာကြောင်းအဆုံး အထိကို JavaScript က ကျော်သွားပါတယ်။ (ဆိုလိုတာက Program Run တဲ့အခါမှာ အလုပ်မလုပ်ပါဘူး)

အောက်က ဥပမာကတော့ Single Line Comment အတွက် ဖြစ်ပါတယ်။

Example Code

1. //Change heading:

2. document.getElementById("MyH").innerHTML = "My First Page";

4. //Change Paragraph:

5. document.getElementById("MyH").innerHTML = "My First Paragraph";

Try it Yourself!

အောက်က ဥပမာကတော့ Coding များရဲ့ နောက်မှာ Comment ရေးသားထားပုံဖြစ်ပါတယ်။ အဲဒီလိုလည်း အသုံးပြုနိုင်ပါတယ်။

Example Code

1. var x = 5 ;        //Declear x, value is 5

2. var y = x +2;      //Decler y, value is x + 2

Try It Yourself!

---

Multi Line Comment

Multi-line Comment များကို /* နှင့် စတင်ရပြီး */ ဖြင့် အဆုံးသတ်ပေးရပါတယ်။

/* နှင့် */ ကြားက မည့်သည့်စာသားမဆိုကို JavaScript က ကျော်ခွသွားပါတယ်။

Multi-line Comment ကို Comment Block လိုလဲ ခေါ်ဆိုနိုင်ပါတယ်။

အောက်က ဥပမာကတော့ Multi-line Comment အတွက် ဖြစ်ပါတယ်။ လေ့လာကြည့်ပါ။

Example Code

1. /*

2. The code below will change

3. the heading with id = "myH"

4. and the paragraph with id = "myP"

5. in my web page:

6. */

7. document.getElementById("myH").innterHTML = "My First Page";

8. document.getElementById("myP").innerHTML = "My First Paragraph";

Try It Yourself!

Single Line Comment ကို အများဆုံး အသုံပြုကြပါတယ်။

ထူးခြား များပြားတဲ့ စာများအတွက်သာ Multi-line Comment ကို အသုံပြုကြပါတယ်။

မိတ်ဆွေတို့ အဆင်ပြေရာကို အသုံးပြုနိုင်ပါတယ်။

---

Using Comment to Prebent Execution

အထက်မှာ ပြောခဲ့သလို Coding များစမ်းသတ်ရာတွင် အလုပ်မလုပ်စေလိုသော Code များအတွက်လည်း Comment ကို အသုံးပြုနိုင်သေးသည်။

Code တစ်ကြောင်းတည်းကို အလုပ်မလုပ်စေလိုပါက Single Line Comment ( // ) ကိုအသုံးပြုနိုင်သည်။

Code များစမ်းသတ်ရာတွင် အလုပ်မလုပ်စေလို၊ ဖျက်လည်း မဖျက်ပစ်လိုသော Code များကို အလုပ်မလုပ်စေရန်တွက် Comment များအဖြစ်ပြောင်းလဲ လိုက်ပြီး စမ်းသပ်နိုင်မှာဖြစ်ပါတယ်။

အောက်ပါ ဥပမာမှာ // ဖြင့် Code တစ်ကြောင်းကို ရပ်နားစေလိုက်ခြင်းဖြစ်သည်။

Example Code

1. //documnet.getElementById("myH").innerHTML = "My First Page" ;

2. document.getElementById("myP").innerHTML = "My First Paragraph" ;

Try It Yourself!

အောက်က ဥပမာကတော့ Code အစုအဝေးလိုက်ကို Multi-Line Comment ဖြင့် ရပ်နားစေလိုက်ခြင်းဖြစ်ပါတယ်။ Try It Yourself ကိုနှိပ်ပြီး သေခြာ လေ့လာကြည့်ပါ။

Example Code

1. /*

2. document.getElementById("myH").innerHTML = "My First Page" :

3. document.getElementById("myP").innerHTML = "My First Paragraph" :

4. */

Try It Yourself!

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

ဝေဖန်၊ အကြံပြု လိုသည်များ မေးခွန်းများ ရှိပါက Comment မှာ ရေးသားခဲ့ကြပါ။