카테고리101

• 

  [JavaScript] Blackbird - 자바스크립트 개발 디버깅 도구 Blackbird는 사용하기 편한 자바스크립트 개발 디버깅 도구다. 자바스크립트로 웹개발을 할 때 alert 함수를 많이 사용하게 되는데 Blackbird를 이용하면 보다 편하게 작업을 할 수 있다. 쉽게 로그를 기록할 수 있으며 로그 필터링도 가능하고 무엇보다도 자바스크립트의 수행시간을 알고 싶을 때도 사용하면 좋다. URL : http://demo.jb51.net/js/Blackbird/index.html blackbird 파일을 프로젝트 디렉터리로 복사한다. blackbird/ blackbird.css blackbird.js blackbird_icons.png blackbird_panel.png 파일을 복사 후 작업 중인 웹 페이지에서 blackbird.css 파일과 blackbird.js 파일 두.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트 프레임워크 1. jQuery ​jQuery는 가장 있기있는 라이브러리이다. 심플한 것이 특징이며 크로스 플랫폼을 지원한다. http://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 2. MooTools MooTools는 가벼운 객체 지향 프레임워크이다. .. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] JavaScript 와 CSS를 손쉽게 압축하는 사이트 Javascript 소스코드 압축하는 방법과 CSS 내용을 압축하는 방법을 알아본다.​ ​ JavaScript Compressor​ https://javascript-compressor.com/ ​ JavaScript Source Code Input에 압축하려는 JavaScript 파일을 복사해서 붙여 넣는다. ​ "Compress" 버튼을 클릭하면 압축된 파일을 볼 수 있고 다운로드도 가능하다. ​​ CSS Compressor http://www.csscompressor.com/ ​압축 레벨을 설정할 수 있다. ​ CSS 파일을 복사한 후 "Compress" 버튼을 클릭하면 압축된 파일을 볼 수 있고 다운로드도 가능하다. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트 소스코드 압축 JavaScript 소스코드의 보호 및 사이즈 축소 목적으로 Packer를 사용한다. 소스코드를 압축하면 용량을 줄일 수 있고 난독화를 하면 사람이 읽기 어렵게 된다. Packer로 압축된 소스코드를 다시 Unpack 하면 다시 이전의 형태로 변환된다. 아래의 주소로 가면 웹페이지에서 바로 실행할 수가 있다. 소스코드를 Paste: 영역에 복사하고 "Pack" 버튼을 클릭하면 변환된다. Copy: 영역의 코드를 복사하여 사용하면 된다. http://dean.edwards.name/packer/ /packer/ Copyright © 2004-2023 Dean Edwards. All rights reserved. dean.edwards.name ▣ 입력화면 "Shrink variables"를 클릭하면 읽기 .. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [JavaScript] 자바스크립트 모듈패턴과 이름공간 모듈패턴 1 이름공간 안에서 사용하는 함수와 외부로 노출하는 함수를 구분한다. var namespace = (function() { var namespace = {}; var i = 0; // 내부에서 사용하는 함수 function func1() { alert(i); } // namespace를 통해 외부로 노출하는 함수 namespace.func2 = function() { alert(i); } return namespace; })(); 모듈패턴 2 전역번수 $ 를 아래와 같이 지역변수로 전달하면 이름공간 내에서 지역변수로 사용하기 때문에 속도가 향상될 수 있다. var namespace = (function(namespace, $, undefined) { var i = 0; // 내부에서 사용하는 함.. ■ Front-End ■/JavaScript 2023. 3. 1.

• 

  [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] 이벤트 버블링 (Event Bubbling) 이벤트 버블링 예제이다. 처음 페이지 로딩한 뒤 적색 부분을 클릭하면 화면 1, 2, 3 순으로 Alert창이 표시된다. ▣ EventBubbling.html ▣ 페이지 로딩 ▣ 화면 1 ▣ 화면 2 ▣ 화면 3 ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] 팝업(Popup)으로 폼(Form)값 넘기기 window.open()으로 호출하는 팝업(Popup)으로 폼(Form) 값 넘기는 예제이다. 태그의 email 입력항목의 값이 "테스트" 버튼을 클릭할때 winpopup() 함수가 호출된다. 먼저 window.open()으로 팝업화면을 오픈하고 값을 넘기려는 폼의 target 값에 window.open()서 에 입력한 이름("pop")을 지정한다. 그러고 나서 submit()을 하게 되면 입력항목의 값을 팝업으로 넘겨줄 수가 있다. 생각보다 간단하다. ■ Front-End ■/JavaScript 2023. 2. 28.

• 

  [JavaScript] History, Screen, Navigator 브라우저 객체 예제 이번 시간에는 자바스크립트 브라우저 객체들에 대하여 알아보자. ▣ BrowserObject.html history history.back( ) history.go(-2) history.forward( ) screen ▣ 페이지 로딩 ■ Front-End ■/JavaScript 2023. 2. 28.