온라인 학습 플랫폼인 프리 코드 캠프(free code camp)에서는 초보자를 위한 40가지의 자바스크립트 프로젝트를 안내하고 있다. 항해99 온보딩주차 팀원분들이 자바스크립트 연습을 위해 해당 프로젝트를 만들어보는 스터디를 제안해 주셔서 기쁘게 참여했다. 오늘의 구현 프로젝트는 Color Flipper! 기능 분석 해당 프로젝트는 다음과 같은 기능을 가지고 있다. CLICK ME 버튼은 클릭할 수 있다. 버튼 클릭 시 랜덤한 색상값을 가져와 HTML의 배경에 해당 색상값을 적용시킨다. 랜덤한 색상값은 헥스 코드(HEX CODE)를 이용해 표현한다. 헥스 코드란 특정한 색을 표현하기 위한 색상 표현법으로, HEX라는 이름처럼 색상을 6자리의 16진수로 표현한다. 16진수는 0, 1, 2, 3, 4, 5..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Clock Interval interval이란, '매번' 일어나야 하는 무언가를 말한다. (ex. 매 2초) 서버를 주기적으로 확인한다거나, 매 시간마다 주식시장 API를 확인한다거나 해야 할 때 주로 사용한다. 이러한 기능을 제공하는 것이 setInterval()이다. ✨ setInterval(code | func[, delay]) - 첫번째 매개변수: 내가 실행하고자 하는 code 또는 function (단, code는 보안 상의 이유로 사용을 권장하지 않음) - 두번째 매개변수: 호출되는 code 또는 function의 간격을 몇 ms로 할 것인지 설정 Timeout timeout은 '..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Input Values 이름을 입력받을 input과 버튼을 만든 후, 버튼 클릭을 감지해서 input의 입력값을 console.log에 찍어본다. // HTML Log In // JavaScript /* const loginForm = document.querySelector('#login-form'); const loginInput = loginForm.querySelector('input'); const loginButton = loginForm.querySelector('button'); */ // * 위의 코드를 더 짧게 바꿔보기 // 이와 같이 document 또는 하나의 eleme..
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. HTML in JavaScript 1. document.getElementById() document JavaScript가 HTML과의 상호작용을 가능하게 한다. 브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음) document.getElementById() document의 함수 중 하나이다. HTML에서 id를 통해 element를 찾아낸다. 예시 // string을 전달받는 함수이므로 괄호 안에 ''를 쓴다. document.getElementById('title'); // Olivia! // log보다 더 자세히 출력되는 console.di..
설명 Array.prototype.sort()는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다. 이때 배열 안 모든 요소는 문자형으로 변환된 후, 유니코드 단위의 값을 비교한 뒤 재정렬된다. 배열 안의 요소가 숫자일 경우도 숫자끼리의 크기 비교를 하지 않고 숫자를 문자열로 변환한 뒤 해당 문자열의 유니코드 값을 비교하여 정렬을 하게 된다. 9와 80이라는 두 수를 sort()로 비교할 경우 숫자로는 9가 80보다 우선하지만, 유니코드 순서 상으로는 80이 9보다 앞에 위치하고 있어 80을 9보다 앞쪽에 정렬하게 된다. 구문 // 기본 구문 값 arr.sort([compareFunction]) // 화살표함수를 이용한 표현법 arr.sort((a, b) => { /* ... */ } comp..
변할 수 있는 임의의 값, '변수'를 생성하기 위해 자바스크립트는 var, let, const 라는 키워드를 제공한다. ES5까지는 var 키워드만 사용되었는데, ES6부터는 let과 const도 이용하여 변수를 생성할 수 있다. 그렇다면 왜? 굳이 let과 const라는 키워드를 추가하여 변수를 만들 때 셋 중 하나를 선택하게 해두었을까? var 아이스크림이라는 변수를 var로 생성하고, 500이라는 값을 주었다. 따라서 콘솔로 찍어보면 아이스크림은 500이라는 값이 나온다. 이때, 변수 빵이 가지고 있는 값이 1000 이상이라면, 아이스크림이라는 변수를 다시 선언하여 1000이라는 값을 부여한다. if문의 괄호 시작, 끝 점이 끝났으므로 if문 안에서 선언된 var 아이스크림 = 1000;은 괄호 밖..
