본문 바로가기

Front-End/javascript19

[Javascript 기초] Event의 이해 및 Event 연결 Event는 무언가 일어나는 행위나 액션을 말합니다. Event는 DOM에서 마우스 클릭, 키보드를 누르는 것처럼 사용자의 액션의 의해서 발생하거나, API들이 비동기적 작업을 진행하기 위해 생성할 수 있습니다. [사용자가 발생시키는 이벤트] : click, mouseover, mousemove, mousewheel, scroll ... [시스템이 발생시키는 이벤트] : load, error 다음은 Event 연결 방법에 대해 알아보겠습니다. 1. onclick onclick의 경우 이전에 작성된 구문이 덮어씌워집니다. 때문에 onclick보다 addEventListener를 사용하여 이벤트를 연결시킵니다. 링크 2. addEventListener 기존에 작성된 구문을 유지하고, 추가로 이벤트를 연결합니.. 2023. 7. 18.
[Javascript 기초] DOM의 이해 및 DOM 선택 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction DOM이란 Document Object Model로 문서 객체 모델을 말합니다. DOM은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕고, 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜 주는 역할을 담당합니다. DOM의 탐색 방법에 대해 알아보겠습니다. 1. 자식요소 탐색 2. 형제요소 탐색 3. 부모요소 탐색 1. 자식요소 탐색 1) 부모요소.querySelector() 2) 부모요소.children - 유사배열로 출력 *유사배열 : 배열처럼 .. 2023. 7. 17.
[Javascript 기초] 전개 연산자 전개 연산자는 배열의 요소나 객체를 전개해주는 연산자입니다. 배열이나 객체를 복사하여 여러 개의 배열이나 객체를 병합할 수 있습니다. // 구문 myFunction(...iterableObj); 1. 배열에서의 전개 연산자 // 배열 복사 let colors = ["red", green, "blue"]; let colors2 = ["pink, ...arr"]; console.log(arr2); // ['pink', 'red', 'green', 'blue'] // 배열 병합 let hobby = ["game", "sports", "reading"]; let hobby2 = ["dance", "climbing", "skating"]; let newHobby = [...hobby, ...hobby2]; con.. 2023. 6. 3.
[Javascript 기초] 비구조화 할당(구조 분해 할당) 비구조화 할당(구조 분해 할당) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 표현식입니다. const colors = ["red, green, yellow, blue, black"]; const [color1, color2, color3, color4] = colors; console.log(color1); // red console.log(color2); // green console.log(color3); // yellow console.log(color4); // blue console.log(color5); // black const peopleA = { name : "Tom", age : 23, isFemale : false, hobby : "exercise" } .. 2023. 6. 3.