MVVM(Model-View-ViewModel)
javascript
연습 - 문자 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
var btn = document.querySelector('input');
var txt = document.querySelector('#my_span');
btn.onclick = function(){
if(txt.innerText=='Good Morning'){
txt.innerText='Good Evening';
} else{
txt.innerText='Good Morning';
}
}
}
</script>
</head>
<body>
<span id="my_span">Good Morning</span>
<input type="button" value="CLICK"/>
</body>
</html>
연습 - 로또 번호 출력하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
const arr = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45
]
function lotto(){
for(var i=0; i<100; i++){
var rand = parseInt(Math.random()*45);
var tem = arr[0];
arr[0] = arr[rand];
arr[rand]=tem;
}
var tags = document.querySelectorAll('.my_td');
var lottoArr = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
//lottoArr.sort((a,b) => a-b);
for(var i=0; i<lottoArr.length; i++){
for(var j=0; j<lottoArr.length; j++){
if (lottoArr[i] < lottoArr[j]){
var temp = lottoArr[i]
lottoArr[i] = lottoArr[j]
lottoArr[j] = temp
}
}
}
tags.forEach(function(ar,idx){
ar.innerText = lottoArr[idx];
})
}
</script>
<body>
<table border="1">
<tr>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="로또 생성하기" onclick="lotto()"/>
</td>
</tr>
</table>
</body>
</html>
arr = [3, 2, 1, 4, 5, 8 , 6, 7]
for i in range(len(arr)):
for j in range(len(arr)):
if arr[i] < arr[j]:
a = arr[i]
arr[i] = arr[j]
arr[j] = a
print(arr)
연습 - 구구단 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function clickBtn(){
var num = document.querySelector('#it').value;
var text = num+"단<br>=======<br>";
for(var i=1; i<=9; i++){
text+=num+" * "+i+" = "+(num*i)+"<br>";
}
document.querySelector('#my_div').innerHTML = text;
}
</script>
<style>
#it{
width: 30px;
}
#my_div{
text-align : center;
height: 240px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>출력단수</td>
<td>
<input type="text" id="it">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="출력하기" onclick="clickBtn()">
</td>
</tr>
<tr>
<td colspan="2">
<div id="my_div"></div>
</td>
</tr>
</table>
</body>
</html>
연습 - 가위바위보
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function game(){
const arr = ["가위", "바위", "보"];
var rnd = parseInt(Math.random()*3);
var mine = document.querySelector('#it_mine').value
var com = arr[rnd];
var result = "";
if (mine==com){
result = "비김"
} else if((mine=="가위" && com=="보") || (mine=="바위" && com=="가위") || (mine=="보" && com=="바위")){
result = "이김"
} else {
result = "짐"
}
document.querySelector('#it_com').value = com;
document.querySelector('#it_result').value = result;
}
</script>
<style>
input[type="text"]{
width: 40px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>나</td>
<td>
<select id="it_mine">
<option value="가위">가위</option>
<option value="바위">바위</option>
<option value="보">보</option>
</select>
</td>
</tr>
<tr>
<td>컴퓨터</td>
<td>
<input type="text" id="it_com" readonly="readonly">
</td>
</tr>
<tr>
<td>결과</td>
<td>
<input type="text" id="it_result" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="게임시작" onclick="game()">
</td>
</tr>
</table>
</body>
</html>
연습 - 전화걸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
window.onload = function(){
var btns = document.querySelectorAll('.btn');
btns.forEach(function(a, idx){
a.onclick = function(){
var num = this.value;
var input = document.querySelector('#it').value;
document.querySelector('#it').value = input+num;
}
})
}
function call(){
var input = document.querySelector('#it').value;
alert(input+"으로 전화거는 중...");
}
</script>
<style>
table{
text-align: center;
}
#it{
width: 100px;
}
</style>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it" readonly="readonly">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="btn">
</td>
<td>
<input type="button" value="2" class="btn">
</td>
<td>
<input type="button" value="3" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="btn">
</td>
<td>
<input type="button" value="5" class="btn">
</td>
<td>
<input type="button" value="6" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" class="btn">
</td>
<td>
<input type="button" value="8" class="btn">
</td>
<td>
<input type="button" value="9" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="btn">
</td>
<td colspan="2">
<input type="button" value="☎" onclick="call()">
</td>
</tr>
</table>
</body>
</html>
연습 - 야구게임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(var i=0; i<1000; i++){
var rnd = parseInt(Math.random()*9);
var temp = arr[0];
arr[0] = arr[rnd];
arr[rnd] = temp;
}
const com = arr[0]+""+arr[1]+""+arr[2];
console.log(com);
function clickBtn(){
var mine = document.querySelector('#it').value;
var s = strkie(mine);
var b = ball(mine);
var str = document.querySelector('#ta').value;
str += mine + " " + s +"S "+b+"B \n";
document.querySelector('#ta').value = str;
if(s==3){
alert("정답");
}
}
function strkie(mine){
var s = 0;
for(var i=0; i<3; i++){
if(com.charAt(i)==mine.charAt(i)){
s++;
}
}
return s;
}
function ball(mine){
var b = 0;
for(var i=0; i<3; i++){
for(var j=0; j<3; j++){
if(com.charAt(i)==mine.charAt(j)&&i!=j){
b++;
}
}
}
return b;
}
</script>
<style>
#it{
width: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>스트라이크</td>
<td>
<input type="text" id="it">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="야구게임" onclick="clickBtn()">
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" rows="15" cols="18"></textarea>
</td>
</tr>
</table>
</body>
</html>
Jquery
연습 - 문자 바꾸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
<script>
$(function(){
$('input').on('click',function(){
console.log('실행');
var txt = $('#my_span');
if(txt.text()=='Good Morning'){
txt.text('Good Evening');
} else{
txt.text('Good Morning');
}
})
})
</script>
</head>
<body>
<span id="my_span">Good Morning</span>
<input type="button" value="CLICK"/>
</body>
</html>
연습 - 로또 번호 출력하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="./jquery-3.7.1.js"></script>
<script>
const arr = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45
]
$(function(){
$('#lotto').on('click', lotto)
})
function lotto(){
for(var i=0; i<100; i++){
var rand = parseInt(Math.random()*45);
var tem = arr[0];
arr[0] = arr[rand];
arr[rand]=tem;
}
var tags = $('.my_td');
var lottoArr = [arr[0], arr[1], arr[2], arr[3], arr[4], arr[5]];
//lottoArr.sort((a,b) => a-b);
for(var i=0; i<lottoArr.length; i++){
for(var j=0; j<lottoArr.length; j++){
if (lottoArr[i] < lottoArr[j]){
var temp = lottoArr[i]
lottoArr[i] = lottoArr[j]
lottoArr[j] = temp
}
}
}
// eq를 활용한 출력
// $(".my_td").eq(0).html(lottoArr[0])
// each를 활용한 출력
$.each(tags, function(idx, ar){
$(ar).text(lottoArr[idx]);
})
}
</script>
<body>
<table border="1">
<tr>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
<td class="my_td">__</td>
</tr>
<tr>
<td colspan="6">
<input type="button" value="로또 생성하기" id="lotto"/>
</td>
</tr>
</table>
</body>
</html>
연습 - 구구단 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
<script>
$(function(){
$('#btn').on('click', clickBtn)
})
function clickBtn(){
var num = parseInt($('#it').val());
var text = num+"단<br>=======<br>";
for(var i=1; i<=9; i++){
text+=num+" * "+i+" = "+(num*i)+"<br>";
}
$('#my_div').html(text);
}
</script>
<style>
#it{
width: 30px;
}
#my_div{
text-align : center;
height: 240px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>출력단수</td>
<td>
<input type="text" id="it">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="출력하기" id="btn">
</td>
</tr>
<tr>
<td colspan="2">
<div id="my_div"></div>
</td>
</tr>
</table>
</body>
</html>
연습 - 가위바위보
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
<script>
$(function(){
$('#btn').on('click', game)
})
function game(){
const arr = ["가위", "바위", "보"];
var rnd = parseInt(Math.random()*3);
var mine = $('#it_mine').val();
var com = arr[rnd];
var result = "";
if (mine==com){
result = "비김"
} else if((mine=="가위" && com=="보") || (mine=="바위" && com=="가위") || (mine=="보" && com=="바위")){
result = "이김"
} else {
result = "짐"
}
$('#it_com').val(com);
$('#it_result').val(result);
}
</script>
<style>
input[type="text"]{
width: 40px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>나</td>
<td>
<select id="it_mine">
<option value="가위">가위</option>
<option value="바위">바위</option>
<option value="보">보</option>
</select>
</td>
</tr>
<tr>
<td>컴퓨터</td>
<td>
<input type="text" id="it_com" readonly="readonly">
</td>
</tr>
<tr>
<td>결과</td>
<td>
<input type="text" id="it_result" readonly="readonly">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="게임시작" id="btn">
</td>
</tr>
</table>
</body>
</html>
연습 - 전화걸기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
</head>
<script>
$(function(){
var btns = $('.btn');
btns.on('click', function(){
var num = $(this).val();
var input = $('#it').val();
$('#it').val(input+num);
})
$('#call').on('click',call)
})
function call(){
var input = $('#it').val();
alert(input+"으로 전화거는 중...");
}
</script>
<style>
table{
text-align: center;
}
#it{
width: 100px;
}
</style>
<body>
<table border="1">
<tr>
<td colspan="3">
<input type="text" id="it">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="btn">
</td>
<td>
<input type="button" value="2" class="btn">
</td>
<td>
<input type="button" value="3" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="btn">
</td>
<td>
<input type="button" value="5" class="btn">
</td>
<td>
<input type="button" value="6" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" class="btn">
</td>
<td>
<input type="button" value="8" class="btn">
</td>
<td>
<input type="button" value="9" class="btn">
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="btn">
</td>
<td colspan="2">
<input type="button" value="☎" id="call">
</td>
</tr>
</table>
</body>
</html>
연습 - 야구게임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
<script>
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(var i=0; i<1000; i++){
var rnd = parseInt(Math.random()*9);
var temp = arr[0];
arr[0] = arr[rnd];
arr[rnd] = temp;
}
const com = arr[0]+""+arr[1]+""+arr[2];
console.log(com);
$(function(){
$('#reset').hide();
$('#btn').on('click', clickBtn);
$('#reset').on('click',function(){
location.reload();
// history.go();
})
})
function clickBtn(){
var mine = $('#it').val();
var s = strkie(mine);
var b = ball(mine);
var str = $('#ta').val();
str += mine + " " + s +"S "+b+"B \n";
$('#ta').val(str);
if(s==3){
alert("정답");
$('#btn').hide();
$('#reset').show();
}
}
function strkie(mine){
var s = 0;
for(var i=0; i<3; i++){
if(com.charAt(i)==mine.charAt(i)){
s++;
}
}
return s;
}
function ball(mine){
var b = 0;
for(var i=0; i<3; i++){
for(var j=0; j<3; j++){
if(com.charAt(i)==mine.charAt(j)&&i!=j){
b++;
}
}
}
return b;
}
</script>
<style>
#it{
width: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>스트라이크</td>
<td>
<input type="text" id="it">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="야구게임" id="btn">
<input type="button" value="새 게임" id="reset">
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" rows="15" cols="18"></textarea>
</td>
</tr>
</table>
</body>
</html>
