[Web] JavaScript - ( week 2)

자바스크립트

브라우저가 알아들을 수 있는 거의 유일한 표준언어이다.

 

함수의 선언은 html에서 css를 사용하기 위해서 style 태그를 쓰듯이 script 태그 안에 작성하면 된다.

 

    <script>
        function hey(){
            alert('안녕하세요!')
        }
    </script>

이 함수를 호출하기 위해서 Button의 onclick 이벤트에 함수를 등록한다.

 

        <button onclick="hey()">Add Movie</button>

그리고나서 페이지에서 버튼을 클릭해 보면 

알림 창이 뜨면서 작성했던 문자가 출력되는 것을 확인해 볼 수 있다.

 

이렇게 html에 움직임을 추가하기 위해서 사용하는 언어가 자바스크립트이다.

 

콘솔 찍어보기

함수의 내용을 변경하고 브라우저의 개발자 도구를 켜고 버튼을 눌러본다.

<script>

        function hey(){

            //alert('안녕하세요!')

            console.log('안녕하세요!')

        }

    </script>

이번에는 개발자 도구의 콘솔창에 문자가 뜨는 것을 확인할 수 있다.

 

 

이 개발자 콘솔을 가지고 자바스크립트 문법을 학습해 본다.

 

변수와 기본연산

자바스크립트에서 변수의 선언은 let을 사용한다. 

기본적으로 사칙연산, 문자열 더하기가 가능하다.

 

        let a = 2

        let b = 3

        console.log(a + b)

        let c = '대한'

        let d = '민국'

        console.log(c + d)

 

List

리스트의 인덱스는 0부터 시작한다.

        let a = ['사과','수박', '딸기','감']

        console.log(a[0])

        console.log(a[1])

 

length를 사용하면 리스트의 길이도 알 수 있다.

        console.log(a.length)

 

Dictionary

Key, Value로 데이터를 관리한다.

        let a = {'name':'영수', 'age':27}

        console.log(a);

Key를 가지고 Value를 찾을 수 있다.

        console.log(a['age'])

 

리스트 안에 Key, Value형태인 딕셔너리를 담을 수 있다.

        let a = [

        {'name':'영수', 'age':27},

        {'name':'철수', 'age':15},

        {'name':'영희', 'age':20}

        ]

        console.log(a)

해당 리스트에서 0번째 인덱스의 name 키를 불러오면

        console.log(a[0]['name'])

해당 value가 출력되는 걸 확인할 수 있다.

 

리스트와 딕셔너리는 순서를 표시할 수 있고 정보를 묶을 수 있기 때문에 함께 많이 쓰인다. 정보를 딕셔너리로 묶고 순서를 나타내기 위해서 리스트로 묶어주면 사용과 관리에 용이하다.

 

기본문법

foreach

리스트를 순회하면서 값에 접근할 수 있다.

        let fruits = ['사과','배','감','귤']

        fruits.forEach((a) => {

            console.log(a)

        })

a에는 fruits 안에 있는 값들이 하나씩 들어온다.

 

if

조건을 분기한다.

    <script>

        let age = 24

        if (age > 20){

            console.log('성인입니다')

        }else{

            console.log('청소년입니다')

        }

    </script>

 

반복문과 조건문

<script>

    let ages = [12, 15, 20, 25, 17, 37, 24]

    ages.forEach((a) => {

        if (a > 20) {

            console.log('성인입니다')

        } else {

            console.log('청소년입니다')

        }

    })

</script>

반복문으로 값들을 불러오면서 조건문으로 분기도 가능하다.