공부기록! > 틀린게 있다면 둥글게 알려주세요! :)
설레는 주말! 오늘도 공부 화이팅!!

[javascript 기초]

[우리 자바 스크립트는요.]

javascript는 브라우저 기본 언어이다.
html이 뼈대, CSS가 꾸미기, javascript가 모션!
모든 브라우저는 요 위의 3 세트가 기본구성이다.
다른 언어로 개발하는 것도 가능은 하지만,
역사적인 이유와 표준화된 세트 이기 때문!

{JAVA vs javascript}
잠깐, JAVA랑 javascript랑 뭐가 달라?
이름만 비슷하고 완전 달라~ (만든 회사와 유래부터가 다름!)
'맛'과 '맛동산'
'바다'와 '바다코끼리'
같은 관계!

{콘솔창으로 javascript 테스트하면 개꿀!}
매번 코딩하고 페이지 새로고침해서 확인 = 매우 귀찮음
그래서 개발자들을 위해 만들어진 도구, 콘솔창!
페이지에서 콘솔창을 열어 자바스크립트를 쓰고
바로 바로 테스트해볼 수 있다.
검사창을 열어서 위의 console 탭을 누르면 나온다.

(Tip)
새로고침하면.. 리셋됨!
clear console 하면 값은 그대로 유지된 상태로 지워줌

[프로그래밍 언어에서 기억할 5가지!]

1. 변수
2. 자료형
3. 함수 : f(x)
4. 조건문 : if~ else~
5. 반복문 : 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