javascript36

• 

  [JavaScript] 자바스크립트 여러가지 유용한 팁 ㅇ try catch문 자바스크립트로 작업하다 보면 정말 어떨 때는 구문이 틀리지도 않았는데, 브라우저 버전에 따라 에러가 발생할 때도 있다. 그럴 때 다음의 try catch문을 사용하면 편리하다. 사용예 : try { // 실제 실행시킬부분 var a = opener.location.href; } catch (e) { // 위의 "실행시킬부분"에서 에러가 났을때 처리해줄 부분 alert ("opener를 찾을수 없습니다."); } finally { // 에러가 나든 나지 않든 무조건 실행시키는 부분 window.status = "opener.locatoin.href 부분 실행되었음"; } ㅇ typeof문 보통 데이터나 오브젝트 타입 등을 검사할 때 많이 사용하는데 만약 "undefined"이면 인식.. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] escape(), encodeURI(), encodeURIComponent() 1. escape() 메서드 escape 메서드는 [인수]의 내용을 포함하는 문자열 값 (유니 코드 형식)을 반환한다. 모든 공백, 구두점, 악센트 부호가 있는 문자 및 기타 비 ASCII 문자는 %xx 인코딩으로 대체된다. 여기서 xx는 문자를 나타내는 16 진수와 동일하다. 예를 들어 공백은 "%20"으로 반환된다. escape 및 unescape 함수를 사용하면 문자열을 인코딩하고 디코딩 할 수 있다. 이스케이프 함수는 ISO 라틴 문자 집합에 있는 인수의 16 진수 인코딩을 반환한다. unescape 함수는 지정된 16 진수 인코딩 값에 대한 ASCII 문자열을 반환한다 소스코드 escape('~!@#$%^&*(){}[]=:/,;?+\'"\\'): ​ 실행 결과 %7E%21@%23%24%25%5E.. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 웹 개발할 때 자주 사용하는 정규표현식 모음 (RegExp) 표현식과 의미 • ^ : 문자열 시작 • $ : 문자열 종료 • * : 반복을 표현, 0개 또는 0개 이상 • + : 반복을 표현, 1개 이상 • ? : 존재여부 표현, 0 또는 1회 • . : 임의의 한 문자를 표현. • | : or를 표현 • \s : 공백문자를 의미 • \S : 공백문자가 아닌 것을 의미 • \d : 숫자 • \D : 숫자를 제외한 문자 • \w : 알파벳이나 숫자 • \W : 알파벳이나 숫자 를 제외 한 문자 기본적인 정규표현식 // 숫자 /^[0-9]*$/ // 영문자 /^[a-zA-Z]*$/ // 한글 /^[가-힣]*$/ // 영와 숫자 /^[a-zA-Z0-9]*$/ 자주 사용하는 정규표현식 // 사용자ID ^[a-z0-9_]+$ // 사용자ID나 비밀번호 ^[a-z0-9_]{.. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 이벤트 헨들링에서 키 코드(Key Code) 참고 테이블 자바스크립트를 사용한 키보드 이벤트 처리에 대해 알아보자. 자바스크립트 이벤트로 사용자 키 입력을 캡처할 수 있다. 키 코드를 찾는 코드 키 코드 참조 표 Key Pressed Javascript Key Code backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 page up 33 page down 34 end 35 home 36 left arrow 37 up arrow 38 right arrow 39 down arrow 40 insert 45 delete 46 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 a 65 b 66 c 67 d 68 e 69 f.. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 날짜계산 및 문자열 출력 자바스크립트의 날짜문자열을 Date로 변환해 날짜 계산을 하고 나서 다시 문자열로 변환하여 출력하는 예제이다. ▣ js_date.html ▣ 결과화면 2023년 2월 28일을 기준날짜로 하고 하루이전과 하루다음날을 계산한다. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 모달창에서 부모창의 함수호출 showModalDialog()로 창을 띄우고 띄워진 창에서 부모창의 함수를 호출하는 것과 returnValue 로 부모창에 다시 전달해서 값을 표시하는 것을 구현해 보았다. ▣ MainPage.html Modal Call : Return Value : ▣ ModalDialog.html Dialog Name : ▣ 페이지 로드 부모창에서 Call showModalDialog를 클릭해서 모달창을 연다. ▣ 부모창 호출 모달창에서 Parent Call 버튼을 클릭하여 부모창의 함수를 호출한다. 부모창의 Modal Call 텍스트박스에 표시가 된다. ▣ 짜잔~~~! 부모창 값전달 모달창에서 Go to Parent 버튼을 클릭하면 부모창에 값을 전달하고 창이 닫힌다. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 정규표현식 입력검증 정규표현식(Regular Expressions)을 사용하여 입력검증을 해본다. 표현식에 위배되는 값을 입력하고 버튼을 클릭하면 해당하는 항목의 정규표현식이 출력된다. 예제의 값을 입력하고 클릭하면 정상적으로 지나간다. ▣ RegExp.html 제목 예제 항목 버튼 숫자 0123456789 알파벳 Apple 영수조합 Apple123 아이디 tuser01 연락처 010-1234-1234 이메일 test@test.com ▣ 결과화면 처음 로딩하고 입력항목을 보면 표현식에 위배되는 값이 있다. ▣ 버튼 클릭 해당하는 항목의 정규표현식이 출력. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 모달창에 값 주고 받기 showModalDialog()로 창을 띄우면서 값을 전달하여 dialogArguments로 그 값을 받아보고 띄워진 창에서 returnValue 로 부모창에 다시 전달해서 값을 표시하는 것을 구현해 보았다. ▣ showModalDialog.html Return Value : ▣ dialogArguments.html Dialog Arguments : ▣ 페이지 로드 부모창의 역활을 하게 될 showModalDialog이다. ▣ 모달창 부모창에서 버튼을 클릭하면 위와 같은 모달창이 열린다. 부모창에서 던진 파라미터가 텍스트박스에 표시된다. ▣ 부모창 모달창에서 Go to parent 버튼을 클릭하면 닫히면서 부모창에 값을 던지고 부모창 텍스트박스에 표시된다. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 동적으로 테이블 생성 자바스크립트를 사용해서 테이블을 동적으로 구성해 본다. 히든항목을 두어서 중복된 코드에 대한 추가를 방지하였다. ▣ DynamicTable.html 코드 값 항목 ▣ 페이지 로드 로딩 시에 SAME_CODE로 신규로 자동추가한다. ▣ 신규코드 클릭 신규코드 버튼을 클릭해서 새로운 행을 두 개 추가한다. 이때 코드는 타임스탬프 값을 사용하였다. ▣ 같은코드 클릭 같은 코드 버튼을 클릭하면 위와 같은 메시지가 표시되고 행이 추가되지 않는다. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 이벤트 핸들러 [2] JavaScript로 자주 사용하는 이벤트 핸들러를 구현해 본다. 페이지 로딩 시, 문서에서 기본키 설정 시, 마우스에 대한 처리를 예제로 구현해 보았다. ▣ EventHandler2.html 이벤트 대상 구분 객체 Text Checkbox all yes no Radio all yes no Select All Yes No Button Label Checkbox All Radio All 이벤트 현황 항목 값 이벤트명 *^^* 이벤트값 *^^* ▣ 페이지 로드 ▣ Text 입력 ▣ Checkbox 선택 ▣ Radio 선택 ▣ Select 선택 ▣ Button 클릭 ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 이벤트 핸들러 [1] JavaScript로 자주 사용하는 이벤트 핸들러를 구현해 본다. 페이지 로딩 시, 문서에서 기본키 설정 시, 마우스에 대한 처리를 예제로 구현해 보았다. 발생한 이벤트 이름과 값을 화면에 표시한다. ▣ EventHandler1.html 항목 값 이벤트명 *^^* 이벤트값 *^^* ▣ 페이지 로드 ▣ 마우스 클릭 ▣ 마우스 더블클릭 ▣ 엔터키 (Enter) ▣ 취소키 (Esc) ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 서브메뉴 동적표시 (SubMenu.html) 서브메뉴를 동적으로 펼치고 접히는 페이지를 구현해 봅니다. 좌측 서브메뉴를 구현할때 자주 사용하는 기능이다. ▣ SubMenu.html 서브메뉴 Hello! *^^* Hello HTML. *^^* Hello JavaScript. *^^* Hello Java. *^^* ▣ 결과화면 메뉴 클릭 후 ■ Front-End ■/JavaScript 2023. 2. 28.