읽을 거리 판

즐겨찾기
최근
전체
최근 방문 게시판
과학

[웹] 웹으로 확률게임을 만들어보자!

자바스크립트 2016.08.12
https://www.dogdrip.net/104896470

웹게임을 만들어보자는 글이 올라온걸보고


확률게임을 만들어보자 입니다.


일단 폴더를 만들어주시고


jquery를 사용할거에요!


Game  // Game이라는 루트 폴더

└ common

    └ js

        └ common.js

└index.html


뒤에 확장자가 붙어있지 않은 목록은 폴더입니다.


폴더를 다만들었으면


index.html 안에


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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Game</title>
<style>
* {margin: 0;padding: 0;font-family: "Dotum";font-size:12px;}
html, body, #wrap {width: 100%;height: 100%;position: relative;background: #efefef;color:#333;}
button {border:none;box-shadow: 0 2px 5px 1px rgba(0,0,0,.1);border-radius:2px;cursor: pointer;box-sizing: border-box;}
 
#enchant {width:300px;height:254px;background: #fff;left:0;top:0;bottom:0;right:0;position: absolute;margin:auto;box-shadow: 0 2px 5px 1px rgba(0,0,0,.1);border-radius:2px;}
    #enchant .category {line-height: 30px;width:100%;text-indent:15px;border-bottom: solid #ddd 1px;box-sizing: border-box;}
    #enchant .action {padding:10px;border-bottom: solid #ddd 1px;}
 
    #enchant .sell-btn {width: 100%;padding:10px;background: #2ecc71;color:#fff;}
    #enchant .enchant-btn {width: 100%;padding:10px;background: #e74c3c;color:#fff;margin-bottom: 10px;}
 
    #enchant .bool {display:none}
    #enchant .success {color:#2ecc71;}
    #enchant .failure {color:#e743c3;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./common/js/common.js"></script>
</head>
<body>
 
<div id="wrap">
    <div id="enchant">
        <div class="weapon category">
            Lv.<span class="level"></span> [ <span class="name"></span> ]
            <span class="bool success">성공</span>
            <span class="bool failure">실패</span>
        </div>
        <div class="price category">
            판매 가격 (<span class="value"></span>원)
        </div>
        <div class="cost category">
            강화 가격 (<span class="value"></span>원)
        </div>
        <div class="money category">
            소지금 (<span class="value"></span>원)
        </div>
        <div class="chance category">
            강화 확률 (<span class="value"></span>%)
        </div>
        <div class="action">
            <button class="enchant-btn">강화하기</button>
            <button class="sell-btn">판매하기</button>
        </div>
    </div>
</div>
 
</body>
</html>


라고 적는다 style태그 안에 있는건 css인데 이건 html을 디자인 할때 사용한다.


따로 강의를 올릴터이니 javascript만 보자


자이걸 브라우저로 열어서 보면


game_noscript.png


이렇게 보인다.


단순한 텍스트 게임이다 (옛날느낌을 살리기위해 돋움글꼴을 사용)


자 이제 우리가 여기서 만들어야 하는 함수를 생각해보자!


변수들을 보여줄 즉


강화 가격 (X원) 이런식으로 보여줄 rendering 함수가 있어야하고



강화 하기 함수 enchant 함수라 하자


그리고 판매 하기 sell 이라고 하자



그리고 강화 확률을 인자로 받고 그의 맞은 확률로 성공과 실패를 반환할 chance 라는 함수도 있어야한다


또 숫자에 콤마를 찍어줄 comma 함수도 있어야한다.


이정도면 함수나누는건 다 되었다고 보고




이번엔 변수를 만들어보자


일단 변수를 만들때 JSON 데이터 형태로 만들것이다.


JSON

JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAJ)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.


대충 이정도로 알고


common.js 파일에 이변수를 추가해주자


1
2
3
4
var user = {
    weapon: 0,
    money: 10000
};


자 user란 변수는 weapon이라는 변수를 속성으로 가지고있고 0라는 값이 할당됬다. money도 마찬가지다.


쉽게 말해


사용자는

무기를 0 가지고있고

돈을 10000 가지고있다.


자 javascript에서 접근하는 방법은 다음과같다.


1
2
3
4
5
6
7
var user = {
    weapon: 0,
    money: 10000
};
   
console.log(user.weapon);
console.log(user.money);


user.weapon 이런식으로 접근한다. 즉


user 안의 weapon 이라는 변수


자그러면 user 변수 설정은 끝났다.


다음은 weaponList 라는 변수를 만들어보자


말그대로 무기 리스트 이다.


사용 용도는 레벨별 [무기 이름]과 [판매 가격]과 [강화 비용]과 [강화 확률] 네가지를 속성으로 가지고있어야하며 


[무기]는 여러개 즉 레벨별로 나뉘므로 배열이여야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var weaponList = [
    { name: "개드리퍼의 단검", price: 0, cost: 100, chance: 100 },
    { name: "개드리퍼의 장검", price: 50, cost: 200, chance: 98 },
    { name: "개드리퍼의 군용단검", price: 100, cost: 300, chance: 95 },
    { name: "개드리퍼의 군용장검", price: 300, cost: 400, chance: 90 },
    { name: "개드리퍼의 키보드", price: 1000, cost: 500, chance: 80 },
    { name: "개드리퍼의 마우스", price: 2500, cost: 1000, chance: 70 },
    { name: "개드리퍼의 직박구리", price: 5000, cost: 2000, chance: 50 },
    { name: "개드리퍼의 휴대폰", price: 10000, cost: 10000, chance: 30 },
    { name: "개드리퍼의 통장", price: 25000, cost: 15000, chance: 20 },
    { name: "개드리퍼의 집", price: 100000, cost: 50000, chance: 10 },
    { name: "개드리퍼의 미래", price: 1000000, cost: 0, chance: 0 },
];


추가하면 이렇게 11개의 무기 리스트가 만들어졌다.


weaponList는 배열이며


모든 배열의 요소는 JSON데이터 형태를 취하고있고


각 배열의 요소는 [name], [price], [cost], [chance] 라는 속성을 가지고있다.


이변수는 위에서본 user와는 다르다


접근방법은


weaponList[0].name 이런식으로


weaponList 의 0번째 name을 접근한다 이말이다.


지금까지 따라왔으면 완성된코드는


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var weaponList = [
    { name: "개드리퍼의 단검", price: 0, cost: 100, chance: 100 },
    { name: "개드리퍼의 장검", price: 50, cost: 200, chance: 98 },
    { name: "개드리퍼의 군용단검", price: 100, cost: 300, chance: 95 },
    { name: "개드리퍼의 군용장검", price: 300, cost: 400, chance: 90 },
    { name: "개드리퍼의 키보드", price: 1000, cost: 500, chance: 80 },
    { name: "개드리퍼의 마우스", price: 2500, cost: 1000, chance: 70 },
    { name: "개드리퍼의 직박구리", price: 5000, cost: 2000, chance: 50 },
    { name: "개드리퍼의 휴대폰", price: 10000, cost: 10000, chance: 30 },
    { name: "개드리퍼의 통장", price: 25000, cost: 15000, chance: 20 },
    { name: "개드리퍼의 집", price: 100000, cost: 50000, chance: 10 },
    { name: "개드리퍼의 미래", price: 1000000, cost: 0, chance: 0 },
];
   
var user = {
    weapon: 0,
    money: 10000
};


이렇게 될것이다.


이제 첫번째 함수를 만들어보자 일단 rendering 함수 먼저!


1
2
3
4
5
6
7
8
function rendering() {
    $(".cost .value").text(weaponList[user.weapon].cost);
    $(".money .value").text(user.money);
    $(".price .value").text(weaponList[user.weapon].price);
    $(".chance .value").text(weaponList[user.weapon].chance);
    $(".weapon .name").text(weaponList[user.weapon].name);
    $(".weapon .level").text(user.weapon + 1);
}


자 이게 무슨소리인지는 당연히 모를것이다.


일단 Jquery의 함수부터 설명해주겠다.


$(".cost .value").text(); 이부분 은


.cost 라는 클래스를 가진태그 안의 .value


라는 뜻이다. 즉 .cost 안의 .value를 선택한다 이다음에 점으로 이어지는 .text() 라는 함수가 .cost 안의 .value 태그 안의 내용을 수정한다라는 뜻이다.


다시말해


<div class="cost category">
    강화 가격 (<span class="value"></span>원)
</div>


cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용을 $(".cost .value").text( X ); X로 변경한다 가 되겠다.


그래서 rendering 함수의 첫번째 줄


$(".cost .value").text( weaponList[user.weapon].cost ); 는


cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용을


weaponList[ user.weapon ].cost 로 변경한다가 되겠다.


weaponList[ user.weapon ].cost 는


잘 분해해보면


user.weapon의 값을 0 이라고 선언했으니


weaponList[ 0 ].cost 로 접근하게된다.


cost 라는 클래스를 가진 태그안의 value라는 클래스안의 내용은 결국 100이 된다.


자그럼 rendering 함수를 추가하고


맨위에 


1
2
3
$(function() {
    rendering();
});


라는 코드를 넣자


$(function() {
// 여기 안의 내용은 웹페이지 즉 index.html 다 로딩완료후 호출되는 함수이다.

        // 이걸 안쓰고 그냥 rendering 만 호출하면 html 요소들이 완전히 생겨나기전 실행된다.

        // 결국 .cost 라는 클래스를가진 태그가 생겨나기전에 $(".cost .value").text( weaponList[user.weapon].cost ); 를 실행하면

        // 내용이 추가되지 않는다.

});


자그럼 이제 


game_script_0.png


이렇게 보일것이다.


소지금 부분의 숫자가 알아보기 힘들다 comma 함수를 추가하고 rendering 함수를 수정하자


1
2
3
4
5
6
7
8
9
10
11
12
function rendering() {
    $(".cost .value").text(comma(weaponList[user.weapon].cost));
    $(".money .value").text(comma(user.money));
    $(".price .value").text(comma(weaponList[user.weapon].price));
    $(".chance .value").text(weaponList[user.weapon].chance);
    $(".weapon .name").text(weaponList[user.weapon].name);
    $(".weapon .level").text(user.weapon + 1);
}
   
function comma(s) {
    return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}


comma 함수가 만들어지고 rendering 함수의 첫번째, 두번째, 세번째 줄이 comma(  ) 로 감싸였다.


comma 함수는 s라는 인자를 받아 String(문자열)으로 변환후 정규식을 이용해 치환하는것인데 정규식을 설명하면 끝도 없을것같다


자 이제 실행해보면


game_script_1.png


이렇게 좀 그럴듯하게 나온다.


자 이제 확률을 인자로 받아 그 확률대로 참과 거짓을 반환하는 chance 함수를 만들어보자

1
2
3
4
5
6
function chance(percent) {
    if (Math.floor(Math.random() * 100) + 1 <= percent)
        return true;
    else
        return false;
}

자 첫번째줄 에서 function chance( percent ) 부분


percent 라는 인자를 받고


두번째 줄 if () 안은


Math.floor( Math.random() * 100 ) + 1 <= percent


Math.floor( Math.random() * 100 ) + 1 값보다 percent 가 크거나 같을때 참이된다.


Math.floor( Math.random() * 100 ) + 1 는 Math.floor 라는 함수로 쌓여있고 그안은 Math.random() * 100 + 1 이라는 수식이 있다.


자 Math.random() 이라는 함수는 0 ~ 1의 난수를 발생시킨다. 하지만 소수점 단위이다.


즉 0.6460182257238509 이런식으로 반환 한다


여기서 100을 곱한다


Math.random() * 100


이 식은 0 ~ 99 까지 소수점을 포함해서 나온다



Math.random() * 100 + 1


이 식은 1 ~ 100.xxxxxxxxx 까지 소수점을 포함해서 나온다


100을 초과하기때문에


Math.floor 를 이용해 소수점을 버림해준다.


결과적으로 


Math.floor( Math.random() * 100 + 1)


이 식은 1 ~ 100 까지 정수만 나온다


가 되겠다.


그래서


Math.floor( Math.random() * 100 ) + 1 값보다 percent 가 크거나 같을때 참이된다 라는건


1 ~ 100의 수보다 percent 가 크거나 같을때 즉


1 ~ 100의 수보다 chance를 호출할때 들어온 인자값 이 크거나 같을때


참이된다.


참일경우 true 거짓일경우 false를 반환한다.


그다음 함수인 enchant 강화하기 함수를 만들어보자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
function enchant() {
    if (user.money >= weaponList[user.weapon].cost) {
        user.money -= weaponList[user.weapon].cost
        if (chance(weaponList[user.weapon].chance)) {
            user.weapon++;
        } else {
            user.weapon = 0;
        }
  
        rendering();
    } else {
        alert("돈이 부족합니다.");
    }
}


두번째 줄의 if 는


user.money 가 weaponList[ user.weapon ].cost 보다 크거나 같을때 참이된다.


다시말해


사용자의 돈이


무기리스트의 [ 나의 무기 레벨 ] 의 강화 비용 보다 크거나 같아야 참이된다.


그럼 처음 강화하기를 눌렀을때


user.weapon = 0 이기 때문에


weaponList[ 0 ].cost = 100 이다


그리고 user.money = 10000 이기때문에 조건은 참이된다.


즉 if 안이 실행된다.


if 안의 첫번째,


전체의 두번째줄은


user.money -= weaponList[user.weapon].cost


는 말그대로


사용자의 돈 - 무기리스트의 [ 나의 무기 레벨 ] 의 강화 비용


즉 10000 - 100 = 9900 이된다.


네번째 줄인 if ( chance( weaponList[user.weapon].chance ) ) 는


chance 함수에 weaponList[ user.weapon ].chance 라는 변수를 인자로 넣는다.


user.weapon = 0 이다.


즉 weaponList[ 0 ].chance = 100 이다


결과적으로 chance(100) 이렇게 실행한다 생각하면된다.


100% 확률로 강화될 확률을 100% 이다.


다시말해 무조건 성공한다.


강화에 성공, if ( chance( weaponList[user.weapon].chance ) ) 가 참이 될경우 


user.weapon++;


사용자의 무기 레벨을 증가시킨다 가 되겠다.


즉 지금까지 대입하던


weaponList[ user.weapon ].cost

weaponList[ user.weapon ].name

weaponList[ user.weapon ].chance


들이 의 값이 모두 바뀌게 된다.


쉽게말해 변수가 바뀌는것이고, 참조하던 배열번호가 바뀌는것이다, 우리는 참조하는 배열 번호를 강화 레벨이라고 칭하고있으며


강화에 성공하면 다음 레벨로 하나씩 올라가는 개념이다.


weaponList[ 1 ].cost = 200 이 되고

weaponList[ 1 ].name = "개드리퍼의 장검" 이 된다.

weaponList[ 1 ].chance = 98 이된다.


다시 코드를보자 네번째 줄의 if가 만약 거짓이 나왔다면 else 블럭인


7번째 줄로 이동하게된다.


user.weapon = 0;


사용자 무기 레벨 = 0 으로 대입한다.


쉽게말해 실패하면 강화 레벨이 0으로 바뀐다는거다.


그리고


10번째 줄을보자 rendering();


을 호출했다 변수를 바꿨으니 다시 화면에 뿌려줘야한다.


그렇기에 모든 계산이 끝난후 rendering 함수를 호출한다.


자 지금까지 했으면 강화하기는 된다.








? 안된다고


안되는게 맞다 강화하기 버튼을 클릭했을때 이벤트를 넣지않았다.

1
2
3
4
5
6
7
$(function() {
    rendering();
 
    $(".enchant-btn").on("click", function() {
        enchant();
    });
});

자 4번째 줄이 무슨뜻이냐 하면


$(".enchant-btn") 위에서 설명한것과 같이 .enchant-btn라는 클래스가진 태그를 가져오고


.on("click", function() {


});

를 뒤에다 써줬다.


설명하자면 enchant-btn 라는 클래스가진 태그를 클릭하면


.on("click", function() {

     // 이 안이 실행된다 이거다.
});


그래서 enchant-btn 라는 클래스가진 태그를 클릭하면


enchant 라는 함수가 실행된다.


지금까지 잘따라했다면


코드는


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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
$(function() {
    rendering();
      
    $(".enchant-btn").on("click", function() {
        enchant();
    });
});
  
var weaponList = [
    { name: "개드리퍼의 단검", price: 0, cost: 100, chance: 100 },
    { name: "개드리퍼의 장검", price: 50, cost: 200, chance: 98 },
    { name: "개드리퍼의 군용단검", price: 100, cost: 300, chance: 95 },
    { name: "개드리퍼의 군용장검", price: 300, cost: 400, chance: 90 },
    { name: "개드리퍼의 키보드", price: 1000, cost: 500, chance: 80 },
    { name: "개드리퍼의 마우스", price: 2500, cost: 1000, chance: 70 },
    { name: "개드리퍼의 직박구리", price: 5000, cost: 2000, chance: 50 },
    { name: "개드리퍼의 휴대폰", price: 10000, cost: 10000, chance: 30 },
    { name: "개드리퍼의 통장", price: 25000, cost: 15000, chance: 20 },
    { name: "개드리퍼의 집", price: 100000, cost: 50000, chance: 10 },
    { name: "개드리퍼의 미래", price: 1000000, cost: 0, chance: 0 },
];
  
var user = {
    weapon: 0,
    money: 10000
};
  
function rendering() {
    $(".cost .value").text(comma(weaponList[user.weapon].cost));
    $(".money .value").text(comma(user.money));
    $(".price .value").text(comma(weaponList[user.weapon].price));
    $(".chance .value").text(weaponList[user.weapon].chance);
    $(".weapon .name").text(weaponList[user.weapon].name);
    $(".weapon .level").text(user.weapon + 1);
}
  
function comma(s) {
    return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
  
function enchant() {
    if (user.money >= weaponList[user.weapon].cost) {
        user.money -= weaponList[user.weapon].cost
        if (chance(weaponList[user.weapon].chance)) {
            user.weapon++;
        } else {
            user.weapon = 0;
        }
  
        rendering();
    } else {
        alert("돈이 부족합니다.");
    }
}
  
function chance(percent) {
    if (Math.floor(Math.random() * 100) + 1 <= percent)
        return true;
    else
        return false;
}


만약 안된다면 복사해서 사용해라


자 이제 판매만 남았다.


1
2
3
4
5
function sell() {
    user.money += weaponList[user.weapon].price;
    user.weapon = 0;
    rendering();
}


자 sell 함수 이다


두번째 줄을보자


user.money += weaponList[ user.weapon ].price;


이제 감이 오나?


사용자의 돈 + 무기 리스트의 [ 사용자의 무기 레벨 ] 번째 배열의 가격


user.weapon 이 만약 0 이라면;

user.money += weaponList[ 0 ].price;

user.money += 0;


user.weapon 이 만약 1 이라면;

user.money += weaponList[ 1 ].price;

user.money += 50;


이 된다.


그 다음줄인


user.weapon = 0;


당연히 무기를 팔았으니 강화 레벨은 0가 되어야한다.


그리고 마지막줄엔


rendering();


당연하다 변수를 변경하면 화면에 바뀐 변수를 보여주어야한다.


그리고 마지막으로


1
2
3
4
5
6
7
8
9
10
11
$(function() {
    rendering();
     
    $(".sell-btn").on("click", function() {
        sell();
    });
 
    $(".enchant-btn").on("click", function() {
        enchant();
    });
});


판매 버튼의 이벤트이다 위에서 설명했으니 생략한다.


이로써 확률게임이 완성되었다.



; ==================================


안되는 개드리퍼를 위해 코드를 올려줄게요


common.js


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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$(function() {
    rendering();
     
    $(".sell-btn").on("click", function() {
        sell();
    });
 
    $(".enchant-btn").on("click", function() {
        enchant();
    });
});
 
var weaponList = [
    { name: "개드리퍼의 단검", price: 0, cost: 100, chance: 100 },
    { name: "개드리퍼의 장검", price: 50, cost: 200, chance: 98 },
    { name: "개드리퍼의 군용단검", price: 100, cost: 300, chance: 95 },
    { name: "개드리퍼의 군용장검", price: 300, cost: 400, chance: 90 },
    { name: "개드리퍼의 키보드", price: 1000, cost: 500, chance: 80 },
    { name: "개드리퍼의 마우스", price: 2500, cost: 1000, chance: 70 },
    { name: "개드리퍼의 직박구리", price: 5000, cost: 2000, chance: 50 },
    { name: "개드리퍼의 휴대폰", price: 10000, cost: 10000, chance: 30 },
    { name: "개드리퍼의 통장", price: 25000, cost: 15000, chance: 20 },
    { name: "개드리퍼의 집", price: 100000, cost: 50000, chance: 10 },
    { name: "개드리퍼의 미래", price: 1000000, cost: 0, chance: 0 },
];
 
var user = {
    weapon: 0,
    money: 10000
};
 
function rendering() {
    $(".cost .value").text(comma(weaponList[user.weapon].cost));
    $(".money .value").text(comma(user.money));
    $(".price .value").text(comma(weaponList[user.weapon].price));
    $(".chance .value").text(weaponList[user.weapon].chance);
    $(".weapon .name").text(weaponList[user.weapon].name);
    $(".weapon .level").text(user.weapon + 1);
}
 
function comma(s) {
    return String(s).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
 
function enchant() {
    if (user.money >= weaponList[user.weapon].cost) {
        user.money -= weaponList[user.weapon].cost
        if (chance(weaponList[user.weapon].chance)) {
            user.weapon++;
        } else {
            user.weapon = 0;
        }
 
        rendering();
    } else {
        alert("돈이 부족합니다.");
    }
}
 
function sell() {
    user.money += weaponList[user.weapon].price;
    user.weapon = 0;
    rendering();
}
 
function chance(percent) {
    if (Math.floor(Math.random() * 100) + 1 <= percent)
        return true;
    else
        return false;
}


자 확률게임 만들기 강좌가 끝이났다.


예제 링크는


http://whks3498.cafe24.com/game/

22개의 댓글

VIPS
2016.08.12
존나 수고했다.
참고로 모듈화도 좀했으면 편했으리라 본다.

main()
{
-setting();
-while(true)
-{
--mainengine();
--randeringmaker();
-}
}
알지?
물론 메인엔진이나 렌더링은 테스크메니져를 쓰면 좋다.

이거설명도 좀 싸주면 좋을듯
0
자바스크립트
2016.08.12
@VIPS
모듈화는 설명하기 어려울거같아서..

Javascript는 랜더링 while로 돌리면 멈추지않아?

window.requestAnimationFrame 쓰는데 나는.
0
VIPS
2016.08.12
@자바스크립트
사실 C충이라 그기능은 잘 몰라. 근데 대충 테스크메니져 기능 만들어 넣어서 제어하더라. 그게 엔진인지 그 프로그렘에서 직접 만든건진 모르겠지만.
어쩄든 while문은 썼어. 빠져나오는건 예외처리로 해두고
0
nerid
2016.08.13
@VIPS
안드로이드 자바도 윈도우 C# .NET도 이벤트콜백으로 하지 while로 하지 않는다.
0
못난놈
2016.08.12
나도 해보고싶었는데
다음에 해보도록 하자
0
나는 미남이다
2016.08.12
모듈 부터 만들고 메인과 연결 시키는걸 자유롭게 했을 때 그게 프로그래밍의 시작이지. 정리하는 습관 안들이면 결국 나중에 고생함.
0
자바스크립트
2016.08.12
@나는 미남이다
그렇게 안짠건데;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
0
나는 미남이다
2016.08.12
모듈 부터 만들고 메인과 연결 시키는걸 자유롭게 했을 때 그게 프로그래밍의 시작이지. 정리하는 습관 안들이면 결국 나중에 고생함.
0
팡파팡팡
2016.08.12
enchant가 뭐냐 CSS임?
0
자바스크립트
2016.08.12
@팡파팡팡
함수명
0
팡파팡팡
2016.08.12
@자바스크립트
ㄱㄴㄲ 무슨 함순데
0
타이사
2016.08.12
@팡파팡팡
function이라 써진 애들 중에 잘보믄 enchant있지?
걔 호출하는것
0
타이사
2016.08.12
재밌게 하고 있넴
나는 오늘 jquery랑 ajax로 국가 및 종목 체급별 메달집계 만드렀땅 ㅎㅎ
0
네버뎃
2016.08.12
돋움 글꼴 ㅗㅜㅑ 왜이렇게 보기 좋지?
0
난틀렸어먼저가
2016.08.16
@
[삭제 되었습니다]
0
nerid
2016.08.18
@
[삭제 되었습니다]
0
시삼십칠분
2016.08.16
웹쪽으로 궁금한게있는데 웹 배울려면

Jquery, html5/CSS, 자바스크립트 스프링 이게다 뭐냐

다 연관되있는거임? jsp는 조금 배워봄 톰캣이랑
0
자바스크립트
2016.08.16
@시삼십칠분
일단.

Jquery는 Javascript로 만들어진 라이브러리이고

HTML5는 웹의 뼈대를 구성하는거야

CSS는 그 웹의 뼈대를 꾸며주는것이고

Spring은 JSP의 프레임워크야

모두 연관있지만

Jquery - Javascript - HTML5 - CSS :: 클라이언트 사이드
JSP -Spring :: 서버 사이드

이정도?
0
시삼십칠분
2016.08.17
@자바스크립트
그럼 웹만들때 뭘 배워야함??

db랑 분석어쩌고저쩌고 한다고 R이나 파이썬사용해서 하는거같기도한더 맞는건가..
0
자바스크립트
2016.08.17
@시삼십칠분
웹의 범위는 넓고도 넓어서

클라이언트 웹을 배우려면 Javascript, Jquery, HTML5, CSS3

서버 웹을 배우려면 PHP, JSP, ASP 등

웹을 만드려면 서버와 웹을 배워야하지

간단하게 배우려면 PHP 추천할게
0
시삼십칠분
2016.08.17
@자바스크립트
음.. 이해가안가는게 서버측에서 ㅎ모페이지 제공해주면 다 되는거 아닌가? 서버사이드와 클라이언트사이드에서 하는 일이 뭐야??

뭐가 달라서 사이드를 나누는건지 머르겠다..

클라이언트 웹이 네트워크상의 쿠키같은건가?
0
시삼십칠분
2016.08.17
@자바스크립트
머신러닝이나 빅데이터를 활용할때 서버를 주로 만들어서 활용한다고 들어서 그런데 그럼 어떤걸 배우는게 좋앙아?
0
무분별한 사용은 차단될 수 있습니다.

읽을 거리 판

인기글
번호 제목 글쓴이 추천 수 날짜
563 [과학] 경계선 지능이 700만 있다는 기사들에 대해 36 LinkedList 9 3 일 전
562 [과학] 번역)새들은 왜 알을 많이 낳는가? - 후투티의 형제살해 습성... 7 리보솜 3 26 일 전
561 [과학] 학계와 AI, 그리고 Bitter Lesson (쓰라린 교훈) 26 elomn 35 2024.02.17
560 [과학] 지구의 속삭임, 골든 레코드의 우주 9 Archaea 10 2024.02.16
559 [과학] 잔혹한 과학실험 이야기 <1> 절망의 구덩이 19 개드립하면안됨 37 2024.02.15
558 [과학] 스트레스를 받으면 술이 땡기는 이유 12 동식 16 2024.02.10
557 [과학] 지능은 모계유전이 아니다. 40 울릉특별자치도 35 2024.01.26
556 [과학] 진화를 생각할 때 고려할 것들 23 날씨가나쁘잖아 12 2024.01.17
555 [과학] 학문적(과학적) 접근과 유사 진화심리"학" 26 날씨가나쁘잖아 19 2024.01.15
554 [과학] 호모 사피엔스의 야릇한 은폐된 배란에 대한 남녀 학자의 다... 14 개드립하면안됨 15 2023.12.29
553 [과학] 김영하의 작별인사를 읽고 느낀 점 (스포있음) 21 장문주의 2 2023.11.28
552 [과학] 제4회 포스텍 SF 어워드 공모전 ( SF 단편소설 / SF 미니픽션 ) 2 따스땅 1 2023.11.25
551 [과학] 펌) CRISPR 유전자 가위 치료제 "최초" 승인 12 리보솜 7 2023.11.25
550 [과학] 러시아는 기술산업을 어떻게 파괴시켰는가(펌) 9 세기노비는역사비... 15 2023.11.18
549 [과학] 고양이에 의한 섬생태계 교란과 생물 종의 절멸 (펌) 2 힘들힘들고 6 2023.11.16
548 [과학] 번역) 알츠하이머병 유전자는 어떻게 살아남았는가? 12 리보솜 10 2023.11.15
547 [과학] 『우영우』의 자폐 스펙트럼 장애 개념이 왜곡인 이유 (펌) 47 힘들힘들고 10 2023.11.12
546 [과학] 흑수저 문과충 출신 구글 취직하는 파이썬 특강 -1 14 지방흡입기 11 2023.09.27
545 [과학] 국가별 당뇨 유병율 이거 뭐가 바뀐건지 아는사람? 8 LAMBDA 1 2023.09.27
544 [과학] 물샤워 ㅇㅈㄹ 하는 놈들 봐라 171 철동이 48 2023.09.23
인기글

읽을 거리 판 인기글

Copyright (c) DogDrip.net All rights reserved.
Contact us, dogdripper at gmail dot com