반응형

javascript 29

라디오버튼 check속성

라디오버튼의 선택을 변경할 때 생겼던 일이다. 버튼을 눌러서 라디오버튼을 추가하는 간단한 작업을 진행했는데 분명 페이지의 소스상에서 radio버튼 속성에 checked가 있음에도 불구하고 라디오버튼은 선택되지않은 채 추가되는 상황이 반복되었다. ​ 그 이유는 기존 checked가 기본적으로 붙어있는 라디오버튼을 복사하여 이름만 바꿔 붙여넣는 상황때문에 발생하였다. ​ 왜인지는 정확히 모르겠지만 check 속성이 들어가있는 상태에서 태그를 복사하여 javascript로 html에 추가하게 되면 화면에서는 선택이 안된 상태로 라디오가 추가 되는 것이였다. var row = $('.row_perform').last().clone(); $(row).find("input:radio[name*='file_"+cnt..

화살표함수(Arrow Function)

일반적으로 함수를 사용할 때 function() 을 사용하는데 어느순간부터 () => 이런 식의 함수가 보이기 시작했다. 화살표함수라고 불리는 함수선언 방식인데 일반함수를 더 간결하게 표현하기 위해 개발되었다고한다. var a = function(){ return new Date(); } var a = () => { return new Date(); } var a = () => new Date(); 같은 함수 a를 일반함수 선언 방식과 화살표함수 선언 방식으로 나눠둔 예시이다. var a=10; var b = function(a){ return a*a; } var b = (a) => { return a*a; } var b = (a) => a*a; 인자가 있는 경우 var a=10; var b=20; va..

javascript var? let? const?

예전에 썼던 블로그를 보니 처음 코딩을 할 때는 막연히 var 도배를 했었구나... 다시 한 번 정리해보자 var javascript 예시들? 을 보면 꽤나 많이 보이는 선언 종류라고 생각한다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 이런식으로 변수 재선언시 오류가 나지않는다. 오류가 나지 않는게 왜 문제가 되느냐? 라고 하는 사람들이 간혹있다. 짧은 코드, 혼자만 사용하는 코드에서는 크게 문제될건 없다. 하지만 코드가 많아지고 여러 사람이 관리하게 된다면 어떻게 사용하게 될지 파악하기 힘들고 값이 바뀔 우려가 있다. 지금 생각해보면 코드가 길어..

javascript로 만든 jquery empty

let main = document.getElementById("main"); //jquery의 div.empty() 와 같은 기능 var tmp = Array.from(main.children); tmp.forEach(e => { e.remove(); }); main은 div를 id 로 가져왔다. 어느것으로 가져오든 상관없으며 .children 을 사용하면 collection 형태로 가져오는 것 때문에 Array.from 을 사용하였다. 바로 배열 형태로 가져온다면 Array.from 으로 변환하지 않고 바로 foreach 사용하면 될 듯 하다. ​ ​ 자바스크립트로 만든 함수로 따로 분리 //jquery의 empty 기능 구현 function j_empty($parameters){ let parame..

window/document , on/ready

웹페이지를 불러올때 처리 순서를 먼저 알아보자 1. 웹문서읽기 ㅡ> 2. DOM생성 ㅡ> 3. 페이징 로딩완료 $(document).on() / $(document).ready() 가 2번의 DOM생성시 실행되며 window.onload 는 3번의 페이징 로딩완료 후 실행된다. //1 $(document).ready(function(){ console.log("document.ready"); }); //2 $(window).ready(function() { console.log("window.ready"); }); //3 window.onload = function() { console.log("window.onload"); }; 위 같이 실행했을 때 순서는 1->2->3 이였어야햇다. 그리고 보통 저렇..

javascript sleep 함수

php에는 자체적으로 sleep 함수가 있다. //2초 딜레이 sleep(2); 하지만 javascript에는 딜레이 함수가 없다. 비슷하게나마 setTimeout 과 setInterval 이 있지만 해당 함수들은 일정 시간 이후에 해당 함수를 실행하겠다 라는 함수이고 php나 c에서의 sleep 같은 역할이 아니다. 그래서 javascript에서 쓰기위해 아래같이 만들었다. //딜레이 함수 function sleep (delay) { var start = new Date().getTime(); while (new Date().getTime() < start + delay); } 현재시간에서 딜레이(초) 만큼 해당 sleep을 돌며 코드 진행을 멈추도록 하였다.

반응형