js

동적인 웹 어플리케이션을 만들기 위해서는 JavaScript 파일을 불러오는 것이 필수적입니다. 하지만 복잡한 비즈니스 로직이 포함된 JavaScript 파일이라면 그 용량이 매우 클 것입니다. 따라서 스크립트 파일을 비동기 방식으로 불러오는 방식을 통해 로드 시간을

부모의 요소를 탐색하는 방법인parent()와 parents() 요소에 대하여정리를 해두려고 합니다. 이때 선택자를 인수로 전달하고, 전달받은 선택자(인수)에 해당하는 부모 요소만 선택도 가능합니다.아래 코드는 button을 클릭하면 <p>의 부모인 <li

jQuery란 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다.자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.Element를 선택하기 쉽게 할 수 있다.선택된 Element들을 효율적으로 제어

jQuery에서는 $('selecto')로 선택자를 지정할 수 있다..html() : 해당 태그 내부의 html 태그가 반영된 텍스트 값이며 html 영역의 html 값을 알기 위한 함수이다. 화면에 html이 적용된다..text() : 해당 태그 내부의 텍스트 값이며

삽입 위치 / 선택자/ 스타일 제어 /Traversing / Each()before() : 지정한 태그 바로 직전에 태그가 삽입된다.after() : 지정한 태그 바로 직후에 태그가 삽입된다.prepend() : 지정한 태그의 자식 노드 중 제일 첫번째에 삽입된다. a

이벤트 및 다양한 함수 정리click : 클릭 이벤트dblclick : 더블클릭 이벤트keypress : 키보드 누르면 발생하는 이벤트 위와 같이 이벤트를 지정한 후, 나중에 동적으로 생성된 태그에는 이벤트가 걸리지 않는다. 이 경우, on을 사용해서 해결할 수 있다.

태그를 동적으로 생성한 후 - append, html 등 ..동적으로 추가된 태그에는 이벤트가 동작하지 않는다!!.\`$("은 이미 렌더링 되어서 동작하지 않는 것이다.페이지가 로드 될 때 Script - $("html의 태그- 위와 같이 on 을 사용하여 해결 할 수

preventDefault는 브라우저가 적용하는 기본 동작을 방지하는 역할을 합니다. 이때 기본 동작은 이벤트의 종류에 따라 다릅니다.submit인 경우 form 데이터를 서버에 전송하고,페이지를 새로 고침 하는 부분이 기본 동작link의 경우는 해당하는 링크로 이동하

자바스크립트로 코드를 작성할 때 괄호의 종류를 헷갈릴 때가 있다.간단히~ 정리를 하자면!'대괄호'는 주로 list와 관련됐을 때,'중괄호'는 적용 대상이나 실행 대상 등 대상을 적을 때,'소괄호'는 특정 조건을 명시할 때 사용한다.list 나열할 때list 인덱스를 지

리스트: 순서를 가지고 있는 자료프로그래밍에서는 0부터 카운팅을 시작하기 때문에, 2번째 값을 불러와라 했을때 나오는 값은 실제 코딩한 걸 눈으로 보기에는 3번째에 해당하는 값이다! 이 순서를 항상 조심해야 함.a_list.까지 쓰면 여러가지 함수가 제안된다키key-밸

프로젝트 작업중 마우스휠 이벤트를 사용해보고 싶어서따로 찾아 작업 후, 기억 및 저장을 해두려고 적어보려 한다.위의 사진과 같이마우스를 위로 올릴 때 사이드버튼이 등장 하고마우스를 아래로 내릴 때 사이드 버튼이 사라지게 하고 싶었다.마우스 휠 이벤트에 originalE

준비된 이벤트를 조건이 맞춰지지않아도 강제로 실행시키는 명령코드위 와 같은 코드를 예를 보면두개의 버튼에 각각 클래스명을 넣어주고 버튼에 대한 이벤트를 정의한다.(우선 trigger 이벤트를 선언하기 앞서 이벤트 핸들러가 정의되어 있는지 확인해야 한다. 이벤트 핸들러가

swiper는 많이 사용하기도 하고 유용하기도 한 라이브러리라 생각한다.swiper에 대해 공부하던 도중 추가 이벤트를 할 수 있는 옵션인 on을 알게 되었고간단하게 swiper .on옵션에 들어갈 이벤트들을 정리하려고 한다.Swiper 라이브러리의 on 옵션은 이벤트

jQuery 1.6.0 업데이트로 attr() 과 prop() 두 개로 나눠졌다.attr() : HTML 속성 (Attribute) 취급prop() : javascript 프로퍼티 (Property) 취급속성(Attribute) 은 HTML 요소에 대한 추가 정

선택한 요소에서 주어진 선택자가 있는지 판별합니다.$("선택자").is("선택자");$("선택자").is("변수");$("선택자").is("함수");선택한 요소에서 주어진 선택자가 있는지 판별하여 있으며 true를 반환합니다.위의 html에서 checked속성을 주었기

for와 forEach의 사용법이 확실한 구분을 짓기위하여간단하게 정리하여 구분짓기 쉽도록 하기 위함의 정리글!!빠르고 단순하며, 효율적이다.건너뛰기, 종료 가 가능하다 ( continue, breake 사용이 가능 ) 반복문의 범위를 지정할수 있다 ( i ++ 또는

라고 한다면 prompt창에 How old are you?라고 뜰것이다.이 값에 15라는 값을 넣으면 이 것은 문자가 아닌 숫자로 처리된다.혹 숫자도 아닌 "lalalalalala"를 적는다면 콘솔창에 NaN(Not a number)가 출력된다. isNaN은 boole

3D로 움직이는 웹사이트에 관심이 생겼고, 그것이 바로 thress.js라는 라이브러리로 사용이 가능하다고 알게되어, 바로 온라인 강의를 신청하였다. three.js에서는 스크립트를 불러올 때 모듈방식으로 많이 불러온다고 한다. (물론 일반 자바스크립트에서도 유용)많은

반응형 웹사이트를 작업하는 도중 JavaScript에서 미디어쿼리를 컨트롤하는 방법이 없을까 하고 검색하다가 알게된 .matchMedia()을 정리해보겠다!matchMedia() 함수는 미디어 쿼리를 사용하여 현재 미디어 상태와 일치하는지 확인하기 위해 사용되며, 이

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다.setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을

특정 버튼을 클릭했을 때 지정된 링크나 현재의 링크를 저장(복사)되도록 하고 싶어서 방법을 찾아보았다!해당 코드에서 정리 해 볼 부분은 navigator.clipboard.writeText(link)이다!navigator.clipboard.writeText()는 지정된

localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용합니다.localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용합니다.setItem() 함수를 사용하여 localStorage에 key-value 를 저장합니다.loc

자바스크립트 언어에서 이 둘은 유사한 기능을 합니다.자바스크립트를 이용해 지정한 URL로 동일하게 이동하지만,이 둘은 상당히 다른 점이 많으며, 어떤 경우에는 주의해서 사용해야 하기도 합니다.사용자 클릭 등의 사용자 반응에 의해 URL을 이동하는 경우location.h

JSON에 대해서 공부 중 잊지않기 위해 정리!JSON은 JavaScript Object Notation 의 약자입니다.직역하면 자바 스크립트 객체 표기법으로 데이터를 쉽게 교환 하고 저장하기 위한 텍스트 기반의 데이터 교환 표준 입니다. JSON은 텍스트 기반이기 때

귀여운 마우스 커스텀 수집