[내일배움캠프] AI트랙 - 1주차 웹프로그래밍_5_Javascript 기초

☞ [내일배움캠프] AI트랙 - 1주차 웹프로그래밍_5

---

[1주차 수업 목표]

1. 서버와 클라이언트의 역할 이해.

2. HTML, CSS의 기초 지식의 이해, 부트스트랩 사용할 줄 알아버리기.

3. Javascript 기초 문법을 익힌다.

---

1. Javascript 란?

- 모~든 인터넷이 약속해 놓은 것. 표준 언어이다!

 

• 함수 만들기

# 함수 만들기
    <script>			
        function hey(){		# 함수 선언 hey()
            alert('안녕!');	# (안녕!) 을 호출한다!
        }
    </script>

# 함수 적용
<button onclick="hey()">영화 기록하기</button>	# 영화 기록하기 버튼을 클릭(onclick)을 하면 hey()를 호출해라!

 

---

2. 변수/ 자료형/ 함수/ 조건문/ 반복문

 1) 변수 선언 : "오른쪽에 있는 것을 왼쪽에 넣는 것!"

# let으로 변수를 선언한다.
let a = 2
let b = 3

 2) 자료를 담는 방법 : 리스트 & 딕셔너리

- 리스트

# 리스트 선언
let a_list = []
let b_list = [1, 2, 'hey', 3]

# 리스트 추가
a_list.push('감')
b_list.pusg('르타')

# 리스트 출력
a_list	# [감]
b_list	# [1, 2, 'hey', 3, '르타']

# 리스트 길이 구하기
a_list.length	# 1
b_list.length	# 5

- 딕셔너리

# 딕셔너리 선언
let a_dict = {'name':'bob', 'age':27}

# 딕셔너리 출력
a_dict		# {'name':'bob', 'age':27}
a_dict['name']	# 'bob
a_dict['age']	# 27

# 딕셔너리에 키:밸류 추가하기
a_dict['height'] = 180

# 딕셔너리 출력
a_dict		# {'name':'bob', 'age':27, 'height':180}

---

3) 함수

- 정해진 동작을 하는 것!

# 기본 생김새
    <script>
        function sum(a, b){	
            alert(a+b)		# 정해진 동작!
        }
    </script>

- 함수 확인해 보는 방법

1) 실제로 코드를 실행시키기
2) console.log() 를 활용해서 콘솔창에서 확인.
    <script>
        function sum(a, b){
            console.log("계산을 하자")		# 계산을하자
            return a+b
        }
        let result = sum(3, 5)	
        console.log(result)			# 8
    </script>

---

4) 조건문

- if 문

    <script>
        function is_adult(age){			# is_adult 함수 선언 (age)를 변수로 받는다.
            if (age > 20){			# 만약 age 가 20 보다 크다면
                alert("성인입니다.")		# 성인입니다 알림창
                } else {			# 그 외에는
                alert("청소년입니다.")		# 청소년입니다 알림창
            }
        }
    </script>

5) 반복문

# 반복문 구조 : for (let 시작조건; 반복조건; 더하기) {매번 실행할 코드}
<script>
    let a_list = ['사과','배','감','딸기']
    for (let i = 0; i < a_list.length; i++) {	# 조건
    	console.log(a_list[i])		
    }
</script>

# i가 0부터 a_list의 길이만큼(4) i가 하나씩 높아지면서 돈다

---

# 조건문 & 반복문

<script>
    let scores = [
        {'name': '철수', 'score': 90},
        {'name': '영희', 'score': 85},
        {'name': '민수', 'score': 70},
        {'name': '형준', 'score': 50},
        {'name': '기남', 'score': 68},
        {'name': '동희', 'score': 30},
    ]
    for (let i = 0; i < scores.length; i++) {
        if (scores[i]['score'] > 70) {
            console.log(scores[i]['name'])
        }
    }
</script>

# 철수
# 영희