★ Template String %s, %d, %f etc.. 사용 ex) console.log('이름은 %s이고, 나이는 %d살입니다.', name, age); 문자를 나타내는 형식 //1. 'string' //2. "string" //3. `string` : `(역따옴표, backtick, backquote) 형식 ` 문구 입력 ${변수명}` let message = `이름은 ${name}이고, 나이는 ${age}입니다. 만 나이로${age -1}살입니다. 현재 시각은 ${new Date()} 입니다.`; alert(message); ★ Event 이벤트 버블링(Event Bubbling) vs 이벤트 터널링(Event Tunneling, 이벤트 캡쳐링(Event Capturing) 자바스크립트는 기..
★ 클로저, CLOSURE 아래와 같은 상황을 클로저라고 부름 지역 함수에서 밖의 상위 변수를 사용하는 구문 존재 > 상위 지역 변수 소멸(X) > 임시 공간에 살려둠. > 나중에 호출 위해서 //지역 함수 return function() { //여기서 a가 찍힌다?? //- 지역 함수에서 밖의 상위 변수를 사용하는 구문 존재 > 상위 지역 변수 소멸(X) > 임시 공간에 살려둠. > 나중에 호출 위해서 console.log('return : '+ a); }; ■ 지역별 함수 function outer() { //지역 변수 (outer) let a = 10; console.log('a', a); //지역 함수(outer) function inner() { console.log('inner'); //지역 ..
★ 화살표 함수, Arrow Function 자바의 람다 > 익명 객체의 추상 메소드를 표기하는 문법 자바스크립트의 화살표 함수 > 익명 함수를 표기하는 문법 화살표 함수 내의 this는 무조건 window를 참조한다.(**** 조심!!) 화살표 함수를 이벤트에 사용할 때 주의!!! 화살표 함수 = 익명 함수 //3. 화살표 함수 = 익명 함수 const f3 = () => { console.log('f3'); }; f3(); ■ 기존 사용 형식 1. 함수 선언문 function f1() { console.log('f1'); }; f1(); 2. 함수 표현식(리터럴) = 익명 함수 //2. 함수 표현식(리터럴) = 익명 함수 const f2 = function() { console.log(f2); }; ..
★ 문제 1 아래와 같은 문서를 생성하시오. 조건 숫자키를 누르면 하단의 박스(div)안에 이미지를 생성하시오. 상단 숫자키 사용 가능 우측 숫자키패드 사용 가능 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 2 아래와 같은 문서를 생성하시오. 조건 색상과 이름을 입력하면 테이블에 추가하시오. ■ HTML 코드 테이블 색상입력 색상 : 이름 : 색상명 미리보기 노랑 #FFFF00 풀색 #ACEF12 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 문제 3 아래와 같은 문서를 생성하시오. 조건 방향키 조작에 따라 테이블을 행/열을 조작하시오. 좌우 : 열 추가/삭제 상하 : 행 추가/삭제 셀에 숫자를 할당하시오. ■ HTML 코드 1 2 1 2 ■ CSS 코드 ■..
★ ManiPulation DOM 태그/속성/텍스트 조작 innerHTML > 문제점 > 모든걸 문자열로 처리.. 1. innerHTML을 이용한 방식 div1.innerHTML = ''; 2. DOM을 이용한 방식(잘안씀) btn1.addEventListener('click', function() { //2. //2.1 태그 생성 createElement() const input = document.createElement('input'); // console.log(input.nodeType); console.log(input.nodeName); //2.2 속성 추가 setAttributeNode() const type = document.createAttribute('type'); //type=""..
★ EVENT BOM 방식 //BOM 이벤트 window.document.all.btn1.onclick = function() { alert('BOM'); }; DOM 방식 //DOM 이벤트 document.getElementById('btn2').addEventListener('click', function() { alert('DOM'); }); ■ BOM과 DOM의 차이 1. BOM은 이벤트 매핑을 관리 X, DOB 이벤트 매핑을 관리 O const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); //BOM은 이벤트 매핑을 관리 할 수 없다. btn1.onclick = m1; btn1.onclic..
★ AXIS 본인을 기준으로 주변의 요소(부모, 자식, 형제)를 검색하는 도구 HTML 코드 Axis 할아버지 큰아버지 사촌 아버지 큰형 조카 작은형 나 큰애 둘째 손자 막내 동생 막내동생 조카 작은아버지 사촌 CSS 코드 자식 태그 me.childNodes : 자식 노드들 me.firstChild : 첫번째 자식노드 me.lastChild : 마지막 자식노드 document.getElementById('btn').onclick = function() { const me = document.getElementById('me'); //나로부터 다른 사람 검색 // me.className = 'check'; //자식 태그 //- me.childNodes : 자식 노드들 //- me.firstChild : 첫..
★ BOM, DOM 태그조작 1. 태그 검색(BOM, DOM) 2. 속성 조작(BOM, DOM) 3. PCDATA 조작(DOM) > innerText, textContent ★ 콘텐츠 조작 시작 태그와 끝 태그 사이의 내용물 조작 1. innerText 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티 비표준(MS) 태그를 인식 X // div1.innerText ='홍길동'; alert(div1.innerText); div1.innerText = '홍길동'; //결과는 똑같이 escape 되서 나옴 2. innerHTML 시작 태그와 끝 태그 사이의 문자열 읽기/쓰기 프로퍼티 태그 인식 O div1.innerHTML = '홍길동'; //동적으로 태그 생성하기 div1.innerHTML = '' /..
