자바스크립트 기초 (11)

새벽로즈·2023년 10월 17일
TIL자바스크립트
0

TIL

목록 보기
28/72
post-thumbnail
코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

자바스크립트로 html 추가하기

  1. 첫번째 방법
  <div id="test">

  </div>

  <script>
    var a = document.createElement('p');
    a.innerHTML = '안녕';
    document.querySelector('#test').appendChild(a);
  </script>

☞ document.createElement로 html 생성해서 innerHTML로 내용 넣고 appendChild로 붙이는 형식

  1. 2번째 방법 : 문자형HTML 함수사용
  <div id="test">

  </div>
    var 템플릿 = '<p>안녕하세요</p>'
    document.querySelector('#test2').insertAdjacentHTML('beforeend' ,템플릿)

☞ beforeend은 안쪽 맨밑에 추가

  1. 3번째 방법: 제이쿼리
  <div id="test">

  </div>
    var 템플릿 = '<p>안녕하세요</p>'
    $('#test').append(템플릿);
  1. 추가가 아니라 전부 바꾸고 싶을때 
 var 템플릿 = '<p>안녕하세요</p>'
 document.querySelector('#test2').innerHTML =  템플릿;

☞ 제이쿼리는 .html() 쓰면 됨

특정옵션을 선택하면 나타나고 사라지고, 옵션내용 바꾸기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <style>
    .hide{
      display: none;
    }
  </style>
</head>
<body>
  <form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2 product">
      <option>모자</option>
      <option>셔츠</option>
      <option>바지</option>
    </select>

    <select class="form-select mt-2 hide size">
      <option>90</option>
      <option>95</option>
      <option>100</option>
    </select>
</form>

<script>

$('.form-select').eq(0).on('input', function(){

var value = $('.form-select').eq(0).val(); // 혹은 this 혹은 e.currentTarget.value; 
if (value == '셔츠') {
  $('.form-select').eq(1).removeClass('hide');
  var 사이즈 = `<option>90</option>
      <option>95</option>
      <option>100</option>`
      document.querySelector('.size').innerHTML = 사이즈;
}
else if(value == '바지'){
  $('.form-select').eq(1).removeClass('hide');
  var 사이즈 = `<option>28</option>
      <option>30</option>
      <option>32</option>`
      document.querySelector('.size').innerHTML = 사이즈;
}
else {
  $('.form-select').eq(1).addClass('hide');
}
});

</script>
</body>
</html>

forEach (배열 array에만 사용가능)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <style>
    .hide{
      display: none;
    }
  </style>
</head>
<body>
  <form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2 product">
      <option>모자</option>
      <option>셔츠</option>
      <option>바지</option>
    </select>

    <select class="form-select mt-2 hide size">
      <option>90</option>
      <option>95</option>
      <option>100</option>
    </select>
</form>

<script>

var pants = [28, 30, 32, 34, 36];
var shirts = [90, 95, 100, 105]
$('.form-select').eq(0).on('input', function(){

var value = $('.form-select').eq(0).val(); // 혹은 this 혹은 e.currentTarget.value; 
if (value == '셔츠') {
  $('.form-select').eq(1).removeClass('hide');
  $('.form-select').eq(1).html('');
shirts.forEach(function(data){
  $('.form-select').eq(1).append(`<option>${data}</option>`)
})

}
else if(value == '바지'){
  $('.form-select').eq(1).removeClass('hide');
  $('.form-select').eq(1).html('');
  pants.forEach(function(data){
    $('.form-select').eq(1).append(`<option>${data}</option>`)
  })
}
else {
  $('.form-select').eq(1).addClass('hide');
}
});

</script>
</body>
</html>

☞ 배열을 선언해주고 forEach를 통해서 반복 가능

객체 오브젝트를 반복하기 for in

    var obj = {name : 'kim', age : 20}
    
    for(var key in obj){
      console.log(key); //key 출력
      console.log(obj[key]); //value 출력
    }

출석부 예제

var 출석부 = ['흥민', '영희', '철수', '재석']; //배열선언

function 이름찾기(name) {
  for(let i = 0; i < 출석부.length; i++){
    if (name == 출석부[i]) { //만약에 이름이 출석부에 있으면
      console.log('있어요'); //있어요하기
    }
  }

}
//출력
이름찾기('흥민');
이름찾기('영희');
이름찾기('철수');
이름찾기('재석');
이름찾기('영철');

구구단 출력하기

//구구단 출력
/*
for(let i = 0; i < 10; i++){
console.log(2 * i); 
}
for(let i = 0; i < 10; i++){
console.log(3 * i); 
}
for(let i = 0; i < 10; i++){
console.log(4 * i); 
}
*/
for(let j= 2; j < 10; j++){
for(let i = 0; i < 10; i++){
  console.log(`${j}단 : ${j} x ${i} = ${j * i}`); 
  }
}

서버

유저가 데이터 요청 하면 데이터를 보내주는 프로그램
가끔 유저 데이터를 DB에 저장하기도 함

  1. 서버에 데이터 요청하기
    1) 어떤 데이터인지 URL 기재 comic.naver.com
    2) 어떤 방법으로 요청할지 GET, POST 등

Get요청

웹브라우저의 주소창에 URL 입력이 Get 요청

Post 요청

<form action = "/new" method = "post">
</form>

☞ form 태그의 액션과 메소드 입력

GET이랑 POST 요청하면 브라우저가 새로 고침된다

###ajax
상품더보기처럼 새로고침 없이 get과 post 가능

  1. Get으로 테스트해보기
  <script>
    $.get('https://codingapple1.github.io/hello.txt').done(function(data){
       console.log(data);
    })
  </script>
  1. POST 해보기 
    $.post('https://codingapple1.github.io/hello.txt', {name: 'love'}).done(function(data){
      console.log(data);
    })

☞ url 잘적고 서버로 보낼 데이터를 적으면 됨

더보기 버튼 만들기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="row">

      <!--- <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>Card title</h5>
        <p>가격 : 70000</p>
      </div> -->
    </div>
  </div>
  <button class="btn btn-danger more">더보기</button>



  <script>



    var products = [
      { id: 0, price: 70000, title: 'Blossom Dress' },
      { id: 1, price: 50000, title: 'Springfield Shirt' },
      { id: 2, price: 60000, title: 'Black Monastery' }
    ];

    products.forEach(function (data, i) {
      var 카드 = `  
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
      document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
    })


    document.querySelector('.more').addEventListener('click', function () {
      $.get('https://codingapple1.github.io/js/more1.json')
        .done(function (data) {
          console.log(data);
          data.forEach(function (a, i) {
            var 카드2 = `  
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${data[i].title}</h5>
          <p>가격 : ${data[i].price}</p>
        </div>`;
            document.querySelector('.row').insertAdjacentHTML('beforeend', 카드2)
          })

        })
    })

  </script>
</body>

</html>

정렬함수 sort()

var 어레이 = [7, 3, 5, 1, 30];
var 어레이2 = ['b', 'c', 'a', 'd', 'f', 'e'];
어레이.sort(function(a, b){
  return a - b; //역순은 b - a 
});
console.log(어레이);
어레이2.sort()}); 
console.log(어레이2);

☞ sort는 문자열을 정렬하는 함수임
☞ 숫자로 정렬하고 싶으면 안에 함수를 넣어야함 .
어레이.sort(function(a, b){
return a - b; //역순은 b - a
});

  • 응용
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="row">

      <!--- <div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>Card title</h5>
        <p>가격 : 70000</p>
      </div> -->
    </div>
  </div>
  <button class="btn btn-danger more">더보기</button>
  <button class="btn btn-dark" id="price"> 정렬</button>



  <script>



    var products = [
      { id: 0, price: 70000, title: 'Blossom Dress' },
      { id: 1, price: 50000, title: 'Springfield Shirt' },
      { id: 2, price: 60000, title: 'Black Monastery' }
    ];

    document.querySelector('#price').addEventListener('click',function(){
      products.sort(function(a, b){
        return a.price - b.price
      })
      document.querySelector('.row').innerHTML = '';
      products.forEach(function (data, i) {
      var 카드 = `  
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
      document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
    })
    })


    products.forEach(function (data, i) {
      var 카드 = `  
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${products[i].title}</h5>
          <p>가격 : ${products[i].price}</p>
        </div>`;
      document.querySelector('.row').insertAdjacentHTML('beforeend', 카드)
    })
  


    document.querySelector('.more').addEventListener('click', function () {
      $.get('https://codingapple1.github.io/js/more1.json')
        .done(function (data) {
          console.log(data);
          data.forEach(function (a, i) {
            var 카드2 = `  
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${data[i].title}</h5>
          <p>가격 : ${data[i].price}</p>
        </div>`;
            document.querySelector('.row').insertAdjacentHTML('beforeend', 카드2)
          })

        })
    })

  </script>
</body>

</html>

어레이 자료중에 원하는 것만 필터하려면 .filter()

.sort는 원본의 변형이 있는데 .filter는 원본변형이 없음

var 어레이3 = [7, 3, 5, 1, 30];
var 새어레이 = 어레이3.filter(function(a){
  return a < 4 //[조건식] 4이하의 자료만
});
console.log(새어레이);

어레이 자료 전부 변형하려면 .map

var 어레이4 = [7, 3, 5, 1, 30];
var 새어레이2 = 어레이4.map(function(a){
  return a * 4 
});
console.log(새어레이2);

☞ 출력값 : [ 28, 12, 20, 4, 120 ]

오늘의 한줄평 : 재미있었으나 걱정이 많은 하루, 개인과제도 힘내서 잘해보자!! ㅠㅠ

출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui

profile
새벽로즈
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰
이전 포스트

JavaScript 문법 종합반 - 최선의(= 최악의) TIL

다음 포스트

[개인과제] 애증의 영화 검색 사이트(1)

0개의 댓글