IT/javascript
논리연산자, null 병합 연산자 ??
논리연산자, null 병합 연산자 ??
2020.11.291. 첫 번째 truthy 를 찾는 OR 연산자 (||) result = value1 || value2 || value3; OR ||연산자는 다음 순서에 따라 연산을 수행합니다. 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다. 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환합니다. 피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환합니다. 여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다. 정리해 보자면 이렇습니다. OR "||" 연산자를 여러 개 체이닝(chaining) 하면 첫 번째 truthy를 반환합니다. 피연산자에 truthy가 하..
자바스크립트로 크롬 시계 앱 만들기 [3]
자바스크립트로 크롬 시계 앱 만들기 [3]
2020.10.151. 배경화면 다운로드 unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com 무료 이미지 다운로드 하는 사이트. 한 3개 정도 다운받아보자. 프로젝트 폴더 내에 images 폴더를 만들어서 안에다가 3개의 이미지 파일을 넣어보자 1.jpg, 2.jpg, 3.jpg 로 이름도 바꿔놓고 2. 랜덤 함수 Math.random() * 5
자바스크립트로 크롬 시계 앱 만들기 [2]
자바스크립트로 크롬 시계 앱 만들기 [2]
2020.10.141. to-do 리스트 만들기 이렇게 내용을 집어 넣고 엔터를 칠 때 마다 아래에 한줄 한줄 리스트 형식으로 추가되게 해보자 Write a to do 부분 html 이다. test 원래 위와같이 input text 밑에 목록을 만드는 엄마 태그 아래에 자식 목록 태그들을 하나씩 html에 써줘야 저렇게 표시가 될텐데... 내가 동적으로 엔터 칠때마다 저 html 에 하나씩 추가가 되어야 한다.. 이걸 자바스크립트로 동적으로 추가해보자? 00:00 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoL..
자바스크립트로 크롬 시계 앱 만들기 [1]
자바스크립트로 크롬 시계 앱 만들기 [1]
2020.10.131. 현재 시각 가져오기 new Date() 을 사용하여 getHours, getMonth 등 원하는 시각을 가져올 수 있다 2. 현재 시각 가져와 표시 00:00 // 아까 html 에서 00:00 건들꺼니까 // js-clock 클래스 안에서 한번 더 querySelector 로 h1 찾기 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds..
DOM / DOM Functions / Events handlers / if-else, and, or, === / 분리
DOM / DOM Functions / Events handlers / if-else, and, or, === / 분리
2020.10.121. DOM (Document Object Module) 자바스크립트는 html 에 있는 모든 요소를 가지고 온다. 그리고 그걸 객체화 해서 접근할 수 있게끔 한다. 한번에 보면 무슨말인지 몰라도 밑에 예시들을 보면 무슨말인지 이해 될듯 2. DOM Functions 이전에 만들었던 calculator.plus(), console.log() 과 같이 함수를 만들어 쓸 수도 있지만 브라우저에서 기본 제공하는 더 많은 함수들이 있다. This Works! 이런 html 페이지가 있다. const title = document.getElementById("title"); title.innerHTML = "Hi! From JS"; index.js 에 이런 내용을 적었다. html 에 있는 의 id 를 title..
let,const,var / data types / array / object / function / backtick
let,const,var / data types / array / object / function / backtick
2020.10.121. Vanila JS ? 자바스크립트의 한 종류로 라이브러리 등을 통해 변조되어 만들어진 것이 아닌 날 것의 자바스크립트 따로 설치할 건 없고 모든 웹 브라우저에 기본 내장되어 있다 2. let, const, var 셋 다 변수 타입들인데 let 은 변경이 가능하고, const 는 상수라 어떠한 이유에도 변경이 불가능 var은 let 과 같이 변경이 가능한데 3년 전에나 var만 쓸 수 있을 시절에 썼었음 (const나 let이 없었다) 그러니 let, const 를 쓰자 3. Data Types const what = "Nico"; // string const what = true; // boolean const what = 666; // number const what = 55.1 // float ..