자바스크립트(javascript)16 [자바스크립트 프로젝트] 일정 관리 웹페이지 💁♀️프롤로그 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스자바스크립트의 개념만 공부하지 않고 실제 프로젝트를 만들어 보는 것이 실력을 향상시키는 데 더 좋다고 생각했습니다. 그래서 만든 일정 관리 웹페이지! 완성하기까지 우여곡절이 많았지만 결과론적으로 만족! 어떻게 만들었는지, 무슨 문법을 썼는지 최대한 자세히 기록해보겠습니다. 📋소개 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스기능을 구현하는 것도 좋지만 디자인적인 부분도 함께 보여줘야 사용자들이 만족할거라 생각했습니다. 그래서 프로젝트를 구현하면서 디자인도 기능 못지 않게 관심을 기울였는데요. 현재 유행에 맞는 디자인을 적용하고 싶어 곰곰히 생각하다 레트로라는 키워.. 2024. 8. 2. [javascript] 응용 기록 7 오브젝트(object)사람 = 특징(이름, 성별, 키..), 동작(말하기, 걷기)속성들과 액션으로 이뤄진 집합체 = 객체 객체 생성하기{ }를 통해 객체를 생성할 수 있다.key: value 값으로 이루어져 있다.메서드(method) - 속성 중에 값이 함수인 것을 메서드라고 부른다. this객체가 메서드를 실행했을 때, 메서드를 실행한 주체 객체를 의미한다.전역 영역에서 this를 호출하면 최상위 객체(window 혹은 global)가 출력된다. 생성자(constructor)비슷한 속성과 함수를 가진 객체들을 찍어낼 수 있는 틀구조는 같되 각각의 속성의 값은 개별적으로 다 다른 객체들을 만들 수 있다. 1) function, 생성자 함수를 이용해서 만들기function Person(nickName, a.. 2023. 8. 25. [javascript] 응용 기록 6 이벤트 위임의 문제점target 속성을 이용하면 버튼 안의 아이콘이나 글자를 잡는다.(버튼 자체를 잡지 못함) 해결 방안1) css이벤트를 받지 않을 대상에 pointer-event: none; 을 부여한다.-> 하위에 있는 자식들도 target으로 잡을 수 없기 때문에 복잡한 구조에서는 적절하게 사용해야 한다. 2) 자바스크립트부모를 타고 올라가서 조사하는 방법 3) closetelem1에 해당하는 가장 가까운 e.target의 부모를 잡아내는 것 2023. 8. 25. [javascript] 응용 기록 5 thisaddEventListener에서 this는 이벤트 실행 객체를 의미한다. 이벤트 객체함수가 이벤트 핸들러로 실행이 되면 첫 번째 매개변수 자리에 자동으로 이벤트 객체가 들어온다.이벤트 객체 - 지금 발생한 이벤트에 대한 정보들을 담고 있는 객체 currentTargete.currentTarget === this;내가 지금 클릭한 대상이 아닌 이벤트가 등록되어있는 객체이다. target내가 지금 클릭한 애를 보여준다. 클릭한 부분에 있는 요소를 잡아낸다. 이벤트 위임for (let i = 0; i for문을 돌리게 되면 용량을 많이 차지해서 속도가 느려지는 문제가 발생한다.-> 이벤트 위임을 통해 이벤트를 한번만 실행하게 한다. 문제점하지만, 이벤트 위임을 이용하면이벤트가 발생하면 이벤트 객체가 .. 2023. 8. 25. 이전 1 2 3 4 다음
