투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스 코드] ​ [결과 출력] ​

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

[개발 환경 설정] ​ 개발 툴 : 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++ 개발 언어 : html, css, js, jquery [원인] >> 아이폰, 안드로이드 모바일에서 카카오톡 링크 접속 시 인앱 브라우저 실행 >> 주소 표시줄, 네이게이션 바 자동 숨김 현상으로 UI 화면이 망가지는 경우 ​ ​ ​ ​ [해결 방법] 공통 : - 가상 키보드 밀림 현상을 방지하기 위해서 각 컨테이너 position 속성을 fixed 로 지정한다 아이폰 추가 설정 : - 자바스크립트 onresize 함수에서 >> 각 컨테이너 height , top 비율을 다시 설정 (변경된 body 해상도 확인 후 다시 비율 설정 : 자연스럽게 full screen 만들기) - 자바스크립트 onready 함수에서 카카오 인앱 브라우저 접속 확인 >> 아이폰인..

[개발 환경 설정] ​ 개발 툴 : 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. 정규식 패턴 [ㄱ-ㅎㅏ-ㅣ가-힣] : 한글 지정 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. json : key, value를 가지는 데이터 통신 포맷입니다 3. json 선언은 중괄호 {} 를 사용해서 선언할 수 있습니다 4. json 선언 시 Object를 사용하는 경우는 json.key = value; 형식으로 저장할 수 있습니다 5. JSON.stringify : json object 객체를 string으로 출력할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. Set : 자바스크립트에서 중복되는 데이터를 제거해줍니다 3. set 을 사용해 중복 제거 후 배열 형태로 변환해줘야 정상적으로 데이터를 확인할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. 배열 : 자바스크립트에서 배열은 대괄호 [] 및 new Array 를 사용해서 선언할 수 있습니다 3. new Array 사용해서 배열 선언 시 push 를 사용해 데이터를 삽입합니다 */