본문 바로가기
자바과정/자바스크립트

자바스크립트 기초 2일차

by Parkej 2021. 3. 2.

 

자바스크립트 이미지 변경.zip
0.50MB

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
      main{
        width:300px;
      }
      .button-l{
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(5,1fr);
      }
      .top{
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(2,1fr);
      } 

    </style>
    
    <script language="javascript">
      var numberPrev = false; // 이전값이 숫자인지 연산자인지
      function findButton(char){
        if(document.getElementById("txt").value == 0){
          // clear후 텍스트박스 초기값이 0이면 버튼 눌렀을때 0을 지우고 시작.
          document.getElementById("txt").value = "";
        }
        if(numberPrev == false){
          if(isNaN(char)==true){ // isNaN은 숫자가 아니면 true를 반환
          }
          else{ // 문자가 아니라면
            document.getElementById("txt").value += char;
          }
        }
        else{ // 이전에 숫자를 입력했으면
          if(char == '^')
          {
            document.getElementById("txt").value += '**';
          }
          else{
            document.getElementById("txt").value += char;
          }
        }

        if(isNaN(char) == true){ // 들어온 문자가 숫자가 아닌 문자라면
          numberPrev = false;
        }
        else{ // 숫자라면
          numberPrev = true; // 이전값이 숫자면 
        }
      }
      
      function reset(){
        var txt = document.getElementById("txt").value = 0;
      }

      function operation(){
        var txt = document.getElementById("txt");
        var tf = false;
        var mm = txt.value.split("^");
        var oper = eval(txt.value);
        txt.value = oper;
      }

      function mathop(char){
        var txt = document.getElementById("txt");
        if(txt.value == ""){
          return
        }
        switch(char){
          // case 'x^y' 
        case "_^":
          txt.value = txt.value + char; 
          
          break;
        
        case "_sin":
          txt.value = Math.sin(parseInt(txt.value));
          break;
        case "_cos":
          txt.value = Math.cos(parseInt(txt.value));
          break;
        case "_tan":
          txt.value = Math.tan(parseInt(txt.value));
          break;
        } 
      }
      function changInt(){
        var txt = document.getElementById("txt");
        if(txt.value < 0){
          txt.value = Math.abs(parseInt(txt.value));
          
        }
        else{
          txt.value = '-' + txt.value;
        }
      }
      function mathpow(){
        var txt = document.getElementById("txt").value;
        var mm = txt.split("^");
        txt.value = Math.pow(mm[0].mm[1]);

      }
    </script>
  </head>

  <body>
    <main>
    <input id = "txt" type="text" size=37 style = "text-align:right;">
    <br><br>
    <div class = "top">
      <button onclick = "reset()">Clear</button>
      <button onclick = "operation()">=</button>
    </div>
    <br>
    <div class = "button-l" >
    <button type="button" onclick="findButton(1)">1</button>
    <button onclick="findButton(2)">2</button>
    <button onclick="findButton(3)">3</button>
    <button onclick="findButton('+')">+</button>
    <button onclick="findButton('^')">x^y</button>
    <button onclick="findButton(4)">4</button>
    <button onclick="findButton(5)">5</button>
    <button onclick="findButton(6)">6</button>
    <button onclick="findButton('-')">-</button>
    <button onclick="mathop('_sin')">sin</button>
    <button onclick="findButton(7)">7</button>
    <button onclick="findButton(8)">8</button>
    <button onclick="findButton(9)">9</button>
    <button onclick="findButton('*')">*</button>
    <button onclick="mathop('_cos')">cos</button>
    <button onclick="changInt()">+/-</button>
    <button onclick="findButton(0)">0</button>
    <button onclick="findButton('.')">.</button>
    <button onclick="findButton('/')">/</button>
    <button onclick="mathop('_tan')">tan</button>
    </div>
    </main>
  </body>
</html>





<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>배경색 바꾸기</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
    </style>
    <script language="javascript">
      function changrcol(col){
        document.bgColor = col;
      }
    </script>
  </head>

  <body>
    <input type = "radio" name = "col" value = "yellow" onclick="changrcol(this.value)">노란색
    <br>
    <input type = "radio" name = "col" value = "green" onclick="changrcol(this.value)">녹색
    <br>
    <input type = "radio" name = "col" value = "blue" onclick="changrcol(this.value)">파란색
    <br>
    <input type = "radio" name = "col" value = "red" onclick="changrcol(this.value)">빨간색

  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>동적으로 테이블 만들기</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
    </style>
    <script language="javascript">

      function makeFriends(){
        var myFriends = window.prompt("친구가 몇명임?","");

        for(var i =0;i<parseInt(myFriends);i++){
          var textBox = document.createElement("input");
          var newLine = document.createElement("br");

          textBox.type = "text";

          document.body.appendChild(textBox);
          document.body.appendChild(newLine);
        }
      }
    


    </script>
  </head>

  <body onload = "makeFriends()">
    <h2>내 친구 나열</h2>

  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>간단한 더하기 계산</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
    </style>
    <script language="javascript">
      function numadd(){
        var txt1 = document.getElementById("txt1");
        var txt2 = document.getElementById("txt2");
        var result = document.getElementById("result");
        result.value = parseInt(txt1.value) + parseInt(txt2.value);
       
      }
    </script>
  </head>

  <body>
    <input type = "text" id = "txt1" size = 20>
    <a id = "_add"> + </a>
    <input type = "text" id = "txt2" size = 20>
    <input type = "button" value="=" onclick="numadd()"></button>
    <input type = "text" id = "result"size = 20>

  </body>
</html>




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>알러터창</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
    </style>
    <script language="javascript">
      function nprint(){
        var disp = "다음 여행지를 선택했습니다.\n";
        var ckbox = document.getElementsByName("country");

        for(var i=0;i<ckbox.length;i++){
          if(ckbox[i].checked){
            disp += '-' + ckbox[i].value +'\n';
          }
        }
        window.alert(disp);
      }
      
    </script>
  </head>

  <body>
    <h2> 지금 가장 가고 싶은 곳은? </h2>

    <input type = "checkbox" name = "country" value ="일본" >일본
    <input type = "checkbox" name = "country" value ="미국"" >미국
    <input type = "checkbox" name = "country" value ="캐나다" >캐나다
    <input type = "checkbox" name = "country" value ="유럽" >유럽
    <input type = "button" value = "클릭" onclick = "nprint()">
  </body>
</html>






<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>드롭박스 선택후 부가적인 드롭박스 값 나타내기</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>
    </style>
    <script language="javascript">
      
      var arrWin = new Array();
      var arrOff = new Array();

      arrWin.push("윈도우 2000");
      arrWin.push("윈도우 XP");
      arrWin.push("윈도우 비스타");

      arrOff.push("오피스 XP");
      arrOff.push("오피스 2003");
      arrOff.push("오피스 2007");
      function setVersion(){
        var pro = document.getElementById("product");
        var ver = document.getElementById("version");

        var selectValue = pro.options[pro.selectedIndex].value;
        // 배열인덱스에서 0이냐 1이냐 .value는 현재 윈도우인지 오피스인지

        while(ver.options.length > 1){
          ver.options[1] = null;
        }

        switch(selectValue){
          case "windows":
            for(var i=0;i<arrWin.length;i++){
              ver.options[ver.options.length] = new Option(arrWin[i], arrWin[i]);
            }
            break;
          case "office":
            for(var i=0;i<arrOff.length;i++){
              ver.options[ver.options.length] = new Option(arrOff[i], arrOff[i]);
            }
            break;
        }
      }
    </script>
  </head>

  <body>
    <select id = "product" onchange="setVersion()">
      <option value ="">제품 선택</option>
      <option value ="windows">윈도우</option>
      <option value = "office">오피스</option>
    </select>
    <select id ="version">
      <option value =""> 버전을 선택해라</option>
    </select>
  </body>
</html>



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <style>

    </style>
    
    <script language="javascript">
      function showClock(){
        var currentDate = new Date();
        var divClock = document.getElementById("divClock");

        var msg = "현재 시간 : " + currentDate.getHours() + "시 ";
        msg += currentDate.getMinutes() +"분 ";
        msg += currentDate.getSeconds() +"초 ";

        divClock.innerText = msg;

        setTimeout(showClock, 1000);
      }
    </script>
  </head>

  <body onload="showClock()">
    <div id="divClock" class = "clock">
    </div>
  </body>

</html>




<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>setTime을 이용한 문자 출력</title>
    <style type="text/css">
      .char{
        border : 2px dashed black;
        font-family:cursive;
      }
    </style>
    
    <script language="javascript">
      var cnt = 0;
      var msg = "";
      function showChar(){
        // var currentDate = new Date();
        var txtChar = document.getElementById("txtChar");
        var arr = ['안','녕','하','세','요','?',' ','만','나','서',' ','반','갑','습','니','다','.'];
        // var msg = "";
        
        
        msg += arr[cnt];
        cnt++;
        txtChar.value = msg;
        var timer = setTimeout(showChar, 1000);
        if(cnt == arr.length){
          cnt = 0;
          msg = "";
        }
      }
    </script>
  </head>

  <body onload="showChar()">
    <!-- <div id="divChar" class = "char">
    </div> -->
    <input class = "char" type = "text" id = "txtChar" size = 30>
  </body>

</html>
반응형

'자바과정 > 자바스크립트' 카테고리의 다른 글

자바스크립트 회원가입 지도 API 사용  (0) 2021.03.04
회원가입 유효성 검사 (비정규식과 정규식)  (0) 2021.03.04
카카오 우편번호 서비스 API  (0) 2021.03.04
자바스크립트 실습(계산기)  (0) 2021.03.02
자바스크립트 기초 1일차  (0) 2021.02.26

관련글

댓글

티스토리툴바