Download presentation
Presentation is loading. Please wait.
1
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
情報スキル活用 第１４週 例題のプログラムを通して JavaScriptの仕組みを理解することとします。
2
前回講義の復習 JavaScript とは、Netscape Communications 社が開発したWebページのためのプログラミング言語です。 JavaScript を始めるのに特別なソフトは必要ありません。 通常の HTML ファイルと同様、 テキストエディタ と ブラウザ があれば、 JavaScript を体験することができます。
3
HTML内でscript要素を記述する位置（復習）
HTMLでは、そのscript要素によって他の言語を実行させることができます。head要素とbody要素内に組み込むことができます。また、外部ファイルとしても指定できます。 <script type=“text/言語名”> ： ここに指定した言語のプログラムを書く </script> ＊注：HTML5(HTMLの最新版)では、<script>だけでよい。 type属性を記述しないときは、JavaScriptと判断
4
Webページ上に Hello World!! と表示するのは（復習）
<!DOCTYPE html> <html> <head> <title>JavaScript</title> </head> <body> <script> document.write("Hello world!!"); </script> </body> </html>
5
メッセージの表示（復習）
6
日付と時刻を追加（青色部分の追加） （復習）
日付と時刻を追加（青色部分の追加） （復習） <!DOCTYPE html> <html> <head> <title>JavaScript</title> </head> <body> <script> document.write("Hello world!!<br>"); dd = new Date(); document.write(dd.toLocaleString()); </script> </body> </html>
7
日付と時刻の表示（復習）
8
document.write(・・・）；について（復習）
ﾀﾞﾌﾞﾙｸｵｰﾃｰｼｮﾝ “ “ が使用されたときには、その内部の文字列がそのまま画面上に表示される。 document.write( 数式など ）； カッコ内に数式などのある値を持ったものを書くことができます。
9
計算結果の表示（以下の文を試しなさい） （復習）
計算結果の表示（以下の文を試しなさい） （復習） document.write(12+34）； の計算結果46を表示 document.write(56-34）； の計算結果22を表示 document.write(12*10）； 12*10の計算結果120を表示 document.write(36/12）； 36/12の計算結果3を表示 ｺﾝﾋﾟｭｰﾀｰでは、計算は加減乗除の四則演算が基本です。 その演算記号としてﾌﾟﾛｸﾞﾗﾑ言語では次のｷｰﾎﾞｰﾄﾞの記号を使います。 加算記号 ＋ は ＋ 減算記号 － は － 乗算記号 × は ＊ ｱｽﾀﾘｽｸ記号 除算記号 ÷ は ／ ｽﾗｯｼｭ記号
10
加減乗除の計算結果を表示するﾌﾟﾛｸﾞﾗﾑ
<!DOCTYPE html> <html> <head> <title>サンプル</title> </head> <body> <script> document.write(12+34); document.write(56-34); document.write(12*10); document.write(36/12); </script> </body> </html>
11
12+34の計算結果46 と 56-34の計算結果22 12*10の計算結果120 36/12の計算結果3 が 順に続いて表示されている。 演算式をカッコでくくり それに改行のbr要素を 加えてみよう。 document.write( (12+34)+”<br>”) ;
12
加減乗除の計算結果を表示するﾌﾟﾛｸﾞﾗﾑ（復習）
<!DOCTYPE html> <html> <head> <title>サンプル</title> </head> <body> <script> document.Write((12+34)+"<br>"); document.write((56-34)+"<br>"); document.write((12*10)+"<br>"); document.write((36/12)+"<br>"); </script> </body> 結合 </html>
13
br要素を追加して表示（復習） 次のように」見出しを付けて表示してみよう。 12+34=46 56-34=22 12*10=120
36/12=3
14
加減乗除の計算結果の表示（復習） <!DOCTYPE html> <html> <head>
<title>サンプル</title> </head> <body> <script> document.Write("12+34="+(12+34)+"<br>"); document.write("56-34="+(56-34)+"<br>"); document.write("12*10="+(12*10)+"<br>"); document.write("36/12="+(36/12)+"<br>"); </script> </body> </html>
15
見出し付き表示 （復習）
16
定数と変数（復習） 定数とは これまでの計算に使ってきた 12 や 34 で表現した文字そのものが指す値を言います。 変数とは 定数のように使った文字そのものが値を指すのとは違って 何文字かの英字を使って、その中に値を入れることができ ます。この文字列を変数（または変数名）と呼びます。
17
JavaScript文の書き方の決まり（復習）
<script> 文は セミコロン ； で必ず終わる セミコロンは、文と文を区切る記号です。 だから var a; var b; と var a; var b; var c; c=a+b; は var c; 同じです。 c=a+b; </script>
18
JavaScriptを記述する場所 これまでは<body>内にJavaScriptを書いてきました。 <body>内以外に <head>内や 外部ファイルとして 指定することができます。
19
アラート alert（表示する情報） JavaScriptには「警告」や「メッセージ」のアラートダイアログを出すalertというものがあります。 アラートダイアログを出すにはalertに引数を渡してあげる必要があります。 引数とはalertに渡してあげる情報のことで、その情報はalert()の()内に書きます。 引数が文字列の場合は“または‘で文字列を囲みます。
20
<body>内に記述したalert
<!DOCTYPE html> <html> <head> </head> <body> <script> window.alert("こんにちは"); </script> </body> </html>
21
<head>内に記述したalert
<!DOCTYPE html> <html> <head> <script> function aisatsu(){ window.alert("こんにちは"); } </script> </head> <body> <input type="button" value="click" onclick="aisatsu()"> </body> </html>
22
下記の例では、clickというボタンを押したときに、 aisatsuという関数が呼ばれて、「こんにちは」というダイアログが表示されます。
イベントハンドラ(on～) <input type="button" value="click" onclick="aisatsu()"> のようにして、ボタンをクリックしたとき（onClick）やマウスを乗せたとき（onMouseOver）などに JavaScript を実行することができます。 これを、イベントハンドラと呼びます。 下記の例では、clickというボタンを押したときに、 aisatsuという関数が呼ばれて、「こんにちは」というダイアログが表示されます。
24
外部ファイルとして作成したalert <!DOCTYPE html> <html> <head> <script> function aisatsu(){ window.alert("こんにちは"); } </script> </head> <body> <input type="button" value="click" onclick="aisatsu()"> </body> </html>
25
alert部分を取り出して外部ファイルを作る
function aisatsu(){ window.alert("こんにちは"); } ファイル名は何でもよいが この例の場合は aisatsu.js としている。 ファイル名の拡張子は、必ず .js とします。
26
外部ファイルとして作成したalert <!DOCTYPE html> <html> <head> <script src="aisatsu.js"> ↑ </script> 外部ファイルの所在 </head> <body> <input type="button" value="click" onclick="aisatsu()"> </body> </html>
27
課 題 一つのHTML内に、次の指定に従って、alertを表示しなさい。 ① body内で「おはよう」と表示 ② head内で「こんにちは」と表示 なお、イベントハンドラーはbody内で指示 ③ 外部ファイルとして、「こんばんは」と表示 完成したら、制作技術の課題のWebページに組み込みなさい。
Similar presentations
