분류 전체보기48 Falsy/Truhty, ==/=== JS는 값들에 falsy와 truhty가 있다. Falsy 0, -0, false, undefined, null, "", '', '', NaN 위의 Falsy값 이외의 모든 값들은 Truhty값이다. Falsy와 Truhty는 사용자가 정확한 Boolean 값이 아니더라도 JS에서 필요할 때 적절하게 바꿔준다. (조건문 등) 주의점 // true '' == 0; false == 0; null == undefined; // false 0 == undefined; '' == null; NaN == NaN; Falsy와 Truhty는 만약 해당 타입이 코드에 적절한 타입이 아닐 경우 true 혹은 false로 바꾸어 줄 뿐이다. 값 자체가 바뀌는 것은 아니기 때문에 같음을 비교하려고 한다면 타입까지 비교해주는.. 2021. 12. 24. JS의 요소들 Variables Identifiers는 숫자, 알파벳, $, _ 가 사용될 수 있으나 숫자로 시작해서는 안된다. 또한 예약어는 Identifiers가 될 수 없다. var one = 1;은 var one; one = 1; 을 하나로 합친 코드이다. 따라서 var one=1; 이라는 코드는 one이라는 변수를 만든 후에 1을 one에 대입하는 코드이다. Boolean Boolean은 True와 False 두가지 값만 가진다. console.log란? 자바스크립트 console.log인수로 설정한 값을 디버거 콘솔에 표시하는 함수. 디버깅 시 강력하게 사용가능 null & undefined undefined "정의되지 않음" 을 뜻한다. 어떤 변수를 만들고 그 값을 정의해주지 않았을 때 사용. 값이 대입되.. 2021. 12. 24. input.onkeydown의 동작 input.onkeydown = function changeHeader () { header.textContent = input.value; }; 키보드의 입력을 감지하는 onkeydown이벤트를 구독하고(input.onkeydown) 이벤트가 발생하면(키보드 입력) changeHeader 함수가 호출되고 input에 입력된 값을 저장한다. function changeHeader(){}를 통해 changeHeader라는 함수를 사용자가 정의했다. input.onkeydown을 통해 들어온 값을 input.value에 저장하고 이 값을 .textContent이벤트를 통해 header변수의 값을 바꾼다. header변수는 header태그를 할당하였으므로 header태그의 컨텐츠가 바뀐다. //더 공부해 볼 .. 2021. 12. 24. npm으로 JavaScript 모듈 설치하기 바닐라코딩 사전 가이드 진행중에 JavaScript Konas의 과제를 풀게되었다. Konas의 Readme에서 Konas는 테스트러너로 Jasmine을 사용했다고 나와있다. 여기서는 테스트를 수행하는 자세한 방법은 쓰지 않고 우선 기본적인 npm 사용방법을 알고 Jasmine을 설치해보자. NPM이란? Node Packaged Manager의 약자로 node.js로 만들어진 package를 관리해주는 도구이다. 개발자는 npm을 통해 node.js로 만들어진 module을 웹에서 받아서 설치하고 관리할 수 있다. NPM을 사용하기 위해선 node.js를 설치해야한다. node.js 설치파일 안에 npm이 내장되어 있다. npm으로 package(module) install/uninstall하기 현재 d.. 2021. 12. 15. Node vs Element Node: DOM API에 존재하는 모든 것. 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를 들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할 수 있다. Element: Node에 속해있고 one specific type of node이다. div, body, head등과 같은 특정 타입. 부모 인터페이스인 Node와 그 부모인 EventTarget의 속성을 상속한다. 참고자료) Node - Web API | MDN (mozilla.org) Node - Web API | MDN Node는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은.. 2021. 12. 8. CSS 레이아웃 Hello Vanilla Coding aaa bb Block vs Inline block block요소 : 화면상에서 항상 새로운 줄에서 시작, 위 아래에 서로 쌓이는 형식. 기본적으로 사용 가능한 최대치의 폭을 차지함 block요소들은 또 다른 block 요소를 자식으로 가질 수도 있고 Inline 요소를 자식으로 가질 수도 있다. 제약x ex)p, div 태그 inline 요소 : 하나에 이어 또 다른 하나가 줄줄이 이러 붙어서 나타남. 요소 내부 컨텐츠의 양만큼만 폭을 차지함. Inline요소는 또 다른 Inline요소들을 자식으로 포함가능. 그러나!! Block요소를 자식으로 품을 수는 없다. ex)span태그 Positioning flex display: flex; 를 사용하면 다양한 화면에 대.. 2021. 11. 24. 이전 1 ··· 4 5 6 7 8 다음
