본문 바로가기

자바스크립트 (JavaScript)33

defer html 태그 내부에 body 태그 부분에 존재하는 어떤 특정 태그를 자바스크립트를 통해서 사용 하려면 어떻게 해야 할까 ? 태그 내부에 src 속성의 값으로 지정된 Xxx.js 파일이 HTML 구조를 모두 읽고 나서 동작 되도록 만들어야 한다. 따라서, 태그 내부에 defer 라는 속성을 추가 하면 된다. 2023. 10. 29.
달력 예제 const calendar = document.getElementById('calendar'); function renderingCalendar(year, month) { const firstDay = new Date(year, month, 1).getDay(); const lastDay = new Date(year, month + 1, 0).getDate(); calendar.innerText = ''; for (let i = 0; i < firstDay; i++) { const emptyCell = document.createElement('div'); emptyCell.classList.add('cell'); calendar.appendChild(emptyCell); } for (let i = 1; i 2023. 8. 27.
로그인 폼 로그인 1. 태그를 사용 해서 submit을 해도 되고, 태그를 사용 해서 submit을 해도 된다. 2. DOM (Document Object Model) DOM은 웹 페이지의 구조를 트리 형태로 표현 하는 모델 이다. 웹 페이지의 HTML 요소들을 자바스크립트로 조작할 수 있는 방법이다. 3. getElementById() getElementById() 메서드는 주어진 아이디 값을 가진 HTML 요소를 찾아서 반환 한다. 웹 페이지에서 고유한 아이디를 가진 요소를 찾을 때 사용 된다. 위의 경우라면, loginForm, mid, mpw 가 고유한 식별자 == 아이디 이다. 4. addEventListener('submit', function (event) { ... } ) addEventListene.. 2023. 8. 27.
생성자 함수 개념 1. 객체 생성시, 아래와 같이 생성 할 수 있다. 2. 그런데, 객체를 여러개 생성 해야 할 때, 위와 같이 코드를 작성 하면, 불리 하다. 그래서, 생성자를 작성 해서, 객체를 생성 할 수 있다. 3. 생성자 함수명은 관례적으로 대문자로 시작 하는것으로 작성 한다. 함수명 앞에 new 키워드를 붙히면, 즉, new 함수명(); 을 작성 하면, 아래와 같은 알고리즘으로 동작 하게 된다. 6번째 라인과 같이, 빈 객체를 생성 하고, this에 할당 한다. 그 다음에, this에 프로퍼티들을 추가 한다. 실제로 this = {} 코드는 작성된 코드가 아니지만, 저렇게 동작 한다는 것이다. 일일히 객체에 리터럴을 작성 하지 않고, 훨씬 빠르고 일관성 있게 객체를 생성 할 수 있게 된다. 4. 예시 01) 위.. 2023. 8. 27.
변수, 호이스팅, TDZ (Temporal Dead Zone) 요약 변수와 변수명 변수 == variable 하나의 값을 저장 하기 위해 확보된 메모리 공간 자체 / 변할 수 있는 데이터 변수명 메모리 공간을 식별 하기 위한 식별자 변수 선언 / 할당 / 초기화 변수 선언 변수를 정의 하는 것을 의미 한다. var, let, const 키워드를 사용 한다. 변수 할당 변수가 선언된 후 대입 연산자 (=) 를 통해 값을 넣어 주는 것을 의미 한다. 변수 초기화 변수를 선언함과 동시에 값을 넣어 주는 것을 의미 한다. 호이스팅 (Hoisting) 호이스팅 변수 선언 및 함수 선언이 된 변수 또는 함수에 대해, 코드가 이동 되지는 않지만, 코드가 최상위로 끌어 올려진 것 처럼 동작하는 현상을 말한다. 주의할점 선언이 끌어 올려지는 것 처럼 동작하는것 뿐이지, 할당이 끌어 올려.. 2023. 8. 20.
변수, 호이스팅, TDZ (Temporal Dead Zone) 개념 1. // var는 한번 선언된 변수를 다시 선언 할 수 있다. var name = 'mike'; console.log(name); // mike var name = "jane"; console.log(name) // jane 2. // let은 한번 선언된 변수를 다시 선언 할 수 없다. let name = 'mike'; console.log(name); // mike let name = 'jane'; console.log(name); // error ! 3. // var는 선언하기 전에 사용할 수 있다. // >> 호이스팅 이라 한다. console.log(name); // undefined. var name = 'mike'; 4. // var는 선언하기 전에 사용할 수 있다. // 실제 작동 되는 .. 2023. 8. 20.