그저 내가 되었고

항해99) 웹종 1주차 Javascript 본문

개발/항해99 9기

항해99) 웹종 1주차 Javascript

hyuunii 2022. 9. 4. 19:27

* Javascript 맛보기

1) 자바스크립트란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

💡 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다!

💡 잠깐 상식! Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요? A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.

 

2) 자바스크립트 - HTML 연결

: 버튼을 클릭하면 경고창이 뜨게 해보자!

(1) 버튼에 함수 만들어 붙여두기

function hey(){
	alert('안녕!');
}

(2) <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 그 안에 작성

(3) 버튼에 함수를 연결하기. 버튼을 누르면 함수 콜링됨.

<button onclick="hey()">영화 기록하기</button>

* Javascript 기초 문법

1) 자바스크립트란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

💡 계속 새로고침 하면서 옮겨 다니면 불편하니까, 크롬 웹페이지에서 우클릭>검사 누르고 Console에 작업해보면 됨. 여기서 작업해보는게 파이참에서 <script>창에 쳐보는거랑 똑같아!!(새로고침하면 전부 사라짐.)

 

(1) 변수(값을 담는 것) & 기본 연산

변수 선언👇🏻

let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스. 한 번 선언했으면, 다시 선언하지 않고 값 넣는다

//변수 명은?
let first_name = 'bob' // snake case
let firstName = 'bob' // camel case
회사마다 규칙이 있음. 여튼 쉽게 알아볼 수 있게 쓰는 게 중요.
다른 특수문자 또는 띄워쓰기는 불가능.

사칙연산, 문자열 더하기 기본적으로 가능👇🏻

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

 

(2) 자료형(이 자료가 숫자냐, 문자냐): 파이썬, 자바랑 문법이 비슷하네.. 당연한건가?

✔리스트: 순서를 지켜서 가지고 있는 형태

let a_list = ['수박', '참외', '배']이고

let b_list = ['미미', '나나']일 때

☞ a_list.push(b_list) 하면 바로 5 나오고(a_list에 b_list를 추가한다는 뜻)

☞ a_list 치면 (5) ['수박', '참외', '배', Array(2)] 뜸

☞ 이 때, a_lis[4][0] 하면 '미미'임~!

 

✔딕셔너리: 키(key)-밸류(value) 값의 묶음

let a_dict = {'name' : 'bob', 'age' : 27}

↳딕셔너리 안의 각각 개체는 key:value라고 부름

☞a_dict['name'] 치면 'bob'

☞a_dict['height'] = 180 이렇게 딕셔너리에 추가도 할 수 있음!

☞a_dict 치면 {'name' : 'bob', age : 27, height : 180} 뜬당

 

💡 리스트 & 딕셔너리 둘의 쓰임은? 순서를 표시할 수 있고, 정보를 묶을 수 있음

e.g.) 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 했음. 변수만 쓰면 아래와 같음.

let customer_1_name = '김스파';

let customer_1_phone = '010-1234-1234';

let customer_2_name = '박르탄';

et customer_2_phone = '010-4321-4321'; ...(알아보기 힘듭니다.)

👉🏻딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.

let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};

let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

👉🏻그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.

let customer = [ {'name': '김스파', 'phone': '010-1234-1234'}, {'name': '박르탄', 'phone': '010-4321-4321'} ]

✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 push 함수를 이용해 간단하게 대응 가능(e.g. a_list.push('감'))

 

(3) 함수(정해준것을 하는 것 -e.g.hey())

: 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재하며 직접 만들수도 있음.

특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

 

 

(4) 조건문(if(), else()..)

e.g.) 20 보다 작으면 작다고, 크면 크다고 알려주는 함수

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

 

(5) 반복문(이 코드 계속 반복해) 얘는 좀 놀아본 애. 누구랑? 딕셔너리 품은 리스트랑.

​예컨대 0부터 99까지 출력이 필요. 이거를

console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)

// 이렇게 쓰기엔 무리가 있겠죠? 그래서, 반복문이라는 것이 존재합니다!

​반복문을 이용하면 아래와 같이 단 세줄로, 출력 가능

for (let i = 0; i < 100; i++ {
	console.log(i);
}

​그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인당👇🏻

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
	console.log(people[i])
}

​리스트도 그냥 리스트 ㄴㄴ!! 딕셔너리가 들어간 리스트와 찰떡👇🏻

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++) {
	console.log(scores[i]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
	  console.log(scores[i]['name']);
	}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

 

'개발 > 항해99 9기' 카테고리의 다른 글

항해99) 웹종 3주차 웹스크랩핑(크롤링)  (0) 2022.09.05
항해99) 웹종 3주차 Python  (0) 2022.09.05
항해99) 웹종 2주차 jQuery+Javascript 연습 & jQuery+Ajax 연습  (0) 2022.09.05
항해99) 웹종 2주차 jQuery  (0) 2022.09.04
항해99) 웹종 1주차 HTML&CSS&부트스트랩  (0) 2022.09.04
'개발/항해99 9기' Related Articles more