개발공작소
728x90
반응형
article thumbnail
[JS] FormData(폼데이터)에 대해 알아보자. ( FormData의 key, value값 확인하는 방법 및 FormData 함수)
FrontEnd/JavaScript 2022. 1. 29. 05:04

파일 업로드를 정리하면서 formData안의 key, value값을 확인하는 방법이 있다는 걸 알아서 한번 정리 해본다. FormData란?? - AJAX와 같은 비동기 서버통신을 통해 데이터를 업로드할 때 사용하는 Javascript 객체이다. - HTML5의 form태그를 대신할 수 있는 객체이다. - 페이지전환 없이 폼데이터를 전송하고 싶을 때 사용한다. - 전송방식은 AJAX의 비동기방식을 이용하지만, 데이터포맷은 JSON이 아닌, form포맷이다. 사용방법 1. FormData 객체 생성 var formData = new FormData(); 2. FormData.append(key, value) : FormData 객체에 데이터 적재 formData.append('name','홍길동'); fo..

article thumbnail
[JQuery] Js 객체가 비었는지 확인 해보자. ( 객체 빈값)
FrontEnd/JavaScript 2022. 1. 27. 17:57

이번에 작업을 하면서 객체를 활용하여 객체에 값이 있으면 작업을 진행하고, 값이 없으면 넘어가는 조건문을 만들었다. 그런데 객체가 비었는지 알 수 있는 방법을 몰라 이것 저것 찾다가 이렇게 정리한다. - $.isEmptyObject(object) - jQuery.isEmptyObject(object) 제이쿼리에서 제공하는 함수로 objcet가 빈값이면 true를, 값이 들어있으면 false를 반환해준다. 위와 같이 a와 b라는 객체를 생성하여 $.isEmptyObject()에 넣으니 true, false를 반환해주었다. 이렇게 간단하게 객체가 빈값인지 빈값이 아닌 지 확인 할 수 있다~~

article thumbnail
[JS] AJAX를 통한 동적으로 서버통신을 해보자. (feat. Js, JQuery, Axios)
FrontEnd/JavaScript 2022. 1. 23. 01:07

오늘은 AJAX를 통해서 동적인 서버통신을 한번 해보겠다~~ AJAX란? Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. 라고 구글에는 적혀 있다. AJAX를 이용하면 좋은 점은 다음과 같다. 우선 보통의 폼방식과 같이 서버통신을 하게되면 전체페이지가 새로고침된다. 하지만 AJAX는 웹페이지의 일부분만 갱신이 가능하기 때문에 쓸모 없는 것 까지 갱신을 할 필요가 없어 속도가 빠르다. 설명은 길게 써도 이해가 안되니 바로 어떻게 쓰는지 보자. 본문에서는 어떻게 통신을 하는지만 다루도록 하겠다 여기서는 크게 3가지 방법으로 AJAX를 사용해보도록 하겠다. ====================..

article thumbnail
[JS] 태그 안의 text(텍스트) 변경하기 ( feat. html() , text() )
FrontEnd/JavaScript 2021. 10. 21. 20:49

프로젝트를 하면서 태그안의 텍스트를 버튼 클릭에 따라 바꿔줘야 할 일이 생겼다. 해당 게시판은 Vue를 이용하여 인스턴스를 2개 생성하였고 A버튼을 클릭하면 A 뷰인스턴스가 호출되고 B버튼을 클릭하면 B 뷰인스턴스가 호출이 되는 방식이었다. 문제는 내가 텍스트를 바꾸려고 하는 곳의 위치가 뷰 인스턴스 범위 밖이어서 Vue로는 구현하기 어려울 것 같아, JQuery를 이용하기로 하였고 정리해보고자 한다. 방법 1. ) .text() 이용하기 $('클래스명 또는 id명').text("변경할 텍스트 내용"); JQuery 내장함수인 .text()를 이용하여 변경할 요소를 선택자로 선택한 뒤 .text()내에 변경하고 싶은 텍스트를 넣어주면 된다. 방법 2. ) .html() 이용하기 $('클래스명 또는 id명..

article thumbnail
[JS] 마우스 커서 올라갔을 시 이벤트 발생 ( feat. hover )
FrontEnd/JavaScript 2021. 8. 27. 13:44

기존에 게시판을 만들 때 제목 위에 마우스 커서를 올리면 게시판 table안의 tr태그의 background에 배경색을 주는 onmouseover과 onmouseout이벤트를 사용했다. (전자정부에 있던 기능을 가져오느라...) 그런데 같이 일하는 담당분의 조언에 따라 단순 css변경인데 굳이 javascript의 이벤트를 사용할 필요가 있냐고 해서 hover로 바꾸었다. 기존에 있던 onmouseover, onmouseout 이벤트를 활용한 코드는 다음과 같다. 해당 에 마우스 커서가 올라 갔을 경우 onmouseover이벤트가 실행되며 해당 코드가 실행된다. 해당 에서 마우스 커서가 나가면 onmouseout이벤트가 실행되면서 해당 코드가 실행된다. 이것을 다음과 같이 에 css를 주었다. 이렇게 c..

article thumbnail
[JS] 버튼 클릭시 스크롤 맨 아래로 이동
FrontEnd/JavaScript 2021. 8. 10. 12:23

특정 버튼을 클릭시 해당 페이지 스크롤을 맨 아래로 이동시키는 방법을 기록하고자 한다. 우선 @click을 이용하여 gotoBottom()이라는 메서드를 호출하는 게시글(버튼)을 만들도록 하자. 위의 이미지와 같이 gotoBottom이라는 메서드를 호출하는 게시글(버튼)과 스크롤을 해당 위치로 이동시킬 클래스명이 statFooter인 태그를 생성하였다. 여기서 statFooter는 이름과 같이 footer역할을 한다. 그리고 위의 이미지와 같이 gotoBottom 메서드를 선언해준다. 여기서 $('html')을 통해 html태그를 지정해준다. 그 뒤에 제이쿼리의 .animate함수를 사용하면 내의 모든 요소들에 애니메이션 효과를 부여할 수 있다. .animate에서 제공해주는 scrollTop과 offs..

728x90
반응형