[항해99]00사전준비/2주차

JavaScript심화 차수다.

 

1. 변수를 함수 안에 넣으면 함수가 끝나면서 자동으로 사라짐. 

<script>     function hey(){         let count = 1;         if (count % 2 == 0){         alert('짝수입니다!')         } else {         alert('홀수입니다!')         }         count += 1;     } </script>

따라서 아래와 같이 함수 밖에 위치해야 함.

<script>     let count = 1;     function hey(){         if (count % 2 == 0){         alert('짝수입니다!')         } else {         alert('홀수입니다!')         }         count += 1;     } </script>

 

2. JQuery

미리 작성된 Javascript 코드로 쓰기 전에 import 해야함.

남이 작성해 놓은 CSS를 Bootstrap으로 가져오듯이,

남이 작성해 놓은 Javascript를 JQuery로 가져와서 씀!

*자주쓰는 JQuery

1. input박스 값 가져오기 $('#post-url').val(); 2. div보이기 및 숨기기 $('#post-box').hide(); $('#post-box').show(); 3. css값 가져오기 $('#post-box').css('display'); 4. 태그 내 텍스트 입력 $('#btn-posting-box').text('포스팅 박스 닫기'); 5. 태그 내 html 입력 let temp_html = '<button>나는 추가될 버튼이다!</button>'; $('#cards-box').append(temp_html);

 

3.ajax

key, value값으로 이루어진 JSON을 통해 데이터 가져오기.

*ajax 코드

$.ajax({     type: "GET", // GET 방식으로 요청한다.     url: "",     data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)     success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음                    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성            } })

※ ajax는 jQuery를 임포트한 페이지에서만 작동!

 

*하나 더

jQuery의 이미지태그 src를 바꾸고자 할때는

$("#img-cat").attr('src', imgurl);

바꾸고자 하는 이미지 아이디를 적어주고

$("#img-cat").attr('src', imgurl);

.attr('src', 바꿀url) 작성