こんにちは、ススムです。
JavaScriptのpush・style.displayとは何なのか？
そんな方向けの記事内容となります。
この記事を書いた人はこんな感じです。⇩
著者
- スポーツの専門学校卒業
- オーストラリアへ語学留学/スシレストランで就労
- JICA海外協力隊にてミャンマーで2年間生活
- Webデザイナー/動画クリエイター/Webエンジニア/Webライター
- オンラインスポーツコーチ
- オンライン日本語講師
- オンラインミャンマー語講師
- ミャンマー人向けオンラインコミュニティ運営
※この記事を書いている私について詳しくはこちらで紹介しています。
本記事の内容
・JavaScriptのpushとは
・JavaScriptのstyle.displayとは
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
JavaScriptのpushについて
配列オブジェクトの組み込みメソッドとして、配列データの末尾に任意の要素を追加したい時に「push」を用います。
以下のように書きます。
var items=配列データ;
items.push( 追加する要素,要素,要素…);
新しく追加する要素を指定するだけで使え、複数でも可能です。
それでは実際にコードを書いていきます。
このように追加された「6,7,8」もconsoleで表示されました。
配列は追加できますが、連想配列は取得できません。
こちらの配列は追加できます。
こちらの連想配列はエラーになってしまいます。
返り値
配列の要素数を返すには「返り値」を用います。
「push」の引数を空にして変数へ代入すると、配列の「要素数」を取得します。
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
オブジェクトの追加
配列の中にオブジェクトを追加してみます。
このように配列データの中に文字や数値、配列やオブジェクトのようなデータを追加できます。
Javascriptには「push」と「pop」があり、「pop」は配列の末尾のデータを削除するために使用します。
このように末尾の「5」が削除されました。
JavaScriptのstyle.displayとは
styleオブジェクトとは、要素のスタイルを変更するために使用します。 displayプロパティは、要素の表示形式を指定するために使用します。要素を非表示にしたり、ブロック要素として表示したりできます。
ではコードを書いてみます。
写真の下には、非表示にさせるためのHideボタン。そして表示させるためのShowボタンを配置しました。
Hideボタンには、hide 関数が適用されてstyle.displayプロパティにアクセスすると文字列「none」を代入して、要素を非表示にします。
Showボタンには、show関数が適用されてstyle.displayプロパティにアクセスすると文字列「block」を代入して、要素を表示させます。
visibilityとは
style.displayプロパティの他にも、visibilityプロパティを用いて画像の表示・非表示ができます。
一つ目のボタンはdisplayプロパティで、二つ目のボタンはvisibilityプロパティです。
visibilityプロパティには、hide2関数が指定されています。
Hide with VISIBILITYボタンには、hide2関数が適用されてstyle.visibilityプロパティにアクセスすると文字列「hidden」を代入して、要素を非表示にさせます。
displayプロパティでは、クリック時に画像が消えてしまいますが、visibilityプロパティでは、ボタンをクリックすると、画像があった場所が空白になります。
プログラミング学習ツール
https://prog-8.com/languages
https://dotinstall.com/
私は、エンジニアの学習にあたってこちらの資料を参考にしました。
http://www5e.biglobe.ne.jp/aji/3min
https://ping-t.com/
【エンジニアの職探しならこちら🔻】
フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】
【IT・プログラミング関連記事】
また、何かあったら紹介したいと思います。
質問などがあれば気軽にコメント下さい。
仕事の依頼などがあればメールまたはSNSにてお問い合わせ下さい。
以上が今回のブログとなります。
読んで頂きありがとうございます。
また次回お会いしましょう。
※0円で受けれるプログラミング説明会
今話題のテックキャンプ。
実績、知名度ともに業界最大級の未経験を対象としたテクノロジースクールです。 受講期間中はいつでもメンター(講師)に質問ができ、目的達成のためにトレーナーが徹底的にサポートします。
【ミャンマー写真集】
【ミャンマー語学習教材３選】
※ミャンマー語のテスト問題集作成しました。詳しくはこちらから
※ミャンマースポーツコミュニティ⏩【Myanmar Sports/ISPE】
※ミャンマー✖️日本コミュニティー⏩【MyanJapa Life】
企業の方、プレスの方、個人の方など、仕事の依頼に関するお問い合わせは以下の
フォームからお気軽にご連絡下さい
コメント