dev/javascript158 [javascript] 자바스크립트 이미지를 base64로 변환 참고: https://levelup.gitconnected.com/how-to-convert-image-to-base64-by-javascript-d110556de37f 이 포스트에서는 이미지를 base64로 변환하는 방법에 대해 알아보겠습니다. 먼저 자주 접할 수 있는 다음의 세 가지 시나리오에 대해 설명하겠습니다: url에서 가져온 이미지를 base64로 변환 로컬에서 선택한 이미지를 base64로 변환 클립보드의 이미지를 base64로 변환 url의 이미지를 base64로 변환 url 이미지를 base64로 변환하려면 먼저 이미지를 다운로드해야 합니다. 이미지가 로드되면 canvas 요소를 사용하여 캔버스에 이미지를 그리고 toDataURL() 메소드를 사용하여 이미지를 base64로 변환할 수 있.. 2023. 7. 4. [javascript] 자바스크립트 객체 루프 돌기 (for...in) 참고: https://flexiple.com/javascript/loop-through-object-javascript/ 코드를 작성하다 보면 나열 가능한 데이터 세트에서 루프 도는 작업을 해야할 때가 있습니다. 이 데이터 세트에는 배열, 리스트, 맵, 기타 객체 등이 있을 수 있습니다. 이 포스트에서는 자바스크립트를 사용하여 객체의 key/value 쌍에 대해 루프를 도는 4 가지 방법에 대해 알아보겠습니다. 객체 루프 방법 자바스크립트 객체의 루프를 도는 방법은 다양합니다: for...in loop 사용 Object.keys 메소드 Object.values 메소드 Object.entries 메소드 자바스크립트를 사용하여 객체의 루프를 도는 방법 자바스크립트에서 객체는 map(), forEach(), .. 2023. 6. 30. [javascript] 자바스크립트 Picture in Picture (PiP, 플로팅 동영상) 참고: https://www.educative.io/answers/what-is-picture-in-picture-in-javascript Picture-in-Picture(PiP)를 사용하면 동영상을 브라우저 외부 플로팅 창에서 볼 수 있으므로 다른 사이트나 프로그램을 실행하는 동안에도 영상을 계속 볼 수 있게됩니다. Picture-in-Picture 지원 확인 const isPiPSupported = 'pictureInPictureEnabled' in document; const isPiPEnabled = document.pictureInPictureEnabled; if (!isPiPSupported) { console.log('The Picture-in-Picture Web API is not av.. 2023. 6. 30. [javascript] 자바스크립트 첫글자 대문자로 (charAt, toUpperCase, slice) 참고: https://flexiple.com/javascript/javascript-capitalize-first-letter/ 이 포스트에서는 자바스크립트에서 문자열의 첫 글자를 대문자로 바꾸는 방법을 알아보겠습니다. 문자열의 첫 글자를 대문자로 자바스크립트에서 주어진 문자열의 첫 번째 글자를 대문자로 변경하려면 다음의 세 가지 함수를 사용해야 합니다: charAt() toUpperCase() slice() charAt(): charAt() 메소드는 문자열의 특정위치에 해당하는 문자를 리턴합니다. 문법: string.charAt(index) 예제: const str = 'sisiblog'; const str2 = str.charAt(0); console.log(str2); toUpperCase(): t.. 2023. 6. 30. [javascript] 자바스크립트 특정 위치의 문자 얻기 (charAt) 참고: https://www.scaler.com/topics/charat-in-javascript/ 자바스크립트 String 클래스의 charAt() 메소드는 문자열에서 지정된 인덱스의 특정 문자를 가져옵니다. String.charAt() 문법 자바스크립트의 charAt() 메소드의 문법은 다음과 같습니다: stringName.charAt(indexValue); 다른 메소드와 마찬가지로 위 구문에서 보이는 바와 같이 .(dot)을 사용하여 원하는 문자열에서 이 메소드를 실행해야 합니다. String.charAt() 매개변수 charAt() 메소드는 하나의 매개변수를 받습니다: indexValue: 원하는 문자의 인덱스로서 number 타입입니다. String.charAt() 리턴 값 자바스크립트 char.. 2023. 6. 29. [javascript] 자바스크립트 배열 초기화 참고: https://flexiple.com/javascript/clear-javascript-array/ 이 포스트에서는 자바스크립트를 사용하여 배열을 비우거나 지우는 여러 방법을 알아보겠습니다. 빈 배열로 대체 arry = [1, 2, 3, 4]; arry = []; console.log(arry); 이 방법은 지우려는 배열에 대한 참조가 없을 경우 잘 작동합니다. 또한 이 방법은 배열을 초기화하는 가장 빠르고 쉬운 방법입니다. 배열의 길이를 0으로 지정 arry = [1, 2, 3, 4]; arry.length = 0; console.log(arry); 배열의 길이를 나타내는 length 속성이 0으로 설정되면 모든 배열 요소는 자동으로 삭제됩니다. splice() 메소드 사용 splice()는 배.. 2023. 6. 27. [javascript] 자바스크립트 현재 시간 가져오기 (Date) 참고: https://flexiple.com/javascript/javascript-current-time/ 이 포스트에서는 자바스크립트에서 현재 시간을 가져오는 다양한 방법을 알아보겠습니다. Date 객체 자바스크립트에는 Date라는 내장 객체가 있습니다. 이를 사용하여 원하는 날짜와 시간을 얻을 수 있습니다. 먼저 Date 객체를 만드는 다양한 방법을 알아보겠습니다. Date 객체는 다음의 4 가지 방법으로 만들 수 있습니다: new Date() new Date(year, month, day, hours, minutes, seconds, milliseconds) new Date(milliseconds) new Date(date string) new Date() new Date() 구문은 현재 날짜와 .. 2023. 6. 27. [javascript] HTML에서 함수 호출 참고: https://flexiple.com/javascript/call-javascript-from-html/ 이 포스트에서는 HTML 파일에서 자바스크립트 함수를 호출하는 방법을 알아보겠습니다. 프로젝트에 따라 여러 방법 중 하나를 사용할 수 있습니다. HTML에서 자바스크립트를 사용하는 이유 HTML과 CSS는 웹 페이지에 정적 정보를 표시하기에 좋지만 자바스크립트를 사용하면 페이지를 대화형으로 만들 수 있습니다. 자바스크립트를 사용하면 사용자가 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등과 같은 복잡한 기능을 웹 페이지에 구현할 수 있습니다. 이제 HTML 페이지에서 자바스크립트 함수를 호출하는 여러 방법을 알아보겠습니다. script 태그 사용 HTML 코드에 바로 .. 2023. 6. 26. [javascript] 자바스크립트 instanceof 연산자 참고: https://flexiple.com/javascript/instanceof-javascript/ 이 포스트에서는 instanceof 연산자를 알아보고 예제를 통해 실제로 수행되는 작업을 확인해 보겠습니다. instanceof 란? 자바스크립트의 instanceof 연산자는 런타임에서 객체의 타입을 확인하기 위해 사용합니다. 이는 불린 값(true 또는 false)을 리턴합니다. 리턴된 값이 true면 객체가 특정 클래스의 인스턴스임을 나타내고, 리턴된 값이 false면 특정 클래스의 인스턴스가 아님을 나타냅니다. 문법과 설명 문법: var myVar = objectName instanceof objectType 매개변수: objectName: 객체의 변수명을 나타냅니다. 예제: var fruit.. 2023. 6. 26. [javascript] 자바스크립트 onmouseout 이벤트 참고: https://www.educba.com/javascript-onmouseout/ 자바스크립트의 onmouseout 이벤트는 요소의 영역에서 마우스 커서가 나가면 특정 작업을 수행하고, 특정 구문을 실행하고, 함수를 호출하는 자바스크립트 이벤트입니다. 해당 이벤트를 사용 중인 요소의 자식 요소는 상위 요소에 정의된 이 이벤트의 영향을 받지 않습니다. 이 이벤트는 마우스 커서가 요소 영역안쪽으로 이동할 때 호출되는 onmouseover 이벤트와 함께 자주 사용됩니다. onmouseout 이벤트는 mouseout 이벤트를 실행하는 GlobalEventHandlers mixing에서 제공하는 이벤트 핸들러 속성입니다. onmouseout 문법 다음 구문은 onmouseout 이벤트를 호출하는 방법과 전.. 2023. 6. 23. [javascript] 자바스크립트 onmouseover 이벤트 참고: https://www.scaler.com/topics/javascript-mouseover/ 자바스크립트의 onmouseover 이벤트는 마우스 커서가 HTML 요소 위로 이동하면 활성화됩니다. onmouseover 이벤트는 사용자가 요소를 클릭하거나 커서가 요소를 벗어나면 활성화되지 않습니다. 예를 들어 onmouseover 이벤트는 사용자가 링크 위로 마우스를 가져갈 때마다 하이퍼링크를 강조 표시하는 데 사용할 수 있습니다. 자바스크립트 onmouseover 이벤트 문법 onmouseover 이벤트의 문법은 세 가지 종류가 있습니다: 1. HTML 에서 HTML에서 onmouseover 이벤트를 정의하려면 요소의 속성에 [onmouseover="function_name"] 구문을 추가하면 됩니.. 2023. 6. 23. [javascript] 자바스크립트 문자열을 JSON으로 변환 (JSON.parse) 참고: https://www.udacity.com/blog/2021/02/javascript-json-parse.html JSON 파싱은 문자열 형태의 JSON을 프로그램 내에서 사용할 수 있는 자바스크립트 객체로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 JavaScript standard에서 지정한 JSON.parse() 메소드를 사용하는 것 입니다. JSON.parse()는 JSON 객체를 자바스크립트 문자열로 변환하는 JSON.stringify()의 반대 메소드 입니다. JSON.parse() 사용 방법 자바스크립트 프로그램은 다양한 소스에서 JSON 객체를 읽을 수 있지만 가장 일반적인 소스는 데이터베이스 또는 REST API입니다. 이러한 소스에서 읽은 JSON 객체는 객체.. 2023. 6. 22. [javascript] 자바스크립트 JSON을 문자열로 변환 (JSON.stringify) 참고: https://www.udacity.com/blog/2021/04/javascript-json-stringify.html JSON stringify는 자바스크립트 객체를 코드 내에서 사용할 수 있는 일반 문자열로 변환하는 프로세스입니다. 자바스크립트에서 이를 수행하는 방법은 JavaScript standard에서 지정한 대로 JSON.stringify() 메소드를 사용하는 것 입니다. JSON.stringify()는 JSON 문자열을 자바스크립트 객체로 변환하는 JSON.parse()의 반대 메소드 입니다. JSON.stringify() 사용 방법 데이터베이스, REST API 및 기타 데이터 저장소에는 일반적으로 자바스크립트를 해석하는 기능이 없습니다. 따라서 해당 자바스크립트 객체를 다른 프로.. 2023. 6. 22. [javascript] 자바스크립트 페이지 인쇄 (window.print) 참고: https://www.codexworld.com/print-page-area-javascript/ 브라우저의 인쇄 메뉴는 웹 페이지의 콘텐츠를 인쇄하는 데 사용합니다. 이는 기본적으로 전체 페이지 콘텐츠가 선택되어 브라우저에서 인쇄됩니다. 브라우저의 인쇄 메뉴에서는 인쇄를 하기 위해 웹 페이지의 특정 섹션을 선택할 수 없습니다. 웹 페이지의 특정 영역을 인쇄하려면 클라이언트 측 또는 서버 측 코드의 도움을 받아야 합니다. 웹 애플리케이션의 인쇄 기능을 통해 오프라인에서 사용하기 위한 웹 페이지의 내용을 인쇄할 수 있습니다. 웹 페이지 콘텐츠를 인쇄할 수 있는 다양한 jQuery 플러그인도 있지만 외부 플러그인을 사용하지 않으려면 JavaScript로 이 기능을 구현할 수 있습니다. JavaScri.. 2023. 6. 22. [javascript] CSS 이미지 필터 (image filters) 참고: https://levelup.gitconnected.com/css-image-filters-e549271864f7 "필터" 라는 단어를 들으면 가장 먼저 떠오르는 것은 인스타그램 필터일 것 입니다. 아니면 당신을 코첼라 가는 강아지로 바꿔주는 스냅쳇 필터일 것 입니다. 이 포스트에서는 CSS를 사용하여 앱의 이미지에 매혹적이고 세련된 효과를 줄 수 있는 filter 속성에 대해 알아보겠습니다. 사용할 수 있는 필터는 다음 10 가지 입니다: grayscale() sepia() blur() invert() opacity() saturate() contrast() brightness() hue-rotate() drop-shadow() 위의 모든 메소드에서 Chrome 이나 Safari의 경우 -web.. 2023. 6. 21. [javascript] 자바스크립트 배열 생성 (array) 참고: https://www.freecodecamp.org/news/how-to-create-an-array-in-javascript/ 배열은 정렬된 요소의 목록을 저장하는 데이터 구조입니다. 이 포스트에서는 JavaScript를 사용하여 배열을 생성하는 세 가지 방법을 알아보겠습니다. 또한 split() 메소드를 사용하여 문자열에서 배열을 만드는 방법도 알아보겠습니다. 할당 연산자를 사용하여 자바스크립트 배열을 만드는 방법 자바스크립트로 배열을 만드는 가장 일반적인 방법은 다음과 같이 해당 배열을 변수에 할당하는 것 입니다: const books = ["The Great Gatsby", "War and Peace", "Hamlet", "Moby Dick"]; 배열을 console.log()로 출력해보면.. 2023. 6. 15. [javascript] 자바스크립트 마우스 이벤트 (mouse event) 참고: https://www.educba.com/javascript-mouse-events/ 이 포스트에서는 JavaScript의 마우스 이벤트에 대해 알아보겠습니다. 마우스 이벤트는 mouseEvent 객체에 등록된 html 요소와 마우스가 상호작용했을 때 발생하는 이벤트입니다. mouse click, mouse over, mouse out 등과 같이 마우스와 관련된 다양한 이벤트가 존재합니다. 마우스 이벤트가 생성될 때 마다 일부 동작이 브라우저에서 수행됩니다. 마우스 이벤트를 처리하기 위해 수행하는 동작과 마우스 이벤트를 처리하는 프로세스를 마우스 이벤트 핸들러라고 합니다. 자바스크립트의 마우스 이벤트 타입 click: 마우스가 등록된 요소를 클릭했을 때 발생합니다. 이벤트 핸들러의 이름은 oncl.. 2023. 6. 12. [javascript] 자바스크립트 localStroage 참고: https://blog.bitsrc.io/how-to-use-localstorage-in-javascript-an-easy-guide-91aad566e4de Web Storage API는 브라우저에 정보를 저장하는 두 가지 메커니즘으로 sessionStorage와 localStorage를 제공합니다. sessionStorage는 localStorage와 매우 비슷하게 동작하지만 사용자 세션이 끝날 때 까지만 데이터를 유지하는 차이점이 있습니다. 즉 페이지가 닫히거나 리로드되면 데이터가 날아갑니다. localStorage는 브라우저를 닫았다가 다시 열어도 저장한 데이터를 유지합니다. 이를 이용하면 사용자 인터페이스를 더 간단하게 만들 수 있습니다. 하지만 이는 중요한 데이터를 저장하기 위함이 아님을.. 2023. 6. 8. [javascript] 자바스크립트 전체 화면 (Fullscreen API) 참고: https://www.tutorialspoint.com/how-to-create-fullscreen-api-using-javascript Fullscreen API는 사용자에게 전체 화면 표시를 요청하고 원할 때 전체 화면을 종료할 수 있게 하는 브라우저 API입니다. Fullscreen API를 사용하는 방법은 간단합니다. 먼저 사용 중인 브라우저가 Fullscreen API를 지원하는지 확인해야 합니다. 코드로 확인하는 방법은 document 객체에 Fullscreen API의 enabled 속성이 있는지 확인하는 것 입니다. 브라우저가 Fullscreen API를 지원하지 않는 경우에도 새 브라우저 창 열기와 같은 방법으로 전체 화면을 제공할 수 있습니다. 브라우저가 Fullscreen AP.. 2023. 6. 8. [javascript] HTML 제곱 지수 위첨자 (sup) 참고: https://www.scaler.com/topics/superscipt-in-html/ HTML의 태그는 텍스트를 위첨자로 만듭니다. 위첨자는 텍스트의 중심 선 위에 표시되는 텍스트로 더 작은 크기로 렌더링됩니다. 예: 23, 5th 등 문법 text 태그를 사용하려면 위첨자로 만들고 싶은 텍스트를 , 로 감싸면됩니다. 예제: Class 9th 위와 같이 입력하면 아래와 같이 렌더링됩니다. 속성 태그는 고유한 속성을 가지지는 않고 글로벌 속성을 따릅니다. HTML의 superscript인 는 타이포그라피 표준을 준수합니다. 이는 일반적으로 서수, 지수, 위첨자를 표시할 때 사용합니다. 사용 방법 태그의 적절한 사용 범위는 다음과 같습니다: a2과 같은 지수를 표시할 때 위첨자로 사용할 때: Al.. 2023. 6. 8. 이전 1 2 3 4 ··· 8 다음
