본문 바로가기

공부매니아

[스파르타 코딩 클럽] 2주차 복습 및 과제 기록



※복습 노트

* 조건문

function 어쩌구( ) {

     if (판별식) {

         판별식 조건에 부합할 때의 결과 

      } else {

         나머지 경우의 결과

     } 


반복문

for (시작조건, 반복조건, 반복 후 할 일) {

반복마다 실행될 명령어



&& >> and 

|| >> or 

i++ >> 실행 후 i를 +1한다. (i = i+1)

리스트이름.length >> 리스트의 길이



*jQuery

- 공식 사이트 https://jquery.com/

- jQuery Import

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

- id 값을 통해 특정 버튼, 박스 등을 가르킴 

 $('#id').hide(); 

 $('#id').show(); 

 $('#id').css('display'); >> hide일 때 출력 값  none, show일 때 출력 값 block


 $('#id').val(); >> value 가져오기

 $('#id').text();  >> text 바꾸기

 $('#id').empty();

 $('#id').append(); >> 추가

 $(document).ready(function () {

            $('#id').empty();

        }); >> 웹 페이지 새로고침할 때마다 괄호 안 명령어 실행



JSON

-데이터 표현 방식

- Key:Value로 이루어져있음



{Dictionary 형 Value}

   [List 형 Value]



Client는 Server의 API에 Request하여 Data(HTML, CSS, JS 등)를 Response 받음

  - Request 방식 

  - Get > 데이터 조회(Read)를 요청할 때

  - ? : 여기서부터 전달할 데이터가 작성된다

    & : 전달할 데이터가 더 있다


Ajax

- 비동기 서버 통신 방식

- 비동기 = 동작이 일어날 때 전체 페이지가 아닌 일부분만 업데이트 가능

- 서버 통신 = 요청-응답

>>  Ajax 작업 1) 웹페이지 새로고침 없이 서버에 요청, 2) 서버로부터 데이터를 받고 작업 수행


무료 API 모음

https://github.com/public-apis/public-apis



※과제 기록


1) Alert 만들기

- <script></script> 사이

- input 항목의 id 찾아오기 $('#id')

- value 불러오기 .val();

- 빈칸 (' ') 일 때 alert('어쩌구') 넣기

 function order() {

    let newName = $('#order-name').val();
let newCount = $('#order-count').val();
let newAddress = $('#order-address').val();
let newPhone = $('#order-phone').val();
if (newName == '') {
alert('이름을 입력해주세요');
};
if (newCount == '') {
alert('주문수량을 입력해주세요');
};
if (newAddress == '') {
alert('주소를 입력해주세요');
};
if (newPhone == '') {
alert('연락처를 입력해주세요');
};
}


2) 환율 정보 넣기

<script></script> 사이

let ready = $(document).ready(function() {

    $('#exchange-info').empty();
$.ajax({
type: "GET",
url: "https://api.manana.kr/exchange/rate.json",
data: {},
success: function (response) {
let usdExchange = response[1]["rate"];
$('#exchange-info').append("환율= $", usdExchange);
}
})
})

<body></body> 사이

</div>
<div id="exchange-info" class="info">

</div>