※복습 노트


* 파이썬 공식 스타일 가이드 


  - https://www.python.org/dev/peps/pep-0008/


  - https://docs.python.org/ko/3/tutorial/controlflow.html#intermezzo-coding-style



* List와 Dictionary


a_list = [ ] #비어있는 리스트 만들기

a_list.append() #리스트에 값을 넣는다


a_dict = { }



* 파이썬 명령어

def 함수이름 (필요한 변수들) :

   내릴 명령어들을 순차적으로 작성

#사용하기

함수이름(필요한 변수들  



* 파이썬 조건문

 def is_even(num): # is_even는 num을 변수로 받는 함수 이름 

      if num % 2 == 0: # num을 2로 나눈 나머지가 0이면 

           return True # True (참)을 반환한다. 

      else: # 아니면, 

           return False # False (거짓)을 반환한다.

 #html 조건문

 function is_even(num){

    if (num % 2 == 0) {

       return true; 

    } else {

       return false; 

    }

 } 



* 파이썬 반복문


 fruits = ['사과', '배', '참외'] 

 for fruit in fruits# fruit는 임의로 지은 이름 

      print (fruit)

 #html 반복문

 let fruits = ['사과','배','참외']

 for (let i=0; i<fruits.length; i++) {

      console.log(fruits[i])

 }



* 파이썬 조건문 & 반복문으로 숫자 세기


 fruits = ['사과', '배', '배', '감', '수박', '귤', '딸기', '사과', '배', '수박'] 

 def count_fruits(name): 

 count = 0 

 for fruit in fruits:

 if fruit == name: 

      count += 1 

 return count 


 subak_count = count_fruits('수박') 

 print(subak_count) # 수박의 갯수 출력

 #html 조건문 & 반복문으로 숫자 세기

 let fruits = ['사과', '배', '배', '감', '수박', '귤', '딸기', '사과', '배', '수박'] 

 

 let count =0;

 for (let i=0; i<fruits.length; i++) {

    let fruit == fruits[i];

    if (fruit =='수박'){

       count +=1;

    }

 }

 



* 웹스크래핑

  - 패키지 설치 : beautifulsoup4 HTML 코드를 쉽게 스크래핑 해오기 위한 도구

  - 태그 안의 텍스트를 찍고 싶을 땐 → 태그.text

    태그 안의 속성을 찍고 싶을 땐 → 태그['속성']



import requests
from bs4 import BeautifulSoup

headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://sports.news.naver.com/kbaseball/record/index.nhn?category=kbo', headers=headers)

# HTML BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.


soup = BeautifulSoup(data.text, 'html.parser') 


*크롤링한 내용에서 공백 없애기 .text.strip()


반응형



※복습 노트

* 조건문

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