공부기록! > 틀린게 있다면 둥글게 알려주세요! :)
설레는 주말! 오늘도 공부 화이팅!!
[javascript 기초]
[우리 자바 스크립트는요.]
javascript는 브라우저 기본 언어이다.
html이 뼈대, CSS가 꾸미기, javascript가 모션!
모든 브라우저는 요 위의 3 세트가 기본구성이다.
다른 언어로 개발하는 것도 가능은 하지만,
역사적인 이유와 표준화된 세트 이기 때문!
{JAVA vs javascript}
잠깐, JAVA랑 javascript랑 뭐가 달라?
이름만 비슷하고 완전 달라~ (만든 회사와 유래부터가 다름!)
'맛'과 '맛동산'
'바다'와 '바다코끼리'
같은 관계!
{콘솔창으로 javascript 테스트하면 개꿀!}
매번 코딩하고 페이지 새로고침해서 확인 = 매우 귀찮음
그래서 개발자들을 위해 만들어진 도구, 콘솔창!
페이지에서 콘솔창을 열어 자바스크립트를 쓰고
바로 바로 테스트해볼 수 있다.
검사창을 열어서 위의 console 탭을 누르면 나온다.
(Tip)
새로고침하면.. 리셋됨!
clear console 하면 값은 그대로 유지된 상태로 지워줌
[프로그래밍 언어에서 기억할 5가지!]
- 변수
- 자료형
- 함수 : f(x)
- 조건문 : if~ else~
- 반복문 : for~
[변수]
하나 하나 값을 입력해주는 변수
- 기본연산 / 문자열 더하기 등
let a = 2 let b = 3 a+b // 5 . let first_name = '코딩' let last_name = '김' first_name+last_name // '김코딩'해석)
a = 2 / b = 3 / a+b = 5
이름 = '코딩' / 성 = '김' / 성+이름 = '김코딩'
[자료형]
근데 값이 10개, 100개, 1000개라면?
하나 하나 언제 입력해!
그럴 때는 데이터를 한번에 모아서 정렬하는 자료형 사용함.
자료 담는 방법은 2가지! '리스트'와 '딕셔너리'!
- 리스트 (순서가 중요)
let a_list = ['너' , '나' , '우리'] a_list[0] // '너' a_list[1] // '나' a_list[2] // '우리'해석)
a_list = ['너' , '나' , '우리']
a_list 열의 [0] 번째 = '너'
a_list 열의 [1] 번째 = '나'
a_list 열의 [2] 번째 = '우리'
- 딕셔너리 (key-value 묶음 사용)
let a_dict = {'name':'다은','age':30} a_dict['name'] // '다은'해석)
key : value = name : 다은
key : value = age : 30
.
a_dict = {'name' : '다은' , 'age' : 30 } 이다.
a_dict 에서 ['name'] 값은 = '다은'
a_dict 에서 ['age'] 값은 = '30'
[함수]
쉽게 말해 계산식
미리 정의 해놓은 수식 안에 값이 입출력 된다.
- 자바스크립트의 자체 함수 예시
쪼개기
let myemail = 'cording@gamil.com' myemail.split('@') // (2) ['cording', 'gamil.com'] myemail.split('@')[1] // 'gamil.com' myemail.split('@')[1].split('.') // (2) ['gamil', 'com'] myemail.split('@')[1].split('.')[1] // 'com'
알림창
<script> function sum(a,b) { alert('계산을 하자') return a+b } let result = sum(2,3) alert(result) </script>해석)
sum(a,b)는
1. '계산을 하자' 를 알림 띄우고
2. a+b 값을 알림 띄우는 계산식이다.
.
result 는 sum(2,3)이다.
.
result 를 알림으로 출력해라.
1. '계산을 하자' 알림이 먼저 뜨고
2. '5' 알림이 뜸.
(Tip)
alert 는 console.log로 대체 가능하다.
console.log 는 콘솔창에 결과값을 띄워주는 것
이걸 왜 쓸까? > 매번 알림창으로 값을 확인하기 불편하니까!
[조건문]
특정한 조건에 따라 결과가 출력되는 계산식
- if else 조건문 (만약 ~라면 a, 아니라면 b, 그것도 아니라면 c)
<script> function is_adult(age) { if (age>20) { alert('성인입니다') }else { alert('청소년입니다') } } </script>해석)
is_adult(age)는
1. (age)에 들어가는 숫자가 20보다 크면, '성인입니다'를 출력하고
2. 그렇지 않은 경우에는, '청소년입니다'를 출력하는 계산식이다.
[반복문]
말그대로 결과를 반복해 출력하는 계산식
for 반복문
- 90% : list와 같이 쓰이는 반복문
<script> let a_list = ['사과', '배','감','딸기'] for (let i = 0; i < a_list.length; i++) { console.log(a_list[i]) } </script>해석)
a_list = ['사과' , '배' , '감' , '딸기']
.
i = 0 으로 시작해서,
i 가 a.list의 길이 (3) 보다 작으면
a_list 에서 i 번째에 해당하는 결과값을 출력하고
i 숫자를 1 증가해 다시 위의 순서를 반복한다.
.
'사과'
'배'
'감'
'딸기'
가 콘솔창에 쭉 출력된다.
- 10% : list+ if 조건문과 같이 쓰이는 반복문
<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>해석)
scores = [
{'name': '철수', 'score': 90},
{'name': '영희', 'score': 85},
{'name': '민수', 'score': 70},
{'name': '형준', 'score': 50},
{'name': '기남', 'score': 68},
{'name': '동희', 'score': 30}]
.
i = 0 으로 시작해서,
i 가 scores의 길이 (5) 보다 작으면
다음의 조건문을 처리한 이후에
i 숫자를 1 증가해 다시 위의 순서를 반복한다.
조건문)
scores 에서 i 번째에 해당하는 결과값의 'score'의 밸류값이
70보다 크면 'name'의 밸류값을 출력한다.
.
'철수'
'영희'
가 콘솔창에 출력된다.
[오늘의 단축키]
[웹에서 검사 페이지 열기]
option + command + i
F12
'마우스 오른쪽 클릭 - 검사 누르기' 도 가능!
[콘솔창에서 바로 윗코드 복사]
방향키 ^
[웹사이트에서 키워드 찾기]
command + F
