자바스크립트(java script)
자바스크립트(JavaScript)는 객체(object)기반의 스크립트 언어
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인(레이아웃 구성)하며, 자바스크립트로는 웹의 동작을 구현
JavaScript 코드는 HTML에서 <script>태그 안에 작성
JavaScript 코드는 <head>, <body> 태그 안에 작성할 수 있다.
* <head>태그 안에 작성될 경우
- 동작: HTML 본문(<body>)을 읽기 전에 자바스크립트를 먼저 불러오고 실행
- 용도: 설정 파일, 디자인 관련 라이브러리 등 화면이 보이기 전에 준비되어야 하는 코드들
* <body>태그 안에 작성될 경우
- 동작: 화면에 보일 HTML 요소들을 모두 다 그려낸 다음에 자바스크립트를 실행
- 용도: 일반적인 기능 구현, 버튼 클릭 이벤트 등 대부분의 스크립트
1. JavaScript 데이터 기본 타입
- 숫자(number)
- 문자열(string)
- 불리언(boolean): true or false
- undefined: 값이 할당되지 않은 상태
- null: 값이 없는 상태
2. 변수 선언
- var num = 1; → 숫자(number)
- var num = '1'; → 문자열(string)
- var num; → undefined
- let num = null; → null
- const num = 1; → 숫자(number)
* var, let, const
| 구분 | var | let | const |
| 재선언(똑같은 이름으로 만들기) | 가능(위험함) | 불가능 | 불가능 |
| 재할당(값만 바꿔주기) | 가능 | 가능 | 불가능 (상수) |
| 스코프(범위) | 함수 단위 | 블록 단위 | 블록 단위(Block) |
| 호이스팅 | 발생(초기화 됨) | 발생(초기화 됨) | 발생(초기화 됨) |
- var (과거의 유산): 똑같은 이름으로 변수를 또 만들어도 화를 내지 않습니다. 코드가 길어지면 실수로 값을 덮어쓸 위험이 매우 큽니다.
- let (가변 변수): 이름이 같은 변수를 또 만들면 에러를 냅니다. 단, 들어있는 값은 언제든 바꿀 수 있습니다.
- const (상수): "한 번 정하면 끝!"입니다. 재선언도, 재할당도 안 됩니다. (단, 객체나 배열 내부의 값을 바꾸는 것은 가능합니다.)
- 배열: 여러 개의 데이터를 하나의 변수에 순서대로 담기 위해 사용하는 바구니
3. 예제
설명: person 이라는 객체(보관함)에 name과 age라는 프로퍼티를 저장하고,
greet()라는 함수(행동)에 안녕하세요, 저는 세종입니다. 앞으로 잘해보아요 저장해서
데이터와 행동을 한 곳에 묶은 것이라고 할 수 있다.
* this 키워드:
greet()라는 메서드(함수)안에 사용된 'this'는 이 함수를 담고 있는 객체(person)을 가리킨다.
- this.name이라고 쓰면, 객체 안에 있는 name 프로퍼티인 "세종"을 가져오게 된다.
* 템플릿 리터럴(Template Literals):
- 백 틱(`): 일반 따옴표(', ")는 줄을 바꿀 때 \n 같은 기호를 써야 하지만, 백틱은 코드에서 엔터를 치는 대로 실제 문자열에 반영
- 보간법 (${}): 문자열 중간에 변수나 계산식을 직접 삽입가능
- 예전 방식: "안녕하세요, 저는 " + this.name + "입니다."
- 현재 방식: `안녕하세요, 저는 ${this.name}입니다.`
4. document
DOM(Document Object Model) 객체: DOM은 말 그대로 웹 페이지의 모든 콘텐츠들을 객체로 나타내 주는 것
웹 페이지를 document라 부르고 이러한 document를 자유롭게 다루기 위해 객체화 하고자 구현된 개념이 결국 DOM이라고 생각할 수 있다.
-사용예시
의미: 웹 페이지에 person이라는 객체에 있는 greet()를 출력한다.
의미: 문서(document)안에서, 아이디가 result인 것을 찾아 찾아낸 요소의 텍스트 영역(innerText)에 접근, 기존에 들어있던 내용은 지워버리고, 새로운 문자열을 집어 넣는다.
* "원본(소스 코드)은 변하지 않는다"
document.getElementById('result').innerText = '이순신';이라는 코드를 실행해서 화면의 글자를 바꿨을 겁니다. 하지만!
- 화면: '이순신'으로 보입니다. (성공)
- 실제 HTML 파일: 메모장으로 .html 파일을 열어보면 여전히 원래 글자 그대로입니다.
즉, document 객체를 이용한 수정은 **브라우저의 메모리(RAM) 상에서만 일어나는 "일시적인 마법"**입니다. 새로고침을 누르는 순간 마법은 풀리고 원래 HTML 파일의 내용으로 돌아가 버리죠.
5. console
개발자와 브라우저가 대화하는 '비밀 게시판' 또는 '일기장' 같은 객체
-사용예시
의미: "안녕하세요"라는 정보 출력한다.
6. window
자바스크립트에서 가장 높은 계층에 존재하는 **최상위 객체(Global Object)**
의미: window.onload는 웹 페이지의 모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 완전히 로드되었을 때 실행되는 이벤트 핸들러로 아이디가 result인 것을 찾아 찾아낸 요소의 텍스트 영역(innerText)에 접근, 기존에 들어있던 내용은 지워버리고, 새로운 문자열을 집어 넣는 동작을 모든 리소스가 완전히 로드된 후 실행한다.
7. 연산
- 산술연산
- 대입연산
- 증감연산
- 비교연산
- 논리연산
- 삼항연산
8. 제어문
- 조건문
- if문: 조건식이 **참(true)**인지 **거짓(false)**인지에 따라 코드를 실행, 범위 비교나 복잡한 논리식을 다룰 때 유리
-
- switch문: 특정 변수가 어떤 값을 가지느냐에 따라 실행 지점을 결정합니다. 여러 개의 "값"을 하나씩 대조해 볼 때 if보다 가독성이 좋다.
- 반복문
- while문: 횟수보다는 "어떤 상태가 될 때까지" 반복하고 싶을 때 사용한다. 조건이 true인 동안 무한히 반복(멈추고 싶으면 break;사용)
- for문: "몇 번 반복할지"**를 미리 알고 있을 때 주로 사용합니다. 초기값, 조건식, 증감식을 한 줄에 모아 쓰기 때문에 가독성이 좋다.
느낀점
HTML, CSS가 끝나고 JavaScript언어를 시작했다. 나는 한번도 써보지 않은 언어이지만 연산자, 제어문 등 공통된 부분들이 많아 초반에는 이해하는데 어렵지 않았다. 그래서 JavaScript언어를 공부하면서 객체, 노드 등 JavaScript에서 주로 쓰이는 부분들을 책이나 영상을 보며 좀 더 따로 공부해야겠다는 생각이 들었다.
——————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'학습일지' 카테고리의 다른 글
| [스나이퍼팩토리] 한컴AI아카데미(26.04.09) (0) | 2026.04.09 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미(26.04.08) (0) | 2026.04.08 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.06) (0) | 2026.04.06 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.01) (0) | 2026.04.04 |
| [스나이퍼팩토리] 한컴AI아카데미(26.03.30) (0) | 2026.04.04 |