자바스크립트 / 제이쿼리

1. 자바스크립트 기본

반복문

for문보다 forEach문이 훨씬 사용이 쉽기때문에, forEach문 자주 씀

for 문

for (let index = 0; index < array.length; index++ {
	const element = array[index];
}
     
     for (let i = 0; i < a.length; i++) {
	console.log(a[i]);
}

forEach 문

array.forEach(element => {

});

a.forEach(element => {
	console.log(element);'
})

---

2. 단축키 설정

1. 아래 버튼 클릭 후 , 바로가기키 (shortcut) 누르기
2. 아래 버튼 클릭
3. 아래 코드 복붙하기
   (1) shift + cmd + l = 콘솔로그
   (2) shift + cmd + a = 알럿창
   (3) shift + cmd + f = 펑션입력
   (4) shift + cmd + - = 제이쿼리문 입ㅂ력

{
        "key": "shift+cmd+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log($1);"
        }
    },
    {
        "key": "shift+cmd+a",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "alert();"
        }
    },
    {
        "key": "shift+cmd+f",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "function(){$1}"
        }
    },
    {
        "key": "shift+cmd+-",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>"
        }
    },

---

3. 제이쿼리(JQuery)

1. append : ~의 이후에 / 뒤에

$('.test').append()

2. prepend : ~의 이전에 / 앞에

$('.test').prepend()

3. focus : 해당칸에 깜빡이게해줌

   아래의 경우 test의 값을 ""로 비워주고, focus로 해당칸에 깜빡이게 해줌

$('.test').val("").focus();

4. 동적생성태그 이벤트

   원래 문서에 있던 항목이 아닌, append 또는 prepend와 같이 생성된 항목들은 event가 걸리지 않음.
   -> html에서 읽고 js로 넘어갔는데, 기존 html에 없었기때문에!

아래와 같이 입력하면 해결됨 ❗

$(document).on("click", ".del", function(){
	
})

5. this
   jQuery에서 this는, 클릭 한 그것! 이 this가 됨

$(document).on("click", ".del", function(){
	
})

6. parent : 해당요소의 부모요소를 선택함

$(document).on("click", ".del", function(){
	$(this).parent().remove()
})

7. siblings : 해당요소의 형제요소를 선택함

$(document).on("click", ".del", function(){
	$(this).siblings().remove()
})

8. 로드 후 실행
   아래와 같이 입력시, defer와 같이 다읽고나서 마지막에 실행이 되게끔 하는 코드

<script>
	$(function(){
	
	})  
</script>

9. addClass() / removeClass()
   클래스에 ~~를 추가 또는 제거 하는 것

10. toggleClass()
    addClass+removeClass를 합친 것(추가했다가 제거했다가)

11. slideUp() / slideDown()
    슬라이드를 열고, 닫는 것

12. slideToggle()
    slideUp+slideDown 두개 합친것(열었다가 닫았다가)

13. hasClass()
    ~~라는 클래스를 가지고 있다면.

14. stop()
    스크립트 진행중인걸 멈추고 즉시 끊는 기능

ex) this에게 'on'이라는 클래스를 주고, 그것의 형제모두선택(sub의 클래스를가지고있는)를 선택하고, 모든 스크립트를 멈춘뒤, 슬라이드를 올려라 라는 구문

$(this).removeClass('on').siblings('.sub').stop().slideUp();

ex) this에게 'on'이라는 클래스를 주거나 지우고, 그것의 형제모두선택(sub의 클래스를가지고있는)를 선택하고, 모든 스크립트를 멈춘뒤, 슬라이드를 올리거나 내리라는 구문

$(this).toggleClass('on').siblings('.sub').stop().slideToggle();

15. scroll()
    스크롤 한다는 뜻

16. scrollTop()
    스크롤바의 시작위치

17. Math.floor()
    소수점 버리고 표기하기

18. offset().top
    문서 전체에서 태그의 시작 위치

---

preventDefault

아래의 코드에서, a 태그에 btn2의 클래스를 주고, 스크립트를 작성했지만, 작동하지 않음.
이유는?

a태그에 기본적으로 링크 기능이 들어가기 때문에, 스크립트 기능이 묻히게 되는 것!

-> 이 때 사용하는게 preventDefault

    <a href="" class="btn2">버튼2</a>

	$('.btn2').click(function(){
        $('.menu').addClass('on')
    })

위 코드에서 .btn2에 preventDefault 입력시 링크기능 없애주고, addClass 기능 작동되게 함.

	$('.btn2').click(function(e){
      	e.preventDefault(); 
        $('.menu').addClass('on')
    })

---

dimmed태그 사용법

• 

위와같이, 창이 켜지면서 뒤에 배경은 흐려지게 하고싶을때 사용

1. 아래와 같이, dimmed 태그를 설정 해 두기,
   ex)

.dimmed{
	position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #0f0;
    opacity: 0;

    visibility: hidden;
    //opacity0 만 넣게 되면, 투명도가 0이 되어있는 상태라, 화면 위에 투명한 막 씌운게 되어서 클릭이 불가능하기 때문에, visibility: hidden; 을 같이 써주자
}

2. 버튼 클릭시 뒷배경 스크롤 안되게 막아버리기 -> css의 body에 hidden클래스가 붙었을때 overflow: hidden;을 주면 스크롤 없어짐
   -> jQuery의 .btn1을 클릭시, menu에 on이 붙고, body에 hidden이 붙게 하여, menu창 띄우면서 스크롤 안되게 아래와같이 작성

body.hidden {
	overflow: hidden;
}

$('.btn1').click(function(){
	$('.menu').addClass('on');
  	$('body').addClass('hidden')
})

$('close').click(function(){
	$('.menu').removeClass('on');
  	$('body').removeClass('hidden);
})

3. 스크립트에서 btn1을 클릭시, dimmed도 같이 나오게 세팅
   ->css : body에 hidden이 들어갔을때, dimmed가 opacity가 0->0.5로, visibility가 hidden -> visible로 바뀌게 세팅

body.hidden .dimmed{
	opacity: 0.5;
    visibility: visible;
}

4. 닫기버튼 말고, dimmed된 부분 클릭해도 메뉴가 닫히게 하기
   -> js : close,dimmed 로 바꿔주면 close를 클릭시, 그리고 dimmed된 부분을 클릭시 창이 닫히게 됨

$('.btn1').click(function(){
	$('.menu').addClass('on');
  	$('body').addClass('hidden')
})

$('close,dimmed').click(function(){
	$('.menu').removeClass('on');
  	$('body').removeClass('hidden);
})

---

해당 탭을 누르면 해당 내용 나오게 하기

ex) 아래의 네이버 페이지와 같이, 쇼핑탭을 누르면 쇼핑 컨텐츠 , 맨즈 탭을 누르면 맨즈 컨텐츠가 나오게 하기

1. 소개팅에서 여자, 남자 매칭시켜주듯 각각 id값을 줘서 연결시켜주기
   ex) 아래처럼 a에 data-tab="#tab1", 밑에 컨텐츠에 div id="tab1"을 각각 줘서 연결시켜주기

<ul class="tab-list">
    <li class="tab-item">
      <a href="" data-tab="#tab1">엔터</a>
    </li>
    <li class="tab-item">
      <a href="" data-tab="#tab2">스포츠</a>
    </li>
    <li class="tab-item">
      <a href="" data-tab="#tab3">경제</a>
    </li>
  </ul>
  
  <div class="tab-cont">
    <div id="tab1" class="cont on">엔터 내용</div>
    <div id="tab2" class="cont">스포츠 내용</div>
    <div id="tab3" class="cont">경제 내용</div>
  </div>