투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [html 최초 로드 및 이벤트 상시 대기 실시] */ window.onload = function() { console.log(""); console.log("[window onload] : [start]"); console.log(""); // [테스트 함수 호출] testMain(); }; /* [테스트 함수 수행 실시] */ function testMain(){ console.log(""); console.log("[testMain] : [start]"); console.log(""); /* [요약 설명] 1. Date.now() : 현재 날짜 및 시간 데이터를 타임 스탬프 밀리세컨드 13 자..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [자바스크립트 테스트 코드] */ function testMain(){ console.log(""); console.log("[testMain] : [start]"); console.log(""); /* [요약 설명] 1. test() 메소드는 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색합니다 2. test() 메소드는 패턴과 일치하는 문자열이 있으면 true를, 없으면 false를 반환합니다 */ // [초기 변수 선언 실시] var strData = "aabbccdd"; // [검색하려는 패턴 지정] var pattern_1 = /abc+/ var pattern_2 = /a..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [테스트 함수 수행 실시] */ function testMain(){ console.log(""); console.log("[testMain] : [start]"); console.log(""); /* [요약 설명] 1. 이스케이프 (escape) : 아스키문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환해 줍니다 (16 진수) 2. 이스케이프 (escape) : 1바트일때 %XX 이며 2바이트 (한글) 일때는 %uXXXX (u 포함) 입니다 3. 언이스케이프 (unescape) : 이스케이프 문자를 디코딩할 때 사용합니다 4. 이스케이프 예시 : hello %uD22C(투) %uCF00(케..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] // [body 소스 코드] // [자바스크립트 소스 코드] document.getElementById("input_box").focus(); // [포커스 활성] document.getElementById("input_box").blur(); // [포커스 해제] // [모바일 가상 키보드 제어 속성 : inputmode] [1]. 가상 키보드 비활성 [2]. 일반 텍스트 입력 키보드 [3]. 숫자 입력 키보드 [4]. 숫자 입력 키보드 [5]. 전화 번호 입력 키보드 [6]. 검색 키보드 [7]. 이메일 입력 키보드 [8]. 주소 입력 키보드

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [moment 라이브러리 사용해 Date 포맷 출력 실시] */ function time_sysnc(){ console.log(""); console.log("[time_sysnc] : [start]"); console.log(""); // [Date 객체 생성 실시] var date = new Date(); // [현재 날짜 및 시간 학인 실시 : 24 시간 형태] var now24Date = moment(date).format("YYYY-MM-DD HH:mm:ss"); console.log(""); console.log("[now24Date] : " + now24Date); console.log(..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [셀렉트 박스 컨텐츠 동적 생성 실시] */ function createSelectBoxItem(){ console.log(""); console.log("[createSelectBoxItem] : " + "[start]"); console.log(""); // [1]. [동적으로 아이템을 생성하기 위해 초기 배열 선언 실시] var itemList = new Array(); itemList.push("헬로"); // 특정값 추가 itemList.push("투케이"); // 특정값 추가 itemList.push("TWOK"); // 특정값 추가 // [2]. [createElement 사용해 sele..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] /* [html 소스 코드] */ 사과 바나나 /* [셀렉트 박스 변경 이벤트 감지] */ var selectNowItem = "1" var selectNowName = "사과" function selectChange(){ console.log(""); console.log("[selectChange] : [start]"); console.log(""); var tagId = document.getElementById("select_item"); // [객체 id 지정] selectNowItem = tagId.options[tagId.selectedIndex].value; // [선택된 value 확인] se..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [텍스트 전체 복사 수행] */ function copyText(){ console.log(""); console.log("[copyText] : [start]"); console.log(""); try { // [텍스트를 복사할 객체 지정 실시 : P 태그 객체 id 지정] var tagID = document.getElementById("scan_content_p"); // [텍스트 정보를 Range 객체에 저장] var range = document.createRange(); range.selectNode(tagID.childNodes[0]); // [select() 함수를 사용해 전체 영역 지..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. location.href : 웹페이지 로드 된 주소 확인 및 새롭게 웹 페이지 주소를 지정할 수 있습니다 3. history.go(0) : 인자값으로 0을 넣으면 location.reload 와 같은 동작을 수행합니다 4. location.reload() : 현재 웹 페이지 새로 고침을 수행합니다 */ /* [html 최초 로드 및 이벤트 상시 대기 실시] */ window.onload = function() { console.log(""); console.log("[window onload] : [sta..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. filter : 특정 데이터를 걸러 낸 후 새로운 배열을 만듭니다 3. JSON.stringify : 배열 데이터 목록을 string 형식으로 출력합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ ​ ​ ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. chart.js 공식 사이트 : https://www.chartjs.org/docs/latest/ 3. chart.js 플러그인 datalabels : https://chartjs-plugin-datalabels.netlify.app/ 4. cdn 설치 사이트 : https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation */ [파일 첨부] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. document.getElementById : 특정 객체 ID 값을 지정할 때 사용합니다 2. a 태그 : download 속성을 지정해서 클릭 시 이미지 파일을 저장할 수 있습니다 3. appendChild : 특정 자식을 추가합니다 4. removeChild : 특정 자식을 삭제합니다 5. 로직 : 이미지 저장 함수 호출 >> a 태그 생성 및 속성 지정 >> body에 추가 >> 다운로드 수행 완료 >> body에서 삭제 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [자바스크립트 소스코드] ​ ​ ​ [BODY 소스코드] TOP 이동 BOTTOM 이동 ONE TWO THREE [결과 출력] ​ [TOP 스크롤 이동 실시] ​ ​ ​ [BOTTOM 스크롤 이동 실시] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. document.getElementById : 특정 객체 태그 아이디를 지정합니다 3. scrollTop : 특정 태그 스크롤 위치를 지정합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [자바스크립트 소스코드] ​ [BODY 소스코드] [결과 출력] ​ [버블링 이벤트 막기 (전) - 자식 클릭] ​ ​ [버블링 이벤트 막은 (후) - 자식 클릭] [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 버블링 이벤트 : 이벤트가 전파가 자식에서 부모로 이동하는 것을 의미합니다 3. 자식 클릭 시 : 버블링 이벤트가 발생해 [자식 클릭 이벤트 발생 >> 부모 이벤트 발생]이 연쇄적으로 발생합니다 4. event.stopPropagation : 부모의 이벤트 버블링을 막을 수 있습니다 (즉, 해당 클릭된 자식만 이벤트 발생) */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [요약 설명] ​ /* [로직 설명] 1. 사용자가 카카오톡 인앱 링크를 통해 브라우저를 접속 (카카오톡에서 브라우저 링크 클릭) 2. 자바스크립트 단에서 ready() 함수 (최초 실행 확인) 부분에서 접속한 브라우저 및 디바이스 기기를 체크 3. 접속한 브라우저가 카카오 인앱 인 경우 >> 실행 중인 카카오 인앱을 닫은 후 >> 현재 접속 url 을 크롬으로 열기 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. value : 폼 양식에 저장된 값을 얻어옵니다 3. substring(시작, 길이) : 특정 문자열을 부분 출력할 때 사용합니다 4. keyup : 키보드 누른 후 >> 올라 간 상태를 확인합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. new Array : 배열 형태로 데이터를 저장합니다 3. new Object : 오브젝트 형태로 데이터를 저장합니다 (json 가능) 4. findIndex : 찾으려는 데이터를 포함하고 있는 인덱스 값을 반환합니다 (0부터 시작 / 없으면 -1값) */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. childNodes : 특정 태그에 포함된 자식 노드 리스트를 가져옵니다 3. childList[i].nodeName.toLowerCase() : 특정 자식 노드 태그 속성 값을 영문 소문자로 반환합니다 4. childList[i].style.backgroundColor : 특정 자식 노드 배경 색상을 지정합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. 콜백은 다른 함수에 인수로 전달되는 함수입니다 3. 콜백 함수는 다른 함수가 완료된 후에 실행할 수 있습니다 4. 콜백은 비동기처리와 같이 주로 사용됩니다 5. 함수 이름 반환 : 함수.name 사용 시 현재 로직을 수행중인 함수 이름을 반환할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 자바스크립트는 RexEx 정규식을 사용해서 불필요한 문자를 제거할 수 있습니다 3. 정규식은 검색 패턴 을 형성하는 일련의 문자입니다 4. 정규식은 /[정규식으로 제거할 패턴]/gim 방식으로 선언합니다 5. gim (replaceAll) : 전역적으로 문자열에 포함된 같은 패턴의 문자를 모두 제거하기 위해서 사용합니다 6. 정규식 패턴 [a-z] : 영어 소문자 지정 7. 정규식 패턴 [A-Z] : 영어 대문자 지정 8. 정규식 패턴 [ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정 ..