今回は、「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」で表示されるまでを説明していきます。
