1. html 문서에서 값 가져오기 : document
- html 문서에서 값을 가져오기 위해서는 document 객체의 get 함수를 이용한다.
- 대표적으로 아래 함수들을 사용하는데 특히 html 의 id, class, name 등을 이용해서 해당 태그 내 값을 가져온다.
- document.getElementById();
- document.getElementsByClassName()
- document.getElementsByName()
- document.getElementsByTagName()
- document.getElementsByTagName()
- document get 함수를 통해서 가져오는 값들은 모두 ‘객체’ 이다. 이 때문에 객체의 값을 다시 가져오기 위해서는 value 를 사용해야한다.
- console.dir(객체) 를 사용하면 해당 객체에서 사용 할 수 있는 변수들을 확인 할 수 있다.
1) 사칙연산
<html> <head> <script> function cal(){ // console.log(document.getElementById("cal").value); if(document.getElementById("cal").value == '+'){ // 두 개의 값 가져오기 var num1 = document.getElementById("txt1").value; var num2 = document.getElementById("txt2").value; // 형변환하여 result 에 담기 var result = parseInt(num1)+parseInt(num2); // id 가 result 인 곳에 값 담기 document.getElementById("result").value = result; }else if(document.getElementById("cal").value == '-'){ var num1 = document.getElementById("txt1").value; var num2 = document.getElementById("txt2").value; // 형변환하여 result 에 담기 var result = parseInt(num1)-parseInt(num2); // id 가 result 인 곳에 값 담기 document.getElementById("result").value = result; }else if(document.getElementById("cal").value == '*'){ var num1 = document.getElementById("txt1").value; var num2 = document.getElementById("txt2").value; // 형변환하여 result 에 담기 var result = parseInt(num1)*parseInt(num2); // id 가 result 인 곳에 값 담기 document.getElementById("result").value = result; }else if(document.getElementById("cal").value == '/'){ var num1 = document.getElementById("txt1").value; var num2 = document.getElementById("txt2").value; // 형변환하여 result 에 담기 var result = parseInt(num1)/parseInt(num2); // id 가 result 인 곳에 값 담기 document.getElementById("result").value = result; } } // eval() 함수 이용하기 function cal2(){ var num1 = document.getElementById("txt1").value; var num2 = document.getElementById("txt2").value; var oper = document.getElementById("cal").value; // var result = document.getElementById("result").value; // exp 에 들어간 문자열이 var exp = num1+oper+num2; // eval 을 통해 하나의 식으로 변환 계산되어 data 에 저장됨 var data = eval(exp); document.getElementById("result").value = data; } </script> </head> <body> <input type="text" name="" id="txt1" size="5"> <input type="text" nane="" id="cal" size="5"> <input type="text" name="" id="txt2" size="5"> <input type="button" value="=" title="cal()"> <input type="text" name="" id="result"> </body> </html>2. href 다루기
- 자바스크립트에서 href 를 다루기 위해서는 location 객체를 사용한다.
- 이때
location.href 는 ‘현재 위치’를 나타낸다고 생각하면 편하다.
- 즉 location.href 를 고치면 해당 스크립트가 실행되었을 때 내가 수정한 위치로 이동하게 된다.
3. DIV 다루기
- JS 로 DIV를 다뤄서 DIV 내 글자를 출력하거나 DIV 내 값을 가져오는 등 다양한 기능이 가능하다
공부한 것을 활용해서 LOTTE 만들기!!
- js 의 배열+정렬을 사용한다. 그림은 이전에 JAVA 에서 사용하던것 그대로!
<html> <head> <style> img{ margin-top: 100px; width: 150px; height: 150px; } #roll{ margin-top: 100px; width: 150px; height: 100px; position: relative; /* right: -350px; */ font-weight: bold; } </style> <script> function rollLotte(){ var num = []; // 배열 선언 for(var i=0; i<6; i++){ var no = (Math.floor(Math.random()*45)+1); // 중복검사 // num 안의 요소를 하나씩 꺼내와서 // 내가 새로 생성한 letto 와 비교 후 // 동일하면 새로 lotte 뽑기 for(var j in num){ if(num[j] == no){ no = (Math.floor(Math.random()*45)+1); } } num.push(no); } // JS 용 정렬 // 오름차순 정렬 num.sort(function(a,b){ return a-b; }); // console.log(num[1]); for(var i=0; i<6; i++){ // console.log(ran); var photo = document.getElementById("lotte"+(i+1)); photo.src = "../lotte/ball"+num[i]+".png"; } } </script> </head> <body> <img src="../lotte/q.jpg" id="lotte1" alt="lotte"> <img src="../lotte/q.jpg" id="lotte2" alt="lotte"> <img src="../lotte/q.jpg" id="lotte3" alt="lotte"> <img src="../lotte/q.jpg" id="lotte4" alt="lotte"> <img src="../lotte/q.jpg" id="lotte5" alt="lotte"> <img src="../lotte/q.jpg" id="lotte6" alt="lotte"> <input type="button" id="roll" value="Big Chance" title="rollLotte()"> </body> </html>- 자바 스크립트를 사용하여 document 내 값들을 가져올 수 있는데 이러한 방법은 총 2가지
1) 배열을 통해 form 값 가져오기
<html> <head> <script> function checkForm(check){ console.dir(check); // 자바 스크립트를 이용해서 fomr 안에 있는 내용을 가져 올 수 있다. // 이렇게 가져오는 것은 배열을 이용해서 가져오는 방식 // 즉 form 안에 있는 내용은 일종의 배열로 취급한다. // 순서는 당연히 form 의 순서에 따른다 var id = check.form[0]; var pw = check.form[1]; var pwConfirm = check.form[2]; var email = check.form[3]; // 유효성 검사 // return ; 을 사용해야만 유효성 검사 후 // 검사에서 실패(누락 확인)되면 당므으로 넘어가는것이 아니라 중간에서 컷! if(id.value == ''){ alert("아이디를 입력하세요"); id.focus(); return ; }else if(pw.value == ''){ alert("패스워드를 입력하세요"); pw.focus(); return ; }else if(pwConfirm.value == ''){ alert("패스워드 확인을 입력하세요"); pwConfirm.focus(); return ; }else if(email.value == ''){ alert("이메일을 입력하세요"); email.focus(); return ; } // 비밀번호 확인 else if(pw.value != pwConfirm.value){ alert("비밀번호가 동일하지 않습니다"); pw.value = ''; pwConfirm.value = ""; pw.focus(); return ; }else if(pw.value.length < 6){ alert("패스워드는 최소 6자 이상이여야 합니다"); pw.value = ''; pwConfirm.value = ""; pw.focus(); return ; } // 이메일 검사 // indexOf 사용하여 문자 확인 시 잇다면 해당 위치 번호를 return // 없으면 -1 return else if(email.value.indexOf('@') == -1){ alert("이메일 주소가 올바르지 않습니다"); email.value = ""; return ; } // get_post html 에 전달 check.form.action="get_post.html"; // method check.form.method="post"; // 제출 check.form.submit(); } </script> </head> <body> <form action="" method="get"> <table> <tr> <td>아이디</td> <td><input type="text" name="userid"></td> </tr> <tr> <td>비밀번호</td> <td><input type=text" name="userpw"></td> </tr> <tr> <td>비밀번호 확인</td> <td><input type="text" name="userpwConfirm"</td> </tr> <tr> <td>이메일</td> <td><input type="text" name="email"></td> </tr> <tr> <td colspan="2"> <input type="button" value="submit" title="checkForm(this)"> <input type="reset" value="reset"> </td> </tr> </table> </form> </body> </html>5. 객체 다루기
1) 객체 선언과 사용
- JS 에서 객체의 선언은 var 변수명 = {} 으로 객체를 선언 할 수 있다.
- 이후 객체변수명.전역변수명 을 사용해서 변수와 값을 초기화 가능하다.
- 혹은 JSON 방식을 사용해서 초기화도 가능하다
- 자기자신을 가르키는 this 를 사용가능하다
2) let 변수명 = new 객체명();
<html> <head> <script> function getTime(){ let time = new Date(); console.log(time); // 날짜 시간은 date 객체 사용 var year = time.getYear(); console.log(year); var year2 = time.getFullYear(); console.log(year2); var month = time.getMonth(); console.log(month); var now = time.getFullYear()+" 년 "+ (time.getMonth()+1)+" 월 "+ time.getDate()+" 일 " + time.getHours()+" : "+ time.getMinutes(0) + " : "+ time.getSeconds(); console.log(now); document.getElementById("time").value = now; } </script> <style> input#time{ width: 200px; } </style> </head> <body> <input type="text" id="time"> <input type="button" value="현재 시간은??" title="getTime()"> </body> </html>3) 시간 출력하기 - 특정시간이 지난후
- 시간을 가져오는 Date 클래스를 사용
- window.setTimeout 함수는 특정한 시간(1000ms, 1초) 후에 실행되는 함수로 showNowTime 을 실행했을 때 div 영역에 현재 시간을 찍음
- 이후 windowsetTimeout(showNowTime, 1000) 을 확인하여 showNowTime을 (1000ms)1초 마다 호출함 ⇒ 즉 1초가 지날 때 마다 showNowTime 을 호출하여 출력함
4) 함수를 특정시간마다 반복 실행
- window.setInterval 을 사용하면 특정한 시간마다 반복하여 내가 지정한 함수를 실행함
- setTimeout 과 마찬가지로 매개변수로 함수명, 시간을 받는다.
- clearInterval 을 사용하면 해당 Interval 을 종료시킬 수 있다.
6. 함수의 활용
- JS 에서는 함수조차 객체로 사용가능함
- 예를 들어 객체의 값을 정의할 때 value 부분에 익명 함수를 사용해서 값을 넣어줄 수 있음
- 익명함수로 들어간 부분은 해당 속성명을 함수명으로서 기능함
- 즉 결과를 얻기 위해서는 함수명(), 익명함수의 매개변수로서 사용하기 위해서는 함수명 만!!