JS ကျူတိုရီရယ်

JS ပင်မ JS မိတ်ဆက် JS ဘယ်သွားမလဲ။ JS Output JS ထုတ်ပြန်ချက် JS Syntax JS မှတ်ချက်များ JS အပြောင်းအလဲများ JS Let JS Const JS အော်ပရေတာများ JS ဂဏန်းသင်္ချာ JS တာဝန် JS ဒေတာအမျိုးအစားများ JS လုပ်ဆောင်ချက်များ JS အရာဝတ္ထုများ JS ပွဲများ JS စာတန်းများ JS စာတန်းနည်းလမ်းများ JS စာတန်းရှာဖွေမှု JS String Templates JS နံပါတ်များ JS နံပါတ်နည်းလမ်းများ JS Arrays JS Array Methods JS Array အမျိုးအစား JS Array Iteration JS Array Const JS ရက်စွဲများ JS ရက်စွဲပုံစံများ JS နေ့စွဲ နည်းလမ်းများ ရယူပါ။ JS ရက်စွဲ သတ်မှတ်နည်းလမ်းများ JS သင်္ချာ JS Random JS Booleans JS နှိုင်းယှဉ်မှုများ JS အခြေအနေများ JS Switch JS Loop For JS Loop For In JS Loop For Of JS Loop While JS Break JS Iterables JS အစုံများ JS Maps JS အမျိုးအစား JS အမျိုးအစား ပြောင်းခြင်း။ JS Bitwise JS RegExp JS အမှားများ JS နယ်ပယ် JS Hoisting JS တင်းကျပ်သောမုဒ် JS ဒီ Keyword ပါ။ JS Arrow Function JS သင်တန်းများ JS JSON JS Debugging JS စတိုင်လမ်းညွှန် JS အကောင်းဆုံးအလေ့အကျင့်များ JS အမှားများ JS စွမ်းဆောင်ရည် JS သီးသန့်စကားလုံးများ

JS ဗားရှင်းများ

JS ဗားရှင်းများ JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS သမိုင်း

JS အရာဝတ္ထုများ

Object အဓိပ္ပါယ်ဖွင့်ဆိုချက် Object Properties များ အရာဝတ္ထုနည်းလမ်းများ အရာဝတ္ထုပြသခြင်း။ အရာဝတ္ထု ဆက်စပ်ပစ္စည်းများ Object Constructors များ Object Prototypes Object Iterables အရာဝတ္ထုအစုံများ အရာဝတ္ထုမြေပုံများ Object ကိုးကား

JS လုပ်ဆောင်ချက်များ

လုပ်ဆောင်ချက် အဓိပ္ပါယ်ဖွင့်ဆိုချက် လုပ်ဆောင်ချက် ကန့်သတ်ချက်များ Function Invocation လုပ်ဆောင်ချက်ခေါ်ဆိုမှု လုပ်ဆောင်ချက်ကို အသုံးပြုပါ။ Function ပိတ်ခြင်းများ

JS သင်တန်းများ

အတန်းမိတ်ဆက် Class Inheritance အတန်းထဲမှာလည်း

JS Async

JS ပြန်ခေါ်မှုများ JS Asynchronous JS ကတိများ JS Async/Await

JS HTML DOM

DOM မိတ်ဆက် DOM နည်းလမ်းများ DOM စာရွက်စာတမ်း DOM ဒြပ်စင်များ DOM HTML DOM ပုံစံများ DOM CSS DOM အန်နီမေးရှင်းများ DOM ပွဲများ DOM ဖြစ်ရပ် နားထောင်သူ DOM လမ်းညွှန် DOM Nodes DOM စုစည်းမှုများ DOM Node စာရင်းများ

JS Browser BOM

JS Window JS မျက်နှာပြင် JS တည်နေရာ JS သမိုင်း JS Navigator JS Popup သတိပေးချက် JS Timing JS Cookies

JS ဝဘ် API များ

ဝဘ် API မိတ်ဆက် ဝဘ်ဖောင် API ဝဘ်သမိုင်း API ဝဘ်သိုလှောင်မှု API Web Worker API Web Fetch API ဝဘ် Geolocation API

JS AJAX

AJAX နိဒါန်း AJAX XMLHttp AJAX တောင်းဆိုချက် AJAX တုံ့ပြန်မှု AJAX XML ဖိုင် AJAX PHP AJAX ASP AJAX ဒေတာဘေ့စ် AJAX အပလီကေးရှင်းများ AJAX ဥပမာများ

JS JSON

JSON မိတ်ဆက် JSON Syntax JSON နှင့် XML JSON ဒေတာအမျိုးအစားများ JSON Parse JSON Stringify JSON အရာဝတ္ထုများ JSON Arrays JSON ဆာဗာ JSON PHP JSON HTML JSON JSONP

JS နှင့် jQuery

jQuery ရွေးချယ်မှုများ jQuery HTML jQuery CSS jQuery DOM

JS ဂရပ်ဖစ်

JS ဂရပ်ဖစ် JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS ဥပမာများ

JS ဥပမာများ JS HTML DOM JS HTML ထည့်သွင်းမှု JS HTML Objects JS HTML ပွဲများ JS Browser JS တည်းဖြတ်သူ JS လေ့ကျင့်ခန်းများ JS Quiz JS လက်မှတ်

JS ကိုးကားချက်များ

JavaScript Objects HTML DOM အရာဝတ္ထုများ


JavaScript ES5

ES5 ဟုလည်းသိကြသော ECMAScript 2009 သည် JavaScript အတွက် ပထမဆုံးသော အဓိကပြင်ဆင်မှုဖြစ်သည်။

ဤအခန်းသည် ES5 ၏ အရေးကြီးဆုံးအင်္ဂါရပ်များကို ဖော်ပြသည်။

ES5 အင်္ဂါရပ်များ


Browser ပံ့ပိုးမှု

ES5ခေတ်မီဘရောက်ဆာများအားလုံးတွင် အပြည့်အဝပံ့ပိုးထားသည်။

Chrome IE Edge Firefox Safari Opera
Yes 9.0 Yes Yes Yes Yes

"တင်းကျပ်သောအသုံးပြုမှု" ညွှန်ကြားချက်

"use strict"JavaScript ကုဒ်ကို "တင်းကျပ်သောမုဒ်" တွင် လုပ်ဆောင်သင့်သည်ဟု သတ်မှတ်သည်။

တင်းကြပ်သောမုဒ်ဖြင့် သင်သည် ဥပမာအားဖြင့်၊ မကြေငြာထားသော ကိန်းရှင်များကို အသုံးမပြုနိုင်ပါ။

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

"use strict"string expression တစ်ခုမျှသာဖြစ်သည်။ ဘရောက်ဆာဟောင်းများသည် ၎င်းကို နားမလည်ပါက အမှားအယွင်းမရှိစေပါ။

JS Strict Mode တွင် ပိုမိုဖတ်ရှုပါ


ကြိုးတန်းများပေါ်တွင် ပိုင်ဆိုင်ခွင့်

charAt()နည်းလမ်းသည် စာကြောင်းတစ်ခုရှိ သတ်မှတ်ထားသော အညွှန်း (နေရာ) တွင် ဇာတ်ကောင်ကို ပြန်ပေးသည် -

ဥပမာ

var str = "HELLO WORLD";
str.charAt(0);            // returns H

ES5 သည် strings များပေါ်တွင် ပိုင်ဆိုင်မှုဝင်ရောက်ခွင့်ကို ခွင့်ပြုသည်-

ဥပမာ

var str = "HELLO WORLD";
str[0];                   // returns H

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

JS String Methods တွင် ပိုမိုဖတ်ရှုပါ


မျဥ်းများစွာကို ကျော်သော ကြိုးများ

ES5 သည် backslash ဖြင့် လွတ်သွားပါက စာကြောင်းများစွာကို စာကြောင်းစာကြောင်းများကို ခွင့်ပြုသည်-

ဥပမာ

"Hello \
Dolly!";

\ method သည် universal support မရရှိနိုင်ပါ။
ဘရောင်ဆာအဟောင်းများသည် backslash ပတ်ပတ်လည်ရှိ space များကို ကွဲပြားစွာ ဆက်ဆံနိုင်သည်။
အချို့ဘရောက်ဆာအဟောင်းများသည် \ စာလုံးနောက်တွင် နေရာလွတ်များကို ခွင့်မပြုပါ။

အက္ခရာစာကြောင်းကို ခွဲထုတ်ရန် ပိုမိုဘေးကင်းသောနည်းလမ်းမှာ string ထပ်ဖြည့်ခြင်းကို အသုံးပြုခြင်းဖြစ်သည်-

ဥပမာ

"Hello " +
"Dolly!";

ပစ္စည်းအမည်များအဖြစ် သီးသန့်စကားလုံးများ

ES5 သည် သီးသန့်စကားလုံးများကို ပိုင်ဆိုင်မှုအမည်များအဖြစ် ခွင့်ပြုသည်-

Object ဥပမာ

var obj = {name: "John", new: "yes"}

ကြိုးညှပ်()

trim()နည်းလမ်းသည် စာကြောင်းတစ်ခု၏ နှစ်ဖက်စလုံးမှ နေရာလွတ်များကို ဖယ်ရှားသည်

ဥပမာ

var str = "       Hello World!        ";
alert(str.trim());

JS String Methods တွင် ပိုမိုဖတ်ရှုပါ



Array.isArray()

နည်းလမ်း သည် isArray()အရာဝတ္ထုတစ်ခု array ဟုတ်မဟုတ် စစ်ဆေးသည်။

ဥပမာ

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

JS Arrays တွင်ပိုမိုဖတ်ရှုပါ


Array forEach()

နည်းလမ်း သည် forEach()array element တစ်ခုစီအတွက် function တစ်ခုကို တစ်ကြိမ်ခေါ်သည်။

ဥပမာ

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array မြေပုံ()

ဤဥပမာသည် array တန်ဖိုးတစ်ခုစီကို 2 ဖြင့်မြှောက်သည်-

ဥပမာ

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array filter()

ဤဥပမာသည် 18 ထက်ကြီးသောတန်ဖိုးရှိသော ဒြပ်စင်များမှ အခင်းအသစ်တစ်ခုကို ဖန်တီးသည်-

ဥပမာ

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array ကိုလျှော့ချ()

ဤဥပမာသည် array တစ်ခုတွင် ဂဏန်းအားလုံး၏ပေါင်းလဒ်ကို ရှာသည်-

ဥပမာ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array လျှော့ရန်Right()

ဤဥပမာသည် array တစ်ခုရှိ ဂဏန်းအားလုံး၏ ပေါင်းလဒ်ကိုလည်း ရှာဖွေသည်-

ဥပမာ

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
  return total + value;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array တိုင်း()

ဤဥပမာသည် တန်ဖိုးများအားလုံး 18 နှင့်အထက်ရှိမရှိ စစ်ဆေးသည်-

ဥပမာ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


အခင်းအချို့()

ဤဥပမာသည် အချို့သောတန်ဖိုးများသည် 18 နှင့်အထက်ရှိမရှိ စစ်ဆေးသည်-

ဥပမာ

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array indexOf()

ဒြပ်စင်တန်ဖိုးအတွက် အခင်းအကျင်းတစ်ခုကို ရှာဖွေပြီး ၎င်း၏ အနေအထားကို ပြန်ပေးသည်။

ဥပမာ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


Array lastIndexOf()

lastIndexOf()တူညီ indexOf()သော်လည်း array ၏အဆုံးမှရှာဖွေမှုများ။

ဥပမာ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

JS Array Iteration Methods တွင် ပိုမိုလေ့လာပါ


JSON.parse()

JSON ၏ ဘုံအသုံးပြုမှုမှာ ဝဘ်ဆာဗာတစ်ခုမှ ဒေတာလက်ခံရယူခြင်းဖြစ်သည်။

ဝဘ်ဆာဗာတစ်ခုမှ ဤစာသားစာကြောင်းကို သင်လက်ခံသည်ဟု မြင်ယောင်ကြည့်ပါ-

'{"name":"John", "age":30, "city":"New York"}'

JSON.parse()စာသားကို JavaScript အရာဝတ္ထုအဖြစ်သို့ ပြောင်းလဲရန် JavaScript လုပ်ဆောင်ချက်ကို အသုံးပြုသည်-

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

ကျွန်ုပ်တို့၏ JSON ကျူတိုရီရယ် တွင် ပိုမိုဖတ်ရှုပါ


JSON.stringify()

JSON ၏ ဘုံအသုံးပြုမှုမှာ ဝဘ်ဆာဗာတစ်ခုသို့ ဒေတာပေးပို့ရန်ဖြစ်သည်။

ဝဘ်ဆာဗာသို့ ဒေတာပေးပို့သည့်အခါ ဒေတာသည် စာကြောင်းတစ်ခု ဖြစ်ရပါမည်။

ကျွန်ုပ်တို့တွင် ဤအရာဝတ္ထုကို JavaScript တွင်ရှိနေသည်ဟု မြင်ယောင်ကြည့်ပါ-

var obj = {name:"John", age:30, city:"New York"};

JSON.stringify()၎င်းကို စာကြောင်းတစ်ခုအဖြစ်ပြောင်းရန် JavaScript လုပ်ဆောင်ချက်ကို အသုံးပြု ပါ။

var myJSON = JSON.stringify(obj);

ရလဒ်သည် JSON သင်္ကေတ၏နောက်တွင် စာကြောင်းတစ်ကြောင်းဖြစ်လိမ့်မည်။

myJSON သည် ယခုအခါ စာကြောင်းတစ်ခုဖြစ်ပြီး ဆာဗာသို့ ပေးပို့ရန် အသင့်ဖြစ်နေပါပြီ-

ဥပမာ

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

ကျွန်ုပ်တို့၏ JSON ကျူတိုရီရယ် တွင် ပိုမိုဖတ်ရှုပါ


Date.now()

Date.now() returns the number of milliseconds since zero date (January 1. 1970 00:00:00 UTC).

Example

var timInMSs = Date.now();

Date.now() returns the same as getTime() performed on a Date object.

Learn more in JS Dates.


Date toISOString()

The toISOString() method converts a Date object to a string, using the ISO standard format:

Example

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

Date toJSON()

toJSON() converts a Date object into a string, formatted as a JSON date.

JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:

Example

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

Property Getters and Setters

ES5 lets you define object methods with a syntax that looks like getting or setting a property.

This example creates a getter for a property called fullName:

Example

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

This example creates a setter and a getter for the language property:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

This example uses a setter to secure upper case updates of language:

Example

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Learn more about Gettes and Setters in JS Object Accessors


Object.defineProperty()

Object.defineProperty() is a new Object method in ES5.

It lets you define an object property and/or change a property's value and/or metadata.

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Next example is the same code, except it hides the language property from enumeration:

Example

// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

This example creates a setter and a getter to secure upper case updates of language:

Example

/// Create an Object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;

E5 Object Methods

ES5 added a lot of new Object Methods to JavaScript:

Managing Objects

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Protecting Objects

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Learn more in Object ECMAScript5.


Trailing Commas

ES5 allows trailing commas in object and array definitions:

Object Example

person = {
  firstName: "John",
  lastName: " Doe",
  age: 46,
}

Array Example

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

WARNING !!!

JSON does not allow trailing commas.

JSON Objects:

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON Arrays:

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]