스파르타 2일차

오늘 배운 내용들 요약과 잊을 것 같은 점들을 기록!

 

스파르타코딩클럽 웹개발 종합반-2주차

1. javascript

2. jaquery

3. ajax

 

-- JQuery를 import 합니다 --

<script src="URL">

 

jQuery는 라이브러리의 한 종류

잘하는 사람의 javascript 복붙해서 시간 단축 효율up이라는,,

코드를 가져오는건 임포트라 부른다

• 문법으로 jQuery는 $로 시작한다
• Element(요소)를 선택하기 쉽게 할 수 있다.
• 선택된 Element들을 효율적으로 제어할 수 있다.

css 연습할때 무언가를 지칭하기 위해서 class = 000 해 주었듯

jQuery에서는 id를 사용한다

id로 지칭하고 .val(), .show(), .hide() 등을 사용

(당연하게도 조작하려면 <000 - 000해줘> 라고 지칭 해 줘야 조작이 가능하다)

예) $('#post-box').hide();   ,   $('#post-box').show();

 

주의할점

backtick( ` )을 사용해야 문자 중간에 Javascript 변수를 삽입할 수 있습니다 ( ' ) 아님

 

json이란?

javascript에서 물건을 나타내는 표기이다

예) 00 : 000(ket : value) 같은 형식으로 나타내는것이다

 

ajax란?

새로고침 없이 서버에게 get요청하는 js코드이다

사전에서는 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다 라고,,, 합니다

ajax 외부 라이브러리 방식: $.ajax() 하나만 알자

$.ajax({
// GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
// POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

- 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);`
- 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");`

 

-외우지 않는 붙여넣기용 코드 모음-

• 빈칸 체크 함수 만들기 코드

function q1() {
    // 1. input-q1의 입력값을 가져온다.
    let value = $('#input-q1').val();
    // 2. 만약 입력값이 빈칸이면 if(입력값=='')
    if (value == '') {
        // 3. alert('입력하세요!') 띄우기
        alert('입력하세요!');
    } else {
        // 4. alert(입력값) 띄우기
        alert(value);
    }
}

• 이메일 판별 함수 만들기 코드

function q2() {
    // 1. input-q2 값을 가져온다.
    let email = $('#input-q2').val();
    // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
    if (email.includes('@')) {
        // 3. info@gmail.com -> gmail 만 추출해서
        // 4. alert(도메인 값);으로 띄우기
        let domainWithDot = email.split('@')[1];
        let onlyDomain = domainWithDot.split('.')[0];
        alert(onlyDomain);
    } else {
        // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
        alert('이메일이 아닙니다.');
    }
}

여기에서 사용된 includes란?

includes(" ") 괄호안에 무엇이 있는지 없는지 확인한다

있으면 true 없으면 false가 나온다

---

스파르타코딩클럽 웹개발 종합반-3주차

 

1. 파이썬 기초 문법을 안다.
2. 원하는 페이지를 크롤링 할 수 있다.
3. pymongo를 통해 mongoDB를 제어할 수 있다.

 

python

파이썬은 5가지의 문법이 있다

 

 -변수&기본연산

a = 3      # 3을 a에 넣는다
b = a      # a를 b에 넣는다
a = a + 1  # a+1을 다시 a에 넣는다

 -자료형

name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
num = 12 # 숫자가 들어갈 수도 있고,

a_list = []
a_list.append(1)     # 리스트에 값을 넣는다
a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

 -함수

# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7

# 참고: 자바스크립트에서는
function f(x) {
return 2*x+3
}

# 파이썬에서
def f(x):
return 2*x+3

 -조건문

if / else로 구성된다

 -반복문

파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태입니다.

즉, 무조건 리스트와 함께 쓰입니다!

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

count = 0
for fruit in fruits:
if fruit == '사과':
count += 1

print(count)


# 사과의 갯수를 세어 보여줍니다.

 

 

 

-외우지 않는 붙여넣기용 코드 모음-

pymongo

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

• 크롤링

크롤링 하는 방법은 아직은 잘 모르겠다 다음번에 더 찾아보자

 

• pymongo

4가지의 기능만 알면된다 저장하고, 찾고, 바꾸고, 지우기

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

---

기타 메모장

1. list와 tuple모두 여러 데이터를 담을 수 있는 컨테이너형 변수이다.

my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
my_tuple = (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)