'ASP.NET MVC/JavaScript'에 해당하는 글 7건

JavaScript :: mp3 파일을 읽어서 재생시키기

ASP.NET MVC/JavaScript 2017. 4. 3. 14:42

안녕하세요 간만에 글남기네요 


node를 이용한 스트리밍전송에대해 공부하면서 정리를 하고있어서 그부분에 대해서도 천천히포스팅할 예정입니다 


자바스크립트를 이용해 간단하게 음악파일을 읽어 재생시키는 방법을 알아보려합니다


HTML





JAVASCRIPT







이와같이 파일을 선택받고 플레이버튼을 누르면 재생이됩니다


다음포스팅은 Node  를 이용한 스트리밍서버 and 파일전송을 해볼예정입니다

'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,

JavaScript :: 한글만 추출하는 정규식

ASP.NET MVC/JavaScript 2017. 3. 9. 15:28


최근에 작업을 하다보니 제가원하는 것은  예를들어 "버스커버스커" 만을 원하는데


크롤링을 하다보면 버스커 버스커 ( busker busker) 이렇게 입력되어 잇는곳이 몇군데 있다


그래서 한글만 추출을 어떻게 하나 고민끝에 정규식을 이용하면 간편하다는 글을보고 찾아서 해보았다 


1
 var Artist = config.bugstrack[0].Artist.replace(/[^\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F]/gi,"")                                        
cs


config.bugstrack[0].Artist  == 버스커 버스커 (busker busker) 입니다 


그후 뒤에있는 정규식을 한글을 제외한 문자,특수문자,공백 등등을 지우는 정규식입니다 


유용하게 사용하시면 될거같습니다 


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: mp3 파일을 읽어서 재생시키기  (3) 2017.04.03
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,

JavaScript :: array 특정요소 삭제

ASP.NET MVC/JavaScript 2017. 2. 8. 13:24

Array  즉 배열 같은경우에는 추가는 push 삭제는 pop 을이용한다


push 는 맨앞의 값삭제


pop 은 맨뒤의 값삭제 


하지만 코딩을 하다보면  특정값이 들어간 배열을 삭제하고 싶을경우가 있다 이럴경우에는  .splice() 을 이용하면 간단하게 된다 


예를 들어보겠습니다 


 



textarea 안에 줄띄움값과 빈값 등을 거르고 한줄씩 값을 읽어와보겠습니다 


1
2
3
4
5
6
7
8
      var tracklist = this.textdownload.split('\n')
        for(var i = 0; i < tracklist.length; i ++)
        {
            if(tracklist[i].length == 0)
            {
                tracklist.splice(i, 1);
            }
        }
cs



tracklist 라는 변수에는 '\n' 을 split 을 해주면 배열값은


"" 값 도 포함이된 상태로 저장이됩니다 그래서 for 문을 배열의 length 만큼 돌려주고 


그배열의 length == 0 즉  length 값이 "" 인것을 선별해주어서 splice (i,1) 을 해주시면 




보이는 것과 같이 배열이 완성됩니다 

'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: mp3 파일을 읽어서 재생시키기  (3) 2017.04.03
JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,

JavaScript :: async.forEachOf

ASP.NET MVC/JavaScript 2017. 2. 1. 21:58

비동기가 항상 발목을 잡아버리네요 ... 


이전에 포스팅을 했던 콜백헬  http://moonna.tistory.com/14  의 연장선이라고 보시면 편합니다


이전에는 단순히 async.waterfall 을 이용해 순차적으로 실행을해줬습니다 


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
        async.waterfall([
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                 console.log(scheduleId)
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                 console.log(scheduleId)
                                                 //next_result 없을때 값처리해야됨
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
cs


실행순서는 


"next result3" > done > "next result4" > done > "next result5" > done


이런식으로 진행됩니다 


위의 async.waterfall 을 배열의 인덱스 값만큼 반복 시켜주려면 어찌해줘야 하나 고민하다 stackoverflow 에 해결책이 있었습니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var async = require('async')
var users = ['a','b','c']
 
async.forEachOfLimit(users, 1, function(user, index, cb) {
 
    console.log(index + ': ' + user)
 
    async.waterfall([
        function(callback) {
 
           // add something function
 
            callback(null);
        }
    ], function (err, result) {
        console.log(index + ": done")
        cb()
    });
 
}, function() {
    console.log('ALL done')
})
cs



배열의 값만 큼 순차적으로 비동기통신이 되었습니다 




'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

JavaScript :: mouseover (마우스오버)

ASP.NET MVC/JavaScript 2017. 1. 13. 15:57

기준 프로젝트화면  : http://moonna.tistory.com/18


이전에 작업은 그리드 로우 클릭시 결과값을 그래프로 보여주는 것까지 완성을 하였다 


결과



밑에 결과 그리드에 들어가있는 내용은 




그리드 안의 이미지 컬럼에 마우스를 가져가면 컬럼안의 이미지 주소값을 이용해 마우스 위치에 


이미지를 보여주는 걸 만들어볼까 합니다


HTML

1
2
3
4
5
6
7
    <ag-grid-ng2 #agGrid2 style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions2"
                  on-mouseover='overimage($event)'
                   on-mousemove='overimagemove($event)'
                  on-mouseout='overimageout($event)'
                 enableColResize>   
    </ag-grid-ng2>
cs


해당 그리드에 on-mouseover , on-mousemove, on-mouseout 이벤트를 걸어주었습니다 



on-mouseover : 마우스 오버시 발생하는 이벤트 


on-mousemove : 마우스 이동시 발생하는 이벤트


on-mouseout : 마우스 포커스 아웃할때 발생하는 이벤트



이벤트 생성을 해준후 그리드 이미지컬럼에 마우스 오버시 이미지 컬럼의 값을 가져와보겠습니다 


우선 마우스 오버시 어떤값들을 가져오는지 확인을해보면 ..




해당 마우스 좌표값들을 가져 올수 있습니다


이 좌표들을 이용해서 마우스 위치를 기준으로 이미지를 보여주면 될거같습니다 


이후 이미지컬럼의 내용을 가져와보면 




이미지컬럼안의 값은 fromElement 라는 요소 안의 있는걸로 확인이되네요 


자세히 들여다 보면 




innerHTML이 보이실겁니다 HTML 안에있는 값을 나타냅니다 


이미지컬럼의 이미지주소를 가져오면 될거같습니다 




TS(TypeScript)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 overimage(event : any ){
    if(event.fromElement.innerText.slice(0,8) == 'https://')
    {           
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('src',event.fromElement.innerText);
        document.getElementById("imgViewer").setAttribute('style','z-index:1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
        console.log(event)
    }
 }
overimagemove(event : any ){
        var divTop = event.clientY - 20 + 'px'; //상단 좌표
        var divLeft =event.clientX + 10 + 'px'; //좌측 좌표
        document.getElementById("imgViewer").setAttribute('style','z-index :1; position: absolute; top :'+divTop+';left : '+divLeft+';width: 150px; display:block;')
}
 overimageout(event : any ){
         document.getElementById("imgViewer").setAttribute('style','display:none;')
}
 
cs


if 문 조건은 그리드 아무곳에나 마우스오버시 이미지가 보여주면 안되어서 걸어준겁니다 


z-index 는 레이어들의 쌓임순서(배치순서) 를 정해줄수있습니다  이걸해주는이유는 그리드데이터가 이미지보다 먼저 배치가될경우


이미지가 그리드에 가려지는 경우가 발생하기때문입니다.


아래 이미지를 참고하시면 이해가 빠르실겁니다



position : absolute  는 문서의 원래위치와 상관없이  위치를 조정할수있기때문에  지금만드려는 마우스 위치를 기준으로 이미지를


보여주려하기때문에 위치값을 absoulte 를 주었습니다 





실행결과









'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

JavaScript :: callbackhell(콜백헬)

ASP.NET MVC/JavaScript 2017. 1. 7. 20:00

콜백헬 에 대해 포스팅해보려고한다


비동기 프로그래밍을 짜본적이없어서 초반에 코딩을할때 고민을 많이 했다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  func1 (
    function func2 (
        function func3 (
            function func4 (
                function func5 () {
                alert('func5()');                    
                }
            alert('func4()');    
            }
            alert('func3()');                
        }
        alert('func2()');
    }    
    alert('func1()');    
    
cs



예를 들어보자 개발을 하다보면 이런 콜백 을 자주 볼수있는데 .. 


문제는 돌아간다..돌아가긴하는데...  이걸본 다른 개발자나 인수자들은.....





이럴 경우에는 async 프레임워크 , promise 를 사용하는 방법이있다  저의 경우에는 async 프레임워크를


이용해서 해결했습니다



Waterfall



async 프레임워크에는 여러개 의 제어 흐름이 있는데 자세한것은 https://caolan.github.io/async/  공식 깃헙입니다


저는 waterfall 방식을 이용해서 코드를 깔끔하게 정리했습니다




구현 하려는 코드가 


twitter rest api 를 이용해 데이터를 가져오게되면 한페이지에 100개의 데이터를 가져올수밖에없다 대신에 포함된데이터에 


next_results 값을 포함시켜서 다음 에 찾게되는 값의 주소를 나타낸다.



이값을 이용해 내가원하는 수만큼 가져오고싶엇다 



Waterfall 예제

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
              async.waterfall([
  
                                             
                                            },
                                            function(callback){                                                                                                                                                                                                               
                                                 console.log("next_result 1")
                                                 console.log("scheduleId 1")
                                                functions.ScheduleFeatch(scheduleId);
                                                  setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            },
                                            function(scheduleId,callback){
                                                 console.log("next_result 2")
                                                 console.log("scheduleId 2")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log("scheduleId 3")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                console.log("scheduleId 4")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                console.log("scheduleId 5")
                         
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
 
cs


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,