이다닷

조건문이란? 조건문이란 주어진 조건의 참/거짓의 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. 여기에서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다. ex) 게임 캐릭터의 HP가 0입니까? => true일 경우 캐릭터가 죽는다. if문 키워드 if를 이용해 만드는 구문 'if문'은 가장 일반적인 형태의 조건문이다. If문의 기본 형태 if(조건) { // 조건이 true일 때 실행할 코드 } //예시 let HP = 0 if(HP === 0) { console.log("You are die!") } // You are die! 가 출력된다. if - else문 else를 추가하여 조건이 거짓일 때의 할일을 추가 정의할 수 있다. 📌독립적인 els..

자바스크립트에서 비교란? 자바스크립트는 주어진 두 항을 비교할 수 있는 '비교 연산자'를 제공한다. 다음 두 가지 유형의 비교를 할 수 있다. 대소 비교 (크다, 작다) 등가 비교 (같다, 다르다) 📌무언가를 비교하는 작업 또한 '연산'의 일종으로 취급한다! 비교 연산의 특징 비교 연산식은 언제나 boolean 데이터를 반환한다. 크냐 작냐를비교하는 대소 비교, 같냐 다르냐를 비교하는 등가 비교는 모두 하나의 질문이며, 질문에 대한 답이 참(True) 또는 거짓(False)인 것이다. 대소 비교 대소 비교는 다음 네 가지 연산자를 사용해 처리할 수 있다. 의미 연산자 사용 형태 크다 > A > B 작다 = A >= B 작거나 같다

window.document window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다. 즉, DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다! 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 속성과 메소드를 제공 document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다. 📌관련 문서 링크 Document - Web API | MDN (mozilla.org) Document - Web API | MDN Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. D..

DOM을 알아보기 전에 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 렌더링의 세부 과정 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생성한다. 이를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. 아래에 있는 사진처럼 트리 형태를 띄우게 된다. DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.

NULL 널(null) 데이터는 '없다'를 의미하는 데이터이다. 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다. 📌 숫자 0이 아닌 null로 아무것도 없다는 뜻이 된다. number = 0; => 이 변수는 0이다 number = null; => 이 변수에는 아무 것도 없다 UNDEFINED 언디파인드(undefined)는 아직 데이터가 정의되지 않았음을 나타낸다. 📌정의하는 코드를 적어주어야 콘솔에서 숫자 확인이 가능하다. let number; console.log(number); => undefined 가 출력됨 number = 3; console.log(number); => 3 이 출력됨 BOOLEAN 불리언(boolean)은 숫자, 문자열과 같은 데이터 타입 중 하나이다..

연산 연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다. 사용자는 자바 스크립트 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 '연산자'라 한다! 산술 연산 산술 연산은 더하기, 빼기 등 수를 이용한 계산이다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다. 의미 연산자 예제 더하기 + 2 + 2 -> 4를 반환 빼기 - 5 - 2 -> 3을 반환 곱하기 * 3 * 2 -> 6을 반환 나누기 / 1 / 2 -> 0.5를 반환 나머지 % 12 % 5 -> 2를 반환 결과의 반환 산술 연산을 처리하는 식을 사용하면, 해당 식은 연산 결과를 반환한다. 즉, 식이 데이터로 대체된다! 📌실제 코드가 바뀌는 게 아닌, 실행 시에 결과가 반영된다는..

템플릿 리터럴 기존의 문자열은 따옴표를 이용해 표현했지만, 템플릿 리터럴은 백틱을 이용해 표현한다. 기존의 문자열과는 달리 표현식을 내장할 수 있는 문자열 표현법이다. //따옴표를 이용한 기존의 문자열 const str1 = '작은 따옴표' const str2 = "큰 따옴표" //백틱을 이용한 템플릿 리터럴 const str3 = `백틱` 표현식 삽입 방법 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더 (${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다. 데이터를 반환하는 메소드 또한 데이터와 마찬가지로 취급할 수 있다. 데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입될 수 있다. 변수, 메소드 등 모두 가능. 오늘의 실습 1 let number ..

상수란 무엇일까? 상수란 수식에서 '변하지 않는 값'을 뜻한다. 변수와 반대되는 것으로, 상수는 '단 하나의 데이터만을 위해 사용하는 이름표'로써, 값의 변경이 불가하다. 상수도 변수처럼 지정된 데이터 대신 사용할 수 있다. 상수 만드는 법 const 상수이름 = 데이터; 상수의 선언과 초기화 상수를 만들때에는 변수와는 다르게 선언과 초기화를 동시에 해야한다. 그렇지 않으면 데이터를 지정할 수 없다. window.prompt(x) window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드이다. prompt로 받은 문자열을 자신이 사용된 곳 그대로 '반환'한다. 즉, 메소드가 입력받은 문자열로 바뀌게된다. 📌실제로 코드가 바뀌는 게 아닌 바뀐 것..

변수란 무엇일까? 변수란 '데이터에 붙이는 이름표'이다. 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용 할 수 있게 된다. 📌변수를 생성하고 나면, 변수를 지정된 데이터 대신에 사용할 수 있다. 변수의 선언과 초기화 변수를 만드는 작업 -> 변수의 선언 만들어진 변수에 첫 데이터를 지정하는 작업 -> 변수의 초기화 두 과정은 동시에 진행할 수도, 따로 진행할 수도 있다. let 변수이름; // 변수 선언 변수이름 = 내용; // 변수 초기화 let 변수이름 = 내용; // 변수 선언과 초기화를 동시에 수행 변수의 특징 변수는 변한다는 특징을 가지고 있다. 변수는 데이터를 기억하기 위해서 사용한다. 변수는 한 번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 바꿔..

콘솔의 의미 콘솔은 브라우저의 디버깅 콘솔을 의미한다. 콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다. window.console로 객체가 가지고 있는 데이터에 접근할 수 있다. window. 을 생략한 채로 코드를 작성할 수 있다. console에 접근할때, window.console 과 console가 똑같다. 자바스크립트 코드 작성 규칙 대문자와 소문자를 구분하여 작성하기 구문의 끝에는 ';'을 입력해 '구문의 끝'을 알리기(선택사항) 가능하면 한 줄에 두 개 이상의 구문을 사용하지 않기(권장사항) 📌 ; 은 한줄의 코드에 두 개 이상의 구문을 사용할 때 필수로 필요함 실습 코드 console.log('안녕하세요') console.log('하나 더') ..