국비지원학원/HTML,JavaScript,jQ

76일차-JavaScript_값

초코맛 2019. 2. 15. 02:16
반응형
*값 얻기
  • name속성
    • <form>존재-이름이 유일할 때
    • document.폼이름.Control명.value
  • id속성
    • <form> X
    • document.getElementById("id")
    •                      =>Element==Tag==node(xml)
    • <<<id는 딱 한개만 만들도록! 주의>>>
  • =>name 속성과 id속성은 값 하나 얻기!로
  • <input type="text,password,file,hidden" 의 경우, checkbox 딱1개만 사용한 경우, <select>,<textarea>
  • <<<웹은 이름이 같으면 배열! 주의>>>

*값이 여러개 나오는 경우 : 배열로 처리
  • checkbox, radio, select
  • =>checked된걸 확인, selected된걸 확인
  • ex)
    • <input type="checkbox" value="전송할 값" name="이름">0
    • <input type="checkbox" value="전송할 값" name="하위 이름은 무조건 같다">1.....
  • 문법)
    • document.폼이름.컨트롤명[인덱스].value(값을 얻는다)
    •                                                         .checked(확인상태를 얻는다=>boolean으로 체크되면 true)

*선택된 모든 값 얻기
  • var obj= document.폼이름; //을 넣어주면 짧게 사용가능!
  • for(var i=0; i<document.폼이름.control명,length; i++){    =>obj.control명.length
  •        if(document.폼이름.control명[i].checked){       =>checked는 true /false로 나오기 때문에 ==하지 않는다.
  •              document.폼이름.control명[i].value;
  •        }
  • }
  • =>라디오버튼도 같은 방법이기는 하나 보통 2개로 많이 사용해 굳이 for문을 사용해 늘릴 필요가 없다!

*선택된 값 하나를 얻는다
  • <select name="oo">
  •         <option value="값">보여질 값</option>   =>배열
  •                      ....
  • </select>
  • =>간단)
    • document.폼이름.control명.value; =>배열을 쓰지 않고도 선택된 값이 나온다.
  • 배열)  : select의 name 속성은 하나이나 옵션이 여러개이므로 배열로 처리할 수 있다. 그러나 워낙 위의방법이 간단해 잘..안씀
    • <<selectedIndex를 사용하여 얻음.>>
    • var obj=document.폼이름;
    • for(var i=0; i<obj.control명.length(=>옵션갯수); i++){
    •       if(obj.control명[i].seleted) { //선택된 옵션에서 true발생.
    •             obj.control명[i].value;
    •       }
    • }
    •  
    • obj.control명[obj.control명.seletedIndex].value로도 처리가능!선택한 인덱스번째방을 얻음!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     //배열(name속성이 같다면 배열!!)로 된 값 얻기
     window.onload=function(){
          document.getElementById("radio").addEventListener("click",processRadio);//괄호쓰면 함수가 불려져!주의
          document.getElementById("check").addEventListener("click",processCheckbox);
          document.getElementById("select").addEventListener("click",processSelect);//버튼클릭으로 값얻는거라 change가 아님
     }//function
     
     function processRadio(){
           //alert("aa");//로 먼저 제대로 실행되는지 확인해주면  추후 편리~
           var obj=document.frm;
           //alert(obj.gender[0].value+"/"+obj.gender[1].value);
          //alert(obj.gender[0].checked+"/"+obj.gender[1].checked);
           
           if(!(obj.gender[0].checked ||  obj.gender[1].checked)){
                alert("성별을 선택해 주세요~!");
                return;
           }//end if
           
           var checkedGender="";
           for(var i=0; i<obj.gender.length; i++){
                if(obj.gender[i].checked){
                     checkedGender=obj.gender[i].value;
                }//end if
           }//end for
           
          document.getElementById("output").innerHTML="선택성별:  "+checkedGender;
           
     }//processRadio
     
     function processCheckbox(){
           /* alert("aa"); */   
           //선택된 체크박스 값 얻기
           var obj=document.frm;
           
           var output="<ul>";
           var flag=false;
           
           for(var i=0; i<obj.games.length; i++){
                if(obj.games[i].checked){//체크박스가  선택되었다면
                     flag=true;
                     output+="<li>"+obj.games[i].value+"</li>";//선택된  체크박스의 값을 얻는다.
                }//end if
           }//end for
           if(!flag){
                output+="<li>선택하신 게임이 없습니다.</li>";
           }//end if
           output+="</ul>";
           
           document.getElementById("output").innerHTML=output;           
     }//processCheckbox
     
     function processSelect(){
           //alert("ee");
           //select 값얻기
           var obj=document.frm;
           //가장 간단
           //alert(obj.job.value);
           
           //선택된 인덱스 번째 값을 얻기
           //alert(obj.job.selectedIndex);
           //alert(obj.job[obj.job.selectedIndex].value);
           //for를 돌리지 않아도 잘 나온다
           
           //for로 값얻기+output에 출력
           var output="";
           output=obj.job.value;
           /*
           for(var i=0; i<obj.job.length; i++){
                if(obj.job[i].selected){
                     output=obj.job[i].value;
                }//end if
           }//end for
            */
           document.getElementById("output").innerHTML="선택한  직업 : "+output;
     }//processSelect
     
</script>
</head>
<body>
     <form name="frm">
     <div>
           <label>성별</label>
           <input type="radio" name="gender" value="M"/>남자
           <input type="radio" name="gender" value="F"/>여자
     </div>
     <div>
           <label>게임</label>
           <input type="checkbox" name="games"  value="철권"/>철권
           <input type="checkbox" name="games"  value="아스팔트"/>아스팔트
           <input type="checkbox" name="games"  value="GTA"/>GTA<br/>
           <input type="checkbox" name="games"  value="하스스톤"/>하스스톤
           <input type="checkbox" name="games"  value="리니지"/>리니지
           <input type="checkbox" name="games"  value="마인크래프트"/>마인크래프트
     </div>
     <div>
           <label>관심직업 선택</label>
           <select name="job">
                <option value="none">---직업선택---</option>
                <option value="쓰앵님">쓰앵님</option>
                <option value="Front개발자">Front  개발자</option>
                <option  value="BackEnd개발자">BackEnd개발자</option>
                <option value="운영">운영</option>
                <option  value="유지보수개발자">유지보수개발자</option>
           </select>
     </div>
     
     <div>
           <input type="button" value="라디오 값얻기" id="radio"  class="btn"/>
           <input type="button" value="체크박스 값얻기"  id="check" class="btn"/>
           <input type="button" value="셀렉트 값얻기" id="select"  class="btn"/>
     </div>
     </form>
     <div id="output"></div>
</body>
</html>



*JavaScript의 값을 HTML Form Control 설정
  • name 속성이 유일한 경우.
    • document.폼이름.control이름.value=값; 
  • checked 속성 변경
    • document.폼이름.control명[인덱스].checked=true|false ; //넣은 값으로 변경되어 나온다.
  • selected 속성 변경
    • document.폼이름.control명[인덱스].selected=true|false ; //넣은 값으로 변경되어 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     fieldset {border:1px solid #333; width:400px;  margin-top:10px; }
     img{width: 100px;}
</style>
<script type="text/javascript">
function uniqueVal(){
     var obj=document.frm;
     
     obj.name.value="김";//text의 값 설정
     obj.password.value="j111"//password 값 설정
     obj.addr.value="서울"//hidden 값 설정
     obj.img.src="../common/images/img1_1.png"//img 변경
     //HTML5에서 제공하는 Form Control
     obj.date.value="1993-07-29"//date 변경 년-월-일 의 형태만  적용 가능
     obj.range.value=80//range 변경
}//uniqueVal
function setChecked(){
     //checked 상태 변경
     var obj=document.frm;
     //radio의 상태 변경
     obj.gender[1].checked=true;
     //checkbox의 상태 변경
     obj.hobby[0].checked=true;
     obj.hobby[3].checked=true;
}//setChecked
function setSelected(){
     //selected 상태 변경
     var obj=document.frm;
     obj.tel[1].selected=true;
}//setSelected
function checkedTotal(){
     var obj=document.frm1;
     
     for(var i=0; i<obj.mail.length; i++){
           obj.mail[i].checked=obj.flag.checked;
           /* if(obj.flag.checked){
                obj.mail[i].checked=true;
           }else{
                obj.mail[i].checked=false;
            }//end else*/
     }//end for
}//checkedTotal
</script>
</head>
<body>
<div>
     <h2>JavaScript의 값을 HTML From Control에 설정</h2>
     <form name="frm">
     <fieldset>
           <legend>이름이 유일한  Form Control</legend>
           <label>이름</label>
           <input type="text" name="name"  class="inputBox"/><br/>
           <label>나이</label>
           <input type="password" name="password"  class="inputBox"/><br/>
           <label>주소</label>
           <input type="hidden" name="addr"/><br/><!-- hidden은  사용자에게 보여지는 부분이 아니라 class주지 않음 -->
           <label>이미지</label>
           <img src="../common/images/img.png" name="img"/><br/>
           <label>날짜</label>
           <input type="date" name="date"/><br/>
           <label>범위</label>
           0<input type="range" name="range" min="0"  max="100"/>100<br/>
           <input type="button" value="값설정"  onclick="uniqueVal()" class="btn"/>
     </fieldset>
     <fieldset>
           <legend>checked 속성 변경</legend>
           <label>성별</label>
           <input type="radio" name="gender" value="남자"/>남자  |
           <input type="radio" name="gender"  value="여자"/>여자<br/>
           <label>취미</label>
           <input type="checkbox" name="hobby"  value="게임"/>게임
           <input type="checkbox" name="hobby"  value="등산"/>등산
           <input type="checkbox" name="hobby"  value="낚시"/>낚시
           <input type="checkbox" name="hobby"  value="독서"/>독서
           <input type="checkbox" name="hobby"  value="음악감상"/>음악감상
           <br/>
           <input type="button" value="checked 설정" class="btn"  onclick="setChecked()"/>
     </fieldset>
     <fieldset>
           <legend>seleted 속성 변경</legend>
           <label>국번 선택</label>
           <select name="tel">
                <option>---국번 선택---</option>
                <option value="010">010</option>
                <option value="011">011</option>
                <option value="016">016</option>
                <option value="017">017</option>
                <option value="018">018</option>
                <option value="019">019</option>
           </select>
           <br/>
           <input type="button" value="selected 설정"  class="btn" onclick="setSelected()"/>
     </fieldset>
     </form>
</div>
     
     <div>
           <form name="frm1">
           <table>
                <thead>
                <tr>
                     <th><input type="checkbox" name="flag"  onclick="checkedTotal()"/></th>
                     <th width="350">제목</th>
                     <th width="80">작성자</th>
                     <th width="100">수신일</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                     <td><input type="checkbox"  name="mail"/></td>
                     <td>안녕하세요? 저번에 바다에서  뵈었던.....바다이야기</td>
                     <td>김실장</td>
                     <td>2019-02-12</td>
                </tr>
                <tr>
                     <td><input type="checkbox"  name="mail"/></td>
                     <td>안녕하세요? 저번에 바다에서 또  뵈었던.....바다이야기2</td>
                     <td>김실장</td>
                     <td>2019-02-12</td>
                </tr>
                <tr>
                     <td><input type="checkbox"  name="mail"/></td>
                     <td>대박 승률~야마토</td>
                     <td>이실장</td>
                     <td>2019-02-12</td>
                </tr>
                <tr>
                     <td><input type="checkbox"  name="mail"/></td>
                     <td>[업무협조] 김정윤 담당자님 안녕하세요?  저번에 바다에서...</td>
                     <td>이실장</td>
                     <td>2019-02-12</td>
                </tr>
                </tbody>
           </table>   
           </form>
     </div>
</body>
</html>




*함수 사용
  • 정수 변경 : parseInt(값 : 실수,문자열)=>정수     //대신 캐스팅이 없다
  • 난수 발생 : Math.random()=>number(실수:0.000~15~16   ~   0.999~15~16)     
    • 만약 0~9까지 난수를 발생시키고 싶다면, Math.random()*10(발생시키고 싶은 수)
    • 0~9 <=parseInt(Math.random()*10)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     #output{width: 400px; height: 200px; border: 1px solid  #333;}
</style>
<script type="text/javascript">
     function useFunc(){
           var divNode=document.getElementById("output");
           var i="2";
           var j=12;
           
           var output=i+" * "+j+" = "+(parseInt(i)*j);//형변환  알아서 잘해주긴 한다.
           
           var randomNumber=Math.random();
           
           output+="<br/>"+randomNumber;
           output+="<br/>"+randomNumber*10;//범위의 난수
           /*  output+="<br/>"+(int)(randomNumber*10);//x안됨!=>casting이 없다  */
           output+="<br/>"+parseInt(randomNumber*10);
           
           divNode.innerHTML=output;
     }//useFunc
</script>
</head>
<body>
<div id="output"></div>
<div>
     <input type="button" value="함수 사용" onclick="useFunc()"  class="btn"/>
</div>
</body>
</html>




<<<<<<<<<<<<<<<<<<숙제>>>>>>>>>>>>>>>>>>>>>>>>
<<숙제1>>>
1.참여 설정이 클릭되면 사용자1과 2의 공백체크를 한 후 값이 없다면 alert("사용자를 입력"); 을
보여주고 있다면 id가 p1Name,p2Name span에 들어간다.

3.게이머의 라디오버튼이 클릭되고 던지기가 눌러지면 주가위가 변경되고 합산값이 저장된다.
4.초기화버튼이 눌려지면 최초상태로 돌아간다.
    규칙 : 3회로 게임을 종료, 주사위를 두번 연속 던질 수 없다, 시작은 1번부터 시작한다.
        게임이 종료되면 판정에 "xxx님 이 승리하셨습니다."를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     #diceWrap{border:1px solid #333; width: 500px; height:  400px; box-shadow: 10px 10px 10px #333;
                     margin-left: 100px; margin-top: 10px;}
     #inputHeader{height: 150px; }
     #score{height: 30px; text-align: center; }
     #diceView{width: 500px; text-align: center; margin-top:  50px; }
     h2{text-align: center;}
</style>
<script type="text/javascript">
     window.onload=function(){
           setDice();
     }//function
     function setDice(){
           var obj=document.frm;
           
           var num1=parseInt(Math.random()*6)+1//1~6
           var num2=parseInt(Math.random()*6)+1//1~6
           
           obj.dice1.src="images/dice_"+num1+".png";
           obj.dice2.src="images/dice_"+num2+".png";
           
         var arr=[num1,num2];
           return arr;
     }//setDice
     
     var cnt=0;
     var p1count=0;
     var p2count=0;
     function throwDice(){
           var obj=document.frm;
           if(obj.player1.value=="" ||  obj.player2.value==""){//주사위를 던지기 전에 사용자 먼저.
                alert("사용자를 먼저 입력하여 주세요");
                return;
           }//end if
           
           if(!(obj.trun1[0].checked ||  obj.trun1[1].checked)){//아무 체크도 안되어 있다면 사용자1부터라고  알려줌
                     alert("처음은 사용자1 부터 시작합니다.");
                     obj.trun1[0].checked=true;
                     return;
           }//end if
           
           if(cnt==0){//처음돌릴때
                if(obj.trun1[1].checked==true){
                     alert("처음은 사용자1 부터 시작합니다.");
                     obj.trun1[0].checked=true;
                     return;
                }
                var arr=setDice();
                p1count+=arr[0]+arr[1];
                obj.trun1[1].checked=true;
                cnt++;
           }else if(cnt==1||cnt==3||cnt==5){
                if(obj.trun1[1].checked){
                     var arr=setDice();
                     p2count+=arr[0]+arr[1];
                     obj.trun1[0].checked=true;
                     cnt++;
                }else{
                     alert("사용자2의 차례입니다.");
                }
           }else if(cnt==2||cnt==4){
                if(obj.trun1[0].checked){//1이 돌리면
                     var arr=setDice();
                     p1count+=arr[0]+arr[1];
                     obj.trun1[1].checked=true;
                     cnt++;
                }else{
                     alert("사용자1의 차례입니다.");
                }
           }else {
                var win="";
                if(p1count>p2count){
                     win="사용자1";
                }else{
                     win="사용자2";
                }
                var msg="사용자 1님이 "+p1count+"점, 사용자 2님이  "+p2count+"으로 " +win+ "님이 승리하셨습니다~!!"
                alert("판정 :"+msg);
                document.getElementById("result").innerHTML+=msg;
           }//end else
     }//throwDice
     
     function setName(){
           var obj=document.frm;
           
           var player1Name=document.getElementById("p1Name")
           var player2Name=document.getElementById("p2Name")
           
           if(obj.player1.value=="" || obj.player2.value==""){
                alert("사용자를 입력하여 주세요");
                return;
           }//end if
           
           player1Name.innerHTML=obj.player1.value;
           player2Name.innerHTML=obj.player2.value;
           //obj.p2Name.value
     }//setName
     
     function resetGame(){
           var obj=document.frm;
           
           var player1Name=document.getElementById("p1Name")
           var player2Name=document.getElementById("p2Name")
           
           player1Name.innerHTML="";
           player2Name.innerHTML="";
           document.getElementById("result").innerHTML="";
     }//reset
</script>
</head>
<body>
<div id="diceWrap">
     <form name="frm">
           <div id="inputHeader">
           <h2>주사위 게임</h2>
                <div>
                     <label>사용자1</label>
                     <input type="text" name="player1"  class="inputBox">
                     <label>사용자2</label>
                     <input type="text" name="player2"  class="inputBox">
                     <input type="button" value="참여 설정"  class="btn" onclick="setName()"/>
                </div>
                <div style="text-align:  center;margin-top:10px;">
                     <input type="radio" name="trun1"  id="p1"><span id="p1Name"></span>
                     <input type="radio" name="trun1"  id="p2"><span id="p2Name"></span>
                     <input type="button" value="던지기"  class="btn" onclick="throwDice()"/>
                </div>
           </div>
           <div id="score">
                판정 : <span id="result"></span><br/>
           <input type="reset" value="초기화" class="btn"  onclick="resetGame()"/>
           </div>
           <div id="diceView">
                <img src="images/dice_1.png" name="dice1"/>
                <img src="images/dice_1.png" name="dice2"/>
           </div>
     </form>
</div>
</body>
</html>

<<숙제2>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     #header{border:1px solid #333; width: 300px; height:  300px;}
</style>
<script type="text/javascript">
     function change(){
           var obj=document.frm;
           
           var size=obj.setSize.value;
           var img=obj.imgResize;
           
           img.width=size;
           //obj.img.style="width:"+number+"px;  height:"+number+"px;";
     }//change
</script>
</head>
<body>
<div id="workWrap">
     <form name="frm">
           <div id="header">
                <img src="images/dice_1.png" name="imgResize"  /><!-- style="width:30px;height:30px;" -->
           </div>
           <div>
                30<input type="range" name="setSize" min="30"  max="300" onmousemove="change()"/>300<br/>
           </div>
     </form>
</div>
</body>
</html>






반응형
저작자표시 비영리 변경금지

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

78일차-JavaScript+a  (0) 2019.02.18
77일차-JavaScript_함수  (0) 2019.02.17
75일차-Javascript_함수(function)  (0) 2019.02.14
74일차-JavaScript_제어문과 배열(2차원 배열)  (0) 2019.02.13
73일차-JavaScript  (0) 2019.02.12

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글76일차-JavaScript_값

관련글

티스토리툴바