Javascript (자바스크립트) jQuery and ajax

2020. 6. 18. 06:27

1. app.js

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app).listen(81);

app.get('/Study1', function (req, res) {
  res.sendfile("Study1 Matrix.html");
});

app.get('/Study2', function (req, res) {
  res.sendfile("Study2 RadioBox Calc.html");
});

app.get('/Study3', function (req, res) {
  res.sendfile("Study3 RadioBox Calc2.html");
});

app.get('/Study4', function (req, res) {
  res.sendfile("Study4 jquery.html");
});

app.get('/Study5', function (req, res) {
  res.sendfile("Study5 ChangeToJquery.html");
});

app.get('/Study6query', function (req, res) {
  console.log(req.query);
  if(req.query.a==10) {
    res.send("a는 10입니다.");
  }
  // if(req.query.a==20) {
  //   res.send("a는 20입니다.");
  // }
  // res.send("Hello world");

  // res.send(`합은 ${Number(req.query.num1) + Number(req.query.num2)}`);

  // var num1 = Number(req.query.num1);
  // var num2 = Number(req.query.num2);
  // res.send(`합은 ${num1 + num2} 입니다.`);
});

app.get('/Study7Ajax', function (req, res) {
  res.sendfile("Study7Ajax.html");
});



console.log("server is running...")

2. Study1 Matrix.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>for for for</title>
  </head>
  <body>

  </body>

  <script>

  var array1 = [];   // 1. 배열을 하나 생성해준다.

  for(var i=0;i<5;i++) {
    array1[i]= [];   // 2. 안쪽 배열을 생성해준다. (자바스크립트에는 자료형을 지정하는게 없기 때문에 이렇게 배열이라고 인식을 시켜줘야 한다.)
    for(var j=0;j<5;j++) {
      array1[i][j] = i * 15 + j * 3 + 1;
    }
  }
  console.log(array1);

  var array2 = [];
  for(var i=0;i<5;i++) {
    array2[i]= [];   // 2. 안쪽 배열을 생성해준다. (자바스크립트에는 자료형을 지정하는게 없기 때문에 이렇게 배열이라고 인식을 시켜줘야 한다.)
    for(var j=0;j<5;j++) {
      array2[i][j] = i*j;
    }
  }
  console.log(array2);

  var array3 = [];
  for(var i=0;i<5;i++) {
    array3[i]= [];   // 2. 안쪽 배열을 생성해준다. (자바스크립트에는 자료형을 지정하는게 없기 때문에 이렇게 배열이라고 인식을 시켜줘야 한다.)
    for(var j=0;j<5;j++) {
      array3[i][j] = String(i * 10 + j);
    }
  }
  console.log(array3);

  var array4 = [];
  for(var i=0;i<5;i++) {
    array4[i]= [];   // 2. 안쪽 배열을 생성해준다. (자바스크립트에는 자료형을 지정하는게 없기 때문에 이렇게 배열이라고 인식을 시켜줘야 한다.)
    for(var j=0;j<5;j++) {
      array4[i][j] = String(i) + String(j);
      // array4[i][j] = `${i}${j}`
    }
  }
  console.log(array4);


  </script>

</html>

3. Study2 RadioBox Calc.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- id : <input type="text" id="loginID"><br>
    pass : <input type="password" id="loginPass"><br>
    <input type="button" value="login" id="loginBtn"> -->

    1번 &nbsp&nbsp&nbsp 0 <input type="radio" name="radioGroup1">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="radioGroup1">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="radioGroup1">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="radioGroup1">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="ratio1"><br>

    2번 &nbsp&nbsp&nbsp 0 <input type="radio" name="radioGroup2">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="radioGroup2">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="radioGroup2">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="radioGroup2">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="ratio2"><br>

    3번 &nbsp&nbsp&nbsp 0 <input type="radio" name="radioGroup3">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="radioGroup3">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="radioGroup3">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="radioGroup3">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="ratio3"><br><br>

    <span id="result"></span><br><br>

    <input type="button" value="계산" id="calcBtn">

  </body>

  <script>

    document.getElementById("calcBtn").addEventListener('click', calcFunc)


    function calcFunc() {
      var result = 0;
      var boxTmp = 0;
      var ratioTmp = 0;
      var textTmp = "";

      // document.getElementsByName("radioGroup" + (i+1)).length
      for (var i=0; i<document.getElementsByName("radioGroup" + (i+1)).length; i++) {
        ratioTmp = document.getElementById("ratio" + (i+1)).value;
        // ratioArray[i] = document.getElementById("ratio" + (i+1)).value;
        // (document.getElementsByName("radioGroup" + (i+1)).length + 1)
        for(var j=0; j<4; j++) {
          if (document.getElementsByName("radioGroup" + (i+1))[j].checked == true) {
            boxTmp = j;
            // boxArray[i] = j;
            result = result + ratioTmp * boxTmp;
            if (i != 2) {
              textTmp = textTmp + ratioTmp + " x " + boxTmp + " + ";
            } else {
              textTmp = textTmp + ratioTmp + " x " + boxTmp + " ";
            }

          }
          console.log(boxTmp);
          console.log(ratioTmp);
        }
      }
      document.getElementById("result").innerHTML = textTmp + "= " + result;
    }

    // function calcFunc() {
    //   // getElementsById('id')    Elements 여러개다. 배열로 가져온다.
    //   var number1 = document.getElementsById('radiogGroup1').value;
    //   var ratio1 = document.getElementById('ragio1').value;
    //   var number2 = document.getElementsById('radiogGroup2').value;
    //   var ratio2 = document.getElementById('ragio2').value;
    //   var number3 = document.getElementsById('radiogGroup3').value;
    //   var ratio3 = document.getElementById('ragio3').value;
    //
    //   var result = number1 * ratio1 + number2 * ratio2 + number3 * raitio3;
    //
    // };


  </script>



</html>

4. Study3 RadioBox Calc2.html (위에꺼랑 같은건데 코드가 더 직관적)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    1번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s1Rev"><br>

    2번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s2Rev"><br>

    3번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s3Rev"><br><br>

    <span id="result"></span><br><br>

    <input type="button" value="계산" id="calcBtn">

  </body>
  <script>
  document.getElementById("calcBtn").addEventListener('click', function(){
    var s1, s2, s3, s1r, s2r, s3r;
    for(var i = 0; i < document.getElementsByName("s1").length; i++) {
      if(document.getElementsByName("s1")[i].checked) {
        s1 = i;
        s1r = document.getElementById("s1Rev").value;
      }

      if(document.getElementsByName("s2")[i].checked) {
        s2 = i;
        s2r = document.getElementById("s2Rev").value;
      }

      if(document.getElementsByName("s3")[i].checked) {
        s3 = i;
        s3r = document.getElementById("s3Rev").value;
      }
    }

    document.getElementById("result").innerHTML += `${s1}x${s1r}
                                                   + ${s2}x${s2r}
                                                   + ${s3}x${s3r}
                                                   = ${s1*s1r+s2*s2r+s3*s3r}<br>`;

  });

  </script>
</html>

5. Study4 jquery.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<!-- jquery 최신 사용하려고 복붙한거 -->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Hello jquery

    <meta charset="utf-8">
    <title></title>
    <input type="text" id="inputText">
    <input type="button" value="testBtn" id="testBtn">

    <span id="outputArea"></span>

  </body>
  <script type="text/javascript">
    // document.getElementById("testBtn").addEventListener('click',function(){
      // console.log(document.getElementById("inputText").value);
      // document.getElementById("inputText").value;
      // document.getElementById("inputText").innerHTML = document.getElementById
    // });

    $('#testBtn').click(function(){
      $("#outputArea").html( $("#outputArea").html() + $("#inputText").val() );
      // $("#outputArea").append($("#inputText").val());
      // $("#outputArea").prepend($("#inputText").val());


    });



  </script>
</html>

6. Study5 ChangeToJquery.html (기존 단순 자바스크립트 방식에서 jquery를 사용한 방식으로 바꾸기)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    1번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s1">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s1Rev"><br>

    2번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s2">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s2Rev"><br>

    3번 &nbsp&nbsp&nbsp 0 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 1 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 2 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 3 <input type="radio" name="s3">
        &nbsp&nbsp&nbsp 가중치 <input type="text" id="s3Rev"><br><br>

    <span id="result"></span><br><br>

    <input type="button" value="계산" id="calcBtn">

  </body>
  <script>
  $("#calcBtn").click(function() {
    var s1, s2, s3, s1r, s2r, s3r;
    for(var i = 0; i < $("[name=s1]").length; i++) {
      if($("[name=s1]")[i].checked) {
        s1 = i;
        s1r = $("#s1Rev").val();
      }

      if($("[name=s2]")[i].checked) {
        s2 = i;
        s2r = $("#s2Rev").val();
      }

      if($("[name=s3]")[i].checked) {
        s3 = i;
        s3r = $("#s3Rev").val();
      }
  };



    $("#result").html( `${s1}x${s1r}
                      + ${s2}x${s2r}
                      + ${s3}x${s3r}
                      = ${s1*s1r+s2*s2r+s3*s3r}<br>`);

  });

  </script>
</html>

7. Study6query (app.js만으로 작동. url에 쿼리를 넣어보자)

2020/05/14 - [개발자/Javascript] - node.js 접속 쿼리 분해

node.js 접속 쿼리 분해

var express = require('express'); var app = express(); var http = require('http'); var server = http.createServer(app).listen(80); app.get('/test', function (req, res) { console.log(req.query); res...

greendreamtrre.tistory.com

8. Study7Ajax.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="호출" id="ajaxBnt">
    <br><br>
    <span id="result"></span>
  </body>
  <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    $("#ajaxBnt").click(function() {

      $.ajax({  // 호출한다. req 보낸다.
        // // 방법 1.
        // url : 'http://localhost/sumForm?num1=10&num2=20'
        // data : {}

        // 방법 2.
        url : 'http://localhost:80/Study6query',
        data : {
          num1 : 10,
          num2 : 20

      },
      success:function(response){
        console.log(response);
        $("#result").html(response);
        $("#result").html(`${response}`);
      }
    });

  });

  </script>


</html>

$(". class태그")

$("#id 태그")

$("[name=name태그]")

'개발자 > Javascript' 카테고리의 다른 글

자바스크립트 airport (0)	2020.06.18
Javascript (자바스크립트) ajax 계산기, 자동차 구입, 3개의 수 중 가장 큰 수 구하기 (0)	2020.06.18
node.js 접속 쿼리 분해 (0)	2020.05.14
Javascript (자바스크립트) for문 369 게임 (0)	2020.05.10
Javascript (자바스크립트) for문에 대한 고찰 (0)	2020.04.23

좋은 개발자가 되자