글

라벨이 자바스크립트인 게시물 표시

Trigger a button click when Enter key is pressed in a text box in javascript / 자바스크립트 input 박스에서 enter 키를 치면 click 효과 나게 하기

$("#id_of_textbox").keyup(function(event){     if(event.keyCode == 13){         $("#id_of_button").click();     } }); ------------------------------------------------ document.getElementById("id_of_textbox")     .addEventListener("keyup", function(event) {     event.preventDefault();     if (event.keyCode == 13) {         document.getElementById("id_of_button").click();     } });

DOM Selector in javascript / 자바스크립트의 선택자 querySelector()

<div id='main'>   <div class="container">   </div> </div> --------------------------------------- (1) 아이디(id)가 main인 요소 선택 document.getElementById('main'); document.querySelector('#main'); (2) 클래스명이 container인 요소 선택 document.getElementsByClassName(' container '); document.querySelector('. container ');  //같은 이름의 클래스가 다수인 경우 첫번째 container 선택 document.querySelectorAll('. container ');  //같은 이름의 클래스가 다수 인 경우 해당하는 모든요소 선택 (3) div태그 요소 선택 document.getElementsByTagName('div'); document.querySelector('div');   //div  태그가 다수인 경우 첫번째 div 선택 document.querySelectorAll('div');   //div  태그가 다수인 경우 모든 div 선택 Browser compatibility(브라우저 지원) Desktop   Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit) Basic support 1 (Yes) 3.5 8 10 3.2

a simple loading spinner in javascript / 자바스크립트로 로딩스피너 만들기

<style> ul, li {list-style:none; margin:0; padding:0; display:block;} #loadingWrap {position:relative; width:90px; height:90px; /*border:1px solid pink;*/ margin:20% auto;} .circle {width:20px; height:20px; border-radius:50%; background-color:pink;} .c1 {position:absolute; top:0; left:50%; margin-left:-10px;} .c2 {position:absolute; top:25%; right:25%; margin-top:-10px; margin-right:-10px;} .c3 {position:absolute; top:50%; right:0; margin-top:-10px;} .c4 {position:absolute; bottom:25%; right:25%; margin-bottom:-10px; margin-right:-10px;} .c5 {position:absolute; bottom:0; left:50%; margin-left:-10px;} .c6 {position:absolute; bottom:25%; left:25%; margin-bottom:-10px; margin-left:-10px;} .c7 {position:absolute; top:50%; left:0; margin-top:-10px;} .c8 {position:absolute; top:25%; left:25%; margin-top:-10px; margin-left:-10px;} </style> <ul id="loadingWrap"> <li class="circle c1"></li> <li class="circl...

Simple loading bars in javascript / 자바스크립트로 심플 로딩바 만들기

<style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; bar.style.width= i + "%"; if(i>=100){ clearInterval(timer); } } function start(){ timer= setInterval(loading, 5); } </script> -------------------------------------------------------------------------------------------------- <style> #loadingBar {width:0%; height:10px; background-color:pink; margin:0; padding:0;} </style> <div id="loadingBar"></div> <script>  var bar = document.getElementById("loadingBar");  window.onload= start; var i=0; function loading(){ i+=0.1; j = i * 0.1; bar.style.width= j + "%"; console.log(i); if(i==1000){ clearInterval(timer); } } func...

Show a loading bar and then move to another page in javascript / 로딩바를 보여주고 다른 페이지로 이동하는 자바스크립트 함수

<strong>3초후에는 네이버 홈페이지로 이동합니다</strong> <br/> <br/> <div id="loadingBar"></div> <style> #loadingBar {width:0px; height:20px; background-color:pink;} </style> <script> var redirecturl="http://naver.com" var pausefor=4 var bar = document.getElementById("loadingBar"); var i=0; function postaction(){ window.location=redirecturl; } setTimeout("postaction()", pausefor*1000) function loading(){ i++; bar.style.width= i + "px"; if(i==1000){ clearInterval(timer2); } } function start(){ timer2= setInterval(loading, 0.1); }  window.onload= start; </script> <style>

Limit the number of available checkboxes in javascript / 자바스크립트로 체크할 수 있는 항목 갯수 제한하기.

<form> You can choose 2 in maximum : <input type=checkbox name=box1 id="box1" onClick="countChoices(this)"><label for=box1>Frozen</label> <input type=checkbox name=box2 id="box2" onClick="countChoices(this)"><label for=box2>Finding Nemo</label> <input type=checkbox name=box3 id="box3" onClick="countChoices(this)"><label for=box3>the Beauty and the Beast </label> </form> <input type="button" value=" Close " onClick="self.close( )"> <script> function countChoices(obj) { var max = 2; // 최대로 선택할 수 있는 박스 수 var box1 = obj.form.box1.checked;  // 사용할 체크박스 var box2 = obj.form.box2.checked; var box3 = obj.form.box3.checked; var count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0); if (count > max) { alert("최대 " + max + " 개 까지만 선택할 수 있습니다"); obj.checked = false;    } } </script> ...

Select by Group in javascript / 자바스크립트로 그룹별로 선택하는 함수

<script>   function selectivecheck(field, myselection){       var fieldid;       var pos;       var criteria;       var strng;       strng = myselection.value;       for (i=0; i<field.length; i++){           if (strng=="all"){             field[i].checked = true;           }else{               fieldid = field[i].id;               pos = strng.substring(0,1);               criteria = strng.substring(1,2);               if (fieldid.substring(pos,pos+1)==criteria){                   field[i].checked = true;                }else{             ...

Select All the Checkboxs in javascript /자바스크립트로 모두선택 모두해제 하는 함수

<script> function checkall(A,B,C){ var X=eval("document.forms."+A+"."+B) for (c=0;c<X.length;c++) X[c].checked=C } </script> <form name="album"> <input type="checkbox" name="v1">Trey Songz<br> <input type="checkbox" name="v1">Adele<br> <input type="checkbox" name="v1">Sam Smith<br> <input type="checkbox" name="v1">Ed Sheeran<br> <input type="checkbox" name="v1">Coldplay<br> </form> <a href="javascript:checkall('album','v1',true)">Select All</a> <a href="javascript:checkall('album','v1',false)">Unselect All</a> ---------------------------------------------------------------------------------- Trey Songz Adele Sam Smith Ed Sheeran Coldplay...

document.forms object in javascript / 자바 스크립트의 폼 객체

forms 객체는 links, images 등과 같은 배열 형태로 document 객체의 하단에 존재하는 객체이다. forms[ ] 배열 폼의 구성 요소와 마찬가지로 폼 자체도 배열로 참조되어질 수 있다. 배열의 순서는 구성 요소의 순서와 마찬가지로 HTML 내에서 기술된 순서대로 0번부터 참조되어지며, 그 형식은 document.forms[0]과 같은 방식으로 참조된다. 물론 배열로 참조된 폼 내의 구성 요소 참조시에도 elements[] 배열을 사용할 수 있다. 즉, HTML내에서 기술된 두 번째 폼에서 세 번째 구성 요소를 참조하고자 한다면 document.forms[1].elements[2]와 같이 하면 참조가 가능하다. form에서 사용되는 각 양식들의 이름(name )을 정의해 준다면, 이들을 모두 자바스크립트에서 쉽게 접근할 수 있다. 만약, 이름을 정의해 주지 않는다면 아래와 같이 참조할 수 있다. ...... <form> →document.forms[0] <input type=text value='Text1'> →document.forms[0].elements[0] <input type=text value='Text2'> →document.forms[0].elements[1] <input type=submit> </form> <form> →document.forms[1] <input type=text value='Text1'> →document.forms[1].elements[0] <input type=text value='Text2'> →document.forms[1].elements[1] <input type=submit> </form> ...... form 태그에도 아래와 같이 이름을 정의해 줄 수 있다. 이름...

자바스크립트 내장함수

eval()           문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로) parseInt()      숫자를 정수로 반환 parseFloat()   숫자를 실수로 반환 isNaN()         "Nota Number"의 약자로 숫자가 아닌 문자가 포함되면 true를 반환 isFinite()        주어진 값이 유리수인지 아닌지 판단 Number()      문자를 숫자형으로 변환 String()         숫자를 문자형으로 변환 escape()        문자를 16진수 아스키코드 값으로 반환 unescape()     escape()로 변환된 값을 다시 되돌려 반환

Moving Fish in javascript / 자바스크립트로 물고기 움직이기

이미지
<body> <div id=panel> <div id="bar"></div> <img src="fish.png" id="fish"> </div> <br> <div id="nav"> <button id="leftBtn" onClick="startMove('leftBtn')">Move to Left</button> <button id="rightBtn" onClick="startMove('rightBtn')">Move to Right</button> <button id="stop" onClick="stop()">Stop</button> </div>  </body> <style> #panel{position:relative; width:600px; height:300px; border:1px solid #ccc; } #bar{position:absolute; left:0px; top:190px; width:100%; height:20px; background:pink;} #btnStart{margin:0 auto;} #fish{position:absolute; left:0px; top:120px; width:120px; height:70px;} #nav{text-align: center; width:600px;} </style> <script> var panel=null; var fish; var timer; window.onload=functi...

Math.random/ setInterval/ clearInterval in javascript // 자바스크립트 Math.random/ setInterval/ clearInterval 이해하기

<script> var nCount=0; var panel=null; window.onload=function(){ this.init(); } function init(){ this.panel=document.getElementById("panel"); } var t; function start(){ t = setInterval(this.addTag,20); //0.02초에 한번씩 addtag 출력 } function addTag(){ this.nCount++; var span=document.createElement("span"); span.style.color="#"+(parseInt(Math.random()*0xffffff)).toString(16); span.style.fontSize=(10+parseInt(Math.random()*40))+"px"; span.style.display="inline-block"; span.innerHTML=this.nCount; this.panel.appendChild(span); console.log(nCount); } function stopButton(){ clearInterval(t); } </script> </head> <body> <div> <button onClick="start()">start</button> <button onClick="stopButton()">stop</button> <div id="panel"></div> </div> </body> </html>

check function in javascript when making join in form table / 자바스크립트로 회원가입창 만들기

<body> <form method="post" action="memRegProc.php" name="frm1"> <table border="1" sellspacing="0" width="500"> <tr> <td colspan="2" align="center" bgcolor="pink">회원가입</td> </tr> <tr> <td>아이디</td> <td> <input type="text" name="id" id="id" value="id"> <input type="button" value="중복확인" onclick="popup()"> </td> </tr> <tr> <td>암호</td> <td><input type="password" name="pw"></td> </tr> <tr> <td>이름</td> <td><input type="text" name="name"></td> </tr> <tr> <td>이메일</td> <td><input type="text" ...

Password Check in javascript prompt window / 자바스크립트 프롬프트 창에서 패스워드 체크하는 함수

for문 이용 <script> for(var i=0;i<10000;i++){ var value=window.prompt("패스워드를 입력해주세요."); if(value=="1234"){ alert("환영합니다."); break; } else{alert("잘못 입력했습니다. 다시 입력해주세요.")} } </script> ------------------------------------------------------------------------------------------------- while문 이용 <script> //무한루프를 돌때 for문보다 while문이 훨씬 낫다. 내부적으로 돌기 때문. while(true){ var value= window.prompt("패스워드를 입력해주세요."); if (value=="1234"){ alert("환영합니다."); break; } else{alert("잘못 입력했습니다. 다시 입력해주세요.");} } </script>

continue and break in javascript / 자바스크립트에서 continue 와 break 이해하기

<script> for(var i=1;i<=10;i++){ //최종값만 찍고 싶을때는 continue를 쓴다. 결과값은 11이 된다 continue; } document.write("최종 i="+i+"<br>"); for(var i=1;i<=10;i++){ //첫번째 값만 실행하고 튕겨나옴. 첫번째 1값이 결과값 break; } document.write("최종 i="+i+"<br>"); </script> ------- 출력값 최종 i=11 최종 i=1

Odd or Even in javascript Prompt Window / 자바스크립트 프롬프트 창에서 홀수 짝수 확인하기

<script> //값 입력 var value= window.prompt("수를 입력해주세요."); //문자를 숫자로 변환 value=parseInt(value); //비교 (value %2==0)?alert("짝수 입니다."):alert("홀수 입니다."); </script>

Asterisk Piramid in javascript / 자바스크립트로 별피라미드 만들기

<script> var piramid=""; for(var i=1; i<15;i++){ for(var t=1; t<15-i; t++){ piramid+="&nbsp;"; } for(var m=0; m<2*i-1;m++){ piramid+="*"; } piramid +="<br>"; } document.write(piramid) ; </script>

Multiplication Table in javascript / 자바스크립트로 구구단 짜기

방법(1) <script> //구구단 연습 var dan=3 document.write(dan, "*2=",(dan*2),"<br>"); document.write(dan, "*3="+(dan*3)+"<br>"); document.write(dan, "*4=",(dan*4),"<br>"); document.write(dan, "*5=",(dan*5),"<br>"); document.write(dan, "*6=",(dan*6),"<br>"); document.write(dan, "*7=",(dan*7),"<br>"); document.write(dan, "*8=",(dan*8),"<br>"); document.write(dan, "*9=",(dan*9),"<br>","<br>"); var dan=7 document.write(dan, "*2=",(dan*2),"<br>"); document.write(dan, "*3="+(dan*3)+"<br>"); document.write(dan, "*4=",(dan*4),"<br>"); document.write(dan, "*5=",(dan*5),"<br>"); document.write(dan, "*6=",(dan*6),...

jQuery Responsive Web: Making Width same as Height / 반응형웹 가로 세로 높이 같게 만드는 제이쿼리

jQuery Responsive Web: Making Width same as Height <script> /*반응형 가로 세로 높이 같게 만들기*/ $(window).resize(function(){ var divWidth = $('ul li').width(); $('ul li').height(divWidth); }); </script>