연희동

setTimeout() 은 지정된 시간이 지난뒤 1회 실행되는 함수입니다. setInterval() 은 1회만 호출하려면 특정 조건을 만들어줘서 clearInterval()을 통해 멈춰주어야 하기 때문에 특정시간이 지난 후에 1회 사용하려는 목적이라면 setInterval() 보다는 setTimeout() 을 사용하는걸 권합니다. setInterval(), clearInterval()의 예제와 설명은 아래링크를 통해 확인해주세요. [[JQUERY]자바스크립트] - jQuery 048. 반복 타이머 setInterval() ,clearInterval() jQuery 048. 반복 타이머 setInterval() ,clearInterval() setInterval() 은 설정된 시간마다 반복되는 함수입니다...

이번에는 setInterval() ,clearInterval()을 활용해 타이머를 만들어 볼까 합니다. 먼저, setInterval()과 clearInterval()에 대한 사용법이라던지, 설명 및 예제는 아래 링크에 있습니다. [[JQUERY]자바스크립트] - jQuery 048. 반복 타이머 setInterval() ,clearInterval() jQuery 048. 반복 타이머 setInterval() ,clearInterval() setInterval() 은 설정된 시간마다 반복되는 함수입니다. 먼저 사용법을 보면, #code 01_01 setInterval(실행 함수 ,밀리초); setInterval(function(){ console.log("1초 마다 실행됩니다."); }, 1000); se..

setInterval() 은 설정된 시간마다 반복되는 함수입니다. 먼저 사용법을 보면, #code 01_01 setInterval(실행 함수 ,밀리초); setInterval(function(){ console.log("1초 마다 실행됩니다."); }, 1000); setInterval()은 매개변수로 '실행될 함수'와 '시간'을 받습니다. 이때 시간은 밀리초로 설정해줍니다. 1000 밀리초는 1초, 60000 밀리초는 1분 입니다. #code 01_02 var 함수명 = setInterval(실행 함수 ,밀리초); var timer = setInterval(function(){ console.log("5초 마다 실행됩니다."); }, 5000); setInterval()을 위와 같이 변수에 담을 수 있..

콜백함수는 함수내부의 처리 결과 값을 리턴하는데 주로 사용됩니다. 함수에서 사용되는 return문이 하는 기능을 용도에 맞게 바꾸는? 기능이라고 보시면 됩니다. 먼주 콜백함수의 기본적인 구조입니다. #code 1-1 //콜백 함수 구조. function 함수이름(){ ... 함수 구현 ... 함수 결과처리 } 함수의 구조는 #code 1-1 같이 생성합니다. 콜백함수는 위 구조에서도 '함수 결과처리' 부분에서 기능을 하게됩니다. 콜백함수를 이해하기 위해서는 return 의 기본적인 기능부터 이해해야 합니다. #code 1-2 //return 함수 function fnAdd(num1 ,num2){ //함수 구현 var result = num1 + num2; //함수 처리 return result; } al..

변수나 함수를 선언하는 방식에 대해서 알아보고자 합니다. 먼저 '리터럴' 방식부터 보면, (참고 하고있는 책에서는 '리터럴'이 직역하면 '원시' 라는 뜻이라네요.) #code 1-1 var num = 10; var str = "string"; var isEmpty = true; var aryNum = [1,2,3]; 위 방식이 '리터럴' 방식입니다. var num을 보면, 바로 숫자 10을 대입해서 선언했습니다. 문자열 또한 바로 문자열을 ""을 붙여서 선언하고, boolean 형 변수인 isEmpty 에도 바로 true 를 대입 했습니다. list 형식인 aryNum 에도 숫자 리스트를 []으로 감싸서 선언했습니다. 변수에 바로 대입하는 방식을 '리터럴' 방식이라고 합니다. #code 1-2 var n..

jqeury 함수기능에 대해 알아보겠습니다. 먼저 일반적인 함수의 구조입니다. #code 1-1 function() 함수이름(){ 호출시 실행구문 ....; } 위와같은 구조로 실행됩니다. 예제와 사용법을 보겠습니다. #code 1-2 $(function(){ fnCall(); }) function() fnCall(){ console.log("fnCall() 실행됨!"); } 먼저 함수이름 : fnCall() 함수를 만들고 기본 function()에서 호출했습니다. 호출 뒤 브라우져의 콘솔을 확인하면 fnCall()함수가 정상적으로 실행이된걸 확인 할 수있습니다. 다음으로, 매개변수가 있는 함수입니다. 함수의 ( )안에 매개 변수를 넘겨 줄 수 있습니다. 매개변수가 있는 함수의 구조는 아래와 같습니다. ..

$(function(){ for(var i=0;i

아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 Title $(function(){ // jquery 시작 /* 반복문 while() */ //#exBtn 클릭이벤트 $("#exBtn").click(function(){ //input 변수 var input = null; //반복시작 while(input!=5){ //prompt() 로 숫자 5를 받으면 멈춤. input = prompt("10-5 는 ???"); } }); }); #exBtn{ background-color: white; color: #3db39e; border:3px solid #3db39e; /* Gr..

아래는 예제입니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 Title $(function(){ // jquery 시작 /* 난수(랜덤한 숫자) 만들기 Math.random() */ //#buttionP 클릭이벤트 $("#buttonP").click(function(){ //Math.random var ranNum = Math.random(); $("#ranNaum").text(ranNum); //Math.random * 10 var test01 = ranNum*10; $("#test01").text(test01); //Math.floor(Math.random * 10) var..

아래는 예제입니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 Title $(function(){ // jquery 시작 /* 소수점 올림, 버림(절사), 반올림 */ //#buttionP 클릭이벤트 $("#buttonP").click(function(){ //test 숫자 var num = 0; //소수점 올림 num = 9.1; var ceil = Math.ceil(num); $("#ceil").text(ceil); //소수점 절사 num = 9.9 var floor = Math.floor(num); $("#floor").text(floor); //소숫점 반올림 ..

예제에 앞서, 아래는 이전에 올린 for() 예제 링크 입니다. 참고해주세요 [[JQUERY]자바스크립트] - jQuery 035. 반복문 for() [[JQUERY]자바스크립트] - jQuery 036. 다중 for() , 중첩 for() [[JQUERY]자바스크립트] - jQuery 037. for() 응용, 구구단 출력하기 [[JQUERY]자바스크립트] - jQuery 038. llist[](배열)을 활용한 for() [[JQUERY]자바스크립트] - jQuery 039. 반복문 for(), continue 아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 ..

예제를 보기에 앞서 아래는 이전에 올려둔 for() 예제입니다. [[JQUERY]자바스크립트] - jQuery 035. 반복문 for() [[JQUERY]자바스크립트] - jQuery 036. 다중 for() , 중첩 for() [[JQUERY]자바스크립트] - jQuery 037. for() 응용, 구구단 출력하기 아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* for() , continue ..

예제를 보기 앞서, 아래는 다른 for() 예제들 입니다. [[JQUERY]자바스크립트] - jQuery 035. 반복문 for()[[JQUERY]자바스크립트] - jQuery 036. 다중 for() , 중첩 for()[[JQUERY]자바스크립트] - jQuery 037. for() 응용, 구구단 출력하기 아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* list[](배열)을 활용한 ..

아래는 예제입니다.123456789101112131415161718192021222324252627282930313233343536373839404142 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* for() 구구단 */ $("#buttonP").click(function(){ var dan = prompt("출력한 단을 입력해주세요."); var texthtml = "" for(var i=1; i

아래는 예제입니다.12345678910111213141516171819202122232425262728293031323334353637 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* 다중 for() */ $("#buttonP").click(function(){ for(var i=0; i[[JQUERY]자바스크립트] - jQuery 035. 반복문 for() 예제를 라인별로 보겠습니다.343536 '다중 for()' 버튼 cs라인 35. 버튼으로 사용할 p태그를 만들어줍니다. 78910111213 #buttonP{ font-size: 30px; font-weight: bol..

아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* for() */ $("#buttonP").click(function(){ for(var i=0; i[[JQUERY]자바스크립트] - jQuery 020. 이벤트 on(), 클릭이벤트 click()라인 23. for()문을 실행합니다. for(초기값;조건식;증감){} 이런형식으로 사용됩니다. 변수 i를 0으로 설정하고, 조건은 i가 5보다 작을때, 그리고 한번 루핑될때마다 i를 ++ 시켜줍니다. 자동적..

아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435 Title #buttonP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* html() */ $("#buttonP").click(function(){ var divHtml = $("#resultDiv").html() $("#resultDiv").html(divHtml+"p태그를 생성했습니다.") }); }); html() 예제 버튼 위 버튼을 클릭하면 p태그가 생성됩니다. Colored by Color Scriptercs 아래는 미리보기입니다. html() 예제 버튼 위 버..

아래는 예제입니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 Title #buttonP span{ font-size: 30px; font-weight: bold; cursor: pointer; } #textP{ font-size: 30px; font-weight: bold; color: aqua; } $(function(){ // jquery 시작 /* show() / hide() */ $("#showBtn").click(function(){ $("#textP").text("show() 버튼을 클릭했습니다.") $("#textP").show(); }); $("#hideBTN"..

아래는 예제입니다.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 Title #exampleP{ font-size: 30px; font-weight: bold; cursor: pointer; } $(function(){ // jquery 시작 /* swich() */ $("#exampleP").click(function(){ var inputNum = prompt("숫자(1~5) 를 입력해주세요"); switch(inputNum){ case "1" : alert(inputNum+" 을 입력받았습니다. p태그의 글자색을 변경합니다."); $(this).css("col..

아래는 예제입니다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 Title #exampleP{ font-size: 30px; cursor: pointer; } .colorRed{ color:red; } .colorBlue{ color:blue; } $(function(){ // jquery 시작 /* jquery 클래스 추가 및 제거 */ //p클릭이벤트 $("#exampleP").click(function(){ //현재 색상 구하기 var currentClass = $(this).attr("class"); alert("현재 클래스는 '"+currentClass+"'입니다."); if(curren..

아래는 예제입니다.123456789101112131415161718192021222324252627282930313233343536 Title $(function(){ // jquery 시작 //짝수 홀수 //if $('#btn_prompt_type01').click(function(){ var num = prompt("숫자를 입력해주세요"); if(num%2 == 0){ alert('짝수 입니다.') }else{ alert('홀수 입니다.') } }); //삼항연산자 $('#btn_prompt_type02').click(function(){ var num = prompt("숫자를 입력해주세요"); num%2 == 0 ? alert("짝수 입니다") : alert("홀수 입니다."); }); }); 수 ..

아래는 예제입니다. 12345678910111213141516171819202122232425262728293031 Title $(function(){ // jquery 시작 //클릭이벤트 $("#btn_prompt").click(function(){ //prompt 값 저장 var result = prompt("입력하세요"); if(result != ""){ //font태그 변경 $("#font_text").text(result); }else{ //font태그 변경 $("#font_text").text("입력 값이 없습니다."); } }); }); 입력하기 Colored by Color Scriptercs 아래는 미리보기입니다. 실제로 클릭후 입력해보세요. 입력하기 이번 예제는 prompt()를 활용해..

보통 서로 같은지 혹은 다른지를 확인 할때 ==, != 연산을 하게됩니다.1 == 1 > true 를 반환 하고, 1 != 1 > false 가 됩니다.1 == '1' 은 어떨까요, 숫자타입 1 과 문자타입 '1' 입니다. false 를 반환 할 것 같지만, true를 반환합니다. == 연산과 != 연산은 기본적으로 비교하기전에 좌측과 우측의 타입을 맞춰 줍니다. 형변환을 강제로 시키게됩니다. 형변환에 대한 예제는 아래링크를 참조해 주세요>>[[JQUERY]자바스크립트] - jQuery 012. parseInt(), 문자를 정수(숫자)로 바꾸기(형변환)>>[[JQUERY]자바스크립트] - jQuery 013. parseFloat() 문자를 실수(소수점)로 바꾸기(변형하기)>>[[JQUERY]자바스크립트]..

이번 글에서는 text()에 대해서 알아보겠습니다. text()는 여러 태그 사이에 들어가는 값을 가져올 때 쓰입니다. 이번 예제는 여러 태그에 텍스트 값을 입력하고 text()로 텍스트 값을 가져오는 예제 입니다.123456789101112131415161718192021222324252627282930313233 Title $(function(){ // jquery 시작 //p태그 fnClick($("#pText")); //버튼 fnClick($("#btnText")); //a태그 fnClick($("#aText")); }); //공통으로 쓰일 function function fnClick(e){ //클릭이벤트 e.click(function(){ alert(e.text()); }) } 여긴 'p태그'..

아래는 예제입니다.1234567891011121314151617181920212223242526 Title $(function(){ // jquery 시작 //inputBtn의 이벤트 $("#inputBtn").click(function(){ //input 값 var inputVal = $("#inputVal").val(); alert("input의 val() = " + inputVal); }); }); val() 확인 Colored by Color Scriptercs 아래는 예제의 미리보기 입니다. 실제 입력후 버튼을 클릭해 보세요. val() 확인 예제를 라인별로 보겠습니다.232425 val() 확인 Colored by Color Scriptercs라인 24. input 을 생성합니다. 타입은 't..

아래는 예제입니다.123456789101112131415161718192021222324252627282930313233 Title $(function(){ // jquery 시작 //p tag 의 click 이벤트 $("p").click(function(){ //p의 font-size var fontSize = $("p").css("font-size") if(fontSize == "10px"){ //if 조건 $("p").css("font-size","20px"); }else if(fontSize == "20px"){ //else if 조건 $("p").css("font-size","30px"); }else{ //else $("p").css("font-size","10px"); } }); }); 클릭 ..

아래는 예제입니다.12345678910111213141516171819202122232425 Title $(function(){ // jquery 시작 //if 사용 방법 1 if(true){ $('#if1').css('color','red'); } //if 사용 방법 2 if(true) $('#if2').css('color','green'); }); if 사용 1 if 사용 2 Colored by Color Scriptercs 아래는 실행화면입니다.이전 글에서 간략하게 조건문 if()에 대해서 설명한적이있습니다.>>[[JQUERY]자바스크립트] - jQuery 023. 조건문 if() 예제를 라인별로 보겠습니다.21222324 if 사용 1 if 사용 2 cs먼저 id 값으로 'if1' 과 'if2' ..

아래는 예제입니다.12345678910111213141516171819202122 Title $(function(){ // jquery 시작 var a = 10; if(a==10){ alert("조건이 참(true)면 실행됩니다."); } }); Colored by Color Scriptercs 아래는 실행화면 입니다. 예제를 라인별로 보겠습니다.10 var a = 10;cs라인 10. a 에 10을 대입합니다. 121314 if(a==10){ alert("조건이 참(true)면 실행됩니다."); }Colored by Color Scriptercs라인 12. if()문을 실행합니다. if(){} 의 사용방법은 if(조건문){"조건이 true일 때 실행됩니다."} 입니다. 조건문에 대한 예제는 아래링크를 ..

아래는 예제입니다.1234567891011121314151617181920212223242526272829303132333435363738 Title $(function(){ // jquery 시작 var animal01 = "고양이"; var animal02 = "강아지"; //AND(&&) document.write( "animal01 == '고양이' && animal02 == '강아지' = " ,animal01=='고양이' && animal02=='강아지',"" ); document.write( "animal01 == '고양이' && animal02 == '개' = " ,animal01=='고양이' && animal02=='개',"" ); //OR(||) document.write( "animal0..

아래는 예제 입니다.1234567891011121314151617181920212223242526272829 Title $(function(){ // jquery 시작 // document.write("20 > 10 = ",20>10,""); //= document.write("20 >= 10 = ",20>=10,""); //== document.write("20 == 10 = ",20==10,""); //!= document.write("20 != 10 = ",20!=10,""); }); Colored by Color Scriptercs 아래는 실행화면입니다.비교 연산자는 연산자 양 옆의 두 값을 비교해서 참(true), 거짓(false) 를 리턴 합니다. 예제를 라인별로 보겠습니다.1011 //>[[..