JQuery 다뤄보기

input 박스의 값을 가져오는 방법

<div class="form-floating mb-3">
    <input id="url" type="email" class="form-control" placeholder="name@example.com">
    <label>영화URL</label>
</div>

input의 id를 $('#url')이렇게 하고 뒤에다가 .val()를 붙여서 값을 가져옵니다.

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

이렇게 적고 콘솔창에다가 입력하면 input 박스의 값이 나옵니다.

input 박스에다가 값을 입력하고 싶다면

$('#url').val('여기다가 값을 입력하면');

이렇게 입력하면 input 박스에 입력한 값이 뜹니다.

div 보이기 / 숨기기

<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

이번에는 id 값이 post-box를 사라지게 해보고, 다시 보이게 해보겠습니다.
$('#post-box')이렇게 아이디 값을 넣어주고 뒤에다가 .hide();를 붙여주면

$('#post-box').hide() => post-box가 사라지는 현상을 보 수 있습니다.
hide = 숨기기

똑같은 방식으로 뒤에다가 .show()로 바꿔준다면
$('#post-box').show() 다시 보이게 바뀌게 됩니다.

파이썬 기초공부

파이썬 기초 문법 자료들을 좀 정리해보고 이해하는 글입니다

파이썬 기초 문법

변수 & 기본연산

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

num1 = ab # ab의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다

자료형

숫자, 문자형

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

is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.

리스트 형 (Javascript의 배열형과 동일)

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

a_list의 값은? [1,[2,3]]
a_list[0]의 값은? 1
a_list[1]의 값은? [2,3]
a_list[1][0]의 값은? 2

Dictionary 형 (Javascript의 dictionary형과 동일)

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

a_dict의 값은? {'name':'bob','age':21, 'height':178}
a_dict['name']의 값은? 'bob'
a_dict['age']의 값은? 21
a_dict['height']의 값은? 178

Dictionary 형과 List형의 조합

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

people[0]['name']의 값은? 'bob'
people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
people[2]['name']의 값은? 'john'

함수

함수의 정의 - 이름은 마음대로 정할 수 있음!

수학문제에서

f(x) = 2*x+3
y = f(2)
y의 값은? 7

참고: 자바스크립트에서는

function f(x) {
return 2*x+3
}

파이썬에서

def f(x):
return 2*x+3

y = f(2)
y의 값은? 7

함수의 응용

def sum_all(a,b,c):
return a+b+c

def mul(a,b):
return a*b

result = sum_all(1,2,3) + mul(10,10)

result라는 변수의 값은?

조건문

if / else 로 구성!
def oddeven(num): # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
return True # True (참)을 반환한다.
else: # 아니면,
return False # False (거짓)을 반환한다.

result = oddeven(20)

result의 값은 무엇일까요?

def is_adult(age):
if age > 20:
print('성인입니다') # 조건이 참이면 성인입니다를 출력
else:
print('청소년이에요') # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)

반복문

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

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

fruits = ['사과','배','감','귤']

for fruit in fruits:
	print(fruit)

# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

과일 갯수 세기 함수

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

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

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

print(count)

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

def count_fruits(target):
	count = 0
	for fruit in fruits:
		if fruit == target:
			count += 1
	return count

subak_count = count_fruits('수박')
print(subak_count) #수박의 갯수

gam_count = count_fruits('감')
print(gam_count) #감의 갯수

다른 예제를 살펴봅시다.

people = [{'name': 'bob', 'age': 20}, 
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]

people = [{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27}]

모든 사람의 이름과 나이를 출력해봅시다.

for person in people:
print(person['name'], person['age'])

이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.

이름을 받으면, age를 리턴해주는 함수

def get_age(myname):
for person in people:
if person['name'] == myname:
return person['age']
return '해당하는 이름이 없습니다'

print(get_age('bob'))
print(get_age('kay'))

jQuery문제 답 해석하기!

강의 중 jQuery문제를 내주셨는데, 문제를 풀고 정답을 맞춘 코드를 히한번 더 이해하기 위해서 해설을 해보겠습니다.
문제(답은 적용된 상태)
http://spartacodingclub.shop/ajaxquiz/00_0

문제 1번 답

        function q1() {     
            let txt = $('#input-q1').val() 
            if (txt == '') {
                alert('빈칸입니다')
            } else {
                alert(txt)
            }
        }

해설

let txt = $('#input-q1').val() #input-q1를 가져오는 txt라는 변수를 만듬

if (txt == '') 만약 txt 가 빈칸이라면

alert('빈칸입니다') 알림창으로 '빈칸입니다'라고 뜸

else 아니라면

alert(txt) #input-q1를 가져와서 input에 있는 내용을 알림창으로 출력

문제 2번 답

   function q2() {
            let txt = $('#input-q2').val()
            if (txt.includes('@') == true) {
                alert(txt.split('@')[1].split('.')[0])
            } else {
                alert('이메일이 아닙니다')
            }
 }           

해설

let txt = $('#input-q2').val() #input-q2를 가져오는 txt라는 변수를 만듬

if (txt.includes('@') == true) 만약 txt에 @가 있는게 진짜라면

alert(txt.split('@')[1].split('.')[0]) txt에 적힌 이메일의 .왼쪽 부분을 알림창에 출력

else 아니라면

alert('이메일이 아닙니다') 알림창에 '이메일이 아닙니다'라고 출력

문제 3번 답

function q3() {
            let txt = $('#input-q3').val()
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
}  

해설

let txt = $('#input-q3').val() #input-q3를 가져오는 txt라는 변수를 만듬

let temp_html = <li>${txt}</li> = <li>${txt}</li>라는 변수를 만듬

$('#names-q3').append(temp_html) '#names-q3'에 temp_html 변수를 붙임

후기

오늘 공부한 내용들은 좀 이해하기 힘든부분들도 많았던거 같아서 진도를 많이 나가지는 못했지만
그래도 이렇게 정리를 하면서 정확히 이해하고 넘어갈 수 있어서 좋았습니다.
한번 공부하고 복습하는게 도움이 큰거같아요.
오늘은 2일차!.. 내일은 미니프로젝트 시작하는 날입니다.
잘 할수있을까 긴장되지만 힘내봐야겠어요!