?? (??? ??? ? ??) :

 
    <meta charset="utf-8">
    <title> Tictactoe </title>
    <link type="text/css" rel="??? ??" href="../%20css/main.css">
    
    <script type="text/javaScript" src="../%20js/tictactoe.js"> </script>


    <div class="Grid-Container">
        
        <div id="item1" onclick="click ()"> </div>
        
    </div>

? ?? ????? OnClick = "Click ()? ?? ???? ??? ???? ?? ??? ???????. Tictactoe.js? ?? ????? ? ???? ???? ?? ??? ?? ??? ???? ?? ?? ??? ??? ????? ?? ??? ?? ??? ?? ??? ?????.

1.2 ??? : ???? ??? ??????

?? ????? ???? ???? ? ?? ?? ??? ???? ????. ?? ?? JavaScript ????? ???? ?? HTML ??? DOM????? ???? ??? ????? ??? ??? ???? ????? ?? ? ? ??? HTML ??? ??? ??????? ?? ? ?? ??? ?? ? ????.

?? (??) :

 
    <meta charset="utf-8">
    <title> Tictactoe </title>
    <link type="text/css" rel="??? ??" href="../%20css/main.css">


    <div class="Grid-Container">
        <label class="?? ??"> x : 0 | 0 : y </label>
        <div id="item1" onclick="click ()"> </div>
        <div id="item2" onclick="click ()"> </div>
        
    </div>
    
    <script type="text/javaScript" src="../%20js/tictactoe.js"> </script>

?? ?? ?? :

• ??? ?? : . HTML ??? ???? DomContentLoaded ???? ????? ????? ?? ??? ?? ? ? DEFER ????? ????? ?????.
• Async ?? : . Async ????? ????? ???? ??? ???? ?? ??? ???? ??? HTML ?? ??? ???? ????? ? ????.

DOM? ???? ????? ?? ??? ????? ??? ?? ??? ???? ?? ? ??? ?????.

?? 2 : ?? ?? ?? ? ??

???????? ? ??? ?? ??? ??? ? ??????. JavaScript? ???? ???? ?? ?? ??? ???? ?? ???? ??? ? ??? ?? ??? ????? ?? ??? ??, ??? ?? ??? ??? ????? ?? ? ? ????.

2.1 ??? ?? : ?? ?? ??? ??????

?? ????? ??? ??? ??????.

 // javaScript ??
?? ?? () {
    Console.log ( "???");
}

??? ?? ???? DOM ??? ?????. ???? ?? ???? ????? ??? ?? ?? ??? ???? ?? ??? ???? ?? ??? ????? ??? ????? ??? (????? ???? ?? Window.click? ?? ??? ??? ?? ???? ?? ???? ?? ?? ??? ???? ????. ??? ?? ??? ??? ? ????.

• ?? ? : ???? DOM ??? Click () ??? ?? On Click ???? ???? ??? ????.
• ??? ?? : ?? ?? ??? JavaScript ????, ? 3 ? ?????, ??? ?? ?? ?? ? ???? ??? ??? ???? ??? ?? ??? ??? ? ????.
• ???? ?? ?? : ?? ??? ?? ????? ??? ??? ??? ???? ??? ? ????.

2.2 ??? : ??? ?? ??? ?????

??? ?? ??? ??? ?? ???? ?? ???? ??? ???? ????? ???? ??? ???? ?? ????. ????? ??? ???? ??? ????? ??? ?? ?? ??? ?????.

?? (??) :

 // javaScript ??
???? = ?????;
XplayerPoints = 0???;
yplayerpoints = 0???;

function handleClick () {// ?? ??? handleClick?? ?????
    Console.log ( "??? ?? ??!");
    // ??? tictactoe ?? ?? ??}

??? HTML? OnClick ??? ? ?? ??? ????? ??????????.

 <div class="Grid-Container">
    <label class="?? ??"> x : 0 | 0 : y </label>
    <div id="item1" onclick="handleclick ()"> </div>
    <div id="item2" onclick="handleclick ()"> </div>
    <div id="item3" onclick="handleclick ()"> </div>

    <div id="item4" onclick="handleclick ()"> </div>
    <div id="item5" onclick="handleclick ()"> </div>
    <div id="item6" onclick="handleclick ()"> </div>

    <div id="item7" onclick="handleclick ()"> </div>
    <div id="item8" onclick="handleclick ()"> </div>
    <div id="item9" onclick="handleclick ()"> </div>
</div>

? ?? ?? : ??? ??? (AddeventListener)

??? ??????? ??? onclick ??? ????? ?? JavaScript ??? addeventListener ???? ???? ???? ??? ? ?? ?????. AddeventListener? ? ?? ??? ??? ????? (HTML? ???? ??? ?? JavaScript? ??? ?????), HTML ? JS? ??? ??? ??? ??? ???? ?? ?? ?? ??? ?? ? ? ??????.

3.1 ??

• ?? ?? ?? : HTML? ? ???? JavaScript ??? ???? ?? ????.
• ??? : ??? ?? ? ??? ??? ?? ??? ???? ?? ? ? ????.
• ???? : ??? ???? ???? ??? ??? ??? ?? ?????.
• ?? ?? : JavaScript ?? ???? ??? ??? ?????.

3.2 ? : addeventListener ??

?? HTML? ?? onclick ??? ???? HTML ??? ???? ??????.

 
    <meta charset="utf-8">
    <title> Tictactoe </title>
    <link type="text/css" rel="??? ??" href="../%20css/main.css">


    <div class="Grid-Container">
        <label class="?? ??"> x : 0 | 0 : y </label>
        <div id="item1" class="Grid-Item"> </div> 
        <div id="item2" class="Grid-Item"> </div>
        <div id="item3" class="Grid-Item"> </div>
        
    </div>
    <script type="text/javaScript" src="../%20js/tictactoe.js"> </script>

?? ?? JavaScript ???? addeventListener? ???? ???? ???????. DOM ????????? ???? ?? ??? ??? ??? ????? DOMContentLoaded ??? ??? ??? ?????.

 // javaScript ?? (tictactoe.js)

// ?? ??
???? = ?????;
XplayerPoints = 0???;
yplayerpoints = 0???;

// ??? ??? ?? ?? handleGridClick (???) {
    console.log (`??? ?? $ {event.target.id} ??!`);
    // tictactoe ?? ??? ???? ??????. 'x': 'o';
    // ???? =! ????;
}

// ???? ??? ???? ?? DOM? ????????? ?????? .AdDeventListener ( 'domContentLoaded', () => {
    // ???? ???? ?? ?? ???? ?? ???? ??????. // ??? ?? ?? ID ??? const griditems = docum // "??"?? ???? ID??? ?? div? ??????.

    // ? ???? ???? ??? ??? ??? ?? ?????.
        item.addeventListener ( 'click', handleGridClick);
    });
});

? ???? handleGridClick ??? ??? ???? ?????. DomContentLoaded? HTML ??? ??????? ?? ?? ? ? ????? ???? ?? ???? ??????. ?? ??? ?????? ??? ? ?? ?? ??? ???? ?????.

?? ? ?? ??

?? JavaScript ??? HTML?? ???? ???????? ??? ??????.

1. ?????? ?? : ??