웹개발 종합반 1주차 (1-13) : Javascript 기초 문법(1) - 변수, 자료형, 함수

*개발자 도구 콘솔 : 검사를 열었던 브라우저 페이지 새로고침 하면 초기화.

                                    clear console 버튼만으로는 화면만 지워지고,

                                    정의했던 정보가 남아있음.

                                  : 화살표 위 키 : 전에 적었던 것 불러오기

 

 

자바스크립트는

변수, 자료형, 함수, 조건문, 반복문

5가지만 알고 있어도 기본적인 로직 구현 가능.

 

[1] 변수(variable) :

변하는 값. 알파벳 또는 문자 안에 숫자나 '문자'를 담을 수 있다.

변수가 아니라 문자로 쓸 때는 '' 또는 ""를 붙여야 인식 가능.

a, b, c... 보다는 모두가 알아보기 쉽도록  ex 2) 처럼 단어로 쓰는 것이 좋다.

 

ex 1)

let a = 2    (a를 2라고 정의(선언)한다.)

a + 3 = 5

a = 5          (a를 5로 재정의)

a + 3 = 8

 

ex 2)

let  first_name = 'bada'   

let  last_name = 'uju'   

first_name + last_name = "badauju"

 

ex 3)

first_name + a = "bada5"

*영문 뒤에 숫자를 붙일 수 있다.

a1 = 3

a2= 2

a1 + a2 + 1 = 6

 

*프로그래밍에서 선언(declaration)과 정의(definition)는 다른 역할을 하지만

변수는 선언과 동시에 정의되기에 구분 없이 쓴다.

---

 

[2] 자료형(List & Dictionary) :

- List : 순서가 중요한 자료형.

- Dictionary: {key : value} 구조로 이루어진 자료를 가지며, 순서 상관 없음.

*프로그램에서는 순서를 셀 때 0번째부터 센다.

 

 --  List  -- 

 

ex 1)

let universe = ['earth', 'moon', 'sun' ]    (universe 라는 List 안에 순서대로 담겨있음.)

universe[0] = "earth" (universe 리스트의 0번째 내용은 earth.)

universe[1] = "moon"

universe[2] = "sun"

 

 

ex 2)

universe.push('star')     (리스트에 'star'를 추가한다.)

univese = (4)['earth', 'moon', 'sun' , 'star' ]   (개수) ['자료', '자료 1'...]

 

*영어와 한글 모두 문자로 혼용가능

* 영어, 한글 모두 문자열로 혼용가능

 --  Dictionary  --

 

ex 1)

let a_dict = {'name': 'bada' , 'age': 500} 

a_dict['name'] = 'bada'

a_dict['age'] = 500

a_dict['height'] = 200

a_dict =   {name: 'bada' , age: 500 , height: 200 } 

 

ex 2)

 

딕셔너리와 리스트는 서로가 서로를 포함할 수 있다.

키:밸류 구조의 자료를 순서대로 묶어둘 수 있다. (전화번호부처럼)

 

a_dict['universe'] = universe     

(앞은 새로 만드는 유니버스, 뒤는 이미 있는 리스트 이름인 유니버스)

 

a_dict['universe'] = (3)['earth', 'moon', 'sun']

 

a_dict

▶{name: 'bada', age: 500, height: 200, universe: Array(3)}

 

[3] 함수 :

a+b 같은 사칙연산을 포함, 기본적으로 제공되는 함수들이 있다.

그 중 기초 함수 5가지.

(사칙연산, 나머지,대문자변환, 문자열 나누기, 합치기)

 

① 더하기, 빼기, 곱하기, 나누기 :  +  -  *  /

 

② 나눗셈의 나머지 : %

let a = 20

let b = 7

a % b = 6 (a를 b로 나눴을 때 나머지는 6)

 

③ 모든 알파벳을 대문자로 바꾸기:  .toUpeerCase()

let myname = 'ujubada'

myname.toUpperCase()

▶UJUBADA

 

④ '특정 문자'를 기준으로 문자열 나누기 : .split('특정문자')

 

let myemail = 'uju_bada@gmail.com'

let result = myemail.split('@')   (이메일주소를 @ 기준으로 나눔)

▶ ['uju_bada','gmail.com'] 

 

result[0] = uju_bada

result[1] =  gmail.com

 

let result2 = result[1].split('.')   (gmail.com을 . 을 기준으로 나눔)

▶['gmail','com']

 

result2[0] = gmail

result2[1] =com

 

myemail.split('@')[1].split('.')[0] = gmail

(: 연속해서 나누기 가능)

(:이메일을 @로 나눈 1번째 값을 다시 .으로 나눈 것은 gmail)

 

⑤ 특정 문자 기준으로 나누기 2 : .split('특정문자');

 

let txt = '서울시-마포구-망원동'

let names = txt.split('-');

▶['서울시','마포구','망원동']  (텍스트 1개가 3개의 리스트가 됨)

 

⑥ 특정 문자로 합치기 : .join('특정문자');

let result = names.join('>');

▶'서울시>마포구>망원동' (3개의 리스트가 텍스트 1개가 됨)