9.03 AI SCHOOL-制御文、グローバル/ゾーン変数、スキャン、シース、繰り返し文3-2

2542 ワード

適用)1
var arr=[/5配列オブジェクト情報
{
quote「子供はみな芸術家です.」
作者:ピカソ
},
{
quote「心の声が聞こえない.」
作者:「ゴッホ」
},
{
quote「完璧を恐れるな」
作者:「その他」
},
{
quote「インスピレーションが来るのを待つわけにはいかない」
作者:「ロンドン」
},
{
quote:「やる気さえあれば、その努力さえすれば、いろいろな考えが見つかります.」
作者:「スーズ」
},
];
//配列へのアクセス方法+オブジェクトへのアクセスの本格的な応用
//console.log(arr[0].author);
//console.log(arr[0].quote);
var quote = document.getElementById('quote');
var author = document.getElementById('author');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var random = Math.floor(Math.random() * arr.length);

quote.textContent =  arr[random].quote;
author.textContent =  arr[random].author;
});
//サイコロゲームアプリのオブジェクト情報へのアクセス方法
適用)2
//インポートラベルを使用して、ユーザーが入力した情報を画面に出力します.
//入力方式にアルファベットがある場合、出力がない場合は、ポルノアラームウィンドウを設定してください
//css.class showで入力値を挿入するとshowが消えてしまう機能
var form = document.getElementById('form');
var input = document.getElementById('msg');
//jsで、選択プログラムquerySelectorメソッド<ラベルはラベル名;
//アイデンティティ=#アイデンティティ値.クラス=です.クラスクライアントjsメソッド
var feedback = document.querySelector('.feedback');
var txt = document.getElementById('txt');
///html btn-submit>データ送信時のボタンタイプ>イベント動作
//ブラウザは、データ転送時に自動的にリフレッシュされるため、コミットは一時的に表示されなくなります
//jsを使用して、これらのラベルのプロパティを制御します.>function(e)/e.preventDefault();
form.addEventListener('submit', function(e) {
//테그의 속성을 제어하는 코드
e.preventDefault(); //본연 태그의 기능을 정지함.
//console.log(e);
//console.log('제출');

//z클릭을 할때마다 msg의 값을 가지고 오는 것 2가지 방법
//1다이렉트로 가저오는 법
//1
var msg = document.getElementById('msg').value;
//2  밖에 변수를 형성하고
//var msg = input.value;
console.log(msg);

//빈 문자열을 인지 못하게 하는 코드
//if문을 활용해서 글자가 있는 경우와 없는 경우는 나눠서 분기 처리 
// 글자가 있다 참/ 글자가 없다 거짓
if(msg){

	//console.log('참');
	txt.textContent = msg;
	//reset이라는 메서드 - 해당되는 태그내에 있는 태그의 텍스트 내용을 초기화
	form.reset();


} else {
	//console.log('거짓');

	// 특정영역에 클래스를 추가/삭제 할때 쓰는 프로펄티/메서드 classList.add/remove()
	// display.none이 클래스 show가 작동이 되면서 block처리 되면서 보임.
	feedback.classList.add('show');

	setTimeout(function() {

		feedback.classList.remove('show');

	}, 2000);



}
})
//コンソールが正常に動作しない理由を見つけました...htmlにjsが正しく接続されていません...
//
//タイムアウト時に特定のパラメータ/関数を呼び出す方法(匿名、コールバック関数、時間)
/*
setTimeout(function(){
console.log(「2秒後に実行」)
	},2000)
*/
	//1000 = 1초