반응형 Programing/JavaScript123 Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. 자바스크립트의 모든 객체들은 부모 역할을 하는 객체와 연결 되어 있습니다. (최상위는 Object) 이런 부모 역할을 하는 객체를 javascript에서는 Prototype이라고 합니다. 예제를 보면서 Prototype에 대해 더 알아보도록 하겠습니다. $(function(){ const Student = function(name, korean, english, math){ this.name = name; this.korean = korean; this.english = english; this.math = math; } console.dir(Student); }); Student라는 생성자 함수를 만들.. Programing/JavaScript 2017. 5. 30. 클로저 사용시 주의할 점. 클로저 유의사항, 반복문, setInterval, 실행시점 클로저 사용시 주의할 점. 클로저 유의사항, 반복문, setInterval, 실행시점 (그 전에 클로저에 대해 알고싶으신 분들은 아래의 Link를 참고하세요.) Link : javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란? javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란? javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란? 자바스크립트 하면 빠지지 않는 것 중에 하나가 클로저(Closure) 입니다. 하지만 이것을 사용하지 않는다고 해서 개발을 못하진 않죠. 그렇.. aljjabaegi.tistory.com [[1. 반복문에서의 클로저]] 예를 보면서 설명 하겠습니다. 1 2 3 4 5 6 7 8 9 va.. Programing/JavaScript 2017. 5. 25. javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란? javascript closure 자바스크립트 클로저의 개념 쉽게 이해. 클로저란? 자바스크립트 하면 빠지지 않는 것 중에 하나가 클로저(Closure) 입니다. 하지만 이것을 사용하지 않는다고 해서 개발을 못하진 않죠. 그렇다고 몰라도 되는 개념은 아닙니다. 클로저의 정의는 매우 다양합니다. 이 책에서는 이렇게 저 책에서는 저렇게 정의 하죠. 예를 들면 '클로저는 내부함수가 외부함수에 context에 접근 할 수 있는 것을 가르킨다.' '생명주기가 끝난 객체에 접근할수 있는 것 이다' '외부함수의 실행이 끝나서 소멸된 후에 내부함수가 외부함수에 변수에 접근하는 매커니즘이다.' 뭐 다 처음에는 뭔데? 하는 생각만 들죠. 여러가지 예를 보면서 이해하는 방법 밖에 없습니다. 자바스크립트의 스코프에 대한 이해.. Programing/JavaScript 2017. 5. 23. javascript sort 자바스크립트 배열 정렬 방법 오름차순 내림차순 javascript sort 자바스크립트 배열 정렬 방법 오름차순 내림차순 자바스크립트의 배열을 정렬 할때는 sort 메소드를 사용하죠. 하지만 이는 문자열 오름차순이라 숫자를 정렬할때는 주의해야 합니다. $(function(){ var array = [10,3,1,4,5,7,9,0]; array.sort(); console.log(array); }); 결과 : 0, 1, 10, 3, 4, 5, 7, 9 이렇기 때문에 오름차순, 내림차순 같이 원하는 방식으로 정렬이 안되죠. 이는 문자열로 정렬 하기 때문입니다. 이럴 땐 sort 메소드의 매개변수로 함수를 넣어주면 됩니다. $(function(){ var array = [10,3,1,4,5,7,9,0]; array.sort(function(left, ri.. Programing/JavaScript 2017. 5. 23. javascript this 알짜만 빼먹기! this 마스터! javascript this 알짜만 빼먹기! this 마스터! Javascript로 개발을 할 때 this는 정말 많이 활용됩니다. 각 상황별 this에 바인딩 되는 객체를 잘못 파악한다면 원하지 않는 결과를 가져올 수 있습니다. 그래서! 각 상황별 this에 바인딩되는 객체를 예제를 통해 확인해보겠습니다. 전역에서의 this 전역에서의 this는 window를 가르킵니다. 객체 내 메소드의 this const obj = { a: "a", func: function(){ console.log(this); } } obj.func(); 객체 내 함수의 this는 자기 자신(obj) 을 가르킵니다. 생성자 함수 내 this 생성자 함수 내의 this는 자기 자신(Test) 이 바인딩 됩니다. Class 생성자.. Programing/JavaScript 2017. 5. 22. javascript 이번달 시작일, 말일 구하기 javascript 이번달 시작일, 말일 구하기 이번달이 3월이라면 20170301, 20170331 을 배열에 담아 리턴 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 fn_getThisMonth : function (){ var value = []; var now = new Date(); var nowYear = now.getYear(); var firstDate, lastDate; var formatDate = function(date){ var myMonth = date.getMonth()+1; var myWeekDay = date.getDate(); var addZero = function(num){ i.. Programing/JavaScript 2017. 3. 30. javascript 이번주 시작, 끝 날짜 구하기 javascript 이번주 시작, 끝 날짜 구하기 기존 기간 데이터로 받던 프로그램이 일간/주간/월간 데이터로 뽑게 해달라는 요청이 와서 급히 뽑은 함수. 이번주가 3월26일(일) 3월27일(월) 3월28일(화) 3월29일(수) 3월30일(목) 3월31일(금) 4월1일(토) 이라면 20170326, 20170401 을 배열에 담아 리턴한다. fn_getThisWeek : function (){ var value = []; var formatDate = function(date){ var myMonth = date.getMonth()+1; var myWeekDay = date.getDate(); var addZero = function(num){ if (num < 10){ num = "0"+num; } r.. Programing/JavaScript 2017. 3. 30. 정규식 사용 textarea url 자동 하이퍼링크 정규식 사용 textarea url 자동 하이퍼링크 1 2 3 4 5 6 7 function autolink(id) { var container = document.getElementById(id); var doc = container.innerHTML; var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi"); var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi"); container.innerHTML = doc.replace(regURL,"$1://$2").replace(regEm.. Programing/JavaScript 2017. 3. 21. Javascript 로컬 파일 실행, 윈도우 프로그램 실행하기 ActiveXObject Javascript 로컬 프로그램, 윈도우 프로그램 실행하기 ActiveXObject 고객요청사항으로 돋보기 같은 기능을 구현해 달라는 요청을 받았습니다... 이미지 돋보기는 여타 많은 쇼핑몰 사이트에 구현이 되어 라이브러리나 소스들이 많지만, 이번 요청은 이미지가 아닌 브라우저 전체 돋보기 기능이였습니다. 그래서 생각한게 윈도우에 있는 돋보기 기능을 활용하면 어떨까 하는 것이였습니다. 하지만 이는 브라우저 설정에서 ActiceX 관련 설정을 풀어주어야 합니다..(보안상 문제가 될 수 있음) (IE 11 기준) 그럼 소스를 우선 보도록 하시죠. - 텍스트 소스 function magnifier(){ try{ var objWSH = new ActiveXObject("WScript.Shell"); var r.. Programing/JavaScript 2017. 3. 15. 요소의 비활성 readonly, disabled 차이와 사용법 요소의 비활성 readonly, disabled 차이와 사용법 보통 웹 페이지에서 어느 특정 요소를 비활성화 처리할 때 사용하는 것이 reaonly 와 disabled 이다. (readonly는 text요소, 나머지 요소는 disabled 사용) 하지만 이 둘은 차이점이 있다. 가장 큰 차이점은 DOM 객체에서 읽을 수 있느냐 없느냐 이다. 쉽게 말하면 readonly의 경우 객체의 쓰기를 비활성화 한다. (객체는 읽음) 하지만 disabled 된 요소는 DOM 객체를 아예 읽지 않는다. 그리하여 태그로 해당 값을 서블릿으로 넘길 때 readonly된 값은 읽어가지만 disabled된 값은 읽지 않는다. 그래서 disabled된 데이터가 넘어가지 않는 것이다. (폼을 submit하든 폼의 데이터를 ser.. Programing/JavaScript 2016. 9. 21. 자바스크립트 유용한 달력 라이브러리 full calendar 사용법 한글 옵션 적용 자바스크립트 유용한 달력 라이브러리 full calendar 사용법 한글 옵션 적용 full calendar 는 달력을 사용해 일정관리 페이지를 만들때 유용하게 사용된다. 그럼 사용법을 보자. 아래의 Link를 클릭하면 홈페이지로 이동된다. Link : http://fullcalendar.io/ 정말 깔끔한 라이브러리고 사용법도 어렵지 않다. 다운로드를 하기 위해서 상단 메뉴의 Download를 클릭한다. 그럼 상단에 최신 압축파일을 다운로드 할수 있다(Latest) 다운받은 파일을 압축풀면 아래와 같은 파일들이 있고 개발할때는 선택된 3개의 파일만이 필요하니 복사해서 원하는 위치에 붙여넣는다. 이제 full calendar 를 사용할 페이지에 3개의 파일을 불러온다. 그리고 body내에 div를 추가한.. Programing/JavaScript 2016. 6. 7. javascript 자바스크립트 배열의 중복값 제거하는 여러가지 방법 javascript 자바스크립트 배열의 중복값을 제거하는 여러가지 방법 Javascript 에서 배열의 중복값을 제거하는 방법들에 대해서 알아보겠습니다. 중복값을 제거하는 함수인 removeDup를 만들어 가장 단순한 방법부터 구현하고 이를 개선해 보겠습니다. const removeDup = function(arr){ const newArray = []; for(let i=0, n=arr.length; i Programing/JavaScript 2016. 6. 3. 자바스크립트 javascript String 기본함수 에러 해결법 toString(), substring(), substr() 에러 해결방법 자바스크립트 javascript String 기본함수 에러 해결법 toString(), substring(), substr() 에러 해결방법 Uncaught TypeError: Cannot read property 'toString' of undefined Uncaught TypeError: Cannot read property 'substring' of undefined Uncaught TypeError: Cannot read property 'substr' of undefined 개발 잘 하다가 기본적인 자바스크립트 함수 사용에서 에러가 났다. 해당 변수가 alert로도 잘뜨고 하는데 실행만하면 위의 에러들이 빵빵.. 에러 내용을 보면 타입을 알수 없다 같은데.. 타입 변환인 toString()을 써.. Programing/JavaScript 2016. 5. 9. javascript alert library 유용한 alert 창 라이브러리 alert창에 url제거 javascript alert library 유용한 alert 창 라이브러리 alert창에 url제거 브라우져마다 제공하는 alert창의 UI는 다르죠. IE의 경우 크롬의 경우.. url 까지 뜨고.. 보기싫죠.. 결론적으로 말하면 우리가 자주 사용하는 브라우져의 alert창은 이쁘지 않습니다. 열씨미 googling을 해보면 많은 alert 라이브러리들이 존재하지만 그중에 좀 이쁘장한 걸 추천해 드릴려 합니다. 그 이름도 달콤한 SweetAlert 아래와 같이 훨~씬 이쁘장한 alert창을 간단하게 띄울 수 있습니다. 다운로드와 적용방법은 아래의 Link를 참고하세요~! Link : http://t4t5.github.io/sweetalert/ 링크를 들어가면 자기들이 얼마나 이쁜지 도발부터 시작하죠... Programing/JavaScript 2016. 3. 31. URL 앞에 이미지 넣기 파비콘 아이콘 넣기 톰캣 고양이 아이콘 변경 URL 앞에 아이콘 넣기 파비콘아이콘 넣기 톰캣 고양이 아이콘 변경 파비콘(favicon, 'favorites + icon') 또는 패비콘이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 프로젝트를 톰캣에 올리면 자동적으로 아래와 같은 고양이 아이콘이 URL 앞에 붙게 된다. URL앞에 붙는 아이콘은 파비콘 아이콘이라 하는데 이것을 수정해 보자. 우선 아이콘을 만들기 위해서는 16x16 크기의 favicon.ico 파일이 필요하다. 원하는 이미지를 ico 파일로 변환하자. 변환은 아래의 사이트에서 간편하게 하자. Link : ico 변환 사이트 16x16 사이즈의 ico 파일을 만들었다면 페이지의 header나 footer에 아래의 한줄만 추가해 주면 된다. 뭐 이런.. Programing/JavaScript 2016. 3. 11. 이전 1 ··· 3 4 5 6 7 8 9 다음 💲 추천 글 반응형