계발하는 개발자

사이트들을 보면 꼭 있는 필수 기능인 상단이동버튼 구현에 관한 포스팅도 정리차 올려보려합니다. Window.scrollTo() Javascript는 Window.scrollTo()라는 메소드를 제공합니다. 해당 메소드는 Window 내에서 사용자가 원하는 위치로 스크롤을 이동시킬 수 있습니다. // 기본 형태 window.scrollTo(x-좌표, y-좌표) scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능합니다. 참고로, smooth 모션 미추가시 이동버튼을 클릭하게되면 슝~하면서 이동하는 과정없이 화면이 깜빡이면서 바로 상단으로 이동하게 됩니다. 이 동작이 많이 부자연스럽기 때문에 smooth 모션도 꼭! 설정해주기 ! // behavior에는 auto와 smooth를 입력할 수 ..

form태그 내부에 있는 input box에서 엔터 혹은 버튼 클릭을 할 경우 해당 form이 제출되며 자동 새로고침됩니다. 사용자가 입력한 정보를 받아오기 위해서는 새로고침을 방지할 필요가 있기에, 오늘은 이를 방지하는 방법에 관해 리뷰해보고자 합니다. 새로고침을 방지하기 위한 방법에는 여러가지가 있지만, 제 기준 가장 확실하다고 생각되는 방법 2가지를 정리하겠습니다. 1. event.preventDefault() 메서드 preventDefault() 하면 form 제출시 submit이벤트가 console창에 그대로 출력되어 유지된다. preventDefault() 안 하면 form 제출시 submit 결과가 console창에 출력되었다가 사라진다. 형태: function 함수명(event) { eve..

자바스크립트 메소드 중 하나인 contains() 메소드에 대해 알아보자.🧐 우선 contains() 메소드는 무엇일까? 🧩 contains() 메소드 contains() 메소드는 선택한 요소가 특정한 부모요소에 속해 있는지를 확인할 때 사용한다. 주로 특정 요소를 선택하여 부모 요소가 해당 요소를 가지는지 여부를 boolean으로 확인할 수 있는 메소드이다. 이외에도 하나의 엘리먼트가 특정 클래스를 포함하고 있는지를 확인할 때도 is() 메소드처럼 사용할 수 있다. 더 자세한 내용은 아래의 예시에서 살펴보자. 액티브 이벤트 첫번째와 세번째의 child는 가지고 있는 내용값이 배열값과 일치해서 green 색상의 배경으로 변경된 데 반해, 두번째 요소의 child는 배열값을 포함하고 있지 않아서 false..

코드를 작성하다보면 매개변수나 배열의 길이값을 가져와야 하는 경우가 생깁니다. 오늘은 함수객체와 arguments의 length 프로퍼티를 중점적으로 정리해보겠습니다. (이외 더 많은 프로퍼티들은 차차 다루도록 하겠읍니담..) 먼저 length 프로퍼티라고 해서 다 같은 공간에서 길이값을 가져오는 것이 아님을 알아야 합니다. 함수객체 .length 프로퍼티 함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킵니다. // Case 1 function qu() {} console.log(qu.length); // 0 // Case 2 function ohr(i) { return i+i } console.log(ohr.length); // 1 // Case 3 function ..