鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

JavaScriptを書き始める時の注意点。(個人的超超初歩的覚書)

JSばかり書いている訳ではないので、間が空いてからホームページの拡充などでいざ書こうとした時、ひさっしぶりに運転するゴールド免許ドライバーみたいな気分で書き始めることが良くあります。

そんな時、毎回初心者向けのサイトとかを確認したり、jsが動作しなくて???となったりするのも流石に卒業したいので、自分なりにメモっておきます。

1. 先ずはhtml/phpファイルの中でscriptタグを追加しJSが動くことを確認

先ずはHTML/PHPのファイルの中で、script タグをHTML/PHPの下に追加して、 alertconsole.log をつけてみる。これが一番ハードル低く、JSが認識されて動いていることを確認できる方法なので、サーバーを起動してからHTML/PHPファイルを実行して、alertやconsoleログが出力されることを確認する。

alertの使い方は、 alert(文字列) 、console.logの使い方は、 console.log(文字列)

2. jsファイルを外だしする

そのままscriptタグ内に書き進めてからでもいいが、最終的にはjsファイルは普通外出しする。

初心者的に、ファイルの読込のところで引っかかることがある。私だけかも。のでメモ。

jsファイルを作成して、そのファイルを読み込みスクリプトタグを head 内に追加する。

読み込みのスクリプトタグは、 <script src="ファイルのパス" media="all"></script> が基本なので、まさか間違えないように。

一度、cssの読み込み用のタグを間違えて書いていたことありorz

cssの読み込みタグは、 <link rel="stylesheet" href="ファイルのパス" media="all">

3. jsファイル内の最初のテンプレートを忘れない

jsファイルの中身は、関数やらを作成する前に、最初に全体を囲っておくということを忘れない。

この書き方は、いろいろある。ここにメモっている。

http://tacosvilledge.hatenablog.com/entry/2018/04/10/021442?_ga=2.218155674.2007343830.1574727699-234384479.1574727699

$(function(){
  // 関数をこの中に書いておく
  tabClick();
});

/* ----------------------------------------------------------
 Tab Click
---------------------------------------------------------- */
var tabClick = function(){
  // 関数の中身
}

これで準備できた。関数の中身をいろいろと追加していく。

初歩的なところだけど、時折しか書かないとなかなか身についてないようなので、次こそは初心者ドライバー脱出したい。