OZ Coding JS Day 3

Chanyang·2024년 10월 16일

목록 보기

2/4

Today I'll be looking at a few assignments for JS

1 Assignment: JS dom objects - their methods and properties

Given the html code with a simple poem below, I have to console.log a number of different classes and elements.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chapter2의 첫번째 문제 입니다.</title>
  </head>
  <body>
    <h1 id="poetry" class="heading" title="지은이: 나태주">
      <span>사는 법</span>
    </h1>
    <p class="first">그운 날은 그림을 그리고</p>
    <span class="first">쓸쓸한 날은 음악을 들었다</span>
    <p class="second">그리고도 남는 날은</p>
    <p class="third">너를 생각해야만 했다</p>
      </body>
</html>

Within the script tag of the HTML document,

// .querySelectorAll를 이용해 클래스명 first와 second가 가지고 있는 모든 요소를 찾아 console.log로 출력해주세요 
console.log(document.querySelectorAll('.first, .second'));

I can use the HTML DOM Document querySelector() method
which is .querySelectorAll to return all elements that matches the CSS selector(s).

Definition : NodeList
A NodeList is an array-like collection (list) of nodes.

The nodes in the list can be accessed by index. The index starts at 0.

The length Poperty returns the number of nodes in the list.

      //.getElementsByClassName를 이용해 클래스명 third의 요소를 console.log로 출력해주세요
      console.log(document.getElementsByClassName('third'));
      // .getElementById를 이용해 id poetry의 요소를 가져와 title이라는 변수에 넣고 console.log로 출력해주세요
      const title = document.getElemendById('poetry');
		console.log(title);

Next, we have .getElementsByClassName and .getElementById

.getElementById

After creating the variable named title, I am able to console.log different contents within the title

      // title 변수 내 텍스트 콘테츠를 가져와 console.log로 출력해주세요
      console.log(title.textContent);
      // title 변수 내 html 코드를 가져와 console.log로 출력해주세요
      console.log(title.innerHTML);
      // title 변수 내 className 정보를 가져와 console.log로 출력해주세요
      console.log(title.className);
      // title 변수 내 style 정보를 과져와 console.log로 출력해주세요
      console.log(title.style);
      // title 변수내 title 정보를 가져와 console.log로 출력해주세요
      console.log(title.title);

Assignment 2 - JavaScript Comparison and Logical Operators

      let a = 10,
        b = '10',
        c = 20,
        d = 30;

      console.log(a == b);
      // 위 코드의 결과를 적어주세요 : true
      console.log(a === b);
      // 위 코드의 결과를 적어주세요 : false 
      console.log(a != b);
      // 위 코드의 결과를 적어주세요 : false
      console.log(a !== b);
      // 위 코드의 결과를 적어주세요 : true 
      console.log(c <= 20);
      // 위 코드의 결과를 적어주세요 : true 
      console.log(d <= 30);
      // 위 코드의 결과를 적어주세요 : true

if, else, else if statements

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 문제 1: 온도에 따른 의상 추천하기
      // 문제 설명: 사용자로부터 현재 온도를 입력받아, 온도에 따라 의상을 추천하는 프로그램을 작성하세요.
      // 조건:
      // 25도 이상이면 "반팔 티셔츠를 추천합니다."
      // 10도 이상 25도 미만이면 "긴팔 티셔츠를 추천합니다."
      // 0도 이상 10도 미만이면 "자켓을 추천합니다."
      // 0도 미만이면 "코트를 추천합니다."
      let temp = prompt('현재 온도를 입력 하세요');
      temp = parseInt(temp);

      if (temp >= 25) {
        console.log("반팔 티셔츠를 추천합니다.");
      } else if (temp >= 10) {
        console.log("긴팔 티셔츠를 추천합니다.");
      } else if (temp >= 0) {
        console.log("자켓을 추천합니다.");
      } else {
        console.log("코트를 추천합니다.");
      }
    </script>
  </body>
</html>

Test Score Grading

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 문제 2: 성적 등급 매기기
      // 문제 설명: 사용자로부터 성적을 입력받아, 해당 성적의 등급(A, B, C, D, F)을 출력하는 프로그램을 작성하세요.
      // 조건:
      // 90점 이상이면 A
      // 80점 이상 90점 미만이면 B
      // 70점 이상 80점 미만이면 C
      // 60점 이상 70점 미만이면 D
      // 60점 미만이면 F

      let grade = prompt('성적 점수를 입력하세요.');
      grade = parseInt(grade);

      if (grade >= 90) {
        console.log('A');
      } else if (grade >= 80) {
        console.log('B');
      } else if (grade >= 70) {
        console.log('C');
      } else if (grade >= 60) {
        console.log('D');
      } else {
        console.log('F');
      }
    </script>
  </body>
</html>

parseInt 과 parseFloat 구분 잘하기!

Use parseInt when you want to convert a string to an integer, and use parseFloat when you want to convert a string to a floating-point number. The choice between them depends on the type of numeric value you are dealing with in your JavaScript code.

교통 수단 선택하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 문제 3: 교통수단 선택하기
      // 문제 설명: 사용자로부터 이동 거리(단위: km)를 입력받아, 이동 거리에 따라 권장 교통수단을 추천하는 프로그램을 작성하세요.
      // 조건:
      // 0.5km 미만이면 "걷기를 추천합니다."
      // 0.5km 이상 2km 미만이면 "자전거를 추천합니다."
      // 2km 이상 10km 미만이면 "버스를 추천합니다."
      // 10km 이상이면 "지하철을 추천합니다."

      let d = prompt('이동 거리(km) 를 입력 하시오.');
      d = parseFloat(d);

      if (d < 0.5) {
        console.log('걷기를 추천합니다.');
      } else if (d < 2) {
        console.log('자전거를 추천합니다');
      } else if (d < 10) {
        console.log('버스를 추천합니다');
      } else {
        console.log('지하철을 추천합니다');
      }
    </script>
  </body>
</html>