![]()
페이징에 필요한 데이터(변수 포함) curPage current Page 의 약자 현재 페이지 번호, 브라우저에서 선택한 페이지의 번호 totalCount 총 게시글 수 DB에서 조회된 전체 행의 수 listCount 한 페이지 당 보여질 게시글의 수 직접 설정할 수 있게 만든다 totalPage 총 페이지 수 전체 목록을 표현하기 위해 필요한 총 페이지 수 계산으로 알아낸다 pageCount 한 화면에 출력될 페이지네이션의 개수 직접 설정할 수 있게 만든다 startPage 화면에 보이는 페이지네이션의 시작 번호 계산으로 알아낸다 endPage 화면에 보이는 페이지네이션의 끝 번호 계산으로 알아낸다 startNo 화면에 보여지는 게시글의 시작 번호 계산으로 알아낸다 endNo 화면에 보여지는 게시글의 ..
![]()
JSON, JavaScript Object Notation 자바스크립트 객체 표기법 JSON 한국어 홈페이지 통신을 할 때 데이터를 전달하기 위한 데이터 표기법으로 사용된다. 통신에 참여하는 모든 시스템(각종 프로그래밍 언어)들이 공통적으로 이해할 수 있는 데이터타입 표기법으로 자바스크립트 객체 표기법을 사용하는 것 JSON의 데이터 표현 방식 객체, Object 클래스, 구조체, Map, HashTable 등을 표현할 때 사용함 { } 로 감싸서 객체를 표현한다. 프로퍼티는 name : value 형태의 쌍으로 표현한다. name 은 문자열로 표현, value는 어떤 타입이든지 허용 여러 개의 프로퍼티를 표현할 때 각 프로퍼티들을 ',' 로 구분한다. ex) 빈 객체 - { } ex) {..
![]()
XHR 객체 XMLHttpRequest AJAX 통신을 하기위한 자바스크립트 기본 내장 객체 IE 예전 버전에는 존재하지 않는 객체이며 AJAX 기술은 ActiveX 를 이용해 구현된다. 크로스브라우징 처리가 필요하다. XHR 객체 속성(property) readyState XHR 객체는 준비 - 전송 - 완료 단계를 거친다. (LifeCycle) readyState 는 각 단계를 표현하는 속성 0 : UNSENT : open() 호출 전 (XHR 객체를 생성한 단계) 1 : OPENED : open() 호출 후 2 : HEADERS_RECEIVED : send() 호출 후 응답을 받기 전까지 3 : LOADING : 다운로드 중(response 메시지를 받는 중) 4 : DONE : XHR 동작 완료(..
![]()
AJAX, Asynchronous JavaScript With XML XML을 이용한 비동기식 자바스크립트 통신 HTTP 통신을 자바스크립트를 이용하여 비동기식으로 수행하는 것 자바스크립트 코드로 HTTP 요청을 보내고 XML파일 형식의 응답을 비동기적으로 받아서 처리하는 기술 최근 들어와서는 응답데이터를 XML 로 사용하지 않고 JSON 을 사용한다. 자바스크립트의 내장 객체인 XMLHttpRequest 객체를 사용한다. XMLHttpRequest 객체는 줄여서 XHR 로 부른다 보여지고 있는 웹페이지의 새로고침(페이지이동) 없이 서버에 요청을 보내고 응답을 받아야 할 때 사용한다 서버의 데이터베이스 정보가 필요할 때
![]()
정규 표현식, Regular Expression 정규 표현식 테스트 사이트 특정 규칙을 가진 문자열이나 문자열 집합을 표현하는 데 사용하는 형식 언어(Formal Language) 문자열에서 특정 패턴의 문자열을 검색하거나 치환할 때 사용한다 형식에 맞는 데이터를 입력했는지 검증할 때 사용한다(검증, Validation) 정규식 이라고도 불린다. 정규 표현식 생성 방법 정규식 리터럴 상수 정규식을 '/'(슬래쉬)로 감싸는 방법으로 표현한다. ex) var regEx = /abc/ RegExp 객체를 생성 RegExp 객체의 생성자 함수를 호출하는 방법으로 표현한다. ex) var regObj = new RegExp("abc") 정규 표현식 사용 패턴 단순 패턴 완전히 일치하는 문자열을 대응..
![]()
자바스크립트에서 제공하는 기본 대화상자 alert 확인버튼과 메세지를 출력하는 Alert 창, 주로 확인용으로 사용된다. 확인 버튼과 메세지를 출력하는 Alert 창 confirm 확인버튼, 취소버튼, 메세지가 들어가는 Confirm 창 반환값이 Boolean 타입이다 확인, 취소 두가지와 메세지가 들어가는 Confirm 창 (반환값이 Boolean 타입이다. True(확인) Or False(취소)) prompt 확인버튼, 취소버튼, 메세지, 텍스트필드가 들어가는 Prompt 창 확인, 취소 두가지와 텍스트필드, 메세지가 들어가는 Prompt 창
![]()
JS Event 처리코드 작성(등록)하는 방법 이벤트(Event)가 발생하면 해당 이벤트에 알맞은 동작을 수행할 수 있도록 코드를 작성해둬야한다. 이벤트 처리코드 == 이벤트 핸들러(handler) == 이벤트 리스너(Event Listener) 이벤트가 발생했을 때 그 상황에 맞춰 동작할 코드 HTML 태그의 이벤트 속성을 이용한 인라인 방식으로 등록하기 button onclick="alert('clicked')"> div onmousemove="console.log('moved')"> DOM을 이용한 이벤트 리스너 바인딩 - 1 (Event Attribute 사용) button id="btnOk"> 라고 하면, script 태그를 이용하여 btnOk.onclick = fu..
![]()
JS 이벤트, JS Event 사용자의 모든 입력(행위)들을 프로그램에서 미리 정의해놓은 객체 사용자의 입력(동작) 뿐만 아니라 특정 사건도 포함한다. 컴퓨터(운영체제)에서 발생한 이벤트를 감지하고 해당 이벤트를 이벤트가 발생한 응용프로그램에게 전달한다. 전달된 이벤트는 해당 응용프로그램에서 적절한 처리를 수행한다 이벤트 기반 처리(Event Driven) 기본 이벤트 태그 요소에 별도로 이벤트 처리코드를 연결하지 않아도 기본적으로 실행되는 이벤트들 a 태그 요소를 클릭 -> 지정된 경로로 페이지 이동(location.href = "지정경로") 브라우저 화면에 마우스 우클릭 -> 메뉴 보여주기 form 태그 요소에서 submit 버튼 클릭 -> 액션에 지정된 경로로 데이터를 전달하며 페이지 이동 발생(f..
![]()
DOM 객체 함수, DOM API Node 생성 document.createElement("tagName") 요소노드 만들기 ** HTML 표준태그가 아니어도 생성됨 document.createTextNode("text") 텍스트노드 만들기 Node 추가 DOM객체.appendChild(대상객체) DOM객체에 대상객체를 연결한다(자식으로 추가한다) ex) var pTag = document.createElement("p") //p태그요소 생성 document.body.appendChild(pTag) //에 p요소 추가 ** document.body == ex) var div = document.createElement("div") //div요소 생성 var t = document.createTextNod..
![]()
DOM, Document Object Model 문서 객체 모델 document 객체를 통해 관리된다. document 객체는 window 객체의 내장 객체 중 하나 HTML 문서의 body 태그의 내용 요소들을 다룰 수 있다. 자바스크립트 코드로 HTML 문서의 요소(태그)들에 접근하고 관리할 수 있게 해주는 객체 모델 DOM 관련 용어 요소 (Element) HTML 문서 내의 태그 문서 객체(Document Object) 자바스크립트 코드를 이용하여 요소에 접근할 수 있도록 객체화한 것 HTML요소와 자바 스크립트코드의 연결 지점(인터페이스) DOM 트리(tree) 모든 문서 객체들을 트리구조로 표현한 것 모든 요소들을 계층적 구조인 트리 구조로 저장해둔 것 노드(Node) DOM 트리의 구성 요소..
![]()
자바스크립트 핵심 요소 4가지 자바스크립트 Core 문법 기본 문법 데이터타입, 변수, 제어문, 함수 등 클래스, 객체, 프로토타입 내장 객체(Built-in Object) String, Number, Object, Math, Date 등 BOM (Browser Object Model, 브라우저 객체 모델) 웹브라우저 창(윈도우)과 자바스크립트가 상호작용하기 위한 수단으로 제공되는 객체들 Window 객체 BOM 객체들의 최상위 객체 브라우저의 전반적인 기능을 관리하는 객체 자바스크립트로 정의한 모든 전역 변수, 함수, 객체들을 프로퍼티(Property (속성, 멤버필드))로 가지고 있다. window. 을 생략할 수 있다. Navigator 객체 브라우저의 정보, 운영체제의 정보를 제공하는 객체 Loc..
![]()
타이머 (Timer) 함수 setInterval(function, millis) : timerid 지정된 밀리초(millis)마다 function 함수를 반복적으로 실행한다. 타이머 객체의 id를 반환한다. setTimeout(function, millis) : timerid 지정된 시간(밀리초) 이후 function 함수를 한 번 실행한다. 타이머 객체의 id를 반복한다. clearInteraval(timerid) : undefined 지정된 타이머객체를 즉시 종료시킨다. setInterval, setTimeout 모두 종료 가능
![]()
클로저, Closure Free Variable(자유변수) 와 함께 손꼽히는 중요한 개념이니 꼭! 기억 해야 한다. 함수 스코프의 외부로 반환된 내부함수가 자신이 선언(정의)되었을 때의 스코프(환경, 상태)를 기억하는 것 - Lexical Scope 함수 스코프가 종료되었더라도 클로저함수를 호출하면 클로저 함수가 선언되었을 때 만들어진 스코프에 접근할 수 있다. 클로저 함수에 의해 접근할 수 있는 변수를 자유변수(Free Variable)이라고 한다. 자유변수는 새롭게 만들어진 것이 아니라 최초의 변수공간을 계속 사용하는 것이므로 값의 변화가 적용되고, 최신값으로 유지된다.
![]()
JavaScript의 특수한 자료형 Undefined 변수가 초기화되지 않은 상태 변수의 값이 할당되지 않은 상태 변수가 선언되지 않아서 아예 오류가 나는 상황과는 다른 상황인걸 인지해야 한다. 데이터타입조차 결정되지 않은 상황 Null Object 타입의 데이터 키워드 참조대상이 없음을 나타냄 변수를 생성하고 의도적으로 값을 비워둔 상태 Undefined 는 의도적이지 않고 Null 은 의도적이라고 볼 수 있다.
![]()
JavaScript 변수 선언 키워드 var 같은 이름의 변수를 여러번 선언해도 오류가 발생하지 않는다. ex) var data1 = 10; // var data1 = 20; --> data변수가 10으로 초기화 되었다가 20이 대입된다. let 같은 이름의 변수를 여러 번 선언할 수 없다. ex) let data2 = 10; // let data2 = 20; --> 에러발생, data2가 이미 선언됐음. const let과 같음 변수값 초기화는 가능하지만 이후에 대입이 안된다. 변수값 초기화는 필수(하지 않으면 에러가 발생한다.) 적용되는 스코프 var : function scope let, const : block scope var 변수는 함수 내 지역스코프 특성이 부여된다. let, const는 블..
