Javascript
[Javascript] 자바스크립트로 form 폼체크 후 submit하기
1️⃣ html form태그에 action을 지운다. > onsubmit="return false;" 을 적어준 이유 : 폼체크 후 input내 내용이 삭제되지 않게 하기 위함임! (참고링크) 2️⃣ if문으로 폼태그의 정보를 확인한다. 3️⃣ form 프로퍼티를 활용하여 값을 준다. form.action = 'http://www.naver.com'; form.mothod = 'GET'; form.submit(); form 프로퍼티 action form데이터를 보낼 곳 elements 폼 안에 있는 요소를 선택할 때 사용함 설명 enctype application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함. multipart/form-data ..
[Javascript] 기본동작 멈춰! (e.preventDefault())
가끔 a태그가 a태그의 역할을 안해줬으면 하는때가 있다 (응?🤷♀️) a href에 #를 하고 onclick을 준다던가, a링크로 인식되면 좋겠지만 링크가 작동되지 않았으면 할때가 있다. 당장은 "이런걸 언제써ㅋㅋ" 싶겠지만 언젠간 한번은 필요한 순간이 온다. See the Pen 기본동작 제어 - e.preventDefault() by hoyashu (@hoyashu) on CodePen. dom객체의 click이벤트가 실행되는 순간 해당 이벤트의 정보를 e에 받아와서 e.preventDefault() 해주면 해당 클릭으로 실행되었어야하는 기본동작이 실행되지 않는다. 이러한 기능은 기본적으로 실행되어야하는 모든 기본동작에 해당된다. a태그, file버튼, submit버튼 등..
[Javascript] 이벤트 버블링(bubbling) 공부해보자🛁, 그리고 버블링 멈춰!보자(.stopPropagation())
버블링.. 매번 공부하고 의미는 대충 알고 있는데 확실히 정리해두고 싶다. (매번 까먹음;;🤦♀️) 일단 버블링을 글로 설명하자면, 본인의 자식요소까지 부모요소의 이벤트가 전파되는 것이다. 즉, 자식의 이벤트를 실행시켰는데 부모의 이벤트도 함께 실행되어 버리는 상황이다. 작동되는 상황을 보자면 아래와 같다. See the Pen 이벤트 버블링(bubbling) by hoyashu (@hoyashu) on CodePen. div3을 누르면 div3의 이벤트만 실행되었으면 하는데, div1, div2의 이벤트가 모두 발생한다. (= 자식의 이벤트뿐만 아니라 부모의 이벤트까지 실행되는 상황) 이러한 상황을 이벤트 버블링(bubbling)이라고 하는 것이다. 이러한 버블링을 막고, 자식을 클릭하면 자식요소의 ..
[ajax] 클릭시 데이터 가져오기
function getRecentComment() { $.ajax({ type: 'POST', url: './realtime_comment_ajax.php', data: 'lid=715', success: function(html) { document.getElementById("comment_wrap").innerHTML = html; } }); } $(document).ready(function() { getRecentComment(); }); document.onreadystatechange = function() { if (document.readyState === "complete") { if ($('#comment_wrap dd').length >= 5) { var passList = func..
[javascript/jquery] 오늘의 궁금점. 제이쿼리와 자바스크립트를 혼재하여 쓰면 어떤 문제가 있을까
오늘의 궁금점. 제이쿼리와 자바스크립트를 혼재하여 쓰면 어떤 문제가 있을까? 제이쿼리가 가장 잘하는건 다큐멘트 안에있는 오브젝트(dom)을 잘 찾아간다. 그 외에는 별로 없다. 자바스크립에 quearySelector가 생김으로 사용 빈도가 줄어들고 있다. 원래 제이쿼리는 jQuery(".green")이렇게 적는게 정석인데, $로 줄여서 쓰곤하는것이다. 제이쿼리 호출시에는 제이쿼리 호출 후에 사용해야한다. dom을 읽어와서 호출해야한다. 그래서 사용하는 방식이 $(document).ready(function(){}) => “dom이 다 로드되고 찾아라”라는 의미를 가지고 있다. 스크립트를 dom로드 후에 호출하고 싶을 때, 위치가 아닌 html코드만으로도 가능한데, ‘defer’가 있다. defer 는 j..
css애니메이션 시작 종료 시점 이벤트/트리거
var ani = document.querySelector(".ani"); ani.addEventListener("animationstart", function(e) { console.log("시작"); }, false); ani.addEventListener("animationend", function(e) { console.log("종료"); }, false); pilot376.tistory.com/49 CSS 애니메이션 시작 종료 시점 이벤트 CSS 애니메이션 구동 시 자바스크립트에서 시작 종료 시점을 알 수 있다. html css div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 2s l..
유튜브 iframe 영상 사이트 배경(백그라운드)로 적용하기
서버에서 배경 동영상을 1분짜리를 돌리려니까 트래픽이 훅훅 찼다. 그래서 유튜브의 트래픽을 쓰기로 했다..ㅋ github.com/stamat/jquery.youtube-background stamat/jquery.youtube-background Simple jQuery plugin for embedding YouTube videos as cover background - stamat/jquery.youtube-background github.com js와 html만 있으면 작동된다. 나머지는 작동에 필수가 아니다. 마지막에 나오는 추천영상은 변경된 유튜브 정책상 안보이게 할 수 없다.
채용 공고 API 모음 (잡코리아, 사람인, 커리어)
채용사이트에서 제공되는 API는 채용공고에 대한 정보를 대부분 받아올 수 있지만, 실제로 입사지원이나 이력서 등록 등의 채용공고 정보의 상세 열람을 위해서는 채용사이트에 접속하여야 이용하실 수 있는 형태이다. 잡코리아에 문의해본 결과 랜딩페이지를 잡코리아로 안하고 데이터로만 사용하면 안되냐고 물어는데, 안된다고 함.. 아마 모두 동일하게 적용될 것으로 예상됨 커리어 www.career.co.kr/api/? http://www.career.co.kr/api/? www.career.co.kr http://api.career.co.kr/open/read?jobno=19133626&openpid=VjfzNMrb5o8yb%2fLgS8rsPQ%3d%3d 아주큐엠에스(주) WEB 개발/ 운영 관리 솔루션.ASP.소프..
[오픈API] 공공 데이터 포털
www.data.go.kr/index.do 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr