joyful

const: 변수를 할당하는 방법 중 하나 블록의 문맥 내에서 재할당할 수 없음 변수를 재할당 할 수는 없지만 값을 바꿀 수는 있음 const를 쓰면 유용한 이유: 할당이 변경되지 않는 값을 알 수 있음 (const를 자주 사용하고 let을 드물게 사용하여) 변경될 수도 있는 값을 예측할 수 있음 예제코드 const taxRate = 0.1; const total = 100 + (100 * taxRate); return `구매 금액은 ${total}입니다.`; var taxRate = 0.1; var total = 100 + (100 * taxRate); return `구매 금액은 ${total}입니다.`; 두 코드는 거의 유사하지만 첫번째 코드가 훨씬 이해하기 쉽다. total이 const로 선언되어 ..

UI 디자인에서 흔히 볼 수 있는 아코디언 메뉴를 자바스크립트로 만들어보았습니다. 기본적인 내용은 w3schools를 참고하였습니다. https://www.w3schools.com/howto/howto_js_accordion.asp See the Pen accordion menu by Yeaeun Hwang (@yeaeunhwang) on CodePen. TIL nextElementSibling nextSibling 자바스크립트의 DOM 프로퍼티로서 현재 노드에서 다음 노드를 선택할 때 사용합니다. 이 둘의 차이는 간단합니다. nextSibling은 공백이든, 텍스트든 다음에 있는 어떠한 것이든 가져오고, nextElementSibling은 Element(요소)만 가져옵니다. 예를 들어 위의 HTML코드..

width와 max-width 속성은 비슷해보여서 혼동하는 경우가 많고, 그 용도의 차이점을 제대로 이해하기 어렵습니다. 하지만 두 속성은 엄연한 차이가 있고, 이를 완벽히 파헤쳐보겠습니다! width: 속성을 100%로 설정할 경우 요소의 크기를 부모요소 크기에 맞춰 100%로 유지합니다. max-width: 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않습니다. 단, 그 기본크기가 부모 요소보다 큰 경우 부모 요소의 크기로 재설정됩니다. 가로너비가 720px인 이미지를 사용한 여섯가지 예시를 정리해보겠습니다. 1. 가로 너비 값을 아무 것도 지정하지 않은 경우 : 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없습니다. See the Pen width, max-widt..

문제출처:https://www.acmicpc.net/problem/3052 3052번: 나머지 각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다. 서로 다른 값은 6개가 있다. www.acmicpc.net 문제 두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지 이다. 예를 들어, 7, 14, 27, 38을 3으로 나눈 나머지는 1, 2, 0, 2이다. 수 10개를 입력받은 뒤, 이를 42로 나눈 나머지를 구한다. 그 다음 서로 다른 값이 몇 개 있는지 출력하는 프로그램을 작성하시오. 입력 첫째 줄부터 열번째 줄 까지 숫자가 한 줄에 하나씩 주어진다. 이 숫자는 1,000보다 작거나 같고, 음이 아닌 정수이다. 출력 첫째 줄에, 42로 나누었을 때..

문제출처:https://www.acmicpc.net/problem/5597 5597번: 과제 안 내신 분..? X대학 M교수님은 프로그래밍 수업을 맡고 있다. 교실엔 학생이 30명이 있는데, 학생 명부엔 각 학생별로 1번부터 30번까지 출석번호가 붙어 있다. 교수님이 내준 특별과제를 28명이 제출했는데, www.acmicpc.net 문제 X대학 M교수님은 프로그래밍 수업을 맡고 있다. 교실엔 학생이 30명이 있는데, 학생 명부엔 각 학생별로 1번부터 30번까지 출석번호가 붙어 있다. 교수님이 내준 특별과제를 28명이 제출했는데, 그 중에서 제출 안 한 학생 2명의 출석번호를 구하는 프로그램을 작성하시오. 입력 입력은 총 28줄로 각 제출자(학생)의 출석번호 n(1 ≤ n ≤ 30)가 한 줄에 하나씩 주어..

문제출처:https://www.acmicpc.net/problem/2562 2562번: 최댓값 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어 www.acmicpc.net 문제 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어지면, 이들 중 최댓값은 85이고, 이 값은 8번째 수이다. 입력 첫째 줄부터 아홉 번째 줄까지 한 줄에 하나의 자연수가 주..

문제출처 :https://www.acmicpc.net/problem/10813 10813번: 공 바꾸기 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 바구니에는 공이 1개씩 들어있고, 처음에는 바구니에 적혀있는 번호와 같은 번호가 적힌 공이 www.acmicpc.net 문제 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 바구니에는 공이 1개씩 들어있고, 처음에는 바구니에 적혀있는 번호와 같은 번호가 적힌 공이 들어있다. 도현이는 앞으로 M번 공을 바꾸려고 한다. 도현이는 공을 바꿀 바구니 2개를 선택하고, 두 바구니에 들어있는 공을 서로 교환한다. 공을 어떻게 바꿀지가 주어졌을 때, M번 공을 바꾼 이..

문제출처 : https://www.acmicpc.net/problem/10810 10810번: 공 넣기 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 www.acmicpc.net 문제 도현이는 바구니를 총 N개 가지고 있고, 각각의 바구니에는 1번부터 N번까지 번호가 매겨져 있다. 또, 1번부터 N번까지 번호가 적혀있는 공을 매우 많이 가지고 있다. 가장 처음 바구니에는 공이 들어있지 않으며, 바구니에는 공을 1개만 넣을 수 있다. 도현이는 앞으로 M번 공을 넣으려고 한다. 도현이는 한 번 공을 넣을 때, 공을 넣을 바구니 범위를 정하고, 정한 바구니에 모두..

자바스크립트에서 자주 사용하는 함수들을 정리해보겠습니다. 1. split() 문자열을 separator로 잘라서 배열로 저장해주는 함수 string.split(separator, limit); 위의 형식과 같이 구분자를 기준으로 잘라 'limit' 크기 이하의 배열에 저장하여 리턴합니다. 사용예제 1. split(" ") 공백별 구분 const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(" "); console.log(words[3]); // Expected output: "fox" 2. split("") 문자별 구분 const str = 'The quick brown fox jumps over the laz..

폼과 자바스크립트 1. 폼 요소에 접근하는 여러 가지 방법 id 값이나 class 값을 사용 name 값을 사용 폼 배열을 사용 //id class document.querySelector("#이름") document.querySelector(".이름") //name document.이름 //폼 배열 (id, class, name 속성이 모두 없을 때 사용) document.forms[0].elements[0] 브라우저 객체 모델 1. 브라우저 객체 모델이란? 브라우저 요소 전체를 객체화 한 것 자주 사용하는 브라우저 내장 객체: Window: 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체. Document: 웹 문서에서 태그를 만나면 만들어진느 ..