·너무 졸린 하루의 시작
-새로운 것을 배우다보니, 정리와 복습이 늦어지고, 그러면 운동이 늦어지고, 결국 수면시간이 줄어든다. 결국 잠이 부족한 상태로 눈을 떴고, 커피를 아무리 마셔도 켠디션은 좋지 않았다. 너무 졸렸다.
그래도 어제 했던 것들을 잘 복습해놔서, 오늘은 정말이지 수월할 것이라고 생각했다. 그러나 그건 헛된 꿈이었다. 오늘은 어제보다 더 많은 것을, 정말 어렵다고 느낄 정도로 배웠다. for안의 for 정도는 우스웠다. 정말로....
생각보다 너무 많은 진도를 나가셨고, 수업이 끝나고 이해하고 정리했는데 벌써 12시가 넘었다.ㅠㅠ
·form의 정보를 확인하기
-보통은 jquery를 배워서 form의 정보를 보내는 방식으로 이뤄진다고 하는데, javascript의 함수를 통해 해당 정보를 확인하고 alert함수를 통해서 어떤 결과를 얻었는지 확인하는 것을 해봤다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function check(){
var sexcheck = document.getElementsByName('sex')
for (var i = 0; i < sexcheck.length; i++) {
if(sexcheck[i].checked==true){
alert(sexcheck[i].value);
}
};
}
</script>
</head>
<body>
<form>
<fieldset>
<label><input type="radio" name="sex" value="여자">여자</label><br>
<label><input type="radio" name="sex" value="남자">남자</label><br>
<input type="button" onclick="check();" value="확인">
</fieldset>
</form>
</body>
</html>모르는 것은 몇 가지 있었지만, 딱 봣을 때, 그렇게 헷갈릴 것이 있지는 않았다.
getElementsByName의 기능을 몰랐는데, 오늘 배웠다. 정말 단순하게 생각해서 name을 통해 요소들을 받는다는 의미로 이해하면 될 것 같다. 즉, sexcheck라는 변수에 ['여자', '남자']의 값이 들어간 것이다.
그리고 for문을 통해 변수의 index값 0, 1을 나타내는데(두 개의 값이라서 0,1이고, 위에선 i<sexcheck.length로 조건을 나타냈다. 여기서 i<2라고 줘도 동일한 값을 얻을 수 있지만, 만약, 새로운 성별이 발견되어서 나중에라도 새로운 성별 3을 넣어준다면, 세번째 값을 도출할 수 없기 때문에 .length를 써주는 것이 좋겠다.)
for의 하위에 if를 사용해서 sexcheck의 변수 중에 .checked의 값만 alert()함수로 알려달라는 뜻이다.
모르는 기능이었어서 그렇지 쓰고 나면 별 것 아니었다.
·checkbox의 값을 받기
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function ss(ff){
var open = ""
if(ff.cb1.checked){open+=ff.cb1.value+"\n"}
if(ff.cb2.checked){open+=ff.cb2.value+"\n"}
if(ff.cb3.checked){open+=ff.cb3.value+"\n"}
if(ff.cb4.checked){open+=ff.cb4.value+"\n"}
if(ff.cb5.checked){open+=ff.cb5.value+"\n"}
alert(open);
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>공개할 정보</legend>
<input type="checkbox" name="cb1" value="이름">이름<br>
<input type="checkbox" name="cb2" value="취미">취미<br>
<input type="checkbox" name="cb3" value="특기">특기<br>
<input type="checkbox" name="cb4" value="장점">장점<br>
<input type="checkbox" name="cb5" value="자기소개">자기소개<br>
<input type="button" onclick="ss(this.form);" value="결정">
</fieldset>
</form>
</body>
</html>checkbox의 값은 중복선택이 가능하기에 위와 같이 써줬다. value앞에 쓰는 .의 범주가 대체 어디서부터 써줘야되는건지 궁금했지만, 그 부분을 정확하게 알려주시지는 않았다. 그냥 form이라는 인자를 받은 매개변수 ff 안에 name인 cb1의 value라고 큰 범위부터 써준다 정도로만 이해하려 한다. 사실 매개변수와 인자 부분도 제대로 설명해주시지 않으셔서 직접 찾아봤다.ㅠㅠ
·form의 1개만 선택가능한 select 받기
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function majorcheck(ff){
document.write(ff.se.options[ff.se.selectedIndex].value);
}
</script>
<body>
<form>
<fieldset>
<legend>전공선택</legend>
<select name="se">
<option value="컴공">컴공</option>
<option value="전자">전자</option>
<option value="물류">물류</option>
<option value="아태">아태</option>
<option value="국통">국통</option>
<input type="button" onclick="majorcheck(this.form);" value="선택">
</select>
</fieldset>
</form>
</body>
</html>사실 조금 헷갈릴 수 있어서 ff.se.options[ff.se.selectedIndex].value 요 부분을 다른 변수에 넣어서 그 변수를 document.write()로 부르는 게 더 가독성이 높을 것 같긴 하다. 여기서 중요한 것은 [ .selectedIndex]를 기억하는 것이다. 다른 부분은 쉽게 이해 가능했다.
·간단한 계산기 만들기 eval()
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function calc(ff){
ff.cal_result.value = eval(ff.cal_inp.value)
}
</script>
</head>
<body>
<form>
<input type="text" size="20" name="cal_inp"><br>
<input type="text" size="20" name="cal_result"><br>
<input type="button" onclick="calc(this.form);" value="계산">
</form>
</body>
</html>eval이란 기능을 사용해보았다. input박스에 넣은 것을 계산해주는 기능인 것 같은데, 사실 저렇게 넣으면 데이터 형태가 숫자가 아닐텐데 어떻게 계산이 되는 것인지 조금 궁금하다. 찾아봤는데, 너무 복잡한 내용이 많아서 이해가 잘 되지 않았다. 내일 더 찾아보기로 하자. 시간이 12시 40분이 넘은 관계로ㅜㅜ
·계산기의 응용
버튼을 누르면 입력되는 간단한 계산기도 응용해서 만들어봤다.
여기엔 버튼의 그림까지 삽입해서 만들었기 때문에 깃허브의 링크를 올리겠다. 지나치게 길어지고 지저분해보일 수 있으니.
https://github.com/ysparkr841/html_class/tree/main/908prac_js_cal_button
중요한 부분은, 두 가지 인자를 두 가지 매개변수로 받아서 버튼 입력 시 해당 input박스에 원하는 문자가 들어가게 만드는 것이다.
·대망의 주민번호 확인하기
솔직히 여기서부터 거의 망했다고 생각했다. 왜냐하면 교수님이 주민번호를 확인하는 공식을 설명해주셨으나, 그 순서대로 프로그램을 짜서 보여주시지 않았다. 이 부분은 이 부분이다 정도로만 설명해주셔서 전체적인 그림이 그려지지 않았다. 또한, 처음보는 기능이 너무 많이 나왔는데, 그게 어떤 역할을 하는지도 설명이 부족했다. 결국 수업 끝나고 한참 혼자 찾아봤다.
if함수의 return이 가지는 의미같은 부분이나, substring(i,i+1)의 부분이 왜 저렇게 작동하는지 등등을 구체적으로 설명해주시지 않았다. 개인적으로는 전날 했던 배열부터 깊게 설명해주시지 않아서, 배열자체를 잘 못 알아들었으니 저 부분이 더 어려웠던 것 같다.
또
if(idnum_chk(idnum)==true){
alert("주민번호가 확인되었습니다.");
return true;}
alert("주민번호가 잘못 되었습니다.");
it.idnum1.focus();
return false;이런식의 문장이 나왔는데, return이 가지는 의미를 모르니, 왜 alert("주민번호가 잘못 되었습니다."); 이 부분을 else{}안에 넣지 않는지가 이해가 되지 않았다. 저 안에 안넣으면 계속 실행되지 않을까?에 대한 의문은 return이 돌아가버리란 뜻이라고만 말해주셨다....ㅜㅜ
결론적으로 한참을 뜯어보고 찾아봤다. 물론, 이 과정이 도움이 안된것은 아니었다. 혼자서 다른 코드를 볼 때 결국은 어떻게든 해석할 수 있을 것 같다는 생각은 들었다. 그래도 너무 어려웠다. 시간도 너무 많이 들었다. 매개변수와 인자의 개념, 배열의 개념과 내부 index의 구조를 그린 표, 함수에서 return이 가지는 의미 등등을 다 찾아보니 시간이 너무 흘렀다 ㅜㅜ 그래도 혼자서 스스로 보면서 작성하면서 해보니 이해는 되었다. 다만 스스로 처음부터 작성하라고 하면, 조금 애를 먹을 것 같다.
<!DOCTYPE html>
<html>
<head>
<title>주민체크</title>
<script type="text/javascript">
function jmcheck(fjm){
var ffjm = fjm.leftjumin.value + fjm.rightjumin.value;
if(comp(ffjm)==true){
alert("주민번호가 정확합니다.");
return true;
} alert("주민번호가 틀렸습니다.");
fjm.leftjumin.focus();
return false;
}
function comp(jumincomp){
var jumintotal = 0;
var juminadd = "234567892345"/*12자리까지 곱해야됨. i가 0부터 시작*/
for (var i = 0; i < 12; i++) {
jumintotal= jumintotal+ parseInt(jumincomp.substring(i,i+1)) * parseInt(juminadd.substring(i,i+1));
};
jumintotal= 11-(jumintotal%11);
if(jumintotal==11){jumintotal=1;}
else if(jumintotal==10){jumintotal=0;}
if(jumintotal==parseInt(jumincomp.substring(12,13))) return true;
}
</script>
</head>
<body>
<form name="InputForm" onsubmit="return jmcheck(this);">
주민번호:<br>
<input type="text" maxlength="6" size="6" name="leftjumin">-
<input type="password" maxlength="7" size="7" name="rightjumin">
<input type="submit" value="확인">
</form>
</body>
</html>그래도 혼자서 변수와 함수 이름을 수업과 전혀 다르게 해서 작성해보았고, 결국 성공적인 결과를 얻긴 했다.
·어려워지는만큼 줄어드는 취침
-솔직히 어려울 거라고는 생각했지만, 이렇게까지 시간을 잡아먹을줄 상상도 못했다. 운동을 많이 하는 것도 아니고, 하루에 잠깐 하고 자는건데도, 그 운동시간까지 점점줄어들고 있다. 허허 오늘은 나와의 약속을 정말 안지키고 싶다...
그래도 운동하고 자야지.
앞으로도 이렇게 체력적으로 힘든 날들이 많을 것이다. 이건 진짜 세발의 피일 것이다. 그래서 사실 어려워지는만큼 취침시간을 줄여야하는 것이 당연한 것도 같다.
그래도 못자는만큼 꼭 집중해서 하나라도 더 공부하고 정리하고 복습하자. 내일은 일어나자마자 학원으로 달려가서 주민번호 체크하는 것을 처음부터 꼼꼼히 뜯어봐야지.
파이팅!!!
p.s 오늘 너무 선생님께 불평불만이 많은 느낌으로 글을 작성했지만, 사실 선생님 탓이라기 보다는 나의 잘못이 더 크다. 내가 어디서부터 어디까지 궁금한 것인지, 어디서부터 이해가 안되는 것인지 확실하지 않아 질문을 못한 것도 있고, 코로나로 인한 비대면 수업이 진행되면서 질문하기가 어려운 부분도 있는 것이기 때문에, 내일은 모르는 부분을 전부 여쭤보도록 해야지. 대면 수업이니까!
