21.08.12

学習内容

210812 JavaScript実践コード
今日は昨日勉強したときにjsでボタンをクリックすると背景色がランダムに変わる実習を利用して、昨日勉強したjavascriptデータ型リファレンスタイプの概念、元のタイプとリファレンスタイプの違い、実習を復習しました.

-インターン

そして昨日はボタンをクリックして背景の色をランダムに変える機能を練習しました.
背景色をランダムに変化させる機能を作るには、1~6個の数字をランダムに持ってくるゲームを理解する必要があります.
jsにはconsoleのように予め作成されたオブジェクトがあります.
これらのオブジェクトには、数値を制御するMathオブジェクトを含む各ロールを担当するオブジェクトが定義されています.ここではこのMathオブジェクトを使用します.

1 ~ 6 숫자를 랜덤하게 가져오는 게임

// Math.random()        : 0 ~ 0.999999~ (0 포함 1 미만)까지를 실수 형태로 표현할 때 사용, 매번 수가 다르다.
// Math.random() * 6    : 0 ~ 5.999999~
// Math.floor(Math.random() * 6)      : 0 ~ 5
// Math.floor(Math.random() * 6) + 1  : 1 ~ 6


console.log(Math.random());          <- 절대 1이 될 수 없다.
console.log(Math.random() * 6);      <- 절대 6이 될 수 없다.
console.log(Math.floor(Math.random() * 6));  <- 소수점 내림 처리
console.log(Math.floor(Math.random() * 6) + 1);
↑ + 1을 해서 1 ~ 6까지로 만든다.

Mathオブジェクトのランダムメソッドを使用します.

Math.床で下垂処理を行います.小数点以下はすべて捨てる.

なぜ

に7を乗じないのですか?結果は1から始まるはずですが、0から...

1 ~ 10, 1 ~ 100까지로 하고 싶다면?

console.log(Math.floor(Math.random() * 10) + 1);
console.log(Math.floor(Math.random() * 100) + 1);

숫자가 교체되는 위치도 꼭 기억해야 한다.

この式と昨日習ったコールバック関数を用いて,配列中のデータをランダムに取得した.(クリック時にボタンの色をランダムに変更するのが狙いです.下のコードは昨日作成した部分です)

var colors = ['yellow', 'green', 'pink', '#dc143c', 'rgba(123, 123, 123, 0.5)'];

var bg = document.getElementById('color-bg');
var btn = document.getElementById('btn');

インデックスはゼロから始まります.上のように並べて、必要な数は0から4です.

btn.addEventListener('click', function() {

	var random = Math.floor(Math.random() * 5);
	console.log(random); <- 변경이 잘 되나 확인용
	console.log(colors[random]); <- 변경이 잘 되나 확인용
  
})

var random = Math.floor(Math.random() * 5);ヤードと書いて、0から4の範囲があって、配列に近づくことができます.

console.log(colors[random]);を使用して、配列内のデータとアクセス方法を組み合わせます.[random]の数は変化するたびに0から4になる.すると、インデックス値となり、色値が出力されます.

->ここまでは、アレイ内のカラー値データにアクセスできますが、最終的にはバックグラウンドカラーとして適用することを目的としています.jsを用いてcssを適用する方法を知る必要があります.
まず、背景色を適用する領域を指定します.(上からvarbgとして指定されています)
jsにcssを適用する式を追加します.

btn.addEventListener('click', function() {

	var random = Math.floor(Math.random() * 5);
  
	bg.style.backgroundColor = colors[random]   <- 이 공식

})

jsにcssを適用するには、styleという属性を連続的に記入する必要があります.bgという名前のオブジェクトのstyleのプロパティにアクセスし、backgroundColorを書きます.上の色[random]を色値で加えます.

cssでは、中間に背景色やborder-radiusのようにハイフンがあります.jsはハイフンを許可しません.jsはbackgroundColorのように,以前無条件にcaseで記述した状態→css属性を利用したい場合はcaseを用いるべきである.

次は成果物です

を繰り返し練習しなければなりません.

-2つの変数の説明を追加

最初の

前回学習した4つの変数
1.ハイフン(-)は使用できません
2.最初の文字はunderbar()またはドル($)以外の特殊文字は使用しないでください.
3.数字と混合して使用できますが、数字で始まることはできません.
4.変数名で意味不明な単語は使用しないでください.
予約語
:JavaScriptには、オブジェクト名を含む事前定義されたキーワードがたくさんあります.
ex)var、typeof、function、null、undefined、false、true、consoleなど
→変数名を作成するときに予約語は使用できません.

var var;
var function;

-> 이렇게 작성하면 에러가 난다.

予約語は多いが、通常は1つの単語で構成されており、予約語に関する誤りを避けるために2つ以上の名詞の組み合わせで変数名を書くことができる.

2番目

jsファイルはcssファイルのように複数のファイルを生成することもできます.
異なるファイルをhtmlにバインドすると、上から順にコードが読み出されます.

<script src="js/main.js"></script>
<script src="js/custom.js"></script>

この場合、まずmainファイルを読み出し、customファイルを読み出します.
連動後主.jsファイルで

var mainVar = "Main Var"

変数を作成します.ではcustomこの変数はjsファイルに書き込むことができます.
main.jsは次の関数を宣言します.

function mainFunc() {
	console.log("Main Func")
}

この関数をカスタマイズします.jsファイルから呼び出すことができます.
ただし、ファイルをバインドするときは順序に注意してください.また、変数を作成してから使用するには、関数を宣言してから呼び出す必要があります.まず、存在するファイルを上に書いてから、書くファイルを後ろにバインドします.順番が大切です.後で、以前に作成したファイルの変数名と関数を関連するファイルで使用できます.

困難な内容

今日初めて実習の部分を聞いたとき、私は半分しか理解していませんでした.昨日学んだid値に近い値を理解していたが、今日からランダムに1~6個の数字を抽出した講義が始まり、記録されたものの、まだぼんやりした状態だった.ただ全体的に内容が難しいと思います.

解決策

昨日の授業も含めて改めて理解しました.前の概念をまだ完全に理解していないので、理解していません.どの部分に使うか分からない前の関数と対象部分がさらに理解できたので,実習部分で関数と対象概念の使用を見たので,段階的に説明を聞いて理解した.今から見れば、昨日はほとんど対象の概念を理解していなかった.その部分も含めて、今日学んだことは公式のように暗記しなければなりません.

に感銘を与える

昨日と今日の勉强内容は难しくて、一目见たら绝対だめで、何度も闻いて、初めて理解しました.
繰り返し聞くと効果が見える部分はまだ完全に理解されていませんが、return部分と対象です.昨日は本当に広く知らなかったのですが、もう一度聞いてみると、少しは理解できました.
今日勉強した内容はjsであらかじめ作っておいたオブジェクトと方法なので、公式のように暗記すればいいです.ただその公式にも一定の理解の基礎があるので、昨日学んだ概念を熟知しなければなりません.なぜ昨日その内容を学んだのか練習して理解しました.これからは背負い込むことがたくさんあります.