はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はＰＨＰを勉強しています。ＷＥＢサイト制作(WordPress対応)をとりあえずの目標としております！！それとゲーム実況もやっております！見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

はとむぎのカテゴリー

H&Rブログ > JavaScript > JavaScriptをはじめよう｜1から始めるJavaScript

JavaScriptをはじめよう｜1から始めるJavaScript

JavaScript

2020/3/7 2020/8/13

こんにちはRyokutyaです。

※この記事はある程度 HTML,CSSを勉強して多少理解できる人で、JavaScriptを今から勉強していこうと考えている人向けの記事です。
HTML,CSSの説明や検証画面の説明が基本的にないのでご了承ください。

JavaScriptの記述

まずJavaScriptの説明をはじめる前にどこにcode(コード)を書けばいいのか説明していきましょう。
JavaScriptを記述する方法は2つあります。

直接HTMLドキュメント内に書き込む

JavaScriptはHTMLのドキュメント内の<head>～</head>,<body>～</body>の中ならどこにでも記述することができます。


  <head>
    <script>
      console.log('Hello World') ;
    </script>
  </head>
  <body>
    <script>
      console.log('Hello World') ;
    </script>
  </body>

<script>～</script>で囲んだ中にJavaScriptを記述すればOKです。

JavaScriptファイルを読み込む

JavaScriptはcssと同じように別のファイルに記述しておいて読み込むこともできます。
<script>でsrc属性を指定し、JavaScriptファイルが保存されている場所を指定してすることで、 <script src=”./〇〇/××.js”></script>のようにしてファイルを読み込むことができます。


<head>
  <scrip src=".〇〇/××.js"><script>
</head>
<body>
  <scrip src=".〇〇/××.js"><script>
</body>

複雑なJavaScriptを組むととても長いcodeになり、HTMLに直接書き込むと非常に煩雑になり可読性が落ちるミスの原因となるため、別ファイルに記述したものを読み込むのが一般的です。

JavaScriptを読み込む順番

JavaScriptはHTMLに直接記述しているか、外部から読み込むかに関わらず記述した順番（先に書かれている<script></script>から）で実行されていきます。


<body>
  <script>
    console.log('Hello World') ;　←実行される順番①
　</script>
  <scrip src=".〇〇/××.js"><script>  ←実行される順番②
  <script>　
    console.log('Hello Ryokutya') ;　←実行される順番③
  </script>
</body>

基本ルールと名称

JavaScriptの基本的なルールとして、
〇〇は（△△を）××しなさい。
という書き方をします。

「〇〇は」にあたる部分をオブジェクト（命令先）
「××しなさい」に当たる部分をメソッド（命令内容）
「△△を」にあたる部分をパラメータ（命令内容の詳細）
といいます。

例としてconsole.log(‘Hello World’);について見ていきましょう。
〇〇は（△△を）××しなさい。でいうところの、
「〇〇は」はconsole,「××しなさい」は.log,「（△△を）」は‘Hello World’,「。」は;にあたります。
つまり、 console.log(‘Hello World’); は
consoleはHello Worldを表示しなさい（.logが表示しなさいという命令）という意味になります。
console.log(‘Hello World’); を入力すると、ブラウザの検証画面のconsole画面にHello Worldが表示されます。


<body>

  <script>
    console.log('Hello World') ;
　</script>
 
</body>

オブジェクト

オブジェクトは命令先のことでconsoleもオブジェクトの1つです。
ブラウザ画面の中には様々なオブジェクトがあります。

メソッド

メソッドは命令内容のことです。
メソッドはオブジェクトに対して「××しなさい」と具体的な実行内容を指示する部分です。
各オブジェクトには、使用できるメソッドがあらかじめ用意されています。
「〇〇オブジェクトに使えるメッソド」などでググれば使用できるメソッドが出てくるのでぜひ一度調べてみてください。
メソッドの後ろには.log(),.dir(),.error()などのように()が付きます。

パラメータ

メソッドの後ろにある()の部分に入るものをパラメータといいます。
今回の例で言えば’Hello World’の部分です。
メソッドはより細かく指示を出すものです。
console.log();だけだと、consoleは出力しなさい。という意味になるのですが、「何を」出力すればいいの？っとなってしまい何も表示してくれません。
そんなときはconsole.log(‘Hello World’);とすることで、
consoleは「Hello World」を表示しなさい。という風により細かい指示をだしてあげるこで命令を実行してくれます。

シングルクォーテーションの意味

JavaScriptは「’」シングルクォーテーション（shift + 「7」キー）で前後を囲まれた文字を「文字列」として扱う決まりがあります。
シングルクォーテーションで囲まれていない場合は「文字列以外」であることをしめしており、中に入っているものをJavaScriptが適切な形にしてくれます。
では例を見てみましょう。


<script>
  console.log('Hello World');    例①
  console.log(10+5);    　例②
  console.log('10+5');    例③
<script>

例①の結果はHello Worldとなります。
例②の結果はどうなるでしょうか？

答えは15と表示されます。
JavaScriptが計算式が入っていると判断し10+5の計算結果である15を表示してくれます。

では例③はどうなるでしょうか？
答えは10+5と表示されます。
例③は(’10+5′)のように「’」で10+5の前後を囲っているためJavaScriptが「計算式」ではなく「文字列」と判断し（）なに記述された文字をそのまま表示します。


<script>
  console.log('Hello World');    結果：Hello World
  console.log(10+5);    　結果：15
  console.log('10+5');    結果：10+5
<script>

セミコロンの意味

セミコロン（；）は文の終わりを表します。
日本語の「。」や英語の「.」と同じです。文の終わりには必ず必要なので忘れないようにしましょう。

おわりに

JavaScriptを学んでいくうえで「オブジェクト」や「メッソド」などの名前がよくでてくるのでどれが何を指してるのかわかるとcodeや説明がわかりやすいと思いますのでしっかり覚えておきたいですね。
今回はここまで、それではまた次回お会いしましょう。(^^)/

コメントを残すコメントをキャンセル

追従するサイドバーを完成させる！

スライドサイズを設定しよう！

サイドバーを追従させよう！

シンプルな「自動で画像が動くスライド」（完成！）

追従させるためのデータを取得しよう！

条件分岐｜1から始めるJavaScript#6

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

JavaScript
(29)
jQuery
(1)