Keyword overview
Variables
Data types
Undefined
Null
break
The Code Card
Variables
https://lshjju.tistory.com/738
Variables
프로그래밍의 가장 기초이자 핵심인 **변수(Variable)**에 대해 알아보겠습니다.변수는 데이터를 담아두는 '이름표가 붙은 상자'와 같습니다.1. 변수란 무엇인가?우리가 요리할 때 소금, 설탕을 각
lshjju.tistory.com
Data types
https://lshjju.tistory.com/737
Data types
변수라는 상자에 담을 수 있는 내용물의 종류인 **자료형(Data Types)**에 대해 알아보겠습니다.자바스크립트의 자료형은 크게 **원시 타입(Primitive Type)**과 **객체 타입(Object Type)**으로 나뉩니다.1.
lshjju.tistory.com
Operator
https://lshjju.tistory.com/736
Operator
데이터를 가공하고 논리를 판단하는 도구인 **연산자(Operators)**에 대해 알아보겠습니다.연산자는 변수에 담긴 자료들을 계산하거나 비교하여 새로운 값을 만들어내는 역할을 합니다.1. 산술 연
lshjju.tistory.com
Conditional statement
https://lshjju.tistory.com/735
Conditional statement
프로그램에 '판단력'을 부여하는 **조건문(Conditional Statements)**에 대해 알아보겠습니다.조건문은 주어진 조건이 참(true)인지 거짓(false)인지에 따라 서로 다른 코드를 실행하도록 흐름을 제어하는
lshjju.tistory.com
Truthy and Falsy
https://lshjju.tistory.com/743
Truthy and Falsy
조건문의 판정을 더욱 정교하게 만들어주는 Truthy(참 같은 값)와 Falsy(거짓 같은 값) 개념에 대해 알아보겠습니다.자바스크립트는 if 문의 괄호 안에 불리언(true, false)이 아닌 값이 들어오더라도,
lshjju.tistory.com
Loop statement
https://lshjju.tistory.com/734
Loop statement
프로그래밍의 마법이자 효율성의 끝판왕인 **반복문(Loops)**에 대해 알아보겠습니다.반복문은 똑같거나 비슷한 동작을 우리가 원하는 횟수만큼, 혹은 특정 조건이 만족될 때까지 자동으로 되풀
lshjju.tistory.com
Undefined
https://lshjju.tistory.com/744
undefined
나타나지 말아야 할 것 같으면서도 가장 자주 마주하게 되는 데이터 타입인 undefined에 대해 알아보겠습니다.undefined는 말 그대로 "정의되지 않았다"는 뜻으로, 자바스크립트에서 값이 할당되지
lshjju.tistory.com
Null
https://lshjju.tistory.com/745
-null
'비어있음'을 선언하는 명시적인 신호인 null에 대해 알아보겠습니다.앞서 배운 undefined가 "어쩌다 보니 비어있는 상태"라면, null은 개발자가 **"여기는 의도적으로 비어있는 곳이야!"**라고 확실히
lshjju.tistory.com
break
https://lshjju.tistory.com/733
break
흐름을 즉시 중단시키고 탈출하는 명령인 break 문에 대해 알아보겠습니다.break는 반복문이나 switch 문 안에서 실행되며, 엔진이 이 키워드를 만나는 순간 가장 가까운 코드 블록을 즉시 빠져나오
lshjju.tistory.com
Code training
16-1 변수 알아보기
변수란
변수 선언하기와 값 할당하기
변수 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/var-1.html
상수 선언하기
상수 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/var-2.html
변수 선언의 규칙
1 변수 이름은 영어 문자와 언더스코어, 숫자를 사용 합니다.
2 자바스크립트는 영어 대소 문자를 구별하며 예약어는 변수 이름으로 쓸 수 없습니다.
3 여러 단어를 연결한 변수 이름은 중간에 대문자를 섞어 씁니다.
4 변수 이름은 의미 있게 작성해야 합니다.
16-2 자료형 이해하기
자료형이란
숫자형
정수
TIP - 10진수, 8진수, 16진수
실수
문자열
특수 기호 표시하기
템플릿 리터럴로 문자 연결하기
논리형
undefined 유형과 null 유형
배열
자료형 변환하기
느슨한 자료형 체크
자동 형 변환
자료형 변환 함수
16-3 연산자 알아보기
산술 연산자
할당 연산자
비교 연산자
==, !== 연산자와 ===, !== 연산자 비교
문자열의 비교
논리 연산자
16-4 조건문 알아보기
if 문과 if~else 문 알아보기
3의 배수 확인하기 1
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/if-1.html
3의 배수 확인하기 2
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/if-2.html
조건 연산자로 조건 체크하기
조건 연산자를 사용해 3의 배수 확인하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/if-3.html
논리 연산자로 조건 체크하기
Or 연산자
or 연산자를 사용해 조건 체크하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/or.html
And 연산자
and 연산자를 사용해 조건 체크하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/and.html
Not 연산자
swtich 문
switch 문으로 조건 체크하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/switch.html
실습 - 자리 배치도 만들기 1
1단계 프로그램의 흐름 생각하기
2단계 자바스크립트 코드 작성하고 결과 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/16/seat-1.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/seat-1.html
16-5 반복문 알아보기
반복문은 왜 필요할까?
반복문 없이 1부터 5까지 숫자 더하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/repeat-1.html
for 문 사용하기
for 문을 사용해 1부터 5까지 숫자 더하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/repeat-2.html
for 문을 사용해 1부터 1000까지 숫자 더하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/repeat-3.html
중첩된 for 문 사용하기
for 문 2개로 구구단 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/timestable-1.html
기존 코드에 <div> 태그 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/timestable-2.html
구구단 스타일 작성하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/css/timestable.css
while 문과 do~while 문 사용하기
while 문으로 *표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/while.html
do~while 문으로 *표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/dowhile.html
break 문과 continue 문 사용하기
멈추는 break 문
break 문으로 구구단 4단까지만 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/timestable-3.html
건너뛰는 continue 문
1부터 10까지 짝수만 더하기
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/even.html
실습 - 자리 배치도 만들기 2
1단계 for 문의 구조 만들기
2단계 좌석 번호 만들기
3단계 좌석 번호 나열하기
4단계 좌석 번호를 표로 만들기
5단계 표 스타일 추가하고 결과 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/16/seat-2.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/16/results/seat-2.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! 자바스크립트 웹 표준의 정석' 카테고리의 다른 글
| DOM (0) | 2025.11.26 |
|---|---|
| JS and Object (0) | 2025.11.26 |
| Function and Events (0) | 2025.11.26 |
| Hello JS (0) | 2025.11.26 |