코알누 JS

배열함수

- pop(): 배열 끝에 있는 아이템을 제거, 그 아이템값을 리턴

- push('아이템'): 배열 끝에 아이템 추가, 배열의 최종 길이 리턴

- includes('아이템'): 배열에 아이템이 포함되어 있으면 true리턴 아니면 false리턴

- indexOf('아이템'): 아이템의 인덱스 번호를 리턴

- slice(시작점, 끝점): 시작점~끝점(미포함) 까지 배열을 복사해서 리턴

  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Array.prototype.slice() - JavaScript | MDN

- splice(시작점, 개수): 시작점부터 개수만큼 실제 배열에서 아이템 제거

- length: 배열 함수는 아니지만 배열의 크기를 리턴해주는 속성

 

- 배열 최대/최소 값

const arr = [30, 40, 10, 30];
const min = Math.min(...arr);
const max = Math.max(...arr);

 

- 배열 for문

const wons = [50000, 10000, 5000, 1000, 500, 100];
for (let i = 0; i < wons.length; i++) {
    console.log(wons[i]);
}
for (let won of wons) {
    console.log(won);
}

 

 

HTML 관련

- html 가져오기

let taskInput = document.getElementById("btn-input");

document.getElementById: id로 선택

document.getElementsByClassName: class로 선택, 같은 class가 여러개 있을 경우엔 모두 다 선택이 되서 배열에 저장됨

document.querySelector: id, class 둘 다 선택이 가능하고 좀 더 디테일한 선택이 가능하다.

                                             선택가능한 값이 여러개일 경우 첫번째 태그만 반환

document.querySelectorAll: 선택된값 모두를 NodeList에 담아 반환

 

 

- input 값

taskContent = taskInput.value;

 

- html input에 적어놓은 내용 삭제

taskInput.value = "";

 

- input에 커서 놓았을 때 적어놓은 내용 삭제

userInput.addEventListener("focus", function () {
  userInput.value = "";
});

 

- 이미지 영역 링크 변경

imgArea.src = "";

 

- 버튼 비 활성화

btnGo.disabled = true;

 

- 백그라운드 변경

document.body.style.backgroundImage = a

 

- 밑에 밑줄

#under-line{
    /* 위치 겹치기 */
    position: absolute;
    background-color: lightyellow;
    height: 2px;
    width: 75px;
    left: 0px;
    top: 48px;
    padding: 0px;
}

underLine.style.width = e.target.offsetWidth + "px";
underLine.style.left = e.target.offsetLeft + "px";
underLine.style.top = e.target.offsetTop + (e.target.offsetHeight - 8) + "px";

 

 

- 1~100 랜덤 숫자 뽑기 함수

function make_randomNum() {
  randomNum = Math.floor(Math.random() * 100) + 1;
}```

Math.random(): 0~1사이의 값을 반환 (1에 근접한 값까지만 1은 미포함)

Math.floor(): 소수점 버림 

Math.ceil(): 소수점 올림 

Math.round(): 소수점 반올림 

Math.max(): 여러값중 제일 큰값 반환 

Math.min(): 여러값중 제일 작은값 반환

 

- 랜덤한 아이디 만들기

function randomIDGenerate() {
    return '_' + Math.random().toString(36).substr(2, 9);
}