개발 언어/자바 스크립트 java script7

• 

  로딩바 만들기 (버튼 클릭 / html, css, 제이쿼리, 스프링 부트) 로딩바 만들기 버튼 클릭시 로딩바를 만들어야 하는 상황이 있었습니다. 아래의 그림처럼, 정보를 입력하고, 전송 버튼을 누르면 데이터를 서버에서 전송하고, 결과를 서버에서 전송받는 시간에 로딩바를 출력해줘야합니다. (로딩 시간이 늦으면 늦을수록 더 필요한 기능일 겁니다.) 이럴때 필요한 로딩바를 만들어 보겠습니다. 시간이 없으신 분들은 복사/붙여넣기 해도 동작될 겁니다. 제이쿼리 추가 및 코드 추가 먼저 제이쿼리를 사용해야하기 때문에 아래의 스크립트로 제이쿼리를 추가합니다. 제이쿼리가 다소 무겁다고 하긴 하지만 순수 자바스크립트로 짜는 것보다 간편하고 명확합니다. (둘중 하나만 추가 하시면 됩니다.) 그리고 아래의 스크립트를 추가해줍니다. 코드의 내용을 간단히 설명하자면, loding 이라는 id를 가진 .. 개발 언어/자바 스크립트 java script 2020. 8. 19.

• [css] 웹 브라우저 프린터 배경색 나오도록 설정 (크롬/인터넷 익스플로어 등..) 웹 브라우저 프린터 배경색 나오도록 설정하는 방법 css 코드에 아래의 코드를 붙여 넣으면 됩니다. h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, div,body { -webkit-print-color-adjust:exact; } -- html에 넣는다면 script 태그 안에 넣어야 겠죠? css 에서 웹 브라우저 프린트 컬러를 설정 값을 지정해줘야 합니다. webkit-print-color-adjust 속성을 exact으로 설정 해줍니다. 개발 언어/자바 스크립트 java script 2020. 6. 12.

• [자바 스크립트] 셀렉트 박스 (select) 오늘 날짜 자동 선택 오늘 날짜를 기준으로 select 박스에, 자동으로 날짜가 선택되는 코드입니다. 먼저 자바 스크립트 코드입니다. 스크립트 코드를 사이에 추가 해줍니다. javaScript 코드 html 코드 오늘 연도와 날짜가 자동으로 선택 됩니다 01월 02월 03월 04월 05월 06월 07월 08월 09월 10월 11월 12월 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 간단히 말해서 html 페이지 body를 로딩 할때, 자바 스크립트 코드를 실행하여 오늘 날짜 년/월/일 option을 selected 해줍니다. 개발 언어/자바 스크립트 java script 2020. 6. 10.

• 

  javascript 닫기, 새로고침 이벤트 처리 (정말 나가시겠습니까?) 사용자가 게시물을 작성하다가 실수로 브라우저를 닫거나, 새로고침을 하면 여태껏 작성하던 내용을 모두 날릴 수 있다. 우리가 게시판이나 커뮤니티 웹 사이트를 만든다면, 이런 불상사를 막아야 된다. 이럴때 보통 javascript에서 제공하는 onbeforeunload 함수를 사용한다. 이름에서 추측할 수 있드시 unload 되기 전의 이벤트를 받는 함수다. unload는 우리가 자주 사용하는 로드(load)의 반대말로 로드된 페이지가 꺼지는 것, 즉, 새로고침이나 브라우져를 닫았을 때, 실행되는 이벤트다. 사용법) 스크립트 태그에 test() 함수를 선언하고, 안에 window.onbegoreunload를 선언한다. 그리고 body 가 load 될때, test() 함수가 실행되도록 onload 에 test.. 개발 언어/자바 스크립트 java script 2020. 1. 13.

• 셀렉트박스(select) 변경 이벤트 처리하기 [javascript] 셀렉트 박스를 생성, 옵션들을 작성. 12345 개발 언어/자바 스크립트 java script 2019. 3. 26.

• 

  [웹] 데이트 피커 추가 [nice-date-picker js] [달력추가] 크롬(crome)이나 파이어 폭스(firefox)에서는 달력을 사용하려면 input의 type속성을 지정해주면 쉽게 사용할 수 있다. [ex) ] 크롬( crome ) 파이어 폭스( firefox ) 하지만 인터넷 익스플로러에서는 를 지원하지 않기때문에 커스텀 데이트 피커를 추가해야 달력을 쓸 수 있다. 커스텀 데이트 피커 중에 nice-date-picker을 사용하기로 했다. Nice-Date-Picker 오픈소스 https://www.npmjs.com/package/nice-date-picker nice-date-picker nice date picker www.npmjs.com Nice-Date-Picker 오픈소스 (적용하기 전, 적용된 예제를 볼수 있다.) (당연 무료다.) https://oll.. 개발 언어/자바 스크립트 java script 2019. 3. 21.

• 

  자바 스크립트 이미지 미리보기 기능(java script) 자바 스크립트 이미지 미리보기 기능 - 이미지 파일을 업로드 하면 이미지를 미리보는 기능을 구현한것이다. 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 $(function() { $("#filename").on('change', function(){ readURL(this); }); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#preImage').attr('src', e.target.result); } reader.readAsD.. 개발 언어/자바 스크립트 java script 2019. 3. 20.