·진도진도진도
-오늘은 복습보다는 진도를 엄청나게 빠르게 나가셨다. 복습을 안한 것은 아닌데, 전날 배웠던 if문과 prompt함수의 복습을 아주 간단하게 진행했다.
var name = prompt("이름을 입력하세요");
var kor = Number(prompt("국어성적을 입력하세요"));
var mat = Number(prompt("수학성적을 입력하세요"));
var tot = kor + mat;
var avg = tot/2;
document.write("이름 :"+name+"<br>");
document.write("국어 :"+kor+"<br>");
document.write("수학 :"+mat+"<br>");
document.write("합계 :"+tot+"<br>");
document.write("평균 :"+avg+"<br>");다만, 어제와 다른 점은, 애초에 prompt로 값을 받아 변수에 넣을 때 Number함수를 넣어서 숫자로 바꿔준 점이다. 어제 나도 저게 낫다는 생각을 하긴 했었다. 지금이야 kor와 mat을 계산에 사용하는 것이 한번뿐이지만, 만약 kor와 mat을 더하고 곱하고 나누고까지 하게 되면 매 연산마다 Number함수를 넣어야하기 때문에 애초에 변수에 넣을 때 Number함수를 쓰는 것이 나을 것 같다.
만약, 여기서 html로 table을 넣어준다면 어디에 넣어줘야 할까? 라는 질문에 사실 조금 당황했다. 어디서부터 넣어줘야될지 몰랐다. 그런데 공책을 꺼내고 조금만 생각하니 되게 깔끔하게 정리가 되어서 금방 해결할 수 있었다.
document.write("<table border=1>")
document.write("<tr><td>이름: </td><td>"+name+"</td></tr>");
document.write("<tr><td>국어: </td><td>"+kor+"</td></tr>");
document.write("<tr><td>수학: </td><td>"+mat+"</td></tr>");
document.write("<tr><td>합계: </td><td>"+tot+"</td></tr>");
document.write("<tr><td>평균: </td><td>"+avr+"</td></tr>");
document.wirte("</table>")table을 공책에 그리고, 어느 열과 어느 행에 무엇을 넣을 지 생각하면 생각보다 간단하게 넣을 수 있었다. 공책에 그리지 않고 바로 머릿속에서도 빠르게 나올 수 있으면 좋을 것 같긴 하지만, 지금은 정확한 것이 더 중요할 것 같기에 머릿속에서 정리가 안되면 공책에 바로바로 그려봐야 겠다.
·if()와 else if(), else
-if문을 본격적으로 배웠다. if와 조건문, 또 조건문에 true와 false, 두가지로만 표현했던 것에 추가로 else if까지 넣어서 더 폭넓게 사용할 수 있었다.
python에서도 해봤던 if문의 typical한 문제, 성적표 만드는 것을 했다. 파이썬에서 해봐서 충분히 금방 만들 수 있었다.
<script>
var ss = Number(prompt("성적을 입력하세요"));
var grade;
if(90=<ss<=100){grade = "A";}
else if (80<=ss<=89)
{grade = "B";
}
else if (70<=ss<=79)
{grade = "C";
}
else {
grade = "F";
}
document.write("성적은 "+grade+"입니다.");
</script> 하! 지! 만!
아마 코딩을 좀 아시는 분이 이 부분을 봤다면 오류를 발견하셨을 것이다. 나는 파이썬에서 나름 if문을 굉장히 잘 배워놨고 잘 정리했다고 생각했다. 그런데, 계속 오류가 났다. 도대체 어디가 오류인지 굉장히 오랬동안 봤던 것 같다. 그런데 수업 시간에 교수님이 쓰신 코딩을 보니, 변수의 범위를 한쪽만 하셨다. 즉, ss>=90의 범위만 주시고 실행하셨다. 그래서 구글링을 해보니 javascript에서는 저런 조건문을 쓸 때 범위를 양쪽을 한번에 주면 오류가 난다고 한다. 파이썬의 언어가 정말 쉽고 편리하고, 다른 언어들은 거의 다 비슷하다고 한다. 그래서 조건에 연산자를 사용해서 양쪽 범위를 줘봤다.
<script>
var ss = Number(prompt("성적을 입력하세요"));
var grade;
if(ss>=90 && ss<=100){grade = "A";}
else if (ss>=80 && ss<=89)
{grade = "B";
}
else if (ss>=70 && ss<=79)
{grade = "C";
}
else {
grade = "F";
}
document.write("성적은 "+grade+"입니다.");
</script>-이렇게 하니 오류가 안났다. 물론 ss>=90의 범위만 주어도 입력이 정확하다면 오류가 없겠지만, 조금 더 정확한 범위를 주고 싶었다. 예를 들면, 90점 이상이면 "A"의 결과가 나오지만, 101점을 입력했다면? 101점은 사실 정확하게 점수를 입력한 것이 아니지만 "A"의 결과를 얻는다.
그런 상황을 피하고 싶어서 수업 쉬는 시간에 해당 범위를 벗어나면 잘못입력했다는 값이 나오게 하고 싶었다. if문 하나만 써서 만들고 싶었지만, if문 하나로는 도저히 할 수가 없었다. 그래서 if문 안에 if문을 사용해서 만들었고, 성공했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function gd(){
var score=Number(prompt("성적을 입력하세요."));
var grade;
if (score<=100 && score>0)
{
if (score<=100 && score>=90)
{ grade = "A"
}
else if (score>=80 && 89>=score)
{ grade = "B"
}
else if (score<=79 && score>=70)
{ grade = "C"
}
else if (score<=69 && score>=60)
{ grade = "D"
}
else {
grade = "F"
}
document.write("당신의 점수는 "+score+"점 이므로"+" 학점은 "+"\""+grade+"\""+"입니다.");
}
else{
document.write("잘못 입력하셨습니다.");
}
}
</script>
<title>Document</title>
</head>
<body>
<button onclick="gd();">성적 출력</button>
</body>
</html>다음과 같이 입력하면 어떤 범위의 숫자를 줘도 원하는 값을 얻을 수 있었다.
·switch()
-다음은 비슷하게 조건문을 만들 수 있는 switch()함수를 배워봤다.
if와 조금 다르긴 하지만 동일한 기능을 수행할 수 있다. 다만, 굳이 언급을 하자면 if는 조금 열려있는 조건들에서 찾아가는 것이고, switch는 문들이 있는데, 그 문들에 맞는 값들이 도출되는 것이라고 해야하나...
사실 정확하게는 표현이 안되지만 그런 느낌이었다. 개인적으로는 만약 if와 switch 둘 다 사용할 수 있다면 if를 쓸 것 같은 느낌이 강하다. 그래도 다 쓸 수 있게 복습복습
<script>
function ss(){
var ss = Number(prompt("성적을 입력해주세요."));
var gg;
switch(parseInt(ss/10)){
case 10 : gg = "A"; break;
case 9 : gg = "A"; break;
case 8 : gg = "B"; break;
case 7 : gg = "C"; break;
case 6 : gg = "D"; break;
default : gg = "F";
}
document.write("학점은 "+gg+"입니다.");}
</script>여기서 중요한 점은 break이다. break는 마치 동전을 크기 순으로 분류해서 나누는 기계처럼, 한번 그 조건에 부합하면 아래로 못내려가고 해당 함수를 빠져 나가라고 하는 기능이다. 만약 break가 없다면 해당 조건에 부합하더라도 아래로 내려가서 다른 값들을 가져올 수 있기 때문에 꼭꼭 break를 잊지 말고 해줘야 한다. 또한 default는 맨 마지막 값이기 때문에 굳이 break를 줄 필요가 없다.
·반복문
-if문과 양대산맥을 이룬다는 for 함수를 사용해봤다.
그런데 개인적으로 while을 먼저 써보고 for에 들어가면 훨씬 더 이해하기 쉬울 것 같아서 while을 먼저 정리하고 for을 정리하겠다.
<script>
function kk(){
var sum = 0;
var i = 1;
while(i<=100){
sum += i; //sum=sum+i;
i +=1; //i++;
}
document.write("1부터 100까지의 합은? "+sum);
}
</script>while은 조건에 부합할때는 {}안의 내용을 계속 실행한다. 따라서 다른 조건을 설정하지 않으면 무한루프에 빠질 수 있다. 그래서 {}안에 직접 원하는 값을 얻을 수 있는 부분과, 내가 원하는 값을 구하고 조건을 멈출 수 있는 부분을 설정해야 한다.
for는 while의 풀어쓴 부분을 한 곳으로 옮겨놓아 편하게 쓸 수 있게 해준 느낌이다.
동일하게 1부터 100까지의 합을 구할 때 for는 정해진위치에 초기값, 조건, 증가치만 적어주면 {}내용을 알아서 수행한다.
<script>
function kk(){
var sum = 0;
for (i = 0; i <= 100; i++)
{
sum = sum + i;
}
document.write("1부터 100까지 합은? "+sum);
}
</script>위에서 sum = sum +1 은 sum+=1로 쓸 수 있다. i= i+1은 i+=1 또는 i++로 쓸 수 있다.
for의 반복문에 if로 조건을 넣어서 원하는 값을 얻을 수도 있다.
<script>
function kk(){
var sum = 0;
for (i = 0; i <= 100; i++) {
if (i%3 ==0){
sum = sum + i;
}
}
document.write("1부터 100까지 3의 배수의 합은? "+sum);
}
</script>위는 3의 배수를 구하는 것이다. 3의 배수는 i에서 3을 나눴을 때 나머지가 0인 숫자들이다. 그래서 if 안의 조건은 i%3==0이다. 위를 해석하자면, for문으로 1부터 100까지의 숫자를 다 더할거다!라고 했는데 if문의 조건문이 있어서 3의 배수가 아닌 아이들은 sum+=i를 거치지 않는다. 즉, 3의 배수들만 더해져서 해당 값을 얻을 수 있다.
·오늘의 난관, for문 안의 for문
-for안에서 for을 쓸 수 있다고 말씀하시면서 설명을 해주셨다. 다만, 너무 큰 그림으로만 설명해주셔서 도대체 어떻게 해당 결과가 나왔는지 이해가 가지 않았다. 그래서 구글링으로 검색하고 엄청나게 중요한 사실을 알아냈다.
결국 for문이란 {}의 내용을 반복하는 것이다.
그렇다면 for문 안에 for문이 있다는 것은, 밖의 for문이 한번 반복할 때, 안의 for문이 본인의 모든 반복을 다 수행한다는 것이다.
<script>
function kk(){
for (i=1; i<=10 ;i++ ){
for (j=1; j<=i ; j++){
document.write("*");
}
document.write("<br>");
}
}
</script> 위의 for 안의 for을 보면
처음 i가 1일 때, 10보다 작기 때문에 {}안의 내용을 수행한다. 그런데 {}안의 내용이 또 for문이기 때문에 j를 확인한다. j=1의 값을 갖고, j가 i와 같기 때문에 조건에 부합 *을 출력한다. 그 후에 j++의 증가치를 받아 j의 변수 값이 2가 되고, 다시 첫 for문으로 가는 것이 아니라 두번째 for문의 조건에 부합하는지 확인, j가 i보다 커졌으니 멈춘다. 그리고 나서 밖의 <br>을 수행한다.
그리고 다시 처음 for문으로 돌아가서 i가 i+1의 값으로 바뀌어 i=2가 되고 다시 반복 수행한다.
이렇게 대응되게 계속 해보면 for문 안의 for문에 대한 이해가 쉽다.
오늘 가장 이해하기 어려운 부분이었는데 다행히 잘 해결했다.
·배열
<script>
var c1=[10, 20, 30, 40]
var i;
for (i=0;i<4 ;i++ )
{
document.write(c1[i]);
}
document.write("<br><br><br><br><br><br>");
/*1행 4열의 table 태그를 만들어보자 tr td를 어디에 넣어야 할까?*/
/*for함수 안에 table과 tr태그를 넣어봄.*/
var c2=[11, 22, 33, 44];
var j;
for (j=0;j<4 ;j++ )
{document.write("<table border=2><tr>");
document.write("<td>"+c2[j]+"</td>");
document.write("</tr></table>");
}
/*이건 사실상
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
이런 식임. table이 4개가 있는 것. margin을 줘보면 더 확실함.
*/
document.write("<br><br><br><br><br><br>");
/*form 함수 안에 tr태그와 td태그만 넣어봄*/
var c2=[11, 22, 33, 44];
var j;
document.write("<table border=2>");
for (j=0;j<4 ;j++ )
{document.write("<tr>");
document.write("<td>"+c2[j]+"</td>");
document.write("</tr>");
}
document.write("</table>");
/*이건
<table>
<tr><td></td><tr>
<tr><td></td><tr>
<tr><td></td><tr>
<tr><td></td><tr>
</table>
이런 식임. table은 하나지만, 행이 4개고 열이 1개임.
*/
document.write("<br><br><br><br><br><br>");
/*행이 1개이고, 열이 4개인 테이블을 만드려면 다음과 같이가 정답.*/
var c2=[11, 22, 33, 44];
var j;
document.write("<table border=2><tr>");
for (j=0;j<4 ;j++ )
{
document.write("<td>"+c2[j]+"</td>");
}
document.write("</tr></table>");
</script> 이 부분은 정확하게 설명을 안해주신 부분도 있고, 보면 이해되는 부분이라 디테일한 설명은 남기지 않겠다. 결론부터 말하자면, 변수에 특정 값을 넣을 수도 있지만, 값들의 집합을 넣을 수도 있다. 그리고 그 값들을 for문으로 꺼내서 행과 열로 이루어진 결과를 얻을 수 있다. 다만 table 태그를 어디에 넣어줘야 하는지는 확실하게 잘 볼 필요가 있다.
주석 부분에 실행과 결과, 해석까지 넣어놨으니 헷갈릴 때마다 잘 봐야겠다.
·쉴 틈 없는 진도
-오늘은 말 그대로, 지금까지 적게 나간 진도를 성큼성큼 나아간 날이었다. 너무 새로운 아이들이 많이 튀어나와서 힘들기도 한 하루였다. 복습하고 정리하는데만 한참걸렸으니...사실 여기 올린 것 말고도 진행한 문제들이 엄청 많다... 그것들은 깃허브에 올려놓을 생각이다. 어차피 위의 내용만 이해했다면 굳이 보지 않아도 완성할 수 있을 것이라 생각한다.
그래도 오늘 새로운 것을 많이 배웠으니 내일은 복습위주의 수업을 해주신다고 한다. 그렇다면 오늘 정리하고 복습한 내용들을 더 잘 이해할 수 있는 시간이 될 것 같다. 실습실습 복습 연습!! 그것만이 살길이다.
벌써 12시가 지나고 있어서 운동과 영어공부를 무사히 끝낼 수 있을지 걱정이다. 그래도 꼭 하고 잘거긴 한데.... 벌써 졸립다...
그래도 운동하자 바로!!! 파이팅!!!
