Download presentation
Presentation is loading. Please wait.
1
Webﾍﾟｰｼﾞに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
情報スキル活用 第１３週 Webﾍﾟｰｼﾞに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
2
JavaScript とは JavaScript とは、Netscape Communications 社が開発したプログラミング言語です。
1995年（23年前）に同社の Netscape Navigator 2.0 で初めてサポートされ、Microsoft 社の Internet Explorer 3.0 でも同様の機能 JScript の名前でサポートされました。 JavaScript を用いることにより、ブラウザで表示する Webページ上で、フォームに入力した値をチェックしたり、時刻を表示したり、ゲームなどを実装することもできるようになります。
3
JavaScript と Java の関係は？
JavaScript とよく似た名前のプログラミング言語に、 Sun Microsystems 社が開発した Java があります。 Java と JavaScript は名前もよく似ていますし、いずれも C 言語を祖先として生まれた言語なので記述もよく似ていますが、まったく別物です。 JavaScript は元々 LiveScript という名前で開発されていましたが、Java が流行しはじめたことや、Netscape 社と Sun 社が技術提携したこともあり、JavaScript と名前を変えたようです。
4
JavaScriptを始めるにあたって準備するもの
JavaScript を始めるのに特別なソフトは必要ありません。 通常の HTML ファイルと同様、 テキストエディタ と ブラウザ があれば、 JavaScript を体験することができます。
5
HTMLのscript要素 HTMLでは、そのscript要素によって他の言語を実行させることができます。script要素は、head要素とbody要素内に組み込むことができます。 <script type=“text/言語名”> ： ここに指定した言語のプログラムを書く </script>
6
ｽｸﾘﾌﾟﾄ（言語）種別 type 属性で記述（使用）する言語を指定します。 HTML 4.01 では type 属性は必須とされていましたが、HTML5 では省略時は "text/javascript" とみなされるようになりました。 JavaScript 以外の言語を使用する場合に type 属性を指定します。
7
早速体験してみよう ： 次のwebﾍﾟｰｼﾞを作りなさい
<!DOCTYPE html> <html> <head> <title>JavaScript</title> </head> <body> <script type=“text=javascript”> document.write("Hello world!!"); </script> </body> </html>
8
メッセージの表示
9
日付と時刻を追加（青色部分の追加） <!DOCTYPE html> <html> <head> <title>JavaScript</title> </head> <body> <script type=“text=javascript”> document.write("Hello world!!<br>"); dd = new Date(); document.write(dd.toLocaleString()); </script> </body> </html>
10
日付と時刻の表示
11
document.write(・・・）；について
ﾀﾞﾌﾞﾙｸｵｰﾃｰｼｮﾝ “ “ が使用されたときには、その内部の文字列がそのまま画面上に表示される。 document.write( 数式など ）； カッコ内に数式などのある値を持ったものを書くことができます。
12
計算結果の表示（以下の文を試しなさい） document.write(12+34）； 12+34の計算結果46を表示
ｺﾝﾋﾟｭｰﾀｰでは、計算は加減乗除の四則演算が基本です。 その演算記号としてﾌﾟﾛｸﾞﾗﾑ言語では次のｷｰﾎﾞｰﾄﾞの記号を使います。 加算記号 ＋ は ＋ 減算記号 － は － 乗算記号 × は ＊ ｱｽﾀﾘｽｸ記号 除算記号 ÷ は ／ ｽﾗｯｼｭ記号
13
加減乗除の計算結果を表示するﾌﾟﾛｸﾞﾗﾑ
<!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>
14
12+34の計算結果46 と 56-34の計算結果22 12*10の計算結果120 36/12の計算結果3 が 順に続いて表示されている。 演算式をカッコでくくり それに改行のbr要素を 加えてみよう。 document.write( (12+34)+”<br>”) ;
15
加減乗除の計算結果を表示するﾌﾟﾛｸﾞﾗﾑ
<!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>
16
br要素を追加して表示 次のように」見出しを付けて表示してみよう。 12+34=46 56-34=22 12*10=120 36/12=3
17
加減乗除の計算結果の表示 <!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>
18
見出し付き表示
19
定数と変数 定数とは これまでの計算に使ってきた 12 や 34 で表現した文字そのものが指す値を言います。 変数とは 定数のように使った文字そのものが値を指すのとは違って 何文字かの英字を使って、その中に値を入れることができ ます。この文字列を変数（または変数名）と呼びます。
20
変数を使った計算 <head> <title>サンプル</title> </head> <body> <script> var a, b, c; a=12; b=34; c=a+b; document.write("a+b="+c+"<br>"); </script> </body> </html>
21
document.write("a+b="+c+"<br>"); </script> varはvariableの略で
変数を使ったJavaScriptの説明 <script> var a, b, c; a=12; b=34; c=a+b; document.write("a+b="+c+"<br>"); </script> varはvariableの略で ｺﾝﾏで区切られた3文字(a,b,c)それ varは、variableの略で、 JavaScriptで特定の機能を表す"語"で、続いて書かれた文字列は変数であることを指定します。 ｺﾝﾏで区切られた文字列、 ここでは、 a と b と c の三つが変数です。 そして a=12: のように ＝記号で関係つけられた文 を算術式といいます。 ＝記号の右側（右辺）に掛かれた式を計算して、その値を左側（左辺）の変数の 値とします（代入）。
22
二数の加減乗除を変数を使ってするﾌﾟﾛｸﾞﾗﾑに作り変え
<!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>
23
JavaScript文の書き方の決まり <script> 文は セミコロン ； で必ず終わる セミコロンは、文と文を区切る記号です。 だから var a; var b; と var a; var b; var c; c=a+b; は var c; 同じです。 c=a+b; </script>
24
ｱｸｾｽ時刻の表示 残りの時間を使って これまでに作成したWebページに アクセスした時刻を表示する機能を追加しなさい。 来週は、 JavaScriptの多様な表現（機能）について解説します。
Similar presentations
