Language/Javascript (14) 썸네일형 리스트형 [JavaScript/jQuery] ajax 비동기통신 간단하게 사용하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [jQuery] ajax 비동기통신 간단하게 사용하기입니다. Intro 먼저 ajax 비동기통신은 javascript를 더 쉽게 사용하기 위한 jquery 라이브러리의 한 메소드로 실무에서 정말 많이 쓰이는 라이브러리로 무조건 습득해야되는 것들 중 한가지 이다. 일반적인 MVC패턴을 통해서 개발을 진행할 때 controller에서 Return되는 값은 ViewResolver에 의한 Prefix, Suffix를 통해 jsp파일명을 반환한다. 하지만 페이지 이동이 아닌 동일한 페이지 내에서 통신을 하기 위해서는 ajax를 사용한다. 여기서 비동기통신이란 앞선 요청(request)에 대한 응답(response)를 기다리지 않고 계속해서 뒤의 요청.. [JavaScript] URL 주소 복사하기(.select(), copy) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] URL 주소 복사하기(.select(), copy) 입니다. Intro 현재 프로젝트 업무를 진행하면서 이벤트 페이지를 개발하고 있다. 그 중 몇 이벤트에서 카카오톡 공유하기와 URL 복사 버튼을 구현하였다. 개발함에 있어 생각보다 더 많이 고민하고 찾아보았던 URL 복사하기 기능에 대해서 설명하고자 한다. 라이브러리를 이용한 방법도 있지만 오늘은 javascript를 이용한 간단한 방식에 대해 알아보자. 1. Select (선택할 url 드레그) 먼저 html태그를 아래와 같이 작성해준다. 버튼을 클릭했을때 element.select(); 를 통하여 input 태그에 작성된 내용을 선택한다. (MDN 참고) > 여기.. [JavaScript] 휴대폰번호, 이메일 정규식 체크하기 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] 휴대폰번호, 이메일 정규식(Regular Expression) 체크하기 입니다. Intro 현재 프로젝트 진행 中 하나의 input tag를 통하여 휴대폰 번호와 이메일을 모두 입력 받아야 하는 경우가 생겼다. DB에 사용자가 핸드폰 번호를 입력했는지, 이메일을 입력했는지 판단했어야 했기 때문에 고민했었다. 꼭 정규식 체크가 아니더라도 이런 경우에 사용한 다는 것을 알고 있으면, 추후에 도움이 될일이 생길수 있으니 집중해보자! 1. HTML 먼저 html태그를 아래와 같이 작성해준다. 이제 위 SUBMIT(제출)버튼을 클릭했을 때, 휴대폰인지 이메일인지 판단하여 alert창을 띄워 보도록 하자. 2. Script 버튼.. [JavaScript] event.preventDefault() 간단 사용법 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] event.preventDefault() 간단 사용법 입니다. Intro 태그나 과 같은 태그처럼 몇몇 태그는 특정 기능을 가지고 있다. a태그는 href를 통해 특정 사이트로 이동하거나, submit태그는 값을 전송하면서 창이 새로고침(reload)된다. 이런 태그의 이벤트 기능을 preventDefault를 통하여 동작하지 않도록 막을 수 있다. preventDefault란? 위에 간단히 설명한 부분에 더 추가를 하자면, preventDefault를 호출하게 되면 일반적으로 브라우저의 구현에 의해 처리되는 기존의 액션(동작)이 진행되지 않고, 결과적으로 해당 이벤트가 발생하지 않는다. DOM을 통한 이벤트 동작을 .. [JavaScript] setTimeout() Method를 이용한 타이머 함수 간단 사용법 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] setTimeout() Method를 이용한 타이머 함수 간단 사용법 입니다. Intro 업무를 진행하다보면 javascript에서 일정 시간이 지난 후 특정 함수를 실행해야될 일이 생긴다. 예를 들면 페이지 로드 후 일정 시간이 지나면 알럿을 띄워준다거나 하는 경우이다. 이럴 떄 Window 타이머 함수인 setTimeout()를 이용하면 좋다. setTimeout() 란? Window함수로써 위에 간단히 설명한 것 처럼 내가 지정한 특정 시간이 지난 뒤 동작하게 한다. 아래 문법을 확인해보자. [참조] var timeoutID = window.setTimeout(func[, delay, param1, param2,.. [JavaScript] alert() method 확인 후 링크 이동(엑션) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 주제는 [JavaScript] alert() method 확인 후 링크 이동(엑션) 입니다. Intro 이번 포스팅에는 alert() 메소드 확인 버튼 클릭 후 링크 이동 등 특정 엑션을 진행하는 방법입니다. 사실 간단하게 생각해보면 엄청 쉽게 처리할 수 있는 부분인데 실수 할 수 있는 부분에 대해서, 또는 다른 방법(?)에 대해서 설명하고자 합니다. javascript code 간단히 버튼 하나를 생성하고 그에 맞는 스크립트를 작성한다. 위와 같이 작성한다면 당연히 알럿이 먼저 호출되어 작동하고, 그 다음 페이지 이동을 할 것이다. 이와 같이 간단한 코드가 그럼 무엇이 궁금한 것일까 ? 비동기 통신을 조심하라! Warn(주의) 만약 어떤 특정 엑.. 이전 1 2 다음
