질문노드의 이동과 if문에 관한 질문입니다.

안녕하세요. 주말 잘 보내시고 계시는가요?헷갈리는 것이 있어서 이렇게 질문을 올려봅니다. <style> body { font-size: 9pt; font-family: "굴림"; } div, p, ul, li { border: 1px #eeeeee solid; margin: 10px; } ul { padding: 10px; } li.select { background-color: #ccc; }</style><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script> /* 예제04: 실행화면처럼 클릭한 메뉴 아이템을 세 번째 메뉴(menu3)의 다음 노드로 이동시켜 주세요 */ $(document).ready(function() { var $menu = $("ul.menu"); $("ul.menu li").click(function() { if ($(this).hasClass("select") == true) return; $(this).insertAfter(".select"); }) });</script><body> <ul class="menu"> <li>menu1</li> <li>menu2</li> <li class="select">menu3</li> <li>menu4</li> <li>menu5</li> <li>menu6</li> </ul></body>위 소스를 보시면if구문의 뜻을 모르겠습니다. 즉, if구문을 해석하면,클릭한 li가 select 클래스를 가지고 있다면 리턴하라는 말인데..이게 무슨 뜻인지 감을 못 잡겠네요. 실험적으로 if구문을 없애고 해봐도,,별차이가 없더군요.책에는 왜 if구문이 나왔는지,,이게 뜻하는 바가 뭔지 그게 궁금합니다. 늘 답변에 감사드리오며, 주말 잘 보내세요. ^^

2.3K

kimho·2017-09-17

올리신 소스를 보시면 li 영역을 클릭했을 때 .select 클래스를 갖고 있는 li 아래에 현재 클릭한 li를 삽입하도록 되어있습니다.소스 상의 if문은 이미 .select 클래스를 갖고 있는 li를 클릭했을 때에 대한 처리를 한 것입니다.즉, 이미 .select 클래스를 갖고 있는 li인 3번 menu를 클릭했을 때는 아무 것도 하지 않도록 처리한 코드...

핀란디아· 8년전

질문방금 질문올린 if($selectMenuItem)에 대해서 다른 식으로 질문을 드립니다.

2.4K

kimho·2017-09-13

네, 이해하시는 개념이 정확하게 맞습니다.일전에 답변 드렸던대로 변수 값이 null이면 false로 취급됩니다.따라서 null인 경우 false로 취급되어 if문이 실행되지 않다가 중간에 값이 할당되면서 true로 취급되는 것입니다.

핀란디아· 8년전

질문if($selectMenuItem) 관련 질문을 다시 올립니다.

2.5K

kimho·2017-09-13

http://devsnote.com/asks/109 에 다시 정리해서 올리신 질문과 답변을 참고하시면 되겠습니다.

핀란디아· 8년전

질문if문에서 true/false 체크에 관하여

8.5K

kimho·2017-09-11

자바스크립트 뿐만 아니라 대부분의 프로그래밍 언어에서는 변수 값이 무엇이냐에 따라 false로 취급되는 경우들이 있습니다.예를 들어 다음과 같이 변수 값이 0이면 이것은 false로 취급됩니다.var x = 0;if(x) { // x가 false이므로 if문 블럭은 실행되지 않음} 위와 같이 변수 값 자체가 false로 취급되...

핀란디아· 8년전

질문jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다.

<head> <script> /* 예제 03: DOMContentLoaded 이벤트와 load 이벤트의 차이점 */ $(document).ready(function() { document.write("width = "+ $("#target").width()); }); </script> </head> <body> <img src="./images/logo_01.jpg" id="target"> </body> 위와 같은 소스가 있습니다. 책에 이렇게 나와 있는데요.."DOMContentLoaded 이벤트는 웹브라우저가 웹페이지를 읽은 후 태그와 1:1로맵핑되는 DOM객체를 생성한 후 발생합니다. 여기서 주의할 점이 있는데요.이 이벤트가 발생한 시점에는 이미지나 플래시같은 무거운 콘텐츠는 아직 로드되지않았다는 점입니다."이렇게 내용이 있습니다. 일단 위 소스를 실행하면width = 0 이렇게 나옵니다. 그리고 다시 페이지를 새로고침하면 width=430 이라고이미지의 사이즈가 나옵니다. 제가 알기로는 $(document).ready(function(){a}); 이 것은a를 실행하기 전에, 웹페이지를 다 읽을 동안 대기하고 있다가,,,웹페이지가 준비가 되면 ,,즉, 웹페이지를 다 읽으면..a를 실행하는 구문인데요.맞는지요? -.=;;그렇다면, 웹페이지를 다 읽었다는 것은(ready()라는 것은) 위 페이지의 모든 html(body,,,등등)을모두 다 읽었다는 의미입니다.그런데도, width = 0 이렇게 첨에 나오는 이유는,,,웹페이지내의 모든 html을 "일단" 다 읽었으며, 해당 html문서내의 모든 태그에 대해서 각각의 DOM객체를 다 생성했다.하지만, html문서에 있는 이미지는 ,,물론 img태그를 다 읽었고, 해당 DOM객체도 다 만들어놓긴했지만,,진작 이미지는 아직 서버로부터 다운받은 상태가 아니라서, 해당 이미지의 가로/세로 사이즈는 일단 아직은 모른다.그래서, 해당 위치에 이미지가 있다는 것은 알고 있지만,그 이미지가 아직 다운이 완료가 된 상태가 아니라서, 그 이미지가 포함한 자세한 속성(size)까지는 아직 모를수밖에 없다.그래서, 일단 width는 0 으로 해놓은 것이다..물론, 아무리 초고속 인터넷을 사용하지만, 무거운 이미지가 아니라, 비교적 가벼운 이미지라해도,,브라우저가 hmtl문서를 읽은 후 나타내는 속도가,,이미지가 다운되는 속도보다 더 빠르기 때문에 이런 오차가 발생하는 것이다.만일, 서버에서 이미지를 다운하는 속도가,,,브라우저가 html문서를 다 읽은 후나타내려고 하는 속도보다 빠르다면,width = 430 이라고 첨부터 나온다..이렇게 해석하는 맞는 해석인가요? -.=;;;그래서, 이렇게 다운이 오래 걸리는 큰 이미지의 경우에웹페이지가 나오자마자 width = 430 과 같이 나오게 하려면그 경우에는window.onload=function() {a} <<<== 이 구문을 사용하라고 하네요..즉, 위 구문은 웹페이지내의 html뿐만 아니라,,삽입된 컨텐츠까지도 전부 다운로드가 끝난 지점에서 a를 실행한다고 하네요..저의 생각이 맞는지,,확인을 좀 부탁드립니다. -.=;;;

3.6K

핀란디아·2017-09-09

아. 보다 더 구체적으로 자세히 설명을 해주셔서 깊은 감사를 드립니다. 미세먼지가 많은 오늘, 건강유의하세요.^^

kimho·2017-09-09

지금까지 올리신 질문 중에 가장 간단하게 답변을 드릴 수 있겠네요.생각하시는 원리가 맞습니다^^$(document).ready()는 document 객체에 대해서 완료 상태를 체크하기 때문에 DOM이 완료된 상태에서 실행되는 것이구요,window.load는 window 객체에 대해 완료 상태를 체크하기 때문에 모든 프레임이나 객체나 이미지가 모두 로딩이 완...

핀란디아· 8년전

질문addEventListener() 함수의 인자에 관하여

7.6K

kimho·2017-09-09

먼저 첫번째 질문에 대해 답변 드리겠습니다. addEventListener() 함수의 세번째 인자에는 이벤트의 발생 순서를 정의하는 값을 넘길 수 있습니다.올리신 예제에서는 현재 false값으로 지정되어있네요.이 값은 DIV 태그가 중첩되어 있는 경우에 어떤 DIV부터 이벤트를 처리할 지를 지정합니다.따라서 올리신 예제에서는 중첩된 DIV가 없기 때문에 f...

핀란디아· 8년전

질문setInterval() 함수에서 정하는 시간에 관해서입니다.

안녕하세요.^^오늘도 잘 지내시고 계시는지요? 오늘도 공부를 하다가 잠깐 궁금한 것이 있어서 이렇게 질문을 드려봅니다. $(function(){ $clock = $('#clock'); nowTime();});function nowTime(){ setInterval(function(){ var objDate = new Date(); var hours = objDate.getHours(); var min = objDate.getMinutes(); var seconds = objDate.getSeconds(); $clock.html(hours + ' : '+min + ' : ' + seconds); },10) // <<<== 이곳의 숫자를 이렇게 한번 10으로 해봅니다.} 위 구문입니다. 만일 시간을 '10'정도로 아주 짧게 정해버리면,,백분의 1초마다 setInterval()함수가 실행되기 때문에컴퓨터나 웹브라우저에 무리를 줄까요..? -.=;;;

3.0K

kimho·2017-09-08

브라우저마다 약간씩의 차이는 있겠습니다만 setInterval() 함수 자체는 브라우저의 성능에 영향을 주지는 않는 것으로 보시면 됩니다.함수 내부적으로 비동기와 큐를 사용하기 때문에 알아서 성능에 최소한의 영향을 주도록 만들어져있습니다.만약 실행이 느려진다면 setInterval() 함수의 문제라기보다는 함수 내부에 구현한 코드 자체가 성능에 영향을 줄 ...

핀란디아· 8년전

질문글자 출력과 alert() 문제

/* 예제 02: 입력받은 문자열을 1초마다 한 문자씩 출력하기 입력받은 문자열을 1초에 한 문자씩 #panel에 출력해 주세요. 모든 문자를 출력하면 “종료됐습니다.” 라는 알림메시지를 출력한 후 타이머를 정지시켜 주세요. */$(document).ready(function() { var str = window.prompt("문자를 입력해 주세요."); var $output = $("#output"); // 여기에 풀이를 입력해 주세요. var index = 0; var timerID = setInterval(function() { // index에 해당하는 문자 구하기 var ch = str.charAt(index); // 문자 출력 $output.append(ch); // 다음 문자 인덱스 구하기 index++; // 만약 모든 문자를 출력했다면 타이머 정지 if (index >= str.length) { clearInterval(timerID); alert("종료됐습니다."); } }, 500);})위 구문을 실행하면 가령 date를 입력하면date문자의 length는 4입니다.그러나 문자열의 첫번째는 ,,즉 charAt(0)은 d 입니다. 0부터 시작하는데요..위 구문을 실행하면 index가 3이됐을때,,,즉 var ch = str.charAt(3); 이때 e를 출력합니다.그리고 바로 아래에index++; 가 있으므로 index는 4가됩니다.그러면 4는 즉, index(=4) >=str.length 조건이 맞기 때문에clearInterval이 되고 alert 내용이 뜹니다.즉, 순서를 본다면index(3)의 문자인 e가 먼저 출력된 후,,,그 아래의 증감식과 조건문에 의해서alert창이 떠야하는데요...막상 실행해보면,alert창이 먼저 떠버리고, 확인을 누른후에 'e'가 출력이 됩니다. 구문의 순서를 보면 먼저 date가 다 뜬 후 alert창이 떠야하는 것이 정상같습니다. 즉, var ch = str.charAt(index); // 여기서 index값이 3이되면 ,$output.append(ch); //date가 다 출력됩니다.index++; //그런후 여기서 index는 4가 되기 때문에 밑에,,,,if (index >= str.length) { // 이 조건식이 충족되어서 alert창이 뜹니다.왜냐면 str.length의 값은 4이기 때문입니다. clearInterval(timerID); alert("종료됐습니다.");위 순서를 잘 보면,, 분명히,,,,date가 전부 다 출력된 후에 alert창이 떠야하는 것이정상인데,,,,dat만 뜨고 alert창이 뜹니다. alert창에서 확인을 누르면 alert창이 사라지고, 바로 나머지 문자인 'e'가 떠서 최종으로 date가 됩니다.str.length는 1로 시작하는 단순한 문자열의 갯수이며, 따라서date문자의 str.length는 4입니다.charAt()는 d->charAt(0), a->charAt(1)......e->charAt(3) 이렇게 되는데..위 구문은 순서가 좀 이해가 안됩니다...date에서 마지막 문자인 e가 출력되기도 전에 alert이 먼저 떠버리네요..왜 이런 현상이 발생되나요..? =.-;;;

4.3K

kimho·2017-09-07

자바스크립트의 alert() 함수는 브라우저 다이얼로그 창을 띄우는 함수입니다.그런데 이 브라우저 다이얼로그 창의 특징이 있는데요, 다이얼로그 창이 뜨면 브라우저에서 일어나는 모든 실행을 정지시킨다는 것입니다.즉, 브라우저에서 실행되는 모든 동작을 정지시키면서 다이얼로그를 띄우게 됩니다.아마도 이상하다고 생각하시는 부분은,올려주신 소스 코드에서는 $outp...

핀란디아· 8년전

질문setInterval() 함수에 관해 질문드립니다.

그림을 첨부했습니다. 한가지 실험을 해봤습니다. 즉, 그림에서 왼쪽의 코딩순서번호 50번째 줄과 66번째 줄을 빼봤습니다.그런 후 버튼을 1번째 누르면 작동을 합니다. 그리고 멈춤을 1번째 누르면 멈춥니다. 다시 시작을 누르면 작동하는데,무심코 두번째로 또 눌러보니,,더 빨라집니다.이때, 멈춤버튼을 한번 누르니,,이전 속도로 돌아옵니다.그래서, 이젠 멈추게 하려고 또 멈춤을 누르니,,,멈추지가 않습니다.다시, 페이지를 리프레쉬해서시작버튼을 누르니,,물론 움직이는데,또 시작버튼을 마구 계속 누르니,,누를수록 물고기가 좌우로 더 빠르게, 컴사양이 받쳐주는 한계까지마냥 빠르게 움직입니다.if(timer==0){...} <<= 이것을 빼니까 저렇습니다. if(timer==0){...} 으로 둘러싸면 시작버튼을 막 눌러도 속도가 올라가지 않고,원래대로 움직입니다.왜, if(timer==0){..} 을 뺀 후 시작버튼을 누르면 누를수록 물고기가 빨라지는 건지,,궁금합니다. =..-;;;if(timer==0){..} <<= 이것이 있고 없고가 어떤 차이를 발생시키는지 궁금합니다. -..=;;;;;예제 코드 실행 주소입니다.https://jsfiddle.net/k90sabc7/1/

4.4K

kimho·2017-09-03

질문 주셔서 감사합니다.올리신 예제를 보면서 설명을 드리겠습니다.처음에 시작 버튼을 누르면 $('#btnStart').click(...) 함수가 실행이 됩니다.이 함수를 보시면 다음과 같이 if문이 있습니다.if(timer==0)즉, timer가 0인 경우에 setInterval(...) 함수가 실행됩니다.소스를 보시면 처음에 timer는 0이라고 선언했기...

핀란디아· 8년전

질문javascript beginner입니다. ^^; 질문을 좀 드려봅니다.

안녕하세요. html5와 css3은 나름대로 공부를 했고, jquery 를 공부하다가 javascript에 대한 기초가 없어서 javascript를 책만 보고 독학으로 공부중입니다..=.-;javascript에 관한 꼼꼼한 설명이 잘 된 책을 만나지 못해선지,,갈수록 조금 헷갈리는 부분이 있어서 여기다 질문을 올려봅니다..일단, 전체구문입니다. ==============<script> /* 예제 03: 1초에 한번씩 숫자 값 출력하기 변수 값을 1초에 한 번 1씩 증가시키고 이 값을 화면에 출력해 주세요. 단, 정지버튼(#stop)을 누르면 더 이상 실행되지 않게 타이머 함수를 중지시켜 주세요. */ $(document).ready(function() { var $output = $("#output"); var count = 0; var timerID=0; // 이 부분을 잘 모르겠습니다. 왜 숫자 0이 들어가는지요? timerID = setInterval(function() {count++;$output.text(count); }, 1000); $("#stop").click(function() { clearInterval(timerID); }); }) </script></head><body><button id="stop">멈춤</button><div id="output"> 0</div></body></html>============위 구문은 원문입니다. 이렇게 돼어 있는데요..$(function(){ var count = 0; $output = $("#output"); setInterval(function(){ count++; $output.text(count); },2000); }); 위 함수는 제가 잘 이해를 합니다..그런데, clearInterval()함수를 사용할때,,var timerID=0; // 이 부분을 잘 모르겠습니다. 왜 숫자 0이 들어가는지요?timerID = setInterval(function() { count++; $output.text(count); }, 1000); $("#stop").click(function() { clearInterval(timerID); });위에 밑줄을 친 구문은 이해를 하겠는데,,왜 var timerID에 숫자 0 이 들어가는지를 모르겠습니다. -.-;;;그래서, 일단은 맨위 원문에서 var timerID = 0; 이것을 삭제를 해도작동이 되더군요....그렇다면, 왜 책의 저자는 굳이 var timerID = 0; 이라는 변수는 넣었는지..설령 그런 변수는 넣는다해도 왜 var timerID에 0을 넣었는지 궁금합니다. -.-;;;;귀찮은 질문올린 것 같네요...^^;;자세한 설명을 해주시면 감사드립니다...^^;;;;;

2.0K

kimho·2017-08-24

앞으로 답변을 더욱 쉽게 해 드리도록 하겠습니다. 많이 많이 질문주세요~^^

핀란디아·2017-08-23

네. 감사드립니다. 프로그래밍이 생소하지만,,신세계를 가본다는 셈치고,,,질문을 드리겠습니다. 외람된 ,좀 그렇지만,,가급적 초보의 입장에서 초보가 잘 이해를 할 수있게,,,답변을 주시면 정말 정말 감사드리겠습니다. -.-;;;;;;

핀란디아

통계

질문노드의 이동과 if문에 관한 질문입니다.

질문방금 질문올린 if($selectMenuItem)에 대해서 다른 식으로 질문을 드립니다.

질문if($selectMenuItem) 관련 질문을 다시 올립니다.

질문if문에서 true/false 체크에 관하여

질문jQuery에서 ready()와 window.onload = function()의 차이점에 대해서 궁금합니다.

질문addEventListener() 함수의 인자에 관하여

질문setInterval() 함수에서 정하는 시간에 관해서입니다.

질문글자 출력과 alert() 문제

질문setInterval() 함수에 관해 질문드립니다.

질문javascript beginner입니다. ^^; 질문을 좀 드려봅니다.