'Programming/javascript & HTML'에 해당되는 글 123건

  1. 2019.01.10 js class extend
  2. 2018.12.28 img vertical-align
  3. 2018.12.28 css text-indent
  4. 2018.12.18 localstorage sessionStorage
  5. 2018.12.15 ajax success 콜백 사용하기
  6. 2018.12.14 js __proto__
  7. 2018.12.07 canvas dataURL to Formdata(file)
  8. 2018.12.04 js 부모창 변수 접근하기
  9. 2018.11.30 크로스 브라우징 관련..
  10. 2018.11.30 wavesurfer.js HTML5 AUDIO 미지원시

자바 스크립트에도 class와 상속이 지원되는구나..

babel을 통한 변환용 문법인줄 알았네..


[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/extends]

[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/static]

'Programming > javascript & HTML' 카테고리의 다른 글

자바 스크립트 다시 공부 - 이벤트 관련  (0) 2019.02.28
js import babel transpiler  (0) 2019.01.10
js class extend  (0) 2019.01.10
img vertical-align  (0) 2018.12.28
css text-indent  (0) 2018.12.28
localstorage sessionStorage  (0) 2018.12.18
Posted by 구차니

댓글을 달아 주세요


[링크 : https://mytory.net/archives/797]

'Programming > javascript & HTML' 카테고리의 다른 글

js import babel transpiler  (0) 2019.01.10
js class extend  (0) 2019.01.10
img vertical-align  (0) 2018.12.28
css text-indent  (0) 2018.12.28
localstorage sessionStorage  (0) 2018.12.18
ajax success 콜백 사용하기  (0) 2018.12.15
Posted by 구차니

댓글을 달아 주세요

padding으로 하면 크기가 달라져서 귀찮았는데

딱 내가 바라던 용도의 태그..


(그러니까 들여쓰기)

[링크 : https://www.codingfactory.net/10459]

'Programming > javascript & HTML' 카테고리의 다른 글

js class extend  (0) 2019.01.10
img vertical-align  (0) 2018.12.28
css text-indent  (0) 2018.12.28
localstorage sessionStorage  (0) 2018.12.18
ajax success 콜백 사용하기  (0) 2018.12.15
js __proto__  (0) 2018.12.14
Posted by 구차니

댓글을 달아 주세요


웹 스트로지 생명주기와 범위

로컬 스토리지와 세션 스토리지는 저장된 데이터의 생명주기와 범위에 차이가 있다. 로컬 스토리지를 통해 저장된 데이터는 만료기한이 없고, 웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의 특정 인터페이스를 통해 삭제하기전까지는 사용자의 컴퓨터에 존재하므로 영구적으로 저장된다고 할 수 있다.

[링크 : http://iamawebdeveloper.tistory.com/97]


+

localstorage 저장, 읽기는

setItem()

getItem()을 통해 이루어지고

크롬에서 항목이 없을시 null을 리턴한다.

[링크 : https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage]


+

2018.12.26

삭제시에는 removeitem()을 이용한다.

[링크 : https://developer.mozilla.org/ko/docs/Web/API/Storage/removeItem]

'Programming > javascript & HTML' 카테고리의 다른 글

img vertical-align  (0) 2018.12.28
css text-indent  (0) 2018.12.28
localstorage sessionStorage  (0) 2018.12.18
ajax success 콜백 사용하기  (0) 2018.12.15
js __proto__  (0) 2018.12.14
canvas dataURL to Formdata(file)  (0) 2018.12.07
Posted by 구차니

댓글을 달아 주세요

ajax 콜 할때 success에 콜백함수를 쓰는게 아니라

직접 특정 함수로 바로 넘기는 것도 가능하네?

어떻게 보면 당연한건데 왜 생각을 못했을까.. -ㅁ-


$.ajax({

    url: HOME_PATH +'/data/earthquake_weight.json',

    dataType: 'json',

    success: startDotMap

});


function startDotMap(data) {

    var dotmap = new naver.maps.visualization.DotMap({

        map: map,

        data: data.coordinates,

        radius: 20

    });

}

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-5-visualization-dotmap-w.example.html]

'Programming > javascript & HTML' 카테고리의 다른 글

css text-indent  (0) 2018.12.28
localstorage sessionStorage  (0) 2018.12.18
ajax success 콜백 사용하기  (0) 2018.12.15
js __proto__  (0) 2018.12.14
canvas dataURL to Formdata(file)  (0) 2018.12.07
js 부모창 변수 접근하기  (0) 2018.12.04
Posted by 구차니

댓글을 달아 주세요

자바 스크립트는 프로토타입 언어라고 한다..(아니 인터프리터 언어 아니었어 -ㅁ-?)

아무튼.. naver api 보다가 이상한게 나와서 분석하다 막히는 중.. 끄응...


[링크 : https://medium.com/@bluesh55/javascript-prototype-이해하기-f8e67c286b67]

[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto]

[링크 : https://msdn.microsoft.com/ko-kr/library/dn342818(v=vs.94).aspx]


'Programming > javascript & HTML' 카테고리의 다른 글

localstorage sessionStorage  (0) 2018.12.18
ajax success 콜백 사용하기  (0) 2018.12.15
js __proto__  (0) 2018.12.14
canvas dataURL to Formdata(file)  (0) 2018.12.07
js 부모창 변수 접근하기  (0) 2018.12.04
크로스 브라우징 관련..  (0) 2018.11.30
Posted by 구차니

댓글을 달아 주세요

근 두달만에 겨우 해결했네..

키워드를 잘 못 잡았던 걸까 싶긴한데

아무튼.. FileList() 객체로 생성되고 그랬던 거라.. 

File() 객체를 생성하는걸 생각 못한게 2달 날린(?) 원인.. ㅠㅠ



+

new File() 에는 Array가 첫번째 인자인걸 주의!!!!

(망할!!!!!)


var blobdata = document
.getElementById("target_obj_cnv")
.toDataURL("image/png");
blobdata = dataURLtoBlob(blobdata);
var imgFile2 = new File([blobToFile(blobdata, "target.png")], "target.png");
var data = new FormData();

data.append("image", imgFile2);

[링크 : https://stackoverflow.com/questions/27251953/how-to-create-file-object-from-blob[

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/File/File]



+

걍 포기해야 하나? ㅠㅠ

[링크 : https://stackoverflow.com/questions/38449440/javascript-create-file-list-object-from-list-of-files]

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/FileList]


+

으으.. 영 안되네.. ㅠㅠ


function blobToFile(theBlob, fileName) {
var date = new Date();
theBlob.lastModifiedDate = date;
theBlob.lastModified = date.getTime();
theBlob.name = fileName;
return theBlob;
}

function dataURLtoBlob(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });

} 

var blobdata = document
.getElementById("cnv")
.toDataURL("image/png");
blobdata = dataURLtoBlob(blobdata);
var imgFile2 = blobToFile(blobdata, "target.png");


[링크 : https://stackoverflow.com/questions/6850276/how-to-convert-dataurl-to-file-object-in-javascript]


+

Vanilla JavaScript


function blobToFile(theBlob, fileName){

    //A Blob() is almost a File() - it's just missing the two properties below which we will add

    theBlob.lastModifiedDate = new Date();

    theBlob.name = fileName;

    return theBlob;

[링크 : https://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascript/29390393]



---

[링크 : https://code.i-harness.com/ko-kr/q/4c46fc]


[링크 : https://teamtreehouse.com/community/how-to-create-a-file-from-a-dataurl-javascript]


var dataurl = canvas.toDataURL('image/jpeg',0.8);

var blob = dataURLtoBlob(dataurl);

var fd = new FormData();

fd.append("myFile", blob, "thumb.jpg"); 

[링크 : https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata]

[링크 : https://stackoverflow.com/questions/15675063/how-to-create-an-image-file-on-server-from-dataurl]

'Programming > javascript & HTML' 카테고리의 다른 글

ajax success 콜백 사용하기  (0) 2018.12.15
js __proto__  (0) 2018.12.14
canvas dataURL to Formdata(file)  (0) 2018.12.07
js 부모창 변수 접근하기  (0) 2018.12.04
크로스 브라우징 관련..  (0) 2018.11.30
wavesurfer.js HTML5 AUDIO 미지원시  (0) 2018.11.30
Posted by 구차니

댓글을 달아 주세요

opener.window.변수명 하니 되는거 같기도 하고?


---


parent.변수명

[링크 : https://stackoverflow.com/.../sharing-global-javascript-variable-of-a-page-with-an-iframe-within-that-page]


되는건줄 알았는데 왜 안되지.. ㅠㅠ


---


팝업이라는 전제가 붙는건 opener 함수가 열어주어야 하기 때문인듯.

아무튼.. 단순하게(?) 전역변수에 접근할순 없고

parent 측에서 opener 변수로 해주어야 하는 것 같기도 하고..


opener.document.[name_tag]....

[링크 : http://algina.tistory.com/50]


document.[name_tag]...

[링크 : http://kamjum.tistory.com/entry/JavaScript-팝업창에서-부모-창의-hidden-변수에-따라-값-설정-위치-변경]


opener / top

[링크 : https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=33683]

[링크 : http://j07051.tistory.com/518]



+

Coding Tip: window.opener.close() will close the source (parent) window.

[링크 : https://www.w3schools.com/jsref/prop_win_opener.asp]


+

현재 윈도우(window)를 오픈한 윈도우의 레퍼런스(reference)를 반환합니다.

[링크 : https://developer.mozilla.org/ko/docs/Web/API/Window/opener]

'Programming > javascript & HTML' 카테고리의 다른 글

js __proto__  (0) 2018.12.14
canvas dataURL to Formdata(file)  (0) 2018.12.07
js 부모창 변수 접근하기  (0) 2018.12.04
크로스 브라우징 관련..  (0) 2018.11.30
wavesurfer.js HTML5 AUDIO 미지원시  (0) 2018.11.30
safari 날짜 계산 NaN 문제  (0) 2018.11.30
Posted by 구차니

댓글을 달아 주세요

내가 원하는 수준은.. 구형 브라우저 - 신형 브라우저 수준이 아니라.

신형 브라우저중

chrome 버전별 혹은

모바일 / 데스크탑 버전 정도이긴 한데..

한번 caniuse는 좀 찾아 봐야 겠다.. ㅠㅠ


[링크 : https://caniuse.com/]

[링크 : https://hackya.com/kr/크로스-브라우징-총정리/]

'Programming > javascript & HTML' 카테고리의 다른 글

canvas dataURL to Formdata(file)  (0) 2018.12.07
js 부모창 변수 접근하기  (0) 2018.12.04
크로스 브라우징 관련..  (0) 2018.11.30
wavesurfer.js HTML5 AUDIO 미지원시  (0) 2018.11.30
safari 날짜 계산 NaN 문제  (0) 2018.11.30
모바일 크롬 select-option  (0) 2018.11.30
Posted by 구차니

댓글을 달아 주세요

망할(?) HE-AACv2 땜시 고생중인데...


윈도우에서는 크롬과 edge 중에 edge만 해당 오디오를 정상 지원하고

모바일에서는 아퐁10에서 safari가 정상 지원을 하는 것으로 보인다

(회사 사람들 기종 돌아가면서 해보는데 크롬은 전반적으로 안되고, 사파리도 ios에 따라 다른 듯)


아무튼 fallback 기능으로 backend 엘리먼트를 통해 MediaElement를 설정하여 

재생만이라도 되게 설정할 수 있다.(파형은 안나옴)


[링크 : https://stackoverflow.com/.../wavesurfer-js-getting-it-to-work-in-browsers-other-than-firefox]

[링크 : https://wavesurfer-js.org/example/audio-element/]



+

다시 테스트 해보니..

PC 크롬은 backend로도 재생불가

모바일 크롬은 backend로 파형없이 재생가능

아이폰 크롬도 backend로 파형없이 재생가능

아이폰 safari는 ios 버전에 따라 파형없이 재생가능(아퐁 10은 파형도 나옴)

(망할...)


+

음.. 


[링크 : https://caniuse.com/#search=web%20audio]

'Programming > javascript & HTML' 카테고리의 다른 글

js 부모창 변수 접근하기  (0) 2018.12.04
크로스 브라우징 관련..  (0) 2018.11.30
wavesurfer.js HTML5 AUDIO 미지원시  (0) 2018.11.30
safari 날짜 계산 NaN 문제  (0) 2018.11.30
모바일 크롬 select-option  (0) 2018.11.30
HTML border style 지정  (0) 2018.11.30
Posted by 구차니

댓글을 달아 주세요