Rubyがある程度わかっていて、javascriptを理解するときにこれは知っておきたい基礎の話

Rubyを1年ほどやって、最近JavaScriptをいじる機会も多くなってきて、基礎で知っておいたほうが良いことを先輩に教えを請うたのでメモ！

他の言語を知っているけれどJavaScriptをこれから始める、始めていて動くコードは書いているけれど実はよくわからないところがある人向けです。

JavaScriptはなぜ生まれたのか
JavascriptはECMAScript
script typeタグを使って間にJavaScriptを記述する
JavaScriptが読み込まれるタイミングが大事
メソッドと関数の違いとthisについて
変数（var）とファンクション（関数）がファイルの下の方にあっても　先に定義されたことにせよというルールがある
変数に関して
JavaScriptの型について

JavaScriptはなぜ生まれたのか

CSSとHTMLに更に動きを加えたいということで開発された言語。

JavascriptはECMAScript

JavaScriptは別々に開発されていたため、さまざまなJavaScript族の言語が存在していました。

中心的なものを定めたECMAScriptが策定されました。

script typeタグを使って間にJavaScriptを記述する

<script type="text/javascript">
    //この間にJavaScriptを記述します。
</script>

JavaScriptが読み込まれるタイミングが大事

htmlに書き込んでJavaScriptを呼び出すタイミングが合わないとjavascriptが適応されないことがあります。

  <html>
    <head>
    </head>

    <body>
      <script type="text/javascript">
          var paragraphs = document.getElementsByTagName("p");
          console.log(paragraphs.length);
          paragraphs[0].innerHTML = "こんにちは";
          paragraphs[1].style.color = "red";
    </script>

      <p>Hello 1</p>
      <p>Hello 2</p>
    </body>
  </html>

上記を下記のようにすると、

ちゃんと文字変更とスタイル変更が適応されます。

  <html>
    <head>
    </head>

    <body>
      <p>Hello 1</p>
      <p>Hello 2</p>
      <script type="text/javascript">
          var paragraphs = document.getElementsByTagName("p"); //あるタグの情報を配列にして取得できます。
          console.log(paragraphs.length); //コンソールに吐き出せます。Rubyの#puts的な感じで使ってます。
          paragraphs[0].innerHTML = "こんにちは";  //このように配列の中の文字を書き換えることができます。
          paragraphs[1].style.color = "red";  //このようにスタイルを適応することができます。
      </script>
    </body>
  </html>

これは、JavaScriptが読み込まれたタイミングの問題です。

pタグが読み込まれる前にJavaScriptが適応されてしまっていたのを

pタグが読み込まれてからJavaScriptが適応するように変更しました。

メソッドと関数の違いとthisについて

JavaScriptの「this」がインスタンスまたはグローバルオブジェクトを参照できますが、

どの部分を指しているか理解しておくことが重要です。

参考はこちら　→　メソッドと関数の違いとthisは何を指しているか（JavaScriptの場合）

変数（var）とファンクション（関数）がファイルの下の方にあっても先に定義されたことにせよというルールがある

ただし、関数に関して、名前付き関数に適応されるが、匿名関数には適応されません。

・名前付き関数はfunctionの後に関数名をつけたものです。

　　ファイルの上の方で定義されるたことになります。

・匿名関数（無名関数）はfunctionの後に()しかありません。

　　ファイルの下の方にあっても先に定義されたことにはならず、

　　先に定義しておかないと呼び出せません。

　　ちなみに、匿名関数はよく使うことが多いです。

・無名関数は下記のような形ですが();の意味は？

(function{})();

();名無しの関数を定義してその場でその関数をよんでいるという意味です！！

変数に関して

グローバル変数とローカル変数があります。

・functionの外側で定義された変数はグローバル変数になります。

　　ファイルを超えて変数が定義されるので注意が必要です。

・functionの内側で定義された変数(var宣言あり)がローカル変数になります。

functionの中では新しい変数定義になるので、

 新しく作成したvarがファンクションの中で囲まれている場合、functionの外では呼べません。

スコープが気になる方はこちらを参照してください。

　→　JavaScriptの変数のスコープについて学ぶ

*グローバル変数の設定は

    window.property = "ぐろーばる！";

　のように行っても設定可能です。

JavaScriptの型について

Rubyだとたくさんクラスが有りますが、

JavaScriptは下記5つのプリミティブの型とその他のオブジェクトに分かれます。

undefined
null
true / false (boolean)
1,2,3 (number)
“abc” (string)

その他のオブジェクト（Function, Array, Dateなどはちょっと特別）

ちなみに、型判定はこちらの記事が参考になりそうです。

→　JavaScriptの「型」の判定について

社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。