'FrontEnd' 카테고리의 글 목록

[JavaScript] 자바스크립트 Paging (페이징에 필요한 데이터) 변수 포함

2020.10.10·

FrontEnd/JavaScript

페이징에 필요한 데이터(변수 포함) curPage current Page 의 약자 현재 페이지 번호, 브라우저에서 선택한 페이지의 번호 totalCount 총 게시글 수 DB에서 조회된 전체 행의 수 listCount 한 페이지 당 보여질 게시글의 수 직접 설정할 수 있게 만든다 totalPage 총 페이지 수 전체 목록을 표현하기 위해 필요한 총 페이지 수 계산으로 알아낸다 pageCount 한 화면에 출력될 페이지네이션의 개수 직접 설정할 수 있게 만든다 startPage 화면에 보이는 페이지네이션의 시작 번호 계산으로 알아낸다 endPage 화면에 보이는 페이지네이션의 끝 번호 계산으로 알아낸다 startNo 화면에 보여지는 게시글의 시작 번호 계산으로 알아낸다 endNo 화면에 보여지는 게시글의 ..

[jQuery] 제이쿼리 jQuery 라이브러리를 이용한 Ajax 사용 방법에 대하여

2020.10.10·

FrontEnd/jQuery

jQuery 라이브러리를 이용한 Ajax 사용 방법에 대하여 XHR 객체를 이용한 순수 자바스크립트 AJAX 는 크로스 브라우징이 지원되지 않는다 XHR 객체를 이용한 코드 작성이 불편하다 jQuery Ajax API 는 크로스 브라우징이 지원된다 jQuery DOM을 이용하여 응답데이터를 손쉽게 적용할 수 있다 jQuery Ajax API 종류 $객체.load(url, [data] [complete]); $객체.get(url, [data] [success] [dataType]); $객체.ajax(url, [settings]); $객체.ajax(settings); jQuery Ajax API 01 - $객체.load(); $객체.load(url, [data] [complete]) AJAX 요청의 결과로 ..

[JavaScript] 자바스크립트 JSON, JavaScript Object Notation

2020.10.10·

FrontEnd/JavaScript

JSON, JavaScript Object Notation 자바스크립트 객체 표기법 JSON 한국어 홈페이지 통신을 할 때 데이터를 전달하기 위한 데이터 표기법으로 사용된다. 통신에 참여하는 모든 시스템(각종 프로그래밍 언어)들이 공통적으로 이해할 수 있는 데이터타입 표기법으로 자바스크립트 객체 표기법을 사용하는 것 JSON의 데이터 표현 방식 객체, Object 클래스, 구조체, Map, HashTable 등을 표현할 때 사용함 { } 로 감싸서 객체를 표현한다. 프로퍼티는 name : value 형태의 쌍으로 표현한다. name 은 문자열로 표현, value는 어떤 타입이든지 허용 여러 개의 프로퍼티를 표현할 때 각 프로퍼티들을 ',' 로 구분한다. ex) 빈 객체 - { } ex) {..

[JavaScript] 자바스크립트 Ajax XMLHttpRequest 객체

2020.10.10·

FrontEnd/JavaScript

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 동작 완료(..

[JavaScript] 자바스크립트 Ajax 란

2020.10.10·

FrontEnd/JavaScript

AJAX, Asynchronous JavaScript With XML XML을 이용한 비동기식 자바스크립트 통신 HTTP 통신을 자바스크립트를 이용하여 비동기식으로 수행하는 것 자바스크립트 코드로 HTTP 요청을 보내고 XML파일 형식의 응답을 비동기적으로 받아서 처리하는 기술 최근 들어와서는 응답데이터를 XML 로 사용하지 않고 JSON 을 사용한다. 자바스크립트의 내장 객체인 XMLHttpRequest 객체를 사용한다. XMLHttpRequest 객체는 줄여서 XHR 로 부른다 보여지고 있는 웹페이지의 새로고침(페이지이동) 없이 서버에 요청을 보내고 응답을 받아야 할 때 사용한다 서버의 데이터베이스 정보가 필요할 때

[JavaScript] 자바스크립트 정규 표현식, Regular Expression

2020.10.09·

FrontEnd/JavaScript

정규 표현식, Regular Expression 정규 표현식 테스트 사이트 특정 규칙을 가진 문자열이나 문자열 집합을 표현하는 데 사용하는 형식 언어(Formal Language) 문자열에서 특정 패턴의 문자열을 검색하거나 치환할 때 사용한다 형식에 맞는 데이터를 입력했는지 검증할 때 사용한다(검증, Validation) 정규식 이라고도 불린다. 정규 표현식 생성 방법 정규식 리터럴 상수 정규식을 '/'(슬래쉬)로 감싸는 방법으로 표현한다. ex) var regEx = /abc/ RegExp 객체를 생성 RegExp 객체의 생성자 함수를 호출하는 방법으로 표현한다. ex) var regObj = new RegExp("abc") 정규 표현식 사용 패턴 단순 패턴 완전히 일치하는 문자열을 대응..

[jQuery] 제이쿼리 노드 스타일 다루는 방법

2020.10.09·

FrontEnd/jQuery

노드 스타일 다루기 $("객체").css("스타일속성") 스타일 속성의 값을 가져온다 $("객체").css("스타일속성", "스타일값") 스타일 속성의 값을 지정한다. $("객체").css(["속성1번", "속성2번", "속성3번", ... ]); 여러개의 스타일 속성의 값을 한번에 가져와서 출력한다. (배열) 배열(Array) 타입으로 입력한다. 객체(Object) 타입으로 반환한다. $("객체").css({"속성1":"1번의 속성값", "속성2":"2번의 속성값", ... }) 여러개의 스타일 속성의 값을 지정하여 설정한다. (객체) 객체(Object) 타입으로 입력한다. 속성 다루기 $("객체").attr("속성이름") 객체의 속성값 얻어오기 $("객체").attr("속성이름", "속성값") 객체의..

[jQuery] jQuery Event, 제이쿼리 이벤트

2020.10.09·

FrontEnd/jQuery

jQuery Event 전부 쌍으로 이루어져 있고, Deprecated 되어있다. bind unbind live die delegate undelegate load unload 지금 사용하고 있는 이벤트 리스너 등록/해제 함수는 on / one(등록) $("객체").on("이벤트이름", function() { // 이벤트 처리코드 작성 }); $("객체").on("이벤트이름", "Selector", function() { // 동적으로 추가되는 객체의 부모요소에 사용한다. // 셀렉터 부분을 알맞게 수정해준다. }); $("객체").on({ "이벤트명1": function() {}, "이벤트명2": function() {} // 이런식으로 여러 개의 이벤트 리스너를 한번에 등록할 수 있다. }); off..

[jQuery] 제이쿼리의 여러가지 노드 사용 명령어

2020.10.09·

FrontEnd/jQuery

노드의 여러가지 명령어 $("노드텍스트"); $("div") // div태그 객체가 생성된다. // $("div") - div태그 객체가 생성된다. // $(div) - div태그 객체를 선택한다. // 구분 잘 해야한다. $("객체").clone() - 객체를 복사하여 반환한다 var $div2 = $("#myDiv").clone(); // 깊은 복사(Deep Copy)로 새로운 사본이 만들어진다. // 자식노드까지 함께 묶음으로 복사된다. 노드 이동/추가 $부모노드.append($추가노드) $추가노드.appendTo($부모노드) 부모노드의 마지막 자식으로 추가노드를 삽입한다, 이미 다른 위치에 존재하던 노드라면 이동이 된다 $부모노드.prepend($추가노드) $부모노드.prependTo($추가노드)..

[jQuery] 제이쿼리의 다양한 노드접근 방식

2020.10.09·

FrontEnd/jQuery

다양한 노드접근 방식 $("객체").eq(index) - index(숫자)번째 노드를 jQuery DOM 객체로 변환한다. $("객체").get(index) - index번째 노드를 JS DOM 객체로 반환한다. jQuery DOM 객체에 [index]를 적용하면 get(idx)와 같은 동작을 한다. $("p")[2] == $("p").get(2) 순차적으로 노드에 접근하기(반복문) $(객체).each(function(index, element) { // 요소마다 각각 반복 될 코드 }) // index : 객체의 인덱스 // element : 해당 반복의 JS DOM 객체 $("p").each(function(i, e) { console.log("-- " + i + " --") console.log(e..

[jQuery] jQuery API, 제이쿼리 API

2020.10.09·

FrontEnd/jQuery

jQuery API jQuery Core jQuery 문법이 적용되었음을 알리는 키워드 jQuery $ ex) document.getElementById("idname") 와 같은코드를 jQuery("#idname"), $("#idname") 으로 사용할 수 있다. jQuery Core 키워드는 변수에 저장하여 사용할 수 있다. var J = jQuery; --> J("#idname") jQuery 스타일의 DOM 객체 이용 코드 $(document).ready(function() { } ) == window.onload = function() { } jQuery 노드객체 찾기 -> jQuery에서 가장 중요한 파트 $("CSS셀렉터") $(jsDOM객체) 순수 JS API를 적용할 수 있는 객체를 js..

[JavaScript] 자바스크립트에서 제공하는 기본 대화상자

2020.10.09·

FrontEnd/JavaScript

자바스크립트에서 제공하는 기본 대화상자 alert 확인버튼과 메세지를 출력하는 Alert 창, 주로 확인용으로 사용된다. 확인 버튼과 메세지를 출력하는 Alert 창 confirm 확인버튼, 취소버튼, 메세지가 들어가는 Confirm 창 반환값이 Boolean 타입이다 확인, 취소 두가지와 메세지가 들어가는 Confirm 창 (반환값이 Boolean 타입이다. True(확인) Or False(취소)) prompt 확인버튼, 취소버튼, 메세지, 텍스트필드가 들어가는 Prompt 창 확인, 취소 두가지와 텍스트필드, 메세지가 들어가는 Prompt 창

[jQuery] jQuery, 제이쿼리란?

2020.10.09·

FrontEnd/jQuery

jQuery 자바스크립트의 DOM을 쉽게 사용하기위해 만들어진 라이브러리 순수 자바스크립트 코드보다 효율적이고, 코드 생산성이 향상된다. HTML 노드, 스타일, 속성, 이벤트 등을 다룰 수 있다. CSS 선택자(Selector)를 이용하여 DOM 객체를 관리한다. jQuery 홈페이지 jQuery 다운로드 다운로드 경로 클릭 후, compressed Ver, uncompressed Ver 둘 중 마음에 드는 것으로 클릭하고 우클릭 - 다른 이름으로 저장을 이용하여 저장하면 된다. 적용하기(head에 아래의 코드 추가하기)

[JavaScript] 자바스크립트 이벤트 처리 코드 작성하는 방법

2020.10.09·

FrontEnd/JavaScript

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..

[JavaScript] 자바스크립트의 Event ! 자바스크립트 이벤트

2020.10.09·

FrontEnd/JavaScript

JS 이벤트, JS Event 사용자의 모든 입력(행위)들을 프로그램에서 미리 정의해놓은 객체 사용자의 입력(동작) 뿐만 아니라 특정 사건도 포함한다. 컴퓨터(운영체제)에서 발생한 이벤트를 감지하고 해당 이벤트를 이벤트가 발생한 응용프로그램에게 전달한다. 전달된 이벤트는 해당 응용프로그램에서 적절한 처리를 수행한다 이벤트 기반 처리(Event Driven) 기본 이벤트 태그 요소에 별도로 이벤트 처리코드를 연결하지 않아도 기본적으로 실행되는 이벤트들 a 태그 요소를 클릭 -> 지정된 경로로 페이지 이동(location.href = "지정경로") 브라우저 화면에 마우스 우클릭 -> 메뉴 보여주기 form 태그 요소에서 submit 버튼 클릭 -> 액션에 지정된 경로로 데이터를 전달하며 페이지 이동 발생(f..

티스토리툴바