JavaScript

맛보기

• 프로그래밍 언어중 하나

HTML 연결

• 버튼을 클릭하면 경고창이 뜨게하기
  • 함수를 만들어두기

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

    • head 안에 script 내에 자바 스크립트를 작성한다.

      <script>
      	function guy() {
      			alert('안녕!');
      }
      </script>

  • body안 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불림

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

기초 문법 배우기(1)

크롬개발자도구

• 해당 웹 페이지에서 바로 console 탭에 작성하면 실시간으로 확인 용이함.
• 윈도우: F12
• 띄워놓은 페이지에서 빠르게 JS를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구. 새로고침시 작업내용이 모두 사라짐
• console.log(변수)

  
  console.log(변수) // 콘솔 창에 괄호 안의 값을 출력해줌.개발자가 결과값을 보기 편하게
  
  console.log(변수1,변수2) //여러 변수를 한번에 출력할 수도 있음

변수 & 기본연산

• let으로 변수 선언

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

• 사칙연산, 문자열 더하기

  let a = 1
  let b = 2
  
  a+b // 3
  a/b // 0.5
  
  let first = 'Inoh'
  let last = 'Kim'
  
  first+last // 'InohKim'
  
  first+' '+last // 'Inoh Kim'
  
  first+a // Inoh1->

• 변수명

  let first_name = 'Inoh' // snake case.
  
  또는,
  
  let firstName = 'Inoh' // camel case. 회사마다 규칙이 있음.
  
  다른 개발자들이 통일성 있게 알아 볼 수 있게 작성한다.
  다른 특수문자 또는 띄워쓰기는 불가능함.

리스트 & 딕셔너리

• 리스트[list]: 순서(숫자?)를 지켜서 가지고 있는 형태

  • 선언시: [ ] 이용

  • 출력시: [ ] 이용

    let a_list = []  // 리스트를 선언.
    
    // 또는,
    
    let b_list = [1,2,'guy',3] // 로 선언 가능
    
    b_list[1] // 2 를 출력
    b_list[2] // 'guy'를 출력
    
    // 리스트에 요소 넣기
    b_list.push('사과')
    b_list // [1, 2, "guy", 3, "사과"] 를 출력
    
    // 리스트의 길이 구하기
    b_list.length // 5를 출력

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

  • 선언시: { } 이용

  • 출력시: [ ] 이용

    let a_dict = {}  // 딕셔너리 선언. 
    
    // 또는,
    
    let b_dict = {'name':'Inoh','age':25} // 로 선언 가능
    b_dict['name'] // 'Inoh'을 출력
    b_dict['age'] // 25을 출력
    
    b_dict['height'] = 174 // 딕셔너리에 키:밸류 넣기
    b_dict // {name: "Inoh", age: 25, height: 174}을 출력

• 리스트와 딕셔너리의 조합

  names = [{'name':'Inoh','age':25},{'name':'June','age':38}]
  
  // names[0]['name']의 값은? 'Inoh'
  // names[1]['name']의 값은? 'June'
  
  new_name = {'name':'Tomas','age':7}
  names.push(new_name)
  
  // names의 값은? [{'name':'Inoh','age':25},{'name':'June','age':38},{'name':'Tomas','age':7}]
  // names[2]['name']의 값은? 'Tomas'

  • 장점

    💡 순서를 표시0(리스트 활용), 정보 묶음(딕셔너리 활용)
    대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습
    let customer_1_name = '철수';
    let customer_1_phone = '010-1234-1234';
    let customer_2_name = '영희';
    let 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 함수를 이용해 간단하게 대응할 수 있습니다.

• 여러 함수
  • 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재함

    👉 (예 - 특정 문자를 바꾸고 싶다 등) 직접 만들지 말고 구글에 먼저 찾아보기

    **'나눗셈의나머지'를 구하고 싶은 경우** 
    
    let a = 20
    let b = 7
    
    a % b = 6

    '**특정 문자로 문자열을 나누고' 싶은 경**
    
    let myemail = 'inoh@gmail.com'
    
    let result = myemail.split('@') // ['inoh','gmail.com']
    
    result[0] // inoh
    result[1] // gmail.com
    
    let result2 = result[1].split('.') // ['gmail','com']
    
    result2[0] // gmail -> 우리가 알고 싶었던 것!
    result2[1] // com
    
    myemail.split('@')[1].split('.')[0] // gmail 

기초 문법 배우기(2)

함수

• 생김새(문법)

  💡 만들기
  function 함수이름(필요한 변수들) {
  내릴 명령들을 순차적으로 작성
  }
  사용하기
  함수이름(필요한 변수들);

• 예

  // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
  function sum(num1, num2) {
  	console.log('숫자', num1, num2);
  	return num1 + num2;
  }
  
  sum(3, 5); // 8
  sum(4, -1); // 3

조건문

• 18 보다 작으면 작다고, 크면 크다고 알려주는 함수

  function is_adult(age){
  	if(age > 18){
  		alert('성인이에요')
  	} else {
  		alert('청소년이에요')
  	}
  }
  
  is_adult(24)

• if, else if, else if, else

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

반복문

• 예를 들어 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);
  }

  💡 for (1. 시작조건; 2. 반복조건; 3. 더하기) {
  4. 매번실행}
  1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  와 같은 순서로 실행됩니다.
  i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져 나옴.

• 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트[순서=숫자?]와 함께 쓰입니다.
  • 반복문 예제1

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

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

• 리스트도 그냥 리스트가 아닌 딕셔너리{정보=데이터?}가 들어간 리스트[순서=숫자?]와 찰떡
  • 반복문 예제2

    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점 미만인 사람들의 이름만 출력할 수도 있음