【JavaScript】学習記録:01
教材：ドットインストール
レッスン：はじめてのJavaScript
学習内容概要
画面に色を付けたdivを配置。押下により状態を変化させる。
・色変え
・アニメーション
・ランダム関数
・for分によるdivの作成
覚えたこと
■ JavaScriptのエラー箇所を調べる方法
<Script>タグの中に以下を記述することによって検索エンジンchromeのディベロッパーツールを使用することが出来る。
'use strict';
chromeの右上の縦3つの点から
>その他のツール
>ディベロッパーツール
を選択。
■ 関数
Math.floor : 与えられた値以下である最大の整数を表す数値。小数点以下を切り捨てる。
Math.random : 0 以上 1 未満の疑似ランダムな浮動小数点による小数を返す。
使用例
const winner = Math.floor(Math.random() *5);
Math.random()に欲しいランダム数字の1つ小さい数字を乗算する。
0以上乗算する数字未満を取得できる。使用例では0以上5未満(0,1,2,3,4)。
このままでは浮動小数点による小数が返されるため、Math.floorをしようして小数点以下を切り捨てる。
■ 画面要素の操作
document.getElementById('div') : IDを用いて操作する画面要素を指定する。
.classList.add('スタイル名'); : CSSや<style>タグの装飾を使用する。
.textContent = '文字列'; : 画面要素の中に表示する文字を指定する。
■ <script>タグ内での画面要素生成
document.createElement('div'); : この場合divを生成。()内は生成される要素の型を特定する文字列。
document.body.appendChild(div); : divをbodyの子要素として追加→こうすることでブラウザに表示される。
■ クリックイベント
画面要素.addEventListener('click' , () =>{
// イベント内容
});
1回クリックされたら=>の内容を実行する。
■ if文の注意
比較の際、=は3つ。多い。
if ( i === 5){
};
■ 変数の宣言方法
var : 再宣言、再代入が可能、スコープが広い
let : 再宣言が禁止
const : 再宣言、再代入が禁止、初期値を必ず指定
■ CSS
display: flex; : フレックスコンテナ：コンテンツを横方向に並べる。
flex-wrap: wrap; : wrap:子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ。
cursor: pointer; : マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定。
transition: 0.8s; : 変化にかける時間。
text-align: center; : textの横位置。
line-height: 100px; : textの縦位置。
transform: rotate(360deg); : rotate : 回転(回転角度)。マトリクス変形、移動、縮尺、回転、傾斜などの変形を適用する 。
transform: scale(0.9); : scale:縮尺。
成果物
ミニゲーム。
5つあるdivをクリックし、1/5の確率で当たりを押したら勝利。
所感
JSは装飾というよりサーバとフロントの値のやり取りのため、分岐を中心に使用していたためアニメーションで動くことに感動した。見ていて楽しい。今までは地道にdiv等画面要素を<body>タグに作成してきたが、<script>タグでfor分を用いてほしい数だけすぐに生成できるのは便利だと感じた。
この記事が気に入ったらサポートをしてみませんか？