JavaScript
-
[JavaScript] 파일 드롭 이벤트(File Drop Event)프로그래밍/JavaScript 2022. 12. 31. 19:08
자바스크립트를 이용하여 파일 드롭 기능을 구현한다. 이벤트 종류 설명 drop 드래그한 파일이 영역에 드롭되었을 때 발생 dragover 드래그한 파일이 영역에 머물러 있을 때 발생 [HTML 소스] 파일을 올려놓으세요 [CSS 소스] #dropZone { margin-top: 5px; border: 1px solid rgb(121, 121, 121); width: 700px; height: 200px; } #dropZoneTitle { display: flex; justify-content: center; margin-top: 80px; } [JavaScript 소스] const dropZone = document.getElementById("dropZone"); // drop 이벤트를 사용하기 위해서..
-
JavaScript { ... } 문법프로그래밍/JavaScript 2022. 12. 3. 14:45
let a = {name:"minjae", age:27} let b = {...a} let c = a console.log(b) // {name:"minjae", age:27} console.log(c) // {name:"minjae", age:27} 위 코드를 보면 b와 c의 콘솔 결과 값은 같은 것을 확인할 수 있지만 차이점은 분명하다. b와 c의 차이점은 무엇일까? b는 a을 복사할 때 새로운 객체를 생성하여, 생성된 객체의 주소를 바라보게되고 c은 a 객체의 주소를 바라보도록 한다. 따라서 아래와 같은 결과가 나온다. console.log(a == b) // false console.log(a == c) // true 값 추가 let a = {name:"minjae", age:27} let b =..
-
JavaScript 이벤트 전파(Event Propagation)프로그래밍/JavaScript 2022. 10. 14. 07:44
이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정으로 document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어난다. 이벤트 전파 방식으로는 버블링, 캡처링 두가지 방식이 있다. 버블링은 특정 요소에 이벤트가 발생하면 그 요소부터 가장 최상단의 조상 요소를 만날 때까지 상위 요소로 올라가면서 해당 이벤트가 전달되는 특성을 의미하고 그에 반해 캡쳐링은 이벤트 버블링과는 반대로 특정 요소에 이벤트가 발생하면 window 에서 시작해서 이벤트 타깃 요소를 만날 때까지 하위 요소로 내려가면서 해당 이벤트가 전달되는 특성을 의미한다. 먼저 버블링 방식을 예제를 통해 확인해보자. 박스 안에 여러곳을 클릭하세요 위 코드를 살펴보면..
-
JavaScript 이벤트프로그래밍/JavaScript 2022. 10. 12. 07:34
대부분의 함수는 사용자가 화면에 버튼을 클릭하거나 항목을 선택했을 때 실행된다. 이처럼 버튼을 클릭하거나 항목을 선택하는것을 이벤트라고한다. 이벤트는 웹 브라우저가 알려주는 HTML 요소애 댜한 사건의 발생을 의미하며 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행한다. 따라서 자바 스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고한다. 이벤트 타입 이벤트 타입은 발생한 이벤트의 종류로 이벤트 명이라고도한다. 주요 이벤트 타입으로는 마우스 이벤트, 키보드 이벤트, 문서로딩 이벤트, 폼 이벤트가 있다. 마우스 이벤트 종류 설명 click 사용자가 HTML요소를 클릭했을때 발생 dbclick 사용자가 HTML요소를 더블클릭했을때 발생 mousedown 사용자가 요소위에서 마우..
-
JavaScript 폼객체프로그래밍/JavaScript 2022. 10. 11. 20:32
폼객체는 웹 문서 내 여러 폼 요소가 존재할 경우 특정 폼 요소를 다루기 위해 사용한다. 폼에 접근하는 방법으로 form를 객체화 시켜 변수로서 사용 가능하다. 폼 객체를 활용하여 input내 value 값을 간단하게 접근하여 객체로서 사용할 수 있다. const id = document.myform.userid.value; // apple const id = frm.userid.value; // frm내 name이 userid인 요소의 값 = apple const id = frm.elements[0].value; // frm내 요소 중 인덱스 0번인 요소의 값 = apple const id = frm.element['userid'].value; // frm내 요소 중 name이 userid인 요소의 값..