본문 바로가기

JavaScript224

[Javascript] 작업 시간 측정하기 오늘은 두 가지 방법으로 Javascript에서 작업시간을 측정해보겠습니다. 첫번째 방법은 performance.now() 를 사용하는 방법입니다. 예시 코드입니다. let startTime = performance.now(); // 측정 시작 console.log('측정 시작.'); let sum = 0; for (let i = 1; i 2022. 8. 5.
[javascript] url 형식 체크하기 입력받은 문자열이 url 형식인지 확인하는 함수를 만들어보겠습니다. http:// 또는 https://로 시작하고, 이후에 띄어쓰기를 제외한 3글자 이상이 있어야 한다는 조건의 정규식을 통해 형식을 체크해보겠습니다. function checkUrl(strUrl) { let expUrl = /^http[s]?:\/\/([\S]{3,})/i; return expUrl.test(strUrl); } strUrl이 url 형식에 맞다면 true, 맞지 않으면 false를 리턴하는 함수입니다. 다음과 같이 함수를 사용할 수 있습니다. str = "http://www.google.com"; if (!checkUrl(str)) { alert("url 형식에 맞지 않습니다"); } 2022. 7. 25.
[ JavaScript ] 자바스크립트로 button과 textarea 활성화, 비활성화를 해보기 * 결과 * 간단한 설명 요소의 disabled 속성이 true 가 된다면 해당 요소가 비활성화됩니다. 반대로 요소의 disabled 속성이 false가 된다면 해당 요소가 활성화됩니다. 다양한 요소에 적용해볼 수 있습니다 :) * 전체 코드 A버튼 A버튼을 비활성화하기 B textarea B textarea를 비활성화하기 2022. 7. 24.
[JavaScript] find 함수에 대해 알아보고 네이버지도 api 에서 사용해보기 안녕하세요. 오늘은 자바스크립트의 find 함수에 대해 알아보고 네이버지도 api 에서 사용해보겠습니다. find() 함수는 배열 내에서 조건을 만족하는 첫번째 요소의 값을 찾아서 반환하는 함수입니다. 조건을 만족하는 요소가 없다면 undefined 를 반환합니다. find 함수의 구문은 아래와 같습니다. arr.find(callbackFunction(element, index, array), thisArg) find 함수의 매개변수는 callbackFunction, 그리고 thisArg 입니다. callbackFunction 에는 3개의 매개변수를 사용할 수 있습니다. - element : 현재 요소 (필수) - index : 요소의 인덱스 (선택) - array : find 함수를 호출한 배열 (선택.. 2022. 7. 21.
[JavaScript] Video.js 로 m3u8 파일 재생하기 먼저 ffmpeg 프로그램으로 m3u8 파일과 ts 파일을 생성해줍니다. ffmpeg -i test.mp4 -vcodec libx264 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls test.m3u8 인코딩 옵션은 공식 홈페이지에서 확인할 수 있습니다. http://ffmpeg.org/ffmpeg-all.html#hls-2 ffmpeg Documentation ffmpeg.org cdn으로 video.js 라이브러리를 참조하고 src="" 이 부분에 m3u8 파일의 경로를 적어줍니다. 결과 cdn은 이 사이트에서 복사할 수 있습니다. https://cdnjs.com/libraries/video.js video.js - Libraries - cdnjs - T.. 2022. 7. 16.
[javascript] 숫자 입력하면 전화번호 형식으로 표현해주기 01012341234 식으로 input에 숫자를 입력하면, 010-1234-1234로 input 값이 자동으로 표시되도록 해보겠습니다. input에 입력한 값을 바꿔줄 때에는 정규식을 사용합니다. 아래는 자동으로 input 입력값을 바꿔주는 함수입니다. function oninputPhone(target) { target.value = target.value .replace(/[^0-9]/g, '') .replace(/(^02.{0}|^01.{1}|[0-9]{3,4})([0-9]{3,4})([0-9]{4})/g, "$1-$2-$3"); } 함수를 적용하고 싶다면 다음과 같이 하면 됩니다. 아래는 oninputPhone함수가 적용된 input입니다. 2022. 7. 10.
[ javascript ] history 객체를 사용하여 이전 페이지로 돌아가기 안녕하세요 이번 시간에는 자바스크립트 객체인 history 객체의 back()메소드를 사용하여 이전 페이지로 돌아가기 기능을 만들어보겠습니다. * 결과 * 소스코드 [ front.html ] 안녕하세요! 다음 페이지로 이동하기 [ back.html ] 반갑습니다! 뒤로가기 2022. 7. 9.
[Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. 먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다. https://www.ncloud.com/product/applicationService/maps NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com Application 등록을 누르면 Application 이름을 설정하고, Service 선택 및 서비스 환경 등록하는 페이지로 이동합니다... 2022. 7. 6.
[JavaScript] Full-calendar 커스텀하기 full-calendar 이전 포스팅 https://stickode.tistory.com/484 [JavaScript] Full-calendar 사용하기 안녕하세요. 자바스크립트로 full-calendar를 불러오는 방법을 알아보겠습니다. https://fullcalendar.io/docs/initialize-globals Initialize with Script Tags - Docs | FullCalendar It’s possible to manuall.. stickode.tistory.com 안녕하세요. Full-calendar 사용하기에 이어 커스텀을 한 번 해보겠습니다. 1. 캘린더 상단 June 2022 => 2022년 6월 2. 일요일 시작 => 월요일 시작 3. 토요일, 일요일 색깔 각각 파.. 2022. 7. 1.

티스토리툴바