JavaScriptプログラミング入門２.JavaScriptの概要

Size: px

Start display at page:

Download "JavaScriptプログラミング入門２.JavaScriptの概要"

れんまあかさか
4 years ago
Views:

1 JavaScript プログラミング入門 1.JavaScript の概要 08T4067L 横田翔

2 2-1 オブジェクトベース言語としての JavaScript

3 2-1-1 オブジェクト指向言語とオブジェクト指向言語オブジェクトベース言語対象となるオブジェクトがどのようなデータ操作方法を持っているかというようにモデル化してプログラミングを行うオブジェクト指向の概念の中でも基本的なものだけを採用していて初心者に優しいオブジェクトベースメソッドーオブジェクトに対する操作のこと継承ーオブジェクトのプロパティやメソッドを引き継ぎ新たなオブジェクトを定義する機能

4 2-1-2 オブジェクトの取り扱い new 演算子ーオブジェクトの生成書式 new コンストラクタコンストラクタ, オブジェクトを生成するために使用する特別なメソッドコンストラクタには生成するオブジェクトの名前と同じ名前がつく生成されたオブジェクトにはオブジェクトそのものではなくオブジェクトを指し示している値が格納されるインスタンス, 生成されたオブジェクトの実体のこと

5 メソッドの利用いったんオブジェクトを生成するとそのオブジェクトに用意されているさまざまなメソッドが使用可能に書式インスタンス名 - メソッド名 '( たとえば Date オブジェクトには時間を取り出す gethours() 分を取り出す getminutes() といったメソッドがある

6 例 var now ; // 変数 nowを宣言 now = new Date(); // 現在の日付時間を管理するDateオブジェクトを作成 var hour, minute; // 変数 hour,minuteを宣言 hour = now.gethours(); // 時を変数 hourに入れる miunte = now.getminutes(); // 分を変数 minuteに入れるこれを元に Web ブラウザの画面に現在時刻を表示するサンプル (time.html) を示す

7 time.html <html> <head> <meta http-equiv= Content-Script-Type content= text/javascript > <title> 現在時刻を表示する </title> </head> <body bgcolor= #ffffff > <script Language= JavaScript type=text/javascript > var now, hour, minute; now = new Date(); hour = now.gethours(); minute = now.getminutes(), document.write( <h1> 現在時刻 : ); document.write(hour, 時,minute, 分, </h1> ); </script> </body> </html>

8 インスタンスメソッドとクラスメソッド gethours() のようなメソッドはあらかじめ生成されているインスタンスに対して実行されるインスタンスが管理するデータは個々のインスタンスごとに異なるため以下のようにオブジェクトの型名である Date に対してメソッドを呼び出すことはできない hour = Date.getHours(); // エラーインスタンスメソッドー特定のインスタンスに対して実行するメソッド実行するにはあらかじめインスタンスが存在している必要があるクラスメソッドーインスタンスに依存しないで汎用性が高い関数のように使用できる実行形式オブジェクト名 -メソッド

9 引数について引数ーメソッドに渡す何らかの値引数を複数個とる場合もありその場合はカンマ + で区切って指定ちなみに引数がない場合でも '( は必要

10 2-1-3 Web ブラウザ上のオブジェクト window オブジェクト image オブジェクト document オブジェクト form オブジェクト link オブジェクト

11 Web ブラウザ画面のオブジェクトオブジェクト window オブジェクト説明 Web ブラウザのウィンドウ document オブジェクト HTML ドキュメント image オブジェクト form オブジェクト link オブジェクトイメージフォームリンク

12 document オブジェクトについて document オブジェクトー Web ブラウザに表示されている HTML ドキュメント自身プロパティとメソッドで構成される Web ブラウザに HTML ドキュメントがロードされるとその HTML ドキュメントを管理するオブジェクトのインスタンスである document が自動的に生成される

13 2-1-4 プロパティプロパティーオブジェクトの外観や性質などを管理する値プロパティへのアクセスまたはインスタンス名 - プロパティ名インスタンス名 [ プロパティ名 ] プロパティには値を設定できるものと読み出しのみ可能なものの 1 通りある値を設定するときは以下のように記述インスタンス名 - プロパティ名 = 値 ;

14 2-1-5 with 文によるプロパティメソッドのアクセス with 文ー最初にインスタンス名を宣言することで with 文内ではインスタンス名を省略してメソッドやプロパティを指定できる例 with( インスタンス名 ){ メソッド名 (); メソッド名 (); プロパティ名 }

15 1,1 変数とリテラル

16 2-2-1 変数を使うには変数の宣言について型名の宣言の必要はないただし間違いを防ぐためできるだけ宣言しておいたほうがいい宣言しただけで値を代入していない変数には undefined という特殊な値が設定される複数の変数を0 行で宣言するに変数名をカンマ + で区切る

17 2-2-2 変数の型 JavaScriptの代表的な変数は以下の3つ数値型' 数値を表す ( 文字列型' 文字列を格納 ( ブーリアン型'trueかfalseのどちらかの値をとる ( オブジェクト型' オブジェクトのインスタンスを格納する (

18 2-2-3 リファレンス型とプリミティブ型リファレンス型, オブジェクト型配列など, 変数にオブジェクトの場所を指し示す値を格納されるプリミティブ型, 数値型ブーリアン型, 変数に数値そのものが格納される

19 2-2-4 JavaScript における変数名のつけ方 JavaScript で使用する変数名の決まりごと JavaScriptの予約語を名前として使用できない変数名はアルファベットかアンダースコア _ で始まらなくてはならない 2 文字目以降には数字またはアルファベットの中から任意の文字を使用できる大文字と小文字が区別されるので注意

20 2-2-5 リテラルリテラループログラム中に記述する整数や文字列などのそのままの値のこと例 9 num = 2 ; 変数リテラル

21 リテラルの種類整数リテラル, 整数値を表記する,0/ 進数 7 進数 05 進数で表記できる ' 通常は0/ 進数 (, / から始まるリテラルは7 進数例進数のリテラル '0/ 進数で13(, 0x または 0X から始まるリテラルは05 進数例 90xff 05 進数のリテラル '0/ 進数で0/( 0x0a 05 進数のリテラル '0/ 進数で0/(

22 浮動小数点リテラル, 整数以外の数値例 e e ブーリアンリテラル,true' 真 ( または false' 偽 ( の論理値 ' ブール値 ( を表す文字列リテラル, 文字列をあらわすリテラルゼロ個以上の文字をダブルクォーテーションもしくはシングルクォーテーションで囲む

23 null, 何もない状態を表す特殊な値特殊な文字列の表記法エスケープシーケンスによる特殊文字エスケープシーケンス \n \t \b \r 内容改行タブバックスペースキャリッジリターン \f フォームフィールド ' 紙送り ( \ \ 文字 \ \ \ \XXX \xxx \uxxxx シングルクォーテーションダブルクォーテーション 7 進数で指定したASCⅡ 文字コード 05 進数で指定したASCⅡ 文字コード Unicode' ユニコード ( で指定した文字コード

24 2-3 式と演算子

25 2-3-1 式の概要他のプログラミング言語同様右辺に計算式を記述し左辺にその値を代入する変数を記述する例 9 num = num + 5 ; // 変数 num の値に 4 を加え再び num に代入する newstr = myname + is taro. ; //myname という変数と is taro. という文字列をつなげた文字列を変数 newstr に代入する

26 式の組み合わせ例 9 b = (a = 3) * 2; 変数 a に 2 が代入され変数 b には 2)1 の結果 5 が代入される二項演算子と単項演算子二項演算子, 二つの値に対し演算を行う例 9 i + 1, x / y, 単項演算子, ひとつの値に対し演算を行う例 9 ++i, -b,

27 2-3-2 さまざまな演算子算術演算子, 数値型のデータに対し演算を行う二項演算子演算子説明 * 加算ー減算 ) 乗算. 除算 % 剰余算単項演算子演算子説明ーマイナス符号 ** インクリメントーーデクリメント

28 等価比較演算子, 式の値が等しいか等しくないかを調べ真偽のブール値を戻す二項演算子比較演算子, 式の大小を比較して真偽のブーリアン値を戻す二項演算子等価比較演算子演算子 == 説明等しければ true そうでなければ false を戻す!= 等しくなければ true そうでなければ false を戻す比較演算子演算子例説明 < a < b aの値がbより小さければtrue そうでなければfalseを戻す > a > b aの値がbより大きければtrue そうでなければfalseを戻す <= a <= b aの値がb 以下ならばtrue そうでなければfalseを戻す >= a >= b aの値がb 以上ならばtrue そうでなければfalseを戻す

29 論理演算子, ブーリアン型のデータに対し論理演算を行う論理演算子演算子説明! 否定 9ブール値の値を反転する単項演算子 && 論理積 9 左右の値がともにtrueならばtrueをそうでなければfalseを戻す二項演算子!! 論理輪 9 左右の値のどちらかがtrueであればtrue そうでなければfaseを戻す二項演算子

30 ビット演算子, 数値を21ビットの整数とみなして 1 進数に変換しビット演算を行う演算子ビット演算子演算子 & ^ 説明論理積 'and( 論理和 'or( 排他的論理和 'xor( 例 9 数値 8 と 03 の論理和論理積排他的論理和演算 0/ 進数 1 進数 8 0// / 8&03' 論理積 ( 7 0/// 8 03' 論理和 ( ^03' 排他的論理和 ( 6 /000

31 シフト演算子, 整数型のデータのビットを右方向もしくは左方向にシフトする二項演算子シフト演算子演算子 << >> >>> 説明左シフト右シフト右論理シフト例 9a = 10 << 1 ; 1 進数 0/ 進数 ////0/0/ 0/ <<0 ////0/0/ ' 左へ0ビットシフト ( ////0/0// 1/

32 2-3-3 演算子の優先順位優先順位演算子 0. [ ] ( ) 1! * / % << >> >>> 5 < <= > >= 6 ==!= 7 & 8 ^ 0/ 00 && 01 02? : 03 = += -= /= %= &= ^= = <<= >>= >>>=

33 例値の型を調べる typeof 演算子 var today = new Date(); var month = today.getmonth(); var mynum = 15 ; var myname = WildDog ; 上記リストの場合の例 typeof 演算子 typeof today typeof Date typeof mynum typeof month typeof true typeof ng typeof eval typeof null 戻り値 object function number string boolean underfined function object

34 今週の課題以下の条件を満たすプログラムを作成してください new 演算子を使用して Date オブジェクトを生成する変数 hour,minute を宣言してそれぞれに時間と分を代入する時間が 5~01 時ならおはようございます 01~07 時ならこんにちは 07~13 時ならこんばんは /~5 時ならよい子は寝ている時間ですと表示されるようにする使用した変数の型を typeof 演算子を用い調べ表にしてまとめる

Java Scriptプログラミング入門 3.6～茨城大学工学部情報工学科 08T4018Y 小幡智裕

Java Scriptプログラミング入門 3.6～茨城大学工学部情報工学科 08T4018Y 小幡智裕 Java Script プログラミング入門 3-6~3-7 茨城大学工学部情報工学科 08T4018Y 小幡智裕 3-6 組み込み関数組み込み関数とは JavaScript の内部にあらかじめ用意されている関数のことユーザ定義の関数と同様に関数名のみで呼び出すことができる 3-6-1 文字列を式として評価する関数 eval() 関数引数 : string 式として評価する文字列戻り値 :

JavaScriptプログラミング入門 ２.JavaScriptの概要

JavaScriptプログラミング入門２.JavaScriptの概要