웹개발 종합반 1주차_4일

1. 자바스크립트란?

• 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어
• (표준) 모든 인터넷이 자바스크립트만 쓰자고 약속함🤝

2. 자바스크립트 기초 문법 배우기

• 인터넷 화면에서 "마우스 오른쪽 클릭-검사-console"
• 크롬 개발자도구 콘솔창은 어떤 의미? 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구. 새로고침하면 모두 사라짐
• 맥 단축키 : alt(option)+command+i

❗️프로그래밍 언어를 배울 때는 5가지를 꼭 기억하자!

• 변수, 자료형, 함수, 조건문, 반복문
• 변수 대입(a=2)의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것"
• 리스트: 순서를 지켜서 가지고 있는 형태

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

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

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

❗️리스트와 딕셔너리의 조합

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

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

new_name = {'name':'john','age':7}
names.push(new_name)

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

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

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 -> 간단하게 쓸 수도 있다!