목록WEB/JAVASCRIPT (41)
Knowledge Map
출처 : https://github.com/rwaldron/idiomatic.js/blob/master/translations/ko_KR/readme.md 자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙이 문서는 계속 바뀝니다. 주변의 코드를 더 낫게 만들기 위한 좋은 아이디어가 있으시면 알려주세요. Github에서 fork, clone, branch, commit, push, pull request 하는 방법으로 참여해 보세요.Rick Waldron @rwaldron, githubMathias Bynens @mathias, githubSchalk Neethling @ossreleasefeed, githubKit Cambridge @kitcambridge, githubRaynos githubMatias..
오늘 이거 때문에 고생을 하였다.덕분에 Ajax가 뭔지에 대해서 좀더 잘 알게되었지만.. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109/* Ajax 테스트 함수 실행 */testFunction("../test.php", function(data){ alert(data); }); /*XMLHttpRequest 객체는 모든 Ajax호출의 핵심이다. 1. XMLHttp..
출처 http://webdir.tistory.com/94 http://blim.co.kr/archives/160 http://div.or.kr/js-studying/document.querySelectorAll classList를이용하면 쉽게 클래스 이름을 고치고 바꿀수 있다.document.querySelectorAll은 쿼리가 아니라 태그 셀렉터(아이디, 클래스 이름, 태그 이름, 태그이름 하위태그이름 등)를 이용해서 여러개의 태그 객체를 담는 배열들을 반환한다. 아이디 조차도 배열로 반환한다. 즉 querySelector, querySelectorAll로 가져온 배열들에 대해서 classList를 이용해서 가져온 배열의 클래스의 이름 등을 고치거나 바꿔줄수 있는 것이다. 이 두개는 서로 연달아 잘 ..
출처 http://blog.daum.net/_blog/BlogTypeView.do?blogid=0K7lr&articleno=7553407 getElementByName 사용할때 value 값이 안 먹혀서 당황할수 있다. document.getElementsByName('abc').value = "abc"; 이렇게 해도 값이 안 들어갈수 있다.그 이유는 getElementByName 는 하나의 name 배열명도 배열로 인식하기 때문이라고 한다. 따라서 document.getElementsByName('abc')[0].value = "abc"; 이렇게 배열 넘버를 붙여줘야 잘 된다.
https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/ http://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage http://programmingsummaries.tistory.com/149 이따가 다시 정리 oncontextmenu 는 자바스크립트에서 오른쪽 마우스와 관련된 것이다.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051// 타입 확인하기var test = 'test';console.log(typeof(console.log)); //소수점 올림, 버림, 반올림var number = '321.321';console.log(Math.ceil(number)); // 올림console.log(Math.round(number)); // 반올림console.log(Math.floor(number)); // 버림 //소수점 자릿수 표기 (반올림) toFiexed() : 숫자를 문자열로 변환 / 지정된 소수점 이하 숫자를 반올림 출력toExponential() : 숫자를..
php로 만들어진 회원가입 페이지를 테스트 하다가 회원 가입 완료 화면에서 새로고침을 하면동일 아이디로 무한 회원 가입이 되는 버그를 포착했다. 이것은 이전페이지에서 post로 보낸 값을 완료 페이지에서 include를 통해서 php파일이 DB에 값을 보내서 저장시키기 때문에 일어나는거였다. 이걸 이용해서 버튼 하나를 더 누르면 로그인이 자동으로 되면서 결제 페이지까지 가는 거였지만 회원 가입이 중복으로 되는 것은 꽤나 치명적이고 게다가 동일 아이디가 2개 이상이면 따로 작동을 못하게 만들어놨기 때문에 이건 고쳐야 했다. 어떻게 할까 생각하다가 form action을 그 문제의 php 로 연결하고 그 후에 replace를 이용해서 완료 페이지로가도록 만들었다.더 깔끔한 처리도 있었겠지만 여튼 이렇게 했더..
머릿속에서 파이썬, 자바스크립트, 자바, AngularJS 언어가 뒤섞어 있는 와중에 헷갈리고 감이 안와서 진짜 핵삽질중.. ㅠㅠ... AngularJS로 구현하는 가장 쉬운방법. UI-bootstrap 이용해서 디렉티브 이용http://www.shanidkv.com/blog/angularjs-accordion 알고 보니 아코디언.. 많이 쉬웠다.그리고 한가지 알게 되었다. AngularJS는 결국 Javascript의 프레임 워크이기 때문에막히면 Javascript로 어떻게 만들지 생각을 해보고 적용하면 되고정 모르겠으면 그냥 javascript로 만들면 된다. 이거 하나만 이해하고 있어도 angularJS할때 좀 많이 덜 헤매일거 같다는 생각이 들었다. 일단 이번에 한 아코디언의 형태는 css의 di..
DOM 이란 무엇인가?DOM은 HTML에 대한 매핑 레이아웃 모델이자 자바스크립트가 HTML에서 특정작업을 할 수 있는 수단이다. DOM은 HTML도 아니고 자바스크립트도 아니지만 세가지는 서로 긴밀하게 연결되어야 있다. 이것은 엘리먼트의 조합(객체)이자 그러한 객체를 표시하는 순서(모델)이며 자바스크립트에서 제공하는 다양한 메소드를 이용해 돌아다니는 동안 전체 구조(문서)의 일부를 추가, 삭제, 수정하는 무한한 접저을 제공한다. HTML은 문서이며 문서안에는 수많은 객체로 구성돼 있다. 이러한 객체는 특정순서(모델)로 나타난다. DOM트리DOM은 웹 브라우저에서부터 시작한다. 웹사이트를 방문할 때 브라우저는 HTML을 문서로 렌더링하고 각 엘리먼트를 통해 읽으며, 그것들을 사용자에게 보여준다. 이 과정..
▼문서 객체 모델(DOM, Document Object Model)DOM은 책, 기사, 용어집 등 구조를 띤 모모든 문서의 윤곽이 기능하는 것과 굉장히 유사한 방식으로 기능한다. DOM에는 최상위 수준의 항목, 중첩된 항목, 그룹을 형성하는 덩어리(한 장에 포함된 여러 페이지와 책 한 권에 포함된 여러 개의 장과 같이)가 있다. 이러한 항목을 노드(Node)라고 하며 DOM안의 몯느 노드는 그것을 둘러싼 노드와 관계를 맺는다. 이러한 관계는 현실세계의 가족과 마찬가지로 부모, 자식, 형테의 형태를 가진다. ㅇ부모부모 노드는 다른 노드를 담고 있는 노드를 말한다. ex) 부모 : ||| 자식 : ..... ㅇ자식자식노드는 부모노드 안에 위치한다. ㅇ형제형제는 같은 레벨에 위치한다. 12..