09009

1. const, letconst는 변수가 사용되면 다시 할당할 수 없다. (상수이므로 변경 불가능)const name = "mbappe";name = "haaland"; // errorconsole.log(name); let은 const와 다르게 새로운 값을 가질 수 있고 다시 할당할 수 있다. (변경 가능)let name = "mbappe";name = "haaland";console.log(name); // haaland  2. Arrow Function// ES5var example = function example(a, b) { console.log(a, b);};// ES6let example = (a, b) => { console.log(a, b);}  3.Template Lite..

function main(x) { x();}main(function sayHi() { console.log('안녕');}); 콜백함수어떤 함수의 인자로 전달된 함수 입력function main(x) { console.log(x);}function sayHi() { console.log('안녕');}main(sayHi); 출력[Function: sayHi]  입력function main(x) { x();}function sayHi() { console.log('안녕');}main(sayHi); 출력안녕   아래 코드의 결과는 모두 똑같다..function main(x) { x();}function sayHi() { console.log('안녕');}main(sayHi)..

this : 객체를 가리키는 키워드'this는 함수를 호출한 객체이다' 입력함수 안에 있는 this 값은 함수를 호출한 객체이다.아래 코드에서 main() 함수를 직접적으로 호출한 객체는 window이다.(this 값: window)function main() { console.log(this);}main(); // window.main(); 과 같다. 출력Window..   입력const object = { name: "별코딩", main: function() { console.log(this); }}object.main(); 출력this는 함수를 호출한 객체이다. → 함수를 호출한 객체가 누구인지만 중요하다.main() 함수는 object라는 객체가 호출시킨 것이다...

클래스const User = function (name, age) { this.name = name; this.age = age; this.showName = function() { console.log(this.name); };};const neto = new User("Neto", 28);class User2 { constructor(name, age) { this.name = name; this.age = age; } showName() { console.log(this.name); }}const toni = new User2("Toni", 19);neto.showName(); // Netotoni.show..

변수 var : 한번 선언된 변수를 다시 선언 가능var name = 'Mike';console.log(name); // Mikevar name = 'Jane';console.log(name); // Jane let은 불가능let name = 'Mike';console.log(name); // Mikelet name = 'Jane';console.log(name); // ( error 발생 ) var는 선언하기 전에 사용 가능var name;console.log(name); // undefinedname = 'Mike';console.log(name); // Mike 상수const는 리터럴 표기법으로만 가능// 가능let name; // let은 선언만 해도 가능name = 'Mike';// 가능var ..

/* 년.월.일 시간으로 변환 */ const formatDate = (dateString) => { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hour = String(date.getHours() % 12 || 12).padStart(2, '0'); // 12시간 형식으로 변환하고 0시는 12시로 처리합니다. const minute = String(date.getMinutes()).padStart(2, '0'); c..

핵심 API DOM 조작 - 엘리먼트 접근 : ~.getElement(s)By~, parent, children, closest(특정 위치에서 가장 가까운것), querySelector, *querySelectorAll - 스타일 변경 : (엘리먼트).style.~ , class 조작 - 내부 값 변경: innerText, (주의 사항 innerHTML 사용 금지 - 초기화 작업 빼고) - 엘리먼트 생성: createElement - 엘리먼트 붙이기: appendChild - 엘리먼트 삭제 안녕 X 안녕 X 안녕 X 안녕 X 버튼1 버튼2 버튼3 버튼4 버튼5 위의 사례처럼 웬만하면 스타일 직접 건들지 말것 안녕 X 안녕 X 안녕 X 안녕 X 버튼1 버튼2 버튼3 버튼4 버튼5 안녕 X 안녕 X 안녕 X..

자바스크립트에서 타이머 함수를 사용하면 특정 시간마다 코드를 실행시킬 수 있다. • 타이머 함수 setInvertal(함수, 시간) 특정한 시간마다 함수 실행 setTimeout(함수, 시간) 특정한 시간 후에 함수 실행 clearInterval(식별번호) setInvertal() 함수로 설정한 타이머 제거 clearTimeout(식별번호) setTimeout() 함수로 설정한 타이머 제거 포털 사이트 실시간 검색어는 일정 시간마다 서버에 데이터를 요청하여 사용자에게 보여주는데, 여기에서 setInvertal() 함수가 사용된다. 프레임 애니메이션 아래 소스코드를 실행하면 이미지가 1초에 20번 전환되면서 사람이 달리는 애니메이션을 확인할 수 있다. 그리고 setInvertal() 함수를 사용하면 다른 ..

인터넷 웹 사이트의 회원가입 양식에서 전화번호 또는 주민등록번호를 입력할 때 앞자리를 입력하자마자 자동으로 뒷자리를 입력하는 칸으로 이동하는 경우가 있다. → 첫번째 입력 양식에 여섯번째 글자를 입력하면 자동으로 두번째 입력 양식에 포커스가 맞추어지도록 자바스크립트를 사용하였기 때문에 볼 수 있는 것이다. 아래 소스코드를 통해 예시를 확인해보자. ✍ 입력 - 클릭 onkeydown: 키를 눌렀을 때 발생하는 키보드 이벤트 --------------------------------------- event.keycode - 백스페이스(←) : 8 - 엔터(enter) : 13 - ESC : 27 --------------------------------------- 소스코드를 실행하면 아래와 같이 주민등록번..

이벤트 키보드를 누르거나 마우스를 클릭하는 것처럼 어떤 현상이 프로그램에 영향을 미치는 것을 의미한다. 이벤트를 연결하기 위해 아래와 같은 코드를 작성해야 한다. window.onload = function() { }; 이벤트 리스너: 문서 객체의 이벤트 속성에 지정된 함수 이벤트 연결 이벤트 모델 : 문서 객체에 이벤트를 연결하는 방식 인라인 이벤트 모델: HTML 태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식 * 고전 이벤트 모델 문서 객체의 이벤트 속성에 함수를 지정한다. 이 때 지정된 함수를 이벤트 리스너라고 한다. ✍ 입력 버튼 💻 출력 * 이벤트 발생 객체 - 이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생한 자기 자신을 의미한다. 아래 소스코드는 이벤트 리스너와..

글자 조작 문서 객체 내부에 있는 글자를 조작할 때 아래와 같은 속성을 사용한다. textContent 문서 객체 내부 글자를 순수 텍스트 형식으로 가져온다 innerHTML 문서 객체 내부 글자의 HTML 태그를 반영하여 가져온다 ✍ 입력 💻 출력 1. textContent 속성을 사용하면 입력한 글자가 body 태그 내부에 바로 들어간다. 2. innerHTML 속성을 사용하면 HTML 태그를 적용하여 내부 글자를 변경한다. 스타일 조작 자바스크립트로 CSS 속성 값을 추가, 제거, 변경 가능 → 문서 객체의 style 속성을 변경하면 된다. 자바스크립트에서는 특수문자 '-'를 식별자에 사용할 수 없기 때문에 2)처럼 작성하여야 한다. (연결된 단어의 첫 글자를 대문자로 변경해야함) 1) 에러 발생 ..

• 문서 객체 : HTML에서 요소라고 하던 것을 자바스크립트에선 문서 객체라고 칭한다. 자바스크립트에서 문서 객체를 조작한다 = HTML 태그를 조작한다 자바스크립트를 사용하여 문서 객체를 조작해서 태그를 추가, 수정, 제거 가능 HTML 태그의 내용을 변경할 수 있고 출력되는 모양이나 색상을 동적으로 변경 가능 • 정적 생성: 웹 페이지 처음 실행 시 HTML 태그로 적힌 문서 객체를 생성하는 것 • 동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용하여 문서 객체를 생성하는 것 • 문서 객체 모델: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 의미 실행 순서에 따른 문서 객체 사용 오류 웹 브라우저는 HTML 코드를 위쪽에서 아래쪽으로 실행한다. ✍ 입력 Hello - 1 Hello -..