본문 바로가기
반응형

Javascript50

[Javascript] 반복문 for.. in 과 for.. of 의 차이 지난 포스팅에서 배열이 내장함수인 forEach()에 대한 기초적인 내용들을 정리를 해보았습니다. forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초 프로그램밍을 공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 kincoding.com 그러면서 for.. in 반복문도 함께 살펴보았는데요, 이놈의 Javascript에는 for.. of 라는 반복문 형태가 또! 존재합니다. 비슷한 게 뭐가 이리 많어, 헷갈리게! 싶은데요. 역시나 자.. 2023. 1. 5.
forEach, for...in을 이용한 반복문 기초(ft. 배열, 객체 Data 뽑기) forEach, for...in을 이용한 반복문 기초 프로그램밍을 공부하면서 사람에게 가장 쉽게(?) 다가오는 기능은 바로 '반복문'과 '조건문'이라고 생각합니다. 왠지 내가 코딩 천재가 된 것 같은 착각 아닌 착각도 쉽게 빠뜨려주곤 합니다. 그렇지 않은가요? Javascript에는 다양한 for 문이 존재해서 자칫 혼란스럽기도 한데요, 이번 포스팅에서는 반복문 사용 레벨을 한단계 도약시켜주는 느낌을 갖게 하는 forEach()와 for.. in 반복문에 대해서 정리하고 가보겠습니다 forEach() 반복 forEach는 뭔가 반복문을 돌면서 각(each) 개별로 수행해주는 반복문 같은 느낌이 듭니다. 어떻게 동작하는 지 살펴보기 위해서 다음과 같이 예제 코드를 작성해보았습니다. const nums = .. 2023. 1. 4.
이벤트 버블링 그리고 e.target, e.currentTarget 기초 정리 웹페이지를 해석해서 보여주는 브라우저(Browser)의 동작방식 중에는 '이벤트 버블링(Event Bubbling)'이라는 현상이 존재합니다. 왠지 용어가 일반적이지 않고 뭔가 전문가 포스 같은 느낌이 나서 괜히 어렵게 느껴지는 것도 같습니다. 일반적인 사용 케이스에서 살펴보자면, 버튼을 누른 것도 아니고 배경화면을 클릭한 것 뿐인데도 모달창이 닫히게 되는, 뭐 그런 현상들이 바로 이벤트 버블링 현상이 만들어내는 경우입니다. 이번 포스팅에서는 이러한 '이벤트 버블링'과 관련하여 "전문적"이 아닌 "현상적"인 이해를 경험 해보기로 합니다. 이벤트 버블링(Event Bubbling) 일단 테스트를 위한 코드를 간단하게 작성해보도록 합니다. div 태그로 박스를 세 개 만들었습니다. 이벤트 버블링 아래 이미지.. 2023. 1. 3.
Alert창 버튼 클릭으로 띄우기(ft. modal, 모달, 팝업) 웹 사이트를 운영하다보면, 방문객들에게 이런 저런 안내가 필요해집니다. 아주 아주 예전에는 '팝업창'이라는 형식으로 사실상 브라우저 창을 작은 크기로 새로 띄우는 방식을 이용하곤 했었지만(← 요즘 시대에서는 공부할 필요 없는 내용) 최근 웹환경에서는 브라우저 창을 새로 띄우는 팝업은 보안취약 등의 이유로 거의 사용하지 않습니다. 요즘은 보통 Modal 이라고 부릅니다. Javascript로 Alert 띄우기 자바스크립트로 띄우는 브라우저에 기본 내장되어 있는 Alert은 모양이 별로 예쁘지 않습니다. 그래서 주로 개발자들이 테스트를 위해서 주로 사용하고, 웹사이트 방문객들에게 보여질 내용은 보통 그렇게 띄우지 않습니다. 크롬 개발자모드(F12) → Console 창에 다음과 같이 타이핑하고 Enter를 .. 2022. 12. 31.
반응형