본문 바로가기

Programming/HTML&CSS&JS

객체지향 자바스크립트 소개 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript 비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다. 이 글에서는 객체지향 프로그래밍에 대해 소개하는 것으로 시작해서 자바스크립트의 객체 모델, 그리고 자바스크립트에서의 객체지향 프로그래밍 개념에 대해 간단한 예제로 살펴볼 것이다. 자바스크립트 리뷰(JavaScript review)만약 변수, 형, 함수, 스코프 등 자바스크립트의 개념에 대해 명확히 이해하고 있지 못하다면, A re-introduction to JavaScript를 참고해.. 더보기
example - input type="file" 처리에 관한 예제들 출처 : http://ankyu.entersoft.kr/board_Lecture/lecture_content.asp?lecture_idx=248&gubun_type=javascript 1. type="file" 선택된 파일 초기화 if (/(MSIE|Trident)/.test(navigator.userAgent)) { // ie 일때 input[type=file] init. $("#board_fname1").replaceWith( $("#board_fname1").clone(true) ); } else { // other browser 일때 input[type=file] init. $("#board_fname1").val(""); } 2. 특정확장자 만 선택받는 방법 - accept 에 확장자만 써주면 .. 더보기
jquery dom 객체 존재 여부 체크 출처: http://murdering.tistory.com/126 [웹프로그래머] 요즘 스크립트 작업은 대부분 jQuery에 의존하고 있다.작업을 하다 객체가 존재하는가 하지않는가가 필요해서 코딩을 약간 해봤는데 무조건 객체가 존재한다고 나와버린다. 보통 자바스크립트에서는 alert(getElementById("id값"));이렇게 적으면 존재유무가 표시되는데.... alert($("#id값));jQuery도 비슷하게 했는데 안된다.그래서 검색을 하다보니 jQuery는 다른 방식으로 객체를 찾아내는걸 알게 되었다. alert( $("#id값").length );위와 같이 수행했을경우 id값이 존재하면 1 이상을, 존재하지 않으면 0을 리턴한다. 존재할때 계속 코드를 수행하게 만들기 위해서는 if ( $(".. 더보기
jQuery로 outerHTML처럼 사용하기 출처 : https://blog.outsider.ne.kr/401 Javascript에는 innerHTML이 있습니다. 선택한 Dom객체의 내부 HTML을 가지고 있는 프로퍼티라고 할 수 있습니다. (Javascript가 아니라 DOM에 있는건가요? 흠..) Html test 예를 들어 위와같은 소스가 있을때 testdiv의 innerHTML은 test입니다. testdiv 엘리먼트를 선택하고 innerHTML을 하면 a태그부터 가져올 수 있지만 div태그는 가져오지 못합니다. 자기 자신은 innerHTML에 포함되지 않죠. 간단한 소스야 가능하지만 DOM트리가 복잡할때는 div부터 HTML태그를 가져오려면 좀 난감할 때가 있습니다. jQuery로는 $("#testdiv").html()을 하면 a태그만 .. 더보기
첨부파일 byte 용량 계산 [bytes, KB, MB, GB, TB, PB으로 변환] 12345678910111213141516171819//byte를 용량 계산해서 반환 function byteCalculation(bytes) { var bytes = parseInt(bytes); var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; var e = Math.floor(Math.log(bytes)/Math.log(1024)); if(e == "-Infinity") return "0 "+s[0]; else return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e]; }Colored by Color Scriptercs첨부파일 같은 파일 사이즈를 받아서 byte, KB, MB, GB, TB, PB 형을 .. 더보기
html css 태그, div 중앙정렬 방법 6가지 html css 태그, div 중앙정렬 방법 6가지table 태그에서는 valign을 사용하여 세로 정렬이 가능하지만 div 태그는 세로정렬 옵션을 지원하지 않는다. div 태그에서 중앙정렬하는 방법 6가지를 알아보자 1. position:absolute와 margin 마이너스값을 이용한 중앙 정렬 방법 * html 중앙정렬 방법 * css.layer{ position:absolute; top:50%; left:50%; width:100px; height:100px; background:skyblue; margin:-50px 0 0 -50px; }ie7 이상 모든 브라우저에서 지원 가능하다.width와 height값이 고정사이즈인 상태에서만 사용할 수 있다. 2. position:absolute와 inl.. 더보기
jQuery ready와 load의 차이 출처 : http://ojtiger.com/179 위 이미지와 같이 한개의 html 문서를 만드세요.앞장에서 배운 jQuery를 불러오는 소스를 사이에 넣었습니다.그리고 우리가 편집해야할 부분은 바로 5번째 라인입니다.보통의 경우 console.log를 사용하여 콘솔에 로그를 찍어봅니다만, 확실히 확인하기 위하여 alert함수를 사용하기로 합니다.alert함수는 알다시피 파라메터를 메시지로 경고합니다.1alert('ojtiger.com');cs5번 라인에 위 소스를 추가해보세요.저장하시고, 페이지를 실행시켜보세요.여기 까지 따라왔다면 정말 소질이 있는분입니다.그럼 jQuery를 사용하여 alert함수를 실행해 보도록 하겠습니다. 방금 추가한 5번째 라인을 삭제하시고 다음과 같이 입력해보세요.123$(do.. 더보기
애플릿위에 엘리먼트 올리기 출처 : http://annotations.tistory.com/14 애플릿을 사용하는 프로젝트에서 간혹 엘리먼트를 올려야 할 상황이 있습니다. 제가 근무하는 직장의 웹기반 솔루션은 일부분만 자바 애플릿을 사용합니다. 업무중 한가지 상황이 주어졌는데요. "jQuery Layout을 사용하면서 resize를 할 경우 미리보기 막대(엘리먼트)가 애플릿에 가려져 보이지 않으니 보완"하라는 내용이였습니다. 애플릿을 감싸고 있는 엘리먼트, 상위, 그 상위의 z-index를 변경해도 전혀 먹히지 않습니다. 꼭 애플릿이 아니더라도 Vworld, Google Earth 등등 또한 먹히지 않습니다. VWorld는 안되는거였다.... 해결방법은 매우 쉽습니다. 123 Colored by Color Scriptercs 2... 더보기
[번역] 자바스크립트 클래스를 정의하는 3가지 방법 (3 ways to define a JavaScript class) 출처 : http://steadypost.net/post/lecture/id/13/ 이 글은 Stoyan Stefanov 의 글 3 ways to define a JavaScript class 을 번역한 것입니다. (http://www.phpied.com/3-ways-to-define-a-javascript-class/) 자바스크립트 클래스를 정의하는 3가지 방법 소개 자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다. 먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만.. 더보기
자바스크립트 객체 생성 방법 출처 : http://emflant.tistory.com/67 자바스크립트는 놀랍게도 거의 모든 것이 객체로 이루어져 있다. 기본자료형 역시 null과 undefined 를 제외한 나머지도 객체로 되어 있다. 객체를 생성하는 방법에는 2가지 경우가 있다. 1. object initializer 방법2. constructor function 이용하는 방법 1번은 객체를 직접 { } 안에 property와 value를 정의해서 사용하는 방법을 의미한다.?1var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};이때까지 많이 해왔던 방법이라 패스. 2번은 생성자 함수(constructor function)를 이용해서 객체를 생성하는.. 더보기
[jquery] ajax 방법 [jQuery] Ajax 방법 Ajax를 이용하면 웹 어플리케이션과 비동기적으로 데이터를 주고 받은후 클라이언트에서 해당 데이터에 대한 처리를 할 수 있다. 쉽게 이야기하면 Ajax를 이용할 경우 별도의 웹 페이지를 호출하지 않더라도, 클라이언트 화면을 유지한채 다른 페이지를 호출할 수 있다. Ajax에 대한 설명은 위키백과를 참고하기 바란다. - http://ko.wikipedia.org/wiki/Ajax 이러한 Ajax를 jQuery를 이용하면 정말 손쉽게 사용할 수 있는데, 기본적인 설정값만 넣어주면 바로 사용이 가능하다. 다음 예제는 웹페이지가 로딩된 후 ajax를 이용하여 ajaxData.jsp를 호출하는 예제이다. ajaxData.jsp는 텍스트 형식의 값을 리턴하며 리턴된 값을 alert창과.. 더보기
JSON 문법 및 오류사례 출처 : http://chayu07.tistory.com/89 JSON 문법검사기http://www.jsonlint.com/ Cross browser 에서의 흥미로운 예제들 IE8 JSON.parse(”{ ‘a’:1 }”) : Syntax Error CHROME JSON.parse(”{ ‘a’:1 }”) : OK FireFoxJSON.parse(”{ ‘a’:1 }”) : Syntax Error OPERA 10.10 JSON.parse(”{ ‘a’:1 }”) : Undefined variable JSON SAFARI 4.0.4 JSON.parse(”{ ‘a’:1 }”) : Syntax Error jQuery 1.3 까지는 고유의 parsing 기술이 쓰이기에123456$.ajax({url: "/url", .. 더보기
HTML5를 이용한 프리젠테이션(PPT) 만들기 HTML5 프리젠테이션 도구를 아시나요?외부 강연을 하다보면 발표 자료를 자주 만드는데, 대부분 MS PowerPoint나 Apple Keynote 같은 것을 사용하게 됩니다. 그리고 나서 Slideshare나 Slidedeck 같은데 올리고 공유하게 되지요. 하지만 HTML 마크업만 조금 배우고, 손 코딩에 익숙한 분들에게는 '웹 기반 프리젠테이션 도구'를 추천합니다.전용 프로그램 만큼 강력한 기능을 제공해 주고, 무엇 보다 웹 브라우저만 있으면, 어디서나 쉽게 PT가 가능하고 웹 콘텐츠를 풍성하게 할 수 있으니까요. (아래 데모들은 모바일 보다는 PC 웹 브라우저 특히, 파이어폭스나 크롬에서 잘 보입니다.)1. Reveal.js Github에서 당당하게 가장 많은 인기를 끌고 있는 웹 프리젠테이션 도.. 더보기
[html] checkbox 무조건 클릭 된 상태로 변경(read only 비슷한 기능) nodejs위에 Jade로 웹 개발 작업을 하면서 체크박스를 사용하게 될 일이 있었는데체크박스를 눌러도 해제가 되지 않는 체크박스를 구현 해야하는 경우가 있었다.만약 하고 싶다면 아래와 같이 하면 된다. label.checkbox-inline input(type="checkbox" value="value" checked="checked") | checkbox test1brlabel.checkbox-inline input(type="checkbox" value="value" checked="checked" onclick="return false") | checkbox test2 더보기
html 탭으로 고정시키기 http://ko.learnlayout.com/position.html 더보기
[Javascript] 책 넘기는 효과 http://www.turnjs.com/ 더보기
이클립스 - jQuery Syntax 오류 제거 출처 : http://javaworld.co.kr/46 이클립스에서 jQuery 등의 외부 라이브러리에 대한 Syntax 오류가 발생하는게 거슬리면, 다음과 같이 제외 대상으로 등록한다. 해당 프로젝트명을 우클릭한 다음 Properties 메뉴를 선택하여 설정창을 띄운 후, JavaScript -> Include Path 메뉴의 Source 탭으로 이동한다. Source 탭에 나오는 여러 소스 폴더 중에서 제외할 js 파일이 속한 폴더를 펼친 후에, Excluded 항목을 선택한다. Exclusion patterns 영역의 오른쪽에 있는 Add 버튼을 누른 후 제외할 js 파일을 선택한다. 더보기
구글맵, 구글어스 핀아이콘 등록하는 방법 출처 : http://enjoyfun.tistory.com/77 구글맵, 구글어스를 사용하면 특정지점을 표시하기 위해서 아이콘을 쓰는 경우가 있습니다. 저같은 경우는 구글에서 제공해주는 기본 아이콘을 사용했었는데.... 어느날 10보다 더 큰 수의 아이콘이 필요하길래 인터넷을 찾아보니깐 이런 사이트가 있네요. http://mapicons.nicolasmollet.com/ 다양한 스타일의 아이콘을 제공하고 있습니다. 다만, 구글맵이나 어스에서 아이콘을 사용하기 위해서는 인터넷상에 아이콘을 올려놔야 합니다. 어떻게 하냐구요? 1.티스토리에 이미지를 올려놓는다. 2.이미지를 우클릭해서 url을 알아낸다. 3.구글어스에서 사용한다. 1. 고도몰, 카페24와 같은 업체에서 호스팅을 한다. 저는 한달에 만원정도 하.. 더보기
자바스크립트 차트 http://www.amcharts.com/download/ 더보기
[HTML5] GEOLOCATION http://m.mkexdev.net/56 더보기
스마트폰에 최적화된 반응형웹사이트 템플릿 무료 소스 모음 출처 : http://modangs.tistory.com/371 반응형 홈페이지 제작에 유용한 무료 템플릿 모음 요즘 웹디자이너에게 핫이슈라고 할수 있는 반응형 웹사이트는 모든 브라우져와 모바일 기기에서 자동으로 크기를 변환해주는 방식을 말합니다. 최근 스마트폰 사용자가 많아지면서 모바일 방문자 유입이 급속도록 증가함에 따라 반응형 홈페이지에 대한 관심도 날로 증가하고 있습니다. 하지만 아직까지는 미디어쿼리를 지원하지 않는 익스플로러 구버전 등 호환성에 문제가 많아 현 상황을 지켜보는 사람들도 많은데요. 윈도우 XP 업데이트 종료 이후에 구버전의 익스플로러 사용자들이 대거 8이상을 사용한다면 빠른시간안에 반응형 웹디자인이 대세가 되지 않을까 생각이 드네요. 오늘은 평면디자인, 반응형 레이아웃, JQuer.. 더보기
Layer popup http://blog.naver.com/small95/40184822938 더보기
html 라디오 버튼 예제 2 3 4 0 선택값 더보기
1. Tomcat 설치 및 이클립스와 연동 1. Tomcat을 다운 받기 위해 http://www.apache.org에 접속한다.2. apache 사이트에서 밑으로 내려가면 Tomcat항목으로 들어간다.3. 왼쪽 프레임에서 Tomcat 6.0이라고 써있는 항목으로 들어간다.4. zip 파일을 선택하면 다운로드가 시작된다.    5. 다운로드가 완료되었으면 파일 압축을 풀고 적절한 곳에다가 위치 시킨다. apache-tomcat-6.0.35\conf\server.xml을 에디트 플러스나 메모장으로 열어서 위와 같이 설정을 수정한다.6. 내 컴퓨터 -> 환경변수 항목으로 들어가 위와 같이 tomcat파일 경로를 적절하게 넣어준다. 7. cmd창을 열어서 startup 명령어를 실행 시.. 더보기

티스토리툴바