본문 바로가기

Js

(16)
16. 객체 객체란? - 위키백과 정의 컴퓨터 과학에서 객체 또는 오브젝트(object)는 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료구조, 함수 또는 메소드가 될 수 있다. - 나무위키 정의 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드(함수)와 변수(데이터)'의 묶음으로 봐야한다. 객체의 유형은 다음과 같이 분류할 수 있다. 정보를 저장(또는 전달)하기 위한 객체(변수만 포함) 특정 기능들을 묶어두기 위한 객체(메소드만 포함) 기본 객체(변수, ..
15. classList 외 다양한 키워드 classList classList은 HTML 요소의 class 속성에 저장된 값을 제어하는 키워드이다. 주요 함수) add(string) : 새로운 'string' 값을 class 속성에 추가 remove(string) : 'string' 값을 class 속성에서 제거 toggle(string) : add와 remove가 합쳐진 상태 contains(string) : 'string'이 class 속성에 있는지 여부 확인 => 들어가 있으면 true, 없으면 false replace(str1, str2) : class 속성에 str1이 있으면 str2로 변경 아래 코드는 classList의 주요 함수를 활용한 예제이다. BOX toggle change retrun return 키워드는 '함수의 종료'를 ..
14. 함수 함수란? 함수는 특정 동작(기능)을 수행하는 일부 코드의 집합이다. '함수를 실행한다'는 것은 '함수를 호출'한다는 것과 같은 의미이다. 묶인 명령어를 반복적으로 사용할 수 있다는 재사용성 장점이 있지만 설계가 어렵다는 단점이 존재한다. 함수의 선언과 구조 함수도 사용하려면 선언을 해야 한다. => 함수 선언 >> 함수 호출 또한 기본적인 구조가 존재한다. function [함수명] ([매개변수1, 매개변수2, ...]) { 실행문장; ... return [반환값]; } => 함수 이름 뒤 괄호 안에 들어가는 데이터는 매개변수(파라미터)라고 한다. 매개변수는 함수 안에서만 사용 가능하다. 함수의 유형 함수의 유형은 총 4가지로 나눌 수 있다. 계산기 예제를 통해 각 유형을 살펴보자. 계산기 N1 : N2..
13. 다양한 for문 for in 'for in'은 배열의 순번을 활용하기 위한 반복문이다. let person = { "이름" : "홍길동", "나이" : 20, "주소" : "인천시 미추홀구 }; for (let key in person) { console.log(key); console.log(person[key]); } for of 'for of'는 배열의 원소를 순차적으로 활용하기 위한 반복문이다. let arr = ["apple", "banana", "pear", "peach"]; for(let v of arr) { console.log(v); } // for of를 풀어써보면 for(let i = 0; i < arr.length; i++) { let v = arr[i]; console.log(v); } forEa..
12. 배열 메소드 1. 원소의 추가 배열에서 원소를 추가하고 싶을 때는 push()와 unshift()를 사용한다. push(새 값)는 뒤에 새로운 값을 추가하고, unshitf(새 값)는 앞에 새로운 값을 추가한다. 2. 원소의 삭제 배열에서 원소를 삭제하고 싶을 때는 pop()과 shift()를 사용한다. pop()은 맨 뒤의 값을 삭제하고, shift()는 맨 앞의 값을 삭제한다. 3. splice(idx, n[, add_item list]) => idx = 삭제할 원소의 위치(순번), n = 삭제할 원소의 개수, add_item list = 삭제 후 추가할 원소의 목록 splice()는 배열의 원소를 지정한 개수만큼 삭제한다. let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.l..
11. 참고 JS 내 페이지 이동 button을 이용해 다른 페이지로 이동시키고 싶을 때 Javascript 내에서 사용할 수 있는 코드가 있다. => location.href = "이동할 페이지"; input value 값 가져오기 함수 내에서 input 태그의 value 값을 가져오려면 함수 내에서 따로 지정해주어야 한다. 만약 함수 밖에서 지정해주게 되면 빈 칸을 value 값으로 인식하게 된다. 로그인 화면 로그인 위 코드는 로그인을 했을 때 id와 password의 값이 일치하는지 확인하고 맞을 경우 condition.html로 이동, 틀렸을 경우 각각의 alert창이 뜨게 한다. 이렇게 비교를 하기 위해서 함수 밖에서 미리 선언해준 vid값과 vpw값이 input 태그에서 직접 입력한 값을 저장한 변수인 ..
10. 배열 배열 배열은 여러 개의 데이터를 하나의 변수에 담는 것이다. JavaScirpt의 배열은 타입에 상관없이 값을 넣을 수 있다. 1. 선언 방법 var arrNum = []; var arrString = new Array(); 선언한 배열 자체의 Type은 Object이다. 2. 값 넣는 방법 arrNum = [1, 2, 3, 4, 5] => Number Type 값 넣기 arrString = ["A", "B", "C", "D", "E"] => String Type 값 넣기 3. 배열값 확인 방법 console.log(arrNum); => 1 2 3 4 5 => 배열에 넣어진 값이 모두 출력됨. console.log(arrNum[3]); => 4 => 대괄호 안에 넣은 인덱스에 해당하는 값만 출력됨. 4...
9. 다양한 함수/메소드 setInterval() setInterval 함수는 주기적으로 실행문을 일정한 시간 간격을 두고 반복한다. 즉 매개변수로 주어진 시간 간격으로 무한히 반복 호출한다. 구조) setInterval( function(){}, millisecond ); => n초마다 function() 내용을 실행하겠다. setTimeout() setTimeout 함수는 일정 시간 후 실행되도록 처리한다. 따라서 setInterval 함수와는 달리 매개변수로 주어진 시간 후 딱 한번만 콜백 함수를 호출한다. 구조) setTimeout( function(){}, millisecond ); => n초 후 function() 내용을 한번 실행하겠다. clearInterval()과 clearTimeout() cleaInterval..