HEX COLOR CODE 색상코드 앞에 #과 뒤에 붙는 6자리 16진수(hex)로 나타내는 것으로 16진수에서 사용하는 숫자는 0부터 9까지의 숫자와 A, B, C, D, E, F입니다. HEX COLOR CODE 로 나타낼수있는 색상의 수는 16의 6승인 16,777,216가지입니다. 랜덤 컬러 생성 함수 function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } 해당 함수는 임의의 16진수 (hex) 색상 코드를 생성합니다. letters는 1..

자바스크립트에서 JSON의 키와 값을 다루는 다양한 메소드가 있습니다. 다음은 그 중 몇 가지를 정리하였습니다. Object.keys() Object.keys() 메소드는 객체의 키를 배열로 가져옵니다. JSON 객체의 키를 가져올 때 사용됩니다. const jsonObject = { name: "John Doe", age: 30, }; const keys = Object.keys(jsonObject); console.log(keys); 출력 : // [object Array] (2) ["name","age"] Object.values() Object.values() 메소드는 객체의 값을 배열로 가져옵니다. JSON 객체의 값을 가져올 때 사용됩니다. const jsonObject = { name: "J..

event.preventDefault() event.preventDefault() 메서드는 이벤트의 기본 동작을 취소하는 JavaScript 메서드입니다. 예를 들어 사용자가 필수 필드를 모두 작성하지 않고 양식을 제출하지 못하도록 이벤트의 기본 작업을 방지할 수 있습니다 e.preventDefault()다음은 이 방법을 사용하는 방법에 대한 몇 가지 예입니다 . 필수 필드를 모두 작성하지 않은 채 양식이 제출되는 것을 방지합니다. 링크를 따라가는 것을 방지합니다. 파일이 업로드되는 것을 방지합니다. 드래그 앤 드롭 작업이 완료되는 것을 방지합니다. [예제1] a태그 링크로 이동하는 기본동작을 방지 이동 $("#urlConnect").click(function(){ console.log(event); /..

출처 : 코딩애플 https://www.youtube.com/watch?v=v67LloZ1ieI 웹브라우저 동작원리 웹브라우저동작원리를 알아야하는 이유 : 자바스크립트를 해석하고 실행해주는 것이 브라우저 console.log(1+1) setTimeout(function(){ console.log(2+2) }, 1000) console.log(3+3) 보통 다른 언어에서는 1+1 , 1초쉬고 2+2 , 3+3 을하여 2,4,6 으로 실행되었을 것이다. 하지만 자바스크립트의 경우 위 출력 이미지와 같이 2,6,4로 출력되어 빠른거부터 실행해준다는 것을 눈치챌 수 있을것이다. 이것이 왜 그런지 아려면 브라우저 동작원리를 알면된다. 웹브라우저가 자바스크립트를 해석하는 원리가 있다. 이것을 그림으로 표현하자면 아..

Template literals 자바스크립트 Template literals는 ES6에서 도입된 새로운 문자열 표기법입니다. Template literals는 백틱(``)으로 시작하고 끝나는 문자열 리터럴입니다. 큰따옴표("")나 작은따옴표('')로 감싸는 기존 문자열 표기법과는 달리, 백틱으로 감싸면 문자열 내에서 줄바꿈(줄바꿈을 위해 \n을 사용할 필요가 없음)이나 특수문자를 그대로 표현할 수 있습니다. 백틱 내에서 변수나 표현식을 삽입할 수 있습니다. 문자열삽입 ES6 이전: const name = "John Doe"; const age = 30; console.log("Hello, " + name + "I am " + age + " years old."); 템플릿 리터럴을 사용하면 아래와 같이 더..

npm 정의 Node Package Manager의 약자로 Node.js로 만든 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있습니다. 즉 npm 은 'node.js 로 만들어진 프로그램을 쉽게 설치 등을 주는 것 ' 이라고 생각하시면 되겠습니다. npm 설치방법 (Node.js 설치) npm 은 node.js 의 패키지 관리자 이므로 npm 을 사용하기 위해서는 Node.js 를 설치해야 합니다. 1. Node.js 다운로드 Node.js 다운로드 링크 : https://nodejs.org/ko/download Node.js Node.js® is a JavaScript runtime built on Chrome's V..

SpeechSynesisUtterance Web Speech API의 SpeechSynesisUtterance 인터페이스는 음성 요청을 나타냅니다. 말할 텍스트, 언어, 음성 및 기타 음성 속성을 지정하는 데 사용됩니다. SpeechSynesisUtterance 개체에는 다음과 같은 속성이 있습니다. SpeechSynesisUtterance 속성 text: 말할 텍스트입니다. lang: 텍스트의 언어입니다. voice: 사용할 음성입니다. rate: 텍스트를 읽어야 하는 속도입니다. pitch: 음성의 높낮이를 나타내는 특성입니다. volume: 음성의 볼륨입니다. paused: 말하기가 일시 중지되었는지 여부입니다. onend: 말하기가 끝나면 시작되는 이벤트입니다. onerror: 음성 합성 중 오류..

마이크로 입력 받는 오디오를 녹음하는 방법 펌글 출처 : https://curryyou.tistory.com/446 [자바스크립트] 마이크 음성 소리 녹음 방법 : MediaRecorder 별도 라이브러리 없이, 자바스크립트만으로 마이크로 입력 받는 오디오를 녹음하는 방법을 정리한다. 대략 아래와 같은 순서로 진행하면 된다. 1. 마이크 소리 입력: MediaStream 2. 입력된 소리 녹 curryyou.tistory.com 시작/종료 녹음된 소리를 재생할 audio 엘리먼트 아래 코드는 jquery로 변경 + 시작버튼, 종료버튼 나눔 녹음시작 녹음종료 녹음된것확인하기 //화면이 모두 로딩된 다음 실행된다. $(document).ready(function () { const $audioEl = $("..