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

📘 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이라는 놀라운 존재들이에요. 이 친구들은 마치 여러 악기를 모두 연주할 수 있는 재능 있는 음악가처..

📘 11.1.2 같은 마음을 가진 친구들 찾기 - getElementsByClassName과의 만남지난 시간에 우리는 getElementById라는 소중한 친구와 함께 웹페이지에서 고유한 이름표를 가진 요소를 정확히 찾는 방법을 배웠어요. 마치 큰 아파트 단지에서 정확한 호수를 찾는 것처럼, ID라는 특별한 주소로 단 하나의 요소를 찾을 수 있게 되었죠.이번 시간에는 조금 다른 접근을 해보려고 해요. 때로는 하나의 특별한 친구가 아니라, 같은 마음을 가진 여러 친구들을 한꺼번에 만나고 싶을 때가 있잖아요? 바로 그런 마음으로 getElementsByClassName이라는 새로운 친구를 소개해드리려고 해요.🧠 새로운 친구들과 마음 나누기여러 요소를 함께 찾기 위해 알아야 할 새로운 단어들을 마음으로 이..

📘 11.1.1 웹페이지 속 보물 찾기 - getElementById와의 첫 만남지금까지 우리는 자바스크립트의 기본기를 차근차근 익혀왔어요. 변수라는 상자에 값을 넣고, 함수라는 도우미를 만들어 일을 시키고, 조건문으로 갈래길을 나누며 프로그래밍의 기초를 단단히 다졌죠. 이제는 그 모든 지식을 모아서 정말 흥미진진한 새로운 여행을 떠날 시간이에요.바로 웹페이지와 마음을 나누는 방법을 배우는 거예요. 지금까지는 콘솔창에서만 결과를 확인했다면, 이제는 우리 눈앞에 펼쳐진 웹페이지 그 자체를 만지고 변화시킬 수 있게 될 거예요. 그 첫 걸음으로, 웹페이지에서 원하는 요소를 정확히 찾아내는 getElementById라는 소중한 친구를 만나보려고 해요.🧠 새로운 세상의 언어 배우기웹페이지와 대화하기 위해 알아..