※복습 노트

* 조건문

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> 


반응형


※스파르타 코딩 클럽 과제 기록


1. 폰트 변경


<link href="https://fonts.googleapis.com/css2?family=Cute+Font&display=swap" rel="stylesheet">


<style type="text/css">
* {
font-family: 'Cute Font', cursive;
}

   

   1) 사이트 접속 https://fonts.google.com/

   2) language(Korean) 선택 

   3) 폰트 선택 (Select this style)

   4) 오른쪽 Selected Family의 Embed탭 클릭

   5) link와 css rules 복사하여 head에서 변경


2. 이미지 변경


.img {

background-image: url('https://kkoma.net/web/product/big/201905/4aa48d0ebab9f50f9e3b47fb7b8af386.jpg');
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
padding-top: 500px;
margin-top: 30px;
}


1) 구글에서 cloud 검색 

2) 이미지 주소 복사

3) head>style>.image의 url 주소 변경

4) 이미지가 천장에 붙길래 padding-top: 500px; 추가

  내부 여백이여서 내가 원하는 사진 위로 여백은 안생겼지만 잘렸던 사진이 더 켜지길래 적용함 ㅋ

5) margin: 30px 추가

  margin: 30px도 가능하나 사방으로 붕뜨는 느낌. margin-top: 30px 적용

*margin과 padding 설명 잘되어있는 블로그: https://blog.naver.com/jm3ds/221619894995



3. 선택 가능 수량 변경


<select class="custom-select" id="order-count">

    <option selected value=""> -- 수량을 선택하세요 --</option>

    <option value="1">1</option>

    <option value="2">2</option>

    <option value="3">3</option>

    <option value="4">4</option>

    <option value="5">5</option>

</select>


input form 바꿔보려다가 안되서 쉬운 것 그냥 추가

1) <option value="1">1</option> 복사해서 숫자만 바꿔서 추 




반응형

+ Recent posts