• HTML의 속성을 취급한다.

  $('선택자').attr('속성명') 
  //속성값 가져오기
  
  

$('선택자').attr('속성명','값') // 값 넣기

<br>

### attr 예제

```js
$('img').attr('src','./img/girl.jpg')
// img의 src 속성에 ./img/girl.jpg 라는 값을 넣는다.

2. prop

• 자바스크립트의 속성을 취급한다.

  $('img').prop('src','./img/girl.jpg')

• 스크롤바가 맨 밑에(근처) 닿으면 동작 scroll_bottom = scrollTop + 모니터 높이 문서 높이 <= scroll_bottom 하면 요소 추가

  if($(document).height() <= scroll_bottom)

요소 삽입

1. append

$('선택자').append('삽입할 코드');

append to

$('삽입할 코드').appendTo('선택자');

append (To) 는 선택한 요소의 마지막 자식으로 들어간다.

• 주의 css를 같이 명시하는 경우, append 와 appendTo 가 아래와 같이 차이 난다

  $('list').appendTo('body').css({color:'red'})
  해설 :  red 가 list에 담아놓은 요소에 적용됨
  
  

$('body').append('list').css({color:'orange'}) 해설 : orange 가 body에 적요됨

<br>


#### 2. prepend
```js
$('선택자').prepend('삽입할 코드');

prependTo

$('삽입할 코드').prependTo('선택자')

prepend(To)는 선택한 요소의 첫 번째 자식으로 들어간다.

3. 무한스크롤 예제

let d_height = $(document).height();
//(변수 d_height 에 $(document).height(); , 즉 문서의 높이값을 저장시킴) 

    $(window).scroll(function(){ // 윈도우 창에서 스크롤이 되면 
        let s_bot = $(window).scrollTop() + $(window).height();
      // 변수 s_bot에 scrollTop 값 + 모니터 높이를 계싼한 값을 저장한다.


        if(s_bot >= d_height) { 
          // s_bot 값이 d_height 값보다 크거나 같을 때
            for(let i=0; i<20; i++) {
                let list = `<h1>비트스터디${i+1}</h1>`; 
                $(list).appendTo('body').css({color:'red'}) 
            }
          // list 를 body 에 20번 넣는다. 색은 red


            d_height = $(document).height(); 
              // 계산된 d_height 값을 다시 저장시킨다.
        }
    });

})

1. 추가

$('선택자').addClass('클래스명')

2. 삭제

$('선택자').removeClass();

=> 모든 클래스를 삭제한다.


$('선택자').removeClass('클래스');

=> 클래스 한 개 삭제


$('선택자').removeClass('클래스명 클래스명 클래스명')

=> 삭제할 클래스가 여러 개 일 때 사용

• 체이닝 : 선택자가 같으면 함수끼리 . 을 이용하여 붙여서 사용한다.

$('#btn_red').click(function(){
  (#btn_red 를 클릭했을 때의 기능)

  $('box').addClass('red').removeClass('green').removeClass('blue');
  (box 클래스에 red 라는 클래스를 추가하고, green , blue 클래스를 삭제한다.

  $('#btn_green').click(function(){
    (#btn_green을 클릭했을 때의 기능)

    $('#box').removeClass('red'); 
    $('#box').addClass('green');
    $('#box').removeClass('blue');
    })
      (green 클래스를 추가하고 red, blue 클래스를 삭제한다.)

  $('#btn_blue').click(function(){
    (#btn_blue)를 클릭했을 떄의 기능

    $('#box').removeClass('red'); 
    $('#box').removeClass('green');
    $('#box').addClass('blue');
    })
  (blue 클래스를 추가하고 red, green 클래스를 삭제한다.
})

• 속성 종류

1. $('선택자').click(function(){})
- 한번 클릭

2. $('선택자').dbclick(function(){})
- 더블 클릭

3. $('선택자').mousemove(function(){})
- 해당 요소 위에서 마우스 움직일 때 동작

4. $('선택자').mouseover(function(){})
- 마우스가 올라갔을 때, 버블링 효과

5. $('선택자').mouseout(function(){})
- 마우스가 나갔을 때, 버블링 효과

• 버블링 효과란? (부모자식관계) 두 개의 요소가 겹쳐있을 때 나타나는 현상 자식요소에 마우스 오버/아웃 이벤트가 발생했을 때, 부모요소에 다시 마우스오버/아웃 된 것 같은 효과

• 버블링 효과 막기 event.stopPropagation() 을 자식한테 주기 감싸고 있는 부모 요소의 이벤트가 반응하지 않게 함

6. $('선택자').mouseenter(function(){})
- 마우스가 올라갔을 때, 버블링효과 없음

7. $('선택자').mouseleave(function(){})
- 마우스가 나갔을 때, 버블링효과 없음

1 ~ 7번까지는 아래 코드로 대체 가능

$(document).on('이벤트','선택자',function(){
      기존 것과 달리 나중에 js로 추가한 요소도 알아볼 수 있다.
})

• 이벤트 바인딩 : 메모리적으로 좀 더 유리함

  $('선택자').on({
  이벤트:function(){
    ...
  },
    이벤트:function(){
      ...
    }
  })

7. $('선택자').hover(function(){
    // 마우스 올라갔을 때의 기능 코드
}, function (){
   // 마우스 빠졌을 때의 기능 코드
}) 

1. resize

$('선택자').resize(()=>{})
$('선택자').resize(function(){

}

resize : 브라우저의 사이즈가 바뀔 때마다 동작한다

2. scroll

$('선택자').scroll(()=>{})
$('선택자').scroll(function(){

}

scroll : 스크롤바 움직일 때마다 동작한다.

$('선택자').offset().top 

문서의 최상단으로부터 해당 요소의 상단까지의 거리를 px로 나타냄

$('선택자').scrollTop()

문서의 최상단으로부터 현재 화면의 상단까지의 거리를 px로 나타냄

3-1. 예제 scroll

$(window).scroll(function(){
     console.log($('.box).offset().top, $(window).scrollTop())
    (콘솔창 출력 코드 => 문서의 최상단부터 클래스 box 요소의 상단까지의 거리(px))  


      if($('box).offset().top <= $(window).scrollTop(){
        $('.box').css({
          background : "blue"
    }
       (위 if 문 해설 : 문서의 최상단부터 클래스 box요소의 상단까지의 거리(px) 가  문서 최상단부터 현재 화면의 상단까지의 거리보다 작거나 같을 때,
      클래스 box 요소의 css 인 background 를 blue 색을 적용해라.)


      else {
        $('.box').css({
          background:'red'
        })
    }
});

    (위 else 문 해설 :  클래스 box의 css인 background에 red 를 적용해라 

3-2. 예제 resize

$(window).resize(()=>{

     if(window.innerWidth >= 1000) {
        $('body').css({
           background: 'pink'
        })
      }
      (위 if 문 해설 : 브라우저 안 가로 사이즈가 1000보다 크거나 같을 때, body 의 background에 pink 적용해라)


     else {
           $('body').css({
           background: 'transparent'
         })
      }
    }
    (else 문 해설 : body의 background 를 transparent 적용해라)

제이쿼리 사용시 필수로 필요한 것

1. 제이쿼리 파일

-파일 다운받기 -CDN : http://code.jquery.com -$ (jq 파일 있을 때) 제이쿼리라고 컴퓨터가 인식

    <!-- 특정버전 다운 -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <!-- 최신버전 알아서 다운 -->
    <!-- <script src="https://code.jquery.com/jquery-latest.js"></script> -->

    <!-- js 난독화 모드 -->
    <!-- <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> -->

$(document).ready(function(){

});

.child {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 50px; 
 }

자식요소 개수 : parent.childElementCount

- 요소 - 
  우리 눈에 보이는 DOM 구조 그대로 인식하면 됨
  이전요소 : 나.previousElementSibling
  다음요소 : 나.nextElementSibling

  부모찾기 : 자식요소.parentElement
  첫번째자식 : 부모.fistElementChild
  마지막자식 : 부모.lastElementChild

  - 노드 - 
  빈칸들도 노드로 치키 때문에 사용할 때 애매함
  자식 노드들 다 잡기 : parent.childNodes;
  이전노드 : 요소잡기.previousSibling
  다음노드 : 요소잡기.nextSibling


let parent = document.getElementById('parent');
let child = document.getElementsByClassName('child');
해설 : 각 변수에 id 값과 className이 'parent', 'child' 인 요소 저장시키기.


parent.style.border = "1px solid";
parent.style.backgroundColor = "skyblue";
parent.style.boxShadow = " 0 0 5px 0 #000"
해설: 자바스크립트로 css 적용시키기.

for(let i =0; i<parnet.childElementCount; i++){
  chile[i].style.border="1px solid";
  chile[i].style.background="skyblue";
  chile[i].style.boxShadow="0 0 5px 0";
}

 해설 : i 가 부모의 자식 수보다 작을 떄까지 i값에 1을 더해라
 child[0] / child[1] / child[2] 에게 해당 css 적용됨

[자식 0 기준으로 자식 2 배경색 파란색으로 변경]

child[0].parentElement.lastElementChild.style.background="red";
child[0].next.ElementSibling.nestElementSibling.style.background = "blue";

• 화살표 함수는 function 키워드 대신 화살표(=>) 를 사용해서 보다 간략한 형식으로 함수를 선언할 수 있다. 하지만 모든 경우에 화살표 함수를 사용하는 건 아님

• 화살표 함수는 익명함수로만 사용할 수 있다. 그래서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.

ES5

    let tmp = function(x){
      return x;
    }

ES6

    let tmp = (x) => {
      return x;
    }

className : 문자열로 가져옴

classList : 배열로 가져옴

className

• 특정요소의 클래스 값을 문자형태로 가져온다. (실수로라도) 해당 요소에 클래스 사이에 빈칸들이 있으면 split("")로 분리시킬 때 방 번호 잡기 힘들다.

  요소.className

  
  

classList

• 배열로 받아온다. 클래스가 하나만 있어도 0번방 (읽기 전용 프로퍼티)

요소.classList

1. 확인

    [보기] let 변수 = document.getElementById('아이디값');

    console.log(변수);
    출력 : <div class="클래스명 클래스명 클래스명"id="아이디값">txt</div>

    console.log(변수.className); 
    출력 : " 클래스명 클래스명 클래스명"

    console.log(변수.classList); 
    출력 : 배열형태로 ['클래스명', '클래스명', '클래스명']

2. 추가

-한개만 추가-

    요소.classList.add('클래스명')
    요소.classList+='클래스명'

-여러개 추가-

    요소.classList.add('클래스명', '클래스명',...)
    요소.classList+='클래스명 클래스명...'

3. 수정

    요소.classlist.replace("없앨 문자열", "삽입할 문자열")

4. 삭제

    요소.classlist.remove('클래스')
    요소.classList.remove('클래스', '클래스'.'클래스',...)
    요소.className = ""; // => (전부 다 삭제할 경우)

5. toggle

    요소.classList.toggle('클래스명');
    요소.classList.toggle('클래스명');

    해당 요소에 클래스가 있으면 삭제
    없으면 넣어줌

6. contain

    해당 요소에 클래스가 있는 지 확인
    있으면 true, 없으면 false

    요소.classList.contain('클래스명');
    출력 : true or false

• 키보드 각각의 키마다 가지고 있는 고유의 값 (정수)

HTML

    <input type="text" id="UID" onkeyup="로그인함수() " onmouseover="">
    <input type="text" id="UPW" onkeyup="로그인함수() ">
    <input type="button" value="로그인" onclick="로그인함수()">

script

    function 로그인함수() {
        console.log(event.keyCode);

        if(event.keyCode == 13 ||     event.keyCode==undefined) {
            let uid = document.getElementById('UID').value;
            let upw = document.getElementById('UPW').value;

            console.log("로그인중", uid, upw)
        }
    }

해설

  function 로그인함수 의 기능
    사용자가 keyCode 13 (enter) 를 입력하거나, || keyCode가 undefined 일 때,
    ID가 'UID' 와 'UPW' 인 value 값을 console 창에 출력한다. (아래와 같이)
    console.log("로그인중", uid, upw)
    출력 : 로그인중, uid, upw

• 특정 문자열에서 필요한 위치에 있는 문자(열)을 구한다.
• 특정 위치부터 잘라낼 수도 있다.
• 특정 문자를 다른 문자로 치환할 수 있다.
• 0번째부터 시작

[보기]
let string = "ABCDEFGHIJKLMNOPQRSTUVWXDYZ"
console.lot(string.length); // (해당 문자열의 개수 = 27)

1. 특정 문자의 인덱스번호 찾기

console.log("D 위치: " + string.indexOf("D")); 
출력 : D 위치 :  3 // 처음 나오는(?) "D" 의 위치 

console.log("D 위치: " + string.lastIndexOf("D"));
출력 : D 위치 : 24 // 마지막 "D" 의 위치 

2. 특정번호로 문자 찾기

console.log("3번쨰: " + string.charAt(3));
출력 : 3번째 : D 
해설  :해당 문자열의 3(인덱스번호) 위치에 있는 문자는 "D"

3-1. X번째부터 끝까지

console.log("3~:" + string.slice(3));
console.log("3~:" + string.substring(3));
console.log("3~:" + string.substr(3));

출력 공통 : DEFGHIJKLMNOPQRSTUVWXDYZ 

3-2. X번째부터 X번째까지

console.log("3~:" + string.slice(3,5));
출력 : DE 
해설 : 3번째부터 5 미만 번째

* slice 는 배열도 자를 수 있음
let arr = [1,2,3,4,5]
console.log(arr.slice(2,4)
출력 : 3,4 
해설 : 배열.slice(behin, end) 일 시, end 의 값은 잘라낼 배열에 포함되지 않는다. 



console.log("3~:" + string.substring(3,5));
출력 : DE 
해설 : 3번째부터 5 미만 번째

console.log("3~:" + string.substr(3,5));
출력 : DEFGH 
해설 : 3번째부터 5개

4. 특정 문자를 기준으로 문자열 자르기

• 문자 자른 후에 배열 방식으로 저장

  console.log(string.split("D"));
  출력:     0: "ABC"
        1: "EFGHIJKLMNOPQRSTUVWX"
        2: "YZ"
  해설 : ABC "D" EFGHIJKLMNOPQRSTUVWX "D" YZ
        "D" 를 기준으로 문자열을 자른 후에 배열 방식으로 저장한다.
         따라서 해당 배열의 length 는 3
  
  
  

console.log(string.split("D")[0]); 출력 : 0: "ABC"

console.log(string.split("D")[1]); 출력 : 1: "EFGHIJKLMNOPQRSTUVWX"

console.log(string.split("D")[2]); 출력 : 2: "YZ"

let tmp = string.split("D"); console.log(tmp); 출력 : ['ABC', 'EFGHIJKLMNOPQRSTUVWX', 'YZ']

<br>

#### 5. 문자열 바꾸기(치환) replace
```js
console.log(string);
출력 : ABCDEFGHIJKLMNOPQRSTUVWXDYZ

consloe.log(string.replace("D","가나다"));
출력 : ABC가나다EFGHIJKLMNOPQRSTUVWXDYZ
해설 : 처음 나오는(?) "D" 를 "가나다" 로 치환한다. 

consloe.log(string.replaceAll("D","가나다"));
출력 : ABC가나다EFGHIJKLMNOPQRSTUVWX가나다YZ
해설 : 모든 "D" 를 "가나다" 로 치환한다. 

6. 전체 문자열에서 특정문자(열) (있는 지 없는 지만) 찾기

• match - ("전체문자열").match("찾으려는 문자열")

let sp = ["android","iphone","ipad"];
let nu = navigator.userAgent;

document.write(nu)
출력 :  // Mozilla/5.0 (Windows NT 10.0; Win64; x64) 이하생략

document.write(nu.toLocaleLowerCase())
출력 : //mozilla/5.0 (windows nt 10.0; win64; x64) 이하생략
해설 : toLocaleLowerCase - 소문자로 전환


for(let i=0; i<sp.length; i++) {
     console.log(navigator.userAgent.toLocaleLowerCase().match(sp[i]))
        if(navigator.userAgent.toLocaleLowerCase().match(sp[i])) {
            console.log(i + ":"+ sp[i])
            location.replace("https://m.naver.com")
        }
    }

해설 : sp 라는 배열의 수 미만까지 i 를 1씩 더해가며 반복해라. i는 0 이므로 3번 (0,1,2) 반복할 것 
조건 : 배열[(sp) i 번째 방에 있는 데이터가 ' nu ' (navigator.userAgent) 안에 있는 지 없는 지 찾을 것 
출력 : null (없음)


console.log("여기: " + string.match("DE"))
출력 :  여기 DE
해설 : string 이라는 문자열 : ABC "DE" FGHIJKLMNOPQRSTUVWXDYZ 안에 "DE" 가 있음

• 익명함수로 만들기
• 함수에서 함수를 '콜' 한다.
• 함수를 부르는 곳에서는 선언적함수를 보낼 수 없어서 무조건 익명함수를 사용해야 한다.

let aa = function() {
  console.log("aa");
}

let bb = function() { 
  console.log("bb");
}

tmp("여기", aa, bb);

function tmp(txt, func_a, func_b){
  if(txt == "여기"){
    func_a(); // ★ 콜백
  }
  else{
    func_b(); // ★ 콜백
  }
}

• 결과값을 해당 함수를 부를 자리에 돌려보냄

function add(num1, num2){
  return(num1 + num2)
}

let name = prompt("이름");
let result = 100;

console.log(name + "님의 값은" + add(1,2) * result);

해설
return(num1 + num2); 에서 계산된 300 ((1+2)* 100) 을 함수를 부른 add(1,2)의 자리에 돌려보낸다.

• 같은 작업을 필요할 때마다 불러서 한번 사용 (값을 변경하면서 같은 작업을 한다 - 매개변수 이용)
• 같은 이름의 함수를 만들면 마지막 것만 동작한다. (같은 이름의 함수 안에 매개변수 개수가 다르더라도 상관없이 마지막에 선언된 함수만 동작하므로 유의할 것)

함수명 생성 규칙 (=변수명 생성 규칙과 동일)

1. 첫 번째 글자는 영문, $, _ 만 사용 가능하다.
2. 같은 이름의 함수가 있으면 안 된다.
3. 대소문자 구분 필수
4. 띄어쓰기 하지 말 것

함수 종류

1. 선언적 함수 : 함수명이 있는 함수

   function 함수명() {}

   function add(number, tt){
   console.log(number * tt)
   }
   

let num = 10; let tmp = 100;

add(num, tmp); 출력값 : 1000 ( 10 * 1000 )

<br>

2. 익명 함수 : 함수명이 없는 함수
```js
변수에 담아서 사용한다.
let 변수 = function() {}

변수(); <- 변수에 담은 이후에만 익명함수 사용이 가능하다.

let ff = function() {
  console.log("익명함수");
}
ff();
출력값 : "익명함수"

• 반복문 안에 반복문

let count = 1;
for(let i=0; i<3, i++){
  for(let j=0; j<3; j++){

    document.write(count++ +"-> i:"+i+", j:"+j+"<br>");
    document.write("------------<br>");

-출력-
    1-> i:0, j:0
    2-> i:0, j:1
    3-> i:0, j:2
    -------------
    4-> i:1, j:0
    5-> i:1, j:1
    6-> i:1, j:2
    -------------
    7-> i:2, j:0
    8-> i:2, j:1
    9-> i:2, j:2      

• 같은 작업을 같은 자리에서 반복하는 것 (loop)

반복문의 종류

for : 몇 바퀴 돌려야 할 지 알 때 주로 사용한다.

while : 몇 바퀴 돌려야 할 지 모를 때 주로 사용한다.

do while : 최소 한번은 돌릴 때 사용한다.

아래 while 문을 do while 문으로 바꿀 것

let i = 0;
while(i > 10){
  console.log(i)
}

let cal = 0;
let input = 0;

do{
  input = +prompt("숫자 입력");

  if(input += 0){
          cal += input;
    }
} while(input > 0)

  console.log(cal);

let tot = 0;
let chk = true;

while(chk == true){
  let num = +prompt("숫자 입력);    

    if(num > 0){
        tot += num;
      }
      else if(num == 0){
      chk = false;
      console.log(tot);
    }

• 같은 작업을 같은 자리에서 반복하는 것 (loop)

반복문의 종류

for : 몇 바퀴 돌려야 할 지 알 때 주로 사용한다.

while : 몇 바퀴 돌려야 할 지 모를 때 주로 사용한다.

do while : 최소 한번은 돌릴 때 사용한다.

while 문

• 초기, 조건, 증감이 분리되어 구성된다.

초기식;
while(조건식;){
    증감조건;
}


아래 for문을 while 문으로 바꿀 경우

for(let i =0; i < 10; i++){
      console.log(i);
}

let i = 0
while(i < 10){
  console.log(i);

  i++
}