'프론트엔드 언어'에 해당되는 글 29건

  1. 2017.06.18 자바스크립트로 작성한 정렬
  2. 2017.03.29 jQuery Mobile ajax refresh Issue 1
  3. 2017.03.24 함수의 호출
  4. 2017.03.24 arguments
  5. 2017.03.24 클로저
  6. 2017.03.24 값으로서의 함수와 콜백
  7. 2017.03.23 즐겨찾기 크로스 브라우징
  8. 2017.03.23 AJAX CROSS DOMAIN 이슈
  9. 2017.03.23 AJAX 기본 개념
  10. 2017.03.23 제이쿼리 충돌 제거
프론트엔드 언어2017. 6. 18. 21:17


1. 단순정렬


function simpleSort(arr) {

var t;


for (var i=0; i<arr.length-1; i++) {

for (var j=i+1; j<arr.length; j++) {

if (arr[i] > arr[j]) {

t = arr[i];

arr[i] = arr[j];

arr[j] = t;

} // End of if

} // End of for // j

} // End of for // i


return arr;

}


console.log(simpleSort(new Array(3,1,4,2))); // 출력 1234




2. 버블정렬 


function bubbleSort(arr) {

var t;


for (var i=0; i<arr.length; i++) {

for (var j=0; j<arr.length-1; j++) {

if (arr[j] > arr[j+1]) {

t = arr[j+1];

arr[j+1] = arr[j];

arr[j] = t;

}

} // End of for // j

} // End of for // i


return arr;

}


console.log(bubbleSort(new Array(3,1,4,2))); // 출력 1234




3. 삽입정렬


function insertionSort(arr) {

var t;


for (var i=1; i<arr.length; i++) {

t = arr[i];

for (var j=i-1; j>=0; j--) {

if (arr[j] > t) {

arr[j+1] = arr[j];

} else {

break;

} // End of if

} // End of for // j

arr[j+1] = t;

} // End of for // i


return arr;

}


console.log(insertionSort(new Array(2,6,1,9,5))); // 출력 12569




4. 퀵정렬


function quickSort(arr) {


if (arr.length < 2) {

return arr;

}


var pivot = arr[Math.floor(arr.length/2)];


var middle = arr.filter(function (data) {

return data == pivot;

});


var low = quickSort(arr.filter(function (data) {

return data < pivot;

}));


var high = quickSort(arr.filter(function (data) {

return data > pivot;

}));

return low.concat(middle).concat(high);

}


console.log(quickSort(new Array(4,8,6,5,2,1,3,9,7))); // 출력 123456789





대부분의 경우 퀵정렬이 빠르지만 모든 경우에 고속으로 정렬이 가능한 방법은 없다.

그러므로 각각 정렬의 특징을 이해한 후 가장 적절한 방법을 선택해야 한다.




'프론트엔드 언어' 카테고리의 다른 글

jQuery Mobile ajax refresh Issue  (1) 2017.03.29
함수의 호출  (0) 2017.03.24
arguments  (0) 2017.03.24
클로저  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
Posted by EL2A
프론트엔드 언어2017. 3. 29. 21:47

제이쿼리 모바일에서 제공해주는 여러가지 이쁜 UI 또는 기능들을 사용할 수 있습니다.


페이지 처음 시작할때만 불러와 적용 되지만 스크립트로 HTML 태그를 수정하면,

수정된 태그는 jQuery Mobile 적용이 되지 않습니다.


저의 경우에는 AJAX 로 데이터를 불러와 append 또는 html로 태그를 변경했는데 제이쿼리 모바일이 적용이 되지 않아 정말 한참동안 애먹었습니다.



하지만.. 결과를 찾았는데. 너무나 허무하네요.. ㅋㅋㅋ


뒤에 밑의 코드만 추가해주면 되는 거였습니다.


.trigger("create");


필요한 경우에는 밑의 코드도 같이 추가합니다.


.listview("refresh");




완성한 코드


$("#meetingList").html(Html).trigger("create");



이로써 AJAX로 데이터를 불러온 후에 HTML 태그를 변경한 후에 제이쿼리 모바일이 다시적용 됩니다.


자동으로 태그 수정시마다 적용되도록 해주는 기능이 있다면 참 좋을텐데 말이죠.. 불편하지만

수동으로 붙여서 해결해야겠네요.

'프론트엔드 언어' 카테고리의 다른 글

자바스크립트로 작성한 정렬  (0) 2017.06.18
함수의 호출  (0) 2017.03.24
arguments  (0) 2017.03.24
클로저  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
Posted by EL2A
프론트엔드 언어2017. 3. 24. 19:46


-> apply는 내장되어있는 메소드이다. 그 메소드를 사용하여 배열을 인자로 넣어서 실행할 수 있다.

'프론트엔드 언어' 카테고리의 다른 글

자바스크립트로 작성한 정렬  (0) 2017.06.18
jQuery Mobile ajax refresh Issue  (1) 2017.03.29
arguments  (0) 2017.03.24
클로저  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
Posted by EL2A
프론트엔드 언어2017. 3. 24. 19:46


arguments (인자)



-> 함수 sum은 인자값을 가지고 있지 않다. 그러나 호출을 할때 인자값이 4개인 sum(1,2,3,4)를 호출하게 되면 약속되어 있는 arguments에 배열로 담기게 된다.

arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 


'프론트엔드 언어' 카테고리의 다른 글

jQuery Mobile ajax refresh Issue  (1) 2017.03.29
함수의 호출  (0) 2017.03.24
클로저  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
즐겨찾기 크로스 브라우징  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 24. 19:44


클로저


클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는것을 가르킨다.



 




 - 흔히들 많이 착각하는 실수!


'프론트엔드 언어' 카테고리의 다른 글

함수의 호출  (0) 2017.03.24
arguments  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
즐겨찾기 크로스 브라우징  (0) 2017.03.23
AJAX CROSS DOMAIN 이슈  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 24. 19:42


함수는 객체다. 자바스크립트가 다른 언어와의 차이점은 함수가 값이 될 수 있다는 점이다.




함수는 함수의 리턴 값으로도 사용할 수 있다.




함수를 배열의 값으로도 사용할 수 있다.




콜백 : 값으로서 함수를 사용할 수 있기 때문에 내장함수의 동작방법을 값을 전달함으로써 동작 방법을 바꿀 수 있다


'프론트엔드 언어' 카테고리의 다른 글

arguments  (0) 2017.03.24
클로저  (0) 2017.03.24
즐겨찾기 크로스 브라우징  (0) 2017.03.23
AJAX CROSS DOMAIN 이슈  (0) 2017.03.23
AJAX 기본 개념  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 23. 19:27

즐겨찾기 크로스 브라우징

북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기하는 기능이다. 필요에 따라 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 이를 구현하는 동작을 웹페이지에 추가하는 디자인이 국내에서는 꽤 자주 사용된다.

브라우저 지원사항

  • IE 모든 브라우저 지원
  • Chrome 단축키 알림을 띄움
  • Opera 단축키 알림을 띄움
  • Firefox 지원
  • Safari 테스트 못해봄



HTML 구조

즐겨찾기 버튼을 원하는 페이지에 삽입한다.



자바스크립트

jQuery를 이용해 아래와 같이 구성된다. 이를 순수 자바스크립트 함수로 만들어 사용해도 된다.


'프론트엔드 언어' 카테고리의 다른 글

클로저  (0) 2017.03.24
값으로서의 함수와 콜백  (0) 2017.03.24
AJAX CROSS DOMAIN 이슈  (0) 2017.03.23
AJAX 기본 개념  (0) 2017.03.23
제이쿼리 충돌 제거  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 23. 19:24


XMLHttpRequest cannot load http://localhost:8080/JSON_OUTPUT/JSON_LIB_OUT.jsp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


크로스 도메인 이슈


내장 html 을 이용하여 hybrid app 을 만드는 경우

ajax 에 의한 서버연동시 아래와 같은 에러 방생

XMLHttpRequest cannot load http://~~~~. Origin null is not allowed by Access-Control-Allow-Origin. at null:1

이 경우는 서버에서  response 시 header 값에 아래처럼 설정해주면 에러 해결된다.



※ JSP 기준

<%

    response.addHeader("Access-Control-Allow-Origin", "*");

    response.addHeader("Access-Control-Allow-Credentials", "true");

%>


출처 : http://javakorean.com/xmlhttprequest-cannot-load-%EC%97%90%EB%9F%AC

'프론트엔드 언어' 카테고리의 다른 글

값으로서의 함수와 콜백  (0) 2017.03.24
즐겨찾기 크로스 브라우징  (0) 2017.03.23
AJAX 기본 개념  (0) 2017.03.23
제이쿼리 충돌 제거  (0) 2017.03.23
배너 슬라이드  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 23. 19:23


AJAX


자바스크립트를 이용해서 비동기식으로 데이터를 전송받는 기술.


JQuery를 많이 사용함.


현재 웹표준은 XML이지만 여는태그와 닫는태그의 쌍쌍 태그로 인해서 많은 용량을 차지함

그래서 JSON 이라는 자바스크립트의 배열식으로 받는 방식이 각광받음


AJAX에 대한 응답으로 XML 또는 JSON 형식으로 데이터를 반환 받음.


출처 : http://www.nextree.co.kr/p9521

'프론트엔드 언어' 카테고리의 다른 글

즐겨찾기 크로스 브라우징  (0) 2017.03.23
AJAX CROSS DOMAIN 이슈  (0) 2017.03.23
제이쿼리 충돌 제거  (0) 2017.03.23
배너 슬라이드  (0) 2017.03.23
날짜 입력 폼 만들기  (0) 2017.03.23
Posted by EL2A
프론트엔드 언어2017. 3. 23. 19:22

한 웹페이지에 여러 자바스크립트 라이브러리를 사용하는 경우 $ 변수가 충돌하는 경우가 발생한다.

이러한 이유료 jQuery에서는 jQuery.noConflict() 메서드를 통하여 이 문제를 피할 수 있게 하고 있다.



$.noConflict()는 jQuery 라이브러리가 불려진 직후 실행되기 때문에 이때까지는 $ 변수에 대한 제어권을 jQuery가 가지고 있지만 해당 메서드의 실행후 $ 변수에 대한 제어권을 포기하게 된다.

하지만 $변수에 대한 제어권을 포기한 이후에도 다른 라이브러리와 충돌 없이 사용할 수 있는 방법들이 있다.



.ready() 메서드가 콜백함수에게 jQuery 객체를 인자로 넘겨주고, 그 인자를 받아 함수범위 안에서 $ 변수를 jQuery 객체로 사용



스스로 실행되는 익명함수를 만들고 jQuery 객처릴 인자로 넘겨준 다음, 그 인자를 받아 함수범위 안에서 $ 변수를 jQuery 객체로 사용




'프론트엔드 언어' 카테고리의 다른 글

AJAX CROSS DOMAIN 이슈  (0) 2017.03.23
AJAX 기본 개념  (0) 2017.03.23
배너 슬라이드  (0) 2017.03.23
날짜 입력 폼 만들기  (0) 2017.03.23
우클릭 해제 스크립트  (0) 2017.03.23
Posted by EL2A