2025/09/13 JavaScript

김기훈·2025년 9월 12일

TIL

목록 보기

20/194

JavaScript는 프로그래밍 언어이다.

프로그래밍 언어로써, 소프트웨어적 대상에게 명령을 내리는 역할을 수행
- 소프트웨어적 대상 : 웹브라우저, 웹 요소, 웹 스타일 등을 의미
서버개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있다.
- 주로 인터넷을 통해 서비스 되는 웹사이트를 개발하는 일을 주로 한다.

JavaScript 주석

//주석 : 한줄 주석
/ 주석 / : 여러 줄에 걸쳐 쓰는 주석

웹사이트 개발 삼형제

HTML : 웹 콘텐츠를 정의한다.
CSS : 웹 콘텐츠를 스타일링한다.
JavaScript : 웹사이트의 동작이나 상호작용을 정의한다.

웹 개발에서의 JS의 역할

웹브라우저 및 하위 객체가 가진 기능을 구동
HTML/CSS 를 통해 렌더링된 화면을 조작할 수 있다.
- 렌더링 : 데이터나 코드를 사람이 볼 수 있는 형태로 변환해 보여주는 과정
  - index.html 파일에 <h1>Hello</h1> 이라고 쓰면 브라우저가 이걸 읽고 화면에 큰 글씨의 "Hello" 를 보여주는 것 이 전체 과정이 렌더링

JS의 작성 위치

웹 페이지에 JS코드를 적용시키는 방법으로는 두 가지가 존재

HTML문서 내부에 작성하기
- 내부에 작성할 땐 <script> 태그를 사용
JS파일을 만들고, 그 안에 작성한 코드를 HTML문서에 연결하기
- JS파일을 별도로 만들 때는, 확장자가 js인 파일을 만든다.

JS 동작원리 & 출력해보기

스크립트 동작 원리
- 명령을 내리고싶은 대상에 JS 명령을 전달하면
  - 입력 -> 처리 -> 출력 순으로 작업이 이루어진다.

입력 처리 출력

자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜 "객체" 라고 한다.

입력 : 객체에게 어떤 작업을 수행하라는 명령을 전달
처리 : 객체가 주어진 작업을 수행한다.
출력 : 객체가 작업을 수행한 결과를 사용자에게 반환한다.
자바스크립트에는 다양한 객체 이름이 미리 정의되어 있어 사용자는 이를 어떻게 사용하는지만 알면됨

객체를 다루는 법

자바스크립트가 제공하는 객체 이름을 선택하고,뒤에 점(.)을 붙인 다음 전달하고자 하는 명령을 입력

자바스크립트 코드는 기본적으로 작성된 순서에 맞춰 차례차례 작업을 수행
명령문은 한 줄에 하나씩 쓰는 것이 좋다.
명령문의 끝에는 선택적으로 세미콜론을 붙일 수 있고, 세미콜론의 의미는 '명령문 하나 끝'이라는 의미

window

window 를 이용하면 웹부라우저에게 다양한 명령을 내릴 수 있다.

window.alert(내용) : 내용을 쓴 경고창을 화면에 띄워줌

콘솔 출력 & 자료형 개념

콘솔(console) : 명령을 입력하거나 프로그램 실행 결과를 확인할 수 있는 창
브라우저 화면에 사용자에게 보여주기 전, 코드가 어떻게 동작하는지 확인하거나 오류를 추적하는 데 사용

콘솔(Console)은 브라우저의 디버깅 콘솔을 의미한다.
콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근가능
- window.console : 객체 뒤에 .을 찍으면 객체가 가지고 있는 데이터에 접근할 수 있다.
  - 웹브라우저에 접근할 수 있게 해주는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이터,메소드 등을 포함하는데 사용자의 편의를 위해 window를 생략한 console로 코드를 작성가 즉, window.console = console 성능이 똑같음

디버깅 콘솔

개발자 도구 -> Console을 누르면 나타나는 화면이 "디버깅 콘솔"

console.log(X)

console.log(x) 명령문은 디버깅 콘솔에게 '콘솔창에 x라고 써 줘' 라는 명령을 전달

x 자리에는 사용자가 원하는 내용을 입력하면 되지만 자바스크립트 문법으로 표현 가능한 데이터만이 x 자리에 들어갈 수 있다.

변수 상수 대입

변수

변수 : 데이터에 붙이는 이름표
- 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해 두었다가 필요 할때마다 재사용 가능
- 변수를 만드는 방법(변수의 선언) : let 변수이름 = 데이터;
- 변수의 첫 데이터를 지정(변수의 초기화) : 변수이름 = 데이터;
  - let 변수이름; //변수선언 , 변수이름 = 데이터; // 변수초기화 동시 가능
변수는 한 번에 하나의 데이터만 기억 가능, 기억하고 있는 값을 바꿔가며 사용 가능

                  let 변수이름 = 데이터1; // 변수 선언과 초기화 동시진행
                  변수이름 = 데이터2; // 새로운 데이터 대입
                  변수이름 = 데이터3;  // 새로운 데이터 또 대입

변수의 제약사항
- 변수명에는 오직 문자와 숫자,그리고 기호 $과 _만이 포함 가능
- 변수명의 첫 번째 글자로 숫자는 올 수 없다.
- 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용 불가

상수

상수 : 수식에서 '변하지 않는 값'을 뜻
- 변수와 반대되는 것, 상수는 '단 하나의 데이터만을 사용하는 이름표', 값의 변경이 불가
- 상수 만드는 방법 : const 상수이름 = 데이터;
- 상수도 변수처럼 지정된 데이터 대신 사용 가능, 이름 짓기 규칙은 변수 이름 짓기와 동일

상수를 만들 때는 선언과 동시에 초기화를 해주어야 한다. 그렇지 않을시 데이터 지정 불가

const 상수이름;
상수이름 = 데이터; // 상수의 선언과 초기화를 따로한 것 = 에러 발생!
// 상수는 자신이 선언될 때 지정된 데이터로 고정됨. 선언 이후 데이터를 대입하려하면 에러 발생

문자열

JS에서 문자열이란 '기호의 순차 수열'
문자,숫자,특수문자 등 다양한 기호를 좋바해 만들 수 있는 '기호의 집합'
따옴표로 시작해 따옴표로 끝나며 , 큰 따옴표(") 작은 따옴표(') 다 가능 (시작 끝 따옴표의 종류는 같아야 함)

window.prompt()

window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드

()안에 x로는 다이얼로그 박스에 띄울 메시지(문자열)을 전달 가능
- prompt(x) 메소드는 실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 '반환' 즉, 메소드가 문자열로 변환

템플릿 리터럴

문자열을 표현하는 또 다른 방법 : 백틱을 이용해 표현

템플릿 리터럴은 반환값이 존재하는 자바스크립티 코드, 즉 표현식을 내장할 수 있는 문자열 표현법
- 문자열 내용에 데이터를 삽입한다는 것을 의미
  - 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더(${})를 기입하고, 그안에 데이터를 기입하면 데이터는 문자열의 멤버가 됨

undefined & null

undefined : 데이터가 정의되지 않았음을 나타냄
null : 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단

boolean

숫자,문자열과 같은 데이터 타입 중 하나이다. true와 false 단 두가지 값만 존재 (참,거짓)

window.comfirm(X)

사용자에게 확인과 취소 둘 중 하나를 선택하게 하고 선택에 따라 true , false를 반환

Document Object Model = DOM

웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여주는데 이를 '렌더링' 이라 함

브라우저는 HTML 코드를 해석해 요소들을 트리 형태로 구조화해 표현하는 문서를 생성 이를 'DOM'
- 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링 한다.

DOM은 웹 콘텐츠를 추가,수정,삭제하거나 마우스 클릭,키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스 이다.

브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조
- 즉, window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미
  - 이 속성을 이용하면 해당 문서에 접근 가능

querySelector & textContent

querySelector : 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫밴째 요소를 반환, 일치하는 요소가 없을경우 null 데이터를 반환
textContent : 해당 객체(요소)가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성
- 요소를 포함한 텍스트를 읽거나 변경도 가능