URL 생성자 URL(Uniform Resource Locator) 생성자는 웹 페이지나 파일 등을 나타내는 고유한 주소를 생성하는 데 사용됩니다. URL 생성자는 일반적으로 프로그래밍 언어에서 지원되며, URL 문자열을 동적으로 생성하거나 파라미터를 추가하거나 수정하여 원하는 URL을 만들 수 있습니다. 대부분의 URL 생성자는 다음과 같은 구성 요소를 가지고 있습니다. - 프로토콜: URL이 사용하는 프로토콜 (http, https, ftp 등)을 지정합니다. - 호스트: 웹 사이트의 도메인 이름이나 IP 주소를 지정합니다. - 포트: 서버의 포트 번호를 지정합니다. - 경로: 웹 페이지나 파일의 경로를 지정합니다. - 쿼리 문자열: URL의 쿼리 문자열을 지정합니다. 이 문자열은 일반적으로 웹 페이..
원본 출처 : https://curryyou.tistory.com/451 [자바스크립트] Web Audio API 기본 원리와 예제 코드 # Web Audio API란? Web Audio API란 오디오 데이터를 입력받아, 각종 처리 및 분석을 수행할 수 있게 해주는 API이다. Web Audio API에서 다룰 수 있는 소리 데이터는 아래의 4가지가 있다. 1) Oscillator: 주파수, curryyou.tistory.com 자바스크립트에서 미디어를 다루는 주요 API 4가지 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디오, 비디오, 화면 등) 데이터를 다룬다. 2. MediaS..
원본 출처: https://curryyou.tistory.com/443 자바스크립트 Media Capture and Streams API: MediaStream, MediaStreamTrack # 자바스크립트에서 미디어를 다루는 방법 자바스크립트에서 미디어를 다루는 주요 API는 4가지가 있다. 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Strea curryyou.tistory.com 자바스크립트에서 미디어를 다루는 주요 API 4가지 1. Media Capture and Streams API (=Meida Stream API) - 마이크, 카메라 등을 이용해 들어오는 (Media Stream: 오디..
audio 태그 태그는 음악이나 오디오 스트림과 같은 사운드를 정의할 때 사용합니다. 요소는 현재 MP3 , WAV, Ogg 세 가지 포맷의 파일을 지원하고 있습니다. audio 태그 속성 속성명 속성값 설명 autoplay autoplay 오디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함. controls controls 플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함. loop loop 오디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함. muted muted 오디오의 음성 출력이 음소거됨을 명시함. preload auto metadata none 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함. src URL..
정규표현식 \s 를 이용하면 된다. 아래와 같이 체크가 가능하고, 응용하면 여러가지 다양한 방법으로 처리가 가능하다. 탭, 스페이스 엔터값을 체크할수 있다. var pattern = /\s/g; // 공백 체크 정규표현식 - 탭, 스페이스 // 공백 넣고 테스트 var str = 'space space'; // 공백없이 테스트 // var str = 'space'; if( str.match(pattern) ) { alert("공백이 존재합니다."); } else { alert("공백이 존재하지 않습니다."); } 출처 : https://youngram2.tistory.com/74
Array.prototype.entries() entries() 메서드는 배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. arr.entries(); FormData 객체에는 직접 데이터를 읽어들이는 기능이 없기 때문에, 이를 위해서는 FormData 객체에 포함된 entries() 메서드를 사용해야 합니다. const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] entries() 메서드를 사용해 FormData 조회하기 entries() 메서드는 FormData 객체에 저장된 키/값 쌍을 나타내..
FormData FormData는 웹 브라우저에서 제공하는 JavaScript API로, HTML form을 통해 사용자로부터 입력받은 데이터를 쉽게 처리하고 전송할 수 있도록 도와줍니다. 이 API를 사용하면, JavaScript를 사용하여 새로운 form 데이터를 생성하거나, 이미 존재하는 form 데이터를 가져와서 수정할 수 있습니다. 이러한 form 데이터는 HTTP 요청을 통해 서버로 전송될 때 사용됩니다. FormData 객체는 append() 메서드를 사용하여 form 데이터의 각 항목을 추가할 수 있습니다. 이 메서드를 사용하면, key-value 쌍으로 이루어진 데이터를 form 데이터에 추가할 수 있습니다. 이때 key는 form 요소의 name 속성 값이 되며, value는 해당 fo..
Amplitudejs https://github.com/serversideup/amplitudejs GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you w AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required. - GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web A... github.com A..
보고 와야 할 이전글: 콜백 정리 포스팅 [JS] 동기비동기 · 콜백 이해하기 동기와 비동기차이 ⦁ 동기적(Synchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식 ⦁ 비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종 rebornbb.tistory.com Promise 개념 Promise란? 자바스크립트에서 제공하는 비동기를 간편하게 표현할수있는 object 비동기적인것을 수행할 때 콜백함수 대신에 유용하게 쓸 수 있는 object입니다. Promise는 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과값을 전달해줍니다. 만약 수행 중 예상치 못한 문제가 발생했다면 에러..
동기와 비동기차이 ⦁ 동기적(Synchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식 ⦁ 비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식 자바스크립트는 동기적인 것입니다. *호이스팅된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나하나씩 동기적으로 실행된다는 말입니다. *호이스팅: var변수, function선언들이 자동적으로 제일 위로 올라가는 것 console.log('1'); console.log('2'); console.log('3'); 동기적(Synchronous)은 위 console.log와 같이 1,..
내장함수란? 내장함수란 자바스크립트 엔진에 내장된 함수를 말합니다. 내장함수는 개발자가 함수를 직접 선언하지 않아도됩니다. 즉, 자바스크립트에 이미 내장된 함수는 바로 호출할 수 있습니다. 내장 함수의 종류 종류 설명 사용예 encodeURI() 문자를 유니코드값으로 인코딩합니다. (영문, 숫자, 일부기호(;,/?:@&=+$ 제외) encodeURI("?query=값") → "?query=%EA%B0%91" encodeURIComponent() 문자를 유니코드 값으로 인코딩합니다. (영문,숫자 제외) encodeURIComponent("?query=값") →"%3Fquery%3D%EA%B0%91" decodeURI 유니코드값을 디코딩해 다시 문자화합니다. decodeURI("?query=%EA%B0%91..
브라우저 객체란? 브라우저에 내장된 객체를 브라우저 객체라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에 하위 객체가 포함되어있습니다. 즉 계층적 구조로 이루어져 있으며, 이를 브라우저객체모델(BOM, Browser Object Model)이라고 합니다. Window객체 window객체의 메서드 종류 종류 설명 open("URL", "새창이름", "새창옵션") URL 페이지를 새창으로 나타냅니다 alert(data) 경고창을 나타내고 데이터를 보여줍니다. 방문자가 [확인]버튼을 누르면 alert()를 사용한다음 위치의 코드를 수행합니다. prompt("질문", "답변") 질문과 답변으로 질의 응답 창을 나타냅니다. confirm("질문 내용") 질문내용으로 확인이나 취소창..
