티스토리 뷰
🔖 객체
사전적인 의미는
실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념
🔍 자바스크립트에서의 객체란?
값 또는 기능을 가지고 있는 데이터
즉, 소프트웨어적 사물로써 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단이다.
🏷️ 최초의 객체 : 웹 브라우저
웹 브라우저는 소프트웨어에 세계에 존재하는 사물, 즉 객체이다.
자바스크립트는 웹 브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어로,
사용자가 웹 브라우저에게 명령을 내릴수 있도록 돕기 위해 웹 브라우저와 관련된 다양한 객체들을 제공한다.
그 중 대표적인 객체는 window객체이다.
📎 자바스크립트 코드 내에서 window를 입력하면 웹 브라우저에 접근할 수 있다.
🏷️ 객체 사용하기
객체는 값 또는 기능을 가지고 있는 데이터를 의미하므로 뒤에 .을 찍어 값 또는 기능을 사용할 수 있다.
( 객체가 가진 기능을 '메소드'라고 한다.)
객체.데이터
// 객체가 가지고 있는 숫자나 문자 등 다양한 데이터를 사용할 수 있음
객체.메소드()
// 객체가 가지고 있는 다양한 기능을 수행할 수 있음
🔗 window객체를 사용해보자.
// window를 입력하면 웹 브라우저에 접근해 무언가를 하겠다는 것을 의미
window.데이터
window.메소드()
// window객체가 가진 값이나 기능을 사용할 수 있음
// alert(경고창) 띄우기
window.alert();
// alert(경고창) 내부에 내용 추가하기
window.alert('hello'); // ''로 묶어서 입력
// 여기서 window.은 생략해도 정상적으로 동작한다.
🔗 window.prompt()
사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드
()안에 문자열을 입력하면 다이얼로그 박스안의 메세지로 띄워진다.
📌 prompt메소드는 입력창을 표시해두어 사용자가 입력한 값을 가져올 수 있다.
이 때 사용자가 입력한 값은 문자열로 처리되어 prompt메소드에 의해 반환이 된다.
❓ 반환이란
-> 메소드가 사용된 자리가 다른 데이터로 바뀌게 된다는 것을 의미
즉, 메소드가 문자열로 바뀌게 된다.
※ 실제로 코드가 바뀌는게 아닌 마치 바뀐것 처럼 실행된다는 의미
const message = '프롬프트에 표시할 문자열';
// prompt에 입력받아 반환된 값을 result에 대입
const result = prompt(message);
console.log(result);
// prompt는 두 번째 인자로 입력값에 디폴트되는 문자열을 받는다.
const reserv = prompt('예약일을 입력하세요','2023-01-');
prompt는 확인 버튼이 눌리면 코드상에서 자신이 입력받은 값을 반환하고 동작을 종료한다.
즉, prompt자리에 문자열이 들어가는 것이다.
➡︎ prompt는 입력받은 문자열을 반환해주어 코드에서 활용할 수 있게 해준다.
🔖 변수
데이터에 붙이는 이름표
변수를 이용하면 이름표를 붙여둔 데이터를 기억해두었다가 필요할때 마다 재사용할 수 있다.
(변수를 지정된 데이터 대신 사용할 수 있음)
🔍 변수는 어떤 데이터를 기억할까?
변수에는 자바스크립트로 표현할 수 있는 모든 데이터를 저장할 수 있다.
자바스크립트는 다양한 유형의 데이터를 표현하고 사용할 수 있는데, 데이터 유형에 따라 그 사용법이 조금씩 다르다.
데이터 유형을 흔히 '자료형'이라 하며 숫자형, 문자열 등이 이에 속한다.
📌변수는 데이터를 기억하기 위해 사용한다.
한 번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 재할당을 통해 바꿔가며 사용할 수 있다.
🏷️ 상수
수식에서는 '변하지 않는 값'을 의미
단 하나의 데이터만을 위해 사용하는 이름표
변수와는 다르게 값의 변경이 불가능하다.
변수처럼 지정된 데이터 대신 사용할 수 있다.
⚠️ 상수를 만들때는 선언과 동시에 초기화(데이터 할당)를 해주어야한다.
상수는 자신이 선언될 때 지정된 데이터로 고정되기 때문에 선언만 할 경우 에러가 발생한다.
'코딩 > 코딩노트' 카테고리의 다른 글
HTTP와 HTTPS (2) | 2023.02.01 |
---|---|
[JavaScript] - LocalStorage & JSON (0) | 2023.01.28 |
[JavaScript] DOM (0) | 2023.01.07 |
HTML정리 - 임베디드 요소 (0) | 2022.11.12 |
HTML정리 - 구조를 나타내는 요소 (0) | 2022.11.12 |