shimaz 마이피

[다른생각] 스크립트를 고쳐 봤는데.. 역시나 $.getJSON이 걸림돌이네요.. 2012.12.03 PM 04:19

웹은 프로그래밍은 잘 할줄도 모르는데 하느라 고생중입니다..

아무튼

아까는 직접 <바디> 안에 <스크립트>를 넣었었는데요..

<헤드>에

var list= new Array()
list[list.length]='http://www.blankcoffee.com/images/0.png';
list[list.length]='http://www.blankcoffee.com/images/1.png';
list[list.length]='http://www.blankcoffee.com/images/2.png';
list[list.length]='http://www.blankcoffee.com/images/3.png';
list[list.length]='http://www.blankcoffee.com/images/4.png';
list[list.length]='http://www.blankcoffee.com/images/5.png';
list[list.length]='http://www.blankcoffee.com/images/6.png';
list[list.length]='http://www.blankcoffee.com/images/7.png';
list[list.length]='http://www.blankcoffee.com/images/8.png';
list[list.length]='http://www.blankcoffee.com/images/9.png';

var likeCount = null;
var count = null;
var spr = null;
var number = null;

$.getJSON("http://graph.facebook.com/blankCoffee", function(json){
likeCount = parseInt(json.likes, 10);

});

count = 5000 - (likeCount * 10);
number = count + "";
spr = number.split("");

function showimgA(){
doc-ument.write(" number

");
}
function showimgB(){
doc-ument.write(" number

");
}
function showimgC(){
doc-ument.write(" number

");
}
function showimgD(){
doc-ument.write(" number

");
}

를 넣어놓고

<바디> 에서
필요한 부분에 showimgA(); showimgB();.... 를 호출하는 식으로 변경해봤습니다.

alert("")을 써서 확인해보니

getJSON 안에서는 likeCount 값이 정상적으로 들어있는데
존슨 밖에서는 likeCount가 그대로 null인 상태입니다.

으어

댓글 : 11 개

당신미쳤어
2012/12/03 PM 04:33

<!htm>
<xhea>
<s-cript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></s!crip>
<s-cript language="java-s!crip">
var list= new Array();
list[list.length]='http://www.blankcoffee.com/images/0.png';
list[list.length]='http://www.blankcoffee.com/images/1.png';
list[list.length]='http://www.blankcoffee.com/images/2.png';
list[list.length]='http://www.blankcoffee.com/images/3.png';
list[list.length]='http://www.blankcoffee.com/images/4.png';
list[list.length]='http://www.blankcoffee.com/images/5.png';
list[list.length]='http://www.blankcoffee.com/images/6.png';
list[list.length]='http://www.blankcoffee.com/images/7.png';
list[list.length]='http://www.blankcoffee.com/images/8.png';
list[list.length]='http://www.blankcoffee.com/images/9.png';

$(function(){
$.getJSON("http://graph.facebook.com/blankCoffee", function(json){
var likeCount = null;
var count = null;
var spr = null;
var number = null;
likeCount = parseInt(json.likes, 10);
alert("hahah " + likeCount);
count = 5000 - (likeCount * 10);
number = count + "";
spr = number.split("");
for ( var i=0; i<spr.length; i++ ) {
$("#like_count").append("<img src='"+list[spr[i]]+"' alt='number' border='0' class='iePngFix' styte-='margin:58px 5px 0px 5px' />");
}
});
});
</s!crip>
</head>
<!bod>
<div id="like_count"></div>
</body>
</html>

이런형태는 어떤가요?

체계철
2012/12/03 PM 04:33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!htm xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<xhea>
<-meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!titl></title>
<s-cript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></s!crip>
</head>

<!bod bgcolor="black">
<s-cript type="text/java-s!crip">
$(document).ready(function(){
var list = new Array();
for(var i=0;i<10;i++){
list[i]='http://www.blankcoffee.com/images/'+i+'.png';
}
$.getJSON("http://graph.facebook.com/blankCoffee", function(data){
likeCount = parseInt(data.likes);
count = 5000 - (likeCount * 10);
number = count + "";
spr = number.split("");
$.each(spr,function(val){
alert(list[val]);
$("body").append("<img src='"+list[val]+"' alt='number' border='1' class='iePngFix' styte-='margin:58px 5px 0px 5px'
/>");

});
});
});
</s!crip>
</body>
</html>

저는 이렇게 해봤는데요....likeCount를 밖으로 빼야하는 이유가 있나요?

당신미쳤어
2012/12/03 PM 04:34

getJSON이 비동기이기때문에 functions(json){}안에서 원하는 위치에 출력하는것까지 처리해버리는겁니다.

당신미쳤어
2012/12/03 PM 04:38

... 글자이미지가 흰색이엇군요.. 왜 안보이나했네;;ㅋㅋ

shimaz
2012/12/03 PM 04:46

당신미쳤어 //
아.. 그러면 펑션(json){} 안에서 페이지를 구성하는 모든 html을 doc-ument.write에 써 넣어도 되긴 되겠군요..

체계철
2012/12/03 PM 04:49

doc-ument.write보다는 jquery의 selector를 이용하여 after나 prepend, append 등을 이요하시는것이....

shimaz
2012/12/03 PM 04:56

체계철 // 으음. 찾아봐야겠습니다. 도큐먼트-라이트는 아무래도 좀 피곤하네요.

그나저나 루리웹은 스크립트 관련 단어들은 거의 다 막아놨네요 ㅎㅎ

shimaz
2012/12/03 PM 05:06

체계철 // 일단 얼추 해결이 되었습니다. 감사합니다.
당신이미쳤어 // 뭔가 되어가고 있습니다. 감사합니다.

.append 를 특정 위치에 붙이는걸 찾아봐야겠네요.. ㅎㅎ

body 어팬드 하면 젤 뒤에 붙으니.;

당신미쳤어
2012/12/03 PM 05:09

제가 적어드린 예제에 보시면 숫자가 들어갈 <div id="like_count"></div>를 <바디>안에 넣어놓고, $("#like_count").append("........."); 로 그 안에 붙여넣었습니다.

체계철
2012/12/03 PM 05:20

append는 셀렉트된 태그의 안쪽 가장 마지막에 붙습니다.
셀텍트된 태그의 뒤에 붙는건 after구요.
비슷한 맥락으로 prepend와 before가 있습니다.

새하얀거짓말
2012/12/03 PM 05:30

ㅅㅂ 뭐라는건지 하나도 모르겠네

user error : Error. B.