TIL | JavaScript Replit (Class, DOM, Event)

29558 단어 replitJavaScriptTILJavaScript

Asignment | Class

아래 설명을 읽고 getExamResult 함수를 구현하세요.

인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.

  • 'A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F'
{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요.

  1. scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

    • A+ => 4.5
    • A => 4
    • B+ => 3.5
    • B => 3
    • C+ => 2.5
    • C => 2
    • D+ => 1.5
    • D => 1
    • F => 0

  2. requiredClasses 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면, 해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다. 위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체과 리턴됩니다. 요소간 순서는 다를수 있지만, 채점에 무관합니다.

    {
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
}

[My Code]

const getExamResult = (scores, requiredClasses) => {
  const result = {};

  const newScores={ 
    'A+' : 4.5,
    'A' : 4,
    'B+' : 3.5,
    'B' : 3,
    'C+' : 2.5,
    'C' : 2,
    'D+' : 1.5,
    'D': 1,
    'F': 0
  } 
  // (문자열로 된 학점을 수로 변환시켜줄 작업을 위해 새로운 객체 생성)
  
  for (let key in scores){
    result[key]=newScores[scores[key]];
  } 
  // 비어있는 result객체에 문자열 학점을 숫자형으로 변환한 property 추가해줌
  
  for (let i in requiredClasses){
    if (!result[requiredClasses[i]]){
      result[requiredClasses[i]]=0;
    }
  } 
  /*requiredClasses 배열의 element를 키 값으로 가지는 property가 
  없는 경우 이 property를 추가해주고 그 값을 0으로 지정해줌.*/

  return result; //최종 객체 반환

}

Asignment | DOM

index.js에 아래의 내용을 구현해주세요.

  • p 태그를 생성하고 (hint: createElement),
  • 해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
  • 해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
  • h1요소 내부에 추가 (hint: appendChild)

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1 class="h1-title">
      <span>난 span</span>
      여기만 바꾸고 싶어
    </h1>
    <script src="index.js"></script>
  </body>
</html>

[index.css]

.title {
  color: red;
}

.dom {
  color: blue;
}

[My Code (index.jsx)]

let p = document.createElement("p"); // p 태그 생성 후
p.className="dom"; // 해당 요소에 dom 이라는 class 이름을 주고
p.innerHTML="DOM"; // 해당 요소에 "DOM" 이라는 텍스트를 넣어서
let h1 = document.querySelector("h1"); // h1 요소 select
h1.appendChild(p); // h1요소 내부에 추가

Asignment | Event

이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.

  • input#re-password에 keyup 이벤트를 추가해주세요.
  • input#password 와 input#re-password의 value 속성을 통해 input에 작성된 값을 가져오고,
  • 서로 같은지 아닌지 확인해서 같지 않다면
  • <p>태그의 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.
  • 서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인" />
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>

[index.css]

* {
  box-sizing: border-box;
}

.login-container {
  width: 200px;
  margin: 20px auto;
}

.login-container input {
  width: 100%;
  height: 30px;
  margin-bottom: 5px;
  padding-left: 10px;
}

.login-btn {
  width: 100%;
  height: 30px;
  text-align: center;
  font-size: 14px;
  background-color: #659672;
  color: white;
}

.login-btn:hover {
  cursor: pointer;
  opacity: 0.85;
}

[My Code / index.js ]

const thisIsRepassword = document.getElementById("re-password"); 
// ID가 "re-password"인 요소 선택 
const thisIsAlert = document.getElementsByClassName("alert")[0];
// Class가 "alert"인 요소의 배열 중 첫번째 요소 선택 

thisIsRepassword.addEventListener("keyup",function(){ 
  //thisIsRepassword에서 keyup 이벤트 발생시 함수 호출
  const password = document.getElementById("password").value;
  const rePassword = document.getElementById("re-password").value;

  if (password!==rePassword){ //password와 rePassword 값이 다를 경우의 조건문
    thisIsAlert.innerHTML="비밀번호가 일치하지 않습니다"; //innerHTML 메소드를 통해 thisIsAlert의 텍스트 변경
  }
  else{ 
    thisIsAlert.innerHTML=""; // 이외의 경우 띄어줄 텍스트를 비워줌
  }
});
[백준/C++] 2887번. 행성 터널
랜덤 포인트 애니메이션

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage