HTML5, CSS3, 자바스크립트 Javascript 등
웹사이트 바로가기 이 웹사이트의 기능은 다음과 같습니다. 스케일 목록을 데이터베이스에서 읽어서 테이블 형태로 나열 (PHP) 각 목록을 클릭하면 스케일의 정보와 악보, 소리듣기 기능을 제공 (abcjs 이용) 스케일의 정보는 이름, 별칭(Alias), 설명(Description), 중요도(Priority), 패턴이 있음 악보 및 사운드 생성은 스케일의 Pattern 정보를 이용하여 생성 (PHP 음악 스케일 구하기) 조옮김(Transpose), 이명동음 표시기능 더보기…
abcjs.net 은 인터넷 브라우저에 악보를 출력하는 자바스크립트 라이브러리입니다. https://www.abcjs.net/abcjs_basic_5.9.1-min.js [다운로드] https://www.abcjs.net/abcjs-audio.css [다운로드] <!DOCTYPE HTML> <html> <head> <link href=”abcjs-audio.css” media=”all” rel=”stylesheet” type=”text/css” /> <script src=”abcjs_basic_5.9.1-min.js” type=”text/javascript”></script> </head> <body> <div id=”notation”></div> <div id=”audio”></div> <script type=”text/javascript”> ……… </script> </body> </html> var cooleys = ‘X:1\nT: Cooley\’s\nM: 4/4\nL: 1/8\nR: reel\nK: Emin\nD2|:”Em”EB{c}BA B2 EB|~B2 AB dBAG|”D”FDAD 더보기…
자바에서 주파수를 재생하는 글 자바 예제: 특정 주파수의 소리 재생 을 자바스크립트로 바꾼 예제입니다. 외부 온라인 소스나 라이브러리 필요 없이 자바스크립트 자체 엔진으로 소리를 재생합니다. 1) AudioContext 인스턴스 생성 var audioCtx = new(window.AudioContext || window.webkitAudioContext)(); var osc, gn; 사파리 등 모바일 브라우저에서는 웹킷 접두어가 붙은 webkitAudioContext만 인식하므로 이 부분도 추가합니다. 더보기…
선택자 최적화 (Optimize Selectors) 더욱 많은 브라우저에서 document.querySelectorAll()을 구현하고 있고 요소 선택에 대한 부담이 jQuery에서 브라우저로 바뀌고 있기 때문에 선택자 최적화는 예전보다 중요하지 않습니다. 그러나 선택자 성능에 병목 현상이 발생하면 명심해야 할 몇 가지 팁이 있습니다. JQuery 확장 (jQuery Extensions) 가능하면 jQuery 확장이 포함된 선택자를 사용하지 마십시오. 이러한 확장은 더보기…
자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하) 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하) 자바스크립트: 객체지향 3 – class (ES6 이상) 기존 ES5 이하 환경의 자바스크립트에서 장황하고 불편했던 클래스 생성 등의 과정이 ES6 이후에 class 문법이 생겨서 한결 편하게 클래스를 만들고 관리할 수 있게 더보기…
자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하) 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하) 자바스크립트: 객체지향 3 – class (ES6 이상) 상속에 대한 예제로 악기에 대한 추상 클래스(완벽하게 동일한 개념은 아니나 편의상 이하 객체지향 용어들을 사용합니다.) 를 작성해 보겠습니다. function MusicalInstrument(){ this.material = “추상적 더보기…
자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하) 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하) 자바스크립트: 객체지향 3 – class (ES6 이상) new 키워드를 이용해 각종 정보를 담고 특정 기능을 수행하는 인스턴스를 만드는 기능입니다. 먼저 컨테이너 함수를 만들어야 합니다. 객체지향 언어의 클래스와 같은 역할입니다. 컨테이너 더보기…
이하 내용들은 ES6 이상을 지원하지 않는 브라우저에서는 작동되지 않을 수도 있습니다. Array.prototype.map 배열을 순회합니다. var numbers = [1, 4, 9]; var roots = numbers.map(function(num) { return Math.sqrt(num) }); // roots is now [1, 2, 3] // numbers is still [1, 4, 9] Array.prototype.filter 특정 조건을 만족하는 배열만 솎아냅니다. var words 더보기…
다음과 같이 배열이 있고 배열은 객체로 이루어져 있다고 한다면 var exampleArray = [ { id: 4, name: “최길동”, grade: “B” }, { id: 2, name: “이영자”, grade: “A” }, { id: 1, name: “김천시”, grade: “C” }, { id: 3, name: “박상옥”, grade: “D” }, ] 이 객체 배열들을 정렬하는 더보기…
https://stackoverflow.com/questions/16086162/handle-file-download-from-ajax-post 스프링을 통해 바이너리 파일을 다운로드하는 기능을 AJAX로 구현하려 했는데 서버에서는 용량이 1.5MB인 파일이 다운로드 될 때는 3MB로 부풀려져서 다운로드 되는 문제가 있었습니다. 파일이 깨진것이며 복구 불가능한 상태였습니다. 결론부터 말하면 XMLHttpRequest의 responseType 을 blob으로 설정해야 하며 JQuery AJAX 기능은 오류가 지속적으로 발생하므로 자바스크립트 기본 XMLHttpRequest를 사용하는 것을 추천합니다. var xhr 더보기…