자바스크립트> 정리

알림창 온오프 (버튼2개)

buttion onclick = "알림창열기('blcok');">버튼</button>

<button onclick="document.getElementById('어쩌구').style.display = 'none';"> 닫기 </button>

=><button id="close"> 닫기 </button>

=>document.getElementById('close').addEventListener('click', function(){
    document.getElementById('alert').style.display = 'none'
});


<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 열기 </button>



==> function 알림창열기(구멍,구멍2){

getElementClassName()[0]

  document.getElementById('구멍').style.display = 구멍2; (아이디,비번)
  document.getElementById('alert').style.display = block;
}



list(토글)(class 탈부착)

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.toggle('show');
});

==> document.querySelectorAll('.test1')[1].innerHTML = '안녕';
       querySelector(맨위줄 하나만임)
      $


==> $('.hello)     . html('바보');
          . css ('color', 'red');
          . addClass( );
          . removeClass( );
          . toggleClass( );

      addEventListener
==>$('.test-btn').on('click', function(){
     $('.hello').fadeOut();
  });


UI 애니메이션
1. One- way 애니메이션(시작 - 최종-원할때 최종으로 바뀜 코드- transition 추가)
투명도 css ( visibility: hidden; opactiy : 0~0.5; transition : all 1s;
// visibility:visible; opactiy : 1;)

캐러셀(애니메이션)
.slide-container {
  width: 300vw;
  transition: all 1s;
  transform: translateX(-100vw);
} 
$('.slide-2').on('click', function() {
  $('.slide-container').css('transform', 'translateX(-100vw)');
});
다음버튼


form 만들기
<form action = " url"> - 부트스트랩
<button type ="submit"> 전송 (타입 조심!!)

e.prevent Default(); 전송을 막음
document.getElementById('email').value (입력된 값)
document.getElementById('email').value.length(입력된 값의 길이)

$('form').on('submit', function(e){
  if (document.getElementById('email').value == '') {
    e.preventDefault();
    alert('아이디 입력하쇼');
  }
});


카운터
var count = 0;

$('.badge').on('click', function(){
  count += 1;

타이머
setTimeout(function(){ 
  console.log('안녕')
}, 1000);
setInterval(function(){ 
  console.log('안녕')
}, 1000); 
( 1초 마다)

글자검사
regexr.com/a/.test('abcde')  //true 

/[a-d]/.test('aefg')  //true
/[가-다]/.test('다라마바')  //true
[a-z] 는 a부터 z까지 아무문자 하나를 의미합니다.


/[a-zA-Z]/.test('반가워요')  //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요')  //true
[a-zA-Z] 이건 아무 알파벳 하나라는 뜻입니다. 

[ㄱ-ㅎ가-힣ㅏ-ㅣ] 이건 아무 한글 하나라는 뜻입니다. 

/\S/.test('abcde')   //true  
백슬래시S 는 특수문자 포함 아무문자 1개라는 뜻입니다. 

/^a/.test('abcde')   //true
/e$/.test('abcde') //true  
^a 라고 적으면 a로 시작하는지 검사할 수 있습니다.
e$ 라고 적으면 e로 끝나는지 검사할 수 있습니다.

/(e|f)/.test('abcde')   //true
| 이건 or 기호입니다.
e 또는 f중 아무거나 한 문자가 있나 검사가능합니다.
정규식에선 괄호맘대로 칠 수 있습니다. 

/a+/
+ 기호를 붙여주시면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻입니다.
왜냐면 /a/는 a를 다 찾으라는게 아니라 a 한개를 찾으라는 뜻입니다.
aaaaa 이런걸 찾고 싶으면 /a+/ 쓰면 됩니다. 

 
/\S+t/
이건 그럼 뭘까요.
-> 모든 문자 여러개 다음에 t라는 글자가 있냐를 검사해주는 정규식입니다. 
aaaaat 
bbt

if ( /\S+@\S+\.\S+/.test(입력한값) 이메일

스크롤(약정 다읽기) -실제 높이랑 스크롤 높이랑 다르다.
$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  var 높이 = document.querySelector('.lorem').clientHeight;
  if (스크롤양 + 높이 > 실제높이 - 10) {
    alert('다읽음')
  }
});

document.querySelector('html').scrollTop;  //현재 웹페이지 스크롤양
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이임


(내려가면 글자가 작아짐)
  $(window).on('scroll', function(){
    if (window.scrollY > 100) {
      $('.navbar-brand').css('font-size', '20px');
    }
  });

탭기능
- 버튼0 누르면

- 버튼0,1,2에 붙어있던 orange 클래스명 전부 제거하라고 코드 3줄 짜기

- 버튼0에 orange 클래스명 부착

- 박스0,1,2에 붙어있던 show 클래스명 전부 제거하라고 코드 3줄 짜기

- 박스0에 show 클래스명 부착

$('.tab-button').eq(0).on('click', function(){
  
});

$('.tab-button').eq(0).on('click', function(){
  $('.tab-button').removeClass('orange');
  $('.tab-button').eq(0).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(0).addClass('show');
})

for (let i = 0; i < $('.tab-button').length; i++){

  $('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })

});

(참고)
for 안에서 var i = 0 쓰면

- var 변수는 범위가 function입니다.

- var i 들어있는 포스트잇은 for 바깥에 생성됩니다. 

for 안에서 let i = 0 쓰면

-let 변수는 범위가 { } 입니다.

- let i 들어있는 포스트잇은 for 안쪽에 3개 생성됩니다.

그리고 컴퓨터는 변수가져다쓸 때 가까운거 가져다 쓰려고합니다.

그냥 그렇게 동작해서 그렇습니다.

알 필요는 없는데 이런 원리같은거 알면 나중에 혼자 코드짤 때 많은 도움이 됩니다. 


버블링(이벤트 리스너 함수)
document.querySelector('.black-bg').addEventListener('click', function(e){
e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳) ★★★
e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
})

document.querySelector('.black-bg').addEventListener('click', function(e){
  if ( e.target == document.querySelector('.black-bg') ) {
    document.querySelector('.black-bg').classList.remove('show-modal');
  }
})

<참고>
저기서 e.currentTarget 출력해보면 검은배경이 나오기 때문에 
e.target == e.currentTarget 이렇게 써도 될듯요
아니면 e.target == this 이렇게 써도 될듯요 
jQuery 셀렉터로 찾은 결과와
querySelector 셀렉터로 찾은 결과는 다르게 생겼습니다.
출력해보면 전자는 이상한 object 이런게 나오고 후자는 <html> 이런게 나옵니다. 
그래서 e.target == $('.black-bg') 이건 사용불가능합니다.
그리고 애초에 jQuery 셀렉터끼리 등호비교는 불가능합니다. 
$('.black-bg').is($('.black-bg')) 이런 비교용 함수쓰든가 하면 됩니다.
위 예제에선 $(e.target).is($('.black-bg')) 이러면 됩니다.

========================================>
 
for (let i = 0; i < $('.tab-button').length; i++){

  $('.tab-button').eq(i).on('click', function(){
    탭열기(i)
  })

});


function 탭열기(구멍){
  $('.tab-button').removeClass('orange');
  $('.tab-button').eq(구멍).addClass('orange');
  $('.tab-content').removeClass('show');
  $('.tab-content').eq(구멍).addClass('show');
}

탭열기(0) 이러면 0번 탭이 열림
탭열기(1) 이러면 1번 탭이 열림
탭열기(2) 이러면 2번 탭이 열림

$('.list').click(function(){
  지금 누른게 버튼 0이면 탭열기(0) 실행
  지금 누른게 버튼 1이면 탭열기(1) 실행
  지금 누른게 버튼 2이면 탭열기(2) 실행
})

$('.list').click(function(e){
  if (e.target == document.querySelectorAll('.tab-button')[0] ){
    탭열기(0)
  }
  if (e.target == document.querySelectorAll('.tab-button')[1] ){
    탭열기(1)
  }
  if (e.target == document.querySelectorAll('.tab-button')[2] ){
    탭열기(2)
  }
})

function 탭열기(){
  생략
}

================================================

<div data-데이터이름="값"></div> 

html 안에 유저 몰래 정보를 숨겨놓을 수 있습니다. 
데이터이름 아무렇게나 작명하고 값도 넣으면 됩니다.
일반 유저들은 모름 



document.querySelector().dataset.데이터이름;

이러면 html 요소에 숨겨놨던 데이터가 이 자리에 남습니다.
출력해보면 진짜로 아까 숨겨놓은 값이 남습니다.
이런 잡기술을 알고있으면 위에서 만들었던 코드를 조금 더 짧게 축약가능합니다.

 

<li class="tab-button" data-id="0">Products</li> 
<li class="tab-button orange" data-id="1">Information</li> 
<li class="tab-button" data-id="2">Shipping</li> 

 우선 탭의 버튼들에 이렇게 데이터를 숨겨봅시다. 따라하셈  
그리고 아까 코드를 다시 살펴보면 if문이 3개였습니다. 
버튼0 누르면 탭열기(0) 실행해주세요~
버튼1 누르면 탭열기(1) 실행해주세요~
버튼2 누르면 탭열기(2) 실행해주세요~



$('.list').click(function(){
  탭열기(지금누른버튼에 숨어있던 data-id)
});

 근데 이렇게 코드짜면 굳이 if문이 필요없이 한 줄로 해결아닙니까
맞습니다.
지금누른버튼에 숨어있던 data-id를 알려주는 코드같은게 있습니까 
있습니다. 


$('.list').click(function(e){
  탭열기(e.target.dataset.id)
});

지금누른 버튼을 찾고 싶으면 e.target이고 
거기 숨어있는 data-id 꺼내고 싶으면 .dataset.id 붙이면 됩니다.
$(셀렉터).data('데이터이름', '값') 이렇게 저장하고
$(셀렉터).data('데이터이름') 이렇게 출력합니다. 


자료형 
Array 
var car = ['소나타', 50000, 'white'];
car[1] = 60000;
console.log(car[1]);


object
var car2 = { name : '소나타', price : 50000 };
car2['name'] = '그랜저';
console.log(car2['name']);
----------------------------------------
<object 반복문>
var obj = { name : 'kim', age : 20 }
for (var key in obj){
 console.log(key)
출력해보면 진짜로 name, age 잘 나옵니다. 
key 말고 실제 자료인 value를 출력하고 싶으면 
console.log(obj[key]) 이렇게 써보셈 

-----------------------------------------------
복잡한 데이터에서 자료꺼내려면
1. console.log(car2.price) 
2. 시작기호가 [ 이거면 무조건 array 자료형
3. console.log(car2.price[1]) 이렇게 했더니 3000

 var car2 = { name : '소나타', price : [50000, 3000, 4000] } 
  document.querySelector('.car-title').innerHTML = car2.name;


데이터 상품명 
document.querySelectorAll('.card-body h5')[0].innerHTML = products[0].title;
document.querySelectorAll('.card-body p')[0].innerHTML = '가격 : ' + products[0].price

document.querySelectorAll('.card-body h5')[1].innerHTML = products[1].title;
document.querySelectorAll('.card-body p')[1].innerHTML = '가격 : ' + products[1].price;

document.querySelectorAll('.card-body h5')[2].innerHTML = products[2].title;
document.querySelectorAll('.card-body p')[2].innerHTML = '가격 : ' + products[2].price;


< 문자와 변수 쓰는법 ``>
var a = '안녕';
console.log('문자' + a + '문자');  
console.log(`문자 ${a} 문자`); // '문자안녕문자'출력됨
 

셀렉트가 들어간 폼 ( 셔츠 - 95,100 ) Ui 애니메이션
1. 다 만들고 , 하이드
2. if (유저가 선택한거 == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }
3. var value = $('.form-select').eq(0).val();
  if (value == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }

<참고>
<script> 안에 대충 적은 코드는 페이지 로드시 1회 실행됨
자주 중요하게 말하는 내용입니다 잘 명심하십시오. 
지금 "유저가 셔츠선택하면 form-hide 제거해주세요~" 라고 코드짰는데 
이 코드는 <script> 안에 적었기 때문에 그냥 페이지 로드시 1회 실행되고 다시는 실행되지 않습니다.
그래서 저 코드를 <select> 조작할 때 마다 실행한다면 의도대로 잘 동작하지 않을까요 


4. $('.form-select').eq(0).on('input', function(){         //눌릴때마다

    var value = $('.form-select').eq(0).val();                //변수 의 설정
    
   if (value == '셔츠') {                                                //유저가 선택한 셀렉

      $('.form-select').eq(1).removeClass('form-hide');  // display : none 클래스를 없애서 나타남 
    }
  });


사이즈 옵션을 추가
 
 (1) var a = '<p>안녕</p>';                // 추가하고 싶은 변수 만듬

  document.querySelector('#test').insertAdjacentHTML('beforeend', a);  

//문자자료로 html을 만든 다음 
- insertAdjacentHTML() 안에 넣으면 됩니다.
- 'beforeend' 이건 안쪽 맨 밑에 추가하라는 뜻입니다

(2)  var a = '<p>안녕</p>';
    
   $('#test').append(a);

(3)바꾸고 싶음
   innerHTML = '<p></p>' 쓰셈

   jQuery에선 .html() 입니다.  
  


 셔츠 > 바지로 눌렀을때 옵션이 다르게 변경(바지 - 30 -32)
유저가 바지를 선택하면
1. 일단 둘 째 <select> 보여주셈 
2. 둘 째 <select> 안에 비워주셈
3. html 만들어서 둘 째 <select> 안에 append 해주셈 


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

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }
    else if (value == '바지'){
      $('.form-select').eq(1).removeClass('form-hide');  //옵션을보여줘
      $('.form-select').eq(1).html(''); //비워주셈
      var 템플릿 = `<option>28</option><option>30</option>`; //새로운 탬플릿 생성
      $('.form-select').eq(1).append(템플릿) //추가해주셈
    }

  });

 else if (value == '바지'){
    $('.form-select').eq(1).html(''); //비워주셈
      var 템플릿 = `<option>28</option><option>30</option>`; //새로운 탬플릿 생성
      $('.form-select').eq(1).append(템플릿) //추가해주셈
   $('.form-select').eq(1).removeClass('form-hide');  //옵션을보여줘
    } // 이게 더 논리적임


★★데이터 횟수 만큼 증가 및 변화★★

반복문>  
var pants = [28, 30, 32];
  $('.form-select').eq(0).on('input', function(){

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }
    else if (value == '바지'){
      $('.form-select').eq(1).removeClass('form-hide');
      $('.form-select').eq(1).html('');
      for (let i = 0; i < pants.length; i++){
        <option>생성해주세요~
      }
    }

  });

(1)
pants.forEach(function(a){
        $('.form-select').eq(1).append(`<option>${a}</option>`)
      })

//pants 안의 데이터 갯수만큼
forEach 콜백함수 안에 있는 코드가 실행됩니다.


<참고>
pants.forEach(function(a){
  console.log(a)
});
pants.forEach((a) => {
  console.log(a)
});
function 키워드 대신 => 화살표를 ( ) 우측에 부착해도 똑같이 함수만들 수 있습니다.
저걸 arrow function 이라고 합니다. 

 return 한 줄 밖에 없으면 { } 중괄호와 return 동시에 생략



※※ 객체 사용시 , 배열사용시 ※※

var products = {
  "셔츠": ["S", "M", "L"],
  "바지": [28, 30, 32]
};
function checkProduct(productName) {
  if (products[productName]) {
    console.log("있어요");
  } else {
    console.log("없어요");
  }
}
checkProduct("셔츠"); // 있어요
checkProduct("모자"); // 없어요


배열 사용 예시:
var 출석부 = ['흥민', '영희', '철수', '재석'];

function 이름찾기(name) {
  for (var i = 0; i < 출석부.length; i++) {
    if (name == 출석부[i]) {
      console.log('있어요');
  } else {
    console.log('없어요');
  }
}

이름찾기('철수');  // 있어요
이름찾기('민수');  // 없어요


★★ Ajax (서버와 데이터) ★★

서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 합니다. 
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고 
그런 기능을 만들 수 있는 것임 

$.get('https://codingapple1.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

근데 가져온 데이터가 어디 들어있냐면 
.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터 하나 만들면 거기에 들어있습니다.
진짜 인삿말 들어있는지 출력해봅시다. 

$.post('url~~', {name : 'kim'})

서버와 데이터를 주고받을 때는 문자만 주고받을 수 있습니다.
array, object 이런거 전송불가능 
근데 아까 { price : 5000 } 이런 object 무리없이 받아왔죠?
어떻게 한거냐면 object를 JSON으로 바꿔서 전송해줘서 그렇습니다.
array 아니면 object에 따옴표를 다 쳐서 '{ "price" : 5000 }' 대충 이렇게 만들면 JSON이라는 자료가 됩니다.
JSON은 문자로 인식하기 때문에 서버와 데이터주고받기가 가능합니다. 
하지만 
jQuery의 $.get() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔줍니다.
기본함수 fetch() 이런건 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지 않습니다.
그래서 fetch() 로 가져온 결과를 array/object로 바꾸고 싶으면 res.json() 이런 코드 한 줄 추가하면 됩니다. 


★★데이터 받아서 array 만들기★★

$get('https://codingapple1.github.io/js/more1.json') 

var products = data;

products.forEach((a, 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>`;
      $('.row').append(템플릿)
});

 ======================================done를 쓰는게 더 좋다

$get('https://codingapple1.github.io/js/more1.json')
.done((data) => {
    data.forEach((product, i) => {
      var 템플릿 = 
      `<div class="col-sm-4">
          <img src="https://via.placeholder.com/600" class="w-100">
          <h5>${product.title}</h5>
          <p>가격 : ${product.price}</p>
      </div>`;
      $('.row').append(템플릿);
    });
  })

데이터받아 <더보기 버튼>
<div class="container">
  <button class="btn btn-danger" id="more">더보기</button>
</div>

<script>
  $('#more').click(function(){
    $.get('https://codingapple1.github.io/js/more1.json')
      .done((data)=>{
        
        data.forEach((a, i)=>{
          var 템플릿 = 
          `<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>`;
          $('.row').append(템플릿)
        })
        
      });
  });
</script>



<참고>
sort 정렬 함수 (음수면 오른쪽 양수면 왼쪽 : 내림차순)

var 어레이 = ['가', '다', '나'];
어레이.sort(function(a, b){
  if (a < b) {
    return -1
  } else {
    return 1
  }
}); 

//내림차순 

console.log(어레이)
---------------------------------------------------
var products = 생략;

$('#price').click(function(){

      products.sort(function(a, b){
        return a.price - b.price
      });

      $('.row').html('');

      products.forEach((a, 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>`;
        $('.row').append(템플릿)
      })
}); 

// 가격대로 정렬하고 기존 데이터 삭제 다시 생성 


filter (6만원이하)

var newProduct = products.filter(function(a){
  return a.price <= 60000
}); 
//화살표함수
var newProduct = products.filter(a => a.price <= 60000);
 


★★map★★
array 안의 자료들을 전부 변형하려면 map 함수를 씁니다

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



<참고>
브라우저 저장공간 
크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다. 
Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)
Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)
Cookies (유저 로그인정보 저장공간)
Cache Storage (html css js img 파일 저장해두는 공간)
골라쓰면 되는데 우린 범용적으로 쓸 수 있는 Local Storage


로컬스토리지에 array/object 저장 or 꺼냄

var arr = [1,2,3];
var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr);

//꺼내서 쓸 땐
var 꺼낸거 = localStorage.getItem('num');
꺼낸거 = JSON.parse(꺼낸거);
console.log(꺼낸거);


구매버튼누르면 상품명을 localStorage에 저장

products.forEach(function(a, i){
  (생략)
  <h5>${products[i].title}</h5>
  <p>가격 : ${products[i].price}</p>
  <button class="buy">구매</button>
});

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  console.log(title)
});
 

==>>

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  localStorage.setItem('cart', JSON.stringify([title]))
}); 

// array에 새로 생성만되고 추가가 안됨.

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  if (localStorage.getItem('cart') != null ){
    이미있던거 수정해주셈
  } else {
    localStorage.setItem('cart', JSON.stringify([title]))
  }
});

// '카트'라는 항목이 있으면 수정 없으면 추가
<수정> 
if (localStorage.getItem('cart') != null ){
    var 꺼낸거 = JSON.parse(localStorage.cart); //JSON > 숫자 파일로
    꺼낸거.push(title); // 넣고
    localStorage.setItem('cart', JSON.stringify(꺼낸거)); //저장.

 

 

 

 

이하 나머지 기능은 사이트 참조