[TIL] #14 JS - Repl 정리 | DOM & Event

DamHo Bae·2021년 2월 22일
0
post-thumbnail

15.Array


Assignment1

  • getElement 함수안에 arr 변수를 선언했습니다.
  • arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
  • 배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 return 할 수 있도록 해주세요.

My code

// Assignment1 - 다음 함수 안에 코드를 구현하세요
function getElement() {
  let arr = [3, [4, ["array", 9], 2+3], [0]];
  return arr[1][1][0]; //arr의 1번째 인덱스 소환 , 다시 또 1번째 인덱스 소환, 마지막 ["array", 9]에서 0번째 인덱스
}

Assignment2

// ex) myArray = [3, 2, 5];
function addFirstAndLast(myArray) {
  if(myArray.length === 1){ //요소가 한개면 리턴
    return myArray[0];
  }else if(myArray.length === 0){ //myArray길이가 0이라면 0을 리턴
    return 0;
  }else if(myArray.length > 1){ 
    return myArray[0] + 다!myArray[myArray.length-1]; 
  } //나머지 모든 경우는 0번인덱스와 제일 마지막 인덱스를 더해준다.
}

16.for


Assignmnet

  • findSmallestElement 함수를 구현해 주세요.
  • findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
  • array 의 값들 중 가장 작은 값을 리턴해주세요.
  • 만일 array가 비어있으면 0을 리턴해주세요.
  • 예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면 1이 리턴되어야 합니다.
[20, 200, 23, 1, 3, 9]

My code

function findSmallestElement (arr) {
  if(arr.length === 0){
    return 0;
  }
    let result = arr[0];
    for(let i = 1; i < arr.length; i++){
    if(result > arr[i]){
      result = arr[i];
    }
  }
  return result;
  • 먼저 조건문 인자값에 길이를 0이라면 리턴
  • result라는 변수를 arr인덱스 첫번째 배열에 담고,
  • for문으로 i가 1부터 길이까지 반복문으로 돌면서,
  • 선언한 result >i를 다시 인자(arr) result가 크면
    arr길이가 result에 담긴다.

20.날짜와 시간


function getWesternAge(birthday) {
 	let Birth = new Date(birthday); //태어났던 날짜 (월,일)
    let birthYear = Birth.getFullYear(); //생일년도
    let today = new Date(); //오늘날짜
    let todayYear = today.getFullYear(); //오늘년도 
    let age = todayYear - birthYear; //오늘년도 - 생일년도 = age  
	Birth.setFullYear(todayYear); //(생일년도) 객체 년도를 (오늘 날짜) 객체의 년도로 변경
    //조건문
    if(today > Birth){ //같은 연도가 된 객체를 비교하여 월일이 지났는지 여부판단
         age; //생일이 지나지 않았으면 나이
  	}else{
   	   agee--;
	 }
  return age;

헷갈리는 부분

-> 우리나라 나이계산 x 온전한 외국인의 나이 입장
생일날, 생일이 지나면 이제 한살 먹어서 현재년도 - 생일년도

keyword:

  • new Date(); //현재 날짜를 알 수 있다. 날짜 객체를 호출 ! !
  • getFullYear(); //현재 시간에 따라 지정된 날짜의 년도를 반환
  • setFullYear(); //(1000 년에서 9999 년 사이의 날짜에 대해 4 자리 숫자)를 설정

24.class

class 생성을 연습해보겠습니다.

MyMath라는 class를 생성해주세요.

constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.

총 4개의 메서드를 구현해주세요.

getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]

add: 두 개의 숫자를 더하는 메서드

substract: 두 개의 숫자를 빼는 메서드

multiply: 두 개의 숫자를 곱하는 메서드


class MyMath {
  constructor(num1, num2){
     this.num1 = num1;
     this.num2 = num2;
  }
  getNumber(){
    return [this.num1, this.num2];
  }
  add(){
    return this.num1 + this.num2;
  }
  substract(){
    return this.num1 - this.num2;
  }
  multiply(){
    return this.num1 * this.num2;
  }
}
module.exports = { MyMath };

29.object(3)

my code

for key in을 이용해서 배열에 접근하는 방법으로
알파벳점수를 숫자점수로 변환시켰다.
scores라는 인자값에 객체를 넣었고
두번째 인자 requiredClasses에 들어갈 배열을 집어넣었다.
result에 담아보자.
다음은 for key in을 받고 scores첫번째 인자값에 key값을 value에 할당받았다.
두번째 for key in도 마찬가지,
마지막 조건문 처리다. if문으로 for in key로 받은 newClassKeys에 result가 아니면 0
호출.

let scores = {
  "생활속의회계": 'C',
  '논리적글쓰기': 'B',
  "독일문화의이해": 'B+',
  "기초수학": 'D+',
  "영어회화": 'C+',
  "인지발달심리학": 'A+',
};
let requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];
  const getExamResult = (scores, requiredClasses) => {  
  const result = {};
  for(let key in requiredClasses){
    let keyObj = requiredClasses[key];
    result[keyObj] = 0;
  }
  for(let key in scores){
    let value = scores[key];
    result[key] = value;
      switch(value) {
      case 'A+':
        result[key] = 4.5;
        break;
      case 'A':
        result[key] = 4;
        break;
      case 'B+':
        result[key] = 3.5;
        break;
      case 'B':
        result[key] = 3;
        break;
      case 'C+':
        result[key] = 2.5;
        break;
      case 'C':
        result[key] = 2;
        break;
      case 'D+':
        result[key] = 1.5;
        break;
      case 'D':
        result[key] = 1;
        break;
      case 'F':
        result[key] = 0;
        break;
      default:
        break;
    }
}
return result;
}
module.exports = {getExamResult}

32. DOM & Event

DOM이란?

  • 트리구조

  • 웹페이지와 js를 서로 이어주는것.


keyword:

클래스네임 = 여러개 / 아이디 = 하나
getElemenestClassName,tagName = []인덱스..
selector("") -> 첫번째
selectAll("") => 여러개
.value (input)으로 알 수 있음

  • 클릭 이벤트
  • 마우스 이벤트
  • 스크롤 이벤트
  • 터치 이벤트
  • resize 이벤트 (화면크기 변화) 등이 있다.

addEventListener

요소.addEventLister(이벤트 종류, 함수(){
}

Event 마지막문제

input#re-password에 keyup 이벤트를 추가해주세요.이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.

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

  • 서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

비밀번호 확인하기

const thisIsRpw = document.getElementById('re-password');
const alertP = document.querySelector('#alert');
const RePassword = document.getElementById('re-password');
const Password = document.getElementById('password');
console.log(alertP)
const act = function(e) {
  const value = e.target.value;
  if(Password.value !== value){
    alertP.innerHTML = "비밀번호가 일치하지 않습니다.";
  }else{
    alertP.innerHTML = "";
  }
};

const thisIsRpw = document.getElementById('re-password');

thisIsRpw 라는 상수를 먼저 선언을 한 다음에, 다큐먼트에 접근을 하고,
getElementById 메소드를 이용해서 아이디 값을 받아왔다.

const alertP = document.querySelector('#alert');```

1.alertP라는 상수를 받음
2.querySelector 라는 메소드로 아이디 alert값을 받음 id값 #으로 찾는다.

const RePassword = document.getElementById('re-password');

3.리패스워드 라는 상수를 받고, 패스워드를 재 입력했을 경우 일치하는지 알기 위해

const Password = document.getElementById('password');

4.패스워드 상수를 받고, 도큐먼트에 접근을 하고,
getElementById 메소드를 이용해서 패스워드 id값을 받아왔다.

const act = function(e) {
  const value = e.target.value;
  if(Password.value !== value){
    alertP.innerHTML = "비밀번호가 일치하지 않습니다.";
  }else{
    alertP.innerHTML = "";
  }
};
  1. 변수를 할당한 뒤 함수안에 인자를 타겟으로 지정해줬다.
    5-2. 우리는 input을 알고싶기에 value속성으로 찾을 수 있다.
    5-3. 조건: 만약 패스워드에 타겟안에 value속성과 패스워드가 맞지 않는다면'비밀번호가 일치하지 않습니다'
    맞다면 공백.
thisIsRpw.addEventListener('keyup', act);

마지막. thisIsRpw 상수에 이벤트리스너로 호출한다.
keyup이벤트 act 변수 호출

profile
Frontend Developer

0개의 댓글