Javascript & JQuery

1. Javascript 기본

 

1-1. 리스트 (list)

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

 

1-2. 딕셔너리 (dictionary)

let people = [

        { 'name': '서영', 'age': 24 },

        { 'name': '현아', 'age': 30 },

        { 'name': '영환', 'age': 12 },

        { 'name': '서연', 'age': 15 },

        { 'name': '지용', 'age': 18 },

        { 'name': '예지', 'age': 36 }

    ]

1-3. 반복문 

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

        fruits.forEach((a) => {                                          = forEach로 반복시킴

            console.log(a)

        })

출력 : 사과 배 감 귤

 

1-4. 조건문+ 반복문

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

    ages.forEach((a) => {                                                  =  ages변수를 a로 설정후 전체 반복을 시켜라

        if (a > 20) {                                                               = 만약 a값이 20보다 클경우 '성인입니다'를 alert 해라

            alert('성인입니다')

        }

        else {                                                                       = 그 이외의 값은 '청소년 입니다' 로 해라

            alert('청소년입니다')

        }

    })

---

2. JQuery 

 

2-1. 불러오기

function checkResult(){

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

            $('#q1').text(a[1])                                  -> q1에 있는 text를 a변수의 1번째 값으로 바꾸어라

            let b = {'name':'영수','age':30}

            $('#q2').text(b['name'])                         -> q2에 있는 text를 b변수의 'name' 값으로 바꾸어라

            let c = [

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

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

            ]

            $('#q3').text(c[1]['age'])                         -> q3에 있는 text를 c변수의 1번째 'age' 에 있는 값으로 바꾸어라

        }

출력 = 배 , 영수 , 35

 

 

2-2. 반복, 붙치기

 

<script>

    function checkResult() {                                => 함수를 설정한다

        let fruits = ['사과', '배', '감', '귤', '수박']       => fruits라는 리스트를 만든다

        $('#q1').empty()                                         => q1에 있는 리스트를 empty 시킨다 (초기화) 

        fruits.forEach((a) => {                                => frutis리스트를 반복시킨다. a라는 변수로 설정후에

            let temp_html = `<p>${a}</p>`              => temp_html 이라는 변수를 설정해서 ` ` 안의 html로 붙친다

            $('#q1').append(temp_html)                  => q1에 있는 리스트에 temp_html 변수를 append 시킨다

        })

    }

    let people = [

        { 'name': '서영', 'age': 24 },

        { 'name': '현아', 'age': 30 },

        { 'name': '영환', 'age': 12 },

        { 'name': '서연', 'age': 15 },

        { 'name': '지용', 'age': 18 },

        { 'name': '예지', 'age': 36 }

    ]

    $('#q2').empty()

    people.forEach((a) => {

        let name = a['name']

        let age = a['age']

        let temp_html = `<p>${name}는 ${age}살입니다.</p>`                           

        $('#q2').append(temp_html)

    })

</script>