전체 글

조건(삼항) 연산자 if/else문과 switch문 말고 다른 것 하나가 더 있다. 바로 조건 연산자(conditional operator)이다. 조건 연산자는 if/else문과 유사한 것을 작성하려고 하지만 모두 한 줄에 있어야한다. const age = 23; age >= 19 ? console.log("I like to drink water"): console.log("I like to drink milk"); age >= 19 ← 나이가 맞는지 확인하는 테스트, 이 조건이 끝나면 뒤에 ?(물음표)를 붙여준다. 그리고 if 블록을 작성해준다. if블록은 내가 실행하고자 하는 코드이다. age >= 19 이 ? console.log("I like to drink water") ← 블록이 끝나면 :을 ..

switch 문 기본적으로 여러 다른 옵션에 우리가 원하는 모든 것이 하나의 값을 비교하는 것일때 작성하기 복잡한 if else문을 대체할 수 있는 방법은 switch문이다. 월, 화, 수, 목, 금, 토, 일을 나타내기 위해 if else문을 사용할 수 있지만 더욱 쉽게 switch문을 사용할 수 있다. 내가 지금 전환하려고 하는 것은 요일이다. 일단 먼저 switch () 를 작성하고 블록을 정의하기 위해 { } 중괄호를 사용한다. 그 다음 case를 정의한다. switch (day) { case "monday": ← 이때! 세미콜론이 아니라 콜론 : 으로 작성해야 한다. } 이제 여러 줄을 작성하려면 중괄호는 필요하지 않다. (마무리 할때 필요하다.) const day = "monday"; swit..

boolean logic은 컴퓨터 과학의 한 분야이며 true 및 false 값을 사용하는 복잡한 논리적 문제를 해결한다. 그러기 위해서는 여러 논리 연산자를 사용하여 true 와 false 값을 결합한다. 산술 연산자(Arithmetic operator)를 사용하는 것 처럼 숫자 값을 결합한다. 기본적인 논리연산자는 AND, OR 그리고 NOT 연산자이다. 그리고 Boolean logic은 JS에만 국한되지 않는다. EXAMPLE A: Sarah has a driver's license B: Sarah has good vision → Boolean 변수는 true일 수도 있고 false일 수 있다. A, B 두개 다 조건이다. AND 연산자 A AND B "Sarah has a driver's lice..

if else 문으로 결정을 내린다. 그러나 확인을 하려면 어떻게 해야할까? 두 값이 실제로 같다면, 하나가 더 크거나 또는 다른 것보다 적을 거다. 이를 위해서는 서로 다른 비교 연산자가 있다. 일치 비교 연산자(===) 만 19세 이상이 되면 어른이다. if else 문을 사용할 수 있다. 나이가 정확히 19세인지 확인하기 위해 일치 비교(===) 을 사용해야한다. const age = 19; if(age === 19) 한 줄이 있으면 두 개의 중괄호가 필요하지 않다. 따로 if(age === 19) { } ← 만들 필요가 없다. const age = 19; if (age === 19) console.log("You Just Becaome Adult"); 한 줄만 작성하면 된다. const age =..

형 변환(type conversion)과 타입 강제 변환 (type coercion) 형 변환(type conversion)은 한 유형에서 다른 유형으로 수동 변화이다. 타입 강제 변환(type coercion)은 JS가 유형을 scenes 뒤에서 자동 변환한다. 형 변환(type conversion) 명시적으로 원할 때 한 유형에서 다른 유형으로 수동 변환한다. 만일 웹 페이지에 출생 연도를 입력할 수 있는 입력 필드(input field)가 있다고 가정하면 일반적으로 문자열로 제공된다. const inputYear = "1991"; 내가 얻은 inputYear가 사용자 인터페이스에서 값이 1991인 문자열인거다. const inputYear = "1991"; console.log(inputYear +..

Float 자식이 부모로부터 떠오르다. 즉! margin을 없애다. 📘 The Code Magazine Blog Challenges Flexbox CSS Grid .main-header { background-color: #f2f4f3; /* padding: 20px; padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; margin-bottom: 60px; /*height: 80px;*/ } /* SMALLER ELEMENTS */ h1 { color: #dc0073; font-size: 26px; text-transform: uppercase; font-style: italic; } 아직 float 속성을 입력하기 전 화면이다. float ..

Layout 레이아웃은 텍스트, 이미지 및 기타 콘텐츠에 배치되고 웹페이지에 정리되는 방식이다. 레이아웃은 페이지에 시각적 구조를 배치하여 콘텐츠를 배치한다. 레이아웃을 만든다는 것은 페이지 요소를 단순히 배치하는 대신 시각적 구조로 구성하는 것을 의미한다. 페이지 레이아웃(page layout) 과 구성 요소 레이아웃(component layout) 웹 페이지 내부의 큰 콘텐츠, 웹사이트는 요소를 배치하는 시점까지이다. 더 확대한 그림은 구성 요소 자체가 더 작은 콘텐츠로 구성 요소 레이아웃으로 되어 있다. CSS 빌드하는 3가지 방법 Float Layouts 레이아웃을 구푹하는 오래된 방법, float css를 사용 flexbox, CSS Grid같은 최신 기술로 대체되고 있다. 오래된 웹사이트에서는..

if/else문을 활용하여 운전면허증 확인하는걸 만들어보겠다. 유럽기준 운전이 가능한 나이는 만18세 이상이다. 사람인지 아닌지, 운전이 가능한지, 불가능한지에 대해 if/else문을 작성할것이다. const age = 19; const isOldEnough = age >= 18; const isOldEngough = age >= 18;은 불리언으로 답한다. 만 18세 이상이면 true, 미만이면 false. 그에 대한 결정은 이제 if문을 사용한다. if(해야할 일) { } 이렇게 작성하면 도니다. 이제 이 조건이 사실로 발혀지만 if문의 중괄호는 실행된다. const age = 19; const isOldEnough = age >= 18; if (isOldEnough) { console.log("Li..

문자열은 프로그래밍에서 매우 중요한 부분이다. 문자열을 구축하려면 template literals(템플릿 리터럴)이 사용되야 한다. 템플릿 리터럴 활용 X일 때 const firstName = "jonas"; const job = "teacher"; const birthYear = "1991"; const year = 2037; const jonas = "I'm" + firstName + ",a " + (yaer - birthYear) + "years old" + job + "!"; (year - birthYear) 부분에서는 타입 강제 변환(type coercion)이 활용된다. 타입 강제 변환(type coercion)은 (year - birthYear) ← 이 숫자를 문자열로 변환하고 그것들을 연결..

const now = 2037; const ageJonas = now - 1991; const ageLisa = now - 2018; console.log(now - 1991 > now - 2018); 왜 빼기 연산자가 비교 연산자보다 먼저 실행될까? 자바스크립트는 잘 정의된 연산자를 우선 순위로 갖는다. 따라서 기본적으로 연산자가 실행되는 순서이다. 왼쪽 → 오른쪽 console.log(now - 1991 > now - 2018); 오른쪽 → 왼쪽 let x, y; x = y = 25 - 10 - 5; console.log(x, y); 뺄셈이 먼저 시작한 이유는 우선순위가 높기 때문이다. x = y 랑 값이 같다. y는 정의되지 않는다. 그 이유는 let x,y;에서 빈 변수로 선언했기 때문이다. 우선..