こんにちは、ススムです。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
【本記事のテーマ】
「JavaScriptでのコーディングについて簡単に紹介します。」
【読者さんへのメッセージ】
「本記事では、IT業界・プログラミング・インフラ等について紹介します」
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
HTML/CSSの記述
今回は、Javascriptで簡単なアプリを作成したいと思います。
まずは、HTMLで以下の要素を記述します。
「style.css」「 main.js」のファイルをリンクさせます。
続いてCSSのでコードを書いていきます。
divのcontainerクラスのスタイルを書きました。
id属性のbtn(ボタン)のスタイルを以下のように書きます。
btnの形をborder-radiusで調整しました。
user-selectでは、ダブルクリック時に青く指定されるのを無くしました。
次にp要素とid属性resultのスタイルです。
JSの記述
main.jsでjavascriptの記述をします。
getElementByIdでbtnとresultを指定しました。
addEventListenerでは、btnがクリックされた時の処理を書いていきます。
今回はランダム表示させるために、Math.randomの処理をします。
条件に応じて処理をするような条件分岐を書きました。
占いの箇所をクリックすると、ランダムに文字が表示されます。
こちらは15分ほどで作成できました。
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min/
プログラミング学習ツール
https://prog-8.com/languages
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
まとめ
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント