1000記事以上を目指すブログもう迷いたくない。基本のjavascriptサマリー2017年7月28日2017年8月3日JavaScript362view9件JavaScriptHOMEJavaScriptもう迷いたくない。基本のjavascriptサマリーJavaScriptを習得したいと思っていろいろ触っているときに、古い情報と新しい情報が混在して困った。JavaScriptについての理解ができていれば、それらの情報に困ることもないのだろうが、それ以前の問題の私。「JavaScriptの基礎の基礎を書きながら覚える」かつ「最近の書き方などをTipsとしてメモ」していきます。ファイルの準備や表記方法についてと、簡単な関数を使ってみるというところまで。※間違った記法などについては優しく指摘して下さい。htmlファイル「hoge.html」から「fuga.js」を読み込む。適当なディレクトリの中に2つのファイルを作成。「hoge.html」と「fuga.js」を作成する。*名前は任意で良い(以降のhoge,fugaも同様)。htmlファイルに必要最低限のhtmlを入力。charset="utf-8"></head><body></body></html>htmlファイル「hoge.html」から「fuga.js」を読み込む。src="fuga.js"></script></body></html>※後々コードが長くなってくることを踏まえて、最初から外部ファイルとして準備しておく。scriptタグの読込場所について前提としてscriptタグはどこに書いても問題ない。多くはheadタグ内か/bodyタグ直前に記述されている。最近では/dodyタグ直前がいいとされている。★理由JavaScriptファイルを読み込んでいる間は、HTMLファイルの読み込みが中断されるため。head内に記述した場合JavaScriptを読み込んでからhtmlの読込が行われる。先読みしておきたい場合などはhead内に記述。/body直前に記述した場合html要素がすべて読み込まれた状態でJavaScriptの読込を始めるため、表示速度などの処理がスムーズになる。async属性を使って非同期で読み込むhtml5から使えるようになったasync属性を使うと、レンダリング速度の問題が解決されるため、head内記述のデメリットを解消できる。非同期で読み込むことで実行される順番が担保されなくなってしまうので、状況に合わせた使い回しが必要。type属性についてscriptタグを見ていると、下記のようにtype属性が付いている表記をみることがあると思います。src="fuga.js"></script>しかし、html5ではデフォルトの属性がJavaScriptのため、表記は省略できます。書いても問題はないが、せっかくなので省略して簡単に書くのが吉。*/alert('hoge');文字列の扱いについてJavaScriptで文字列を出力する場合は「ダブルクォーテーション」か「シングルクォーテーション」で囲む。どちらを使用してもいい。*/alert(hoge);変数について現在使える変数の宣言にはvar,let,constがある。古い書籍などでは、「とりあえず変数はvar」のように書いてある。var,letの違いはスコープ(可視範囲、参照できる範囲)の違い。letはブロックレベルでのスコープ。varは関数スコープ。constで宣言した変数は変更できない。コーディング規約で一般的とされるのをまとめると、変数はわかりやすいようにletを使う、定数にはconstを使う、varは使わない。記法として、変数はローワーキャメルケース、定数は大文字+アンダースコアが使われる。どちらも厳守する必要はないが、作法的な部分として。連番がついた変数の集まりのこと。400;//インデックスの要素全てをアラートで出力するalert(hoge);//インデックス番号が2の要素を表示出力するalert(hoge[2]);連番は0から始まる数える順番は1~ではなく、0~から始まる。これはプログラミングの共通のルールのようなもの。配列リテラル「[]」を使用したものを「配列リテラル」と呼ぶ。配列の使い方2上記の配列の使い方と同様のことを、以下の書き方でも実行ができる。