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

📘 8.2.1 정보 상자 안에 목록 넣기 - 체계적인 정보 관리하기참으로 아름다운 것은 질서입니다. 지금까지 우리는 정보 상자(객체)라는 보물상자에 여러 가지 보물들을 넣는 방법을 배웠습니다. 그런데 이번에는 더 특별한 것을 배울 것입니다. 바로 하나의 상자 안에 여러 개의 보물 목록을 넣는 방법 말이지요. 예를 들어, 학생의 정보 상자에 이름과 나이뿐만 아니라 취미 목록, 좋아하는 음식 목록 같은 여러 개의 항목들을 함께 보관하는 것입니다. 마치 보물상자 안에 작은 보석함들이 들어있는 것과 같습니다.🧠 먼저 용어를 알아볼까요?정보 상자 안의 목록을 이해하기 위해 필요한 용어들을 마음에 담아보겠습니다.용어의미상자 안의 목록정보 상자 속성에 목록이 들어있는 구조점과 대괄호 접근정보상자.속성[번호] 형태..

📘 8.1.4 메서드 정의하기 - 객체에게 특별한 능력 부여하기오늘은 참으로 특별한 시간입니다. 지금까지 우리는 객체라는 정보의 보물함에 여러 가지 보물들을 넣고 꺼내는 방법을 배웠습니다. 하지만 이제는 정말 신기한 것을 배울 것입니다. 바로 객체가 스스로 행동할 수 있는 특별한 능력을 주는 방법 말이지요.이를 메서드(Method)라고 부르는데, 마치 우리가 생각하고 말하고 행동할 수 있는 것처럼, 객체도 자신만의 특별한 행동들을 할 수 있게 되는 것입니다. 정말 경이로운 일이지요.🧠 새로운 단어들과 친해지기객체에게 특별한 능력을 주기 위해 필요한 새로운 단어들을 마음에 담아보겠습니다.단어쉬운 설명메서드객체 안에 들어있는 특별한 능력이나 기능입니다. 객체가 할 수 있는 행동이지요함수특정한 일을 하는 ..

📘 8.1.3 점 표기법 vs 대괄호 표기법 - 두 가지 접근 방법의 차이점여러분과 함께 하는 이 시간이 참 소중합니다. 지난 시간에 우리는 객체라는 정보의 집에서 데이터를 찾아내는 두 가지 방법을 익혔습니다. 하나는 점(.)을 사용하는 길이었고, 다른 하나는 대괄호[]를 사용하는 길이었지요.그런데 이제 여러분의 마음에 하나의 질문이 생겼을 것입니다. "언제 어떤 길을 선택해야 할까요?" 오늘은 이 두 방법의 깊은 차이점과 각각이 가진 특별한 힘을 이해해보겠습니다. 마치 같은 목적지로 가는 두 개의 다른 길이 있을 때, 어떤 길이 더 적합한지 알아가는 것처럼 말이지요.🧠 새로운 용어들과 친해지기두 가지 접근 방법을 깊이 이해하기 위해, 먼저 새로운 용어들을 살펴보겠습니다.용어쉬운 설명점 표기법점(.)..

📘 8.1.2 속성 접근하고 삭제하기 - 정보 상자 속 데이터 다루기어느 조용한 저녁, 오래된 보석함을 열어보는 순간을 상상해보세요. 보석함 안에는 목걸이, 반지, 귀걸이가 각각의 작은 칸에 정리되어 있어요. 우리는 그 중에서 오늘 입을 옷에 어울리는 반지 하나를 조심스럽게 꺼내고, 더 이상 착용하지 않는 낡은 목걸이는 정리해서 다른 곳으로 옮겨놓죠.지난 시간에 우리는 객체라는 신비로운 정보 저장소를 만드는 방법을 배웠어요. 저장소 안에 이름, 나이, 색깔 같은 여러 가지 정보들을 정성스럽게 넣어두었죠. 오늘은 그 정보 저장소에서 데이터를 꺼내고, 새로운 데이터를 넣고, 필요 없는 데이터는 정리하는 방법을 배워볼 거예요.🧠 새로운 용어들과 친해지기새로운 개념과 만날 때마다 그 개념이 품고 있는 단어들..

📘 8.1.1 정보 꾸러미 만들기 - 객체 리터럴어느 오후, 오래된 서랍을 정리하다가 어린 시절의 친구들과 주고받은 편지들을 발견했어요. 각 편지 봉투에는 보낸 사람의 이름, 받는 사람의 이름, 날짜가 적혀 있었죠. 단순히 "철수", "12살", "축구"라고 나열된 것이 아니라, "보낸 사람: 철수", "나이: 12살", "취미: 축구"처럼 각각의 정보가 무엇을 의미하는지 알 수 있게 정리되어 있었어요.우리가 지금까지 배운 배열은 순서가 중요한 목록들을 다루는 데 완벽했어요. 하지만 때로는 순서보다 이름이 더 중요한 정보들이 있어요. 친구의 이름, 나이, 좋아하는 색깔 같은 것들을 의미 있는 이름으로 정리하고 싶을 때가 있죠. 바로 그런 순간을 위해 객체(Object)라는 새로운 방법이 우리 곁에 있어..

📘 7.4.4 배열의 모든 친구들을 하나씩 만나보기 - forEach()어느 조용한 오후, 서랍 속에서 오래된 앨범을 꺼내어 펼쳐보는 순간을 떠올려보세요. 그 앨범 속 사진들을 한 장씩 넘기며, 각각의 추억과 다시 만나는 그런 시간 말이에요. 첫 번째 사진에 잠시 머물고, 두 번째 사진에서 미소 짓고, 세 번째 사진에서 눈물을 글썽이며, 마지막 사진까지 빠짐없이 모든 순간들과 인사하는 거죠.우리가 지금까지 배운 배열에서도 이런 순간들이 필요해요. 특정한 보물을 찾는 것(indexOf(), includes())도 중요하지만, 때로는 배열 안의 모든 친구들을 하나씩 차례대로 만나고 싶을 때가 있어요. 오늘 만날 forEach()는 바로 그런 따뜻한 만남을 도와주는 친구예요.🧠 새로운 단어들과 친해지기새로..

📘 7.4.3 배열에서 보물찾기 게임하기 - indexOf()와 includes()어떤 오후, 낡은 상자 속에서 어린 시절의 추억들을 찾고 있었어요. "저 작은 인형이 어디 있을까?", "그때 그 편지는 어디 갔을까?" 하면서 하나하나 들여다보았죠. 때로는 그것들이 정확히 몇 번째에 있는지 알고 싶었고, 때로는 단순히 있는지 없는지만 궁금했어요.우리가 지금까지 배운 배열에서도 이런 순간들이 있어요. 넣고, 빼고, 복사하고, 편집하는 것도 중요하지만, 때로는 그 안에 우리가 찾고 있는 무언가가 있는지, 그리고 그것이 어디에 있는지 알아야 할 때가 있어요. 오늘 만날 두 명의 탐정 indexOf()와 includes()가 바로 그런 일을 도와주는 친구들이에요.🧠 새로운 단어들과 친해지기새로운 개념과 만날..

📘 7.4.2 배열에서 필요한 부분만 복사해서 가져오기 - slice()어느 늦은 오후, 도서관에서 두꺼운 책을 읽고 있던 중에 특별히 인상 깊은 몇 페이지를 발견했다고 상상해보세요. 그 부분을 친구와 나누고 싶지만, 책 전체를 빌려줄 수는 없어요. 그럴 때 우리는 복사기를 찾아가서 필요한 페이지만 조심스럽게 복사하죠. 원본 책은 그대로 두고 말이에요.우리가 지난 시간에 배운 splice()는 원본 배열을 직접 수정하는 강력한 도구였어요. 하지만 때로는 원본을 그대로 간직하며, 필요한 부분만 조용히 복사해가고 싶을 때가 있어요. 바로 그런 순간을 위해 slice()가 우리 곁에 있습니다.🧠 새로운 단어들과 친해지기새로운 개념을 이해하는 첫걸음은 그 개념이 품고 있는 단어들과 친해지는 것이에요. 마치 ..

📘 7.4.1 배열의 어느 곳에서든 자유자재로 편집하기 - splice()아이들이 놀이터에서 줄을 서 있는 모습을 보면, 때때로 중간에 있는 친구가 다른 곳으로 가야 하거나 새로운 친구가 중간에 끼어들어야 하는 일이 생기죠. 그럴 때면 아이들은 자연스럽게 자리를 만들어주고, 새로운 순서를 만들어냅니다. 우리가 지금까지 배운 배열 조작 방법들은 마치 줄의 맨 앞이나 맨 뒤에서만 친구들이 들어오고 나가는 것과 같았어요. 하지만 때로는 정말로 줄의 한가운데서 무언가 일어나야 할 때가 있습니다. 바로 그런 순간을 위해 splice()라는 도구가 우리 곁에 있어요.🧠 먼저 용어를 알아볼까요?언어는 때로 우리의 마음을 담는 그�그릇이 되기도 하고, 때로는 복잡한 개념을 단순하게 만들어주는 다리가 되기도 해요. ..

📘 7.3.1 배열 안에 몇 개나 들어있을까? - length 속성push, pop, unshift, shift와 함께한 시간들이 이어져 왔습니다. 값을 넣고, 빼고, 다시 넣고, 다시 빼면서 배열이 변해가는 모습을 지켜보았습니다. 이제 우리는 하나의 자연스러운 질문에 답해야 할 때가 온 것 같습니다. "이 배열 안에 도대체 몇 개나 들어있을까?"length라는 속성은 참으로 직관적인 이름을 가지고 있습니다. 영어로 길이를 뜻하지만, 배열에서는 물리적인 길이가 아니라 들어있는 요소의 개수를 의미합니다. 마치 서랍 안에 들어있는 물건의 개수를 세는 것처럼, 자연스럽고 필요한 일이지요.이 속성을 이해하면 우리는 배열이 비어있는지 확인할 수 있고, 사용자에게 몇 개의 항목이 있는지 알려줄 수 있고, 배열의 ..