Dev. Web (37) 썸네일형 리스트형 최소한의 전역변수 사용 [출처] 자바스크립트 핵심 가이드 전역변수는 프로그램의 유연성을 약화하기 때문에 가능하면 피하는 것이 좋다.전역변수 사용을 최소화 하는 방법은 애플리케이션에서 전역변수 사용을 위해 다음과 같이리터럴 형식으로 전역변수를 생성하는 것이다. var MYAPP ={}; MYAPP.stooge = { "first-name" : "Joe", "last-name" : "Howard"}; MYAPP.flight = { airline : "Korea-Air", number : 815, "departure" : { time : "2019-09-22", city : "Seoul" }}; 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) { // 로그아웃 버튼 이벤트 핸들링} 이벤트 핸들링 코드가 너무 길어지는 경우는 위와 같이 이름 있는 함수를 이용해 핸들러를 등록하는 코드와이벤트 핸들링을 구현하는 함수를 분리해서 로드 이벤트 핸들러의 코드를 좀 더 간단하게 정리할 수 있다. 제이쿼리 작성의 좋은 예 보호되어 있는 글입니다. jQuery: data() 이해와 활용 jQuery의 data()의 저장 방법 위와 같이 형태로 data를 엘리먼트에 저장할 수 있습니다.* 추가적으로 HTML5에서는 HTML 엘리먼트에 data-*형식을 이용하여 미리 데이터를 저장할 수 있습니다. 이 방법은 jQuery의 data()를 이용해 저장한 것과 동일한 효과를 나타낼 수 있습니다.사실 HTML5의 data-*가 나오기 전에는 개발자들마다 가지각색으로 HTML 엘리먼트에 허용되지 않는 속성(임의의 Attr속성)을 추가하여 사용했기 때문에 유지보수 측면이나 해석할때 매우 난해하고 지저분한 HTML이 많았습니다. 하지만 HTML5로 넘어오면서 data-* 속성이 표준화가 되면서 이전의 문제점들이 해결되었습니다. .data()가 저장되는 방식 [ case 2. 데이터 읽기 ]문법 : $(.. 이전 1 2 3 4 5 다음