webomakase 님의 블로그

자바스크립트를 배우다 보면조건을 여러 개 묶어서 판단해야 하는 경우가 많습니다.이때 사용하는 것이 논리 연산자입니다. 논리 연산자란?조건이 여러 개인 경우, 그 조건들을 연결해서최종적으로 true 또는 false 값을 도출하는 연산자입니다. 논리 연산자 3종 정리표연산자이름의미예시결과||논리합 (OR)하나라도 true면 전체 truefalse || truetrue&&논리곱 (AND)하나라도 false면 전체 falsetrue && falsefalse!논리 부정 (NOT)true → false, false → true !truefalse 쉽게 이해하는 비유연산자생활 비유 예시||"김밥이 없으면 떡볶이라도 있어야 만족"→ 둘 중 하나라도 있으면 OK&&"김밥도 있고 떡볶이도 있어야 만족"→ 둘 다 tru..

자바스크립트에서 값을 비교할 때우리는 ==, ===, !=, !== 같은 비교 연산자를 사용합니다. 그런데 "10"과 10이 같다고요?어떤 건 true, 어떤 건 false... 헷갈리기 시작하죠?오늘은 자바스크립트의 비교 연산자를헷갈리지 않도록 예제와 함께 설명해드릴께요. 비교 연산자란?두 값을 비교해서 결과를 알려주는 연산자입니다.비교 결과는 항상 두 가지 중 하나.결과설명true맞다! (참)false아니다! (거짓) 자주 쓰이는 비교 연산자 정리표연산자뜻예시결과>크다 (초과)10 > 5true작다 (미만)10 false>=크거나 같다 (이상)10 >= 10true작거나 같다 (이하)10 false==값이 같다 (약한 비교)"10" == 10true!=값이 다르다 (약한 비교)"10" != 10fa..

자바스크립트를 하다보면, 숫자를 더하거나 뺄 때단순히 +, - 같은 연산만 쓰는 게 아니라값을 저장하고 조작하는 연산자도 자주 쓰게 됩니다. 그게 바로 오늘 배울 대입 연산자( = )와증감 연산자( ++ / -- ) 입니다.초보자도 헷갈리지 않게 하나씩 쉽게 설명드릴께요. 1. 대입 연산자란?= 기호는 값을 변수에 저장할 때 사용하는 연산자입니다. 여기서 = 는 "같다"가 아니라, 오른쪽 값을 왼쪽 변수에 넣는다는 뜻이예요. 2. 복합 대입 연산자란?복합대입 연산자는 =, +, -, *, % 같은 연산을한 줄로 간단하게 쓰는 방법입니다.연산자의미예시 코드결과+=더한 값은 다시 저장a += ba = a + b-=뺀 값을 다시 저장a -= ba = a - b*=곱한 값을 다시 저장a *= ba = a * ..

코딩에서 자주 쓰이는 기능 중 하나는 연산(계산) 입니다.자바스크립트에서도 우리가 초등학교 때 배운더하기, 빼기 같은 계산을 코드로 할 수 있어요. 이번 글에서는 자바스크립트에서 가장 기본이 되는산술 연산자와 문자 결합 연산자를 예제와 함께 쉽게 배워볼께요. 1. 산술 연산자란?산수 시간에 배운 사칙연산 기억나시죠?자바스크립트에서도 숫자끼리 계산할 수 있어요.이걸 바로 산술 연산자(arithmetic operator) 라고 부릅니다. 산술 연산자 종류연산자설명예시결과+더하기10 + 515-빼기10 -55*곱하기10 * 550/나누기10 / 52%나머지10 % 31 실습 예제 % 는 "나누고 남은 것" 을 구할 때 사용됩니다. 2. 문자 결합 연산자란?문자와 문자를 이어붙일 때 사용하는 연산자입니다.기호는..

자바스크립트에서 가장 기본이 되는 개념 중 하나가 변수입니다.정보를 저장, 사용하기 위해서는 변수명을 제대로 짓는 것이 매우 중요해요. 오늘은 변수를 선언할 때 꼭 지켜야 할 규칙과자주 쓰는 표기법을 정리해드릴께요. 변수명 작성 시 꼭 지켜야 할 규칙 5가지1.변수명은 영문자, $, _로 시작해야 해요 숫자는 맨 첫글자에 오면 안됩니다. 두번째부터 사용 가능합니다. 2. 변수명에는 영어, 숫자, $, _ 사용 가능 3.예약어는 변수명으로 사용할 수 없어요자바스크립트에서 이미 특별한 기능으로 예약된 단어는변수명으로 쓰면 절대 안됩니다. 예시 이미지와 같은 예약어를 쓰면 에러가 납니다. 4. 변수명은 의미있게 지어요 변수명을 잘 지으면 협업 시 모두가 이해하기 편합니다. 5. 변수명은 대소문자를 구분..

초보자를 위한 문자열, 숫자, 불린값 기초 개념코딩을 하다 보면 데이터를 많이 다루게 됩니다.그런데 이 데이터도 각각 종류가 있다는 사실, 알고 계셨나요? 자바스크립트에서는 데이터를 변수에 저장할 수 있는데,그 데이터에는 자료형(Data Type) 이라는 성격이 있습니다. 오늘은 자바스크립트에서 가장 기본이 되는3가지 자료형(문자형, 숫자형, 논리형) 을 쉬운 비유와 예제로 배워볼께요. 자료형이란?자료형이란, 데이터의 종류를 말합니다.변수에 어떤 종류의 값이 들어있는지를 알려주는 정보예요. 자바스크립트의 대표적인 자료형은 아래와 같습니다.자료형설명예시코드주의사항문자형 (String)따옴표로 감싼 글자 "Hello" '123' 숫자도 따옴표 있으면 문자형숫자형 (Number)연산 가능한 숫자 100 ..

자바스크립트를 배우기 시작했다면반드시 이해해야 할 핵심 개념 중 하나! 바로 "변수" 입니다. 변수를 모르면 코드에 데이터를 담을 수 없고,웹페이지가 아무것도 기억하지 못해요. 오늘은 자바스크립트에서 변수가 무엇인지,어떻게 쓰는지 아주 쉽게 설명해드릴께요! 변수란? 데이터를 담는 그릇이예요.변수는 '변하는 수' 라는 말처럼,변할 수 있는 값을 저장하는 공간이예요. 쉽게 말해, 변수는 데이터를 담는 상자 또는 그릇입니다. 변수는 이런 식으로 만들 수 있습니다. 변수의 가장 큰 특징은?오직 하나의 데이터만 담을 수 있어요.변수는 한 번에 하나의 값만 저장할 수 있어요.새로운 값을 넣으면, 기존 값은 사라지고 덮어쓰기 됩니다. 변수를 만드는 방법 (기본 문법)자바스크립트에서 변수를 만들려면 var 키워드를 사..

실수하면 바로 오류나는 주의사항 ⭐⭐⭐⭐ 코딩을 막 시작했는데, 코드가 작동하지 않는다면?"어? 왜 안되지?"사실 아주 사소한 실수 하나로도 오류가 생길 수 있어요! 오늘은 자바스크립트를 처음 배우는 분들이자주 틀리는 기초적인 주의사항 5가지를 알려드릴께요. 1. 자바스크립트는 대문자 / 소문자를 구분해요.자바스크립트는 철자에 아주 민감한 친구예요.'document'와 'Document'는 사람에게는 같아 보여도,컴퓨터에게는 완전히 다른 명령어입니다. 2. 항상 코드 끝에는 세미콜론(;) 붙이기.자바스크립트는 문장 끝에 ;(세미콜론) 을 붙여줘야 해요. 글의 마무리 즉, 마침표(.) 와도 같은 거예요. 3. 한 줄에 하나의 문장만 써주세요.코드는 읽기 쉬운게 최고입니다.한 줄에 문장을 여러 개 쓰면 가독..

코딩, 어디서부터 시작해야 하지?HTML만으로는 뭔가 부족하고, CSS로는 움직이지 않고...그럴땐 바로 자바스크립트! 코딩이 처음인 분도 이해할 수 있도록자바스크립트의 가장 기초적인 개념을비유와 함께 설명해드릴께요. 자바스크립트는 웹사이트 속의 "로봇"HTML은 집의 구조,CSS는 집을 꾸미는 인테리어라면자바스크립트는 그 집 안에서 움직이는 로봇이라고 할 수 있습니다.버튼을 누르면 문이 열리고 🚪마우스를 올리면 색이 바뀌고 🎨새 창이 뜨거나, 숫자가 계산되기도 하죠! 🧮이런 것들을 가능하게 해주는 게 바로 자바스크립트예요. 선언문이란?자바스크립트를 웹사이트에서 쓰려면, 먼저 선언해야합니다. 이걸 선언문이라고 불러요. 태그로 묶어이제부터 자바스크립트 쓸거야라고 브라우저에게 알려주는거죠. 주석문이란..

선택자is 선택자- 같은 스타일을 여러 태그에 한번에 적용하고 싶을 때 사용- 최근에 발표된 선택자- 복잡한 선택자를 조금 더 간단하게 바꿔줌. [기본형]- :is(선택자1, 선택자,2 선택자3...) {속성 : 값;} has 선택자- 부모 태그가 특정 자식 태그를 가지고 있는지 체크함. [기본형]- 선택자:has(B)