CODE

MEANING

SAMPLE

document

เข้าถึงหน้า HTML ทั้งหมด

document. getElementById("A"). innerHTML = "Plug";

.getElementById(_)

object

รับ id จาก element html เข้ามาทำงาน

document. getElementById("A"). innerHTML = "plug";

.querySelector(_)

object

รับ class จาก element html เข้ามาทำงาน

จะมีผลแค่ class ตัวแรกเท่านั้น

document. querySelector(".A"). innerHTML = "plug";

.querySelectorAll(_)

object array

รับ class เดียวกันมาเก็บที่ตัวแปร

"จำเป็นที่จะต้องสร้างตัวแปรเพื่อเก็บ class แล้ว get เอาข้อมูลแบบ array"

let A = document. querySelectorAll(.A);

for (let i = 0 ; i < A.length ; i++){

A[i].innerHTML = "plug";

}

.createElement(_)

object

สร้าง element ขึ้นมาใหม่

let p = document.createElement("p");

.prepend(_)

เพิ่ม element ที่ถูกสร้างให้อยู่ลำดับแรก

let div = document.getElementById("div");

let p = document.createElement("p");

div.prepend(p);

.insertBefore(_,_)

เพิ่ม element ไปด้านหน้า element ที่กำหนด

let div = document.getElementById("div");

let p = document.querySelectorAll(".p");

let b = document.createElement("b");

div.insertBefore(b,p[0]);

.appendChild(_)

เพิ่ม element ที่ถูกสร้างไปต่อด้านหลัง

let div = document.getElementById("div");

let p = document.createElement("p");

div.appendChild(p);

.removeChild(_)

ลบ element ที่ถูกสร้าง

let div = document.getElementById("div");

let p = document.querySelectorAll(".p");

div.removeChild(p[0]);

.cloneNode(true)

object

clone element ที่กำหนด

let clone = div.cloneNode(true);

.focus()

element จะได้รับการ focus ใช้กับ element a หรือ element input

let input = div.firstChild;

input.focus();

.blur()

ยกเลิกการ focus ใช้กับ element a หรือ element input

let input = div.firstChild;

input.blur();

.play()

กำหนดให้ video หรือ audio เล่น

video.play();

audio.play();

.pause()

กำหนดให้ video หรือ audio หยุด

video.pause();

audio.pause();

.toLocaleString()

string

แปลงตัวเลขเป็น string ที่ใช้งานทั่วไป เช่น 100000 ก็จะเป็น 100,000

let num = 100000;

cosole.log(num.toLocaleString());

.classList.toggle(_)

เพิ่ม class css เข้าไปทำงานใน element ที่กำหนด

กดครั้งแรกจะเพิ่ม class

กดครั้งทที่สองจะลบ class

let A = document. getElementById("A");

A.classList.toggle("S");

.classList.add(_)

เพิ่ม class css เข้าไปทำงานใน element ที่กำหนด

let A = document. getElementById("A");

A.classList.add("S");

.classList.remove(_)

ลบ class css ที่เพิ่มให้ element ที่กำหนด

let A = document. getElementById("A");

A.classList.remove("S");

.style.setProperty(_,_)

ใช้งานเหมือน .style. แต่จะใช้ดีกับ :root หรือตัวแปร css

document.style.setProperty("--color","red");

.getBoundingClientRect()

number

get เอาตำแหน่ง element

ใช้กับ element เท่านั้น

มี metthod

x
y
top
left
right
bottom
width
height

let po = p.getBoundingClientRect();

console.log(po.x);

.scrollTo(_,_)

เลื่อน scroll bar ไปตำแหน่งที่กำหนด

div.scrollTo(0,100);

document.write(_)

เขียนเนื้อหาลงหน้า HTML
ห้ามเรียกใช้หลังจากหน้า HTML โหลดสร็จแล้วถ้าเรียกใช้จะเป็นการลบหน้า HTML ทั้งหมด

document.write(4 + 4);

console.log(_)

output ข้อมูลที่ Console

console.log(4+4);

window.alert(_)

จะมีกล่องข้อความขึ้นมาตอนโหลดหน้าเว็บเสร็จ

window.alert("plug");

window.print()

สั่ง print หน้าเว็บที่ printer
ควรวางไว้ที่ element ที่ต้องการ click for print

onclick = "window.print()"

window.location.href

ลิ้งไปหน้าใหม่

window.location.href = "A.html";

window.innerWidth

number

ความกว้างของจอ หรือ 100vw

let w = window.innerWidth;

console.log(w);

window.innerHeight

number

ความสูงของจอ หรือ 100vh

let h = window.innerHeight;

console.log(h);

window.scrollX

number

ตำแหน่งของ scorll แกน X ของ window

let s = window.scrollX;

console.log(s);

window.scrollY

number

ตำแหน่งของ scorll แกน y ของ window

let s = window.scrollY;

console.log(s);

event.target.

object

กำหนด event ที่ function

get เอาที่อยู่ element

function click(event) {

console.log(event.target);

}

event.target.files[0]

object

กำหนด event ที่ function

เข้าถึงข้อมูลไฟล์ที่อัปโหลดผ่าน element

เช่น input type flie

function infile(event) {

let file = event.target.files[0];

console.log(file);

}

event.preventDefault()

กำหนด event ที่ function

element จะไม่ทำงานตามคุณสมบัติเดิม

function nottarget(event) {

event.preventDefault();

}

event.clienX

number

กำหนด event ที่ function

ระบุตำแหน่ง mouse แกน x

function mousex() {

console.log(event.clienX);

}

event.clienY

number

กำหนด event ที่ function

ระบุตำแหน่ง mouse แกน y

function mousey() {

console.log(event.clienY);

}

event.offsetX

number

กำหนด event ที่ function

ระบุตำแหน่ง mouse ใน element แกน x

function mousex() {

console.log(event.offsetX);

}

event.offsetY

number

กำหนด event ที่ function

ระบุตำแหน่ง mouse ใน element แกน y

function mousey() {

console.log(event.offsetY);

}

URL.createObjectURL(_)

string

สร้าง url เพื่อเข้าถึง file

function infile(event) {

let file = event.target.files[0];

let url = URL.createObjectURL(file);

img.src = url;

}

.style.

JavaScript สามารถเปลี่ยนรูปแบบ HTML (CSS)

document. getElementById("A"). style.fontSize = "4px";

.src

JavaScript สามารถเปลี่ยนค่าแอตทริบิวต์ HTML

document. getElementById("A"). src = "on.png";

.innerHTML

เขียน text ลงใน element

document. getElementById("A"). innerHTML = "plug";

.scrollWidth

number

ความกว้างของ scroll ที่สามารถ scroll ได้ใน element

let w = div.scrollWidth;

console.log(w);

.scrollHeight

number

ความสูงของ scroll ที่สามารถ scroll ได้ใน element

let h = div.scrollHeight;

console.log(h);

.scrollLeft

number

ตำแหน่งของ scorll แกน x ของ element

let s = element.scrollLeft;

console.log(s);

.scrollTop

number

ตำแหน่งของ scorll แกน y ของ element

let s = element.scrollTop;

console.log(s);

.parentNode

object

เข้าถึง element แม่ของ element ลูก

let div = span.parentNode;

.children

.children[_]

object array , object

เข้าถึง element ลูกของ element แม่

let e1 = con.children;

console.log(e1);


let e2 = con.children[0];

console.log(e2);

.tagName

string

get เอาชื่อของ element

function click(event) {

console.log(event.target.tagName);

}

.className

string

get เอาชื่อ class element หรือ กำหนด class ให้ element

function click(event) {

console.log(event.target.className);

}

.offsetWidth

number

ความกว้างของ element รวม border

let w = div.offsetWidth;

console.log(w);

.offsetHeight

number

ความสูงของ element รวม border

let h = div.offsetHeight;

console.log(h);

.clientWidth

number

ความกว้างของ element ไม่รวม border

let w = div.clientWidth;

console.log(w);

.clientHeight

number

ความสูงของ element ไม่รวม border

let h = div.clientHeight;

console.log(h);

.paused

bool

ตรวจสอบการเล่นของ video หรือ audio

console.log(video.paused);

console.log(audio.paused);

.volume

number

เสียงของ video หรือ audio ใช้ได้ตั้งแต่ 0.0 - 1.0

console.log(video.volume);

console.log(audio.volume);

.currentTime

number

เวลาที่เล่นไปของ video หรือ audio หน่วยเป็นวิ

console.log(video.currentTime);

console.log(audio.currentTime);

.duration

number

เวลาทั้งหมดของ video หรือ audio หน่วยเป็นวิ

console.log(video.duration);

console.log(audio.duration);

//

comment one line

// i love html css js

/* */

multi line comment

/* love
you */

+,-,*,**,/,%,++,--

operator

let x = 5;
let y = 5;
let z1 = x + y;
let z2 = x - y;
let z3 = x * y;
let z4 = x ** y;
let z5 = x / y;
let z6 = x % y;
let z7 = ++x;
let z8 = --y;

+=,-=

ตัวแปร บวกค่า,ลบค่า ให้ตัวเอง

let x = 5;
x += 5;
console.log(x);

let

ประกาศตัวแปลทั่วไป

let x = 10;

const

ประกาศตัวแปลค่าคงที่

const X = 10;

การต่อ string

let s = "love" + " " + "you";

ถ้า string อยู่ข้างหน้าตัวหลังจะถูกนำมาต่อกัน

console.log("5" + 1 + 2);

output: 512;

format string

let x = 80;

str.innerHTML = `num ${x}`;

.concat(_)

string & array

ต่อ string

ต่อ array

let x = 80;

let y = 85;

let s = "sum".concat(x + y);


let ar1 = [70,80];

let ar2 = [90,100];

let newar = ar1.concat(ar2);

.length

number

นับ string

นับ array

let str = "ilovejs";

console.log(str.length);


let ar = [80,90,100];

console.log(ar.length);

.slice(_,_)

string & array

get เอา string บางส่วน

get เอา array บางส่วน

let str = "i love js";

let newstr = str.slice(2,9);

console.log(newstr);


let ar = [80,90,100];

let newar = ar.slice(1,3);

console.log(newar);

.replace(_,_)

string

แทนที่ string จะแทนที่ string ที่เห็นตำแหน่งแรกเท่านั้น

let str = (i love js);

console.log (str.replace("js","you"));

.replaceAll(_,_)

string

แทนที่ string ถ้า string เหมือนกันจะถูกแทนที่ทั้งหมด

let str = "HTML,HTML";

console.log (str.replaceAll("HTML","JS"));

.toUpperCsse()

.toLowerCase()

string

แปลงข้อความเป็น ตัวใหญ่ และ เล็ก

let str = "i love js"

console.log (str.toUpperCase());

console.log (str.toLowerCase());

.padStart(_,_)

.padEnd(_,_)

string

เพิ่มข้อมูลที่กำหนดไปไว้ด้าน หน้า และ หลัง string
datatype ต้องเป็น string เท่านั้น

let str1 = "x";

console.log(str1.padStrat(5,4));

let str2 = 4;

console.log (str2.toString().padEnd(4,"x"));

.charCodeAt(_)

number

unicode ของ string หรือ รหัส ascii

let str = "A";

console.log (str.charCodeAt(0));

.split(_)

array string

ตัด string ที่กำหนด

ตัวแปรที่ใช้ split จะเป็น array

let str = "a,b,c";

let A = str.split(",");

console.log (A);

.indexOf(_)

number

หา index ของ string ถ้า string เหมือนกันจะหาแค่ตำแหน่งแรก

let str = "js js";

console.log (str.indexOf("js"));

.lastIndexOf(_)

number

หา index ของ string ถ้า string เหมือนกันจะหาแค่ตำแหน่งสุดท้าย

let str = "js js";

console.log (str.lastIndexOf("js"));

.match(_)

string

หา string ที่เหมือนกัน

let str = "you you";

let text = str.match("you");

console.log(text);

.matchAll(_)

object array

หา string ที่เหมือนกัน

let str = "you you";

let array = str.matchAll("you");

console.log(Array.from(array));

.includes(_)

bool

ตรวจสอบ string ที่กำหนดเป็นสมาชิกตัวแปร string หรือไม่

ตรวจสอบ array ที่กำหนดเป็นสมาชิกตัวแปร array หรือไม่

let str = "i love js";

console.log (str.includes("love"));


let arr = [80,90,100];

console.log(arr.includes(100));

.startsWith(_)

bool

ตรวจสอบ string ที่กำหนดเป็นสมาชิกตัวแปร string หรือไม่

let str = "i love js";

console.log (str.startsWith("i"));

.endsWith(_)

bool

ตรวจสอบ string ที่กำหนดเป็นสมาชิกตัวแปร string หรือไม่

let str = "i love js";

console.log (str.endsWith("js");

.toFixed(_)

number

กำหนดจุดทศนิยม

let n = 80.25;

console.log(n.toFixed(2));

.toString()

string

convert number to string

let n = 80.5;

console.log(n.toString());

.trim()

string

ตัดช่องว่าง ซ้าย ขวา ในข้อความ

let text = " A ";

console.log(text.trim());

JSON.parse(_)

object & array

แปลง json string ให้เป็น json object

let j = "{a:1,b:2}";

console.log(JSON.parse(j));

JSON.stringfy(_)

object & array

แปลง json object ให้เป็น json string

let j = {a:1,b:2};

console.log(JSON.stringfy(j));

Math.round(_)

number

ปัดเศษเป็นจำนวนเต็มที่ใกล้เคียงที่สุด

let x = 5.4;

console.log(Matn.round(x));

Math.ceil(_)

number

ปัดเศษขึ้นเป็นจำนวนเต็มที่ใกล้เคียงที่สุด

let x = 5.4;

console.log(Matn.ceil(x));

Math.pow(_,_)

number

ยกกำลัง

let x = 5;

console.log(Math.pow(x,2));

Math.abs(_)

number

กลับ ลบ เป็น บวก

let x = -5;

console.log(Matn.abs(x));

typeof(_)

data type

let A = 80;

console.log(typeof(A));

eval(_)

number

เปลี่ยน string ให้เป็น code

let num = "50 + 50";

let total = eval(num);

console.log(total);

parseInt(_)

number

convert string to int

let n = "80";

console.log(parseInt(n));

parseFloat(_)

number

convert string to float

let n = "80.5"

console.log(parseFloat(n));

setInterval(_,_)

โค้ดทำงานซ้ำๆตามเวลาที่กำหนด

let A = setInterval(func,1000);

setTimeout(_,_)

โค้ดทำงานครั้งเดียวตามเวลาที่กำหนด

let A = setTimeout(func,1000);

clearInterval(_)

ลบตัวแปรโค้ดที่ทำงานซ้ำๆ

let A = setInterval(func,1000);

clearInterval(A);

clearTimeout(_)

ลบตัวแปรโค้ดที่ทำงานครั้งเดียว

let A = setTimeout(func,1000);

clearTimeout(A);

localStorage.setItem(_,_)

sessionStorage.setItem(_,_)

บันทึกข้อมูลลงใน browser แบบถาวร

บันทึกข้อมูลลงใน browser แบบชั่วคราว

localStorage.setItem("key1",4);

sessionStorage.setItem("key2",8);

localStorage.getItem(_)

sessionStorage.getItem(_)

string

ดึงข้อมูลที่เก็บแบบถาวรใน browser

ดึงข้อมูลที่เก็บแบบชั่วคราวใน browser

let n = localStorage.getItem("key1");

let m = sessionStorage.getItem("key2");

localStorage.removeItem(_);

sessionStorage.removeItem(_);

ลบข้อมูลที่เก็บแบบถาวรใน browser

ลบข้อมูลที่เก็บแบบชั่วคราวใน browser

localStorage.removeItem("key1");

sessionStorage.removeItem("key2");

isNaN(_)

bool

ตรวจสอบว่าใช่ number หรือไม่

let n = 10;

if(isNaN(n)){

console.log("true");

}

for(_)

วน loop กำหนดรอบ

for(let i = 0 ; i < 10 ; i++) {

console.log("A");

}

while(_)

วน loop ไม่กำหนดรอบ

while(true) {

console.log("A");

}

array

เก็บข้อมูลหลายตัวในตัวแปรเดียว

let n = [100,200,300];

.map(_)

array

สร้าง array ใหม่และเปลี่ยนแปลง array ตามจำนวน array เดิม

let n = [100,200,300];

let arrnew = n.map((e) => {

return(e * 10);

});

.filter(_)

array

สร้าง array ใหม่และเปลี่ยนแปลง array จำนวนไม่จำเป็นต้องเท่ากับ array เดิม

let n = [100,200,300];

let newarr = n.filter((e) => {

if(e > 100) {

return(e);

}

});

Array.from(_)

array

แปลงและแยก string เป็น array

แปลง object array เป็น array

let name = "phuwadon";

let arrn = Array.from(name);

console.log(arrn);

.forEach(_)

วน loop array

let n = [100,200,300];

n.forEach((n) => {

console.log(n);

});

for(_of_)

วน loop array

let n = [100,200,300];

for(let i of n) {

console.log(i);

}

.unshift(_)

เพิ่มสมาชิกไปด้านหน้า array

let n = [100];

n.unshift(200);

console.log(n);

.push(_)

เพิ่มสมาชิกไปต่อหลัง array

let n = [100];

n.push(200);

console.log(n);

.shift()

ลบสมาชิกใน array จากด้านหน้า

let n = [80,90,100];

n.shift();

console.log(n);

.pop()

ลบสมาชิกใน array จากด้านหลัง

let n = [80,90,100];

n.pop();

console.log(n);

.splice(_,_,_)

เพิ่ม และ ลบ array

let ar = ["A","B"];

ar.splice(2,0,"C");

console.log(ar);

.join(_)

string

คั่น element ใน array ทั้งหมด ด้วยอักษรที่กำหนด

let n = [80,90,100];

console.log(n.join(" * "));

.flat()

array

ทำ array ให้เป็น 1 มิติ

let n = [[1,2],[3,4],[5,6]];

let a = n.flat();

console.log(a);

.some(_)

bool

ตรวจสอบข้อมูลใน array ตรงกับข้อมูลที่กำหนดหรือไม่

let arr = [100,200,300];

let true = arr.some(e => e == 200);

console.log(true);

.sort(_)

เรียงลำดับใน array

let str = ['b','c','a'];

console.log(str.sort());


let num = [2,3,1];

console.log(num.sort((a,b) => a-b));

.reverse()

กลับลำดับ array

let str = ['c','b','a'];

console.log(str.reverse());

Math.max.apply(_,_)

number

หาค่าสูงสุดใน array

let A = [80,90,100];

let m = Math.max.apply(null,A);

console.log(m);

Math.min.apply(_,_)

number

หาค่าน้อยสุดใน array

let A = [80,90,100];

let m = Math.min.apply(null,A);

console.log(m);

new Date()

object

ประกาศตัวแปร object date ใช้แสดงเวลาปัจจุบัน

let t = new Date();

console.log(t);

new Set(_)

object

สร้าง set ข้อมูลที่ไม่ซ้ำกัน

let letter = new Set(["a","a"]);

console.log(Array.from(letter));

.add(_)

เพิ่มข้อมูลเข้าไปใน set

let letter = new Set(["a","a"]);

letter.add("b");

console.log(Array.from(letter));

js function

ส่งข้อมูลให้ function ทำงานเมื่อมีข้อมูลที่ต้องคำนวณซ้ำๆ

function sumnumber(a,b) {

let sum = a + b;

return(sum);

}

console.log(sumnumber(80,80))

js object

ประเพศตัวแปรที่รวมกันในตัวแปรหลัก ตัวแปรจะมีความเป็นระเบียบมากขึ้น

const car = {

carname: "bmw",

model: "z4",

price: "4000000"

}

console.log(car.carname);

.addEventListener()

.addEventListener

( "event" ,

function )

"selectorName"

MOUSE EVENT


click,mouseover,mouseout
mousemove,change

mouseenter,mouseleave

dragstart,dragover,drop

transitionend,animationend

updatetime

() => {} or FunctionName

"document"

KEY EVENT


keyup,keydown


EX. if(event.key === "a"){}

(event) => {} or FunctionName

"window"

SCROLL EVENT


scroll,mousemove

() => {} or FunctionName