Everyday Dev System

웹개발 종합반 2일차 -1 본문

내배캠 초기 학습/웹개발 종합반

웹개발 종합반 2일차 -1

chaeyoung- 2023. 5. 9. 17:44

20230509 3:50 pm - 5:45 pm

자바스크립트 기초 문법 , jQuery 활용하기

 

 

Javascript 

자바스크립트는 html을 조작하기 위해 + 움직이게 만들기 위해 필요

그러나 자바스크립트만으로는 복잡하므로 JQuery가 필요하다.

 

console.log는 <head> - <script>안에 적어야 함.

마우스 우클 - [검사] - [콘솔] 에 출력됨.

1. List 타입

	let a = ['사과','수박','딸기','감']
        console.log(a)
        console.log(a[0])
        console.log(a.length)

Result :

 ['사과', '수박', '딸기', '감']
사과
4

        let a = [ 
        { 'name':'영수','age':27},
        { 'name':'철수','age':21},
        { 'name':'채영','age':24}
      ]
      console.log(a[0]['age'])

Result :

27

2. Dictionary 타입

	let b = { 'name':'영수','age':27 }
        console.log(b)
        console.log(b['name'])

Result :

영수

 

기초 문법 

1. 반복문

        let fruits = ['사과', '배','감' , '귤']
        fruits.forEach((a) => {
            console.log(a)
        })

 

2. 조건문

       let age = 14

        if(age>20){
            console.log('성인입니다.')
        } else {
            console.log('청소년입니다.')
        }

 

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

    ages.forEach((a) => {
        if (a > 20) {
            console.log('성인입니다.')
        } else {
            console.log('청소년입니다.')
        }
    })

JQuery 

-jQuery에서 명찰을 id 속성을 사용한다.

<div id="q1">테스트</div>

 

#('#element')

1. 버튼 함수 "안녕하세요" 확인창이 뜨도록 작성하기

2. 버튼 함수를 클릭하면 p1의 내용을 사과로 변경하도록 한다

3. 사과로 변경한 뒤 글씨 색상을 파랑색으로 변경하도록 한다

4. q2의 내용을 영수로 변경하도록 한다.

5. q3의 내용을 21로 변경하도록 한다

        function checkResult(){
            let a = ['사과' , '배' , '감' , '귤']
            //alert(a)
            $('#q1').text(a[0])
            $('#q1').css('color','blue')
            $('#q1').css('font-size','40px')

            let b = {'name':'영수', 'age':30}
            $('#q2').text(b['name'])

            let c = [ {'name':'영수', 'age':30} ,  {'name':'철수', 'age':21} ]
            $('#q3').text(c[1]['age'])
        }

 

 

html 요소 제거하기

#('#element').hide();

더보기

prac.html - jQuery 연습하기 뼈대

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>.button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1"></div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2"></div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3"></div>
        </div>
    </body>
</html>

 

 

append

데이터를 받아와서 붙힘

더보기 
<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script> function checkResult() { } </script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr /> <br>
    <h2>1. 함수</h2>
    <div class="button-part"> <button onclick="checkResult()">결과 확인하기!</button> </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>
    function checkResult() {
        let fruits = ['사과', '배', '감', '귤', '수박']
        $('#q1').empty()
        fruits.forEach((a) => {
            let temp_html = `<p>${a}</p>`
            $('#q1').append(temp_html)
        })

        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 temp_html = `<p>${a['name']}는 ${a['age']}살입니다.</p>`
            $('#q2').append(temp_html)
        })
    }

키보드에서 ~ 입력키를 Shift 안 누르고 해야 `임

 

'내배캠 초기 학습 > 웹개발 종합반' 카테고리의 다른 글

웹개발 종합반 4일차 -1  (0) 2023.05.12
웹개발 종합반 3일차 -2  (0) 2023.05.10
웹개발 종합반 3일차 -1  (1) 2023.05.10
웹개발 종합반 2일차 - 2  (2) 2023.05.09
웹개발 종합반 1일차  (0) 2023.05.03
'내배캠 초기 학습/웹개발 종합반' Related Articles more