WEB/JavaScript
[JavaScript] 클릭 이벤트 : 클릭한 위치에 상자 생성하기
🔻클릭한 위치에 상자 생성하기🔻 좌클릭하면 박스 생성, 우클릭하면 박스 삭제되게 구현한다. 기본 뼈대 클릭한 위치에 상자 생성하기 이벤트
WEB
WEB/JavaScript
[JavaScript] 클릭 이벤트 : 클릭한 위치로 상자 이동하기
🔻클릭한 위치로 상자 이동하기🔻 좌측 상단에 몰려 있는 상자들이 클릭한 위치로 순서대로 이동한다. 클릭 한번당 하나의 상자가 이동하며, 나중에 클릭한 상자는 맨 위에 쌓인다. 기본 뼈대 상자1 상자2 상자3 상자4 상자5 무게중심 맞춰 이동하기 list[index].style.left = event.clientX - 75 + 'px'; list[index].style.top = event.clientY - 75 + 'px'; 클릭시 상자가 이동하는데 무게중심을 상자 가운데 맞추기 위해 상자 크기의 반을 빼준다. 이벤트 상자의 position이 absolute이므로 문서 좌측 상단을 기준 원점이 맞춰져있기 때문에 clientX, clientY 를 사용하여 문서 좌측 상단 기준으로 좌표를 반환받아 상자를 이..
WEB/JavaScript
[JavaScript] 자바스크립트로 css 조작하기
🔻자바스크립트로 css 조작 방법🔻 1. style 프로퍼티 모든 태그는 인라인 스타일 시트와 같은 style 속성을 제공한다. 자바스크립트도 style 프로퍼티를 제공한다. 2. class 조작 간접적으로 class 조작하는 결과가 나온다. 관리차원에서 유용한 방법이다. className 프로퍼티 classList 프로퍼티 참고 : HTML 문서에 CSS를 적용하는 방법 https://steady-record.tistory.com/entry/CSS-HTML-%EB%AC%B8%EC%84%9C%EC%97%90-CSS%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 🔻style 프로퍼티로 조작하기🔻 기본 뼈대 CSS 상자 box1 스타일 조..
WEB/JavaScript
[JavaScript] 이벤트와 Hover Table(3)
🔻마우스 위로 올리면 해당 칸에 이미지 추가하기🔻 마우스가 호버했을 때만 이미지가 생성되고 마우스가 해당 칸을 떠나면 이미지가 삭제된다. 기본 뼈대 이벤트 빈틈으로 이미지가 중복으로 생성되는 것을 방지하기 위해 현재 target의 자식이 1개라도 있는 것을 확인한다. 이미지가 이미 생성되었다면 td 자식으로 이미지가 존재하므로 조건문에 걸려 이미지가 생성되지 않는다. 🔻보조키의 눌림 상태 확인 메서드🔻 event.ctrlKey event.shiftKey event.altKey 해당 보조키를 누르면 true를 반환한다. 🔻ctrl키를 눌렀을 때 다른 이미지 생성🔻 그냥 마우스를 호버했을 때와 Ctrl 키를 누르고 호버했을 때 다른 이미지가 생성된다. 기본 뼈대 동일
WEB/JavaScript
[JavaScript] 이벤트와 Hover Table(2)
🔻마우스 클릭 버튼에 따라 다른 이미지 생성하기🔻 좌클릭을 하면 rect_icon01.png, 우클릭 하면 rect_icon02.png, 휠을 클릭하면 이미지가 삭제되게 구현을 할 것이다. 이미 좌클릭으로 rect_icon01.png가 생성되있더라도 우클릭하면 rect_icon02.png으로 바뀌어야 한다. 기본 뼈대 테이블 이벤트 클릭으로 td위에 img가 생기면서 내가 선택한 객체가 td이면 아직 클릭 전 이미지가 생성되지않아 새로운 이미지만 생성하면 되고, 내가 선택한 객체가 td가 아니라면 이미 이미지가 존재하는 것으로 해당 이미지를 삭제 후 새로운 이미지를 생성한다. 주의할 점은, td위에 img가 생기므로 새로 생성한 img를 td에 연결할 때는 event.target이 아닌 event.cur..
WEB/JavaScript
[JavaScript] 이벤트 버블링, 이벤트 터널링
🔻이벤트가 DOM 요소들 사이에서 전파되는 방법🔻 1. 이벤트 버블링(Event Bubbling) ★★★ 이벤트가 발생한 요소에서 시작하여 상위 요소들로 전파되는 방식이다. 즉, 이벤트가 가장 하위 요소에서 시작되어 상위 요소들로 올라가면서 각각의 요소에서 이벤트를 처리할 기회를 갖게 된다. 2. 이벤트 터널링(Event Tunneling) 이벤트가 상위 요소에서 시작하여 하위 요소로 전파되는 방식이다. 즉, 이벤트가 가장 상위 요소에서 시작되어 하위 요소로 내려가면서 각각의 요소에서 이벤트를 처리할 기회를 갖게 된다. 이벤트 캡쳐링(Capturing)라고도 한다. JavaScript는 기본적으로 이벤트 터널링을 지원하지 않고 이벤트 버블링을 지원한다. 🔻이벤트 버블링🔻 파란색 영역인 p3를 클릭한다면 ..
WEB/JavaScript
[JavaScript]문자열 조작 : template
🔻template🔻 template String, template literals 라고도 한다. ES6(ECMAScript 2015)에서 추가된 문자열 표기법이다. 백쿼트 또는 백틱(`) 사용하여 정의하며, ${}를 사용하여 변수나 표현식을 쉽게 문자열 안에 삽입할 수 있다. JavaScript 문자열 표기법으로 아래 3가지가 있다. 1. 'string' 2. "string" 3. `string` > template string 표기법은 어떤 것으로 하든지 형식은 동일하다. template 사용법 innerHTML을 사용하는 경우 또는 다량의 텍스트를 조작할 때 엔터를 넣을 수 있다.
WEB/JavaScript
[JavaScript] 함수는 1급 객체이다.
1급 객체 "함수는 1급 객체이다." or "First Citizen" 이라는 말이 있다. 함수형 언어에서 볼 수 있는 특징이다.(swift, python 등) 함수를 객체처럼 취급한다. 함수를 값(데이터)으로 사용할 수 있다. 함수가 데이터라면 1. 함수를 변수나 데이터 구조를 담을 수 있다.(저장) 2. 함수를 매개변수를 전달할 수 있다. 3. 함수를 반환값으로 사용할 수 있다. JavaScript에서 함수를 선언하는 방법 1. 함수 선언문 2. 함수 표현식(리터럴) == 익명 함수 함수를 변수나 데이터 구조를 담을 수 있다.(저장) 단계 1. m4를 인식하지못해 원래 이름이 필요없어진다. 흔히 볼 수 있는 상황 p1은 btn1의 클릭 이벤트 전용함수 인데 클릭이 아닌 곳에서 호출도 가능하여 원래의 ..
WEB/JavaScript
[JavaScript] object
객체, object JavaScript에는 클래스가 없다. 하지만 내장 객체를 제공한다. 1. 내장 객체 Array, Date, Math, Object 등 new Array() new Date() Math.메소드() 2. BOM 객체 window, document, form, text, button 등 3. DOM 객체 element, attribute, text, comment 등 (create 문을 통해 만들 수 있는 객체) 4. 사용자 정의 객체 JavaScript에는 클래스가 없어 원하는 형태의 객체를 생성하기 어렵다. 사용자 정의 객체를 사용하면 원하는 형태의 객체를 만들 수 있다. 객체 생성 방법 Object 내장 객체를 사용한다. const obj1 = new Object(); 객체 리터럴 ..
WEB/JavaScript
[JavaScript] (자동)코드 재배치 : hoisting
🔻호이스팅, hoisting🔻 호이스팅에는 변수 호이스팅과 함수 호이스팅이 있는데 호이스팅이라고하면 보통 함수 호이스팅을 의미한다. 함수 호이스팅 자바스크립트를 실행하기 전에, 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다.(코드 재배치) 함수 m2를 정의하기 전에 호출을 먼저하지만 에러나지않고 'm1', 'm2'가 제대로 실행된다. 이런것을 함수 호이스팅이 발생했다고 한다. 변수 호이스팅 변수 선언을 현재 스코프의 최상단으로 끌어올리는 현상이다. 러나 변수의 초기화는 호이스팅되지 않는다. 원래라면 'not defined variable a' 라고 에러가 발생 a를 선언하기 전에 alert으로 a를 호출했다. 호이스팅은 발생하지만 내부적으로 에러를 내자로 합의를 했다.
