Misun's Archive

 printf 지시자 %b :  불린 boolean %d : 10진수 decimal integer %o : 8진수 octal integer %x , %X : 16진수 hexadecimal integer %f : 10진수 decimal float %e , %E : 지수형태표현 exponent %c : 문자 character %s : 문자열 string 특수문자 \t : tab \b : backspace \f : form feed \n : new line \r : carriage return \\ : 역슬래시 \' : 작은따옴표 \" : 큰따옴표 \u : 유니코드

package test; public class oper { public static void main(String[] args) { // TODO Auto-generated method stub int a; int b; int ti; float c; float d; float fi; a=8; b=7; ti= a+b; System.out.println(ti); ti= a-b; System.out.println(ti); ti= a*b; System.out.println(ti); ti= a/b; System.out.println(ti); c=8.8f; d=2.2f; fi= c+d; System.out.println(fi); fi= c-d; System.out.println(fi); fi= c*d; System.out.println(fi); fi= c/d; System.out.println(fi); int e=1; e++; System.out.println(e); int f=1; f+=1; System.out.println(f); int g=1; g--; System.out.println(g); int h=1; h-=1; System.out.println(h); int i=8; int j=5; int ni; ni= i % j; System.out.println(ni); System.out.printf("%b\n",i>j); System.out.printf("%b\n", i<j); System.out.printf("%b\n", i==j); System.out.printf("%b\n", i!=j); ...

%d: 10진수(정수형) %f: 실수형 %e: 지수형 %o: 8진수 %x: 16진수 %u: 부호없는 10진수 %g: 실수형 자동출력 %p: 포인터의 주소 %c: 하나의 문자로 출력 %s: 문자열

package test; public class hello { public static void main(String[] args) { // TODO Auto-generated method stub int age;//1~100, 1000 int는 상수 age는 변수                  age=8; int nai; nai=age; System.out.println(age); System.out.println(nai); } }

$("#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();     } });

<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

<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...

<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...

<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>

<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> ...

<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{             ...

<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...

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 태그에도 아래와 같이 이름을 정의해 줄 수 있다. 이름...

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...

  <style> .container {position: relative;   -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   -o-perspective: 1000; } .card { width: 200px; height: 200px;margin: 0 auto; position: relative;   -webkit-transform-style: preserve-3d;   -webkit-transition: 0.5s;   -moz-transform-style: preserve-3d;   -moz-transition: 0.5s;   -ms-transform-style: preserve-3d;   -ms-transition: 0.5s;   -o-transform-style: preserve-3d;   -o-transition: 0.5s;   transition: 0.5s; } .face {position: absolute; backface-visibility: hidden; width: 100%; height: 100%; color: white; line-height: 200px; text-align: center;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;  } .front {background: skyblue; z-index: 10;} .back {background: pink;   -webkit-transform: rotateY(180deg);   -mo...

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <title>Document</title>   <style> #card{position:relative; width:200px; height:200px; margin:0 auto; } #front{position:absolute; top:0; left:0; color:white; font-size: 30px; text-align:center; line-height:200px;background-color: skyblue; width:100%;}   </style>  </head>  <body> <div id="card" onclick="flip()">  <div id="front" > Front content  </div> </div> <script>   var k = 0;   function flip() {     var card = document.getElementById("card");     k += 180;     card.style.transform = "rotatey(" + k + "deg)";     card.style.transitionDuration = "0.5s";   } </script>  </body> </html> ------------------------------------------------------------------------------- ...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">  <title>공 튀기기</title>  <script>  var nX=0;  var nY=0;  var nStepSize=4;  var nStepX=nStepSize;  var nStepY=nStepSize;  var ball;  var nTimerID=0;  var nEndX=0;  var nEndY=0;  window.onload=function(){   init();   initEventListener();  }  function init(){   nTimerID=0;   var panel=document.getElementById("panel");   ball=document.getElementById("ball");   nEndX=panel.offsetWidth-ball.offsetWidth;   nEndY=panel.offsetHeight-ball.offsetHeight;  }  function initEventListener(){   document.getElementById("btn_start").addEventListener("click",function(){start();}, false);   document.getElem...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ var menu=$("#top_menu > ul > li"); var contents=$('#contents > div'); //메뉴 클릭시 해당 컨테이너로 이동 menu.click(function(event){ event.preventDefault(); var i=$(this).index(); var tt=contents.eq(i).offset().top; $("html, body").stop().animate({scrollTop:tt}); }); //스크롤시 해당메뉴가 선택됨 $(window).scroll(function(){ var sct=$(window).scrollTop(); console.log(sct); contents.each(function(){ var i=$(this).in...

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>JQuery accordion Menu</title> <style> body * {margin:0; padding:0; font-family:Malgun gothic; list-style:none;} .accordion {width:202px; overflow:hidden; border-bottom:1px solid #ccc; padding-left:5px; padding-top:5px } .accordion * {font-size:13px; text-decoration:none;} .accordion li {width:200px; vertical-align:top; border-left:1px solid #ccc; border-right:1px solid #ccc;} .accordion li a {padding:10px; border-top:1px solid #ccc; display:block; background:#fafafa; color:#555;} .accordion li a.more {background:#fafafa url(../images/icon_down.gif) no-repeat 180px center;} .accordion li a.less {background:#fafafa url(../images/icon_u...

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

<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...