프로그래밍/JavaScript43 JavaScript 팝업박스 Popup Boxes Alert Box버튼이 하나만 있는 알림창을 띄우기alert("sometext"); Confirm Box확인/취소 버튼이 있는 선택창을 띄우기confirm("sometext"); confirm은 Boolean값을 반환한다. 확인을 누르면 true, 취소를 누르면 false가 반환된다. Prompt Box 값을 넘겨받을 수 있는 창 띄우기prompt("sometext","defaultvalue"); Line Breaks\n이들 알림창에서 줄바꿈을 하기 위해 Line Break 키워드를 사용한다. alert("Hello\nHow are you?"); 2013. 1. 4. JavaScript 분기문 Switch Switch Statement switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } 대표값을 비교하여 특정 블럭을 실행시킬 수 있다. n이 case 문에 의해 true가 되면 해당 블럭이 실행이 된다. break; 키워드가 있는 것을 눈여겨 봐야 한다. break 키워드는 해당 조건을 실행하고 switch 문을 빠져나가는 역할을 하게 된다.default 키워드는 모든 조건이 참이 되지 않았을 경우 실행되게 된다. 즉 if.. else의 else 문과 같은 것이다. var day=new Dat.. 2013. 1. 4. JavaScript 조건문 ( if .. else ) If ... Else 조건 분기문 (If...Else Statements) 아주 빈번하게 사용하게 된다. 사실 코드의 대부분은 이 분기문으로 구성되어 있다. 쉽게 생각하면 심리게임을 떠올리면 된다. Yes면 1번길로 No면 2번길로가 되는 것이다. If 단독문if (condition) { code to be executed if condition is true } 아래 예제는 현재 PC에 보이는 시간이 20시 이하면 특정한 행동을 하는 예제이다.if (time 2013. 1. 4. JavaScript 연산자 ※ 참고로 이 포스팅은 자바스크립트 스터디를 위한 간략 설명입니다.Operator 연산자 = 는 대입 연산자+ 는 더하기 연산자 초등학교 때 배우는 사칙연산은 그대로이다. OperatorDescription ExampleResult of xResult of y +Additionx=y+275 -Subtractionx=y-235 *Multiplicationx=y*2105 /Divisionx=y/22.55 %Modulus (division remainder) x=y%215 ++Incrementx=++y66 x=y++56 --Decrementx=--y44 x=y--54 대입 연산자(JavaScript Assignment Operators) OperatorExampleSame AsResult =x=y x=5 +=.. 2013. 1. 4. JavaScript 오브젝트(Object) 설명 ObjectsJavaScript의 대부분이 Object 이다. 내장 객체 뿐만 아니라 사용자 객체 추가도 가능하다. JavaScript Object자바스크립트는 여러개의 내장 객체(built-in object)를 지니고 있다. String, Date, Array 등등..object들은 속성들(properties)과 함수들(methods)로 구성된 특징이 있다. Objects Properties Property는 객체와 연관된 값이다. 객체의 속성에 접근하는 방법은 아래와 같은 "점" 연산자를 사용한다.objectName.propertyName 아래 예제는 문자열의 길이 속성을 이용하여 문자열의 길이를 알아내는 예제이다.var message="Hello World!";var x=message.length;.. 2013. 1. 4. 자바스크립트 날짜 계산 자바스크립트로 날짜 계산할 경우가 많습니다. 요즘이야 뭐 달력들이 워낙 잘 나와서 그 수고를 덜긴 하는데.. 그래도 코딩으로 계산해야 하는 경우가 종종 있죠. 얼마전에 그 작업을 하다 짜증이 나서 확 만들었습니다만;;;;; 대충 만든거라 참고만 하시구요. 응용해서 사용하세요. 먼저 미리보기부터 보시고 아래쪽에 소스코드를 올리겠습니다. 미리보기 아래는 소스 기준일자 : (형식 : 0000-00-00) 기준월 첫날 : 기준월 말일 : 이전달 첫날 : 이전달 말일 : 다음달 첫날 : 다음달 말일 : 달 후 첫날 달 후 말일 일 전 일자 일 후 일자 2012. 6. 21. 콤마 제거하기 정규식으로 가장 간단하게 처리하는 내용입니다. 예외 사항에 대한 처리를 좀 더 강화하셔야 할 겁니다. // 콤마를 제거 function GetNumString(s) { var rtn = parseFloat(s.replace(/,/gi, "")); if (isNaN(rtn)) { return 0; } else { return rtn; } } 2012. 5. 15. 3자리 콤마 표시하기 // 3자리 컴마표시 function GetCommaValue(n) { var strNumber = String(n).split('.'); //문자열 상태일때 소수점 추출 n = parseFloat(strNumber); if (strNumber.length > 1) { return n.toLocaleString().slice(0, -3) + "." + strNumber[1]; } else { return n.toLocaleString().slice(0, -3); } } 사용법은 //입력시 컴마표시 이벤트 function SetInputComma() { $("#idArea").find("input").bind("blur", function () { if (this.getAttribute("input_typ.. 2012. 5. 15. 자바스크립트 반올림, 올림, 버림 자바스크립트에 내장함수가 있지만 원하는 결과가 안나옵니다. 특히나 반올림 같은 경우는 말이죠. 만들어 써야 합니다. 아래를 참고하세요.주욱 긁어서 사용하시거나 필요한 부분만 떼다가 사용하세요. 예제가 포함되어 있으니 잘 떼서 사용하시구요. 반올림 올림 버림 반올림 값 : 올림 값 : 버림 값 : 2012. 5. 9. 백스페이스 키를 막아보기 백스페이스 키를 누르면 뒤로가기가 된다는 건 다들 알고들 있을거고. 이번에 했던 작업은 콤보박스(태그는 select죠)에 포커스가 있을 경우 백스페이스를 누르면 뒤로가기가 되는 것을 막아달라는 요청이 있어서 해보았다. 간단하게 처리할 수 있겠다 하면서 진행했는데 의외로 몇 가지 복병이 있었다. 이 스크립트의 키 포인트는 1. 백스페이스(Backspace)키는 onkeydown() 이벤트 함수로 감지할 수 있다. 2. 현재 포커스 위치를 알아내는 방법은 document.activeElement 이다. 3. 포커스가 있는 태그 객체의 태그명을 알고 싶으면 someObject.tagName 을 사용한다. 4. 백스페이스의 keyCode 값은 8이다. 5. 특정한 속성값을 알고 싶으면 object.getAttr.. 2011. 7. 13. parseInt() 함수가 이상해~ 바코드 관련 작업 중에 넘어온 바코드 정보인 문자열을 정수로 바꿔야 해서 아래와 같이 했다. var t = document.getElementById("txtBarcode"); //바코드 값이 들어오는 텍스트 박스임 if(t == undefined || t == "") return; alert(t); var no = parseInt(t); alert(no); 바코드 값은 문자열로 '00000000162" 였다. 당연히 t='00000000162' 고 no=162 이어야 하는데 아래같이 엉뚱한 값이 나왔다. 순간 당황~~ 응? 이건 뭐야? 하다가 찾아봤더니 문자열 앞에 000 으로 값이 채워져 있어서 이 놈이 162가 8진수 값인지 알았던 것. parseInt에 2번째 인자에 값을 줄 수 있었다는. 아래처.. 2011. 7. 12. [javascript] AJAX + JSON 의 eval() 함수 사용의 문제 상품등록 화면을 ajax로 처리하다 보니 데이터의 자료구조를 잘 만들어야 할 필요가 있다. 그래서 json 의 사용.. 배열과 크게 다를건 없지만 걍 객체지향 냄새가 좀더 난다는거.. 그리고 배열 요소(인덱스) 처리하느라 골머리 썩지 않는 점은 참 좋다. 직관적이기도 하고.. 그런데 json 데이터를 객체화 하기 위해 자바스크립트의 eval! 메소드를 사용해야 하는데.. 이게 악성코드를 실행시킬 위험이 있단다. 그래서 json.org/json2.js 배포파일이 필요하게 됬다. 더 상세한건 http://blog.outsider.ne.kr/257 요분의 포스팅이 참 도움이 된다. 땡큐베리 감사... 어찌됬든 eval!(o.responseText) 가 아닌 JSON.parse(o.responseText)로.. 2011. 1. 19. [javascript] AJAX 기본으로 쓰기 //ajax 객체 생성 function getAjaxHttp(){ var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } //데이터 요청 보내기 //요건 ajax객체와 호출한 곳에서 넘겨준 콜백 메소드를 재호출해 준다. //간단하게 정수타입을 반환해서 쓰면 utf8 필요없다. function requestAjaxData(ajax, method, url, callback){ ajax... 2011. 1. 19. [자바스크립트] 숫자에 콤마 붙이기 //콤마 붙이기 function numberComma(o) { var nocomma = o.value.replace(/,/gi,''); // 불러온 값중에서 컴마를 제거 var b = ''; // 값을 넣기위해서 미리 선언 var i = 0; // 뒤에서 부터 몇번째인지를 체크하기 위한 변수 선언 // 숫자를 뒤에서 부터 루프를 이용하여 불러오기 for (var k=(nocomma.length-1); k>=0; k--) { var a = nocomma.charAt(k); if (k == 0 && a == 0) { // 첫자리의 숫자가 0인경우 입력값을 취소 시킴 o.value = ''; return; }else { // 뒤에서 3으로 나누었을때 나머지가 0인경우에 컴마 찍기 //i가 0인 경우는 제일 뒤.. 2011. 1. 19. [자바스크립트] Apple.com의 슬라이드 갤러리 애플 사이트의 구성중 하나인 슬라이드가 되는 이미지 갤러리를 구현해 봤습니다. 예제를 먼저 보실 수 있습니다. 배경색, 이미지 깨짐이 발생할 수 있습니다. 미리보기 CSS와 마크업을 조금 다듬으면 좀더 보기 좋을것 같습니다. 코딩은 간단하니 소스를 직접 참고하시면 되겠습니다. 소스는 첨부합니다. 그럼 즐프하세요~~ 2011. 1. 14. [자바스크립트] 탭 메뉴 만들기 이 글은 다음 블로그에 있던 포스팅을 재 정리 한겁니다. 그쪽이 워낙 개판으로 정리가 안되어 있어서요. 이번에는 간단하게 탭 메뉴를 만들어 보겠습니다. 실제로는 메뉴가 아니고 탭을 선택하면 공통영역에 콘텐츠를 바꾸는 아주 소스가 널려있는 그 기능. 실제로는 별게 아닙니다. 자 데모를 작동해 보시죠. 데모 보기(탭 메뉴를 클릭하시거나 마우스를 올리시면 작동합니다. 이미지는 깨질 수 있습니다.) 동적으로 사용할 수 있도록 구성해 보았으니 한번씩 써보시고 문제가 있거나 개선점이 있으면 피드백하셔도 됩니다.(사실 제이쿼리는 롤링이나 탭 기능을 합쳐 놓았습니다. 그게 훠얼씬 사용하기 쉽죠. ^^;; ) 위 이미지와 같이 각 사이트명 또는 숫자에 마우스를 올리거나 클릭하면 하단의 영역이 바뀝니다. 따로 설명하지 않.. 2010. 12. 29. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - 번외편(?) 이번 포스팅은 이전 4번의 포스팅으로 마무리 지었던 소스에 몇가지 기능을 더 추가한 버젼입니다. 멋지게 표현하면 스핀오프 시리즈라고 할까요? ^^ 상세보기에서 이전글/다음글을 볼 수 있는 기능과 썸네일 보기에서 핸들을 잡고 움직이면 콘텐츠가 움직이는 기능입니다. 모두 제가 이전에 포스팅 했던 소스들을 그대로 사용을 했으며 따로 보시길 원하시면 WEB > Javascript 카테고리에 보시면 있습니다. 혹시 모르니 제일 아래쪽에 링크도 쏴 드리죠. 결코 조회수를 늘리기 위함이 아닌... 하하하;;; 자 이제 미리보기를 통해 사용할만 하신지 확인해 보세요. 데모 실행해보기(실제 작동되는 예제입니다. 리스트/상세/썸네일 보기를 클릭해 보세요. 이미지는 깨질 수 있습니다.) 원래는 width가 935 픽셀이였는.. 2010. 12. 29. [자바스크립트] 이미지 슬라이드 이 자료는 현재 버그가 있습니다. 버그가 수정되기 전까지는 추천드리지 않습니다. 필요하시면 아래 링크의 다른 글을 참고하시기 바랍니다. jQuery 를 이용한 이미지 로테이트 이미지가 슬라이딩 되는 자바스크립트입니다. 아래 예제를 보시면 됩니다. 이미 Jquery 를 이용해서 많이들 사용하시고 계신데요. 저는 Jquery를 사용하지 않고 짜봤습니다. 공부하실 목적이나 JQuery 프레임워크가 부담스러우신 분들 사용하시면 되겠습니다. 미리보기 이 소스는 다음 블로그에 상세히 설명을 했던 소스입니다. 파일은 첨부합니다. 첨부된 파일의 이미지 경로 부분은 환경에 맞게 수정해서 사용하셔야 합니다. 아~ 그리고 파일 타입은 ANSI타입입니다. 위 예제는 UTF-8입니다. 한글이 깨지길래 인코딩을 바꿔서 하나 더 .. 2010. 12. 29. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #4 4번째 포스팅이네요. 이번에는 죽이되든 밥이되든 마무리 하려 합니다. 사실 많이 부족한 내용으로 될 거 같은데요. JSON데이터를 이용해서 다양한 모양의 스킨에 뿌리는 것이 주 목적이었기 때문에 일단은 그에 대한 내용만 구성하기로 했습니다. 안쪽에 위치한 콘텐츠에 대한 스크립트 까지 다 작성해서 포스트를 구성하려면 책 한권은 나오겠더군요. 물론 과장 쪼끔 했습니다. 하하. 그래서 이번 포스팅에서는 상세보기의 좌우 화살표, 썸네일보기의 하단 스크롤바에 대한 내용은 포함되지 않았습니다. 나중에 제가 작업을 한 후에 따로 링크를 걸어드리겠습니다.(사실 저도 이걸 써야 되거든요 ^^) 자 그럼 본론으로 돌아가서 저번 포스팅까지 왠만큼은 그럴싸하게 구성했었습니다. 못보신 분들을 위해 링크 올려드립니다. 2010/.. 2010. 12. 27. [자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #3 이번 포스팅에서는 실제로 데이터를 만들고 실제로 구동할 수 있는 함수들을 만들어 보도록 하겠습니다. 실제로 데이터들을 접근하고 원하는 위치에 데이터를 노출시키는 작업이 되겠습니다. 들어가기에 앞서 이번 스크립트는 아주 협소한 코드로 짜여 질것이며, 단순히 현재 화면을 구현하고 테스트하기 위한 소스가 될것입니다. 마크업과 JSON 데이터를 변형시키겠습니다. 마크업에 대해서는 아래 코드와 함께 설명을 드리겠습니다만 그림도 같이 들어갈 수 있겠네요. JSON 데이터는 실제로 나올 데이터를 예제로 만들어서 사용하겠습니다. 보시면 이해가 빠르실것 같습니다. 먼저 JSON 데이터를 보도록 하겠습니다.(너무 길어서 토글로 처리합니다.) [열기] var datas = { config : { jsonName : "dat.. 2010. 12. 22. 이전 1 2 3 다음
