JavaScript

jQuery 소스코드 분석과 함께하는 자바스크립트 공부 – 1

jQuery의 core에는 다섯 개의 중요한 개념이 있습니다. 변수(variables, 데이터), 함수(functions), 객체(objects), 프로토타입(prototype), 상속(inheritance)입니다. jQuery는 jQuery라는 변수에 저장되어 있습니다. jQuery 변수는 두 가지가 있는데 하나는 전역변수(global), 나머지 하나는 지역변수(local)입니다. 자바스크립트의 변수의 유효범위는 함수입니다. 즉, 어떤 변수가 함수안에서 선언되었느냐 밖에서 선언되었느냐에 따라 전역변수인지, 지역변수인지가 결정이 됩니다. 전역변수는 소스코드의 어느 곳에서도 접근이 가능한 변수이고 지역변수는 그 변수에 접근 가능한 범위가 정해져 있는 변수입니다. 그 범위는 바로 그 변수가 선언된 함... »

네이버 영어사전 북마클릿

영문사이트를 볼 일이 많은 편인데 모르는 단어가 많아서 영어사전을 자주 찾아보게됩니다. 그래서 네이버 영어사전을 이용한 북마클릿을 만들어 보았습니다. 북마클릿을 잘 모르시는 분들을 위해 간단히 설명을 드리면 브라우저에는 북마크바가 있습니다. 즐겨찾기가 버튼형태로 저장되는 곳을 말하는 것인데요 웹페이지에 있는 a 태그는 이 북마크바로 드래그 해서 넣어 놓을 수가 있습니다. 북마클릿은 a 태그 안에 자바스크립트 프로그램을 넣어 놓은 것입니다. 그래서 클릭했을 때 단순한 링크 이동이 아닌 자바스크립트 프로그램 실행을 가능하게 해줍니다. 제가 만든 네이버 영어사전 북마클릿은 http://codefactory.kr/demos/tool/endic.html 여기에 있습니다. 혹시 필요하신 분이 있으시... »

모바일 브라우저에서 글 내용에 따라 자동으로 늘어나는 textarea 만들기 2

안녕하세요 제가 앞에 작성한 "모바일 브라우저에서 글 내용에 따라 자동으로 늘어나는 textarea 만들기" 는 글을 작성한 만큼 textarea의 크기가 늘어납니다. 하지만 작성한 글을 지워서 내용이 줄어들었을 때 textarea의 크기는 줄어들지 않고 계속 커진 상태로 남아 있습니다. 이점을 수정해서 글 내용이 많아질 때는 textarea의 크기가 커지고 글 내용이 줄어들었을 때는 textarea의 크기도 작아지도록 만들어봤습니다. 이것을 구현하기 위해 어떻게 해야할지 생각이 잘 안떠올랐는데 검색을 해보니 구현하신 분이 있어서 그 분의 아이디어를 그대로 가져와서 만들었습니다. 그 분의 글은 http://james.padolsey.com/javascript/jquery-plugin-autores... »

모바일 브라우저에서 글 내용에 따라 자동으로 늘어나는 textarea 만들기

textarea의 크기보다 더 많은 내용의 글을 작성할 경우 textarea의 크기는 유지된 채로 내부에 스크롤바가 생기게 됩니다. 그런데 이와 같이 하지 않고 사용자가 입력한 글의 내용만큼 textarea 의 높이가 늘어나서 스크롤바가 생기지 않게 하고 싶은 경우가 있습니다. 그럴 때는 textarea에 글자가 입력될 때마다 textarea의 clientHeight와 scrollHeight를 비교해서 scrollHeight가 더 큰경우(textarea의 크기보다 글 내용이 더 커지는 경우입니다.) clientHeight의 크기를 늘려주는 방법을 사용하게 됩니다. 이와같은 원리를 사용하여 jQueryMobile 같은 경우에는 아래와 같은 코드로 이 기능을 처리하고 있습니다. // 아래는 jQueryM... »

엘리먼트의 크기 구하기

HTML 엘리먼트의 크기를 구하는 방법은 여러가지가 있습니다. 엘리먼트의 DOM객체가 element 라는 변수에 저장되어 있다고 가정하고 말씀을 드리면, 먼저, CSS로 크기가 지정되어 있는 엘리먼트라면 element.style.width / element.style.height 로 접근해서 CSS 값을 구해올 수 있습니다. 그리고 CSS와 지정 여부와 관계없이 DOM 차원에서 엘리먼트의 크기를 잴 수 있는 프로퍼티들을 제공하고 있는데요 border와 padding, scrollbar 등의 포함 유무에 따라 아래와 같은 속성들로 구분되어 있습니다. clientWidth / clientHeight scrollWidth / scrollHeight offsetWidth / offsetHeight 위 프로퍼티들은 ... »

Page 19 of 20«17181920