JavaScriptプログラミング入門講座

変数とその使い方

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数とは、様々な内容のデータを、一時的に保管して置くための箱のようなものです。ここでは、その変数の作り方と、利用方法について解説致します。
講師:
08:34

字幕

このレッスンでは JavaScript の プログラミングの中で使う 変数について解説していきます それではレッスンを始めていきましょう まずは ダウンロードしてきた ファイルの中にある variable. html そして variable.js を エディタで開いておいて下さい この variable.html は外部ファイル化したJavaScript― variable.js を読み込んだ形になっており この variable.js の中身はまだ何も書いていません これらのファイルを使いながら JavaScript の変数について 解説していきたいと思います それではまず変数とは何かについて お話をしたいと思います 変数とは他のプログラミング言語でも 出てくる言葉ですが プログラミングの中で利用するデータを 入れておくための箱という意味になります 変数には様々なデータを格納することができます 例えば数値型や文字列型 配列型などの データを入れることができます 1つの変数の箱に対して 1つのデータを格納することができますので 例えば1つの変数の箱に数値のデータ 1つの変数の中に文字列のデータ という形で代入していきます 変数に入れたデータは 後から取り出すこともできますし 更に既にデータが入っている変数の中身を 別のデータに差し替えることも可能です それでは実際に 変数の作り方について 見ていきたいと思います 画面をエディタに戻します エディタの画面に戻りましたら variable.js の方を開いて下さい こちらのファイルに実際に変数を 作っていきたいと思います 変数を作ることを「変数を宣言する」といいます では実際に変数を宣言してみましょう まず最初に var と書きます そして半角スペース そして ここから変数の名前を書きます ここでは例えば box としましょう そして;(セミコロン)を打ちます 以上で変数の宣言は完了です とても簡単ですね さて先程変数の名前を書きましたが この変数の名前― 比較的自由に付けることができるのですが 少しだけルールがあります 例えば 変数名には アルファベット 数字 _ (アンダーバー) $(ドルマーク) といった文字を利用することができます 但し変数の名前の一文字目 この部分には 数字を使うことはできません また例えば複数の変数を宣言したとして 例えばこのように上の変数は小文字の box 下の変数は一文字目が 大文字の Box があったとします この場合この box と大文字の Box 全く別物の変数となりますので注意して下さい 要するに アルファベットの大文字 小文字は― 厳密に別物として 扱われるという形になります また変数の名前には JavaScript の 予約語を利用することができません 予約語とは要するに JavaScript で 既に別の用途で利用している 英単語のことを指しますが それらを変数の名前に 利用することはできません これらの点については あらかじめ注意をしておきましょう それではこの変数の使い方について 見て行きたいと思います まずは変数に値を格納する方法を見ていきます 変数に値を格納することを「代入する」といいます それではやってみます まず既に宣言済みの 変数 box に値を入れますので box とまず書いて半角スペース そして= そして再度半角スペース そしてここに代入したいデータを入れます ここでは試しに数値を入れてみましょう 例えば 100 ですね 100 と書いたら;を打ちます これで変数へのデータの代入が完了しました では実際にこの box という変数に 値が入っているかどうか確認してみましょう この box = 100 と書かれている下に window.alert ( ); と書きまして この()の中の引数に変数 box と書きます この状態でファイルを保存します それでは variable.html を ブラウザで見てみましょう variable.html をブラウザで開きます すると このようにアラートが表示されて 100 というのが入っていますね これは引数に与えた変数 box の中に格納されている 100 というデータがこちらに表示されている 形となります OK を押して閉じます これで変数 box の中に 100という数値が入っているのがわかりましたね それでは 再度エディタに戻ります 次に変数に全く違う 別のデータを入れてみましょう ここに同じように box と書いて 先程は 100 という数値を入れましたが ここに文字列のデータを 入れてみたいと思います ダブルクォーテーションを2つ書いて その間に例えば“テスト”と書きます そして;を書きます この状態で先程のアラートを書いてみましょう window.alert ( ); そして引数に同じように変数 box を入れます この状態で保存します それでは同様に variable.html を ブラウザで確認してみましょう このファイルをブラウザで開くと まずは先程と同様に 100 というのがアラートに表示されます OK を押しますと 更に次のアラートが出てきて ここにはテストと書かれているのがわかりますね このように一度宣言した変数には値を 後から変更することも 可能であることがわかりました それではエディタに戻ります ちなみに変数の宣言―この部分 今この部分では変数は空っぽの状態で 宣言されていますが 宣言と同時に値を代入していくことも可能です その場合にはこの var box の 次に半角スペース = 半角スペース そして最初に入れておきたいデータを書いておきます 例えば 50 としておきましょう こうすることで変数の宣言と同時に その変数に値を持たせておくことが可能です 以上で今回のレッスンは終了です 今回は JavaScript の変数について解説致しました 変数は JavaScript のプログラミングの中で 必ず利用していくものとなりますので しっかりと理解しておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。