Javascript
-
자동차경주 예제로 Promise 객체의 개념 이해해보기Javascript 2022. 1. 29. 20:18
Q. 아반떼, 소나타, 제네시스가 자동차경주를 한다. 각 차량은 비동기인 setTimeout을 주행시간으로 가지는 함수이다. 각 차량의 주행시간은 매번 랜덤하게 정해진다. 이때, (1) 세 차가 동시에 출발한 경우, 마지막 차량이 들어온 뒤 "경주끝" 이라는 문자를 출력하도록 해보자. (2) 차량의 순서를 정해 한 차가 들어온 뒤 다음 차가 출발하도록 만들어 보자. const time = () => { return Math.ceil(Math.random() * 10) * 1000 } //time()은 1000~10000 사이의 값을 1000 단위로 랜덤하게 출력 const 아반떼 = () => { console.log('아반떼 go') setTimeout(() => { console.log('아반떼 en..
-
6. To do list 만들기Javascript 2022. 1. 12. 15:37
1. html과 css 작성 To do List form으로 감싼 텍스트input과 submit버튼을 만들어 주고 그 아래에는 submit으로 넘긴 내용을 담을 ul을 만들어 주면 html설정은 끝난다. 그리고 css 설정을 해주면 아래와 같은 큰 틀이 완성된다. 이제 입력하는 값을 아래에 리스트 형태로 추가할 수 있도록 자바스크립트를 이용해 설정해주면 된다. 2. javascript 투두리스트를 만들 때 필요한 기능을 크게 나누자면 다음과 같다. 1. 인풋에 입력한 텍스트를 아래에 목록으로 화면에 띄워주는 기능 2. 텍스트 목록을 변경할 수 있도록 해주는 기능 3. 텍스트 목록을 삭제할 수 있도록 해주는 기능 각각을 함수에 담아 실행했다. 2-0. 기본설정 document.addEventListener..
-
5. javascript - 객체의 복사Javascript 2022. 1. 10. 16:14
1. 객체의 복사 자바스크립트의 데이터타입은 크게 기본형(primitive type)과 참조형(reference type)으로 나눠지는데 숫자, 문자, 불린 등 다른 데이터타입과 달리 객체는 참조형이다. 기본형은 값을 그대로 할당하는 반면, 참조형은 값이 아닌 값이 저장된 주소값을 할당한다. 이 점 때문에 몇가지 유의해야 할 점이 있다. 1. 빈 객체와 빈 객체는 서로 같지 않다. let a = {}; let b = {}; console.log(a===b); // 결과 : false a = {name: "hb"}; b = {name: "hb"}; console.log(a.name === b.name); //결과 : true 각 객체를 선언하면 각각의 주소값이 할당 되기 때문에 a 객체와 b 객체는 서로 ..
-
4. javascript - html DOM 조작Javascript 2022. 1. 10. 14:58
0. 목차 1.addEventListner 1-1. DOM, querySelector 1-2. callback함수 2. script 외부연결과 onload 1.addEventListner 자바스크립트를 사용해 html의 엘리먼트에 이벤트를 등록하는 메소드이다. 이를 이해하기 위해서는 DOM의 개념과 콜백함수의 개념을 이해하여야 한다. 버튼 1-1. DOM, querySelector document.querySelector("#btn") document.getElementById("btn") 모두 html 페이지에서 인자값으로 들어간 element를 찾아 object로 가져오는 역할 이걸 통해서 html 엘리먼트를 자바스크립트로 조작할 수 있다. (document객체(DOM)의 속성, 메소드를 사용할 수 ..
-
3. javascript 기초 - forEach, 배열중복제거Javascript 2022. 1. 6. 18:25
0. 목차 1. forEach와 화살표함수 2. array내의 요소 중복 제거방법 3. string 메소드 간단한 정리 4. 문자열 문제 풀이 1. forEach와 화살표함수 아래와 같은 문제가 있다고 할 때 Q. array = [1,2,3,4,5] 라는 배열이 있을 때, 원소 하나씩 출력하도록 만들어라. 1-1. 기존의 for문을 사용한 방법 for (let i=0; i {console.log(v)} ) // v 는 array 함수 내의 원소값 (인덱스 순서대로) 1-4. 인자가 하나이거나 함수가 한 줄이라면 ( ) 와 { }를 생략할 수 있다. array.forEach( v => console.log(v)); array의 요소 수만큼 for문을 돌며 callback함수의 인자가 된다. for문을 짧고..
-
2. javascript 기초 - array와 objectJavascript 2022. 1. 4. 16:19
1. 개념 군집형 데이터타입 array와 object 1-1. array (배열) typeof array : object 메소드와 속성 메소드 : 데이터가 변화함. 동사. array.push()처럼 ()가 붙음 속성 : 데이터는 변하지 않고 상태를 나타냄. 명사. array.length처럼 ()가 붙지 않음 (참고) array.push() : ()안의 값을 array의 마지막 요소로 추가함. array.length : array의 요소 개수를 출력함. 인덱스 array 내의 첫 요소가 0번부터 인덱싱됨. array[0] array[1] ... 이런 식으로 원하는 위치의 값을 찾을 수 있다. 1-2. object (객체) 많이 사용되는 군집형 데이터타입. json도 object임 (JavaScript Ob..
-
1. javascript 기초 - for문/if문 사용해서 문제풀기Javascript 2022. 1. 3. 17:13
1번문제 Q. 마스크 공장 마스크를 담을 수 있는 팩이 3개입/5개입 2종류가 있다. 최대한 적은 팩을 사용하여 마스크를 담으려고 한다. 예를들어 18개의 마스크가 있다면 3개입 팩 6개를 사용 할 수 있지만, 5개입 3개와 3개입 1개로 담으면 더 적은 팩으로 담을 수 있다. N개의 마스크를 담기 위해서 필요한 최소한의 팩의 수를 구하는 프로그램을 작성하라. 단, 정확하게 팩을 만들 수 없다면 -1을 리턴해야한다. ex) 18 👉 4 4 👉 -1 6 👉 2 A. 접근 방법. 가장 적은 팩을 사용하기 위해서는 가장 많은 5개입 팩을 사용해야 한다. 따라서 5개입 팩을 최대로 사용 가능한 갯수를 i의 초기값으로 두고 해당 개수에서 5개입에 담은 나머지가 3으로 나누어 떨어지는 지를 확인하여 나누어 떨어진다..