★ 겹치는 이미지 어떤 태그들이 깔려있는지 볼 수 있는 방법 특정 포인트에 겹쳐있는 모든 태그? document.elementFromPoint document.elementsFromPoint console.log(document.elementFromPoint(x,y)); console.log(document.elementsFromPoint(x,y)); 실행 결과 ★ Transform 을 JavaScript에서 작동하기 ★ 상위 메뉴 만들기 HTML 코드 CSS 코드 JavaScript 실행 결과 ★ Select 박스를 이용한 이미지 표출 HTML 코드 고양이 고양이1 고양이2 고양이3 고양이4 고양이5 CSS 코드 JavaScript 실행 결과 ★ 배경 이미지를 이용한 응용 HTML 코드 배경 이미지 C..
★ JAVASCRIPT 로 CSS 조작하기 불편한 방법 //BOM // box.style = 'font-size : 2rem;'; //DOM // box.setAttribute('style', 'font-size : 3rem;'); //관리 불편;; > 모든걸 문자열로 조작 box.style = 'backgroud-color : black; color : white; font-size : 3rem;'; 유용한 방법 box.style.color = 'blue'; box.style['color'] = 'white'; box.style.backgroundColor = 'black'; box.style['background-color'] = 'white'; box.style['font-size'] = '3rem..
★ 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..
