HTML入門トレーニング

変数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptの変数を使って、値を格納したり、使ったりする方法について学びます。
講師:
09:18

字幕

このレッスンでは、 JavaScript の変数を使って 値を格納したり、使ったりする 方法について学びます 画面では、左側にコードエディタで サンプルファイルの HTMLを開いているところです また、右側には同じHTMLを ブラウザで表示しています HTMLの中身を見ていきましょう HTMLのボディタグの中身は 空のスクリプトタグだけがあります ここに変数を使った JavaScriptを書いていきましょう 変数とは、値を格納したり 使ったりするためのものです 変数を宣言するためには と入力して その後に、変数の名前を入力します varとは、バリアブル 変数の略です ここでは、メッセージ という変数を作りますので と入力しましょう 変数に値を入力するには その後に、イコールを入力し 値を代入します ここでは、hi、from、スペース という文字列を代入します このように、変数を宣言するには まず、バリアブル varと書いて その後に、半角スペースをあけて 変数の名前を入力します 代入したい値があれば その値を代入するための イコールを入力します この変数の名前と イコールの間のスペースや イコールと値の間のスペースは あってもなくても構いません ここでは、見やすくするために スペースを入れておきます そして、文字列を代入するときには JavaScriptではこのように ダブルクォーテーションで値をかこみます この時、ダブルクォーテーションではなく シングルクォーテーションでも構いません そして、JavaScriptの最後には セミコロンを入力するのです このようにすると、という文字列が この、という名前の変数に一旦 格納された状態になります 一度格納した変数は 後から取り出して 使うことができます 次の行で、コンソールログを使って この変数に入っている文字列を 出力してみましょう コンソールログの中に と入力しました 保存して、ブラウザに切り替え メニューからその他のツール JavaScriptコンソールを開きます 現在ここでは、クロームを使っていますが インターネット エクスプローラや ファイヤーフォックスにも同じように JavaScriptコンソールが 用意されています コンソールを開きました HTMLを再読み込みすると という文字列が出力されています ここで出力しているのは という変数でしたが この一行前で という変数には という文字列が代入 格納されていましたので ブラウザ側で出力されているのは このように、という文字列になっています 変数は他の値と 計算処理することもできます 例えば(タイプする音)このように を出力する際 別の文字列とプラス記号で 結合してみます 保存してリロードすると もともと変数に格納されていた という文字列と 後で入力した という文字列が結合され 一度に出力されました 変数のしくみを使うと このように(タイプする音) 一度格納した値を 何度でもそして違う形で 利用することができます 保存してブラウザリロードすると 何もない、hi, from だけのメッセージ tokyo と結合したメッセージ paris という文字列と 結合したメッセージ それぞれ出力されています このように変数を使うことで 同じ値を様々な形で 使うことができます 変数には文字列だけではなく 数値や true or false のような真偽値など 様々な値を入力することができます ここでは、配列という値を試してみましょう 新しく変数を作ります 変数はいくでも宣言できます ここでは、という名前の 新しい変数を作ります 配列を入力するには角括弧 ブラケットを入力します そしてこのブラケット中に 配列に入れたい値を 入力していきます まず文字列で、 と入力してみましょう この配列の中でも 文字列を入力する場合は 通常の文字列と同じように ダブルクォーテーションあるいは シングルクォーテーションで値をくくります ここで面白いのは 配列はこの自分の中に 複数の値を持つことができるということです 複数の値を入力するときは カンマで値を区切ります 次に、という値を 入力してみましょう このカンマの後に 現在スペースを入力していますが このスーペースは あってもなくても構いません ここでは見やすいように スペースを入れておきます こうすることで、この という一つの変数には という値と、いう値を中に持った 一つの配列が代入されています さらに、配列の中に 値を増やしていきましょう ここでは、他に そして、といった 世界各地の 都市の名前を入力します 最後にセミコロンを入れることを 忘れないでください このように city という変数の中には の4つの都市の名前が代入されました これを実際に使うには このように記述します 同じようにコンソールログで 出力してみましょう と変数の名前を出力すると どうなるでしょうか 保存して、ブラウザをリロードすると このように配列全体が 出力されていることがわかります コンソール上でも、この角括弧 ブラケットが表示されると この値は配列である ということを示しています では、この配列の中から 一つだけ値をとりたい場合は どうすれば良いでしょうか その場合は(タイプの音) 配列の名前の後に ブラケットで番号を指定します この時に、指定する番号は この配列に入っている 値の順番と対応しています 例えば、一番初めに入っているこの という値が欲しい場合は 0を指定します この番号は1から始まるのではなく 0から始まる点に注意してください また、ブラケットで数字を囲むとき ダブルクォーテーションは不要です これで保存し、ブラウザをリロードすると という文字列だけが出力されました 同じように(タイプする音) この数字の部分を 3に変更すると ブラウザで確認するとこのように 4 つ目の値、が出力されました 配列は一番頭が0ですので 0、1、2、3 番目に入っている Graz です また、この配列の値も同じように 他の変数と組み合わせて 使うことができます このように、プラス記号で 二つの変数を繋げて出力すると このように、と二つの変数が 結合された状態で出力できます このレッスンでは JavaSciptの変数を使って 値を格納したり 使ったりする方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

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

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

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

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