JavaScript209 [ JavaScript ] 테이블 행 값 가져오기 안녕하세요! 오늘은 자바스크립트의 rows collection과 cells collection을 이용하여 클릭 된 행의 값을 가져와보겠습니다. 우선 자바스크립트 코드와 함께 사용할 html 과 css 코드를 작성해보겠습니다. row_value.html 번호 이름 나이 지역 점수 1 김ㅇㅇ 40 경기도 75 2 이ㅇㅇ 24 충청남도 85 3 박ㅇㅇ 26 전라북도 90 getRowValue.js function rowClicked() { var table =document.getElementById('testTable'); var rowList = table.rows; // *1)rows collection for (i=1; i 2022. 8. 31. [JavaScript] 파일 드래그 앤 드롭하기 안녕하세요. 자바스크립트를 이용해서 파일 드래그 앤 드롭을 구현해보겠습니다. html 이곳에 파일을 끌어놓으세요. css .file_box { border: 2px solid rgb(13 110 253 / 25%); border-radius: 10px; margin-top: 20px; padding: 40px; text-align: center; } javascript const dropbox = document.querySelector('.file_box'); const input_filename = document.querySelector('.file_name'); //박스 안에 drag 하고 있을 때 dropbox.addEventListener('dragover', function (e) { e.p.. 2022. 8. 22. [JavaScript] 현재 브라우저가 실행되고 있는 운영체제 이름을 가져오기 안녕하세요! 오늘은 navigator 객체의 platform 속성을 사용해 현재 브라우저가 실행되고 있는 운영체제 이름을 출력해보려고 합니다. navigator 객체의 platform 속성은 현재 브라우저가 실행되고 있는 운영체제를 식별하는 문자열을 반환합니다. (예: "MacIntel", "Win32", "Linux x86_64", "Linux x86_64"). * 결과 * 코드 2022. 8. 18. [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. 이전 1 ··· 14 15 16 17 18 19 20 ··· 24 다음
