본문 바로가기

STUDY71

[JavaScript] ID , Class 제어 Element.id Element.className Element.id 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영한다. Element.ClassName 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다. 사용 방법 Element.id = '아이디명' Element.className = '클래스명' 2022. 11. 27.
[JavaScript] 속성값 제어 Element.setAttribute() Element.setAttribute() 지정된 요소의 속성 값을 설정한다. 속성이 이미 있는 경우 값이 업데이트가 된다. 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가된다. 사용 방법 Element.setAttribute("className", "클래스명"); Element.setAttribute("id", "아이디명"); Element.setAttribute("name", "이름"); Element.setAttribute("href", "#"); 2022. 11. 27.
[JavaScript] 클래스 제어 classList() classList() 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다. 01. Element.classList.add() 클래스 추가 Element.classList.add('클래스명') // 클래스 하나 추가 Element.classList.add('클래스명a', '클래스명b', '클래스명c',) // 클래스 여러개 추가 02. Element.classList.remove() 클래스 제거 Element.classList.remove('클래스명') //제거 03. Element.classList.rep.. 2022. 11. 27.
[JavaScript] JSON(5) 구조분해 01. JSON에 대한 구조분해할당 (=비구조할당) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. object 에는 {} 안에 명시된 항목과 동일한 key를 갖는 데이터가 존재해야한다. let obj = {num: 123, boolean: true}; let {num, boolean} = obj; console.log(num); // 42 console.log(boolean); // true 01-1. 구조분해를 활용하여 필요한 데이터만 추출하기 객체 안에 들어있지 않은 값을 입력하면, undefined 이 출력 된다. const data = {name:'hello' , age : 20 , height:172,weight:.. 2022. 11. 27.
[JavaScript] JSON(4) 참조복사 01. 참조복사 배열 , JSON 객체 끼리의 복사는 참조 처리 된다. 01-1. 일반 변수 끼리 복사하는 경우 원본이 변경 되어도 복사본에는 영향을 주지 않는 것을 알 수 있다. let a = 100; let b = a; console.log("a = " + a + ", b = " + b); // a = 100, b = 100 출력 a++; console.log("a = "+a+",b = " + b); //a = 101, b = 100 출력 01-2. 참조복사 (=앝은복사) 배열이나 JSON 원본을 수정하면 복사본도 함께 수정 된다. (반대의 경우도 마찬가지) const user = { name : "Lee" }; const member = user; console.log(user , member); .. 2022. 11. 27.
[JavaScript] JSON(3) 확장 , 반복문 01. JSON의 확장 01-1. 존재하지 않는 값에 대한 출력 - undefined 객체 안에 들어있지 않은 값을 입력하면, undefined 이 출력 된다. const list = { name : '홍길동', age : 19 } // 존재 하지 않는 값을 호출 console.log(list.number); // undefined 출력 01-1(2). 존재하지 않는 값을 활용한 연산 - NaN 존재하지 않는 값(undefined) 에 + 1 을 할 경우 숫자가 아닌 결과 값이 되므로 NaN 이 출력 되는 걸 볼 수 있다. const list = { name : '홍길동', age : 19 } const nextNum = list.number+1; console.log(nextNum); 01-2 존재하지.. 2022. 11. 27.
[JavaScript] JSON(2) - 복합자료구조 01. 데이터 타입을 포함하는 자료구조 JSON 데이터 내부에서 배열이 존재할때 그 배열에 접근 하는 방법이다. JSON의 key[index] 배열의 인덱스번호로 접근하여 해당 부분의 값을 가지고 올 수 있다. const company = { name : "(주)굿모닝컴페니", since : 2013, department : ["기획팀","디자인팀","개발팀"] }; console.log(company.name); //점으로 연결 (기본 접근방식) -선호 console.log(company['since']); // 배열처럼 연결 (기본 접근방식) console.log(company.department[0]); // 배열[인덱스번호] 접근 console.log(company.department[1]); c.. 2022. 11. 27.
[JavaScript] JSON JSON (JavaScript Object Notation) JSON은 XML 보다 더 가볍게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준이다. 01. JSON 특징 JSON은 자바스크립트를 확장하여 만들어졌다. 그래서 객체 표기 방식도 자바스크립트를 따른다. JSON은 데이터를 전달하기위해서 만들어졌지만 사람도 쉽게 읽을 수 있다. JSON은 프로그래밍 언어와 운영체제에 독립적이다. 02. JSON 구조 JSON 데이터는 이름(Key)과 값(value)으로 되어있다. JSON 데이터에서 이름과 값을 나누는 것은 콜론(:)이다. "name" : "홍길동" // KEY : value 데이터의 이름도 문자열 이므로 JavaScript 처럼 큰 따옴표("")로 감싸줘야 한다. 데.. 2022. 11. 27.
[JavaScript] 배열(array)에 쓰이는 함수(1) 01. pop() 배열의 마지막 값을 뺀다. let fruit = ['banana' , 'apple' ,'grape','mango'] fruit.pop() console.log(fruit); // banana , apple ,grape 출력 02. push() 배열의 끝 부분에 추가한다. let fruit = ['banana' , 'apple' ,'grape'] fruit.push('mango') console.log(fruit); // banana , apple , grape , mango 출력 03. includes() 배열 안에 아이템이 있는지 없는지 확인한다. (true/false)반환 let fruit = ['banana' , 'apple' ,'grape'] console.log(fruit.in.. 2022. 11. 27.
728x90

티스토리툴바