JavaScript 演習1.

Slides:



Advertisements
Similar presentations
JavaScript 演習2 1. 前回の補足説明+復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題1.
Advertisements

1 山口研究室 後期博士課程 2 年 玉川 奨 ( たまがわ すすむ ) 居室: 24 - 604 / 23 - 620 mail : JavaScript 演習1.
1 なんとなく Ajax ~新しくて古い XMLHttp 川合孝典 (Kansai.pm) 2005/5/22.
情報・知能工学系 山本一公 プログラミング演習Ⅱ 第3回 配列(1) 情報・知能工学系 山本一公
情報基礎A 情報科学研究科 徳山 豪.
情報理工学部 情報システム工学科 3年 H 井奈波 和也
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
JavaScript プログラミング入門 2006/11/10 神津.
プログラミング言語としてのR 情報知能学科 白井 英俊.
計算機リテラシーM 第2回 メール 伊藤 高廣.
JavaScriptゼミ第2回 2-2 変数とリテラル 発表者 直江宗紀.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
HTMLの記述と WWWにおける情報公開 遠藤
システムプログラミング 第5回 情報工学科 篠埜 功 ヒアドキュメント レポート課題 main関数の引数 usageメッセージ
PHP 概要 担当 岡村耕二 月曜日 2限 平成21年度 情報科学III (理系コア科目・2年生)
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
Webコミュニケーショングループ ~PHPの基礎~ M1 宮崎 真.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第4回 個人の動画配信補足のためのWeb構築
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
JavaScript 成瀬 基樹 平野 敦 北浦 繁.
見た目を定義する技術 CSS(スタイルシート).
HTTPプロトコルとJSP (1) データベース論 第3回.
JQueryでAjax 藤田@ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.
PHP 概要 担当 岡村耕二 月曜日 2限 平成20年度 情報科学III (理系コア科目・2年生)
HTTPプロトコル J2EE I 第7回 /
JavaScript 演習3 山口研究室 後期博士課程2年 玉川 奨 (たまがわ すすむ) 居室:24-604 / 23-620
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
基礎プログラミング演習 第7回 繰り返し.
Javaプログラムの実行まで バイト Javaの コード 実行 ソースコード Java ファイル名 ファイル名 abc.java
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
データベース設計 第9回 Webインタフェースの作成(1)
基礎プログラミング演習 第1回.
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
第8章 Web技術とセキュリティ   岡本 好未.
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
第4回JavaScriptゼミ セクション2-8 発表者 直江 宗紀.
ガジェット・マスターへの まわり道!? ~Ajaxを理解しよう~
基礎プログラミング演習 第5回 関数とイベントを使ったプログラム.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
第7回 プログラミングⅡ 第7回
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
ネットワークプログラミング (3回目) 05A1302 円田 優輝.
地域情報学 C言語プログラミング 第1回 導入、変数、型変換、printf関数 2016年11月11日
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
コンピュータ プレゼンテーション.
PHP 概要 担当 岡村耕二 月曜日 2限 平成22年度 情報科学III (理系コア科目・2年生)
ウェッブページ書法の復習 ネットワーク論以前のお話.
情報処理Ⅱ 第2回:2003年10月14日(火).
基礎プログラミング演習 第12回.
情報コミュニケーション入門b 第11回 Web入門(2)
HP作成 そろそろまとめ編 担当:TAの人.
C言語 はじめに 2016年 吉田研究室.
基礎プログラミング演習 第6回.
基礎プログラミング演習 第3回.
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
Webページに動きを持たせるJavascript言語について 例題のプログラムを通して体験的に理解することとします。
ウェブデザイン演習 第6回.
第14回放送授業.
例題のプログラムを通して JavaScriptの仕組みを理解することとします。
岩村雅一 知能情報工学演習I 第7回(後半第1回) 岩村雅一
オブジェクト指向言語論 第六回 知能情報学部 新田直也.
Presentation transcript:

JavaScript 演習1

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

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

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

URLの復習 <スキーム名>:<スキームにおける固有表現> http:ハイパーテキスト転送プロトコル用スキーム ftp:ファイル転送プロトコル用スキーム mailto: 電子メールアドレス用スキーム file: ホストのファイルシステム用スキーム ... (非公式)javascript: JavaScriptプログラム用スキーム

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

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

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

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

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

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

HTMLのおさらい 12

HTMLの構造 <!DOCTYPE> <HTML>~</HTML> ドキュメントタイプの宣言 <HTML>~</HTML> HTML文書だということの宣言 <HEAD>~</HEAD> 文書のヘッダ情報 <META /> その文書に関するメタ情報 <TITLE>~</TITLE> 文書のタイトル <BODY></BODY> 文書本体 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テストページ</title> </head> <body> </body> </html>

HTMLタグの一例 <h1>~<h6> <p> <br> 見出しをつける <p> 一つの段落を表す <br> 改行 <ul>,<ol> 順序の無し,ありのリスト <li> リストの項目 <a> リンクの開始 <img> 画像の表示 <html> <head> <title>テストページ</title> </head> <body> <h1>見出し1</h1> <h2>見出し2</h2> <p>HelloWorld!</p> Hello<br>World! <ol type="a"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <p><a href="./htmlEx2.html">サンプルその2</a></p> <p><img src="./ex.jpg"></p> </body> </html>

JavaScript

内容 JavaScriptの書き方 document.getElementById関数 alert関数 変数・データ型 演習問題3 演算子 document.write関数 prompt関数 演習問題1 条件分岐 繰り返し parseInt関数とparseFloat関数 演習問題2 document.getElementById関数 演習問題3 レポート

JavaScriptの書き方 HTMLファイル内に書く方法 <script type="text/javascript"> <head>タグ内に以下のように記述 ex1.html <script type="text/javascript"> <!--  ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 ex2.html, ex1.js <script type="text/javascript" src="ファイル名.js"></script>

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

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

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

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

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

document.write関数 document.write(引数)-引数をHTMLとして表示させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>");

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

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

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

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

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

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

演習問題2 “Hello!”という文字列をユーザが入力した数だけ表示するJavaScriptプログラムを作成しなさい

document.getElementById関数 引数で指定した要素オブジェクトを得る document.getElementById(引数).innerHTML 引数で指定した要素オブジェクトのHTMLを得る document.getElementById(引数).style.CSSプロパティ 引数で指定した要素オブジェクトのCSSプロパティを得る CSSプロパティ名は,基本的には「ハイフン(-)」を除去し,ハイフンの後の文字を大文字に変換したものを用いる 参考: http://codepunk.hardwar.org.uk/css2js.htm

オブジェクトのイメージ <body> <h1 id="id1“ style=‘color: red’>Hello, World</h1> </body> <body> <h1 id="id1">Hello</h1> </body> document.getElementById(“id”) H1要素のオブジェクト 属性: 色 (style.color): black HTMLテキスト (innerHTML): Hello document.getElementById(“id”).style.color = ‘red’; document.getElementById(“id”).innerHTML = ‘Hello, World’;

document.getElementById関数 ex14.html JavaScript function test() { var h1Value = document.getElementById("id1").innerHTML; alert(h1Value); document.getElementById("id1").innerHTML = prompt(''); var item1 = document.getElementById("item1").innerHTML; alert(item1); var item2 = document.getElementById("item2").innerHTML; alert(item2); var item1 = document.getElementById("item3").innerHTML; alert(item3); document.getElementById("divid").innerHTML = "テスト"; document.getElementById("divid").style.color = "red"; document.getElementById("divid").style.fontSize = "200%"; document.getElementById("divid").style.backgroundColor = "black"; } HTML onload=‘関数名’ ドキュメントが完全に読み込まれた後に指定した関数を呼び出す <body onload='test()'> <h1 id="id1">document.getElementById関数</h1> <ul> <li id="item1">項目1</li> <li id="item2">項目2</li> <li id="item3">項目3</li> </ul> <div id="divid"></div> </body> divは「division(区画)」の略 他の要素をまとめて,構造化する際に用いられる JavaScriptで操作する対象になる

演習問題3 div要素にid属性を指定し,JavaScriptプログラムによりdiv要素のCSSプロパティを設定し,以下の長方形を表示するプログラムを作成せよ <div style="position:absolute; top:40; left:40; width:150; height:250; background-color:#0000FF; border: thick solid red; visibility: visible;"> </div> ヒント JavaScript HTML function showRect() { document.getElementById(“rect”).style.・・・・ } <body onload=“showRect()”> <div id=“rect”></div> </body>

レポート 演習問題1,2,3を以下のアドレスにメールで提出 ファイル名は以下のようにすること 提出先 提出期限 To:s_tamagawa@ae.keio.ac.jp 提出期限 5月27日(金)13:00まで :次回授業前まで メールの件名: 学籍番号_氏名_JS演習1 ファイル名は以下のようにすること 学籍番号_氏名_JS演習問題1.html 学籍番号_氏名_JS演習問題2.html 学籍番号_氏名_JS演習問題3.html 学籍番号、アンダーバーは必ず半角でお願いします 35

問い合わせ先 第1研究室 24-604 第2研究室 23-620 E-mail: s_tamagawa@ae.keio.ac.jp 気軽にお越しください♪ 優しい山口研メンバーが待ってます。