【基本を抑える_01】JSの基本
javaScriptは、一般的に外部ファイルとして、HTMLで読み込んで使用します。
変数、配列などを使いながら、必要な処理をjavaScriptのファイル内に記載します。
基本の構成
javaScriptは、一般的に外部ファイルとして、HTMLで読み込んで使用します。
変数、配列などを使いながら、必要な処理をjavaScriptのファイル内に記載します。
javaScriptのファイルには、直接、変数や配列などを使って、プログラムを描き始めます。
以下のように、処理を直接、javaScriptのファイルには、書いていきましょう。
let text = 'Hello World !!';
alert(text);コメントの追加
javaScriptファイルへのコメントの追加方法はシンプル。
１行だけでなく、複数行でも書くことができます。
// １行のコメント
let text = 'Hello World !!';
/*
ここには
複数行
コメントできます
*/
alert(text);１行だけのコメントは、以下のように書きます。
// １行のコメント
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のシンプルな表示の確認に関しては、
以下の２パターンを使えるようにしましょう。
パターン１：アラートの表示
確認したい値を、画面上のモーダル（画面の上に出てくる小さな画面）で
表示したい場合に、「alert」を使用します。
// 「alert」を使って表示
alert('alertの表示確認です。');パターン２：コンソールログの表示
確認したい値を画面表示はいらないけれど、どこかに表示したい場合は、
「console.log」を使って検証ツールに表示させてみましょう。
// 「console.log」を使って表示
console.log('console log の表示確認です');「console.log」を確認するためには、chromeの「検証ツール」で確認します。
右クリックをして、「検証」をクリック。
クリックすると以下のような画面が出てきます。
この画面内の「Console」をクリックしましょう。
このように「console.log」で設定した内容が確認できます。
プロンプトでの値取得
javaScriptの学習の際に、まず、値を取得して何かを行うことが多いです。
値を取得しての判定処理など、学習の中で使う機会は多いので理解しましょう。
javaScriptには、「プロンプト」といって、画面上に、
もう１つ画面を表示して値を取得することができます。
// 「prompt」を使って値を取得
let sample = prompt('値を入力してください。');
// 取得した値を「alert」を使って表示
alert(sample);参考サイト
この記事の内容は、
「初心者のためのWeb入門」
のサイトに記載があるので、
そちらを参考にしてください。
初心者向けピックアップ
