동해둘리의 IT Study

javascript undefined 와 null 자바스크립트로 작업을 하는경우, 사용자의 입력값을 확인하는 등의 작업을 할때 간혹 마주치는 것이 undefined 와 null 입니다. typeof 로 확인가능 특정 객체의 undefined 또는 Null 유무는 typeof 로 확인이 가능합니다. javascript 의 typeof 는 아래와 같은 형식으로 사용하면 됩니다. 1 2 3 4 5 6 7 8 9 10 11 var num = 42; var str = "Hello"; var bool = true; var obj = { key: "value" }; var func = function() { }; console.log(typeof num); // 출력: "number" console.log(typeo..

IT공부방/jQuery, ajax, java 2023. 8. 25. 09:24

javascript 동적생성, 입력폼 input 박스 아래와 같이 설문조사를 위한 등록화면에서, 설문조사 항목을 동적으로 생성하는 프로젝트를 진행하게 되어 작업내역을 공개하려고 합니다. 설문조사 항목 동적생성 위 화면에서 '선택형' 또는 '입력형' 을 선택한 후에 + 버튼을 클릭하면, 아래와 같이 설문조사 항목을 입력할 수 있는 입력폼이 동적으로 생성되게 됩니다. 각 질문은 삭제가 가능하며, 선택가능한 항목도 추가 삭제가 가능하게 만들어 봤습니다. 각 선택항목은 위/아래 화살표를 이용하여 위치이동이 가능하도록 만들어 봤습니다. 먼저, 설문조사 항목이 동적으로 추가될 div 를 생성합니다. 1 cs 그런후에 '선택형' 또는 '입력형'을 선택하고 + 버튼을 클릭하면 앞서 정의한 DIV인 question_bo..

IT공부방/jQuery, ajax, java 2023. 8. 14. 14:02

jquery를 이용하여 테이블소팅/ 테이블정렬 jquery를 이용하여 테이블을 소팅하는 코드입니다. 상단 제목 부분을 클릭하면 해당 항목을 기준으로 정렬되어 표시됩니다. 배열에 대한 이해가 있으시다면 이해하기 쉬우실 꺼에요. comparator 함수가 값을 비교하여 결과를 전달하면, rows 라는 array에 값을 넣어놓고 reverse()함수를 이용하여 배열내의 값을 정렬하는 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 6..

IT공부방/jQuery, ajax, java 2023. 6. 19. 11:43

javascript 로 시계를 만드는 코드입니다. 가장 기본적인 시계를 만드는 코드먼저 살펴볼께요 getHours() , getMinutes(), getSeconds() 함수로 현재 시간을 읽어와서 setTimeout() 함수로 1초마다 업데이트 해주면 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 #clock { font-family: 'Arial', sans-serif; font-size: 48px; text-align: center; margin-top: 100px; } function updateClock() { var now = new Date(); v..

IT공부방/jQuery, ajax, java 2023. 6. 17. 06:03

크롬화면 녹화하기 크롬화면을 녹화하는 방법을 찾아보면, 대부분 크롬 브라우저용 확장프로그램을 설치하도록 되어있습니다. 개인적으로 사용할때는 별 문제 없지만 외주작업등을 할때는 아무래도 거추장 스럽죠 jQuery 나 javascript 로 녹화할 수는 없을까? 특정 웹사이트에 접속했을 때, 녹화 버튼을 누르면 바로 녹화할 수 있는 방법은 없을까요? jQuery 나 javascript 로 구현할 수 있는 방법은 없을까요? 사용자에게 확장프로그램을 설치하라고 하지 않고 가능한 방법은 없을까요? WebRTC 를 이용하면 가능합니다 WebRTC 는 웹상에서 브라우저 화면을 공유하기 위해 만들어진 규약입니다. 크롬 브라우저를 비롯한 최근 버전의 브라우저는 WebRTC 를 지원하기 때문에 가능합니다 바로 확인 가능한..

IT공부방/jQuery, ajax, java 2021. 4. 9. 12:23

화상채팅 / 실시간화상회의 솔루션 코로나 여파로 화상채팅/ 화상회의 솔루션을 이용한 온라인 수업을 실시하는 학교와 기관이 늘어나고 있습니다. 줌(ZOOM) 을 이용하거나 구글미트(Google meet) 등의 솔루션을 이용하는 경우가 많은데요, 많은 사람들이 접속하다 보니 간혹 접속오류가 발생하는 경우가 많습니다. 내 마음대로 바꾸기 어려운 줌(Zoom) 과 구글미트(Google Meet) 줌(ZOOM) 이나 구글미트(Google Meet) 를 이용할 경우, 접속오류 외에도 또 한가지 아쉬운 점이 있습니다. 바로 내 마음대로 커스터마이징을 하지 못한다는 것입니다. 화상회의 솔루션을 직접 만들어보자 화상회의 솔루션을 직접 만든다면 내 마음대로 커스터마이징이 가능하겠지만, 그러기에는 많은 어려움이 있습니다. ..

IT공부방/jQuery, ajax, java 2020. 9. 6. 10:14

팝업창을 열고 난 후, 팝업창이 닫힐때 이벤트 팝업창을 열고 난 후 해당 팝업창이 닫힐때 이벤트를 처리해야 되는 경우가 있습니다. 예를 들어 메인에서 바코드를 입력받는 경우 팝업창이 열리게 되면 바코드 입력란이 포커스를 잃게되기 때문에 팝업창이 닫히게 되면 다시 포커스를 설정해 주어야 합니다. 메인에서 처리하기/ 팝업창에서 처리하기 두가지 방법으로 처리할 수 있겠는데요, 팝업창 내에서 onunload() 이벤트를 잡아서 처리하는 방법이 있고, 메인에서 팝업창을 열때 핸들러를 이용하는 방법이 있습니다 아래와 같이 window.open 으로 팝업을 띄울 때 핸들러를 받을 수 가 있는데요. 이 핸들어의 onbeforeunload() 이벤트를 잡아서 원하는 동작 (예를 들어 포커스를 설정)을 하면 되겠습니다 1..

IT공부방/jQuery, ajax, java 2020. 7. 18. 17:44

이미지변경시 이미지 클릭하면 파일선택창 바로 띄우기 이미지를 변경하고자 할때, input 태그를 사용하면 화면에 파일선택바가 나타나게 되는데요, 아래의 빨간색 부분과 같이 해당 이미지를 클릭하면 바로 파일선택창이 뜨도록 하고 싶을때가 있습니다 즉, 아래와 같이 동작하게 하고 싶은경우 입니다 전체 코드는 다음과 같습니다. 간략하게 설명드리면 우선, id가 target_img인 부분이 변경하고자 하는 이미지 입니다. 그 이미지가 클릭될 경우 태그 내에 있는 target_url 부분에 선택된 이미지 URL 을 세팅하고, 파일태그에 클릭이벤트를 발생시키는 겁니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $('#target_img').click(function (e)..

IT공부방/jQuery, ajax, java 2020. 7. 8. 09:51

사용자로부터 이미지/ 사진을 업로드 받아서 처리해야 할 때, 이미지/ 사진의 크기가 너무 큰 경우 화면에 전부 뿌려주기도 불편하거니와 서버에 업로드 할 경우 용량때문에 서버에 부하를 주게됩니다. 이미지 실제크기를 변경하는 방법이 있습니다 아래 이미지는 6455x2709px 의 아주 큰 이미지 입니다. 이런 이미지를 업로드 할 경우, 원하는 크기로 사이즈를 조정한 다음에 화면에 표시하거나 서버에 업로드 할 수 있습니다. 물론, 이미지 크기를 변경하는 방법은 여러가지가 있을 수 있겠지만, 이번에 알아볼 사항은 HTML5에서 제공하는 canvas 를 이용하여 이미지크기/사진크기를 변경하는 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2..

IT공부방/jQuery, ajax, java 2019. 9. 3. 09:44

내 소스를 보호하라 HTML 소스보호를 위한 조치의 하나로 특수키를 차단한다거나 복사를 금지하고, 컨트롤키, Alt키 등의 입력을 차단하는 경우가 있습니다. 물론, 여러가지 다양한 방법으로 소스를 훔쳐가는 행위를 100% 차단하기란 어려운 일이긴 합니다만, 기본적인 보안조치에 해당하는 특수키차단, 컨트롤키 차단을 살펴보려고 합니다. keydown 이벤트를 활용합니다 특수키 차단은 의외로 간단하게 구현할 수 있습니다. 왜냐하면 모든 동작이 키보드를 통해 발생하기 때문에 키보드의 이벤트 하나만 잡아서 처리하면 됩니다. $(window).on("keydown", function (e) { if (e.keyCode == 17 || e.keyCode == 18 || e.keyCode == 27 || (e.keyC..

IT공부방/jQuery, ajax, java 2019. 8. 16. 08:29

팝업창을 사용하여 어떤 정보를 표출할 때, 해당 팝업창에서 사용자 입력 등의 특정 작업이 끝나기 전에 다른 창으로 이동을 막고 싶은 경우가 있습니다. 예를들어 온라인으로 시험을 본다거나, 퀴즈를 푸는데 다른 브라우저를 띄워 검색하는것을 막고 싶은 경우 등입니다. 윈도우가 포커스를 잃을때를 잡으면 됩니다 function ShowTestRoom() { window.open("./testpage.html", 'TEST', 'height=700,width=1000,top=0,left=0, fullscreen=yes'); } 우선, 위와 같이 [창 띄우기] 라는 페이지를 만들고, 버튼 클릭시 새로운 창이 뜨게 만들었습니다. DOCTYPE html> 본 페이지는 포커스를 잃게되면 자동으로 닫힙니다 $(window)..

IT공부방/jQuery, ajax, java 2019. 8. 14. 10:58

javascript실행순서, 애니메이션 실행순서 javascript 는 코딩된 라인 순서대로 실행되는게 원칙이지만, 간혹, 앞서 기입한 명령이나 함수의 실행이 끝나기도 전에 다음 번 라인이 실행되는 경우가 있습니다. 아래 코드를 실행시키면, $("p").hide(1000); 이 라인이 실행된 후에 alert("숨기기 완료"); 이 라인이 실행되는 순서로 되어있지만, 실제로는 $("p").hide(1000); 의 실행이 시작되자 마자 alert() 함수가 실행되게 됩니다. 마치, 윈도우에서 여러 프로그램을 실행시킬때 쓰레드를 사용하는것 처럼, javascript 도 여러줄의 명령이 실행되는 경우 실행되는 순서는 지키지만 앞선 라인의 실행이 끝난는지는 상관하지 않게됩니다. 숨기기 동해물과 백두산이 예를들어,..

IT공부방/jQuery, ajax, java 2019. 8. 5. 17:22

화면에 보이는거와 달리 내 맘대로 출력을 변환한다? 화면에 보여지는 웹사이트의 내용을 출력하기위해서 사용자가 인쇄버튼을 클릭한 경우에, 특정한 처리를 해야할 필요가 있는 경우가 있습니다. 사용자는 화면에 보이는 내용을 출력하기위해 인쇄버튼을 클릭했지만, 화면 그대로 출력하게 되면 대부분 한 페이지를 벗어나거나 프레임간의 간섭등의 오류가 생기기 쉽습니다. 그래서, 사용자가 인쇄버튼을 클릭했을때, 특정 프레임 또는 특정 DIV 의 내용만 출력하고 싶거나, 인쇄될 내용을 특정 형식에 맞게 변환하고 싶은경우에 사용할 수 있는 이벤트가 있습니다. 이벤트 발생시 화면내용을 특정 DIV 내용으로 변환하여 출력시키기 위와 같이 onbeforeprint 이벤트를 사용하면 사용자가 출력을 시도할때 이벤트를 잡아낼 수 있습..

IT공부방/jQuery, ajax, java 2019. 7. 31. 16:20

웹사이트를 개발할때, 이미지로딩/ 동영상로딩 등이 완료된 이후에 특정 함수를 실행해야 하는 경우가 있습니다. 이때, 사용할 수 있는 이벤트가 document.ready / window.load 가 있는데요, 두개는 비슷한 동작을 하지만, 엄격히 다른 기준에 따라 실행이 됩니다. document.ready 먼저, document.ready 는 페이지내의 모든 DOM 요소들이 로딩되었을때 실행이 됩니다. 즉, 페이지 내에 img 태그가 있을경우, img 태그 객체가 로딩되면 document.ready 가 실행된다는 겁니다. 위와같이 아주 큰 사이즈의 이미지를 img 태그에 명기한 후에 페이지를 로딩하면, verybigsizeImage.jpg 가 로딩되지 않아도 document.ready 함수는 실행되게 됩니..

IT공부방/jQuery, ajax, java 2019. 6. 14. 15:06

모바일 브라우저에서 HTML 문서를 로딩하게되면 아래와 같이 상단부분에 주소표시줄이 계속 남이있는 경우가 많습니다. 화면을 스크롤해서 올려봐도 스마트폰 최 상단의 상태바는 없어지지 않는 경우가 많습니다 게임을 하거나 동영상을 플레이하거나, 인강등의 교육컨텐츠 등을 보여줄때는 전체화면을 다 사용해야 가독성에서도 그렇고 인터페이스 측면에서도 더 좋은 효과를 얻을 수 있습니다. jquery 와 javascript/CSS 등을 이용하면 모바일 전체화면을 다 사용할 수 있습니다 최초에 페이지에 접속을 하면 아래와 같이 보여지게 됩니다. 이 상태에서 스마트폰을 가로로 회전을 시키면 아래와 같이 보여지게 됩니다. 세로모드 또는 가로모드에서 [가로모드로 고정하기] 버튼을 클릭하게 되면 아래와 같이 화면을 100% 꽉 ..

IT공부방/jQuery, ajax, java 2019. 5. 29. 08:10

jQuery Slider (제이쿼리 슬라이더) 중에서 swiper slider 를 많이들 쓰고 있는데요, 다소 무거운 감이 있긴 했습니다. 또한, 슬라이더를 여러개 사용할 경우에는 자원의 사용이 많아지는듯 해서, 다른 슬라이더를 찾던중에 lightslider 라는 것을 발견했습니다 위 그림과 같이 하단 부분에 작은이미지 (썸네일) 가 보이고, 그걸 클릭하거나 큰 사진의 좌우 이동 버튼을 클릭하거나, 스마트폰에서는 손가락으로 좌우이동이 가능한 jquery slider 입니다. 그리고, 옵션만 바꿔주면 위 사진처럼 썸네일 이미지를 오른쪽으로 배치하고, 화면 이동도 상하(Vertical)로 움직이게 할 수도 있습니다 또한, 위와 같이 여러개의 이미지를 임의로 세팅할 수도 있고, 아래부분에 있는 버튼처럼 다양한..

IT공부방/jQuery, ajax, java 2019. 5. 16. 17:53