자바스크립트 기초

AI를 이용하여 자바스크립트 코드를 만들었습니다. 브라우저의 입력란에 문자를 넣은면 표시 되는 코드 입니다.

▷ Code

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>안녕하세요 입력</title>
  <script>
    function displayText() {
      // 입력 상자에 있는 값을 가져옵니다.
      const inputText = document.getElementById('greeting').value;
      // 가져온 값을 결과 영역에 표시합니다.
      document.getElementById('result').innerText = inputText;
    }
  </script>
</head>
<body>
  <!-- 입력 상자. 기본값을 "안녕하세요"로 설정 -->
  <input type="text" id="greeting" value="text를 입력 하세요요">
  <!-- 확인 버튼 클릭 시 displayText() 함수 실행 -->
  <button onclick="displayText()">확인</button>
  <!-- 결과가 표시될 영역 -->
  <p id="result"></p>
</body>
</html>

▷프로그램 실행 결과

▷ index.html : 시작 html 파일

자바스립트 파일은 항상 외부의 파일로 저장 되며, html 파일에서 호출 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

▷ 자바 스크립트 변수 타입

자바 스크립트의 변수 타입에는 크게 Primitive type(원시타입)과 Reference Type(참조타입)으로 나누어져 있다. 원시타입(Primitive type)의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장하며 참조 타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입이다.

1. Primitive type(원시타입) 종류는 아래와 같습니다.

Boolean: 참 또는 거짓 값을 나타냅니다.
Null: 의도적으로 '값이 없음'을 나타냅니다.
Undefined: 값이 할당되지 않은 상태를 의미합니다.
Number: 정수와 실수를 모두 포함하는 숫자 타입입니다.
BigInt: 매우 큰 정수를 다루기 위해 사용합니다.
String: 텍스트를 표현하는 타입입니다.
Symbol: 유일한 식별자를 만들 때 사용합니다.

// Boolean 타입 예제
const isActive = true;
console.log("Boolean:", isActive); // true 출력

// Null 타입 예제
const emptyValue = null;
console.log("Null:", emptyValue); // null 출력

// Undefined 타입 예제
let notDefined;
console.log("Undefined:", notDefined); // undefined 출력

// Number 타입 예제
const integerNum = 42;
const floatNum = 3.14;
console.log("Number (정수):", integerNum); // 42 출력
console.log("Number (실수):", floatNum);    // 3.14 출력

// BigInt 타입 예제
const bigIntNum = 1234567890123456789012345678901234567890n;
console.log("BigInt:", bigIntNum); // 큰 정수 출력

// String 타입 예제
const greeting = "Hello, JavaScript!";
console.log("String:", greeting); // 문자열 출력

// Symbol 타입 예제
const sym = Symbol("identifier");
console.log("Symbol:", sym); // Symbol 값 출력

// 변수 타입 표시
console.log(typeof number);

2. Reference Type(참조타입) 종류는 아래와 같습니다.
자바스크립트의 Reference Type(참조타입)은 객체 (Object) 하나로 통일됩니다.
객체의 종류에 따라 세부적인 분류가 가능합니다.

1) 객체 (Object)

가장 기본적인 참조 타입이며, "key-value" 쌍으로 이루어진 데이터를 저장합니다.
"key"는 문자열 또는 Symbol 타입이어야 하며, "value"는 모든 데이터 타입이 가능합니다.
객체 리터럴 (`{}`) 또는 `new Object()`를 사용하여 생성할 수 있습니다.

2). 배열 (Array)

순서가 있는 데이터를 저장하는 객체입니다.
각 요소는 index로 접근할 수 있으며, index는 0부터 시작하는 정수입니다.
배열 리터럴 (`[]`) 또는 `new Array()`를 사용하여 생성할 수 있습니다.

3) 함수 (Function)

실행 가능한 코드 블록을 나타내는 객체입니다.
함수는 "일급 객체"이므로, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.
함수 선언식, 함수 표현식, 화살표 함수 등 다양한 방식으로 정의할 수 있습니다.

4) 날짜 (Date)

날짜와 시간 정보를 나타내는 객체입니다.
`new Date()`를 사용하여 생성하며, 다양한 메서드를 통해 날짜와 시간 정보를 조작할 수 있습니다.

5) 정규 표현식 (RegExp)

문자열 패턴을 나타내는 객체입니다.
문자열 검색, 치환 등에 활용되며, 정규 표현식 리터럴 (`//`) 또는 `new RegExp()`를 사용하여 생성할 수 있습니다.

6) Map

key-value 쌍을 저장하는 객체이며, **key**에 어떠한 타입이든 사용 가능합니다.
`new Map()`을 사용하여 생성하며, `set()`, `get()`, `has()`, `delete()` 등의 메서드를 통해 데이터를 관리합니다.

7) Set

중복되지 않은 데이터를 저장하는 객체입니다.
`new Set()`을 사용하여 생성하며, `add()`, `has()`, `delete()` 등의 메서드를 통해 데이터를 관리합니다.

8) WeakMap

key가 객체인 "key-value" 쌍을 저장하는 객체입니다.
key 객체가 가비지 컬렉션 대상이 되면 WeakMap에서 자동으로 제거됩니다.
`new WeakMap()`을 사용하여 생성합니다.

9) WeakSet

key가 객체인 "중복되지 않은" 데이터를 저장하는 객체입니다.
key 객체가 가비지 컬렉션 대상이 되면 WeakSet에서 자동으로 제거됩니다.
`new WeakSet()`을 사용하여 생성합니다.

참고)

* 위에서 언급된 객체 외에도 다양한 종류의 객체가 존재합니다. (예: Error, Promise 등)
* 자바스크립트의 모든 객체는 Object를 상속받습니다.

// 1. 객체 (Object)
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

console.log(person.name); // "John"
console.log(person.age);  // 30
console.log(person.city); // "New York"

// 2. 배열 (Array)
const numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]); // 1
console.log(numbers[2]); // 3
console.log(numbers.length); // 5

// 3. 함수 (Function)
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // "Hello, John!"

// 4. 날짜 (Date)
const today = new Date();

console.log(today); // 현재 날짜 및 시간 정보

// 5. 정규 표현식 (RegExp)
const regex = /apple/i; // "apple"이라는 단어를 대소문자 구분 없이 찾는 정규 표현식

const str = "I have an Apple.";
console.log(regex.test(str)); // true

// 6. Map
const myMap = new Map();
myMap.set("name", "John");
myMap.set("age", 30);

console.log(myMap.get("name")); // "John"

// 7. Set
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // 중복된 값은 추가되지 않음

console.log(mySet.has(1)); // true
console.log(mySet.has(2)); // true
console.log(mySet.size);   // 2

// 8. WeakMap
let obj1 = {};
const weakMap = new WeakMap();
weakMap.set(obj1, "some data");

console.log(weakMap.get(obj1)); // "some data"

// obj1이 가비지 컬렉션 대상이 되면 weakMap에서 자동으로 제거됨

// 9. WeakSet
let obj2 = {};
const weakSet = new WeakSet();
weakSet.add(obj2);

console.log(weakSet.has(obj2)); // true

// obj2가 가비지 컬렉션 대상이 되면 weakSet에서 자동으로 제거됨

참고 사이트

[Java Script] 원시타입과 참조타입 👀

자바스크립트에서의 복사는 얕은 복사(shallow)와 깊은복사 (deep)으로 나뉜다. 먼저 원시 타입(Primitive type)의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장

velog.io

참조 강의

이룸코딩 ErumCoding

코딩과 컴퓨터 자격증 강의를 하는 이룸코딩입니다.

www.youtube.com

저작자표시 비영리 변경금지

'JavaScript For Creo' 카테고리의 다른 글

자바스크립트 사칙연산 (0)	2025.02.02
Creo.js 환경 설정 (1)	2025.02.02

모든길은하나로연결된다 . Connect Everything

자바스크립트 기초

'JavaScript For Creo' 카테고리의 다른 글

티스토리툴바

자바스크립트 기초

'JavaScript For Creo' 카테고리의 다른 글

관련글

티스토리툴바