분류 전체보기148 [JavaScript] Array(배열) JS 함수 정리(2) 배열(Array) 이란? 배열은 연관된 데이터를 모아서 관리하기 위해서 사용되는 데이터 타입. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 저장하기 위한 것이라고 할 수 있다. 배열은 순서가 있는 값들을 의미 한다. 배열의 값은 요소(element) 이다. 배열의 순서는 인덱스(index) 이다. 배열의 순서는 0부터 시작한다. 배열의 정의는 대괄호 [] 로 한다. 배열 안에 요소는 쉼표로 구분한다. 배열에 접근하는 방법 배열을 조회 하려면 index 를 이용한다. // 두번째 인덱스 번호 값을 가지고 온다. let array = [1,2,3,4,5]; console.log(array[2]) // 3 // 세번째 인덱스 번호 값을 변경 array[3] = 200 console.. 2022. 11. 28. [Study] KakaoBank-gsap / 클론코딩 [ KakaoBank-gsap / 클론코딩 ] 사용 기술 HTML5 SCSS/ CSS javascript 주요 라이브러리 Swiper - 슬라이더 라이브러리 Font Awesome - icon [Gsap](https://greensock.com/gsap/) - 애니메이션 라이브러리 GSAP 이란? GSAP는 GrennSock에서 만든 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다. GSAP의 Tween을 만드는 방법 ( 기본 메서드) gsap.to() gsap.from() gsap.fromTo() 간단한 애니메이션(의 경우 위의 방법만 알면 쉽게 사용이 가능.. 2022. 11. 28. [JavaScript] 문자열 함수 실행 eval() , new Function() eval() eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수이다. MDN 사이트를 확인해보면 해당 문제로 사용을 권장하지 않는다. 절대 사용하지 말라는 문구까지 사용 할 정도이다. 그럼 eval()의 대체를 알아보자 new Function() 새 함수 객체를 만든다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있다. 하지만 eval과 달리, Function 생성자는 전역 범위로 한정된 함수만 생성하기에 대체로 사용한다. const icon1 = 'hi1' const icon2 = 'hi2' const icon3 = 'hi3' const icon4 = 'hi4' for(let i = .. 2022. 11. 27. [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. 이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음 728x90
