목록js (144)

투케이2K

41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. overflow : 스크롤 여부를 결정하는 css 속성입니다 2. bind : 이벤트 처리를 수행하는 메소드입니다 3. 모바일 터치 이벤트 동작 시 start, move 쪽에서 body 스크롤 막고, end 상태일 때 body 스크롤..
FrontEnd 2021. 7. 2. 08:05
84. (javascript/자바스크립트) safari 사파리 호환 - new Date 와 for 문을 사용해 특정 연도, 월, 날짜, 요일 순차적 출력 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. new Date getDay : 특..
JavaScript 2021. 7. 1. 16:48
40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. window.g..
FrontEnd 2021. 7. 1. 16:25
83. (javascript/자바스크립트) new Date 와 for 문을 사용해 특정 연도, 월, 날짜, 요일 순차적 출력 실시 - 사파리 , 크롬 적용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. new Date getDay :..
JavaScript 2021. 6. 30. 09:14
82. (javascript/자바스크립트) 특정 객체에 포함된 자식 삭제 (제거) 실시 - childElementCount , removeChild

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [삭제 (전)] ​ [삭제 (후)]​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2..
JavaScript 2021. 6. 30. 08:50
81. (javascript/자바스크립트) 특정 객체 강제 버튼 클릭 이벤트 수행 - document getElementById onclick

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. document.getElement..
JavaScript 2021. 6. 30. 08:15
80. (javascript/자바스크립트) 특정 객체 크기, 위치 확인-offsetWidth, clientWidth, scrollWidth, getBoundingClientRect

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. offsetWidth : margi..
JavaScript 2021. 6. 30. 08:05
79. (javascript/자바스크립트) canvas 캔버스에 배경 이미지 로드 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] 이미지 호출 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. document.getElementById : 특정 객체 id를 지정합니다 2. canvas.ge..
JavaScript 2021. 6. 29. 09:20
78. (javascript/자바스크립트) Array 배열 특정 데이터 삭제 및 특정 key 값 삭제 실시 - indexOf , findIndex , splice

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. JSON.stringify : js..
JavaScript 2021. 6. 28. 15:46
77. (javascript/자바스크립트) background Image 배경 이미지 경로 확인 및 이미지 변경 코드

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] //backgroundImage 경로 확인 실시 var imageRoot = document.getElementById(id).style.backgroundImage; //backgroundImage 이미지 교체 실시 var imageUrl = "../assets/image/white_check_off.png"; document.getElementById(id).style.backgroundImage = "url('" + ..
JavaScript 2021. 6. 28. 15:21
75. (javascript/자바스크립트) 캘린더 (calendar) 방식 Date 사용해 연도 (year), 월 (month) 확인 및 시작 요일, 종료 요일 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. new Date : 연도, 월,..
JavaScript 2021. 6. 24. 20:57
74. (javascript/자바스크립트) 클릭 (click), 롱 클릭 (long click) 이벤트 등록 실시 - mousedown , touchstart , Date now

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. document.getEleme..
JavaScript 2021. 6. 23. 09:27
71. (javascript/자바스크립트) base64 인코딩 (encode) , 디코딩 (decode) 수행 실시 - btoa , atob

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. base64 : 8bit의 데이터(..
JavaScript 2021. 6. 21. 18:22
70. (javascript/자바스크립트) web worker 웹 워커 사용해 비동기 백그라운드 작업 수행 - postMessage, onmessage

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. web worker : 스크립트가 ..
JavaScript 2021. 6. 21. 17:44
69. (javascript/자바스크립트) geolocation getCurrentPosition 사용해 위도, 경도 확인 및 google maps 호출

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. geolocation API..
JavaScript 2021. 6. 20. 10:21
68. (javascript/자바스크립트) array sort 사용해 특정 데이터 오름차순 (asc), 내림차순 (desc) 정렬 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. [] 대괄호 : 배열 객체를 선..
JavaScript 2021. 6. 20. 09:12
67. (javascript/자바스크립트) 동적 레이아웃 생성 및 이벤트 지정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] console.log("[createMenu] : debug [1]"); var createMainLayout = document.createElement("div"); //객체 레이아웃 타입 지정 var createMainId = "select_container"; //객체 id 값 지정 var createMainStyle = "width:29%; height:30%; border:none; background-color..
JavaScript 2021. 6. 19. 11:11
66. (javascript/자바스크립트) 터치 이벤트 등록 및 좌표 확인 실시 - touchstart , touchmove , touchend

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. addEventListener ..
JavaScript 2021. 6. 19. 10:26
35. (html/css/javascript/jquery) canvas 캔버스 사용해 pc (피씨), mobile (모바일) 에서 전자 서명 기능 구현 - mouse , touch

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] URL 저장 그림 저장 지우기 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2...
FrontEnd 2021. 6. 19. 09:45
65. (javascript/자바스크립트) JsonArray 객체 초기 선언 및 동적 데이터 삽입 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. var jsonArry = [] : jsonArray 초기 선언할 수 있는 방법입니다 2. var json..
JavaScript 2021. 6. 18. 14:20
Prev 1 2 3 4 5 6 7 8 Next