プログラム

【プログラミング】JavaScript入門！①【初心者】

葉月りん

★そもそも「JavaScript」って何？★

ブラウザで実行できるプログラムを作成する言語で、必要なタイミングで文字を強調したり、色を変更したり、画像が切り替わったりといったような「動的なページ」にすることができます。

★記述方法は２通りあるよ！★

HTMLファイルに直接書き込む場合と、外部ファイルに保存してHTMLに読み込ませる場合の二種類があります。まずはHTMLファイルに直接書き込む場合の記述方法を紹介します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Javascriptの学習</title>
</head>
<body>

<script>
window.alert("hello.world");
</script>

</body>
</html>

<head>タグ内・<body>タグ内どちらでも記述できますが、<body>タグ終了直前に記述するのが一般的です。

では、もう一つの方法を紹介します。外部ソースからスクリプトを読み込ませます。こちらも通常はBodyタグ終了前に記述します。

<script src = "js/hello.js"></script>

外部ファイルである「js/hello.js」をHTMLファイルに読み込ませることで動的なページを作ることができます。プログラムの書き方はこれから覚えていきましょう。

★ファイルの管理をきちんとしよう★

Web制作では、HTML/CSS/JavaSciptといったプログラム以外にも、画像（IllustratorやPhotoShopの作品）を扱います。
なので、きちんと整理しておかないと、どこにしまってあるのかわからなくなってしまい、場合によってはコードも複雑になってしまいます。

わかりやすいのは、デスクトップに「Web制作」というフォルダを作成し、その中に、「HTML」フォルダ・「CSS」フォルダ・「JS」フォルダ・「画像」フォルダを作成し、その中に各ファイルを保存しておきましょう。

さらに「JS」フォルダを「HTML」フォルダの中に入れておくと、コードを書くときも上のように楽です。HTMLファイルから見て、jsファイルがどこにあるのか記述するためです。

「js/hello.js」は、JSフォルダの中にあるhello.jsファイルという意味です。HTMLフォルダの中に、「index.html」と「JSフォルダ」があり、「index.html」に（JSフォルダの中にある）「hello.js」ファイルを読み込ませたい場合は、「js/hello.js」と記述すれば反映されます。

ファイルを保存している位置によって、プログラム上での書き方が異なります。ですので、Web制作用のフォルダを準備してはじめるのが良いでしょう。

★まとめ★

・JavaScriptは、動的なページを制作することができる。
・記述方法は２種類。外部ファイルに記述することが多い。
・HTMLファイルとJSファイルの位置関係によってプログラムの書き方が
　変わるので、整理整頓し、わかりやすい場所に保存しておくと記述も
　楽である。

ここまで大雑把にJavaScript入門として説明しました。
プログラムを書き始める前に、導入編として参考程度に見ておいてください。

最後までお読みくださり、ありがとうございます。
また、次の記事で、お会いしましょう！！！

いいなと思ったら応援しよう！