본문 바로가기

JAVASCRIPT

(13)
회원가입 유효성 검사시 페이지 이동 혹은 포커스가 갑자기 사라질 때 회원가입 폼을 짜고 있는데 자바스크립트로 유효성 검사를 하다가 아주 사소한 실수로 버벅거리게 됐다. function chkForm() { if(form.userName.value == ""){ alert("이름을 입력해주세요"); form.userName.focus(); return false; } return true; } 여기서 더 추가적으로 검사해야하는 태그들은 if문으로 줄줄이 달아서 작성했다. 그리고 확인 버튼 요소로 함수를 실행시켰다. 근데 자꾸만 새 페이지로 로드가 되는 것이다. (메소드가 post면 새 페이지 로드, get이면 url에 value 값들이 전부 쳐덕쳐덕 붙어있음..) 처음엔 페이지가 렌더링되는지도 모르고 (메소드가 get상태여서) 왜 인풋창에 focus가 들어갔다가 갑자기 사..
토글클래스 이벤트 실행 시 innerHTML도 toggle이 될까? 제이쿼리에서는 toggleClass 로 클래스를 추가했다가 삭제했다가를 할 수 있다 (혹은 addClass, removeClass 반복) 순수 자바스크립트에서는 classList라는 프로퍼티를 활용해 클래스를 조절할 수 있다. el.classList.add("클래스명") //클래스 추가 el.classList.remove("클래스명") //클래스 제거 el.classList.toggle("클래스명") //클래스 넣었다뺐다 el.classList.contains("클래스명") //클래스 존재유무 확인 메서드 종류는 이렇게 있다. 그렇다면 자바스크립트에서 클래스를 넣었다 뺐다 함으로써 HTML 요소들의 스타일링을 왔다리갔다리 할 수 있을까? 예제로 다중의 div들에 addEventListener로 click..
[제이쿼리] fullpage.js 플러그인에서 스크롤시 동영상 자동재생이 멈출때 요즘도 fullpage를 자주 쓰는지 모르겠지만.. 한때는 포트폴리오 제작할 때는 무조건 fullpage로 제작해야하는 게 관습이라고 할 정도로 빈번하게 사용됐다. 요즘 이전에 만들어뒀던 포트폴리오를 정리하고 있는데, 스크롤을 할 때마다 자동재생이 멈추는 이슈를 발견했다. (엉망진창 대충대충 만들어내느라 몰랐던 나의 과오..) 영상은 video 태그를 이용해 mp4파일을 불러오기 했는데, video태그의 오류인가 싶어서 iframe태그로 동영상 URL을 붙여놔도 똑같은 현상이 반복됐다. 페이지 로드시 영상은 문제없이 자동재생되었으나, 스크롤만 하면 영상은 뙇 멈춰버린다. controls기능을 키면 다시 재생은 가능하나, 자동재생은 아니고 클릭을 해야만 재생이 가능했다.. 검색을 해봐도 안나오고, 이 이슈..
자바스크립트 배열 메서드 sort() 개념 완전 정리 자바스크립트를 다루면서 배열을 빼놓는건 말이 안되기 때문에, 배열과 관련된 메서드를 확실히 숙지해두는 게 좋다. 그 중 sort 메서드는 핵심중의 핵심이니까 제대로 정리해두자. 배열.sort() 보통 위와같은 식으로 작성되며, 괄호 안에 아무런 파라미터도 넣지 않으면 오름차순으로 정렬시키는 기본적인 성질이 있다. 숫자 정렬시 0부터 순서대로, 영문자는 a부터 순서대로 나오는데 숫자는 아스키 코드대로 정렬된다 let num = [1, 4, 10, 222, 5, 31]; num.sort(); console.log(num) // 1, 10, 222, 31, 4, 5 아스키 코드가 아닌 1, 4, 5, 10, 31, 222 순으로 정렬하고 싶다면 sort((a, b) => a - b) 로 작성하는 것이 좋다. ..
iframe모달 창(새창)에 draggable 드래그엔드랍 기능 넣기 새로운 창을 띄우는 게 귀찮아서 iframe을 이용해 모달창을 만들었다.  요 iframe 창을 드래그앤드랍 할 수 있게 제이쿼리 플러그인을 사용했다. 제이쿼리 플러그인인 draggable을 넣으려니, iframe에 넣어야할 지 iframe을 싸고 있는 부모요소에 넣어야할지 좀 고민되더라. iframe에 일단 넣어봤더니, 역시나 창 안에 iframe 영역만 이동한다. 요런식으로! 그래서 draggable 기능을 찾아보니 handle이 있더라! handle을 적용하니 handle 부분으로 이동이 가능해짐. html은 대략 이렇게. .popup{position:fixed; top: 50%; left: 50%; } .handle{position: absolute; top: 0; left: 0; z-index..
array와 string 둘다 쓰이는 메서드 slice() slice() 메서드는 array 배열과 string 문자열에서 다 사용되는데, 쓰다보니 조금 헷갈려서 정리한다. slice는 단어뜻 그대로 값을 잘라내는데에 쓰인다. let arr = ['hope', 'jin', 'monster', 'jimin', 'kooki', 'taetae', 'suga'] arr.slice(3); console.log(arr) // 결과는 'jimin', 'kooki', 'taetae', 'suga' slice(n); n번째 인덱스의 값부터 끝의 값까지 불러온다. slice(a, b); 파라미터가 2개 오면, a를 시작으로 b-1까지의 값을 불러온다. slice(-n) 음수가 오게 되면 끝(오른쪽)에서부터 왼쪽 방향으로 n개의 값을 불러온다. string도 마찬가지다. let s..
자식 iframe 새창 열고닫기 + submit 후 리로드 방법 iframe으로 팝업창을 열고 닫는 기능을 만들었다. 우선 부모격인 페이지에 팝업창 열기 pop의 아이디를 가진 div로 감싸주고 요기에 스타일을 준다. iframe은 width:100%; height:100%으로 맞추면 보수할 때 좀더 간편하다. 버튼을 누르면 팝업창이 뜨도록 함수도 짜준다. function openPop(src, w, h){ var popup = document.getElementById('popup'); document.popupframe.src = src; //팝업으로 띄울 자식넘의 주소를 프레임의 src 값으로 넣는다. popup.css({ //갑분 제이쿼리..ㅎ 'width' : w + 'px', 'height' : h + 'px' }).show(); } function clo..
[제이쿼리] 반응형 3depth 메뉴 슬라이드 토글 이벤트 만들기 (전파 방지하는 법) 요즘 반응형 페이지를 만들고 있는데, 자꾸 기초적인 부분에서 버벅거려서 또다시 공부&복습 겸 블로그에 정리하려 한다. 오늘은 3depth 메뉴에 이벤트 효과를 넣었는데 이벤트 전파 때문에 원하는 효과가 제대로 작동하지 않았음. ** 구현하고자 했던 효과는 PC일 때는 2depth까지만 보이고 클릭시 바로 링크로 이동. 모바일에서는 클릭이벤트를 줘서(링크로 이동하지 않고) 3depth까지 하위 메뉴들이 슬라이드 토글되는 효과가 나타남. 최하위 메뉴인 3depth(그림에선 소메뉴)를 눌러야 링크 이동. 문제는 메뉴가 3depth까지 있음. 2depth 메뉴 버튼을 누르면 3depth가 안뜨고 1depth 메뉴 창이 슬라이드 업 됨.. 그리고 PC에선 클릭시 a태그 작동해야하는데 모바일에서는 막아야함.. 2d..
제이쿼리 버튼 클릭 이벤트 - 버튼 외 화면 다른 곳을 누르면 효과 제이쿼리는 비교적 속도나 크기 등 경쟁력 면에서 뒤떨어지면서? 사양될 전망이라는 라이브러리지만.. 그럼에도 작성법이 매우 간단해 현업에서 아직까지도 많이 써먹고 있다.. 오늘은 버튼 클릭 이벤트를 정리하다가 잊었던 is() 메서드를 다시 떠올림. 정리 차 게시물을 올리게 됐다. 버튼 외에 화면 아무 곳이나 클릭하면 버튼에 특정 효과를 주는 이벤트를 작성한다. 전체를 싸고 있는 요소가 필요하다. 페이지를 감싸고 있는 요소를 .container 라고 명명. 버튼은 button 클릭하면 하단으로 메뉴 리스트가 슬라이드 되어 나타난다. 메뉴버튼 메뉴1 메뉴2 메뉴3 메뉴4 $('.btn').click(function(){ //우선 버튼 클릭 이벤트 먼저 만들어 주고 - 버튼에 스타일 바뀌는 on 클래스 입혀주고..
헷갈리는 자바스크립트 메소드 indexOf() 개념 잡기 indexOf()는 array와 string 둘다 사용 가능한 메소드다. 찾고자 하는 값이 문자열 혹은 배열에서 몇번째에 오는지를 알려준다. 또 찾는 값이 문자열 혹은 배열에 있는지 없는지 확인하는 함수를 짤 때 많이 이용한다. 우선 기본적인 개념을 살펴보자. (배열로 보자) indexOf('찾고자 하는 값', '시작점(생략가능)') array = ['min', 'hope', 'jin', 'kok', 'hope']; array.indexOf('hope') // 1 array.indexOf('suga'); // -1 배열의 순서는 0부터 시작하므로 'hope'의 순서는 1번째다. 그리고 만일 ('hope'처럼) 배열에 동일한 값이 2개 이상있을 경우엔 무조건 제일 앞에 위치한 값을 반환한다. (검색의 기본..