1 山口研究室 後期博士課程 2 年 玉川 奨 ( たまがわ すすむ ) 居室: 24 - 604 / 23 - 620 mail : JavaScript 演習1.

Slides:



Advertisements
Similar presentations
プログラミング論 第八回数字の計算,整数の入出力. 本日の内容 前回の課題(続き) 前回の課題(続き) 数字の計算をする 数字の計算をする – 加減乗除を行う – インクリメント演算子とデクリメン ト演算子.
Advertisements

情報アプリケーション1 2006 年 10 月 12 日 第四回資料 担当 重定 如彦. 目次 データの送信とフォーム クイズ CGI 複数のパーツのデータの分割方法 配列変数.
1 安全性の高いセッション管理方 式 の Servlet への導入 東京工業大学 理学部 千葉研究室所属 99-2270-6 松沼 正浩.
第6回 JavaScript ゼミ セクション3-6 発表者 直江 宗紀. 組み込み関数  JavaScript に予め用意された関数  特定のオブジェクトに依存していない  単に関数名で呼び出すことが可能.
1 PHP プログラムの実行(まと め) 担当 岡村耕二 月曜日 2限 平成 22 年度 情報科学 III (理系コア科目・2年生) 本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明 准教授等による以前の講義資料をもとにしています。
1 なんとなく Ajax ~新しくて古い XMLHttp 川合孝典 (Kansai.pm) 2005/5/22.
2017/2/26 情報処理 第5回.
情報基礎A 情報科学研究科 徳山 豪.
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
情報理工学部 情報システム工学科 3年 H 井奈波 和也
JavaScript 演習1.
JavaScript プログラミング入門 2006/11/10 神津.
プログラミング言語としてのR 情報知能学科 白井 英俊.
VBA H106077 寺沢友宏.
PHP 概要 担当 岡村耕二 月曜日 2限 平成21年度 情報科学III (理系コア科目・2年生)
WWW (=World Wide Web)とは
第2回:Javaの変数と型の宣言 プログラミングII 2007年10月2日.
Webコミュニケーショングループ ~PHPの基礎~ M1 宮崎 真.
第4回 個人の動画配信補足のためのWeb構築
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
JavaScript    プログラミング入門 3-2 Stringオブジェクト 2006/10/27 神津 健太.
JavaScript 成瀬 基樹 平野 敦 北浦 繁.
Web App Semi 2008 #1 Web App Semi 2008 #1.
第6章 2重ループ&配列 2重ループと配列をやります.
9 Microsoft Word(1).
HTTPプロトコルとJSP (1) データベース論 第3回.
Webを利用した授業支援システムの開発 北海道工業大学 電気電子工学科 H 渋谷 俊彦.
PHP 概要 担当 岡村耕二 月曜日 2限 平成20年度 情報科学III (理系コア科目・2年生)
①データ構造 ②アルゴリズム ③プログラム言語 ④マークアップ言語
HTTPプロトコル J2EE I 第7回 /
2017/4/9 情報処理 第5回.
Day3 Day4 Day3 Day4.
データベース設計 第9回 Webインタフェースの作成(1)
基礎プログラミング演習 第1回.
第8章 Web技術とセキュリティ   岡本 好未.
【プログラミング応用】 必修2単位 通年 30週 授業形態:演習.
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
電気・機械・情報概論 VBAプログラミング 第2回 2018年7月2日
アルゴリズムとプログラミング (Algorithms and Programming)
基礎プログラミング演習 第5回 関数とイベントを使ったプログラム.
04: 式・条件分岐 (if) C プログラミング入門 基幹7 (水5) Linux にログインし、以下の講義ページ を開いておくこと
第7回 プログラミングⅡ 第7回
岩村雅一 知能情報工学演習I 第10回(後半第4回) 岩村雅一
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
ネットワークプログラミング (3回目) 05A1302 円田 優輝.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
PHP 概要 担当 岡村耕二 月曜日 2限 平成22年度 情報科学III (理系コア科目・2年生)
基礎プログラミング演習 第12回.
プログラミングⅠ 平成30年10月22日 森田 彦.
オブジェクト指向言語論 第六回 知能情報学部 新田直也.
情報基礎演習I(プログラミング) 第11回 7月12日 水曜5限 江草由佳
C言語 はじめに 2016年 吉田研究室.
統計ソフトウエアRの基礎.
地域情報学 C言語プログラミング 第2回 変数・配列、型変換、入力 2017年10月20日
基礎プログラミング演習 第6回.
Webアプリケーションと JSPの基本 ソフトウェア特論 第4回.
基礎プログラミング演習 第3回.
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
Webページに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
ウェブデザイン演習 第6回.
情報実習I (第1回) 木曜4・5限 担当:北川 晃.
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
C言語講座 四則演算  if ,  switch 制御文.
分岐(If-Else, Else if, Switch) ループ(While, For, Do-while)
岩村雅一 知能情報工学演習I 第7回(後半第1回) 岩村雅一
第1章 文字の表示と計算 printfと演算子をやります.
オブジェクト指向言語論 第六回 知能情報学部 新田直也.
Presentation transcript:

1 山口研究室 後期博士課程 2 年 玉川 奨 ( たまがわ すすむ ) 居室: 24 - 604 / 23 - 620 mail : JavaScript 演習1

JavaScript( 言語)とは 情報システムのプログラミング → ソースコード記述,外部ファイル保存, コンパイル,テスト,デバッグ... → 大変な作業 もっと手軽なプログラミング → 特別な言語処理系は不要! →Web ブラウザだけで実行可能 (実際は, HTML ファイル内 or 外部ファイル として記述保存) 2

Web ブラウザは Web ページ閲覧に使うはず。 なんでプログラムが動くの? 通常は, Web ページ閲覧のために, Web ブラウザ( IE ) を開く. → 今回は ( 特別に),プログラミングするために IE を開く .  でも IE は Web ページを閲覧(提示)するんだから, 一体, IE のどこにプログラムを入力するんだ? 入力箇所はあります.それは URL 欄  でもそこはネットのアドレスを入力する欄でしょう. プログラムなんか入力したらエラーになるよ. 通常は ~によりアドレスを指定します。 プログラム文 とすれば 確かにエラーになります。確認しましょう。 3

失敗 vs. 成功 を URL 欄に入力して実行 サーバが見つかりませんでした という 名前のサーバが見つかりませんでした。 http: HTTP プロトコル // ホスト記述の開始を表す(ルート) alert(hello) を に解釈して www : Web サーバ名 alert(hello).com ドメイン名 ネット上にそのサーバが存在しなかった。 ※ちなみに なら成功する。 4

URL の復習 URL (ネット上の情報資源を一意に決定する方法)であり, 他のサーバが持つ情報資源を利用する時, http プロトコルを宣言す る。 : http :ハイパーテキスト転送プロトコル用スキーム ftp :ファイル転送プロトコル用スキーム mailto : 電子メールアドレス用スキーム file : ホストのファイルシステム用スキーム ... (非公式) javascript: JavaScript プログラム用スキーム 5

Web ブラウザーでプログラミング! ※アラートウィンドウ出現 →1 行プログラミング アドレス欄を削除し, javascript:alert(“hello”); と入力して改行 ( 実行) ※ copy&paste すると変なコードが 挿入されて動かないかも!? 小さな(アラート=警告)ウィンドウが出現しましたか ? 出現したら,ok ボタンをクリックして小ウィンドウを閉 じましょう ※インタラクション →3 行プログラミング javascript: ans=prompt(" 1+12 "); document.write(ans);document.write(" は正解です ") 6

90 年代: JavaScript は不遇 Java 言語とは全く異なる, 簡易型プログラミング(スク リプト=台本)言語。コンパイラではなくインタープリ タ。 オブジェクト指向型スクリプト言語。 C 言語に似た手続 き型言語のようなスタイルで書かれる。 NetScape 社でサーバ負荷軽減のために開発。 90 年代後半は,セキュリティの脆弱性,ブラウザによっ て 挙動が異なるなど,問題の多かった言語 7

2005-: JavaScript は脚光 2000 年頃から –Amazon や Google といった企業が採用 2005 年 Google Map の登場により状況が一変 ・ユーザ満足度(ユーザエクスペリエンス)を重視した リッチクライアントに対応した Web サイトが続々登場 ・サーバからクライアントへの転送データ量の減少 直感的な操作が可能 Gmail, Google サジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widget など など ↑ 入力値チェックなどにも利 用 8

Ajax (Asynchronous JavaScript and XML) Web アプリケーションモ デル Ajax (Asynchronous JavaScript and XML) Web アプリケーションモ デル 従来の Web アプリケーションモデル 従来の Web アプリケーションモデル Web サーバー データベース、バックエンド 処理、 レガシーシステム サーバーサイドシステム ユーザーインターフェース ブラウザー Http リクエス ト HTTP (s) 通信 HTML + CSS データ ユーザーインターフェース Ajax エンジン ブラウザー データベース、バックエンド処 理、 レガシーシステム Web または XML サーバー サーバーサイドシステム XMLHttp リクエスト 非同期制御 XML データ HTTP (s) 通信 HTML + CSS デー タ JavaScript コール ブラウザーによっ て Ajax エンジン自 体や、 呼び出し方法が 異なる 非同期実現

クライアン ト サーバー クライアン ト サーバー 従来の Web アプリ(同期 → ユーザが待たされ る) Ajax Web アプリ(非同期 → ユーザが快 適) ユーザー側の活動 システム処 理 データ 送信 データ 送信 データ 送信 データ 送信 クライアント側処 理 データ 送信 データ 送信 データ 送信 データ 送信 ユーザー側の活動 入力表示入力 表示 データ 送信 待ち時間がある  待ち時間がない サーバーサイドの処理 時間軸 ▶ Ajax エンジンが 通信を担当する

JavaScript 演習( 3 回)目的 HTML ・CSSのおさらいと、流行り (?)の Web2.0 技術 JavaScript プログラ ミング DHTML 作成を通じて、見て動くプログラ ムの楽しさ COM 実験への基礎知識 11

HTML 12

HTML の構造 ドキュメントタイプの宣言 ~ HTML 文書だということの宣言 – ~ 文書のヘッダ情報 その文書に関するメタ情報 ~ 文書のタイトル – 文書本体 テストページ

HTML タグの一例 ~ 見出しをつける 一つの段落を表す 改行, 順序の無し, ありのリスト リストの項目 リンクの開始 画像の表示 テストページ 見出し 1 見出し 2 HelloWorld! リスト 1 リスト 2 リスト 3 サンプルその2 htmlEx1.html

CSS 15

CSS の書き方 HTML ファイル内に書く方法 – タグ内に以下のように記述 –htmlEx3.html ここにスタイルを記述 別のテキストファイルに書く方法 htmlEx2.html, cssEx.css 16 Web ページのデザインを定義

CSS の書式 セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ:スタイル適用対象の選択 プロパティ: ‘font-size’ や ‘line-height’ の ようなレンダリング特性 値:プロパティに指定可能な値が定義 とほほのスタイルシート入門 –

JavaScript 18

JavaScript の書き方 HTML ファイル内に書く方法 – タグ内に以下のように記述 –ex1.html <!-- ここにスクリプトを書く //--> 別のテキストファイルに書く方法 ex2.html, ex1.js 19

HTML →Web ページの骨格の みを担当。表現力は紙 の文書と同程度。 CSS →Web ページのデザイ ンを担当。通常は HTML と組み合わせて 用いる。 JavaScript →Web ページを動的な ものにする。通常は HTML と組み合わせて 用いる。 HTML と CSS と JavaScript の 違い JavaScript CSS JavaScript CSS HTML 外部ファイ ル

内容 alert 関数 変数・データ型 演算子 関数 document.write 関数 prompt 関数 演習問題1 条件分岐 繰り返し parseInt 関数と parseFloat 関 数 演習問題2 21

alert 関数 ポップアップウィンドウに指定したメッセージ を表示する関数 デバッグに利用可能 –Java の System.out.println メソッドに相当 –Ruby の puts メソッドに相当 関数 – 再利用可能な JavaScript コードのかたまりに名前をつ けたもの 22 alert( ‘ 表示するテキスト ’ ); alert(‘Hello, World!’);

変数・データ型 変数宣言は var を用いる – 変数の長さは1文字以上 – 変数の最初の文字に使えるのは,英字,アン ダースコア( _ ),ドル記号 ($) ○ $total , _firstName , top100 – 空白文字と (_ と $ 以外の ) 特殊文字は使えない × 5to10 , first name , #total , world! 23

変数・データ型 基本データ型は数値、文字列、論理値の 3 種 類 –ex3.html 数値 文字列 論理値 24 var num = 1; alert(num); num = 3.14 alert(num); var message = ‘Hello, World!’; alert(message); var bool = true; alert(bool); bool = false; alert(bool);

演算子(よく使われるもの) ex4.html , ex5.html , ex6.html 算術演算子 –+ (加算), - (減算), * (乗算), / (除算), % ( 余剰) –++ (インクリメント), -- (デクリメント) 論理演算子 –&& (論理積), || (論理和), ! (否定) 比較演算子 – (大なり), >= (以上 ) –== (等しい), != (等しくない) 代入演算子 –= (代入), += (加算), -= (減算), *= (乗算) –/= (除算), %= (余剰) 25 pqp && q true false truefalse pqp || q true falsetrue falsetrue false p!p truefalse true

関数 再利用可能な JavaScript コードのかたまりに名 前をつけたもの ex7.html function 関数名(引数) { 定義内容 return 戻り値 ; } 26 関数名(引数) ; var num = 関数名(引数) ; 定義方法 呼び出し方法

document.write 関数 document.write( 引数 ) -引数を HTML として表示させる ex8.html 27 var str = "Hello, World"; document.write(" " + str + " ");

prompt 関数 prompt( 引数 ) -引数をメッセージとして表示し,ユーザ からの入力情報(文字列)を取得する関数 ex9.html 28 var value = prompt(" 値を入力してください. "); alert(value); document.write(' prompt 関数 '); document.write(' ' +value + ' ');

演習問題1 prompt 関数と document.write 関数を用いて ,ユーザから入力されたテキスト,文字 の色,文字のサイズ( % )に応じて,表示 内容を変化させる JavaScript プログラムを 書きなさい 29

条件分岐 ex10.html, ex11.html if 文 switch 文 30 if ( 条件 1) { 文 1; } else if ( 条件 2) { 文 2; ・・・・・ } else { 文 N; } 条件の部分には, 論理値( true or false) が入る switch ( テストデータ ) { case マッチデータ1 : 文1 ; break; case マッチデータ2 : 文2 ; break; default: 文3 ; break; } break 文を使って他の選択肢が 実行されないようにする マッチする選択肢が なかったときに実行

繰り返し ex12.html for 文 while 文 31 for ( 初期化 ; テスト ; 更新 ) { アクション ; } 初期化 ; while ( テスト ) { アクション ; 更新 ; }

parseInt 関数と parseFloat 関数 parseInt( 引数 ) – 引数で文字列を渡すと数値に変換 parseFloat( 引数 ) – 引数で文字列を渡すと浮動小数点に変換 ex13.html 32

演習問題 2 “Hello!” という文字列をユーザが入力した数だけ 表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色,2の 場合には緑色,3の場合には黄色, 4 の場合には 黒, 0 の場合には青色,さらに, 3 の倍数の場合 には 200% の大きさで ”Hello!” を表示しなさい 33