HTML入門トレーニング

script要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
script要素を使って、HTMLの中でJavaScriptを記述する方法について学びます。
講師:
08:03

字幕

このレッスンでは スクリプト要素を使って HTMLの中に Javaスクリプトを記述する方法について 学びます 画面では 左側に サンプルファイルの HTMLを開いたコードエディター 右側には 同じHTMLをChromeで開いています コードエディタの中のHTMLを見ると 非常にシンプルなHTMLになっています bodyの中身には何もありません このHTMLに対して スクリプト要素を使って Javaスクリプトを書いてみましょう まずbodyタブの中に スクリプトタグを記述します 通常通り「script」というタグを記述します スクリプトタグは 開始タグと終了タグで構成され この 開始タグと終了タグの間には 通常のHTMLの構文ではなく Javaスクリプトの構文で Javaスクリプトを記述します 逆に このスクリプト要素の中には HTMLを書いたり cssを書いたりすることはできませんので 注意してください ちょうど スタイル要素の中に cssしか記述できないのと似ている といえます また HTML 5 以前では このようにスクリプト要素を使って Javaスクリプトを記述するとき タイプ属性という属性を使って このスクリプトは何のスクリプトであるか という事を 指定していました その時の値は text/javascript という値です そのため HTML5 以前の htmlに含まれているJavaスクリプトを見ると このような記述になっていることがあります しかし HTML5 では タイプ属性のデフォルトの値が text/javascript つまり タイプを指定しなくても この スクリプトの要素の中身は Javaスクリプトである という仕様になりましたので このタイプ属性は省略する事が出来ます さて実際に このスクリプト要素の中に Javaスクリプトを書いていきましょう ここでは ブラウザーのコンソールという機能を使って コンソールに対して 文字を出力してみます コンソールへの出力機能を使うには console c o n s o l e と入力し その後に.(ドット) そしてログ l o g と入力します これがコンソールに文字列などを 出力するための機能です そしてこのlogの後に ここでは文字列を出力したいため 文字列はさらに ダブルクォーテーション " " で 囲みます ここでは hi! という文字を 出力してみましょう Javaスクリプトの文法では このように 1つの命令文を書いた後は セミコロン;で 終了します ここまでで シンプルな hi! という文字を出力する Javaスクリプトが書けました いったん保存して ブラウザーで表示してみます しかし実際には このボディー要素の中に書かれたスクリプトは 何か表示されるわけではありません ここで書いているのは コンソールという機能に対して 文字列を出力する というJavaスクリプトです そのため これを確認する為には ブラウザーのコンソール機能を使います クロームをお使いの場合は 右上のメニューボタンから その他のツール そしてデベロッパーツールの下にある Javaスクリプトコンソールを選びます 尚インターネットエクスプローラーをお使いの場合は 開発者ツールにコンソールが ファイヤーフォックスをお使いの場合は デベロッパーツールにコンソールが 同じく用意されています ここでJavaスクリプトコンソールを選んで コンソールを開きます もう一度再読み込みしましょう すると先ほどは何も表示されていなかった所に Hi! という文字列が表示されました またこの文字列の右横には index.htm:11 とあります これは この hi! という文字列が index.htmの11行目 つまり この行から 出力されている という事を示しています 続けていきましょう 現在Javaスクリプトは ボディー要素の中に記述しています このスクリプト要素は ボディー要素以外にも ヘッド要素に記述することも出来ます 例えばここでは hi2! と書いて保存し ブラウザーをリロードすると きちんと hi2! が出力されています。 Javaスクリプトを記述する場所によって その実行順や HTMLのレンダリングなどに 影響がありますが ここでは スクリプトを ボディー要素の中に書いていきます 続いて 文字列以外の物を出力してみましょう 例えば ここでは数字を出力してみます 同じように console.log と書いて かっこ( )の中に数字 ここでは 1 を入力します 先ほどは文字列を出力していたため 左右にダブルクォーテーション " " をつけて 文字列を囲っていましたが 数値を出力する場合は ダブルクォーテーション " " は不要です 保存しブラウザーをリロードすると hi! という文字列の後に 1 が出力されています また出力元の行数も このように11行目と12行目というふうに わかれています Javaスクリプトはスクリプト言語ですので このスクリプト上で 計算を行うことも出来ます 同じようにConsole.logで 数値を出力する時 足し算 プラス+記号を数字の間に入れて 1+2 という計算をしてみましょう 保存してリロードすると その計算結果である 3 が出力されています このようにJavaスクリプトでは 決められた数字以外に 計算した結果を 出力することが出来ます またここでは数字と数字を足していますが 文字列と数字を足すことも出来ます 同じようにConsole.logを使って hi!という文字列と数字を プラス+で連結してみます ここではこのプラス+記号の前後に スペースが入っていますが これは見やすくする為という理由だけで 特にこのスペースが出力されるわけではありません 逆にこのダブルクォーテーション " " の 内側に入っているスペースは 1つの文字列として認識されるため hi!という文字と半角スペースは 一緒に出力されます 保存してブラウザーでリロードすると hi!スペース100 という文字列が出力されました このようにJavaスクリプトでは 文字を扱ったり 数字を扱ったり そして数値を計算したり 文字と数値を合わせて計算したり といったことが可能になります このレッスンではスクリプト要素を使って HTMLの中に Javaスクリプトを記述する方法について 学びました

HTML入門トレーニング

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

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

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

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

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