【簡単】Java Scriptの書き方を端的に理解しやすく説明します

Programming

今回は、「Java Scriptの基礎①」プログラムの基本的な書き方と読み込み方を紹介します。Java Scriptを勉強しようと思ってる方は、まずはここから覚えていきましょう。

初心者さんに向けて書いているつもりなので、なるべく端的に理解しやすく書いています。そのため現状は、覚えなくて良い部分などは省略させていただきます。

難易度(MAX10)★☆☆☆☆☆☆☆☆☆

Java Scriptの読み込み方

Java Scriptの読み込み方は、htmlファイルの<head>〜</head>の間に下記の様に記述するだけです。

<script src="test.js" defer></script>

※test.jsの部分は自身のjsファイル名に書き換え。

もしくは、下記の様にhtmlファイル内に<script></script>のタグを作成して、その中に直接Java Scriptを書き込む事も出来ます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <script>
 <!--ここにJava Scriptを書いていく-->
   </script>

    <title>JSテスト</title>
    <link rel="icon" href="">
    <meta name="description" content="">
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>
      <header class="header">ヘッダー</header>
      <nav class="left">左サイドバー</nav>
      <main class="main">メインコンテンツ</main>
      <aside class="right">右サイドバー</aside>
      <footer class="footer">フッター</footer>
    </div>
  </body>
</html>

また、JavaScriptライブラリなどの外部サービスで公開されているJava Scriptも読み込む事が出来ます。
(下記の記述はhttps://jquery.com/から読み込んでいるjqueryというものを読み込んでいます。)

<script src="https://code.jquery.com/jquery.min.js"></script>

Java Scriptの書き方

Java Scriptの基本的な書き方は、無いのかなと思います。というのも様々な構文が存在するのでCSSの様に「.セレクター { プロパティ:値 }」の様な基本の形がありせん。

あえて言うならば下記の様なシンプルな構文が基本形です。

const myname = 'KT LIFE';

またCSSでは値に「" “」を付けていましたが、CSSとの被りを避けるためにJava Scriptには「 ‘ ’」で区切る方が良いでしょう。また文末には「;」を付けて終わらせます。

Java Scriptの基本的な見方

次にJava Scriptの基礎的な見方を紹介します。

Java Scriptは、先程の「const myname = 'KT LIFE’;」の記述だけだと何も起きません。
この記述は「myname」と言う名前は「KT LIFE」ですよ。と言った新しいルールを作ってるだけです。
このルールを使ってプログラムを作成していって初めて意味を持ちます。

例えば、下記の記述の場合はconsole.logに「myname」を表示させて下さい。とのプログラムです。

const myname = 'KT LIFE';
console.log(myname);

その結果「myname」は「KT LIFE」なので「KT LIFE」が表示されます。
なので「KT LIFE」の部分をX+Yにした場合、XとYに数字を割り当てれば「myname」の表示が変わってきます。


以上が「【簡単】Java Scriptの書き方を端的に理解しやすく説明します」でした。

今回はここまでにしておきます。次回は定数を作って実際に「console.log」で表示されるまでを説明していきます。

2020年6月1日ProgrammingJava Script,WEB

Posted by KT