'자바스크립트' 태그의 글 목록

지금 안드로이드 앱 개발을 할때 사용하는 이클립스 버전은 Helios SR2 버전이다.
여기서 웹쪽 구글맵 매쉬업 프로젝트를 함께 사용중.

근데, 저장을 할때마다 에러가 난다.
처음엔 참고 사용했다. ㅠ.ㅠ
하지만 계속 참고 사용할 수가 없었다.

해서 해결책을 찾았다.
아주 간단하다.
Package Explorer 등에서 해당 프로젝트를 선택하고 마우스 우클릭 > Properties > Builders에서
JavaScript Validator의 체크를 해지하면 된다.

참고 쓰지 말자. 알면 간단하다.
해결하고 나니 속이 시원한게 생명연장에 도움이 될 듯도 하다.

jquery, 자바스크립트

$(document).ready(function(){

$(":input").keydown(function(e) {

var inputs = $(this).parents("form").eq(0).find(":input");

var idx = inputs.index(this);

//탭처리 예외

if(inputs[idx].id=="RgtMbdGbn"

|| inputs[idx].id=="AplrSid"

|| inputs[idx].id=="RgtMbdNm"

|| inputs[idx].id=="Telno"

|| inputs[idx].id=="Hpno"

|| inputs[idx].id=="RegnCode1"

|| inputs[idx].id=="RgtMbdNm1"

|| inputs[idx].id=="RepRegnum"

|| inputs[idx].id=="LmtCn" ){

}else{

if (e.keyCode == 13) {

if (idx == inputs.length - 1) {

inputs[0].select();

} else {

try {

inputs[idx + 1].focus(); // handles submit buttons

//inputs[idx + 1].select();

}catch(e){}

}

return false;

}

});

분명 더 간단하고 더 아름다운 방법이 있을 것 같습니다만 여기까지...

jquery, 스크롤페이징, 자바스크립트

블로그를 한창 할때, 믹시의 스크롤 페이징을 보고서 어떻게 하는 건지 참 많이 궁금해 했던 기억이 납니다.
졸립기도 하고 갑자기 스크롤 페이징이 생각 나서 검색해봤는데 쭌스님의 포스팅과 Raj Gorsia님의 포스팅을 찾게 되었습니다. 스크립트 라이브러리를 사용하지 않는다면 쭌스님의 글을 참고해서 작성하면 되겠고 JQuery를 사용한다면 Raj Gorsia님의 글을 거의 그대로 사용하면 되겠네요.

예전에 제가 감을 잡지 못 했던 부분은 아래 한줄입니다. ㅠ.ㅠ

if ($(window).scrollTop() == $(document).height() - $(window).height()) {
또는
if(content.scrollTop < content.scrollHeight - 500)

이렇게 간단한데 말이죠...

지금은 응용할만한 프로그램을 만들지 않지만 다음에 꼭 활용해서 만들어 보고 싶네요.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery</title>

//<![CDATA[

var pageLoaded = 1; //현재 페이지

$(window).scroll( function() {

if ($(window).scrollTop() == $(document).height() - $(window).height()) {

pageLoaded = pageLoaded + 1;

// ajax를 추가해서 목록을 받아온다

// alert(pageLoaded);

$('#main_content').append(

"main_content"+pageLoaded+"<br><br><br><br><br><br><br><br><br><br><br><br><br>");

}

});

//]]>

</script>

</style>

</head>

<body>

</ul>

</div>

<div id="login_box">login_box</div>

main_content1<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content2<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content3<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content4<br><br><br><br><br><br><br><br><br><br><br><br><br>

main_content5<br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

<div id="right_menu">right_menu</div>

</div>

</body>

</html>

참조 1 : 스크롤 페이징(Scroll Paging, Continuous scrolling pattern)
참조 2 : Load Content While Scrolling With jQuery

jquery, 구글트랜드, 자바스크립트

[구글 트랜드 jquery, prototype, dojo, mootools]

프로토타입이 상한가를 칠때 책을 통해 학습을 하고선 지금까지 프로토타입만 고집을 했습니다.
그러다 근래에 계속해서 jQuery가 여기저기서 툭툭 튀어나오더니
더 이상 미루면 안되겠다는 생각에 "어떤 놈이야?"라는 생각으로 접해보기로 했습니다.
어제부터 검색을 하면서 이런 저런 기능을 사용해봤는데 ㅡㅡ;; 이건 뭐냐는...
프로토타입보다 사용하기가 아주 편한 것 같습니다.

프로토타입을 사용할때 왠지 복잡해보여서 화면 처리 같은건 사용하지도 않았는데
jQuery에서는 단 면줄로 원하는 효과를 만들어 낼수가 있었습니다.
졸린 시간을 이용해서 10여분 동안 만들어봤는데 마법같은 매력에 빠져들게되었습니다. @..@

일단 구글 트랜드에서 검색을 해본 결과 jQuery가 확실히 대세입니다.
또한 관심을 가지고 있는 모바일 환경에서도 jQuery가 자주 언급이 되고 있구요.
특히나 우니라나처럼 쏠림현상이 심한 곳은... jQuery 꼭 해야죠.
필요할때 검색해서 찾아가며 만들어도 될 것 같지만 큰 맘 먹고 책 한권 구입했습니다.
(개발서 사지 않겠노라는 다짐은 언제나 이렇게 쉽게 무너집니다. ㅠ.ㅠ)

아래 처럼 하나 만들어보니 jQuery라는 놈이 아주 기대가 됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JQuery</title>

//<![CDATA[

$(document).ready(function(){

$("#login_btn").click(function(){

if($("#join_box").is(":visible")){

$("#join_box").slideToggle("slow");

}

$("#login_box").slideToggle("slow");

});

$("#join_btn").click(function(){

if($("#login_box").is(":visible")){

$("#login_box").slideToggle("slow");

}

$("#join_box").slideToggle("slow");

});

//]]>

</script>

#top_menu {

width:100%;

height:22px;

line-height:22px;

border-bottom:1px solid #B6BAC0;

background-color:#E1E1E1; /*#E1E1E1;*/

color:#fff;

margin-bottom:7px;

float:left;

}

#topUL{

margin:0 auto;

width:990px;

min-width:990px;

}

.to_home {

float: left;

}

.top_menu_li {

float: right;

cursor:pointer;

}

#wrap{

margin:0 auto;

width:1000px;

min-width:1000px;

}

#left_menu {

width: 200px;

background-color: #ccc;

float: left;

}

#content {

width: 580px;

margin-right:10px;

margin-left:10px;

float: left;

background-color:highlight;

}

#right_menu {

width: 200px;

background-color: #ccc;

float: left;

}

#login_box {

display: none;

height: 300px;

background-color: fuchsia;

}

#join_box {

display: none;

height: 300px;

background-color:lime;

}

</style>

</head>

<body>

</ul>

</div>

<div id="login_box">login_box</div>

main_content<br/>

main_content

</div>

<div id="right_menu">right_menu</div>

</div>

</body>

</html>

ajax, DOM 스크립트, 자바스크립트

아, 그게 이거였구나

지금 가지고 있는 책 중에서 제목에 AJAX라고 들어간 책이 3권(Ajax입문, Ajax in action, Ajax on Java) 있습니다. 그리고 프로토타입과 스크립타큘러스, 자바스크립트 이야기까지 하면 5권이군요. 오늘 광화문 교보문고엘 가서 DOM스크립트라는 책을 사왔습니다. 앞부분의 내용이 비교적 쉬워서 지금 100여페이지를 읽었는데... 뭐.. 우선은 쉽네요. 정리하는 느낌이랄까요?! 서평에서 아주 초보적이라는 글을 읽긴했지만... (자꾸 이러는 것이 책에 줄을 친걸 후회하고 있는게 아닌가라는 생각 ㅋㅋ) 앞의 책 3권을 보면서 자바스크립트에 많이 치우쳤다면 이 책은 제목처럼 DOM에 집중할 수 있어 좋네요. 사실 여지껏 DOM이 뭔지도 모르고 사용하고 있었으니... (반성중 ㅠ.ㅠ) 이 책을 자~알 읽고 프로토타입과 스크립타큘러스를 다시보면 많은 부분이 이해될 것 같습니다. 술술~~

한때, 자바쪽 관련 프레임웍이 나올때마다... 이거 알아야하는데... 저거 알아야하는데... 강박관념에 잡혀서 괴로웠던 적이 있었습니다. 근데 몇년 지나는 동안의 일들을 떠올려보면... 어떤 프레임웍이건 제대로 하나만 이해한다면...(테크니컬한 부분 말고 개념적인 부분) 나머진 개발하면서 익혀도 상관이 없었던 것 같습니다. 물론 초반부에 더디게 나가는 진도가 부담이 될수도 있겠지만요. 그리고 자체 프레임웍 사용하는 곳도 많고하니... 열심히 공부해서 익힌걸 프로젝트에서 사용하지 못할 수도 있구요.

아, 근데 자꾸만 다 알아야 할 것만 같은 부담감... 문제도 공부를 안한다는거... 또, 아... 요즘 UI에 더 관심이 간다는거 ㅠ.ㅠ

알통 2009.09.16 16:51 신고

안 봤을때 봐야할 것 같았는데 보고나니 별 것 없네요.... 아... 증말.....
근데... 적용이 힘들듯 ㅋㅋ ㅠ.ㅠ

# Delete Reply

웹프로그래밍, 인사이트, 자바스크립트, 프로토타입과 스크립타큘러스

언제부터인지 기억이 나질않지만 프로그램 관련 도서를 꼼꼼하게 읽어나가질 못하고 있습니다. 또한, 책을 보면서 직접 코딩을 해본지도 너무 오래된 것 같습니다. 하루가 다르게 집중력은 떨어지고 ㅠ.ㅠ 점점 패인모드로 진입중이네요.

[프로토타입과 스크립타큘러스]를 구입해서 떠듬떠듬 읽다가 급기야 소설책을 읽을때보다 더 성의없게 진도만 나가버렸네요. 그래도 읽지않은 것보다 낫다 생각합니다. 대충이라도 "아, 이런 기능들이 있구나."하고 감은 잡았으니까요.

몇년간 자바로 웹프로그램을 개발해왔기에 자바스크립트로도 객체지향적인 프로그램을 짜는게 별로 어려울게 없을거라며 쉽게 생각하고 접근을 했는데, 역시나 저의 예상을 깨고 막막함으로 다가오네요. 차라리 다른분들의 말씀처럼 [자바스크립트 완벽 가이드]를 먼저 보는게 좋았겠다는 생각이 들지만 그 두툼한 분량에(약 1,200페이지) ㅠ.ㅠ

소설책처럼 읽기는 했지만 일독(-,,-)을 했기에 프로토타입 홈페이지에서 최신버전인 1.6.0라이브러리를 다운받아 책의 내용을 따라 해보기로 마음을 먹었습니다. 저는 1~2년차까지는 책의 내용을 일일이 다 치며 공부를 했었던 기억이 나지만 지금은 그렇게 할수가 없네요. 해서 책의 소스코드를 받으려고 찾다보니 조금 귀찮기도하고 짜증스럽기도 하더군요. (출판사 블로그와 스프링노트가 따로 있었습니다.)

아.. 이럴수가... 자바스크립트도 어려운데 CSS는 더 어렵군요 ㅠ.ㅠ 화면의 레이아웃이야 당연한듯 테이블로 잡아왔던 제게 CSS는 너무나도 어려운 존재입니다. CSS라고해봐야 글자크기나 색을 바꿀때나 사용을 했었는데 ㅠ.ㅠ 아마 저와 비슷한 분들이 더 많지않을까...요? 얼마전까지만해도 포털사이트의 대부분이 레이아웃을 테이블로 잡은 것으로 알고있거든요. 아... 정말이지 "포기"라는 단어가 목구멍에 걸려있습니다.

떵꺼리 2008.11.07 11:32

웹 개발의 방법들이 너무 변화 무쌍해서
기존의 방식으로 개발해온 개발자들에게는 낯설고 어렵게 느껴집니다.
저도 자바스크립트로 위젯을 만들일이 있었는데
예전 방식으로는 도저히 답이 안나와 다시 자바스크립트 책을 보고 있습니다.

결국 방법은 부딪쳐 새 패러다임, 새 방법을 습득하던가
아니면 예전 방식에 머물던가...선택은
우리가 해야겠죠 ;)

# Delete Reply
- 알통 2008.11.07 22:21 신고
  
  떵꺼리님 안녕하세요.
  지속적으로 접하게된다면 JS, CSS나 어려운건 아니라 생각합니다.
  말씀대로 예전 방식에 머물러있었다는거.. 그게 문젠데요.
  익숙하지 않은 것에 익숙해지는 숙련의 시간만 견뎌낸다면...
  "그래, 결심했어!" 이거 한번 하는수밖에요 ^^
  
  # Delete

border 스타일 지정, CSS, html, td, 스타일시트, 자바스크립트, 테이블

<table cellpadding="10" cellspacing="0" border="0">
<tbody>
    <tr>
      <td class="tdbd" align="center">테이블 TD의 border 스타일 지정</td>
      <td class="tdbd" align="center">테이블 TD의 border 스타일 지정</td>
    </tr>
    <tr>
      <td class="tdbd" align="center">테이블 TD의 border 스타일 지정</td>
      <td class="tdbd" align="center">테이블 TD의 border 스타일 지정</td>
    </tr>
</tbody>
</table>

위에서처럼 스타일을 정의할 수 없을때는 TD태그에 직접 작성해야합니다.

<table cellpadding="10" cellspacing="0" border="0">
<tbody>
    <tr>
      <td style= "BORDER-RIGHT: #FFFF00 1px solid; BORDER-TOP: #CCFF00 1px solid; BORDER-LEFT: #0000FF 1px solid; BORDER-BOTTOM: #FF0000 1px solid" align="center">테이블 TD의 border 스타일 지정</td>
      <td style= "BORDER-RIGHT: #FFFF00 1px solid; BORDER-TOP: #CCFF00 1px solid; BORDER-LEFT: #0000FF 1px solid; BORDER-BOTTOM: #FF0000 1px solid" align="center">테이블 TD의 border 스타일 지정</td>
    </tr>
    <tr>
      <td style= "BORDER-RIGHT: #FFFF00 1px solid; BORDER-TOP: #CCFF00 1px solid; BORDER-LEFT: #0000FF 1px solid; BORDER-BOTTOM: #FF0000 1px solid" align="center">테이블 TD의 border 스타일 지정</td>
      <td style= "BORDER-RIGHT: #FFFF00 1px solid; BORDER-TOP: #CCFF00 1px solid; BORDER-LEFT: #0000FF 1px solid; BORDER-BOTTOM: #FF0000 1px solid" align="center">테이블 TD의 border 스타일 지정</td>
    </tr>
</tbody>
</table>

요즘 서버단 프로그램보다 화면단 프로그램에 더 관심이 가네요. 코어자바를 다시 한번 훑어보고 GWT를 공부하고 싶은데 그게 참 생각처럼 되질 않네요. HTML, CSS, JAVASCRIPT를 찐하게 공부한번 해보고 싶어요!!!

다우미짱 2008.09.30 16:11

후~저도 좀전에 스킨 함 바꿔 보려고 한참을 들여다 보고 왔는데 도통 모르겠어요..
암..머리야..강좌는 구해 드릴수 있는데...^^

# Delete Reply
- 알통 2008.09.30 22:26 신고
  
  저 오늘 퇴사했어요 ^^
  이번주는 그냥 놀 생각이랍니다. 가족과 함께.
  아내가 괜찮다면 여행 좀 다니면 좋겠는데 ^^ 제 욕심이죠?
  강좌요? ㅎㅎㅎ 감사합니다 ^^
  
  # Delete
- 다우미짱 2008.10.01 20:23
  
  정말 퇴사 하신거에요?
  가종들과 뒹구르르~행복 하시겠어요. 여행 못지 않은 행복이겠죠?
  
  # Delete
- 알통 2008.10.01 22:49 신고
  
  지난달 재희가 태어나면서 회사 땡땡이 칠땐 몰랐었는데요,
  백수가되어보니 하루만에 지겹네요 ㅡㅡ;;
  일자리를 바로 알아봐야겠다는...
  근데, 아내가 좋아하네요 ^^ 뭔가를 하는건아니지만 옆에있으니 좋데요 ^..^
  
  # Delete

알통

자바스크립트

errors running builder 'javascript validator' on project

Jquery로 엔터키 입력시 탭처리

스크롤 페이징(Scroll Paging, Continuous scrolling pattern)

jQuery 맛보기

DOM 스크립트

[웹] 프로토타입

[웹] 테이블 TD의 border 스타일 지정

티스토리툴바