초중고등학생 자바스크립트 교재

📘 12.2.1 이벤트 정보 확인하기 - 조용한 정보 수집가가 되어보기여러분과 함께 하는 이 시간이 참 좋습니다. 지금까지 이벤트 듣는 도우미를 붙이고 떼어내는 방법을 차근차근 배웠죠? 이번에는 좀 더 깊은 이야기를 나누고 싶어요. 이벤트가 발생했을 때 어떤 일이 일어났는지 조용히 알아보는 방법을 배워볼 거예요. 마치 도서관에서 무슨 일이 일어났는지 사서가 차분히 파악하는 것처럼요.🧠 새로운 단어들과 친해지기이벤트에서 정보를 수집할 때 사용하는 중요한 단어들을 살펴보겠어요.단어쉬운 설명이벤트 객체이벤트가 발생했을 때 자동으로 만들어지는 정보 꾸러미예요.event.target실제로 이벤트가 발생한 요소를 가리켜요.event.type발생한 이벤트의 종류를 알려줘요.매개변수함수가 실행될 때 외부에서 전달받..

📘 12.1.2 이벤트 리스너 제거하기 - 불필요한 소음을 조용히 정리하기여러분과 함께 하는 이 시간이 정말 소중해요. 지난 시간에 addEventListener로 웹페이지에 이벤트 듣는 도우미를 추가하는 방법을 배웠죠? 이번에는 그보다 더 세심한 이야기를 나누고 싶어요. 더 이상 필요 없는 이벤트 듣는 도우미를 조용히 정리하는 방법을 배워볼 거예요. 마치 밤이 깊어질 때 하루의 소음들을 하나씩 멈춰가며 고요함을 찾아가는 것처럼요.🧠 새로운 단어들과 친해지기이벤트 듣는 도우미를 정리할 때 사용하는 중요한 단어들을 살펴보겠어요.단어쉬운 설명removeEventListener붙여놓은 이벤트 듣는 도우미를 조용히 떼어내는 명령어예요.메모리 낭비사용하지 않는 것들이 컴퓨터 기억 공간에 계속 남아있는 문제예요..

📘 12.1.1 addEventListener 사용하기 - 웹페이지의 섬세한 소통법 만들기여러분과 함께 하는 이 순간들이 소중합니다. 지금까지 HTML 요소들을 만들고, 꾸미고, 없애는 방법을 차근차근 익혀왔어요. 이제는 그보다 더 아름다운 이야기를 나누고 싶어요. 웹페이지와 사용자가 서로 마음을 주고받는 방법을 배워보겠습니다. 마치 현관문을 두드리는 소리에 안에서 "네, 누구세요?"하고 대답하는 것처럼, 버튼을 클릭하면 웹페이지가 따뜻하게 반응하는 방법을 함께 배워봐요.🧠 새로운 단어들과 친해지기웹페이지에서 사용자와 소통할 때 사용하는 소중한 단어들을 살펴보겠어요.단어쉬운 설명이벤트 (Event)웹페이지에서 일어나는 다양한 일들이에요. 클릭하거나 마우스를 움직이는 것 같은 행동들을 말해요.addEv..

📘 11.3.3 요소 삭제하기 - 디지털 방 청소하기여러분과 함께 하는 이 시간이 좋습니다. 지금까지 새로운 요소를 만들고, 웹페이지에 추가하는 방법을 차근차근 익혀왔어요. 이제는 그 반대편 이야기를 나누고 싶어요. 필요 없어진 요소들을 조용히 치우는 방법을 배워보겠습니다. 마치 하루 끝에 책상을 정리하며 마음도 함께 정돈하는 것처럼요.🧠 새로운 단어들과 친해지기요소를 웹페이지에서 제거할 때 사용하는 소중한 단어들을 살펴보겠어요.단어쉬운 설명remove요소 자신을 웹페이지에서 완전히 제거하는 명령어예요.removeChild부모 요소가 특정 자식 요소를 제거하는 전통적인 명령어예요.실시간 삭제프로그램이 실행되면서 즉시 요소를 제거하는 것이에요.parentNode어떤 요소의 부모 요소를 가리키는 특별한 ..

📘 11.3.2 요소 추가하기 - 조립용 부품을 제품에 붙이기새로운 HTML 요소들을 만드는 법을 배웠으니, 이제는 그 요소들을 실제 웹페이지에 붙여서 사용자가 볼 수 있게 만드는 시간입니다. 지난 시간에 만든 요소들은 아직 메모리라는 보이지 않는 작업실에만 놓여있습니다. 마치 아름다운 그림을 그려두었지만 아직 액자에 넣어 벽에 걸지 않은 상태와 같습니다.이제 appendChild라는 도구를 사용해서 이 요소들을 웹페이지라는 갤러리에 전시할 차례입니다.🧠 새로운 단어들과 친해지기요소들을 웹페이지에 배치할 때 사용하는 단어들을 만나보겠습니다.단어쉬운 설명appendChild만든 요소를 다른 요소 안에 마지막 자식으로 넣어주는 명령어예요.부모 요소다른 요소들을 안에 담고 있는 큰 상자 같은 요소예요.자식..

📘 11.3.1 새 요소 만들기 - 웹페이지 조립 공장에서 새 부품 만들기웹페이지의 요소들을 찾고, 꾸미고, 속성을 바꾸는 법을 배웠으니, 이제는 한 걸음 더 나아가 완전히 새로운 요소를 만드는 시간입니다. 마치 도예가가 손으로 흙을 빚어 새로운 그릇을 만들어내듯, 우리도 코드로 새로운 HTML 요소를 탄생시킬 수 있습니다.이것은 단순히 기존 것을 바꾸는 것이 아니라, 무에서 유를 창조하는 일입니다. 사용자의 행동이나 상황에 따라 실시간으로 새로운 요소가 화면에 피어나는 것을 상상해보세요.🧠 새로운 단어들과 친해지기새로운 창조의 세계로 들어가기 전에, 함께 걸어갈 단어들을 만나보겠습니다.단어쉬운 설명createElement새로운 HTML 요소를 만들어주는 특별한 명령어예요.createTextNode순..

📘 11.2.3 속성 바꾸기 - 요소의 이름표를 새로 붙이기웹페이지 요소들의 옷을 갈아입히는 법을 배웠으니, 이제는 그들의 이름표를 새로 만들어주는 시간입니다. 마치 계절이 바뀔 때마다 옷장에서 다른 옷을 꺼내듯, 상자에 붙인 낡은 스티커를 떼어내고 새롭고 반짝이는 스티커를 붙여주는 것과 같습니다.HTML 요소들은 저마다 자신만의 작은 이름표들을 가지고 있습니다. 이미지라면 어떤 사진을 보여줄지, 링크라면 어디로 안내할지를 적어둔 조그만 쪽지들이 있는 것이지요. 우리는 그 쪽지들을 언제든 새로운 내용으로 바꿔적을 수 있습니다.🧠 새로운 단어들과 친해지기속성의 세계로 들어가기 전에, 함께 걸어갈 단어들을 만나보겠습니다.단어쉬운 설명속성 (Attribute)HTML 요소가 가지고 있는 추가 정보나 특징이..

📘 11.2.2 스타일 바꾸기 - 웹페이지에 옷을 입혀주기웹페이지의 요소들을 찾는 법을 배웠으니, 이제는 그들에게 아름다운 옷을 입혀드릴 시간입니다. 마치 계절이 바뀔 때마다 우리가 옷장에서 다른 옷을 꺼내 입듯이, 웹페이지의 요소들도 코드 한 줄로 순식간에 새로운 모습으로 변할 수 있답니다.화면 속 글자들이 갑자기 붉은색으로 물들거나, 버튼이 파란 하늘색으로 변하는 순간을 상상해보세요. 그런 변화가 여러분의 손끝에서 시작되어 화면 위로 스며드는 것입니다.🧠 새로운 단어들과 친해지기스타일의 세계로 들어가기 전에, 함께 걸어갈 단어들을 만나보겠습니다.단어쉬운 설명styleHTML 요소의 모양, 색깔, 크기를 바꾸는 도구예요.color글자의 색깔을 정해주는 특별한 명령어예요.backgroundColor요..

📘 11.2.1 웹페이지 글자의 마법사 - 텍스트를 바꾸는 따뜻한 기술지금까지 우리는 웹페이지에서 원하는 요소를 찾는 세 가지 아름다운 방법을 배웠어요. 마치 큰 도서관에서 모든 책을 찾는 기술을 완전히 익힌 것처럼, 이제 우리는 웹페이지의 어떤 요소든 자유자재로 찾을 수 있게 되었죠. 이번 시간에는 정말 가슴 뛰는 다음 단계로 나아갈 거예요. 바로 찾아낸 요소의 글자를 우리 마음대로 바꾸는 방법을 배우는 거예요! 오늘 만날 새로운 친구들은 textContent와 innerHTML이라는 특별한 존재들이에요. 이들은 웹페이지의 글자를 실시간으로 변화시킬 수 있는 놀라운 능력을 가지고 있답니다.🧠 새로운 친구들과 마음 나누기웹페이지의 글자를 바꾸기 위해 알아야 할 새로운 단어들을 마음으로 이해해볼까요?단..

📘 11.1.3 웹페이지의 만능 탐지기 - querySelector라는 지혜로운 친구지금까지 우리는 웹페이지에서 요소를 찾는 두 가지 소중한 방법을 배웠어요. getElementById로 고유한 이름표를 가진 특별한 요소를 정확히 찾는 방법과, getElementsByClassName으로 같은 마음을 가진 여러 친구들을 한꺼번에 모으는 방법을 익혔죠. 마치 서로 다른 열쇠로 각각 다른 문을 여는 것처럼, 각자 고유한 방식으로 요소를 찾을 수 있게 되었어요.이번 시간에는 이 모든 방법들을 하나로 아우르는 지혜로운 만능 친구를 소개해드리려고 해요. 바로 querySelector와 querySelectorAll이라는 놀라운 존재들이에요. 이 친구들은 마치 여러 악기를 모두 연주할 수 있는 재능 있는 음악가처..