JavaScript

JS 대상 검색

[id 검색] document.getElementById('id명칭') // id는 고유하기에 배열순서가 존재하지 않음
[class 검색] document.getElementsByClassName('class명칭')[배열순서]
[name 검색] document.getElementsByName('name명칭')[배열순서]
[tag 검색] document.getElementsByTagName('태그명')[배열순서]

JS 실행순서

[1순위] 전역(global) 변수 및 함수
[2순위] 내부 script 태그
[3순위] document.addEventListener('readystatechange', 함수); // 중에서 document.readyState=interactive 일 때
[4순위] DOM에 외부 script 추가
[5순위] document.addEventListener('DOMContentLoaded', 함수);
[6순위] window.addEventListener("DOMContentLoaded", 함수) // DOM(문서 객체 모델)이 로드 된 후 실행된다.
[7순위] document.addEventListener('readystatechange', 함수); // 중에서 document.readyState=complete 일 때
[8순위] window.addEventListener("load", 함수); // 전체페이지 및 리소스(이미지, 스타일시트 등)이 로드된 후 실행된다. window.onload = function() { }; 로 대체가능.

JS 변수 및 함수선언

변수

var(변수 재선언이 가능, 선언전 참조가능)

let(변수 재선언이 불가능, 선언전 참조불가)

const(변수값 재할당 불가)

import, export

개별 함수 import 및 export

export function 함수명() { } // 외부 .js 파일에 선언

import { 함수명 } from '파일명.js';

함수명();

전체 함수(*) import 및 export

import * as 약칭 from '파일명.js';

약칭.함수명();

함수(function)

function 함수명(){}

function(){} // 바로 사용하거나 변수에 저장할 때만 가능

클래스(class)

class 클래스명 { constructor(){} 매서드명(){} }

constructor(){}는 클래스의 초기화 함수이다.

그외

if, else, for, while, switch, try, catch, throw 등

동적으로 다른데이터 불러오기

xhr

// XMLHttpRequest 객체 생성(GET방식)
var xhr = new XMLHttpRequest();
// 요청을 열기 (메서드, URL, 비동기 여부)
xhr.open('GET', '파일명.php?param1=value1¶m2=value2', true);
// 요청 완료 시 호출될 함수 등록
xhr.onload = function() {
    // 요청이 성공한 경우
    if (xhr.status == 200) {
        // 받은 데이터를 처리
        console.log(xhr.responseText);
    } else {
        // 요청이 실패한 경우
        console.error('요청 실패:', xhr.status);
    }
};
// 요청 보내기
xhr.send();

// XMLHttpRequest 객체 생성(POST방식) var xhr = new XMLHttpRequest(); // 요청을 열기 (메서드, URL, 비동기 여부) xhr.open('POST', '파일명.php', true); // 요청 헤더 설정 (필요에 따라 Content-Type 등 설정 가능) xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 요청 완료 시 호출될 함수 등록 xhr.onload = function() { // 요청이 성공한 경우 if (xhr.status == 200) { // 받은 데이터를 처리 console.log(xhr.responseText); } else { // 요청이 실패한 경우 console.error('요청 실패:', xhr.status); } }; // 전송할 데이터 생성 var formData = 'param1=value1&param2=value2'; // 요청 보내기 xhr.send(formData);