전체 글

이번에는 선택한 DOM 을 수정하고 추가하고 삭제하는 방법에 대해 물어보았다 1. 요소의 내용 변경: innerHTML 또는 textContent 속성을 사용하여 요소의 내용을 변경할 수 있습니다. let element = document.getElementById('myId'); element.innerHTML = '새로운 내용'; 혹은 let element = document.getElementById('myId'); element.textContent = '새로운 내용'; 2. 요소의 속성 변경: setAttribute() 메서드를 사용하여 요소의 속성을 변경할 수 있습니다. let element = document.getElementById('myId'); element.setAttribute('..

오늘은 DOM 을 조작하는 방법에 대해 물어보았다. 먼저 DOM 을 선택하는 것부터 시작! 자바스크립트에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 다음은 몇 가지 방법입니다. 1. getElementById: 아이디를 통해 요소를 선택합니다. 아이디는 페이지 내에서 유일해야 합니다. let element = document.getElementById("myId"); // Id 를 기준으로 찾아온다. Id는 고유하니까 당연히 유일한 요소만 선택된다 2. getElementsByClassName: 클래스 이름을 통해 요소를 선택합니다. 여러 요소가 선택될 수 있으므로 반환 값은 HTMLCollection입니다. let elements = document.getElementsByClassName..

오늘은 지난번에 언급되던 얕은 복사(shallow copy)와 깊은 복사(deep copy)에 대해 물어보았다. // 원시 타입(primitive type) 과 참조 타입(reference type)에 대해 알고 있으면 편하다.. // 이건 다음시간에 더 살펴보기로 하고.. "얕은 복사"와 "깊은 복사"는 객체를 복사할 때 사용되는 용어입니다. 이들은 복사된 객체와 원본 객체가 서로 어떻게 연관되어 있는지를 설명합니다. // 어떤 객체(배열도 포함)를 복사하고 싶은 경우에.. let origin = { name: 'kim', age : 20 }; let copy = origin; // 이렇게 하면 망한다 // 이렇게 하면 망한다. 왜냐하면 copy 는 그냥 origin을 '가리키고' (참조하고) 있을 뿐..

오늘은 배열에 사용할 수 있는 메소드에 대해 물어보았다. push(): 배열의 마지막에 새로운 요소를 추가하고, 새로운 길이를 반환합니다. let arr = [1, 2, 3]; let returnVal = arr.push(4); console.log(arr); // [1, 2, 3, 4] console.log(returnVal); // 4 // 원본 배열 변경한다! pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다. let arr = [1, 2, 3]; let returnVal = arr.pop(); console.log(arr); // [1, 2] console.log(returnVal) // 3 // 원본 배열 변경한다! shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반..

잠깐 쉬어가는 타임으로 메소드(method)와 함수(function)의 차이에 대해 물어보았따.. 함수(function)와 메소드(method)는 모두 코드를 재사용하고 모듈화하는 데 사용되는 방법이지만, 그들 사이에는 약간의 차이가 있습니다. 함수(Function): 함수는 자체적으로 독립적으로 존재하며, 일련의 문장을 포함하고 있습니다. 이 문장들은 특정 작업을 수행하거나 계산을 수행하고 그 결과를 반환합니다. 함수는 전역 범위 또는 다른 함수 내부에서 정의될 수 있습니다. function greet(name) { return 'Hello, ' + name; } // 함수임.. 메소드(Method): 메소드는 객체의 특성을 나타내는 함수입니다. 객체에 속한 함수를 메소드라고 부릅니다. 메소드는 그것이..

오늘은 객체에 사용할 수 있는 내장 메소드에 대해 물어보았다. 자바스크립트에서는 객체와 배열을 조작하기 위한 다양한 내장 메소드를 제공하고 있습니다. 다음은 그 중 몇 가지를 소개합니다: Object.keys(obj): 이 메소드는 객체의 모든 열거 가능한 속성의 이름들을 배열로 반환합니다. const obj = { a: 1, b: 2, c: 3 }; console.log(Object.keys(obj)); // ["a", "b", "c"] // 객체의 키 값을 배열로 반환한다! Object.values(obj): 이 메소드는 객체의 모든 열거 가능한 속성의 값들을 배열로 반환합니다. const obj = { a: 1, b: 2, c: 3 }; console.log(Object.values(obj)); /..

오늘은 객체와 배열 중 배열에 대해 물어보았다. 자바스크립트에서 배열(array)은 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 타입입니다. 배열은 배열 리터럴(array literal)을 사용하여 생성할 수 있으며, 배열 리터럴은 대괄호([])로 표현되고, 그 안에는 쉼표로 구분된 값들이 들어갑니다. 예를 들면: let arr = [1, 2, 3, 4, 5]; 이것은 arr이라는 변수에 1부터 5까지의 값을 가진 배열을 생성한 예시입니다. 배열에는 인덱싱(indexing)을 사용하여 각 요소에 접근할 수 있습니다. 배열의 인덱스는 0부터 시작합니다. 따라서 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1, 세 번째 요소는 인덱스 2, 이런 식으로 접근할 수 있습니다. 예를 들면: con..

오늘은 객체와 배열 중 객체(object)에 대해 물어보았다. 자바스크립트에서 객체는 다양한 데이터 유형을 보유할 수 있는 복합 데이터 타입입니다. 객체는 키(key)와 값(value)의 쌍으로 이루어진 프로퍼티(property)를 가집니다. 이러한 키-값 쌍을 속성(attribute)이라고도 부르기도 합니다. 객체는 보통 객체 리터럴(object literal)이라는 방식을 통해 생성됩니다. 객체 리터럴은 중괄호({})를 사용하여 표현하며, 내부에는 쉼표로 구분된 키-값 쌍이 들어갑니다. 예를 들면: let obj = { key1: 'value1', key2: 'value2', key3: 'value3' }; 여기서 key1, key2, key3는 객체의 키이며, 각 키에 해당하는 'value1', '..

오늘은 익명함수와 화살표 함수에 대해 물어보았다. 익명 함수와 화살표 함수는 자바스크립트에서 두 가지 중요한 함수 형태입니다. 각각에 대해 알아봅시다. 익명 함수 (Anonymous function) 익명 함수는 이름이 없는 함수입니다. 보통 이벤트 핸들러, 콜백 함수 또는 즉시 실행 함수 등과 같이 한 번 사용되거나 재사용할 필요가 없는 경우에 사용됩니다. 익명 함수는 변수에 할당되거나 다른 함수의 인수로 전달될 수 있습니다. // 변수에 할당된 익명 함수 const myFunction = function() { console.log('Hello, anonymous function!'); }; myFunction(); // 출력: Hello, anonymous function! // 익명 함수를 인수로..

오늘은 함수의 반환값 return 에 대해서 물어보았다. 자바스크립트에서 함수는 특정 작업을 수행하거나 계산을 수행한 결과를 반환할 수 있습니다. 이를 위해 return 문을 사용합니다. return 문은 선택적으로 표현식(expression)을 가질 수 있으며, 이 표현식의 결과가 호출자에게 반환됩니다. return 문의 사용법은 다음과 같습니다. function functionName(parameters) { // 함수 코드 return expression; // return 반환할거 라고 작성하면 된다 } 함수의 반환 값을 사용하는 예시를 살펴봅시다. function add(a, b) { let sum = a + b; // 인자로 받은 a,b를 더해서 sum 에 담고 return sum; // 함수..