
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
JavaScript
2017.09.07
今回は、JavaScriptを使って、実際にプログラムを呼び出してみます。
マウスがクリックされた時に使用するイベントハンドラ「onClick」を使って、HTML文書に直接JavaScriptを記述します。
まず、ボタンの onClick 属性の値に、直接プログラムを記述する方法で、入力文字を出力するプログラムを作ってみます。
HTMLのフォーム部品で、入力欄とボタンを作成します(詳しくはHTML 【フォーム】5 ~ input要素(10)ボタンをご参照下さい)。
そして、このサンプルでは、ボタンの onClick 属性の値に、直接プログラムを記述してみます。
下の入力欄に文字を入力して出力ボタンを押して下さい。 |
実際に、入力欄に文字を入力して出力ボタンを押してみて下さい。
入力されたテキストがアラート表示されます。
ソースは次の通りです。
<FORM name="sample1"> <INPUT type="text" name="data"><INPUT type="button" value="出力" onClick="var str = document.sample1.data.value; alert(str + 'が入力されました!')"> </FORM>
onClick 属性の値として、2つの命令が設定されています。
(命令は1つずつセミコロン「;」で区切って記述します。最後は省略可能です。)
var str = document.sample1.data.value;
この命令は、「変数strに、”sample1″という名前のフォームの中にある”data”という名前の部品の値を代入する」という意味です。
この命令によって、入力欄に入力されたテキストが、変数strの値となります。
alert(str + 'が入力されました!')
この命令は、「変数strの値に “が入力されました!” というテキストを加えてアラート表示させる」という意味です。
少し変わった書き方ですが、このような形でプログラムを呼び出すこともできます。
JavaScriptを呼び出すタグの属性値にそのまま命令を書くので手軽ですが、この記述方法は、複雑なプログラムを組む場合には不向きです。
今度は、SCRIPTタグを使ってJavaScriptを定義する方法で、計算結果を表示するプログラムを作ってみます。
下の入力欄に数字を入力して計算ボタンを押して下さい。 |
実際に、入力欄に数字を入力して計算ボタンを押してみて下さい。
入力された2つの数字の和が表示されます。
ソースは次の通りです。
<SCRIPT type="text/javascript"> <!-- function culculate() { with(document.sample2) { var d1 = data1.value; var d2 = data2.value; data3.value=eval(d1)+eval(d2); } } //--> </SCRIPT> <FORM name="sample2"> <INPUT type="text" name="data1"> + <INPUT type="text" name="data2"> = <INPUT type="text" name="data3"> <INPUT type="button" value="計算"onClick="culculate()"> </FORM>
計算ボタンをクリックすると、culculate()という関数が呼び出されます。
culculate()の内容は、SCRIPTタグの中に定義されています。
SCRIPTタグの使用方法は次の通りです。
●SCRIPTタグは必ず終了タグ</SCRIPT>を必要とします。
これを付け忘れると、プログラムが正常に動作せず、ページの表示にも影響を及ぼします。●SCRIPTタグを入れる位置は、HTMLのヘッダ内(<HEAD>?</HEAD>の間)に入れることが多いですが、<BODY>?</BODY>内に入れることもできます。
(入れる位置と処理内容によっては、エラーとなる場合もあります。)●1つの HTML内に、SCRIPTタグをいくつでも使用できます(それぞれに終了タグ</SCRIPT>が必要)。
●SCRIPTタグは、特に言語を指定しない場合、デフォルトでJavaScriptとなりますが、通常は属性で言語を指定します。
言語の指定の仕方は、type属性を使って、type=”text/javascript” と記述することが推奨されています(以前は、 language=”JavaScript”のようにlanguage属性が使われていました)。●<SCRIPT>?</SCRIPT>間に直接プログラムを書き込むことが出来ますが、コメントタグ <!– ? //–>でプログラムを囲むことが推奨されています。
これは JavaScript に対応していないブラウザが、スクリプトデータそのものを表示してしまうのを防ぐためです。●<SCRIPT>?</SCRIPT>間に入れるスクリプトには、半角英数字と記号のみを使用します。
但し ” ” または ‘ ‘ で囲んだリテラル(文字列データ)には、全角文字も使用できます。
インデントには半角スペースまたはタブを使用します(全角スペースは不可)。●スクリプト本文内で使用できるコメントには1行コメントと範囲コメントがあります。
1行コメントは、コメントにしたい文の頭に // を付けます(// から行末までがコメントとなります)。
範囲コメントは、コメントにしたい文を /* ? */ で囲みます。 コメント文には日本語全角文字など、どんな文字でも使用可能です。
スクリプト本文には、プログラムに必要な変数を宣言したり、関数を定義したりします。
ですが、そのどちらもしない用法もあります。
</SCRIPT type="text/javascript"> <!-- document.write("ご使用中のブラウザは JavaScript が使用可能です。"); //--> </SCRIPT>
document.writeは、文書中にテキストを書き込むメソッド(関数)で、JavaScriptをサポートしているブラウザなら文章が指定位置に書き込まれます。
ページが読み込まれると、ブラウザは他の文章と混在する形でこのテキストを表示します。
特にイベントを特定していないのに実行される暗黙のイベントの1例です。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.