TIL

(React_9기)사전캠프 2주차 - 금

ImJaeOne 2024. 11. 29. 18:28

지금까지 계속 이론 정리 하는 느낌으로 TIL을 올렸는데 그렇게 하는게 아니었다.... 그냥 그 날 배운 거 가볍게 올리는 느낌이었구나.... 그래서 지금부터라도 제대로 쓰려 합니다...!

 

오늘은 자바스크립트가 무엇인지 그리고 그에 대한 문법과 JQuery까지 알아보았습니다.

자바스크립트는 브라우저에서 동적인 기능을 구현해주고 api 통신도 가능하게 해준다고 합니다.

 

// prac.html
<!DOCTYPE html>
<html>

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

<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>

 

// prac.js
const resultBtn = document.getElementsByClassName('button-part')[0];

let fruits = ['사과', '배', '감', '귤', '수박'];
let people = [
    { name: '서영', age: 24 },
    { name: '현아', age: 30 },
    { name: '영환', age: 12 },
    { name: '서연', age: 15 },
    { name: '지용', age: 18 },
    { name: '예지', age: 36 },
];

resultBtn.addEventListener('click', function () {
    $('#q1').empty();

    fruits.forEach((a) => {
        let temp_html = `<p>${a}</p>`;
        $('#q1').append(temp_html);
    });
});

resultBtn.addEventListener('click', function () {
    $('#q2').empty();

    people.forEach((a) => {
        let { name, age } = a;
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
        $('#q2').append(temp_html);
    });
});

 

 

JQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<head> 태그 내에 위의 코드를 입력합니다.

prac.js를 보면 버튼을 가져올 때 document.get~~ 이렇게 긴 코드로 가져왔는데 그 아래를 보면 $('#q1') 이런 식으로 쉽게 가져왔습니다. 이것이 JQuery의 장점입니다...!

 

백틱(`)

숫자 1 옆에 있는 특수문자로 백틱 내에 ${}를 사용하면 편리하게 변수를 가져올 수 있습니다.

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

작은 따옴표 대신에 백틱을 이용하는 것이 더 편리하죠?

 

강의와 별개로 변수도 더 자세히 공부해봤습니다. 호이스팅이 무엇인지는 알고 있었는데 TDZ라던지... 다시 한 번 더 정리하다 보니 모르는 부분도 있어서 사전 캠프 기간동안 많은 것을 얻어갈 거 같습니다!

 

변수

자바스크립트란 프로그래밍 언어 중 하나로 웹 페이지의 동적인 기능을 구현하기 위해 개발되었습니다.브라우저에서 자바스크립트를 주로 사용하는 이유는 역사적으로 웹 브라우저에서 실행

dlawi0108.tistory.com