1도 몰라도 술술 읽힌다! 이 책의 예제 파일들은 http://www.pisibook.co.kr의 [자료실]에서 다운받을 수 있지요. 예제 파일은 다음과 같이 2가지 모양으로 보일 수 있어요. 기본 브라우저에 따라 확장자가 ".html"인 파일들이 달라보이지요. 우리의 코딩 학습은 기본 브라우저가 크롬이건 익스플로러이건 상관 없습니다. 필자는 크롬을 기본 브라우저로 사용하지만 독자분들이 필자와 브라우저까지 일치시킬 필요는 없습니다. 소스 코드를 입력할 때 사용하는 편집기는 여러 가지가 있지만 필자는 메모장을 사용할 겁니다. 메모장은 기능이 적기는 하지만 또 한편으로는 기능이 많은 복잡한 전문 편집기보다 초보자가 사용하기에는 간단하고 편합니다. 이 책은 완전 초보분들을 대상으로 합니다. 그래서 누구나 자신의 PC에 기본으로 가지고 있는 프로그램들을 이용해서 제일 간단하고 쉽게 코딩을 연습할 수 있도록 하고 있답니다. 처음으로 코딩을 배울 때는 이런저런 여러가지 프로그램을 설치하고 사용법을 배우는 것도 힘들기 때문입니다. 코드 파일 만들기 자, 이제 생전 처음 프로그래밍을 해볼까요. 메모장을 열고 다음과 똑같이 입력하세요. 다 입력했으면 이 내용을 파일로 저장합니다. 파일 이름은 맘대로 지정해도 되지만 파일 이름 확장자는 반드시".html"이어야 합니다. 우리는 "sample.html"이라고 저장할겁니다. 메모장에서 [파일][다른 이름으...
1도 몰라도 술술 읽힌다! 의미는 모르지만 우리는 앞에서 몇 개의 소스 코드를 보았습니다. "명령문", "소스 코드", "코드"는 다 똑 같은 것이라고 했습니다. 이 소스 코드를 기술하는 행위를 "코딩"이라고 한다고 했습니다. 우리 한글에 맞춤법이 있듯이, 자바스크립트 코딩에도 규칙이 있습니다. 코딩 규칙은 프로그래밍 언어마다 조금씩 다릅니다. 하지만 대체로 비슷하지요. 다음의 소스 코드를 보세요. ▶ sam02.html <!DOCTYPE html> <html> <body> <script> document.write("안녕하세요?<br>"); document.write("반갑습니다.<br>"); document.write("코딩을 시작합니다!"); </script> </body> </html> ▶ 실행 결과 앞의 소스 코드에서 빨간색으로 표시된 코드만이 자바스크립트 코드입니다. < > 안에 기술된 것들은 태그입니다. 자바스크립트 코드는 <script> 태그와 </script> 태그 사이에 기술합니다. document.write( )는 ( ) 안에 기술된 내용을 화면에 출력하는 자바스크립트 명령문입니다. document.write( )는 사실 단순한 명령문이 아닙니다. 하지만 우선은 명령문이라고 알아둡니다. 자세한 건 뒤에서... 단순히 글자(텍스트)를 출력하려면 위의 코드처럼 겹따옴표(" ") 또는 홑따옴표(' ') 내에 글자를 기술...
1도 몰라도 술술 읽힌다! 엑셀을 전문적으로 사용해보지 않았어도 셀은 아실겁니다. 엑셀 시트에서 숫자, 문자, 수식을 입력하는 작은 네모 칸들을 셀이라고 하지요. 아래의 엑셀 시트는 A1 셀의 값과 B1 셀의 값을 더해서 C1 셀에 기록하고 있습니다. 만일 아래와 같이 A1 셀의 값과 B1 셀의 값을 수정하면 당연히 C1 셀의 결과값도 변하지요. 엑셀의 셀들은 다음과 같은 특징이 있습니다. 엑셀을 잘 안다고 대충 지나치지 마시고 아래의 특징을 꼼꼼히 읽어보세요. 이런 엑셀의 셀(cell)의 특징이 여기서 배울 변수(variable)의 특징과 똑 같기 때문입니다. ❶ 셀(변수)은 A1, B1, C1과 같은 이름이 있습니다. ➋ 셀(변수)은 숫자나 문자, 수식을 기억(저장)할 수 있습니다. ➌ 셀(변수)은 새로운 값을 입력하면 이전 값은 없어지고 마지막 값만 남습니다. ➍ 셀(변수)은 +, - 등 연산을 할 수 있습니다. 이제, 엑셀 시트의 덧셈을 그대로 자바스크립트 프로그램으로 작성해보면 다음과 같습니다. ▶ sam05.html <!DOCTYPE html> <html> <body> <script> var a1, b1, c1; // 01 a1 = 10; // 02 b1 = 20; // 03 c1 = a1 + b1; // 04 document.write(c1); // 05 </script> </body> </html> ▶ 실행 결과 이제부...
1도 몰라도 술술 읽힌다! 변수에 넣어서 사용하건, 그냥 상수로 사용하건, "숫자, 문자열, 논리값"이 자바스크립트에서 사용하는 기본 데이터이지요. 이들에 대해 좀 더 자세히 들여다 봅니다. 기본이니까... 숫자의 사용 숫자는 소수점이 없는 정수와 소수점이 있는 실수를 모두 사용할 수 있습니다. 자바스크립트에서 정수는 15자리까지만 정확히 표시됩니다. 정수 표시의 한계를 보여주는 다음의 소스 코드를 봅시다. ▶ sam09.html <!DOCTYPE html> <html> <body> <script> var x, y; // 01 x = 999999999999999; // 02 y = 9999999999999999; // 03 document.write(x); // 04 document.write("<br>"); // 05 document.write(y); // 06 </script> </body> </html> ▶ 실행 결과 ▶ 소스 코드 들여다보기 01 라인은 다음과 같습니다. var x, y; // 01 x와 y라는 2개의 변수를 선언합니다. 02-03 라인은 다음과 같습니다. x = 999999999999999; // 02 y = 9999999999999999; // 03 x 변수에는 15자리의 정수를 할당했습니다. y 변수에는 자바스크립트 정수 한계를 넘는 16자리의 정수를 할당했습니다. 04-06 라인은 다음과 같습니다. do...
1도 몰라도 술술 읽힌다! break 문은 반복문을 실행하다가 도중에 빠져나오기 위해 사용하며, continue 문은 특정 반복 회차를 건너뛰기 위해 사용합니다. 먼저 break 문을 사용한 다음의 소스 코드를 보시지요. 다음의 for 문은 i 변수의 값을 0부터 9까지 1씩 증가시키면서 10번 반복하게 되어 있습니다. 그러나 i 값이 3이 되면 중간에 break 문이 실행되어 for 반복문을 완전히 벗어나 반복 실행이 끝납니다. ▶ sam32.html <!DOCTYPE html> <html> <body> <script> var i; for (i = 0; i < 10; i++) { if (i === 3) break; document.write("i = " + i + "<br>"); } </script> </body> </html> ▶ 실행 결과 이번에는 continue 문의 사용법을 알아봅니다. 다음의 소스 코드는 앞의 소스 코드에서 break를 continue로 수정했을 뿐 나머지는 똑같습니다. 역시 for 문은 i 변수의 값을 0부터 9까지 1씩 증가시키면서 10번을 반복하게 되어 있습니다. 그런데 도중에 i 값이 3이 되면 continue 문이 실행됩니다. 그러면 그 아래의 출력문을 실행하지 않고 곧장 for 문으로 실행이 이동하여 그 다음 회차를 반복합니다. ▶ sam33.html <!DOCTYPE html> <html> <b...
1도 몰라도 술술 읽힌다! "내가 만약(if) 노을이라면 그대 가슴에 물들고 싶어..." 그런 노래가 히트를 친 적이 있었지요. 만약... if... 프로그래밍에서 "만약"이라는 개념은 연인 간의 사랑 만큼이나 중요합니다. 그래서 "만약"을 의미하는 "if" 문이 아주 중요합니다. if 문은 조건식을 검사해서 결과가 "참"(true)일 때만 특정 작업을 실행하기 위해 사용합니다. if 문의 사용 형식은 다음과 같습니다. if 문을 사용하는 다음의 소스 코드를 봅시다. 이 프로그램은 사용자가 90점 이상의 값을 입력하면 1개의 메시지와 점수를 출력하고, 90점 미만의 값을 입력하면 메시지 없이 점수만 출력합니다. ▶ sam19.html <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script> var jumsu; // 01 jumsu = prompt("점수를 입력하세요!"); // 02 if (jumsu >= 90) document.write("A 학점입니다.<br>"); // 03 document.write("점수 : " + jumsu); // 04 </script> </body> </html> ▶ 실행 결과 화면에 표시되는 입력 상자에 95를 입력하고 [확인]을 클릭하면 메시지와 점수가 화면에 출력됩니다. 그러나 입력 상자에 65를 입력하고 [확인]을 클릭하면 메시지 없이 점수만 ...
1도 몰라도 술술 읽힌다! 흔히들 컴퓨터는 모든 정보를 0과 1로 처리한다고 합니다. 정말 그럴까요? 잘 생각해보면 이건 말이 안됩니다! 컴퓨터는 전기로 움직이는 전자기계인데 숫자를 안다고요? 숫자는 인간만이 사용하는 개념인데 전자기계인 컴퓨터가 어떻게 0과 1이라는 숫자를 이해한다는 말인가요? 그래서 지금부터 우리는 그 0과 1의 진실을 파헤쳐볼 것입니다. 진법의 세계 우리 인간은 10진법의 세계에 살고 있지요. 10진법에서 사용하는 숫자를 10진수라고 합니다. 10진수는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 등 10개의 숫자로 구성되며 10이 되면 한자리 올림이 발생하지요. 인간이 10진수를 사용하게 된 것은 손가락이 10개이어서 그렇다는 설이 있습니다. 미확인 설이기는 하지만 그럴 듯합니다. 인류 초기 원시인들이 10개의 손가락을 꼽아가며 셈을 했고, 10개 손가락을 모두 꼽으면 돌 하나를 옆에 놓았는데 그것이 10진수의 탄생이라는 것입니다. 만일 초기 인류가 발가락까지 고려해서 셈을 했다면 손가락 10개에 발가락 10개까지 합해서 20진수를 사용할 뻔했습니다. 사실 "진법"이니 "진수"니 하는 것도 우리 인간이 만든 개념 체계이기 때문에 10진법 이외 얼마든지 다른 진법이 있을 수 있습니다. 3진법은 어떨까요? 3진법의 3진수는 0, 1, 2 등 3개의 숫자가 있습니다. 그래서 3이 되면 한자리 올림이 발생하지요...
1도 몰라도 술술 읽힌다! 인터넷 연결을 위한 브라우저(browser)는 이미 많이 사용하고 있을 겁니다. 네이버나 다음, 구글을 방문해서 뉴스도 보고 때론 댓글도 달고... 이런 인터넷을 웹(web)이라고도 합니다. 통신망이 거미줄(web)처럼 얽혀 있다는 의미에서 인터넷을 "웹"이라고도 합니다. 그래서 브라우저를 "웹 브라우저"라고도 하며, 홈페이지를 "웹 페이지" 또는 "웹 문서"라고도 하지요. "인터넷에서 홈페이지를 찾아본다"는 말을 조금 더 기술적으로 표현하면 "웹 브라우저로 웹을 연결해서 웹 문서를 찾아본다"라고 표현할 수 있습니다. 프로그래머들이 사용하는 용어와 일반인이 사용하는 용어가 약간 차이가 있을 뿐 개념은 동일합니다. 그럼, 웹 브라우저는 누구에게, 무슨 정보를, 어떻게 받아서, 우리에게 홈페이지를 보여주는 걸까요? 또한 내가 홈페이지를 만들려면 무슨 내용을, 어떻게 작성해서, 어디에 뿌려야 할까요? 지금까지의 경험으로 보면 어떤 경우에도 웹 브라우저를 빼고는 말이 안되지요. 웹에서 무얼 하려면 항상 웹 브라우저에게 부탁해야 하는 것 같은데... 맞습니다! 웹 브라우저에게 부탁해야 합니다. 웹 브라우저가 알아듣는 언어로 웹 문서를 작성해서 웹 브라우저가 실행하도록 해야 합니다. Q : 아니, 웹 브라우저도 프로그래밍 언어를 알아듣는다는 말인가요? A : 예스! Q : 브라우저가 알아듣는 프로그래밍 언어가 있다? ...
1도 몰라도 술술 읽힌다! 앞서 배운 조건문과 여기서 부터 배울 반복문은 모든 프로그래밍에 필수적인 기본 기능입니다. 프로그래밍을 하면서 반복문을 사용할 일이 많아요. 성적 처리나 매출 보고서와 같이 대부분 형식은 동일하면서 내용만 다른 많은 데이터를 처리해야 하기 때문에 동일한 일련의 작업을 반복해야 하는 경우가 많지요. 반복문은 "for", "while", "do...while" 등 3가지가 있어요. 여기서 사용되는 "for"라는 단어는 "... 동안"이라는 의미입니다. "for"의 대표적인 의미는 "...을 위한"이나 우리의 반복문에서는 "...동안"이라는 의미로 사용된 겁니다. 우리는 이 반복문들을 하나씩 배울거예요. 여기선 우선 가장 많이 사용되는 for 문 부터... for 문의 사용 형식은 다음과 같아요. 초기식은 한번만 실행되며, 이후 조건식이 "참"인 동안은 다음과 같은 순서로 반복 실행됩니다. 뭔 소린지... 백문이 불여일타! 백번 물어보는 것보다 한번 키보드를 두드려 코딩을 하고 실행시켜 보는 게 낫다는 말씀! 다음의 소스 코드를 보세요! ▶ sam26.html <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script> var count; // 01 for (count=1; count<=3; ++count){ // 02 document.write(count); /...
1도 몰라도 술술 읽힌다! do...while 문은 일단 한번은 명령문을 실행한 후에 계속 반복해서 실행할 것인지를 결정해야 할 때 사용합니다. 예를 들어, 100 이상의 숫자만을 입력받아야 한다면 일단 숫자를 입력받은 후 100 이상인가를 검사해서 100 미만이면 다시 숫자를 입력하는 과정을 반복해야 할 것입니다. do...while 문의 사용 형식은 다음과 같습니다. do...while 문은 일단 명령문들을 실행한 후에 조건식을 검사해서 명령문들을 계속 실행할 것인지를 결정합니다. while (조건식) 뒤에 반드시 ";"를 기술한다는 것을 유의해야 합니다. do...while 문을 사용하는 다음의 소스 코드를 봅시다. 이 소스 코드는 1 부터 시작해서 사용자가 입력한 정수까지 정수의 합과 곱을 구해서 출력합니다. ▶ sam32.html <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <script> var limit, num=1, sum=0, multi=1; // 01 limit = prompt("숫자를 입력하세요!"); // 02 do { // 03 sum += num; // 04 multi *= num; // 05 num++; // 06 } while (num <= limit); // 07 document.write("합 = " + sum); // 08 document.write(...
