내일배움캠프 2일차_개발일지(2주차-1)

오늘은 8시 50분에 일어나 팀원들과 화상채팅을 켜고 공부를 시작했다.

아침부터 얼굴을 보이려니 살짝 민망쓰...;

그래도 다들 열심히 하셔서 서로 얼굴 볼 새가 없었던 것 같다.

아무튼 2일차 화이텡!

---

홀수, 짝수 카운팅하기

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

• 함수 밖에 count = 1을 하는 이유는 +1을 해주고 나서 다시 let count = 1; 이 되므로 계속 홀수가 나오기 때문이다.
• += -> count = count + 1

 

임포트!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

• 부트스트랩, jQuery 임포트 후 사용(head 안에 아무데나)->부트스트랩 사용시 jQuery 임포트 되어있음!

 

jQuery

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

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

$('#id').css('width')
$('#id').css('width','700px')

$('#id').text('랄라')

• id 값을 주어야 사용할 수 있다.
• val()<-괄호 안에 '?'값을 넣으면 해당 값으로 바뀐다.(명령어)

jQuery + Javascript

function q2() {
            let email = $('#input-q2').val();

            if (email.includes('@')) {
                let domain = email.split('@')[1].split('.')[0]
                alert(domain)
            } else {
                alert('이메일이 아닙니다')
            }

• id를 부를 때 '#' 붙이기(맨날 까먹고 왜 안되나 그러고 있음...)
• .includes('@')->괄호안에 해당문자를 포함여부를 알 수 있다. 

GET

• GET → 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회

• GET 방식으로 데이터를 전달하는 방법
  
  ? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
  & : 전달할 데이터가 더 있다는 뜻입니다.
  
  예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
  
  위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
  
  q=아이폰 (검색어)
  sourceid=chrome (브라우저 정보)
  ie=UTF-8 (인코딩 정보)

 

POST

* POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

예) 회원가입, 회원탈퇴, 비밀번호 수정

 

Ajax

** Ajax는 jQuery를 임포트한 페이지에서만 작동한다!!

ajax 기본 골격
$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response['RealtimeCityAir']['row']
    for (let i = 0; i < rows.length; i++) {
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']
    	if (gu_mise < 50) {
        console.log(gu_name,gu_mise)
       }
     }
   }
)}

function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thedogapi.com/v1/images/search",
          data: {},
          success: function (response) {
            let dogimage = response[0]['url']
            $("#img-dog").attr("src", dogimage)
          }
        })
      }

• .attr("src", dogimage)->이미지 바꾸는 코드

$(document).ready(function () {
            rate()
        });

• 로딩 되자마자 작동하는 코드-> rate() 자리에 함수를 넣는다.

 

 

이어서 : https://ssoppeustory.tistory.com/8