$: 이게 무엇인가?

Svelte에서 $:는 반응성 선언(reactive declarations)을 나타냅니다.

반응성 선언을 사용하면 변수나 표현식이 변경될 때마다 자동으로 업데이트되는 코드를 작성할 수 있습니다.

예를들어

$: ({ postArr } = data); 는 data 객체의 변경을 감지하여 자동으로

postArr 변수를 업데이트하도록 지시하는 코드입니다.

이 구문의 각 부분의 의미는 다음과 같습니다.

$: - 반응성 선언을 시작합니다.
({ postArr } = data) - 객체 구조 분해 할당(object destructuring assignment)를 사용하여 

data 객체에서 postArr 속성을 가져옵니다.


결과적으로, data 객체가 변경될 때마다 postArr 변수가 자동으로 업데이트되어 해당 변경사항을 반영합니다. 

이를 통해 Svelte 컴포넌트에서 데이터가 변경되는 경우 자동으로 UI를 업데이트할 수 있습니다.

 

조금더 자세한 내용은

https://beomy.github.io/tech/svelte/reactivity-syntax/

 

[Svelte] 반응형을 위한 문법

사용자 행동에 따라 반응형으로 동작하는 웹을 만들기 위한 Svelte 문법을 이야기합니다.

beomy.github.io

 

이 페이지를 참고하시면 좋을 것 같습니다.

 

저작자표시

'Yame Programmer > SVELTE' 카테고리의 다른 글

[svelte] svelteKit 빌드 경로 /build 안나올때  (0) 2023.03.09
[svelte] svelteKit 빌드파일 위치  (0) 2023.03.08
[svelte] svelteKit + docker 지금 이 페이지가 작동하지 않습니다. 해결  (0) 2023.03.03
[svelte] document is not defined 에러 해결 방법  (0) 2023.02.28
[svelte] svelte tailWindcss 적용하기  (0) 2023.02.20
1
2
3
4
5
list.sort(function(a, b) { // 오름차순
    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
  });
 
 
 cs

 

배열안의 id값이나 name 순서대로 재정렬 할때 사용 하는 방법

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[javascript] 단어(구분자) 단위 반응형 줄바꿈  (1) 2022.06.06
[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var list = [{"name":"사과", "id":"a1"},{"name":"배", "id":"a2"},{"name":"사과", "id":"a1"},{"name":"바나나", "id":"a3"}......] ;
 
var resultArray = []; // 카운팅해서 반환할 결과값 배열
  list.map(item => {
    //for each item in arrayOfObjects check if the object exists in the resulting array
    if(resultArray.find(object => {
        if(object.Name === item.Name && object.id === item.id) {
            //if the object exists iterate times
            object.cnt++;
            return true;
            //if it does not return false
        } else {
            return false;
        }
    })){
    } else {
        //if the object does not exists push it to the resulting array and set the times count to 1
        item.cnt = 1;
        resultArray.push(item);
    }
  });
 
 
 cs

 

배열안에 중복된 객체를 제거하고 중복된 객체가 몇개인지 세는 방법.

 

 

 

저작자표시

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[JS] IE에서 개체가 'find' 속성이나 메서드를 지원하지 않습니다.  (0) 2021.02.19
javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28

자동차 경주 만들기 웹버전


심심해서 만들어본


자동차 경주 웹버전


자바스크립트 제이쿼리를 이용해서 만들었다


https://jsbin.com/diqiwiroho/1/edit?output


1. 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
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <h1>자동차 경주</h1>
  <h4>경주할 자동차 대수를 입력 후 경주 시작을 누르시면 됩니다.</h4>
  <h4>이름적용 체크 박스 체크 후엔 자동차의 이름을 지정 할 수 있습니다.</h4>
  <h4>자동차 최대 입력 대수는 30대 입니다.</h4>
  <h4>트랙 최대 길이는 100 입니다.</h4>
  <h4>속도제한은 없습니다. 1000당 1초 입니다.</h4>
  <h4>만든 사람은 잘생긴 야매 개발자 In★ 입니다. 경주 할때마다 감사함을 느끼세요.</h4>
   <label for="nameCheck">이름적용</label><input id="nameCheck" type='checkbox' onchange="countCar();" />
  <br>
  <label for="nameCheck">트랙길이</label><input id="trackLength" type='number' onchange="countCar();" value="10"/>
  <br>
  <label for="nameCheck">속도(ms)</label><input id="raceSpeed" type='number' value="400"/>
  
  
  
  <br>
  <br>
  <label>경주할 자동차 대수</label>
  <input type="number" id="inputCarCnt" onchange="countCar();"/>
  
  <button onclick="startRace();">경주시작</button>
  <button onclick="countCar();">리셋</button>
  
  <div id="carNameContainer">
    
  
  </div>
  
  <div id="trackContainer" class="track-container">
  </div>
  
  <div id="finshBox">
  </div>
  
</body>
</html>
cs




2. css


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
.track-container{
  width:100%;
  display:inline-block;
  
}
.track{
  width:100%;
  float: left;
}
.car-label{
  float:left;
  display:inline-block;
  
}
.cell{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
}
.move{
  border:1px solid;
  height:15px;
  width:15px;
  float:left;
  background:black;
}
h4{
 margin:0px;
  margin-bottom:5px;
 font-size:15px;
  
}
cs



3. 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var carArr = [];
var finshNum = 0;
//var carNameArr = [];
 
function countCar(){
  carNameArr = [];
  carArr = [];
  finshNum = 0;
  var carCnt = $("#inputCarCnt").val();
  
  if(carCnt > 30){
    alert("최대 자동차 입력 개수는 30대 입니다.");
    return false;
  }
  
  
  var trackLen =  $("#trackLength").val();
  
  
  if(trackLen > 100){
    alert("최대 트랙 길이는 100 입니다.");
    return false;
  }else if(trackLen == 0 || trackLen ==""){
    alert("트랙길에 공백 혹은 0은 실행 할 수 없습니다.");
    return false;
  }
 
  
  var trackCon = $("#trackContainer");
  
  trackCon.empty();
   $("#finshBox").empty();
  $("#carNameContainer").empty();
  for(trackCnt=0; trackCnt < carCnt; trackCnt++){
    var track = $("<div class='track'></div>");
    track.append($("<div id='name"+trackCnt+"' class='car-label'>"+(trackCnt+1)+"번 차 : </div>"));
    
    for(cellCnt = 0; cellCnt < trackLen; cellCnt++){
      track.append($("<div class='cell'></div>"));
    }
    
    trackCon.append(track);
    
    if($("#nameCheck").prop("checked")){
        $("#carNameContainer").append($("<div><label>차이름 : </label><input class='car-nm-input' type='text' onkeyup='applyCarName();'/></div>"));
    }
    var carObj = {};
    carObj.num = trackCnt+1;
    carObj.name ="";
    carObj.move = 0;
    carObj.track = track;
    carObj.finshNum =0;
    carArr.push(carObj);
  }
}
 
 
function applyCarName(){
  var carNames = $(".car-nm-input");
  $.each(carArr, function(index, item) {
     item.name = carNames.eq(index).val();
    
    if(item.name != ""){
      $("#name"+index).text(item.name+" : ");
    }
    
  });
  
  
}
 
function startRace(){
  console.log("start");
  var startNmCheck = true;
  if($("#nameCheck").prop("checked")){
    $.each(carArr, function(index, item) {
      if(item.name == ""){
        startNmCheck = false;
      }
    });
   }
  
  var raceSpd =  $("#raceSpeed").val();
  
  if(raceSpd==""){
    alert("속도에 값을 입력 하여 주십시오");
    return false;
  }
  
  if(!startNmCheck){
    alert("경주할 차 이름을 모두 입력하여 주십시오.");
     return false;
  }
  
  
  
  
  moveAction();
}
 
 
function moveAction(){
  var finsh = true;
  
      $.each(carArr, function(index, item) {
      var moveVal = Math.round( Math.random()*10 );
      if(moveVal > 4){
        item.move++;
         var trackCell = item.track.find(".cell");
        trackCell.eq(0).attr("class","move");
      }
      
      
      if(item.finshNum==0){
        var trackLen =  $("#trackLength").val();
        if(item.move==trackLen){
          finshNum++;
          item.finshNum = finshNum;
          if($("#nameCheck").prop("checked")){
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.name+"</div>"));
          }else{
            $("#finshBox").append($("<div>"+finshNum+"등 "+item.num+"번차</div>"));
          }
          
       
        }
        finsh = false;
      }
      
      
    });
  
  
  if(!finsh){
    setTimeout(function() {
       moveAction();
    }, $("#raceSpeed").val());
  }else{
   
  }
  
}
cs



이렇게 하면


트랙길이, 경주할자동차 대수, 시간 설정이 가능한 자동차 경주 만들수 있음


차이름에 메뉴이름 같은거 적어놓고 사다리 타기 대용으로도 할수 있음.

저작자표시

'Yame Daily Life' 카테고리의 다른 글

나의 부채 이야기  (0) 2019.10.25
[합죽선] 전주 미선공예사, 부채박물관 방문기  (0) 2019.10.11
[달빛조각사] 달조 개꿀팁 및 노하우 모음  (0) 2019.10.10
[리니지2 M] 리니지2 M 공식 영상 및 플레이 영상 모음  (0) 2019.09.06
[리니지2 M] 리니지2 모바일 사전 예약및 사전예약 방법  (2) 2019.09.06

[제이쿼리] form의 내용을 한번에 오브젝트로 만들기



form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때


하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.


이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자



일단 제이쿼리 플러그인을 사용해야 한다



제이쿼리 시리얼라이즈 링크




사용 방법은


두가지가 있다


하나는 배열로 만들기 하나는 오브젝트로 만드는 방법






1. html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="yameaForm">
    <input name="input1">
    <input name="input2">
    <input name="input3">
    <input name="input4">
    <input name="input5">
    <input name="input6">
  </form> 
</body>
</html>
cs



2. js


1
2
3
4
5
6
7
8
9
function makeObject(){
var param = $("#yameForm").serializeObject();
console.log(param);
}
 
function makeArray(){
var param = $("#yameForm").serializeArray();
console.log(param);
}
cs



위와 같은 방법으로 만들면 된다


짱편함


개편함


짱짱맨임


저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 객체 이름순 정렬  (0) 2021.01.08
javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[자바스크립트] 자바스크립트 다국어 적용 방법  (0) 2017.08.07
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26

[자바스크립트] 자바스크립트 다국어 적용 방법



1. 자바스크립트


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
// 언어팩 선언.
$.lang = {};
 
$.lang.ko = {
    0: '자바스크립트 다국어 처리.',
    1: '안녕하세요',
    2: '오늘은 금요일 입니다.',
    3: '불금을 즐겨 보아요.'
};
 
$.lang.en = {
    0: 'Javascript Language Localization.',
    1: 'Hello.',
    2: 'Today is Friday',
    3: 'Fire~!!'
};
    
$.lang.ja = {
    0: 'JavaScriptの言語',
    1: 'こんにちは',
    2: '今日は金曜日です。',
    3: 'ガンバレ~!!'
};
 
/**
* setLanguage 
* use $.lang[currentLanguage][languageNumber]
*/
function setLanguage(currentLanguage) {
  console.log('setLanguage', arguments);
  
  $('[data-langNum]').each(function() {
    var $this = $(this); 
    $this.html($.lang[currentLanguage][$this.data('langnum')]); 
  });    
}  
 
// 언어 변경
$('button').click(function() {
  var lang = $(this).data('lang');
  setLanguage(lang); 
});
cs





2. HTML


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  <meta charset="utf-8">
  <title>자바스크립트 다국어 처리.</title>
</head>
<body>
  <div id="wrap">
    <h1 data-langNum="0">자바스크립트 다국어 처리</h1>
    <button data-lang="ko">한국어</button>
    <button data-lang="ja">일본어</button>
    <button data-lang="en">영어</button>
    <hr>
  
    <h2 data-langNum="1">안녕하세요</h2>
    <h2 data-langNum="2">오늘은 금요일 입니다.</h2>
    <h2 data-langNum="3">불금을 즐겨 보아요.</h2>
  </div>
</body>
</html>
cs





출처 : http://jsbin.com/losejo/edit?html,js,output

저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

javascript 배열안의 중복객체 카운트  (0) 2021.01.08
[제이쿼리] form의 내용을 한번에 오브젝트로 만들기  (0) 2018.05.09
YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13

[안드로이드] 웹뷰 자바스크립트와 안드로이드 자바 연동 방법


안드로이드의 웹뷰를 사용해 개발을 하다 보면 웹뷰에서 띄운 자바스크립트와


안드로이드의 자바 소스간에 연동을 해야 하는 경우가 생긴다



즉 자바스크립트에서 안드로이드 메소드를 호출 하거나


안드로이드에서 자바스크립트 함수를 호출해야 하는 경우인데.


그 방법에 대해서 알아 보도록 하자.



1. mainActivity.java 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final DBHelper dbHelper = new DBHelper(getApplicationContext(), "MoneyBook.db", null, 1);
        // 웹뷰 셋팅팅
        mWebView = (WebView) findViewById(webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(myUrl + "/html/test.html");
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClientClass());
    
 
        // Bridge 인스턴스 등록
        mWebView.addJavascriptInterface(new AndroidBridge(mWebView, dbHelper, newtwork), "HybridApp");
 
 
 
    }
cs



메인 액티비티의 oncreate 메소드에 웹뷰 셋팅을 해놓고 그 아래에 안드로이드브릿지를 등록 한다.



2. AndroidBridge.java


1번의 15번 라인의 안드로이드 브릿지를 사용하기 위해 클래스를 추가 해 주도록 한다.



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
package com.xxx.xxxxx;
 
import android.os.Handler;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
/**
 * Created by Administrator on 2017-08-03.
 */
 
public class AndroidBridge {
    private final Handler handler = new Handler();
    private WebView mWebView;
    private DBHelper dbHelper;
    private  boolean newtwork;
 
    // 생성자
    // 따로 사용할일 없으면 이거 안만들고 위의 변수도 안만들어도 됨.
    public AndroidBridge(WebView mWebView, DBHelper dbHelper, boolean newtwork) {
        this.mWebView = mWebView;
        this.dbHelper = dbHelper;
        this.newtwork = newtwork;
    }
 
    // DB데이터 가져오기
    @JavascriptInterface
    public void requestData() { // must be final
        handler.post(new Runnable() {
            public void run() {
                Log.d("HybridApp", "데이터 요청");
                String test  =  dbHelper.getResult();
                Log.d("HybridApp", test);
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
    // DB에 데이터 저장하기
    @JavascriptInterface
    public void saveData(final String item, final int num) { // must be final
        handler.post(new Runnable() {
            public void run() {
                Date d = new Date();
 
                String s = d.toString();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
 
                dbHelper.insert(sdf.format(d), item, num);
                Log.d("HybridApp", "데이터 저장");
                String test  =  dbHelper.getResult();
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
 
 
}
cs



DB데이터 가져온다는 내용은 신경쓰지 말자


일단 1번과 2번을 완료 했다면 안드로이드에서 할일은 끝났다.


여기서 봐야 할 것은


30번 43번 라인의 어노테이션이다. API17이상부터 저 어노테이션을 달아주지 않으면


정상 작동하지 않는다.


그리고 31 44번의 requestData, saveData 이 메소드명이 자바스크립트에서 호출하는 이름이 된다.


그리고 37 55번라인은 안드로이드에서 자바스크립트로 데이터를 날려주면서 


자바스크립트 function을 호출하는 부분이다.



3. javascript


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(function(){
    window.HybridApp.requestData();
});
 
function saveData(){
    var item = $("#item").val();
    var num = $("#num").val();
    window.HybridApp.saveData(item, num);
}
 
 
function getAndroidData(data){
    alert(data);
 
    var dataArr = data.split("*nn*");
    $("#testDiv").empty();
    for(var count=0; count < dataArr.length; count++){
        $("#testDiv").append("<p>"+dataArr[count]+" </p>");
    }
 
}
cs



자바스크립트에서 안드로이드 메소드를 호출할땐


window.1의 15번라인에서 선언한 이름.2에서 선언한 메소드명();


이런식으로 호출을 해주면 된다.


만약 3번라인의 리퀘스트데이터를 호출하면


2의 31번 메소드가 응답하며 2의 37번 라인이 동작해 자바스크립트 3의 13번function이 동작한다.




물론 위에 보는 것 처럼 안드로이드와 자바스크립트간의 텍스트 데이터도 전송이 가능 하다.

저작자표시 비영리

'Yame Programmer > Android' 카테고리의 다른 글

[안드로이드] Error:Execution failed for task ':app:transformClassesWithDexForDebug'. 오류 해결 방법  (0) 2017.09.04
[안드로이드] 기기의 카메라에 오류가 생겼습니다. 기기를 재시작해야할수도있습니다 해결방법  (0) 2017.08.08
[안드로이드] androidBridge they will not be visible in API 17 오류 해결 방법  (0) 2017.08.03
[안드로이드] 인터넷 연결상태 확인하는 방법  (1) 2017.08.03
[안드로이드] 간단하게 웹뷰 구현 예제  (12) 2017.08.03



[안드로이드] androidBridge they will not be visible in API 17 오류 해결 방법




none of the methods in the added interface(androidBridge) have been annotated with @android.webkit   they will not be visible in API 17 


이 오류의 해결 방법 입니다.



1. 원인


안드로이드 버전 API 17 이상부터 androidBridge 사용시 메소드에 어노테이션을 사용해야 정상 구동 하도록

바뀌어서 생기는 오류


2. 해결 방법


간단하게 androidBridge에서 사용하는 메소드위에 어노테이션을 추가 하면 됩니다.



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
package com.xxx.xxxx;
 
import android.os.Handler;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import java.text.SimpleDateFormat;
import java.util.Date;
 
/**
 * Created by Administrator on 2017-08-03.
 */
 
public class AndroidBridge {
    private final Handler handler = new Handler();
    private WebView mWebView;
    private DBHelper dbHelper;
    private  boolean newtwork;
 
    // 생성자
    public AndroidBridge(WebView mWebView, DBHelper dbHelper, boolean newtwork) {
        this.mWebView = mWebView;
        this.dbHelper = dbHelper;
        this.newtwork = newtwork;
    }
 
    // 네트워크 상태 확인
    @JavascriptInterface
    public void requestNetwork() { // must be final
        handler.post(new Runnable() {
            public void run() {
                Log.d("HybridApp", "네트워크 상태 요청");
                mWebView.loadUrl("javascript:getNetwork("+newtwork+")");
            }
        });
    }
 
 
 
    @JavascriptInterface
    public void setMessage(final String arg) { // must be final
        handler.post(new Runnable() {
            public void run() {
                Log.d("HybridApp", "setMessage("+arg+")");
                mWebView.loadUrl("javascript:getAndroidMessage('ANDROID -> JAVASCRIPT CALL!!')");
            }
        });
    }
 
 
}
cs


간단하게 다른거 볼 필요 없이


28번라인에 추가한 어노테이션을 29번같은 메소드 위에 선언하기만 하면 해당 오류가 해결 된다.



저작자표시 비영리

'Yame Programmer > Android' 카테고리의 다른 글

[안드로이드] 기기의 카메라에 오류가 생겼습니다. 기기를 재시작해야할수도있습니다 해결방법  (0) 2017.08.08
[안드로이드] 웹뷰 자바스크립트와 안드로이드 자바 연동 방법  (4) 2017.08.03
[안드로이드] 인터넷 연결상태 확인하는 방법  (1) 2017.08.03
[안드로이드] 간단하게 웹뷰 구현 예제  (12) 2017.08.03
[안드로이드] FCM 화면 깨우기 화면 켜지게 하는 방법  (11) 2017.07.12

오브젝트를 생성하고 특정 데이터의 개수에 따라


속성을 추가적으로 생성해야 하는 경우가 있으나 


속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.


일반적인 오브젝트의 속성 추가는

1
2
3
4
5
6
7
8
var _gridObj = {};
 
 
_gridObj.time1 = 1;
_gridObj.time2 = 2;
_gridObj.time3 = 3;
_gridObj.time4 = 4;
 
cs


위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면


아래와 같이 작성을 해주면 된다.


1
2
3
4
5
var _gridObj = {};
for(var dataCount = 0; dataCount < dataSize; dataCount++){
    _gridObj[ 'time'+dataCount] = result;
}
 
cs




저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23
[ajax] ajax사용시 뒤로가기 문제  (0) 2015.06.23

+ Recent posts

티스토리툴바