본문 바로가기

IT/javascript71

자바스크립트 getElementById().innerhtml document.getElementById().innerHTML은 JavaScript에서 HTML 요소의 내용을 변경하거나 가져오는 데 사용되는 메서드입니다. 이 메서드는 문서 내의 특정 id를 가진 HTML 요소를 선택하고 해당 요소의 내용을 반환하거나 변경할 수 있습니다. 사용법 선택한 요소의 내용을 변경하려면 innerHTML 속성에 새로운 HTML 콘텐츠를 할당하면 됩니다. 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다. Hello, World! 이 경우, id가 "myDiv"인 div 요소의 내용을 변경하려면 다음과 같은 JavaScript 코드를 사용할 수 있습니다. document.getElementById("myDiv").innerHTML = "안녕하세요, 세상!"; 위 코드.. 2023. 4. 11.
자바스크립트 DOM이란? 자바스크립트(JavaScript)는 웹 개발에서 필수적인 프로그래밍 언어 중 하나입니다. 이 언어를 이용하여 웹 페이지에서 인터랙티브한 기능을 구현할 수 있습니다. 이를 위해 자바스크립트 DOM(Document Object Model)이 사용됩니다. DOM은 웹 페이지의 구조를 트리 구조로 표현하는 모델입니다. 이를 이용하여 웹 페이지의 모든 요소를 프로그래밍 방식으로 접근하고 조작할 수 있습니다. DOM은 HTML 문서를 해석하고, 각 요소를 객체로 표현합니다. 이러한 객체를 조작하여, 웹 페이지에서 동적인 기능을 구현할 수 있습니다. DOM에서는 HTML 문서의 각 요소가 노드(Node)로 표현됩니다. 이러한 노드들은 자신의 부모 노드와 자식 노드를 가지며, 이를 이용하여 웹 페이지의 요소를 탐색할 .. 2023. 4. 11.
자바스크립트 구조 분해 할당(destructuring) 자바스크립트 구조 분해 할당은 배열의 요소들이나 객체의 속성들을 각각의 개별적인 변수에 담아서 사용할 수 있는 문법입니다. 구조 분해 할당을 사용하면 원하는 요소를 가져올 때 더 편리할 수 있습니다. 왜냐하면 구조 분해 할당은 가져올 요소들에 해당하는 변수명을 나열하면 되지만 변수를 사용하면 여러 개를 생성해야 되고 관리하기가 쉽지 않기 때문입니다. 사용법 const nums = [1, 2, 3, 4, 5]; const [first, second, ...everythingElse] = nums; console.log(first, second, everythingElse); // 1 2 [ 3, 4, 5 ] const user = { id: "user01", pw: "123", isAdmin: true, .. 2023. 4. 11.
자바스크립트 나머지 매개변수(rest parameters) 자바스크립트 나머지 매개변수는 함수의 인자로 값을 받을 때 정해지지 않은 여러 개의 값을 배열로 받을 수 있습니다. 다만 주의 사항은 매개변수가 하나 이상일 때 나머지 매개변수는 무조건 마지막 매개변수로 사용해야 합니다. 그리고 비슷한 기능을 하는 arguments 객체가 있는데 인자들의 정보를 알 수 있다는 점은 같지만 배열이 아니기 때문에 구분해서 사용해야 합니다. 사용법 function f1(...n) { console.log(n); } function f2(greeting, ...n) { console.log(greeting, n); } function f3() { console.log(arguments); } f1(1, 2, 3); // [ 1, 2, 3 ] f2("hello", 1, 2, 3).. 2023. 4. 10.
자바스크립트 스프레드 연산자(spread operator) 자바스크립트 스프레드 연산자는 배열의 요소들이나 객체 속성들의 각각의 값을 복사해서 나열해 줍니다. 원본 배열의 요소들과 원본 객체의 속성들의 값은 변하지 않습니다. 용도는 배열을 복사해서 새로운 배열을 생성하거나, 객체를 복사해서 새로운 객체를 생성하거나, 여러 개의 배열을 합치거나, 여러 개의 객체를 합치는 등 다양하게 활용할 수 있습니다. 사용법 const nums = [1, 2, 3, 4, 5]; console.log(...nums); // 1 2 3 4 5 console.log(Math.max(...nums)); // 5 console.log(Math.min(...nums)); // 1 const newNums1 = [...nums]; const newNums2 = [...nums, ...num.. 2023. 4. 10.
자바스크립트 기본 매개 변수 자바스크립트 기본 매개 변수는 함수에서 매개 변수를 정의할 때 값을 초기화하는 것을 의미합니다. 기본 매개 변수를 설정하면 함수 호출 시 인자를 입력하지 않으면 이미 설정된 값으로 처리합니다. 매개 변수 설정 시 주의 사항은 오른쪽 매개 변수부터 초기화를 시켜주어야 한다는 것입니다. 왜냐하면 함수 호출 시 입력받는 값은 왼쪽부터 채워지기 때문입니다. 사용법 function f1(a, b = 2) { return a + b; } function f2(a = 1, b) { return a + b; } function f3(a = 1, b = 2) { return a + b; } console.log(f1(1)); // 3 console.log(f2(2)); // NaN console.log(f3()); // 3 2023. 4. 10.
자바스크립트 화살표 함수 this 자바스크립트에서 this는 일반 함수에서 사용할 때, 화살표 함수에서 사용할 때 의미가 달라집니다. 일반 함수에서는 this를 재정의 해서 사용하게 되고, 화살표 함수에서는 this를 상속해서 사용하게 됩니다. 예를 들면 객체에서 일반 함수를 정의했다면 this는 최상위 객체인 window를 재정의 해서 객체 자체를 의미하게 되고 화살표 함수를 정의했다면 this는 window 객체를 상속받아서 window 객체를 의미하게 됩니다. 사용법 const user = { id: "user01", age: "20", display1: function () { return `name:${this.id} age:${this.age}`; }, display2: () => { return `name:${this.id}.. 2023. 4. 9.
자바스크립트 reduce 메서드 reduce 메서드는 배열의 요소들을 하나의 값으로 줄여서 반환합니다. reduce 메서드의 콜백 함수의 첫 번째 인자의 용도는 값을 누적 시켜주고 두 번째 인자의 용도는 요소들을 순서대로 가져오는 것 입니다. 배열의 누적합, 최소값, 최대값 등 다양하게 활용할 수 있습니다. 사용법 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const sum1 = array.reduce((accumulator, element) => { return accumulator + element; }); console.log(sum1); // 55 const sum2 = array.reduce((accumulator, element) => accumulator + element, 100).. 2023. 4. 8.

티스토리툴바