JavaScript

전체 코드(js)class Member { constructor(id, pw, name) { this.id = id; this.pw = pw; this.name = name; }}document.addEventListener('DOMContentLoaded', () => { const input_userId = document.querySelector('#uid'); const input_userPw = document.querySelector('#pw'); const input_userName = document.querySelector('#uname'); const input_eId = document.querySelector('#..

요구사항1. 회원 정보 초기 저장 - 사용자로부터 아이디, 비밀번호, 이름을 받아 localstorage에 저장합니다.2. 기존 회원 정보 수정 및 삭제 - 사용자의 정보를 수정하거나 삭제하면 localstorage에도 그 내용이 반영되도록 합니다. - 이때 사용자의 고유키는 인덱스로 하되 삭제의 경우 오름차순으로 인덱스 번호가 변경되도록 합니다. ex) 0번 user, 1번 user, 2번 user 존재 시, 1번 user 삭제 후 이전의 2번 유저의 index는 1번이 되도록.3. 회원 리스트 - 등록된 회원의 정보를 index, 아이디, 비밀번호, 이름, 수정/삭제 순으로 나열합니다. 사용querySelector()const input_userId = document.querySelector('#u..

JavaScript [9] - DOM DOM 문서 객체 모델(Document Object Model) 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일, 내용 등을 쉽게 변경할 수 있게 도움 HTML 콘첸트를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작 가능 HTML 문서를 구조화하여 각 요소를 객체(object)로 취급 단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작이 가능 DOM Tree DOM은 문서를 논리 트리로 표현 DOM에서 모든 것은 Node 즉, HTML요소, 속성, 텍스트 모든 것이 노드 각 노드는 부모 자식 관계를 형성하고 이에 따라 상속 개념도 동일..

JavaScript [8] - 객체 객체 객체는 속성(property)의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현 key 문자열 타입만 가능 key이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현 value 모든 타입(함수포함) 가능 객체 요소 접근 점(.) 또는 대괄호([])로 가능 key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능 // 객체 리터럴 방식으로 객체 생성 const person = { name : 'Viktor', age : 30, greeting: function() { console.log(`Hello, my name is ${this.name}`) } } // 객체의 메서드 호출 person.greeting() // Hello, my name..

JavaScript [7] - 배열 메서드 심화 Array Helper Methods 배열을 순회하며 특정 로직을 수행하는 메서드 메서드 호출 시 인자로 callback 함수를 받는 것이 특징 (callback 함수 : 다른 함수의 인자로 전달되는 함수) // 콜백 함수 예시 const numbers = [1, 2, 3] numbers.forEach(function (num) { console.log(num**2) }) // 1 // 4 // 9 const callBackFunction = function (num) { console.log(num**2) } numbers.forEach(callBackFunction) // 1 // 4 // 9 forEach array.forEach(callback(el..

JavaScript [6] - this와 배열 메서드 기초 this 어떠한 object를 가리키는 키워드 JavaScript의 함수는 호출될 때 this를 암묵적으로 전달받음 JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작 JavaScript는 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라짐 즉, 함수를 선언할 때 this에 객체가 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정됨 전역 문맥에서의 this 브라우저의 전역 객체인 window를 가리킴 전역객체는 모든 객체의 유일한 최상위 객체를 의미 console.log(this) // window 함수 문맥에서의 this 함수의 this 키워드는 다른..

JavaScript [5] - 함수와 Arrow Function 함수의 정의 함수 선언식 (function declaration) function add(num1+num2) { return num1 + num2 } add(2, 7) // 9 함수 표현식 (function expression) 표현식에서 함수 이름을 명시하는 것도 가능 다만 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨 const sub = function (num1, num2) { return num1 - num2 } sub(7, 2) // 5 const mySub = function nameSub(num1, num2) { return num1 - num2 } mySub(1, 2) // -1 nameSub(1, 2) ..

JavaScript [4] - 조건문과 반복문 조건문 if statement 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단 if, else if, else 조건은 소괄호(condition) 안에 작성 실행할 코드는 중괄호 {} 안에 작성 블록 스코프 생성 const name = 'manager' if (name === 'admin') { console.log('관리자님 환영합니다.') } else if (name === 'manager') { console.log('매니저님 환영합니다.') } else { console.log(`${name}님 환영합니다.`) // Backtick에 주의해줍시다. } 반복문 while for for ...in for ...of Array.forE..