[스나이퍼팩토리] 한컴AI아카데미(26.04.08)

JavaScript

---

 

- document.getElementById("cartItem").value: 그 요소가 가진 value라는 속성(Attribute)의 값만 쏙 뽑아오는 것

  *유사 함수 비교

 

 

- parseInt(): 자바스크립트의 전역함수로, 문자열을 정수로 변환(형변환)

    *유사 함수 비교

parseInt("10");         // 10
parseInt("10.99");      // 10 (소수점 버림)
parseInt("   10   ");   // 10 (공백 무시)
parseInt("10px");       // 10 (문자 앞까지만 해석)
parseInt("f2", 16);     // 242 (16진수로 해석)​

 

예시

---

const score = parseInt(document.getElementById("scoreInput").value);

의미: score라는 변수에 Id가 scoreInput이라는 값의 타입을 정수형으로 바꾼다.

 

 

- .textContent: 속성으로, 노드(Node)와 그 자손들의 텍스트 콘텐츠를 가져오거나 설정할 때 사용

    *유사 속성 비교

 

예시

document.getElementById("gradeResult").textContent = `학점: ${grade}`;

의미: Id가 gradeResult인 값에 학점: ${grade} 텍스트를 설정

 

 

- onfocus("this.select()")

 

• onfocus: HTML 요소가 **포커스(선택)**되었을 때 발생하는 이벤트 리스너입니다. (예: 마우스로 클릭하거나 Tab 키로 이동했을 때)
• this: 현재 이벤트가 발생하고 있는 요소(여기서는 <input> 태그 자체)를 가리킵니다.
• .select(): 해당 요소 안에 들어있는 **텍스트 전체를 선택(블록 지정)**하는 자바스크립트 메서드입니다.

사용자가 입력창을 클릭했을 때, 기존에 적혀 있던 내용을 일일이 백스페이스로 지울 필요 없이 바로 새로운 내용을 입력할 수 있게 도와주기 위함

 

 

- toLocaleString():  자바스크립트에서 데이터(숫자, 날짜 등)를 사용자의 언어와 지역 설정에 맞는 형식으로 변환

 

 

- toString(): 대상을 문자열(String)로 변환할 때 사용

 

 *toString() vs String() 차이점

 

• toString(): null이나 undefined에서 사용하면 에러가 발생합니다.
• String(): 어떤 값이 들어와도 에러 없이 문자로 바꿉니다 (null -> "null").
  
  

- 배열 활용 코드

• .join(구분자)

배열의 모든 요소를 하나의 문자열로 합칠 때 사용

let wi=1;
let er = "";
let erdim = [];
erdim.push(wi); //배열에 추가
erdim[wj] = wi;
er = erdim.join(", "); 
// .join(기호): 특정 기호로 배열값 문자열로 합치기

 

• .push()

배열의 맨 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 새로운 길이를 반환

const snacks = ['🍪', '🍫'];
const newLength = snacks.push('🍭');

console.log(snacks);    // ['🍪', '🍫', '🍭'] (원본이 변함!)
console.log(newLength); // 3 (새로운 배열의 길이)

 

• .splice()

배열의 중간 어디든 자유롭게 파고드는 '맥가이버 칼' 같은 메서드(요소를 제거하거나, 추가하거나, 혹은 교체하는 일)

배열.splice(시작_인덱스, 제거할_개수, 추가할_요소1, 추가할_요소2, ...);

 

• 시작 인덱스: 작업을 시작할 위치 (0부터 시작)
• 제거할 개수: 시작 위치부터 몇 개를 지울지 결정 (0이면 아무것도 안 지움)
• 추가할 요소: 지운 자리에 새롭게 넣을 데이터 (생략 가능)

- 활용법

 

• 요소 삭제
  • 마이너스 인덱스의 계산 방식(배열의 마지막 요소를 -1로 시작해서 왼쪽으로 갈수록 숫자가 작아집니다.)
    • -1: 마지막 요소
    • -2: 마지막에서 두 번째 요소
    • -n: 마지막에서 n번째 요소

const colors = ['Red', 'Green', 'Blue', 'Yellow'];

// 인덱스 1(Green)부터 2개를 지워줘!
colors.splice(1, 2); 

console.log(colors); // ['Red', 'Yellow']

 

• 요소 추가

const animals = ['🐶', '🐱'];

// 인덱스 1 위치에 '🐹'를 추가해줘! (0개 삭제니까 끼워넣기)
animals.splice(1, 0, '🐹');

console.log(animals); // ['🐶', '🐹', '🐱']

 

• 요소 교체

const fruit = ['🍎', '🍌', '🍇'];

// 인덱스 1(🍌)을 지우고 그 자리에 '🍊'를 넣어줘!
fruit.splice(1, 1, '🍊');

console.log(fruit); // ['🍎', '🍊', '🍇']

 

 

001.html

0.01MB

Document.html

0.01MB

 

 

 

 

느낀점

---

 

자바스크립트에서 많이 쓰이는 메소드와 프로퍼티를 알아보았다. 그리고 배열 요소들에 대해서도 알아보았다. 지금 현재는 이해가 가지만 나중에 다른 언어들도 배우고 했을 때 이 메소드와 프로퍼티가 어디에 쓰였는 지 어떻게 사용해야하는 지 생각할 수 있을 까 걱정이 앞서는 것 같다.

 

 

 

 

 

 

——————————————————————————

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.