반응형 WebDev/JS-TS17 JS(자바스크립트)의 이벤트 버블링과 캡처링 알아보기 자바스크립트 이벤트 전파와 정지 방법 웹 개발을 하다 보면 자바스크립트 이벤트 전파에 대해 이해하는 것이 중요한데(부트캠프할때 이것때문에 애먹은 적이 있음)이벤트 전파는 크게 두 가지 방식이 있다.버블링과 캡처링, 이 두 가지 이벤트 전파 방식과 이를 제어하는 방법에 대해 알아보자버블링버블링은 이벤트가 자식 요소에서 부모 요소로, 최종적으로는 최상위 요소까지 전파되는 현상ex) 클릭 이벤트가 발생하면 다음과 같은 순서로 버블링 발생aTag -> .child -> .parent -> body -> window버블링의 단계이벤트가 목표 요소에서 시작이벤트가 부모 요소로 점차 전달이벤트가 최상위 요소(루트)까지 도달만약 이벤트가 특정 요소에서 더 이상 전파되지 않도록 하고 싶다면, event.stopPropa.. 2024. 7. 9. JS(자바스크립트)의 console.메소드() 알아보기 console생각 보다 콘솔에 이렇게 많은 메소드가 있는지 몰랐어요...몰랐던 내 자신 자바스크립트한테 미안합니다.. 파도파도 뭐가 나와요...그래서 나 말고도 몰랐던 분들을 위해 간략하게 적고 떠나겠습니다 .log()일반 메시지 출력.warn()경고 메시지 출력.error()에러 메시지 출력.dir()속성을 볼 수 있는 객체를 출력.count()메소드 호출의 누적 횟수 출력.countReset()메소드 호출의 누적 횟수 초기화.trace()메소드 호출 스택을 추적해 출력.clear()콘솔에 기록된 메시지 모두 삭제콘솔에 타이머가 시작해서 종료되기까지의 시간을 출력.time().timeEnd()다 아시는 내용일 수도 있지만 몰랐던 분들을 위해 콘솔 관련 메소드를 찾아보았습니다.! 전 trace 메소드 보.. 2024. 7. 8. JS(자바스크립트)의 기본형과 참조형에 대해 조금 더 공부하자 저번글에는 얕게 알아보았는데 이번에는 깊게 알아보자 ㅎㅎ2024.06.03 - [WebDev/JS-TS] - JS(자바스크립트) 자료형(타입)/원시타입에 대해 공부하자! JS(자바스크립트) 자료형(타입)/원시타입에 대해 공부하자!자바스크립트도 자료형이 있다.하지만 덜 엄격하기 때문에 그냥 쓰는 경우가 많은 것 같다.(그래서 타입스크립트가 떴겠지) 그러므로 알아보자 자바스크립트의 자료형!오늘은 원시 자료형만!s-aha-dev.tistory.com이전 글기본형과 참조형의 구분 기준복제의 방식기본형 - > 값이 담긴 메모리 주소 값을 바로 복제참조형 - > 값이 담긴 주소 값들로 이루어진 묶음을 가리키는 주소값을 복제불변성의 여부기본형 - >불변성을 띔참조형 - > 불변성을 띄지 않음메모리를 기준으로 다시한번.. 2024. 6. 15. JS(자바스크립트)의 객체에 관해 알아보자 객체는 개인적으로 무언갈 표현하기 위해 존재한다고 생각한다. 자동차로 생각한다면 문의 자재, 엔진, 연료종류, 타이어 종류 등 그 모든 것들이 합쳐져자동차라는 것을 만드는 것이다. 그걸 표현하는게 객체이지 않을까 하는 근본적인 생각 후에 자바스크립트의 객체를 공부하자!객체는 배열처럼 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.배열 파트 처럼 코드로 알아보자! 객체 생성 // 객체 리터럴 방식 {}로 객체를 생성// 속성과 값을 콜론(:)으로 구분하고. 각 속성과 값은 쉼표(,)로 구분// 프로퍼티로 이루어진 객체는 name(키), name의 값(value)은 SAHA로 // 키와 밸류를 합쳐서 프로퍼티라 부른다. let person = { name: "SAHA", age: 30, gend.. 2024. 6. 14. JS(자바스크립트)의 배열에 관해 학습하자! 변수는 한개의 값을 저장해놓기 위해 사용하는데 여러개의 값을 저장해놓으려면 어떻게 해야할까?배열을 사용하면 여러 개의 값을 저장하고 관리할 수 있는데, 자바스크립트의 배열과 배열 메소드에 대해서 알아보자!Array// 배열 생성// 대괄호에 값을 넣어주면 할당 끝// 각 요소는 쉼표로 구분하자let fruits = ["사과", "바나나", "오렌지"];// 배열의 크기 지정// 크기가 5인 배열을 생성자함수로 생성하기let numbers = new Array(5);// 배열 요소 접근// 인덱스는 0부터 시작한다// 크기가 4라면 인덱스는 0 1 2 3let fruits = ["사과", "바나나", "오렌지"];console.log(fruits[0]); // "사과"console.log(fruits[.. 2024. 6. 13. JS(자바스크립트)의 함수에 대해서 학습하자 어느 언어든 함수는 중요하다고 생각합니다. 여러 줄 작성해야할 코드를 많이 줄일 수 있고 어느 역할을 하는지 이름만 잘 부여한다면,가독성도 좋다고 생각하니까요! 그러면 자바스크립트 함수를 알아보겠습니다!Function(함수)함수정의함수 선언문함수 선언문은 가장 일반적인 함수 정의 방식함수 선언문으로 정의된 함수는 함수 호이스팅에 의해 코드 어디에서든 호출 가능 greet('SAHA') // 가능 function greet(name) { console.log(`Hello, ${name}!`); } 함수 표현식함수 표현식은 함수를 변수에 할당하는 방식으로 정의함수 이름은 생략이 가능하다.함수 표현식으로 정의된 함수는 변수 호이스팅에 의해 변수 선언 이전에는 사용할 수 없다.const gr.. 2024. 6. 11. 이전 1 2 3 다음 반응형
