anonymous No title
JavaScript
tests
anonymous No title
JavaScript
javascript:(function(){(function(){[{color:"#F44336",selector:"h1"},{color:"#E91E63",selector:"h2"},{color:"#9C27B0",selector:"h3"},{color:"#673AB7",selector:"h4"},{color:"#3F51B5",selector:"h5"},{color:"#2196F3",selector:"h6"}].map(function(a){for(var c=document.querySelectorAll(a.selector),b=0,f=c.length;b<f;++b){var d=c[b];d.style.backgroundColor=a.color;var e=document.createElement("span");e.innerHTML=" | "+a.selector;d.appendChild(e)}})})();})();
anonymous No title
JavaScript
<!DOCTYPE html>
<html lang="ja">
    <head charset="utf-8">
        <title>JS Practice</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                cursor: pointer;
                transition: 1.2s;
            }
            .circle{
                background-color: pink;
                border-radius: 50%;
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <div class="box" id="target"></div>
        <script>
            'use strict';

            const target = document.getElementById('target');

            target.addEventListener('click', () => {
                target.classList.toggle('circle');
            });
        </script>
    </body>
</html>
anonymous No title
JavaScript
<script>
if(typeof jQuery != 'undefined'){
  $(function(){
    $('form.wpcf7-form').find('input,textarea').change(function(){
      dataLayer.push({
        'event': 'formForcus'
      });
    });
  });
}
</script>
anonymous No title
JavaScript
<script>
if(typeof jQuery != 'undefined'){
  $(function(){
    $('form.wpcf7-form').find('input').change(function(){
      dataLayer.push({
        'event': 'formForcus'
      });
    });
  });
}
</script>
anonymous No title
JavaScript
  function() {
    return location.hostname+location.pathname+location.search;
  }
anonymous No title
JavaScript
(function() {
    'use strict';

	$('.tw-textarea').keydown(function(e){
		if(event.ctrlKey){
			if(e.keyCode === 13 && $(this).val()){
				$('.tw-button-primary').click();
				return false;
      		}
    	}
    });

})();
anonymous No title
JavaScript
function(){
    var
      args = document.getElementsByTagName("script"),
      result = 0;
   
    for (var i = 0; i < args.length; i++) {
        if(args[i].innerText.match(/ga\('ecommerce:addTransaction'/)){
            var arg = args[i].innerText.match(/'sku': '(.+)'/g);
   
            if (arg != null) {
              result = arg.join(',').replace(/'sku': '(.+?)'/g, "$1");
              break;
            }      
        }
    }
    return result;
}
  
anonymous No title
JavaScript
        function TimerCount(){
            $.ajax({
              url: 'https://hogehoge', // ポスト先のURL
              type: 'POST', // HTTPメソッドの種類
              dataType:'json',
              timeout:1000,
              success: function(code) {
                salarys = localStorage.getItem('salary_list');

                if(salarys == null){
                  localStorage.setItem('salary_list',JSON.stringify(code));
                }
                else{

              },

              error: function(xhr, status, err) {
                //window.location.reload();
              }
            });
            // 3秒ごとに実行
            window.setTimeout("TimerCount()",3000);
        }
anonymous ReactTutorial_main3.jsx
JavaScript
let Square = props => {
  return (
    <button className="square" onClick={() => props.onClick()}>
      {props.value}
    </button>
  );
};

// ==============================================

class Board extends React.Component {
  // 9_2.GameComponentにリフトアップしたので削除
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     squares: Array(9).fill(null),
  //     xIsNext: true
  //   };
  // }

  // 11_1.StateがなくなったのでhandleClickはGameComponentへリフトアップ
  // handleClick(i) {
  //   const squares = this.state.squares.slice();
  //   if(calculateWinner(squares)||squares[i]){return;}

  //   squares[i] = this.state.xIsNext ? "X" : "O";

  //   this.setState({
  //     squares: squares,
  //     xIsNext: !this.state.xIsNext
  //   });
  // }

  renderSquare(i) {
    return (
      <Square
        // 9_3.Stateからではなく,<Squares/>の属性で渡されたpropsから受け取る(現状,属性が属性になってるよー
        // value={this.state.squares[i]}
        value={this.props.squares[i]}
        // onClick={() => this.handleClick(i)}
        // 受け取る名前だからonClick
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    // 10_2.GameComponentにリフトアップするので,削除
    // const winner = calculateWinner(this.state.squares);
    // let status;
    // if(winner){
    //   status = "winner: " + winner;
    // }else{
    //   status = "Next player: " + (this.state.xIsNext ? "Player1" : "Player2");
    // }

    return (
      <div>
        {/* 10_4.GameComponentで表示するので削除 */}
        {/* <div className="status">{status}</div> */}
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

// 9_1.最上位のGameComponentのStateで履歴を管理します
// BoardComponentのStateをこちらにリフトアップしましょう
class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // historyの中にsquaresの履歴を保存する
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      xIsNext: true,
      // 12_3.今何手目を表すStateを作成
      stepNumber: 0,
    };
  }
// 11_2.リフトアップしたこの関数を編集
  handleClick(i) {
    // const history = this.state.history;
    // 12_5.最初からstepNumberまでの配列を代入するようにします
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    // 一個前のデータを入れる変数を作る
    const current = history[history.length - 1];
    // データを複製し,
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }

    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      // historyに複製を追加するconcatメソッド
      history: history.concat([
        {
          squares: squares
        }
      ]),
      xIsNext: !this.state.xIsNext,
      // 12_6.stepNumberを書き換えましょう
      stepNumber: history.length,
    });
  }

  // 12_4.jumpTo関数を作りましょう
  jumpTo(step){
    this.setState({
      // stepNumberを引数(move)に書き換えます
      stepNumber: step,
      // 引数(move)が偶数ならxIsNextをtrueにします
      xIsNext: (step % 2) === 0,
    })
  }

  render() {
    // 10_1.様々な値が,BoardComponentに渡されるようにしましょう
    // historyに現在のsquaresの状態を代入
    const history = this.state.history;
    // historyの後ろから2番目を変数に代入
    // const current = history[history.length - 1];
    // 12_7.手数から1つ前のデータ番号を取得するようにしましょう
    const current = history[this.state.stepNumber];
    // 1個前のsquaresで勝者を判定する
    const winner = calculateWinner(current.squares);

    // 12_1.過去データの表示コードを追加
const moves = history.map((step, move) => {
      // moveがtrueかどうかでdescに代入する値が変わる
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (

        // <li>
        // 理解が困難だったが,変更のためには親子間で一意性のあるkeyが必要ってか重要?みたい
        <li key = {move}>
        {/* moveを引数としたjumpTo関数をクリックイベントにするボタンを返す */}
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    // 10_2.BoardComponentからリフトアップ
    let status;
    if (winner) {
      status = "winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "Player1" : "Player2");
    }

    return (
      <div className="game">
        <div className="game-board">
          {/* 10_3.BoardComponentに渡されるように,属性を設定 */}
          <Board squares={current.squares} onClick={(i) => this.handleClick(i)} />
        </div>
        <div className="game-info">
          {/* 10_4.statusはここで表示 */}
          <div>{status}</div>
          {/* 12_2.作成した履歴ボタンを配置 */}
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

ReactDOM.render(<Game />, document.getElementById("root"));
Don't you submit code?
Submit