yuhun do IT

Math Math는 숫자에 대해 유용한 객체이다. 그중 random은 많이 사용되는데 예시로 알아보자. Math.random()은 기본적으로 0~1사이 값을 반환한다. 즉 1은 절대 나올 수 없음. 그래서 0 ~ 10을 원한다면(0부터 9까지 나옴) Math.random() * 10 이렇게 사용하고 1 ~ 10 의 숫자를 원한다면 Math.random() * 10 + 1 처럼 사용한다. ​ 하지만 이것은 사실 1.xxxxxx 처럼 소수점 아래 값이 나오기에 버림 올림 반올림중 택해야 한다. 일반적으로 버림이 편하다 생각하는데 Math에서는 floor()를 취급한다. 다음과 같이 쓸 수 있다. // 0 ~ 10 사이의 숫자를 원할 때 0,1,2,3,4,5,6,7,8,9 Math.floor( Math.ran..

String() String은 문자열로 만들어준다고 할 수 있다. 간단하지만 중요. 1 3 17 같은 숫자를 string(number) 하면 "1" "3" "17"로 만들 수 있다. + parseInt()는 반대로 숫자로 이루어진 문자열을 number로 바꿔준다. padStart() padStart()는 문자열을 채워주는 역할을 하는데 편리하다. 두 개의 인자가 들어가는데 첫 번째는 내가 만들 문자열의 길이 두 번째는 빈 공간을 채울 문자이다. ​ 예를 들어 "hi"라는 문자열이 있고 문자열의 길이 5중 나머지를 "0"로 채우고 싶다면 다음과 같다. let hi = "hi"; // string 문자열 hi = hi.padStart(5,"0"); 결과 hi => "000hi"; 다른 예로 12:2:6 같은..

`${ }` 자바 스크립트에서 string과 변수를 섞어 사용할 때 여러 방법이 있다. 요소.innerText = `Hello ${username}`; 중요한건 ' 가 아니라 ` 이다(~키와 같이 있는 것) lacalStorage 로컬 스토리지는 브라우저에 정보를 저장하기 좋다. 중요한 특징은 새로고침을 하더라도 그래도 남아있다는 것. (파이썬의 Dictionary와 비슷하다.) ​ USERNAME_KEY 는 key값의 할 변수이고 username은 key 값으로 찾을 value이다. localStorage.setItem(USERNAME_KEY, username); // 값 저장 localStorage.getItem(USERNAME_KEY); // 값 찾기 localStorage.remove(USERNA..

form에서 버튼을 클릭하거나 엔터를 누르면 기본적으로 submit가 실행된다. (비슷하게 기본 예로 a 태그를 클릭하면 link로 이동한다.) const hello = (evnet) => { // 자바스크립트의 함수는 기본적으로 첫번째 인자를 가지고 있고 관례상 event라 사용. event.preventDefault() // 기본 동작을 막는 함수. }; 위와 같이 자바 스크립트에서는 기본 인자가 있고 이는 여러 정보를 담고 있다. 이 인자는 관례적으로 event라 사용한다. ​ event 인자의 메서드 중 preventDefault()는 브라우저 상에서 작동하는 기본 동작을 제한하는 기능을 한다. 예를 들어 form에서는 submit 하지 않고 a 태그의 링크에서는 링크로 이동하지 않는다.

DOM 은 문서 객체 모델로 자바스크립트에서 모든 요소를 객체로 보는 것이다. queruSelector도 DOM을 기반으로 한 것이고 DOM을 이용해 모든 요소에 접근 및 수정이 가능. ​ 이를 이용해 원하는 요소를 추가하거나 제거할 수 있으면 변경도 가능한데 아래 간단한 예제가 있다 ​ 노드 추가 및 연결 부모노드.appendChild(자식노드); const newElementNode = document.createElement(노드 이름); const newTextNode = document.createTextNode(텍스트); // 텍스튼노드는 요소노드에 appendChild로 연결 가능 const newAtrribute = documnet.createAttribute(속성명); 요소명.setAtt..

addEventListener addEventListener는 요소에 이벤트를 추가해 줄 수 있다. example을 querySelector로 받아왔다고 가정하고 아래와 같이 작성 가능하다. example.addEventListener("click", 함수이름 ); 중요한 건 함수 이름을 쓸 때 ()를 쓰지 않는 것이다. classList (add remove toggle) 대표적 사용으로 요소의 이벤트가 일어났을 때 css style 변경에 사용 가능하다. className은 class 전체를 바꾸지만 classList를 사용하면 부분적으로 수정이 가능해 이용할 수 있다. add 와 remove의 사용 예로는 아래와 같다. if(example.classList.contains(클래스 이름)){ exam..

parseInt 는 string의 숫자 "123456"을 number인 123456으로 바꿔주는 역할을 한다. 이는 비교 ===를 할 때나 연산을 할 때 각각 다른 결과를 리턴함으로 주의할 필요가 있다. (파이썬에서 int()나 str()을 생각하면 된다.)​ isNaN은 숫자인지 판별하는 Boolen 함수이다. is Not a Number 의 줄임말. isNaN에 숫자가 아닌 것을 argument로 주면 false를 리턴하고 숫자라면 True를 출력한다.

css는 변수를 사용할 수 없는 줄 알았는데 사실 가능하다. 아래 예를 보자 :root { —-text—color : #fff; } #id { color : var(—text-color); } 자바 스크립트에서 자료형에 null 값을 줄 수 있는데 이건 정의하지 않은 undefined와는 다르다. null은 의도적으로 아무것도 없음을 표현한 것이다. 할당만 되고 빈 공간인 undefined와는 구별되어야 한다. 자바 스크립트뿐 아니라 다른 언어도 같은 맥락이다.

visibility는 내가 고민하던 부분을 해결해 준 속성이다. opacity를 이용하면 눈에 보이지는 않지만 클릭이 되는 불편함이 있었는데 이걸 visibility를 사용하면 눈에 보이지 않을 땐 아예 없는 것처럼 보이고 보일 땐 클릭이 가능한 요소를 만들 수 있었다. ​ transform-origin은 요소의 transform 기준점을 잡아준다. 이를 이용해 조금 더 쉬운 위치 설정이 가능하다.

inline 요소를 연속으로 배치하면 사이에 공간이 생긴다. 코딩할 때에는 전혀 문제가 없어 보이지만 웹 페이지를 보면 까닭 모를 여백이 생기는데 이는 font-size 때문이다. 해결은 font-size를 0으로 해주거나 display 속성을 이용해 block 요소로 바꾸어 줄 수 있다. img 태그를 배치할 때 애먹었다..