띵동

https://www.acmicpc.net/problem/2562 2562번: 최댓값 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어 www.acmicpc.net 입력받은 값을 \n 단위로 잘라 map과 Number를 사용하여 정수로 변환해주었다. 그리고 spread 연산자를 사용해 새로운 배열 변수를 만들어 이 값을 복사해 주었다. 그다음 sort를 사용해 해당 배열을 오름차순으로 정렬하여 배열 안에 마지막 인덱스를 통해 최댓값을 구했고, indexOf를 사용하여 정렬 전 기존 배열에서 최댓값의 위치를 알아냈다. const..

Object.keys()를 사용하여 객체 안에 key 값들을 배열로 만들고, find를 사용하여 obj[key] 값과 찾으려는 val 값을 비교한다. function getKeyByValue(obj, val) { return Object.keys(obj).find(key => obj[key] === val); }

localStorage란 로컬 환경에 데이터 정보를 저장해서 브라우저를 다시 실행해도 데이터를 유지해주는 저장소이다. 로컬 스토리지는 개발자 도구를 열어 확인할 수 있다. 로컬 스토리지는 객체처럼 key-value 형태로 저장한다. 1) localStorage에 정보 저장하기 - setItem : localStorage 안에 정보를 저장할 때 사용하는 메소드 - localStorage.setItem(key, value); 페이지를 새로고침해도 localStorage의 데이터가 유지되는 것을 확인할 수 있으며, 여기에 저장되는 값들은 모두 문자열 형태라는 특징이 있다. 2) localStorage에서 값 가져오기 - getItem : localStorage에서 정보를 가져올 때 사용하는 메소드 - loca..

이벤트를 추가하기 위해 querySelector를 사용해 엘리먼트를 선택해 주었다. 이벤트 추가 방법 - event handler, addEventListener 1) event handler - 원하는 타겟.이벤트 이름 = 콜백 함수 - 콜백 함수 부분에 들어가는 것을 이벤트 헨들러라고 함 - 가독성이나 유지보수를 위해 분리하여 작성하는 것이 좋음 - 이벤트 이름 앞에 on 붙임 (모두 소문자) ex) 클릭 시 콘솔 창에 clicked 찍히게 하기 - $div.onclick = handleClick에서 함수에 호출 기호 ()가 없는 이유 -> handleClick이 콜백 함수여서 조건 만족 시 함수를 자동으로 호출해주기 때문 이벤트 헨들러 사용 시 단점 - 동일한 이벤트에 서로 다른 콜백 함수를 지정하..

** 자바스크립트에서 CSS 변경하기 ** - 원하는 타깃. style.value 값 - value 이름은 camel case로 변환해주어야 한다. (background-color -> backgroundColor) ex 1 ) body 태그의 배경 색 바꾸기 ex 2) city라는 클래스 이름을 가진 요소의 글자 색 변경 ** 자바스크립트로 HTML element 생성하고 원하는 클래스나 속성 주기 ** ** 자바스크립트로 HTML element 생성 ** - createElement(만들고 싶은 태그 이름) ex) 추천 여행지 아래에 비추천 여행지 넣기 li를 만드는 로직은 똑같기 때문에 배열을 생성했다. (map 메소드를 사용하기 위해) map을 사용하여 위 배열에 하나씩 접근해서 원소마다 li를 ..

자바스크립트를 사용하여 html element에 접근하기 위해 사용할 수 있는 메소드 - getElementsByTagName - getElementsByClassName - getElementById - querySelector - querySelectorAll ****** 클래스와 태그는 여러 번 사용할 수 있으므로 그 결괏값이 하나 이상인 경우가 많기 때문에 Element에 s를 붙여 사용한다. getElementsByTagName과 getElementsByClassName는 결괏값을 하나하나 저장해서 유사 배열 형태로 리턴해준다.(유사 배열은 key 값이 숫자여서 인덱스를 사용해 접근할 수 있다.)+) id는 하나이므로 Element에 s를 붙이지 않는다 (getElementById) ******..

반복문: 반복해서 실행하는 것 반복문 선언 방법: for, while, do while for 문 - 종료 조건을 적지 않으면 무한히 실행됨 => 무한 루프 ex) 1부터 10까지 출력하기 ex )for 문을 사용하여 배열 안 원소 출력하기 ex) for 문을 사용해서 배열 안 원소에 10씩 더하기 while 문 ex) while 문을 사용하여 1부터 10까지 출력 break, continue - break: 현재 있는 반복문에서 탈출 - continue: 뒤에 있는 코드는 실행하지 않고 다시 반복문의 시작점으로 이동 (다음 반복문으로 넘어감) ex) while 문을 사용하여 1부터 10까지 수 중 짝수만 출력하기 ex) while 문을 사용하여 배열 안 원소 출력하기 do while 문 - while ..

조건문: if 문, 삼 항 연산자, switch 문 - if 문 (if-else, if-else if-else)은 조건에 맞는 코드를 실행하면 나머지 조건들 무시하고 조건문이 종료됨 - switch 문은 만족하는 조건이 생겨도 아래 코드까지 실행하기 때문에 break 사용해야 함 if 문 - if (조건) { 실행할 코드 } - 조건이 하나일 때 (조건은 boolean 형태여야 함 즉, 참인지 거짓인지 판별 가능한 조건이어야 함) - 조건이 false인 것: 0, -0, null, false, NaN, undefined, '' (나머지는 모두 true) - 조건이 참일 때만 실행할 코드가 실행됨 - 조건이 거짓일 때 실행할 코드는 else 문에 넣어주면 됨 삼 항 연산자 - if-else 문의 축약 형태..

함수 이름 정하는 법: 함수 이름만 보고 함수의 기능을 알 수 있도록 정함 ​ 함수 선언하는 방법 1) function 함수 이름(매개변수) { 기능 } * 매개변수는 함수의 input 값 2) arrow function ​ 1번 예시) ​ 2번 예시) ​ arrow function 장점 - 여러 가지를 생략해서 간단하게 사용 가능 - 인자가 하나일 때는 괄호 생략 가능 - 코드 한 줄이면 괄호와 return 생략 가능 강의 출처: 컴공 선배

객체: 관련된 데이터들의 모음 (배열과 차이점: 배열은 데이터들이 나열된 것, 데이터 접근하는 데 한계가 있음 / 객체는 함수 저장 가능) ****** 배열로 표시하면 const pooh = ['pooh', 'bear', 'disney character', 'boy']; 이름, 종류, 직업, 성별 순으로 나열해놨는데 순서 모르면 추가할 수 없고 데이터에 접근할 때 인덱스로 접근해야 한다. (pooh[0] 이런 식) 하지만 이걸 객체로 표현하면 const pooh = {name: 'pooh', species: 'bear', job: 'disney character', gender: 'boy'} key-value 형태로 저장할 수 있어서 데이터에 접근하기 더 편리하다. (pooh.name 이런 식으로 key..