반응형

IT/JSP&javascript&jQuery 24

[jQuery] selector(선택자) 란 / selector 예제

[jQuery] selector(선택자) 란 / selector 예제 selector (선택자) 란- jQuery의 selector는 DOM의 요소들의 집합에 쉽게 접근할 수 있도록 제공하는 기술입니다. 선택자를 사용해 요소를 먼저 선택해 오고, 선택한 요소에 스타일(CSS) 또는 속성(Attribute)을 적용할 메서드(Method)를 작성 jQuery 선택자에는 직접 선택자인접 선택자- 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택함.탐색 선택자- 선택된 요소 중 더 세밀하게 선택할 수 있는 선택자 라는 html이 있다고 가정 합니다. 기존 javascript에서는 document.getElementById(“test”); 위와 같은 문법으로 input 태그에 접근이 가능했지만, jQu..

[jQuery] 제이쿼리란, 제이쿼리의 특징

jQuery란 - 자바스크립트를 이용해 만든 라이브러리 언어 라이브러리 언어란 자바스크립트로 만들어진 다양한 함수들의 집합 jQuery의 특징 - 웹에서 자주 사용하는 기능의 간편화. ( ex. 복잡한 Ajax프로그래밍을 손쉽게 처리 가능. )- CSS 셀렉터 : html의 구조를 명료하고 읽기 쉬운 형태로 사용 및 표현 가능.- 플러그인 아키텍처 : 중복되는 기능을 최대한 피하고 이미 개발된 수많은 플러그인들을 사용할 수 있음- 메서드 체인 : 여러 개의 동작(기능)을 한 줄에 나열하여 임시 변수의 사용을 최소화 하여 불필요한 코드의 반복을 피할 수 있습니다.- 크로스 브라우저 지원 : 브라우저별로 처리 방법이 다른 이벤트 처리나 함수들의 문장을 하나의 표현으로 사용가능. jQuery API 구조 - ..

[자바스크립트] 제어문 (조건문, 선택문, 반복문)

1. 제어문이란 - 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문. 2. 제어문 종류 - 조건문 : 조건 여부에 따라 제어if, else, else if - 선택문 : 변수에 일치하는 경우의 값에 따라 제어switch - 반복문 : 특정 실행문을 여러 번 반복 실행for, while, do while 3. if 문과 switch 문 if문은 만족하는 데이터가 여러 개일 경우 주로 사용.switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 실행문을 실행시킬 때 사용. 4. break 문 조건식과 상관없이 강제로 반복문을 종료 5. continue 문 반복문에서만 사용할 수 있다.continue문 다음 실행문을 건너뛰고 조건식, 증감식을 수행한다.

[자바스크립트] 자바스크립트란, 자바스크립트 특징

1. 자바스크립트란 - 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어나도록 해주는 언어입니다. 2. 특징 - 인터프린터 언어: 순차대로 구문 분석합니다. 에러가 발생한 다음 줄부터는 구문 분석을 하지 않습니다. - 클라이언트 스크립트 언어: 서버에서 실행되는 것이 아니라, 사용자 컴퓨터에서 실행됩니다. (서버의 부하를 줄일 수 있음.) 클라이언트 스크립트 언어로 처리해야할 프로그래밍을 서버 스크립트 언어인 PHP, JSP, ASP로 모두 처리한다면, 서버의 일처리가 가중되어 부하 걸리게 됨. - 객체 기반 언어 - 공개된 언어 - 다양한 라이브러리 활용: 라이브러리란 자바스크립트를 이용하여 다양한 기능을 쉽게 구현할 수 있도록 한 함수들의 집합입니다.ex) jQuery, jQM, NODE JS 등

JSP EL (Expression Language) 이란 / EL 사용 방법

JSP EL (Expression Language) 이란 / EL (Expression Language) 사용 방법 EL (Expression Language) 이란- EL 이란 데이터를 표현하기 위한 언어입니다. 즉, 다양한 위치에 있는 데이터에 접근하기 위한 언어로 JSP의 기본 문법을 보완하는 역할을 합니다. JSP에서 자바 코드를 대신하여 다른 표현식을 사용함으로서 간단한 방법으로 값을 코딩을 할 수 있게 해줍니다. 기본 문법-${ 표현식 } 표현식에는 변수명, 속성명, 메소드 구조로 이루어져 있고, 정수형, 실수형, 문자열형, 논리형, null 이 올 수 있습니다. 정수형 : 0 ~ 9 정수, 음수 표현을 위해 '-'를 사용합니다. 실수형 : 0 ~ 9 정수, 소수점 표현을 위해 '.' 를 사용..

자바스크립트(JavaScript) 이벤트 전파 버블링 막기

자바스크립트(JavaScript) 이벤트 전파 버블링(Bubbling) 막기 자바스크립트를 이용하여 화면 이벤트를 컨트롤 할 때, 이벤트 전파를 막아야 할 경우들이 있습니다. 웹페이지 내의 버튼을 클릭했을 때 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이러한 현상을 이벤트 버블링 (Event Bubbling) 이라고 하며, 1. 부모에게 이벤트 전파되는 것을 막는 stopPropagation() 2. 같은 DOM에 걸린 다른 이벤트에 전파되는 것을 막는 stopImmediatePropagation() 3. 현재 이벤트의 기본 동작을 중단하는 preventDefault() 4. stopPropagation() 과 preventDefault() 모두 수행한 것과..

JSON(JavaScript Object Notation) 정의, 구조, 장단점

JSON (JavaScript Object Notation) 이란 - JSON이란 경량의 데이터 교환 형식으로 프로그래밍 언어가 아닌 단순히 데이터를 표시하는 표현 방법, 데이터 포맷입니다. 자바스크립트 (Javascript)에서 객체를 만들 때 사용하는 표현식을 의미합니다. Ajax로 서버와 통신하며 데이터를 주고 받을 때 데이터 교환을 쉽게 하기 위해 JSON을 사용합니다. JSON (JavaScript Object Notation)의 구조 - JSON의 자료형은 string, number, true, false, null, object, array 가 올 수 있습니다. 기본적으로 key : value 형태의 구조를 가지고 있습니다. 중괄호 {} 로 감싸게 되며, 이는 객체(Object)가 나올 것을..

[jQuery] append() appendTo() 와 prepend() prependTo()

[jQuery] .append() vs .appendTo() 와 .prepend() vs .prependTo() 웹 개발을 하다 보면 웹 페이지를 동적으로 만들어야 할 경우가 많이 있는데 그러한 경우에 사용할 수 있는 함수 들입니다.(버튼을 클릭 했을 때, 웹페이지의 형태를 바꿔야 한다 등) 우선, append(appendTo)와 prepend(prependTo) 를 비교하자면 append 와 appendTo 는 새로운 요소를 타겟(Target)에 해당하는 요소 마지막에 추가 해주고, prepend 와 prependTo 는 새로운 요소를 타겟(Target)에 해당하는 요소 처음 부분에 추가 해줍니다. append(), appendTo(), prepend(), prependTo() 를 사용할 경우, 부모자..

forward 와 redirect 차이

forward / redirect 는 jsp 환경에서 현재 페이지에서 다른 페이지로 이동하도록 하는 것을 말한다. Forward - 웹 컨테이너 차원에서 페이지 이동만 있고 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없다.그렇기 때문에 웹 브라우저는 최초에 호출한 URL이 표시되고, 이동한 페이지의 URL 정보는 볼 수 없다.=> URL이 변경되지 않는다. 동일한 웹 컨테이너에 있는 페이지로만 이동할 수 있다. 현재 실행중인 페이지와 forward에 의해 호출될 페이지는 request와 response 객체를 공유한다. Redirect - 웹 컨테이너는 Redirect 명령이 들어오면 웹 브라우저에게 다른 페이지로 이동하라고 명령을 내린다.웹 브라우저는 URL을 이동할 주소로 바꾸고, 그 주소..

jQuery를 이용한 스크롤 더보기

jQuery를 이용한 스크롤 더보기 (페이스북과 같은 스크롤을 이용한 더보기 기능) $(window).scroll(function() {// document 높이 (고정) console.log($(document).height());// browser 높이 (가변)console.log($(window).height());// 스크롤 위치 console.log($(window).scrollTop()); // console.log($(window).scrollTop() >= $(document).height() - $(window).height() - 100); // 스크롤이 적당한 위치에 오면 호출 ( 숫자 100의 값을 변경하여 더보기 호출할 높이를 수정할 수 있습니다.) if ($(window).scr..

반응형