Dev. Web/자바스크립트 빡독! (6) 썸네일형 리스트형 [Javascript ] 프로토타입 이해하기 [출처] 오승환님 블로그 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다.하지만 프로토타입이 무엇인지 깨우친 순간 자바스크립트가 재밌어지고, 숙련도가 올라가는 느낌을 팍팍 받을 수 있습니다. 그럼 지금부터 프로토타입을 이해해봅시다.Prototype vs Class클래스(Class)라는 것을 한 번쯤은 들어보셨을겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐구요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype).. jQuery 플러그인 1 - 기본적인 플러그인 만들기 출처: https://offbyone.tistory.com/129?category=283347 [쉬고 싶은 개발자] jQuery 플러그인은 jQuery의 프로토타입 객체를 확장하는 새로운 메소드를 추가하는 것입니다. 우리가 새로 추가한 기능은 jQuery의 모든 기능을 상속 받아 바로 사용할 수 있습니다. jQuery에 기능을 추가한다는 개념이지만, 우리가 사용할 때는 jQuery의 기능을 모두 사용할 수 있는 우리의 기능을 만든다고 생각하면 되겠습니다. 물론 jQuery 플러그인으로 기능을 만들지 않고 직접 기능을 수행하는 클래스를 만들고, 필요한 곳에 jQuery를 사용하도록 하는 방법도 있습니다. 어떤 방법으로 만들지는 자신의 선택이겠습니다. 자신이 편리한 방법으로 만들면 될 것 같습니다. 필요에 .. 유용한 정규 표현식 1. 파일 확장자 찾기 var testString = 'The file is logo.gif' // 원본 문자열var regex = /\S*\.gif/i;var results = testString.match(regex);var file = results[0]; // logo.gif \.gif : gif를 찾아라\S* : 공백이 아닌 모든 문자i : 대소문자 구분 없음 2. 특정 단어 찾기 ex) Apr var sentence = 'April is the cruelest month.';var aprMatch = /Apr(il)?\b/; if(sentence.search(aprMatch) != -1) { // Apr 또는 April을 찾았을 때} else { // 찾지 못함} Apr은 반드시 있어야 함(i.. 자바스크립트 연산자 우선순위 자바스크립트 연산자 우선순위 1) . [] () : 세부지정이나 호출 2) delete new typeof + - ! : 단항 연산자 3) * / % : 곱하기, 나누기, 나머지 4) + - : 더하기, 연결, 빼기 5) >= [jQuery Tip] 선택자 최적화 하기 [jQuery Tip] 선택자 최적화 하기 선택자 최적화를 통해 HTML을 더 빠르게 선택하고 자바스크립트를 더 효율적을 사용한다. 1) 가능하다면 아이디 선택자를 사용해라. HTML 요소를 가장 빠르게 선택하는 것은 아이디 선택자를 사용하는 것이다. 2) 아이디를 먼저 사용한 후 자손 선택자를 사용하라. 좁은 범위에서 선택해라. ex) $('#main a') 3) find() 함수를 사용해라. 4) 너무 상세한 사용은 피해라. css 나열을 통해 상세하게 선택할 수 있지만, 이 방법은 속도를 느리게 할 수 있다. 가능하다면 더 짧은 자손 선택자를 사용한 후에 이를 다듬는 편이 좋다. 이벤트 핸들러 등록과 구현의 분리 $(document).ready(function() { // 로그인 버튼과 클릭 이벤트에 대한 핸들러 등록 $("#btnLogin").click(OnBtnLoginClicked); // 로그아웃 클릭 이벤트 핸들러 등록 $("#btnLogout").click(OnBtnLogoutClicked);}); function OnBtnLoginClicked(event) { // 로그인 버튼 이벤트 핸들링} function OnBtnLogoutClicked(event) { // 로그아웃 버튼 이벤트 핸들링} 이벤트 핸들링 코드가 너무 길어지는 경우는 위와 같이 이름 있는 함수를 이용해 핸들러를 등록하는 코드와이벤트 핸들링을 구현하는 함수를 분리해서 로드 이벤트 핸들러의 코드를 좀 더 간단하게 정리할 수 있다. 이전 1 다음