본문 바로가기
기존카테고리/javascript & jQuery

정리요약

자연과벗하다 2017. 10. 28. 01:58

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

var a;

a = prompt("나이를 입력하세요.");

//alert(a);


if(20<a<40){

document.write("당신의 나이는 "+a+" 입니다. 성인이군요.");

}else if(a>40){

document.write("당신의 나이는 "+a+" 입니다. 어른이이군요.");

}else{

document.write("당신의 나이는 "+a+" 입니다. 미성년자이군요.");


}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

var juminNo;

juminNo = prompt("주민번호를 입력하세요.");

alert(juminNo.charAt(6));


if(juminNo.length != 14 || juminNo.charAt(6) != "-"){


document.write("주민번호가 아닙니다."+juminNo.length);

}else{

document.write("주민번호 맞네요."+juminNo.length);

}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

var arr = new Array();

arr[0] = "첫번째방";

arr[1] = "두번째방";

arr[2] = "세번째방";


alert(arr[0]);

alert(arr.length);


for(var i=0; i<arr.length; i++){

document.write(arr[i]+"<br>");

}


var i = 0;

while(i<arr.length){

document.write("while문: "+arr[i]+"<br>");

i++;

}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

var i;

var j;


for(i=2; i<=9; i++){

//document.write("구구단 첫 숫자"+i+"<br>");

for(j=1; j<=9; j++){

document.write(i+" X "+j+" = "+j*i+"<br>");

}

}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

function getName(userName){

var userName = prompt("이름입력");

document.getElementById('nu').innerHTML = 'onk';

}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>


<button type="button" onclick="getName()">클릭</button>

<p id="nu"></p>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script>

function testNode(){

var p = document.getElementsByTagName('p')[0];

console.log(p);

p.innerHTML = "하이";

document.getElementsByTagName('p')[1].firstChild.nodeValue = "홍길동";

}

</script>

</head>

<body>

<h2>javaScript 테스트</h2>


<button type="button" onclick="testNode()">클릭</button>

<p></p>

<p>여기는 p2</p>

</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

window.onload = function(){

var aa = document.getElementsByTagName('input')[0];

console.log(aa);

document.getElementsByTagName('input')[0].getAttribute('value');

document.getElementsByTagName('input')[0].setAttribute('value','홍길동');

document.getElementsByTagName('input')[0].getAttribute('type');

document.getElementsByTagName('input')[0].setAttribute('type','button');

}

</script>

</head>

<body>

<input type="text" name="userName" value="유저이름">

</body>

</html>




<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

function getName(){

var tagName = document.getElementsByTagName('input')[0].getAttribute('value');

console.log(tagName);

document.getElementsByTagName('input')[0].setAttribute('value','홍길동');

console.log(tagName);

}


$(document).ready(function(){

$('#btn2').click(function(){

var aa = $('input').attr('value');

console.log(aa+"jQuery");

$('input').attr('value','강호동');

console.log(aa+"2");

})

})

</script>

</head>

<body>

<input type="text" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1" onclick="getName()">버튼1</button>

<button type="button" id="btn2">버튼2</button>


</body>

</html>




<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

window.onload = function(){

document.getElementById('btn1').onclick=function(){

document.getElementById('viewTxt').innerHTML = document.getElementById('userName').value;

}

}


$(document).ready(function(){

$('#btn2').click(function(){

$('#viewTxt').text($('#userName').val());

})

})

</script>

</head>

<body>

<input type="text" id="userName" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1">버튼1</button>

<button type="button" id="btn2">버튼2</button>

<div id="viewTxt"></div>


</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

<input type="text" id="userName" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1">버튼1</button>

<button type="button" id="btn2">버튼2</button>

<div id="viewTxt"></div>

  <script>

document.getElementById('btn1').onclick = function(){testClick()};


function testClick(){

alert("ok Click");

}

</script>

</body>

</html>




<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

window.onload = function(){

document.getElementById('btn1').onclick = function(){testClick()};


function testClick(){

alert("ok Click");

}

}

</script>

</head>

<body>

<input type="text" id="userName" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1">버튼1</button>

<button type="button" id="btn2">버튼2</button>

<div id="viewTxt"></div>


</body>

</html>





<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

window.onload = function(){

document.getElementById('sel1').onchange = function(){

document.getElementById('viewTxt').innerHTML = document.getElementById('sel1').value;

}

}


$(document).ready(function(){

$('#sel2').change(function(){

$('#viewTxt').text($('#sel2').val());

})

})

</script>

</head>

<body>

<select id="sel1">

<option value="배">배</option>

<option value="사과">사과</option>

<option value="수박">수박</option>

</select>

<select id="sel2">

<option value="배2">배2</option>

<option value="사과2">사과2</option>

<option value="수박2">수박2</option>

</select>

<div id="viewTxt"></div>


</body>

</html>


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function(){

$('#btn1').click(function(){

$('.viewTxt1').html($('#userName').val());

$('#btn2').trigger('click');

})


$('#btn2').click(function(){

$('.viewTxt2').html('여기는 2번째');

})

})

</script>

</head>

<body>

<input type="text" id="userName" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1" class="btn">버튼1</button>

<button type="button" id="btn2" class="btn">버튼2</button>

<div class="viewTxt1"></div>

<div class="viewTxt2"></div>

</body>

</html>






<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function(){

$('#btn1').click(function(){

$('.viewTxt1').html($('#userName').val());

$('#btn2').trigger('user');

})


$('#btn2').on('user', function(){

$('.viewTxt2').html('user Event 발생');

})

})

</script>

</head>

<body>

<input type="text" id="userName" name="txtValue" value="유저이름"><br>

<button type="button" id="btn1" class="btn">버튼1</button>

<button type="button" id="btn2" class="btn">버튼2</button>

<div class="viewTxt1"></div>

<div class="viewTxt2"></div>

</body>

</html>







<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

window.onload = function(){

var viewTxt1 = document.getElementById('div1');

var createDiv = document.createElement('div');

createDiv.innerHTML = '요기요추가';

document.getElementById('btn1').onclick = function(){

viewTxt1.appendChild(createDiv);

}


document.getElementById('btn2').onclick = function(){

viewTxt1.removeChild(viewTxt1.childNodes[0]);

}


document.getElementById('btn3').onclick = function(){

viewTxt1.childNodes[0].innerHTML = "변경요기요.";

}

}

</script>

</head>

<body>

<button type="button" id="btn1" class="btn">추가</button>

<button type="button" id="btn2" class="btn">삭제</button>

<button type="button" id="btn3" class="btn">변경</button>

<div id='div1' class="viewTxt1"></div>

</body>

</html>







<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>모바일 연습</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

var selectChk = function(){

$('#note').html('체크박스1: '+$('#chk1').is(':checked') + 

'체크박스2: '+$('#chk2').is(':checked') + 

'체크박스3: '+$('#chk3').is(':checked')

);

}


var init = function(){

$('#chk1').on('change', function(){

selectChk();

})

$('#chk2').on('change', function(){

selectChk();

})

$('#chk3').on('change', function(){

selectChk();

})

}



$(document).bind('pageinit', init);

</script>

</head>

<body>

체크박스1: <input type="checkbox" name="chk1" id="chk1" value="체크박스1">

체크박스2: <input type="checkbox" name="chk2" id="chk2" value="체크박스2">

체크박스3: <input type="checkbox" name="chk3" id="chk3" value="체크박스3">


<div id="note"></div>

</body>

</html>



<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>jQuery</title>

<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 선언 -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

<input type="button" name="userBtn" id="userBtn" value="클릭2">

<script>

var t = document.getElementById('userBtn');

t.onclick = function(e){

console.log('버튼value: '+e.target.value);

}

</script>

</body>

</html>



<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>jQuery</title>

<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 선언 -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

<input type="button" name="userBtn" id="userBtn" value="클릭2">

<script>

var t = document.getElementById('userBtn');

t.addEventListener('click', function(){

alert('oooo');

})

</script>

</body>

</html>








<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>jQuery 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).on({

mobileinit: function(e){

alert('mobileinit');

}

})

</script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

$(document).ready(function(){

$('#btn1').on({

click: function(e){alert(e.type);},

mouseout: function(e){alert(e.type);}

})

})

</script>


</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>moblileinit</h3>

</div><!-- header  -->


<div role="main" class="ui-content">

메인 페이지22

<button id="btn1">팝업</button>

</div><!-- main  -->


<div data-role="footer" data-position="fixed">

<h3>footer</h3>

</div><!-- footer  -->

</div><!-- page1 -->

</body>

</html>















저작자표시 (새창열림)

'기존카테고리 > javascript & jQuery' 카테고리의 다른 글

call()  (0) 2018.03.18
ajax 사용법  (0) 2018.02.03
jQuery 별칭 설정  (0) 2017.12.06

'기존카테고리/javascript & jQuery' Related Articles

티스토리툴바