'javascript'에 해당하는 글 3건

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 :: 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
내가달이다
,