본문 바로가기
React TIL

[React] Day_6 데일리 정리 (이어서)

by 림졍 2024. 9. 5.
728x90
반응형

 

나는 바보다... 바보다... ㅂr 보...

 

7시에 적어놓고.. gif 편집을 안한 나 반성해.🤦🏻‍♂️

그래서 냅다 새벽감성으로 적어보는.. 오늘의 (정확하게는 어제의..) TIL, 가시죠.

 

아라따.. 오늘은 2개 쓸게..🥲

 

 

Javascript 활용문법(DOM) (2-9)

  • 프로그래밍 = 컴퓨터에게 명령하는 것, 따라서 정확하게 작성하자.
  • 스크립트 태그 생성 후, 함수 생성
function hey(){ alert('안녕!'); }
  • 버튼에 함수 연결 → 클릭 시, 함수가 뜨도록 만들어주는 'onclick' 라는 명령어 사용
<button class="form-button" type="button" onclick="hey()"> 버튼을 눌러보세요. </button>

 

+) 응용하기

  • 'document' = 웹문서 / '.'  = ~의 라는 의미
  • getElementById = Id에 있는 요소 가져와, 이후 변경하고 싶은 Id 삽입 후, 변경 내용 작성하면 끝.
    (cf. getElementsByClass = class 라는 이름을 가진 요소들 전부 가져와.)
    +) 어떻게 작용하는지 궁금하다? [바로가기] 의 JavaScript 4단계 - 2번을 참고하자. 

 

실습 결과 및 코드 공유

적용된 결과물

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form-button {
            border: transparent;
            border-radius: 10px;
            height: 60px;
            width: 300px;
        }
    </style>
</head>
<body>
    <button class="form-button" type="button" onclick="hey()"> 버튼을 눌러보세요. </button>
</body>
<script>
function hey(){
alert('Hello!');
document.getElementById('hello').style.color = 'gray';
}
</script>
</html>

 

 

JQuery 시작하기 (2-10)

  • JQuery = 누군가 만들어놓은 JavaScript 라이브러리
    (장점 : JavaScript를 보다 쉽게 조작가능)
  • 임포트 : 미리 작성된 JavaScrip 코드(= JQuery)를 가져오는 것, <head> 에 삽입
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • 조작 시, <div> Id 값 필요 → class 설정과 동일하게 만들어주자!
  • 사용방법 : 해당 대상 및 요소를 가리키기만 하면 된다!
// JQuery를 이용하면, 복잡한 JavaScript 대신 간결-하고 깔끔-하게 코딩이 가능함니다.

JavaScript : document.getElementById('hello').innerHTML = '안녕';

JQuery : $('#hello').html('안녕');
  • 저얼대 왜 이렇게 생겼는지 이해하려고 하지말긔. 규칙이 있다고만 생각하고 작성하자!

 

실습 결과 및 코드 공유 

적용된 결과물

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- 새로운 JQuery 설치 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 간단하게 설정 가능! -->
    <script>
      function hey() {
        $("#title").text("안녕");
      }
    </script>
    <style>
      body {
        background-color: black;
      }
      .main {
        color: white;
      }
    </style>
  </head>
  <body>
    <header class="p-3 text-bg-dark">
      <div class="container">
        <div
          class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
          >
            <svg
              class="bi me-2"
              width="40"
              height="32"
              role="img"
              aria-label="Bootstrap"
            >
              <use xlink:href="#bootstrap"></use>
            </svg>
          </a>
          <div class="main">
            <div class="p-5 mb-4 bg-body-tertiary rounded-3">
              <div class="container-fluid py-5">
                <!-- title이라는 새로운 Id 생성 -->
                <h1 id="title" class="display-5 fw-bold">제목 입력</h1>
                <!-- 글자수를 옆으로 늘리기 위해 아래 col-md-8 -> 16으로 바꿔줌. -->
                <p class="col-md-16 fs-4">더이상의 설명은 필요없다.</p>
                <button
                  onclick="hey()"
                  type="button"
                  class="btn btn-outline-light"
                >
                  영화 기록하기
                </button>
                <button type="button" class="btn btn-outline-light">
                  상세정보
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

 

 

JQuery 연습하기 (2-11)

  • 백틱 (`) : temp_html 변수 제작 시 사용 (문자와 변수 동시에 작성 가능!)
let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`
  • .append() 활용하기 
    1.  원하는 html 태그, 백틱(`) 사이에 넣기
    2.  태그 안에 들어갈 값은 "${}" 로 표시, 내부에는 변수 넣어주기 (단, 변수에는 자료가 있어야 함.)
    3.  한꺼번에 넣을 html 요소, "$('#Id')" 로 선택 후 .appnd(변수)를 넣어주면 끝.

 

실습 결과 및 코드 공유

적용된 결과물

<!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() {
    // 2번 과일항목 설정
	let fruits = ['사과','배','감','귤','수박']
	// 리스트 반복문 설정 forEach ()
    fruits.forEach((a)=>{
        let temp_html = `<p>${a}</p>`
	// 백틱 (`)사용
    $('#q1').append(temp_html)
    // $('#q1').empty()를 사용하면 2번 항목이 사라지니 주의!
	})
    
    //3번 사람 및 나이 설정
    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>

<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>
728x90
반응형

'React TIL' 카테고리의 다른 글

[React] Day_8 맨땅에 헤딩하는 실습일기 Part 2 - (2)  (3) 2024.09.07
[React] Day_7 맨땅에 헤딩하는 실습일기 Part 2 - (1)  (3) 2024.09.06
[React] Day_5 데일리 정리  (3) 2024.09.03
[React] Day_4 맨땅에 헤딩하는 실습일기 - (2)  (2) 2024.09.02
[React] Day_3 맨땅에 헤딩하는 실습일기 - (1)  (2) 2024.08.31

관련글

티스토리툴바