반응형

 

프로그래머스의 문자열 내 p와 y의 개수를 찾는 문제이다. 프로그래머스는 내용 전체를 가져다 쓰는 것을 힘들게 잡기 때문에 설명으로 대체하겠다. s에 input 데이터로 아래와 같은 값들이 들어오고, 정답으로 true나 false boolean 값을 리턴하는 문제이다. s = "pPoooyY"가 들어왔을 때 소문자 p, y와 대문자 P, Y는 같은 계산 한다. 즉 1번은 pP와 yY 가 2개씩 같으므로 TRUE를 반환하고 PyY는 P와 yY로 1 :2 이기 때문에 FALSE를 반환하다. 

 

프로그래머스

 

로직 생각

1. x의 개수와 y의 개수를 변수에 카운트를 해준다.

2. 문자열 s 를 slice 함수를 이용하여 나누어준다.

3. 반복문을 이용하여 n 즉 각각의 문자를 반복하면서 돌고 p 또는 P일 때 x의 카운트를 하나 올려주고,

4. y 또는 Y 일 때 y의 카운트를 하나 올려준다.

5. 카운트 x와 카운트 y 가 같으면  answer로 true 반환

6. 다르면 false 반환

 

function solution(s){
    let x = 0;
    let y = 0;
    let n = s.slice();
    for(let i = 0; i < n.length; i++)
    {
        if(n[i] == "p" || n[i] == "P")
        {
            x++;      
        }
        if(n[i] == "y" || n[i] == "Y")
        {
            y++;        
        }
    }
    console.log(x);
    console.log(y);
    if(y == x)
    {
        answer = true;   
    }
    else {
        answer = false;
    }
    return answer;
}

런타임이 2.5ms 가 나왔다. for문과 if 문을 많이 썼기 때문에 함수내엣 동작 시간이 좀 걸린 것으로 예상된다. 여러 내장 함수들을 이용하여 런타임을 줄여 보아야겠다.

반응형

'프로그래머스 > LV1' 카테고리의 다른 글

x만큼 간격이 있는 n개의 숫자  (0) 2023.07.08
프로그래머스 LV1 - 약수의 합  (0) 2023.07.07
반응형

자동차 클래스를 만들고 

그 아래에 자동차 객체들을 여러 개 만들어 원하는 자동차 사이트로 연결하는 클래스들을 만들어 보았다. 

아래는 기본적인 html 코드로 root 아래에 search id를 만들어주었다. 

 

 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <div id="search"></div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

 

첫 번째로 가장 부모 클래스로 자동차 클래스를 만들었다. 이름과 링크만을 가지는 자동차 클래스를 만들었다.

class Car {
  name;
  link;

  constructor(name, link) {
    this.name = name;
    this.link = link;
  }
}

자동차 클래스를 상속받는 현대차, 기아차, 테슬라, 삼성(르노자동차)을 만들었다. 

class Hyundai extends Car {}
class Kia extends Car {}
class Tesla extends Car {}
class Samsung extends Car {}

자동차 리스트를 만들어 객체를 생성과 동시에 초기화 하여 주었다. 이름과 링크를 초기화하였다. 

const carList = [
  new Hyundai("현대", "https://www.hyundai.com/"),
  new Kia(
    "기아",
    "https://www.kia.com/kr?utm_source=google_SA&utm_medium=AD202307&utm_campaign=KiaSales2022_brand&utm_content=keyword_pc&utm_term=%EA%B8%B0%EC%95%84&gclid=Cj0KCQjwnrmlBhDHARIsADJ5b_kAbfoRb1zNA8hlfOYk_7-Fi0gGlnq0iqRkaeCpdhWHG4EGDWmV8G8aAhv_EALw_wcB"
  ),
  new Tesla("테슬라", "https://www.tesla.com/ko_kr"),
  new Samsung(
    "삼성",
    "https://www.renaultkoream.com/new/model/master.jsp?bannerUrl=MASTERSEARCHG2307&bannerSeq=1&utm_source=google&utm_medium=pc_cpc&utm_campaign=RKM_SEA_MASTER_DEFENSIVE_2307&gclid=Cj0KCQjwnrmlBhDHARIsADJ5b_mEDG_Wk1Zz6ZkgEDD1CvCcd6H6Rb3a1xnkaNS8o_uVxNvkB2-YGSkaAiorEALw_wcB"
  ),
];

 

carList 내부아이템들을 foreach 문을 이용하여 돌려주었고, 이때 document.write를 이용하여 출력을 하였다. 아직 

하지만, serach id 에 엘리먼트에 div 가 추가로 생기는 것이 아닌 출력을 했을 시에 작동은 잘하지만, javascript에 링크가 걸려 출력이 되었다. 이 부분에 대해 어떤 방식으로 자바 스크립트를 html 엘리먼트로 주어야 할지 공부해야겠다.

 

 

carList.forEach((item) => {
  console.log(item.name);
  item.name = document.write(
    "<a href=" + item.link + ">" + "<div>" + item.name + "</div>" + "</a>"
  );
});

 

 

 

 

 

 

 

 

 

 

 

반응형
반응형

1. 고차함수 

2. 재귀함수


1. 고차함수 

함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다. 

쉽게 말해 함수에 인자로 함수로 받거나 함수의 반환형이 함수이다면 고차함수라고 생각할 수 있다.

pleaseCallback안에 console.log를 실행시키기 때문에 인자로 함수를 받았기 때문에 고차함수라고 할 수 있다. 

 

function pleaseCallback(tempLog) {
  tempLog("안녕");
}

pleaseCallback(console.log);

또한 콜백함수의 경우에도 pleaseCallback 함수 내에 익명함수를 실행시켰기 때문에 함수를 인자로 사용하여 고차함수라고 말할 수 있다. 

pleaseCallback((temp) => {
  console.log(temp);
});

이처럼 함수내에 함수 또는 함수를 리턴으로 받는 함수들을 고차함수라고 한다.

 

sort함수

console.log(
  [1, 6, 2, 13123, 3, 1235, 95].sort((a, b) => {
    return a - b;
  })
);

정렬을 할 때 사용되는 sort 함수 또한 정렬을 하기 위해 뒤에 콜백함수를 호출하므로 고차함수의 예시라고 할 수 있다. 

2. 재귀함수

재귀함수

재귀함수는 쉽게 말해 자기 자신을 호출하는 함수이다. 영어에서 흔히 himself, myself, itself 같이 자기 자신을 호출하는 함수이다. 

function func2(num) {
  console.log(num);
  if (!num) return 0;
  func2(num - 1);
}

func2(10); 을 실행 시켰을 때 num = 10 이고 콘솔에서 10을 찍은 후 if(! 10) 이 거짓이기 때문에 func2(num-1)을 재귀함수로 함수 내에서 호출한다. 이런 식으로 여러 번 자기 자신을 호출하여 10 ~ 1까지 출력하고 if(! 0) 은 참이기 때문에 마지막으로 0을 리턴하면서 끝내기 때문에 10 ~ 0까지 출력되게 된다. 

 

 

 

 

 

 

반응형
반응형

1. 이벤트 리스너

1 - 1. addEventListener

 

1 - 2. window에서 addEventListener/ pointerdown, pointerup 사용하기. 

 

1 - 3. window에서 addEventListener/ touchstart, touchend 사용하기. 

 

 

2. 이벤트 핸들러

2 - 1. onclick 

 

2 - 2. onload

 

2 - 3. onsubmit 

 

2-4. onfocus, onblur

 

2-5. onchange, oninput


 

작성된 HTML

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event</title>
  </head>
  <body>
    <div id="root">
      <div id="btn">버튼 확인?</div>
      <div id="count">0</div>
      <div>
        <div id="width">?px</div>
        <div id="height">?px</div>
      </div>
      <form id="test-form">
        <input type="text" id="name" name="name" />
        <div id="name-alert"></div>
        <button>입력완료</button>
      </form>
      <div id="template-literal"></div>
    </div>
    <script src="./public/index.js"></script>
  </body>
</html>

 

1.이벤트 리스너

1 - 1. addEventListener

이벤트를 추가하는 방식으로 이 방법을 이용하여 여러 개의 이벤트 핸들러를 등록할 수 있다.

버튼에 이벤트 리스너를 등록하여 btn 을 클릭하면 e.target으로 btn아이디의 요소전체를 가지고 오고 , e.target.innerHTML로 btn 아래에 버튼 확인? 을 가져오게 된다.

document.getElementById("btn").addEventListener("click", (e) => {
  console.log(e.target);
  console.log(e.target.innerHTML);
});

 

이벤트 리스너엔 addEventListener("click", (e) ={});

가 들어오는데 콜백 함수 앞에 "click"은 이벤트리스너가 동작할 때 발생되는 이벤트 이름이다. 여러 이벤트들이 있는데 이 이벤트들에 on 접두사를 붙이면 이벤트 핸들러가 된다. 이벤트 핸들러는 실질적으로 특정이벤트가 발생됐을 때 호출되는 함수이다.

 

document.getElementById("count").addEventListener("click", (e) => {
  console.log(e);
  if (e.ctrlKey == true) {
    e.target.innerHTML = +e.target.innerHTML - 1;
  } else {
    e.target.innerHTML = +e.target.innerHTML + 1;
  }
});

count id 에 이벤트 리스너로 클릭을 받았을 때 ctrl 키를 클릭하면서 클릭을 하면 참이 되고, +e.target.innerHTML -1;을 하여 숫자가 빼진다 여기서 ` + ` 단항연산자가 없고 e.target.innerHTML을 실행하면 011111로 숫자가 더해지지 않고 문자로 숫자가 더해져서 출력될 것이다. ` + `는 0에 숫자를 연산해 주기 위한 단항연산자로 문자열 타입을 숫자로 변환시킨다. 단항연산자를 사용할 수 없는 문자열이라면 NAN을 출력시킨다.

 

1 - 2. window에서 addEventListener/ pointerdown, pointerup 사용하기. 

window.addEventListener("pointerdown", (e) => {
  console.log(e.pageX);
  console.log(e.pageY);
});

window.addEventListener("pointerup", (e) => {
  console.log(e.pageX);
  console.log(e.pageY);
});

pointerdown은 window 즉 브라우저에서 마우스를 누르고 있을 때 console.log로 e.pageX, e.pageY를 이용하여 좌표를 찍어준다. 

pointerup은 브라우저에서 마우스를 뗐을 때 console.log로 e.pageX, e.pageY를 이용하여 좌표를 찍어준다. 

 

 

1 - 3. window에서 addEventListener/ touchstart, touchend 사용하기. 

window.addEventListener("touchstart", (e) => {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
});

window.addEventListener("touchend", (e) => {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
});

터치 이벤트는 모바일 환경에서 여러 개의 터치가 들어올 수 있다 때문에 터치 배열로 들어오게 된다. 위 코드는 touchstart로 시작 지점부터 touchend로 끝지점까지 터치된 좌표영역을 나타낸다.

 

2. 이벤트 핸들러

2 - 1. onclick 

document.getElementById("btn").onclick = function (e) {
  console.log("click했음");
  console.log(e);
};

 

btn 아이디인 버튼 확인? 을 클릭하게 되면 아래와 같이 click 했음과 PointerEvent 객체가 출력된

2 - 2. onload

window.onload = function () {
  console.log("페이지 로딩 완료");
};

window.load()는 자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이다. 

페이지의 모든 요소들이 로드되어야 출력된다. 즉 전체페이지가 모두 불러와진 후에 동작하는 메서드이다.

 

 

2 - 3. onsubmit 

onsubmit함수는 제출 이벤트가 발생할 때 동작이 발생한다. 

test-form에 데이터를 입력하고 입력 완료를 해도 preventDefault() 함수가 동작하여  a 태그를 눌렀을 때도 href 링크로 이동하지 않게 할 경우와  form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우 (submit은 작동됨)이다. preventDefault() 가없다면 0.1초만 form이 전송되어 console.log의 내용들은 찍히지 않을 것이다.

 

document.getElementById("test-form").onsubmit = (e) => {
  e.preventDefault();
  console.log("데이터 안보냈어");
};

document.forms["test-form"].onsubmit = (e) => {
  e.preventDefault();
  console.log("데이터 입력완료");
};

2-4. onfocus, onblur

input 박스 내에 포커싱(마우스 클릭)을 했을 때 콘솔에 포커싱이 뜬다. 

input 박스 이외에 지점에 마우스 클릭을 했을 때 포커싱이 풀리면서 선택이 풀렸어가 콘솔에 작성된다.

document.getElementById("name").onfocus = function (e) {
  console.log("포커싱");
};

document.getElementById("name").onblur = function (e) {
  console.log("선택이 풀렸어");
};

focuse와 onblur를 이용하여 input에 마우스가 포커싱 되어 있는지 풀려있는지 판단할 수 있다. 

2-5. onchange, oninput

onchange

document.getElementById("name").onchange = function (e) {
  console.log(e.target.value);
  document.getElementById("name-alert").innerHTML = e.target.value;
};

onchange 이벤트는 input 태그를 벗어났을 때 발생하는 이벤트이다. input 박승안에서 입력값을 넣고 다른 클릭이나 이벤트를 발생시키면 입력값이 name-alert의 inner로 들어가서 출력되게 된다. 

 

oninput

document.forms["test-form"]["name"].oninput = function (e) {
  console.log(e.target.value);
};

oninput 이벤트 input을 하는 즉시 콘솔에 작성된 입력값이 그대로 출력된다.

 

 

 

 

 

 

반응형

'블록체인 개발' 카테고리의 다른 글

자바스크립트 클래스 사용해보기  (1) 2023.07.12
고차함수와 재귀함수  (0) 2023.07.11
Javascript DOM 엘리먼트 객체  (0) 2023.07.07
Javascript Scope & Scope Chain  (0) 2023.07.06
BOM (Browser Object Model)  (0) 2023.07.04
반응형

 

 

function solution(x, n) {
    let answer = [];
    for(let i = 0; i < n; i++)
    {
        answer.push(x*(i+1));
    }
    return answer;
}

로직 생각 : 

정수 x = x 부터 시작해 x 씩 증가 시킴

자연수 n = 우리가 반복할 숫자

 

for 문을 이용해 자연수 n 까지 반복을 돌리고,

answer 리스트에 push를 이용해 x * ( i + 1) 을 리턴해줌 

 

x * (i  + 1) 은 i 가 0 일때 1 * x 가 되기 때문에 첫번째 x 부터

마지막 n - 1 까지 반복을 돌리기 때문에 x * (n - 1 + 1) 로 n*x 가 나오게 되므로 x 부터 시작해 x씩 증가하는 숫자 n 개를 리스트에 push를 이용하여 넣어줄 수 있다.

 

다른사람의 코드

function solution(x, n) {
    return Array(n).fill(x).map((v, i) => (i + 1) * v)
}

분석을 해보자면 리스트로 반환을 하기 때문에 Array 객체 배열에 fill() 함수를 이용해 x로 n개의 리스트 요소를 넣어준다.

그 후 map((v, i) => (i + 1) * v) / map 메서드와 콜백함수를 이용하여 v, 는 요소 i는 인덱스로 map 을 콜백함수를 이용하여  리스트의 i 번째 인덱스 값을 (i+1)  + v(현재 리스트의 값)으로 바꾸어 주어 채워주고 있다. 

 

 

반응형
반응형

정수 입력 값을 받아 정수의 약수의 합을 구하는 문제

function solution(n) {
    var answer = 0;
    for(let i = 1; i <= n; i++)
    {
        if(n % i == 0 )
        {
            answer += i;
        }
    }
    return answer;
}

for문으로 i 부터 n 까지 반복문을 돌려 주었고, 조건식 if문은 입력값 n 을 i로 나누었을 때 나누어 떨어지면 약수이기 때문에 반환되는 answer 값에 약수들을 더해주는 식이다. 

반응형

+ Recent posts