プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

【基本を抑える_01】JSの基本

javaScriptは、一般的に外部ファイルとして、HTMLで読み込んで使用します。

変数、配列などを使いながら、必要な処理をjavaScriptのファイル内に記載します。

基本の構成

javaScriptは、一般的に外部ファイルとして、HTMLで読み込んで使用します。

変数、配列などを使いながら、必要な処理をjavaScriptのファイル内に記載します。

javaScriptのファイルには、直接、変数や配列などを使って、プログラムを描き始めます。

以下のように、処理を直接、javaScriptのファイルには、書いていきましょう。

let text = 'Hello World !!';

alert(text);

コメントの追加

javaScriptファイルへのコメントの追加方法はシンプル。

1行だけでなく、複数行でも書くことができます。

// 1行のコメント
let text = 'Hello World !!';

/*
ここには
複数行
コメントできます
*/
alert(text);

1行だけのコメントは、以下のように書きます。

// 1行のコメント
let text = 'Hello World !!';

複数行のコメントは、「/*」と「*/」の間をコメントにできます。

/*
ここには
複数行
コメントできます
*/
alert(text);

javaScriptの記載場所

javaScriptファイルは、「sample.js」のように、「〜.js」というファイル名で用意します。

例えば、javaScriptファイルには、このようなプログラムを記載して

let text = 'Hello World !!';;

alert(text);

このファイルの名前を、

sample.js

という名前で保存します。

javaScriptのファイルを用意したら、HTMLファイルに、

作成したファイルを呼び出すための記載を追加しましょう。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
  </body>
</html>

上記の内容は、「index.html」として保存してください。

javaScriptを呼び出している箇所は、

先程のコードの中の、HTMLのheadタグの中にある、この部分です。

<head>
  <!-- headタグの間に追加します。 -->
  <script type="text/javascript" src="sample.js"></script>
</head>

ちなみに、フォルダ内のファイルの配置は、このように配置します。

これで、javaScriptのファイルを読み込む設定は完了です。

ブラウザで、「index.html」を表示した時に、

このように、「Hello World!!」と表示されます。

javaScriptの表示確認

javaScriptのシンプルな表示の確認に関しては、

以下の2パターンを使えるようにしましょう。

パターン1:アラートの表示

確認したい値を、画面上のモーダル(画面の上に出てくる小さな画面)で

表示したい場合に、「alert」を使用します。

// 「alert」を使って表示
alert('alertの表示確認です。');

パターン2:コンソールログの表示

確認したい値を画面表示はいらないけれど、どこかに表示したい場合は、

「console.log」を使って検証ツールに表示させてみましょう。

// 「console.log」を使って表示
console.log('console log の表示確認です');

「console.log」を確認するためには、chromeの「検証ツール」で確認します。

右クリックをして、「検証」をクリック。

クリックすると以下のような画面が出てきます。

この画面内の「Console」をクリックしましょう。

このように「console.log」で設定した内容が確認できます。

プロンプトでの値取得

javaScriptの学習の際に、まず、値を取得して何かを行うことが多いです。

値を取得しての判定処理など、学習の中で使う機会は多いので理解しましょう。

javaScriptには、「プロンプト」といって、画面上に、

もう1つ画面を表示して値を取得することができます。

// 「prompt」を使って値を取得
let sample = prompt('値を入力してください。');
// 取得した値を「alert」を使って表示
alert(sample);

参考サイト

この記事の内容は、

「初心者のためのWeb入門」

のサイトに記載があるので、

そちらを参考にしてください。

初心者向けピックアップ

初心者にオススメ