Skeleton의 세상

Method Description getFullYear() Get the year as a four digit number (yyyy) getMonth() Get the month as a number (0-11) getDate() Get the day as a number (1-31) getHours() Get the hour (0-23) getMinutes() Get the minute (0-59) getSeconds() Get the second (0-59) getMilliseconds() Get the millisecond (0-999) getTime() Get the time (milliseconds since January 1, 1970) getDay() Get the weekday as a ..

CSS가 아닌 스크립트로 스타일 변경하는 방법을 한번 알아봅시다 blue red 이러한 HTML 코드가 있다고 가정해봅시다. CSS는 적용되어 있지 않습니다. 그럼 아무것도 없는것처럼 빈 공간만 있겠죠? 이제 자바스크립트를 통해 스타일을 넣어봅시다 const styleBlue = document.getElementById('blue'); const styleRed = document.getElementById('red'); 이렇게 요소를 가져옵니다 styleBlue.style.height = '50px'; styleBlue.style.backgroundColor = 'blue'; styleRed.style.height = '50px'; styleRed.style.backgroundColor = 'red'..

1. replace 사용법은 간단합니다 const Text = '안녕하세요\n이건\nTextArea에서\n작성된\n글입니다'; const empty = Text.replace('\n', ' '); console.log(empty); // 결과 // 안녕하세요 이건\nTextArea에서\n작성된\n글입니다 const br = Text.replace('\n', ' '); // 결과 // 안녕하세요 이건\nTextArea에서\n작성된\n글입니다 위의 코드와 같이 처음으로 발견된 문자열을 다음 인자값으로 교체해 줍니다. 그렇다면 전체를 바꾸어 주려면 어떻게 해야할까요? 아래와 같이 작성하시면 됩니다. 2. replaceAll const Text = '안녕하세요\n이건\nTextArea에서\n작성된\n글입니다';..

뷰포트에 대하여 한번 알아볼까요 뷰포트는 각각의 기기에 따라 환경을 설정해줍니다. 만약 뷰포트를 사용하지 않으면 PC의 화면이 모바일 화면 안에 모두 들어가려고하면서 글자, 이미지 등이 전부 작아져서 눈으로 보기 힘듭니다. 아래의 값처럼 설정을 통하여 간단하게 설정해줄 수 있습니다. width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다. minimum-scale : 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다. maximum-scale : 늘릴..

html파일에는 이와 같이 작성해 줍니다 Start Recording Play Download 그리고 js파일을 하나 만들어줍니다. 저는 main이라고 이름을 지었고 경로설정하는 방법은 따로 설명하지 않겠습니다. 위에 src를 이용하여 접근 합니다~ main.js var mediaSource = new MediaSource(); mediaSource.addEventListener('sourceopen', handleSourceOpen, false); var mediaRecorder;var recordedBlobs;var sourceBuffer; var gumVideo = document.querySelector('video#gum');var recordedVideo = document.querySelec..

async 함수와 함수 내에서 쓰이는 await 구문은 항상 함께 다닙니다. async 함수() { await 구문 } 이렇게 쓰이는데 이 방법은 await 뒤에 쓰여있는 작업이 완료될때까지 다음 코드로 넘어가지 않고 완료될때까지 기다립니다. 대부분은 서버와 통신이 필요한 작업에서 많이 사용됩니다 크게 알아야 할 부분은 없고 기다려서 결과값이 나오면 다음으로 이동한다. 라고 생각하면 아주아주 쉽게 이해하고 기억할 수 있습니다

비동기를 처리하기위해 Promise객체가 만들어 졌습니다. 완료되면 하나의 값을 결과로 반환하는데, 실패하게되면 정상적으로 처리되었을때의 값 대신 실패한 이유를 반환해 줄 수 도 있습니다. Promise는 세가지의 상태를 나타냅니다 1. 대기중(pending) - 아직 처리가 완료되지 않은 상태입니다. 2. 이행됨(fulfilled) - 비동기 처리가 성공적으로 완료되어 결과 값이 나온 상태입니다. 3. 거부됨(rejected) - 비동기 처리가 실패한 상태입니다. Promise는 두가지의 메서드를 가지는데 1. then (onFulfilled, onReject) - 성공하였을때 호출될 함수를 정의 합니다. 첫번째 인자(onFulfilled)에는 성공적으로 이행되었을때 호출되고 두번째 인자(onRecje..

1. setTimeout 글로벌 객체에 내장된 메서드입니다. 따로 선언하지 않아도 바로 호출하여 사용이 가능합니다. setTimeout(function () { console.log('1초 후에 시작'); }, 1000); setTimeout(함수, 지연시간) 지연 시간은 1000에 1초 입니다. 2. setInterval 글로벌 객체에 내장된 메서드입니다. 이또한 따로 선언하지 않아도 바로 호출하여 사용이 가능합니다. setInterval은 일정 시간마다 계속해서 실행이 됩니다. const timer = setInterval(() => { console.log('1초마다 동작중입니다'); }, 1000); 이렇게 사용이 가능하고, 이걸 중지하고 싶다면 어떻게 해야할까요? clearInterval 메서드..

javascript의 반복문중 하나인 for-of 에 대하여 알아보려합니다 for-of는 반복이 가능한 객체를 반복실행 시켜줍니다. 바로 코드를 통해서 한번 알아보도록 하죠! const str = 'hello'; const arr = ['사과', '배', '오렌지']; 1. for (const t of str) { console.log(t); } 2. for (const t of arr) { console.log(t); } 위와 같은 코드를 만들었다고 가정해봅시다 먼저 string은 반복이 가능한 객체로 인식이 됩니다. 그래서 반복문을 통해서 뽑아낼 수 있죠 1번의 경우 각 결과는 h, e, l, l, o 이렇게 각각 콘솔에 표시가 될겁니다. 이유는 위에 설명이 그 이유입니다. 2번의 경우 각 결과는 '..

정규표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어 입니다. 1. 플래그 g (global) : 전역 범위에서 해당하는 모든 문자를 찾습니다. i (case insensitive) : 대소문자 구분을 하지 않습니다. m (multiline) : ^와 $문자와 같이 비교를 하는데 다중 행에서 ^와 $ 문자는 각각 문자열의 처음과 끝을 의미합니다. y (sticky) : 문자열에 lastIndex 속성을 설정 하고나면 그 index부터 일치하는 문자를 찾습니다 2. 문자 클래스 \w : A-Z,a-z,0-9,_ 을 확인합니다 \W : 일치하지 않는 문자들을 확인합니다 \d : 임의의 숫자와 일치 여부를 확인합니다 \D : 숫자가 아닌 모든 문자를 확인합니다 \s : 공백 문자(공..