Nov 04

96517 ワード

テキストリンク

console.log

For debuggingconsole.log(뭐가 실행이 되는지 안되는지 확인하기)

Example
resetが正しく動作しているか確認したいのですが
次に、resetをクリックするイベント関数でconsoleを設定します.ログ()書き込み

.on('click', '#reset', function(){
     
    console.log('reset clicked')
  
    $('#txtname').val('');
    $('#txtbirth').val('');
    $('#female').prop('checked', false);
    $('#male').prop('checked', false);
    $('#userid').val('');
    $('#passcode1').val('');
    $('#locataion').val('');
 })

成功すれば、

Brower-f12-console : reset clicked

.each, this

eachIterate over a jQuery object, executing a function for each matched element. (similar to for in JAVA.)this always changes.
From the code below, function runs where the checkbox is checked. And this indicates input:checkbox:checked . If the property of this is movie, interests+="moive"; break executes.

    $('input:checkbox:checked').each(function(){
            switch($(this).prop('id')){
                case 'moive':  
                interests+="moive";
                break;
                case 'sports': 
                interests+="sports ";
                break;
                case 'enter':
                interests+="entertainment";
                break;
                case 'travel':
                interests+="travel";
                break;
                case 'politics':
                interests+="politics";
                break;
                case 'economy':
                interests+="economy";
            }

use object and array

This Code below has the same meaning of the previous code.

$(document)
 .on('click', '#show', function(){
        console.log('show clicked')

        var interest= {'moive':'movie','sports':'sports','travel':'travel',
               'enter':'entertainment','politics':'politics','economy':'economy'};  
   //interest is an object

        var ar=[];
  //ar ia an array
  
        $('input:checkbox:checked').each(function(){
            var key=$(this).prop('id'); //this : #movie, #sports, #travel, #enter, #politics, #economy
            ar.push(interest[key]);  
          //key = checked one
          //ex) interest[enter] points out enter(key) which is key of entertainment and its value is entertainment.
          // A key is called = Its value is called (like a variable)
          
        })
        var str=ar.join(',');
        console.log(str);
        return false;

this Practice(1)

Print td tags' own value(texts) when they are clicked by user.

    <table>
        <tr>
            <td> 1 (0,0) </td> <td> 2 (0,1) </td> <td> 3 (0,2) </td>
        </tr>
        <tr>
            <td> 4 (1,0) </td> <td> 5 (1,1) </td> <td> 6 (1,2) </td>
        </tr>
        <tr>
            <td> 7 (2,0) </td> <td> 8 (2,1) </td> <td> 9 (2,2) </td>
        </tr>
    </table>
    <br>
    <input type="text" id="txtstr">

$(document)
.on('click','td',function(){ //annonymous function
    var str=$(this).text();  //this = td tags in <body>
      //select td tag and get td tags' text(value). insert it to str
    $('#txtstr').val(str);
    return false;
})

result

this Practice(2)

Change 3(0,2) to a value from the user.

conditions_
Use the same <table> from Practice(1).
Add <input type="button" id="btnGo" show="GO"> to <body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
$(document)
.on('click','#btnGo',function(){
    var str=$('#txtstr').val(); //getter - get value from #txtstr(input : text)
    $('table tr:eq(0) td:eq(2)').text(str); // (inside table tr index is 0 and td index is 2) insert text(str)
    return false;
})

result

Practice(3)

insert 'Old man' to (1,2), 'And' to (2,0) and 'The sea' to (2,1)

    <table>
      //from practice(1)
    </table>
    <br>
    <input type="button" id="btnGo" value="select">
</body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
$(document)
.on('click','#btnGo',function(){
    $('table tr:eq(1) td:eq(2)').text("Old man"); 
    $('table tr:eq(2) td:eq(0)').text("And");
    $('table tr:eq(2) td:eq(1)').text("The sea"); 
    return false;
})
</script>

result

append and prepend

appendInsert this row(10, 11, 12) to the last column of the table when select button clicks

.on('click','#btnGo',function(){
   var row='<tr><td>10</td><td>11</td><td>12</td></tr> '
   $('table').append(row);  //insert row to the table tag
    return false;
})

result

prepandInsert this row(10, 11, 12) to the first column of the table when select button clicks

.on('click','#btnGo',function(){
   var row='<tr><td>10</td><td>11</td><td>12</td></tr> '
   $('table').prepend(row);  //insert row to the table tag
    return false;
})

result

insert html instead of text

html tag can be inserted in a variable but .text() method cannot be used for html. .html() is the method for html tag

.on('click','#btnGo',function(){
   var str='<img src="C:\\Users\\Public\\Pictures\\Sample Pictures\\kitty.jpg" width=150px>';
   var rnum=$('#rnum').val();
   var cnum=$('#cnum').val();
   $('table tr:eq('+rnum+') td:eq('+cnum+')').html(str);
    return false;
})

result

setTimeout, setInterval

setTimeout
setTimeout(function, time(1/1000 second))
一定時間後に関数を呼び出す(delay)
Call the function only one time

.on('click','#btnGo',function(){
   var str='<img src="C:\\Users\\Public\\Pictures\\Sample Pictures\\kitty.jpg" width=150px>';
   var rnum=$('#rnum').val();
   var cnum=$('#cnum').val();
   setTimeout(function(){
    $('table tr:eq('+rnum+') td:eq('+cnum+')').html(str);
   },3000)
    return false;
})

result : three seconds later, the picture shows

setInterval
setInterval(function, time(1/1000) second)
一定時間ごとに関数を呼び出し続けます
setInterval != for, while

    <table id=tbl border=1>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
    </table><br><br>
    <input type="button" id="btnGo" value="show"><br>
    <input type="text" id=rnum>
    <input type="text" id=cnum>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
var intset=null;

$(document)
.on('click','#btnGo',function(){
   var rnum=$('#rnum').val();
   var cnum=$('#cnum').val();
   intset=setInterval(function(){
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(new Date());
   },1000)
    return false;
})
</script>

result : bring the current time every one second

stop button
Use clearInterval to stop call a function in setInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id=tbl border=1>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;</td>
            <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>
    </table><br><br>
    <input type="button" id="btnGo" value="show">
    <input type="button" id="btnStop" value="stop">
    <input type="text" id=rnum>
    <input type="text" id=cnum>
</body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
var intset=null;

$(document)
.on('click','#btnGo',function(){
   var rnum=$('#rnum').val();
   var cnum=$('#cnum').val();
   intset=setInterval(function(){
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(new Date());
   },1000)
    return false;
})
.on('click','#btnStop',function(){
    console.log(stop)
    if(intset!=null){
        clearInterval(intset);
    }
})
</script>
</html>

result

Example

1초마다 테이블 셀별로 1씩 숫자가 증가하게

$(document)
.on('click','#btnGo',function(){
    var rnum=0;
    var cnum=0;
    var n=0;
   intset=setInterval(function(){
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(n++);
    cnum++;
    if(cnum>2){
        cnum=0;
        rnum++;
        if(rnum>2){
        rnum=0;
  //    cnum=0;
    }
    }
   },500)
    console.log("select_button");
    return false;
})

result

process(principle)

magic square

5x5 sum of all the rows is 65 starting point is center of the last row

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test1</title>
</head>
<body>
    <table border=1>
        <tr>
            <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td>
        </tr>
        <tr>
            <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td>
        </tr>
        <tr>
            <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td>
        </tr>
        <tr>
            <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td>
        </tr>
        <tr>
            <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td>
        </tr>
    </table>
    <br>
    <input type="button" id="btnGo" value="select">
</body>

<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
$(document)
.on('click','#btnGo',function(){
   var rnum=4;
   var cnum=2;
  for(var n=1; n<26; n++){
    console.log("rnum : "+rnum+", cnum : "+cnum+", n : "+n+" //before");
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(n);
    rnum++; cnum--;
    if(rnum>4 && cnum<0){
        rnum=rnum-2; cnum++;
    }
    if(rnum>4){
        rnum=0;
        console.log("first");
    }
    if(cnum<0){
        cnum=4;
        console.log("second");
    }
    if($('table tr:eq('+rnum+') td:eq('+cnum+')').text()!='*'){
        rnum=rnum-2;
        cnum++;
        console.log("third");
    }
    console.log("rnum : "+rnum+", cnum : "+cnum+", n : "+n+" //after");
  }
    return false;
})
</script>

</html>

result

スペースX
` : td tag is NOT empty. It has * !! So if($('table tr:eq('+rnum+') td:eq('+cnum+')').text() !='')` will not work as I intended.

nのtdが空でない場合、例は6
(4,2)=1は存在するが、(4,2)に6を入れる
(3,3)に既に存在する5

if($('table tr:eq('+rnum+') td:eq('+cnum+')').text()!='*'){
        rnum--;

上記のコードのように記述すれば、rnum=3、cnum=3、n=6を考慮して記述されるに違いない.
低if条件を受け入れる前にrnum=4、cnum=2、n=6が実行されるので、if条件を満たす場合はrnum=rnum-2; cnum++;が実行されなければならない

16歳の時.
15の上に置かなければなりません.
n=16の場合、rnum=5、cnum=-1のため、rnum=rnum-2; cnum++;を実行する必要があります.
あるいは

if(rnum>4){
   rnum=0;
   if(cnum==-1){
       rnum=rnum+3;
       cnum++;
   }

このコードのように、rnum>4より大きい場合は、まずrnum=0を実行します.
その後cnum=-1(n=16の場合)の場合、rnum=rnum+3; cnum++;を実行しても同様の結果が得られます.

Use setInterval instead of for clause
Print numbers every half a second on the same magic square.

.on('click','#btnGo',function(){
   var rnum=4;
   var cnum=2;
   var n=1;
   var intset;
   intset=setInterval(function(){
    console.log("rnum : "+rnum+", cnum : "+cnum+", n : "+n+" //before");
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(n);
    rnum++; cnum--; n++;
    if(rnum>4 && cnum<0){
        rnum=rnum-2; cnum++;
    }
    if(rnum>4){
        rnum=0;
        console.log("first");
    }
    if(cnum<0){
        cnum=4;
        console.log("second");
    }
    if($('table tr:eq('+rnum+') td:eq('+cnum+')').text()!='*'){
        rnum=rnum-2;
        cnum++;
        console.log("third");
    }
    console.log("rnum : "+rnum+", cnum : "+cnum+", n : "+n+" //after");
  },500)
    return false;
})

result

refer to Example-process(principle)

Stop button!!!

var intset=null;

$(document)
.on('click','#btnGo',function(){
   intset=setInterval(function(){
    $('table tr:eq('+rnum+') td:eq('+cnum+')').text(new Date());
   },1000)
    return false;
})
.on('click','#btnStop',function(){
    console.log(stop)
    if(intset!=null){
        clearInterval(intset);
    }
})

After #btnGo clicked and the function executed, intset is not null anymore because intset has the function(date) and it is called every second.

Reference

この問題について(Nov 04), 我々は、より多くの情報をここで見つけました https://velog.io/@kiiim/Nov-04

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

JavaScript変数/タイプ/関数

[leetcode] 95. Unique Binary Search Trees II