★ 알고리즘 1 문서를 클릭하면 해당 위치에 이미지를 추가 ■ HTML 코드 X ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 2 문서를 클릭하면 해당 위치에 이미지를 추가 m01.png ~ m10.png 무작위로 추가 이미지를 최대 10개까지 출력 10개가 넘어가면 오래된 순서대로 삭제 ■ HTML 코드 X ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 3 마우스를 올리면 이미지를 이동. 마우스 접근 방향에 따라 이미지 이동 방향을 다르게 함. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 4 발자국이 눌려진 곳은 점점 흙이 쌓인다. 누르는 횟수가 증가할 수록 배경 이미지를 어둡게 한다. td.style.backgroundCo..
★ Scroll에 반응하는 화면설계 window.onscroll : 스크롤을 컨트롤하는 함수 HTML 코드 Title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aliquid, facilis maxime, tempora, fuga voluptatem perferendis excepturi vitae aliquam sunt enim minus facere harum in! Nulla, itaque ex corrupti qui omnis nostrum quo consequatur cupiditate cumque molestias aliquam assumenda totam ratione porro. Deleniti veritati..
★ 겹치는 이미지 어떤 태그들이 깔려있는지 볼 수 있는 방법 특정 포인트에 겹쳐있는 모든 태그? 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); }; ..
