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

📘 2.2.1 똑같은지 확인하기 (===, !==) - 정확하게 비교하는 도구지금까지 함께 걸어온 이 길에서, 우리는 숫자들이 담긴 상자들로 계산하는 방법을 차근차근 배워왔습니다. 이제 우리 앞에 놓인 새로운 단계는 상자들 안의 값들을 서로 비교하는 것입니다. 생각해보세요. 우리 일상에서 얼마나 자주 "이것이 저것과 같은가?"라고 묻고 있는지를요. 아침에 입을 옷을 고르며 어제 입은 것과 같은지 확인하고, 친구의 전화번호가 맞는지 확인하고, 시험 답안이 정답과 일치하는지 살펴보죠. 프로그래밍에서도 이런 비교는 마치 호흡처럼 자연스럽고 필수적인 일입니다.오늘 만날 똑같은지 확인하는 도구와 다른지 확인하는 도구는 이런 비교 작업을 정확하고 안전하게 수행할 수 있도록 도와줄 친구들입니다. 마치 섬세한 감별사..

📘 2.1.3 숫자 하나씩 늘리고 줄이기 (++, --) - 자동으로 숫자를 세어주는 편리한 도구여러분과 함께 걸어온 이 길에서, 우리는 이미 더하기와 빼기, 곱하기와 나누기, 그리고 나머지까지 만나보았습니다. 이제 우리 앞에는 조금 더 특별한 도구들이 기다리고 있어요. 오늘 만날 자동 숫자 증감 도구 ++와 --는 마치 우리 일상 속 작은 습관들처럼, 하나씩 차근차근 숫자를 늘리고 줄여주는 도구들입니다.생각해보세요. 아침에 일어나서 하루를 보내며 우리는 얼마나 많은 것들을 하나씩 세고 있는지를요. 아침 운동을 하며 팔굽혀펴기를 하나씩 세고, 버스를 기다리며 지나가는 차들을 하나씩 세고, 저녁에는 오늘 읽은 책 페이지를 하나씩 세어봅니다. 이런 일상의 리듬처럼, 프로그래밍에서도 숫자를 하나씩 늘리고 줄..

📘 2.1.2 나머지 구하기 (%) - 나누고 남은 것을 찾는 특별한 계산안녕하세요, 여러분. 지난 시간에 우리는 기본적인 네 가지 계산(더하기, 빼기, 곱하기, 나누기)을 부드럽게 배웠죠? 이제 조금 더 특별한 계산을 만나볼 차례예요! 오늘 배울 나머지 계산 %는 일상생활에서 "나누고 남은 것"을 구할 때 사용하는 매우 유용한 도구랍니다. 친구들과 과자를 나누어 먹을 때나, 시계의 시간을 계산할 때 자주 만나게 되는 개념이에요. 마치 나누고 남은 것을 찾아주는 탐정같은 계산이라고 생각하면 돼요!🧠 새로운 단어들과 친해지기나머지 계산과 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.단어쉬운 설명나머지 계산 기호나눗셈을 했을 때 남는 값을 구하는 특별한 계산 기호예요.나머지나눗셈을 한 후에 남게 되..

📘 2.1.1 더하기, 빼기, 곱하기, 나누기 - 숫자 계산의 기본기안녕하세요, 여러분. 지난 시간에 우리는 정보를 담는 소중한 상자들을 만드는 방법을 차근차근 배웠죠? 이제 그 상자들 안에 담긴 숫자들로 재미있는 계산을 해볼 차례예요! 자바스크립트에서 숫자 계산을 하는 방법은 여러분이 일상에서 사용하는 계산기와 거의 똑같답니다. 오늘은 가장 기본이 되는 네 가지 계산 방법, 즉 더하기, 빼기, 곱하기, 나누기에 대해 부드럽게 알아볼까요? 마치 수학 시간처럼 숫자들을 자유자재로 다룰 수 있게 될 거예요!🧠 새로운 단어들과 친해지기계산과 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.단어쉬운 설명계산 기호들숫자끼리 계산을 할 때 사용하는 기호들을 통틀어 부르는 말이에요.더하기 기호 (+)두 숫자를 ..

📘 1.3.3 변수들을 깔끔하게 정리하기 - 코딩도 정리가 필요해요!안녕하세요, 여러분. 지금까지 우리는 좋은 변수 이름을 만드는 방법과 camelCase라는 특별한 규칙을 차근차근 배웠죠? 개별 변수의 이름을 잘 짓는 것도 정말 중요하지만, 프로그램이 점점 커질수록 더욱 소중해지는 게 있어요. 바로 변수들을 깔끔하게 정리하고 관리하는 방법이에요. 마치 여러분 방에 물건이 하나둘 늘어나면서 "아, 이제 정리해야겠다!"라고 느끼게 되는 것처럼, 코딩에서도 변수가 많아질수록 체계적인 정리가 꼭 필요하답니다. 오늘은 변수들을 어떻게 효과적으로 정리하고 관리할 수 있는지 함께 알아볼까요?🧠 새로운 단어들과 친해지기코딩에서 정리와 관련된 중요한 단어들을 쉽게 풀어서 설명해드릴게요.단어쉬운 설명변수 관리변수들을..

📘 1.3.2 camelCase - 낙타 등처럼 이름 짓기안녕하세요! 이전 시간에 좋은 변수 이름의 중요성에 대해 함께 배웠어요. 의미있는 이름을 붙이는 것이 얼마나 소중한지 깨달으셨을 거예요.하지만 때로는 하나의 변수로 표현하고 싶은 의미가 여러 단어로 이루어진 경우가 있어요. 예를 들어 "학생의 이름", "수학 시험 점수", "숙제 완료 상태" 같은 복잡한 개념들을 어떻게 하나의 이름으로 만들 수 있을까요?자바스크립트에서는 이런 상황을 위해 camelCase라는 특별한 이름 만들기 방법을 사용해요. 이 방법은 정말 신기한데, 낙타의 등처럼 생겼다고 해서 이런 이름이 붙었어요!🧠 새로운 단어들과 친해지기camelCase와 관련된 다양한 이름 만들기 방식들을 살펴볼게요.단어쉬운 설명camelCase이..

📘 1.3.1 좋은 이름, 나쁜 이름 - 저장소에 붙이는 이름표의 비밀안녕하세요, 여러분. 지금까지 다양한 정보 종류와 저장소 만들기 방법을 차근차근 배웠어요. 저장소를 만들 때마다 우리는 그 저장소에 이름표를 정성스럽게 붙여주었죠. 그런데 잠시 멈춰서 생각해보세요. 여러분은 저장소에 어떤 이름을 붙여야 할지 고민해본 적이 있나요? 프로그래밍에서 저장소의 이름은 단순히 구별을 위한 표시가 아니에요. 좋은 이름표는 저장소 안에 무엇이 들어있는지 한눈에 알 수 있게 해주고, 나쁜 이름표는 저장소를 일일이 열어봐야만 무엇인지 알 수 있게 만들어요.마치 도서관에서 책 제목이 그 책의 내용을 짐작하게 해주는 것처럼, 저장소의 이름표도 그 저장소가 무엇을 품고 있는지 알려주는 정말 소중한 역할을 하거든요.🧠 새..

📘 1.2.3 참조형: 객체(Object), 배열(Array) - 여러 값을 함께 관리하는 데이터 구조안녕하세요, 여러분. 지금까지 우리가 만나본 값들은 모두 하나의 작은 상자에 하나씩만 들어갈 수 있는 것들이었어요. Number, String, Boolean, null, undefined... 이 모든 친구들이 그랬죠.그런데 실제 우리 삶을 들여다보면, 서로 관련된 이야기들을 따로따로 기억하기보다는 하나의 이야기로 묶어서 간직하는 게 훨씬 자연스러울 때가 많아요. 예를 들어 한 친구에 대한 기억이라면 그 친구의 이름만 따로, 나이만 따로, 좋아하는 것만 따로 기억하는 것보다는 그 모든 것들이 하나로 어우러진 그 친구만의 이야기로 기억하고 싶잖아요.오늘은 바로 그런 마음을 담아낼 수 있는 특별한 데이터..

📘 1.2.2 특수형: 비어있음(null), 정의되지않음(undefined) - 빈 상태를 나타내는 두 가지 특별한 값고요한 아침, 우리는 지난 시간에 Number, String, Boolean이라는 세 가지 기본 값을 배웠습니다. 이들은 모두 구체적인 내용을 가지고 있는 값들이었지요.그런데 오늘은 조금 특별한 이야기를 들려드릴 것입니다. 바로 "아무것도 없는 상태"에 대한 이야기입니다. 여러분, 빈 상태도 사실은 두 가지 종류가 있다는 걸 알고 있었나요? 자바스크립트 세상에는 null과 undefined라는 두 가지 특별한 "빈 상태" 친구들이 있습니다. 둘 다 비어있지만, 그 이유와 의미가 완전히 다릅니다.🧠 새로운 단어들과 친해지기null과 undefined를 이해하는 데 도움이 되는 쉬운 단어..

📘 1.2.1 기본형: 숫자(Number), 글자(String), 참/거짓(Boolean) - 변수에 저장할 수 있는 세 가지 값조용한 오후, 우리는 지난 시간에 var, let, const라는 세 가지 변수 만들기 방법을 배웠습니다. 이제 여러분은 변수를 만드는 것에 익숙해졌을 것입니다.그런데 문득 이런 생각이 들 것입니다. "변수는 만들 줄 알겠는데, 그 안에 어떤 것들을 넣을 수 있을까요?" 오늘은 바로 그 질문에 대한 답을 찾아볼 것입니다. 자바스크립트 세상에는 변수에 넣을 수 있는 세 가지 기본 종류의 값이 있거든요.🧠 새로운 단어들과 친해지기데이터 타입을 이해하는 데 도움이 되는 쉬운 단어들을 알아보겠습니다.단어뜻데이터 타입 (Data Type)변수에 들어있는 값의 종류를 알려주는 표시입니..