7月5日月曜日TIL

5220 ワード
31期TIL DOM テキストリンク

memo

  • domをする場合、jsファイルでコードを書くのはhtmlファイルで完了するのでstring値が出力されているようです.in opensandbox.
  • classList.remove(「hide」)を使用して設定したhideをクリアすると、値が得られます.

    • 首都コードを先に作成します。

  • アイデンティティー入力ウィンドウ(elInputUsername)でキーボード入力文字を使用する場合:
  • 「4文字以上の文字数」、
  • 「利用可能なID」メッセージ出力
    • let elSuccessMessage = document.querySelector('#username')

let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')

elInputUsername.onkeyup = function() { 
	console.log(elInputUsername.value) // elInputUsername의 값
	
  if(isMoreThan4Length(elInputUsername.value)) {
	console.log('4글자보다 크다') // 성공메시지가 보여져야함
    elSuccessMessage.classList.remove('hide')
    
    // 실패메시지가 가려져야함 
    elFailureMessage.classList.add('hide')
	}
  else{
  	console.log('짧다') // 성공메시지가 가려져야함 
    elSuccessMessage.classList.add('hide')
    
    // 실패메시지가 보여야 함 
    elFailureMessage.classList.remove('hide')
  }
}

function inMoreThan4Length(value) {
	return value.length >= 4
  // isMoreThan4Length('hello') => true
}

    イベントに関する説明

  • DOMでは、マウスクリックやキーボード入力などのイベントが発生します.
  • ブラウザウィンドウのサイズを調整またはスクロールすることもDOMイベントです.
  • イベント発生時に実行する関数をイベントハンドラ
    • と呼ぶ.
  • イベントに関連する属性には、プレフィックスonがある.(onclick、onkeyup)等
    • .

    ミスの件。

  • イベント属性(onclickにイベントハンドラを登録する場合は、関数実行ではなく関数名を登録する必要があります.)そしてonClickではなく、小文字で書かれています.

    • 検証の課題

    To Do List
    [react]ルーティング