·건너뛴 일요일
-고민을 많이 했다. 일요일도 벨로그와 깃허브에 파일을 올려서 매일매일 하루도 빠짐없이 작성을 할 것인지, 아니면 일요일을 쉬고 월요일부터 토요일까지만 작성할 것인지. 물론, 일요일에 코딩을 쉰다는 의미는 아니다. 실제로 어제도 부터 타이핑을 시작해 여러방법으로 사이트 화면처럼 화면을 분할하고 채우고를 반복했다.
다만, 첫째로, 토요일에도 금요일까지 배운 내용을 올렸고, 일요일에도 별 다를 것이 없는 반복 학습을 했기 때문에 벨로그에 새로 올릴 내용이 없었다.
두번째로, 주말에는 부모님의 일을 도와드리고 다른 공부에 더 집중해야 했다.
마지막으로는 친구의 조언이었다. 일주일의 5일을 학원과 집에서 11시간 넘게 공부하는데, 일요일까지 그렇게 달리면 6개월을 어떻게 버티냐는 것이었다. 당장 첫 몇 주는 버티겠지만, 길게 봐야하는 여정인데 시작부터 체력을 너무 소모하지 말고 쉴 때는 어느정도 쉬어주라는 조언이었다. 들어보니 꽤나 합당한 조언이어서 수긍하고, 어느정도 코딩을 하되, 굳이 정리해서 벨로그에 올리지는 않겠다고 생각은 했다. 물론, 그래도 새로운 것이 궁금하고 찾아봤는데 이건 올려서 나중에 봐도 좋겠다 싶은 것은 지체없이 그날 저녁에 올릴 생각이다. 그러나, 일요일은 "무조건 올려야지!"라는 강박에서 조금 벗어나는 하루로 정해두려 한다.
·복습복습복습
-주말을 보내고 와서 그런지 수업은 거의 복습 위주로 이뤄졌다. 많이 해왔던 것들이기때문에 미리 실습해보라고 주신 시간에 빠르게 목표하는 실습을 끝냈다. 남는 시간에 최대한 꾸미는 것에 집중해서 좌우대칭이나 색상을 조정했다.
또한, 포토샵으로 간단하게 만든 버튼을 form형식에 넣는 것.(지난 주에 혼자 했던 연습) 그걸 다시 해보려고 했는데, 저번에 했던 것이 상당히 문제가 있었다는 것을 깨달았다.
<input type="image" src="./button_1.png" id="bt1" alt="확인">저번 주에는 위와 같이 작성했는데, 이렇게 되면, 확인 버튼에 넣은 이미지는 확실하게 표시되지만, 저 버튼의 타입이 submit이 아니게 된다. 즉, 제출의 기능을 하지 않는 확인이란 그림이 들어간 버튼이 되는 것이다. 나는 제출 기능의 확인 버튼을 만들고 싶었었기 때문에 이것은 잘못된 작성법이었다. 물론, 저 버튼 태그로도 가능할 수 있겠지만, 찾아본 사이트들에서는 발견할 수 없었다.
<style>
form{background: #EDEDED; border: 3px solid black; color: black; width: 30%}
legend{background: #444444; color: white; width: 30%; margin: auto; text-align: center;}
#input1{width: 98%}
#input2{width: 47%}
#cir1{padding: 0px 10%;
background-image: url('button_1.png');
background-repeat: no-repeat; background-position: 0px 0px;
background-repeat: no-repeat;
width: 60px;
height: 29px;
border: 0px;
cursor:pointer;
outline: 0;
}
#can1{padding: 0px 10%;
background-image: url('button_2.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-repeat: no-repeat; width: 60px;
height: 29px;
border: 0px;
cursor:pointer; outline: 0;}
#ps{margin: 5px 35%;}
</style>
<body>
<div id="ps">
<input type="submit" value=" " id="cir1"> <input type="reset" value=" " id="can1">
<div>
</body>이런식으로 작성하면 input에 submit기능을 한 버튼에 css로 그림을 넣어서 확인 버튼을 만들 수 있다. 그림 크기를 css에서 어떻게 조절하는지는 몰라서, css에 있는 width와 height의 크기에 맞춰 포토샵에서 버튼 그림파일의 크기를 다시 조정했다. css에서 조정해서 넣을 수 있었으면 했는데, 아직 방법을 모르겠다. 그래도 다행히 정상적으로 수행이 가능한 버튼에 이미지를 넣는 것이 성공했다.
·JavaScript 복습과 공부
-javaScript에서 안녕하세요를 출력하고, 변수를 받아 누구누구님 안녕하세요를 하는 것까지 복습했다.
·onmouseover onmouseleave
또한, 이미지 두 개를 받아서 마우스 커서를 올리면 이미지가 변하는 방법도 공부했다. html과 javascript를 동시에 쓰는 느낌이었지만, 신기한 기능이었다.
<body>
<script>
alert("그림을 보고 싶으세요? 그러면 확인을 누르세요.");
</script>
<img src="./img/cat.jfif" onmouseover="this.src='./img/dog.jpg';" onmouseleave="this.src='./img/cat.jfif';"><!--여기서 this는 이 태그(그림파일 혹은 img)을~ 이라는 뜻임. 그래서 this.src임.-->
</body>onmouseover는 마우스 커서를 올렸을 때, onmouseleave는 마우스 커서가 그림에서 벗어났을 때 각각 어떤 이미지를 나타낼 지에 대한 html기능이다.
·if문 활용
-컴퓨터가 계산기와 다르게 기능할 수 있는 것이 바로 이 if문 때문이라는 말이 있을 정도로 중요한 기능이 if문이라고 들었다.
오늘은 이 if문을 javascript에서 사용해보았다. 다행히 사전교육 때 배운 내용이라 이해하기 어렵지 않았다.
<script>
var aa = confirm("고양이를 보고 싶으십니까?");/* 컨펌-확인을 누르면 true가 취소를 누르면 false가 변수 aa에 들어감*/
if(aa === true)/*괄호 안의 내용이 조건*/{
document.write("<img src='./img/cat.jfif'>");
}
else{
document.write("감사합니다. 안녕히 가세요.");
}
</script>참고로 ==과 ===은 무슨 차이인가? ===는 완전히 똑같을 때의 경우를 말한다. 예를 들면, if(1=="1")의 조건문은 앞에는 숫자 1이고, 뒤에는 문자형 1이기 때문에 false의 값을 가지겠지? 싶겠지만, true의 값을 가진다.
<script type="text/javascript">
if(1 =="1"){
document.write("222");
}else{
document.write("333");
}
</script>위와 같은 경우에는 무슨 값이 출력되냐면, 222가 출력된다, 즉 1=="1"은 true라는 것이다. 그래서 문자형까지 같은가?에 대해 말하려면 1==="1"로 작성해야 한다. 위의 경우를 1==="1"로 바꾸면 333이 출력된다. 즉, if()의 조건문 부분이 false인 것이다.
·prompt()
var name = prompt("이름을 입력하세요");
var kor = prompt("국어성적을 입력하세요");
var mat = prompt("수학성적을 입력하세요");
var tot = Number(kor) + Number(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>");
</script>-prompt의 기능은 변수에 특정 숫자나 문자, 문자열을 넣는 것이 아니라, 파일을 실행한 사람이 직접 특정 값을 입력할 수 있게 해주는 기능이다. 파이썬의 input같은 기능으로 이해하면 쉽다. 파이썬에서는 input을 넣으면 콘솔에서 직접 숫자를 입력하는 방식으로 썼었던 것을 상기해보자!
중간의 Number(kor)의 경우도 파이썬에서 사용할 때를 기억해보면 충분히 알 수 있다. prompt로 입력된 숫자의 데이터 타입은 문자형이다. 따라서 Number()가 없다면 kor에 입력되는 값은 숫자가 아니라 문자형을 띄게 된다. 문자형과 문자형의 +는 그냥 문자의 나열이된다. 따라서 문자형 데이터를 숫자형으로 바꿔줘야 하는데 해당 기능을 하는 함수다.
·혼자 해본 예습
-파이썬에서 if 구문을 사용하기 전에 논리연산자를 공부했고 그 논리연산자를 이용해서 다양한 것을 만들었었다. 그래서 javascript의 논리 연산자를 찾아보았고, 많이들 만든다는 것을 혼자서 만들어보았다.
파이썬의 and or not은
javascript에서는 각각 && || !==이다.
||이 기호가 대체 어디있는 것인지 한참을 찾았다는 헤프닝이 있었지만, 줄 두 개가 한번의 터치로 입력이 가능한 것이 아니라 두 번 누르는 것이었고, 엔터와 백스페이스 키 사이에 있는 키보드를 누르면 된다는 것을 이제는 확실하게 깨달았다.
- 정해진 아이디를 입력하고, 맞으면 비밀번호를 물어보고, 맞으면 로그인 성공. 정해진 아이디를 입력하고 틀리면 로그인 실패. 정해진 아이디를 입력하고, 맞으면 비밀번호를 물어보고, 틀리면 역시 로그인 실패가 뜨게 만들자.(그림을 그렸는데, 그림파일을 올리지는 않겠다. 나중에 궁금하면 공책을 볼 것!)
<script>
var id = prompt("아이디를 입력하세요.");
if(id == 'ididididid'){
var password = prompt('비밀번호를 입력하세요.');
if(password =='111111'){
alert('로그인 되었습니다. '+id+'님 환영합니다.');
}
else{alert('로그인 정보가 일치하지 않습니다.');
}
}
else{
alert("로그인 정보가 일치하지 않습니다.");
}
</script>
꽤나 복잡해보이지만 사실 별 것 없다. if로 아이디를 물어보고, 통과 시 비밀번호를 물어보는 쪽에 또 if를 쓰면 되는 것이었다. if문 안에서 if문을 쓰는 것도 가능하다!!
- 위와 비슷하지만, 로그인이 가능한 아이디가 여러개이고, 그 중 어떤 아이디만 일치해도 로그인이 가능하다. 단! 정해진 비밀번호는 하나이기 때문에 비밀번호는 일치해야 한다. 즉, 아이디는 세 아이디 중 하나와 일치해야하고 비밀번호까지 일치해야 로그인 가능하게 만드는 것.
<script type="text/javascript">
var id = prompt("아이디를 입력하세요.");
var password = prompt("비밀번호를 입력하세요.");
if((id == "idid1" || id=="idid2"|| id=="idid3") &&(password=="123456789")){
alert("로그인에 성공하였습니다. "+id+"님 환영합니다.");
}
else{
alert("로그인 정보가 일치하지 않습니다. 아이디와 비밀번호를 확인해주세요.");
}
</script>다음과 같이 하면 논리 연산자 덕분에 if구문을 한번만 사용해도 된다는 장점도 있었다.
·사전교육의 중요성, 앞으로
-사전교육에서 배운 파이썬이 html과 css를 배울 때는 크게 도움이 되지 않았는데, 점점 조금이라도 도움이 되고 있다. 역시 뭐든 열심히 배우면 안좋을게 없는 것 같다.
내일은 파이썬에서 한 홀수 짝수 맞추기, 성적표 출력하기 등등을 스스로 만들어보기로 하자. 오늘은 너무 늦어서 불가능... 시간을 잘 쓰지 못한 하루였던 것 같다.ㅠㅠ
추가적으로 for구문을 예습할 수 있다면 for구문을 예습해보자. 만약 내일 수업 때 배운다면 잘 복습해보자.
영어 공부! 운동! 빼먹지 않고 하자!!! 새로운 한 주도 파이팅!!!
