Microsoft PowerPoint _2b-DOM.pptx

Size: px
Start display at page:

Download "Microsoft PowerPoint _2b-DOM.pptx"

Transcription

1 要素ノードの参照 プロパティで参照可能な親 子 兄弟ノード 要素ノードの他に, テキストノード, ノード, コメントノードなど様々なノードが含まれる ( 処理中に判別が必要 ) 要素ノードのみ参照するプロパティ プロパティ 参照先 parentelement 親要素 firstelementchild 先頭の子要素 lastelementchild 末尾の子要素 nextelementsibng 直後の兄弟要素 previouselementsibng 直前の兄弟要素 23 補足情報 JavaScript による DOM スクリプティング 参照 全要素ノードの訪問 [2_elemenVisit] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" > <title>elementvisit</title> </head> <h1> 全要素ノードの訪問 </h1> <p> 全ての要素ノードを文書順に訪問する </p> <script> var count = 0; elementvisit(document); function elementvisit(node) { count = count + 1; console.log( count + ". " + node.nodename ); for( var child=node.fitstelementchild; child!= null; child = child.nextelementsibng ) { elementvisit( child ); </script> </html> elementvisit ( 関数 ) を実行 直後の兄弟要素に対して elementvisit を順次呼び出す 24

2 < 練習 2-13> DOM ノード参照 (2) 以下の DOM ツリーの HTML ノード (root) から, ノードを訪問せずに, 以下のノードを参照する最小の式を示しなさい (a) h1 要素 (b) title 要素のテキスト内容 root HTML HEAD BODY META TITLE H1 P SCRIPT テキスト テキスト テキスト テキスト 25 DOM ツリー内の要素ノード取得 親 子 兄弟関係を辿って, ルートノードから目的の DOM ノードを参照する方法の問題点 例 : 先頭の子要素から 3 番目の兄弟要素 DOM ツリーが変化すると, 目的ノードの位置が変わる可能性がある ( 正しいノードが参照できない恐れがある ) 条件を満たす要素を直接取得する タグ名による要素リストの取得 document.getelementsbytagname( タグ名 ) id 属性による要素ノード取得 document.getelementbyid( 識別子 ) 26

3 タグ名による要素リストの取得 [3_getElementsByTagName] タグ名に該当する要素ノードの集合を取得 document.getelementsbytagname( タグ名 ) 'Elements' ( 複数形 ) であることに注意 body この例では,4 つの 要素が取得される オブジェクト名. メソッド () h1 ul document.getelementsbytagname('') 取得された 要素のうち 3 番目を選択する (0 から数えるので, item の引数は 2 となる ) document.getelementsbytagname('').item(2) タグ名で要素を取得すると, 該当する要素が複数存在する場合があるので,item メソッドで個別の要素を指定する必要がある 27 getelementsbytagname メソッド : JavaScript コンソールでの実行 <html> <head> </head> <h1>web ブラウザ </h1> <ul> <>Firefox</> <>Opera</> <>Safari</> <>Chrome</> </ul> </html> 28

4 id 属性 ページ内の要素を一意に識別する ページ内の異なる要素の id 属性に対して, 同一の属性値を用いることはできない ( 文法的に誤り ) 例 : <h1>web ブラウザ </h1> <ul> < id= Fi">Firefox</> < id= Op">Opera</> < id= Sa">Safari</> < id= Ch">Chrome</> </ul> id 属性の値によって, 各 要素を一意に区別することができる 29 id 属性による要素ノード取得 [4_getElementById] 識別子 (id 属性の値 ) から要素ノードを取得 document.getelementbyid( 識別子 ) 'Element'( 単数形 ) であることに注意 body document.getelementbyid('sa') h1 ul 指定された id 属性の値を持つ要素を取得する id="fi" id="op" id="sa" id="ch" Firefox Opera Safari Chrome テキストノードは先頭の子ノード (firstchild) document.getelementbyid('sa').firstchild 30

5 getelementbyid メソッド : JavaScript コンソールでの実行 <html> <head> </head> <h1>web ブラウザ </h1> <ul> < id= Fi >Firefox</> < id= Op >Opera</> < id= Sa >Safari</> < id= Ch >Chrome</> </ul> </html> 31 < 練習 2-14> DOM ノードの取得 右の HTML 文書中の該当する要素を, 対応する id 属性の値で答えなさい. ただし, ノードは考えないものとする. (a) 深さ 4 の位置にある要素の親要素 (b) 文書順で走査したとき body 要素の次に訪問される要素 (c) document.getelementsbytagname('title').item(0) によって参照される要素 (d) document.getelementbyid('7').parentnode によって参照される要素 (e) document.getelementbyid('4').firstchild.lastchild によって参照される要素 <html id="0"> <head id="1"> <title id="2">q2-14</title> </head> <body id="3"> <div id="4"> <div id="5"></div> <div id="6"> <div id="7"></div> </div></div> </html> 32

6 フォーム入力データの取得 [5_formInput] 入力 ボタンをクリックすると, 入力フォーム内の文字列がアラートダイアログに出力される <form> <input type="text" id="data" autocomplete="off"> <input type= button value= 入力 " oncck="add()"> </form> <script> </script> 33 getelementbyid で form 要素を取得 [5_formInput] <form> <input type="text" id="data" autocomplete="off"> <input type= button value= 入力 " oncck="add()"> </form> <script> function add() { /* 入力フィールドからデータを取得 */ var data1 = document.getelementbyid('data'); if( data1.value=="" ) { alert( " 文字を入力してください " ); else { alert( " 入力文字 [" + data1.value + "]"); data1.value = ""; </script> 入力 ボタン add 関数の定義 (JavaScript のプログラム ) 34

7 DOM ツリーの変形 DOM ノードの生成 要素ノードの生成 document.createelement( タグ名 ) テキストノードの生成 document.createtextnode( テキスト ) DOMツリーへのノード追加 node.appendchild( 新しいノード ) DOMツリーからのノード削除 node.removechild( ノード ) 35 新たな要素を生成 追加 [6_appendChild] 新たに生成 追加された 要素とテキストノード 36

8 DOM ノードの生成 要素ノードの生成 document.createelement( タグ名 ) テキストノードの生成 document.createtextnode( テキスト ) 生成されたノードは DOM ツリーに追加されなければブラウザに表示されない 例 : リスト項目 () 要素とテキストの生成 <html> <head>... </head> <ul id= st > </ul> </html> <> リスト項目 </> itemnode = document.createelement( " ); (1) (2) リスト項目 テキストノードは, 子ノードとして要素ノードに追加されなければならない textnode = document.createtextnode( リスト項目 " ); 37 DOM ツリーへのノード追加 新しいノードを末尾の子ノードとして追加 node.appendchild( 新しいノード ) 例 : パラグラフ要素とテキストノードの追加 要素を追加する親ノード (ul 要素 ) を取得する body (4) stnode = document.getelementbyid( 'st' ); ul stnode.appendchild( itemnode ); itemnode (5) 要素を ul 要素の子ノードとして追加 textnode リスト項目 (3) itemnode.appendchild( textnode ); テキストノードを 要素の子ノードとして追加 38

9 DOM ノードの生成 追加 [6_appendChild] <input type="button" value=" 追加 " oncck="add()" > <ul id= st ></ul> <script> function add() { var itemnode = document.createelement( '' ); var textnode = document.createtextnode( ' リスト項目 ' ); 追加 ボタンがクリックされたら関数 add を呼出す (1) (2) itemnode.appendchild(textnode); (3) var stnode = document.getelementbyid( 'st' ); (4) stnode.appendchild(itemnode); </script> (5) 39 DOM ツリーからのノード削除 [7_removeChild] node の子ノードから指定されたノードを削除 node.removechild( ノード ) 例 : body 要素から h1 要素を削除する html head body h1 id= tag h1node 見出し h1node.parentnode (2) (3) h1node.parentnode.removechild( h1node ); (1) h1node.parentnode (body 要素 ) の子ノードから h1node を削除する h1node = document.getelementbyid ( 'tag' ); 40

10 DOM ノードの生成 追加 削除 [8_createBox] html 追加 ボタンを 3 回クリック head body title input input p id="box" script ボックス追加 ボックス削除 ボタンに対応する input 要素 div (1) 追加 div (2) 追加 div (3) 追加 (4) 削除 削除 ボタンを 1 回クリック 41 ボックス (div 要素 ) の削除 [8_createBox] input input body p id="box" script p 要素の子ノードである複数の div 要素のうち, 末尾の div 要素を削除する targetnode div div div id="box" である要素の末尾の子ノードを取得 var targetnode = document.getelementbyid("box").lastchild; if( targetnode!= null ) { targetnode.parentnode.removechild(targetnode); else { alert( " ボックスがありません " ); 取得した div 要素 (targetnode) を親ノードから削除 42

Microsoft PowerPoint - 2016_2b-DOM.pptx

Microsoft PowerPoint - 2016_2b-DOM.pptx < 練 習 2-11> DOMの 空 白 ノード 2_nodeVisit の 実 行 結 果 ( 前 ページ)から,HTML をルート 要 素 とするDOMの 木 構 造 を 示 しなさい ただし, 空 白 ノードは 空 白,その 他 のテキストノードは テキスト とすること HTML DOMによる 文 書 データの 参 照 と 変 更 DOMツリー 内 のノード 参 照 相 対 位 置 によるノード

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

Microsoft Word - no06.doc

Microsoft Word - no06.doc 2. オブジェクト ( もう一度 ) 値をいくつかまとめたものを C 言語では構造体と呼んでいました 構造体は複数の値を含んだものでした これに対して JavaScript では オブジェクト (Object) という物を使います オブジェクトは 値 ( プロパティ ) と動作 ( メソッド ) を持ちます これはオブジェクト指向プログラミングと言われるもの特徴です オブジェクトにアクセスすることでプロパティの変更や動作を実行できます

More information

医療者のための情報技術入門第 9 回プログラムがはたらくしくみを学ぶ (2) 日紫喜光良 概要 1. はじめに- 具体例から ここから Javascript のプログラミング入門 次はどうする--

医療者のための情報技術入門第 9 回プログラムがはたらくしくみを学ぶ (2) 日紫喜光良 概要 1. はじめに- 具体例から ここから Javascript のプログラミング入門 次はどうする-- 2014.6.23 医療者のための情報技術入門第 9 回プログラムがはたらくしくみを学ぶ (2) 日紫喜光良 概要 1. はじめに- 具体例から- ------------- ここから------------ 2.Javascript のプログラミング入門 ------------ 次はどうする-------- 3. 足りないものは借りてくる-Javascript のライブラリ 4. 仕事は人にやらせる-サーバーとブラウザの役割分担

More information

コンテンツメディアプログラミング実習2

コンテンツメディアプログラミング実習2 CMP 実習 2 JavaScript + 地図を使ってみよう 中村, 宮下, 斉藤, 菊池 1 必要な知識 JavaScript の基本 HTMLのどの部品なのかを指定する方法 その部品にイベントを埋め込む方法 それを JavaScript で記述する方法 2 要素をどうやって取得する? DOM とは Document Object Model HTML や XML の各要素についてアプリケーションから利用するための

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 情報システム基礎演習 B 2016/01/28 (Thurs.) テーマ 4 JavaScript による電卓 Web アプリを作成しましょう 健山智子 (t.tateyama.es@cc.it-hiroshima.ac.jp) 広島工業大学情報学部知的情報システム学科知的情報可視化戦略研究室 (ival) 講義のアウトライン 2 1. グループの決定 : 1. 5 人での 6 グループ ( ランダム

More information

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 8 回 JavaScript 入門 萩野達也 (hagino@sfc.keio.ac.jp) 1 Web ページの構成要素 直交技術を組み合わせる 内容 スタイル ( 表現方法 ) プログラミング スタイル プログラミング JavaScript CSS Web ページ Web 文書

More information

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111207 演習

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行

More information

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 特別編 いいね ボタンの実装 いいね ボタン ( 英語では Like) Facebook で, 他の人のコンテンツ ( コメント 写真など ) の支持を表明するためのボタン クリックすると, 自分の Facebook のタイムラインに支持したことが記録される ( コメントを同時投稿することも可能 ) 友達のニュースフィードに表示 コンテンツ毎にクリックしたユーザ数がカウントされる

More information

WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39

WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39 WebGL DOM API 2014.05.27 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.05.27 1 / 39 WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 2 / 39 WebGL WebGL Kageyama (Kobe Univ.) Visualization

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習

More information

XMLプログラミング(DOM編)

XMLプログラミング(DOM編) XML プログラミング DOM に依る XML 文書の操作 DOM と DOMDocument オブジェクト プログラミング言語から XML を扱うには DOM(Document Object Model) と呼ばれるプログラミングインターフェイスを利用するのが最も簡単で有る DOM は Internet Explorer 5.x 以降の XML パーサ (MSXML) に実装されて居る DOMDocument

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

6/ Kageyama (Kobe Univ.) / 39

6/ Kageyama (Kobe Univ.) / 39 DOM API 2015 2015.06.02 Kageyama (Kobe Univ.) 2015.06.02 1 / 39 6/9 1 6 9 2 Kageyama (Kobe Univ.) 2015.06.02 2 / 39 WebGL WebGL Kageyama (Kobe Univ.) 2015.06.02 3 / 39 WebGL canvas.getcontext() WebGLRenderingContext

More information

前ページからの続き // テキストボックス02 id 属性で取得 // id 属性で取得する場合は一意に決まるので 何番目かの指定は不要 var textbox02elem = document.getelementbyid("text_box02_id"); if ("001" == statee

前ページからの続き // テキストボックス02 id 属性で取得 // id 属性で取得する場合は一意に決まるので 何番目かの指定は不要 var textbox02elem = document.getelementbyid(text_box02_id); if (001 == statee 全体のヒント 1. テキストボックスの制御 1.1. 日付入力日付の入力ボックスは フォーカスが入った時にスラッショを消し フォーカスが他の項目等に移るとスラッシュが加わるようにする オンフォーカス 20100101 オフフォーカス 2010/01/01 1.1.1 オンフォーカス時にスラッシュを消す入力項目のスラッシュを消すには include/function.js ファイル内の var delslash

More information

JC/400でポップアップウィンドウの制御&活用ノウハウ!

JC/400でポップアップウィンドウの制御&活用ノウハウ! 清水孝将 / 伊地知聖貴 株式会社ミガロ. システム事業部システム 1 課 JC/400 でポップアップウィンドウの制御 & 活用ノウハウ! JC/400 の標準機能と JavaScript の 2 つのアプローチにより ポップアップの開発手法 活用例を紹介する Web 開発におけるポップアップウィンドウの活用 JC/400 標準機能による実現 JavaScript による実現 JavaScript

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

More information

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37 WebGL *1 DOM API 2013.05.21 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.21 1 / 37 WebGL WebGL DOM References Kageyama (Kobe Univ.) Visualization 2013.05.21 2 / 37 WebGL WebGL Kageyama

More information

第 8 回の内容 クライアントサイド処理 JavaScript の基礎

第 8 回の内容 クライアントサイド処理 JavaScript の基礎 第 8 回の内容 クライアントサイド処理 JavaScript の基礎 クライアントサイド処理 クライアントサイド / サーバサイド クライアントサイド サーバサイド Web ブラウザ Web サーバ 動的な Web ページ Web ブラウザ Web サーバ Web ブラウザ Web サーバ リソース生成 描画 描画 リソース生成 再描画 描画 再描画 描画 リソース生成 再描画 動的な Web ページとページ遷移

More information

E4X in Firefox nanto_vi (TOYAMA Nao)

E4X in Firefox nanto_vi (TOYAMA Nao) E4X in Firefox nanto_vi (TOYAMA Nao) 自己紹介 外山真 ( とやまなお ) a.k.a. nanto_vi ( なんと ) http://www.ne.jp/asahi/nanto/moon/ http://nanto.asablo.jp/blog/ 肩書き : 学生 Not in Education, Employment or Training E4X とは?

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

More information

■新聞記事

■新聞記事 情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5 Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 9 回 JavaScript 入門 (2) 萩野達也 (hagino@sfc.keio.ac.jp) 1 JavaScript 入門 ( 前回 ) オブジェクト指向について JavaScriptの誕生プロトタイプベースのオブジェクト指向 言語 構文および制御構造 代入条件文繰り返し関数

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

教材ドットコムオリジナル教材

教材ドットコムオリジナル教材 5. 関数を駆使していろいろなFORMを攻略しちゃおう メソッド button checkbox radio select text textarea ボタン チェックボックス ラジオボタン セレクト テキスト テキストエリア blur blur blur blur blur blur click click click focus focus focus focus focus focus select

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç JavaScript 2009 5 28 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

untitled

untitled Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML

More information

intra-mart Accel Platform — 招待機能プログラミングガイド   初版  

intra-mart Accel Platform — 招待機能プログラミングガイド   初版   Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. はじめに 3. 権限リストを拡張する 2 改訂情報 変更年月日 変更内容 2016-04-01 初版 3 はじめに 項目 このガイドについて このガイドについて このガイドでは 招待機能の拡張方法および注意点について解説します 4 権限リストを拡張する 項目 この機能について実装済みの招待権限デコレータ実装方法設定方法

More information

Microsoft Word - no04.doc

Microsoft Word - no04.doc 3.2 HTML 文書関連のオブジェクト HTML 文書を表すオブジェクトは次のような関係になります これらのオブジェクトのモデルを DOM(Document Object Model) といいます document 以下のオブジェクトは W3C で規定された DOM1 の HTMDocument を実装したものです window ブラウザのウインドウ管理 location 現在表示されている URL

More information

2017年COM実験_JavaScript演習資料

2017年COM実験_JavaScript演習資料 第 4 回 COM 実験 JavaScript 演習 2017 年 6 月 15 日 ( 木 ) 山口高平 はじめに 開発環境の準備 JavaScriptの復習 演習問題の概要 演習問題 1 演習問題 2 演習問題 3 演習問題 4 演習問題 5 レポート課題の説明 目次 はじめに 演習を通じて HTML と JavaScript の理解を深めてもらいます HTML, CSS, JavaScript

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

1

1 1 2 3 4 確認しよう 今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し 次の URL にアクセスします http://localhost/example1.html 3. 自分の手を選択して じゃんけんぽん

More information

Taro-リストⅢ(公開版).jtd

Taro-リストⅢ(公開版).jtd リスト Ⅲ 0. 目次 2. 基本的な操作 2. 1 リストから要素の削除 2. 2 リストの複写 2. 3 リストの連結 2. 4 問題 問題 1 問題 2-1 - 2. 基本的な操作 2. 1 リストから要素の削除 まず 一般的な処理を書き つぎに 特別な処理を書く 一般的な処理は 処理 1 : リスト中に 削除するデータを見つけ 削除する場合への対応 特別な処理は 処理 2 : 先頭のデータを削除する場合への対応

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border="1" style="border-collapse:co

第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border=1 style=border-collapse:co 付録 第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 情報整理のための Google Map API 入門 日紫喜光良 プロジェクト I/II 2016.9.23 1 今日の目標 Google Map API を用いて Google Map の地図上にマーカーを表示する HTML Web ページの構造を宣言する 地図を表示する場所を宣言する Javascript プログラミング Web ページの地図表示箇所上に 地図を描く マーカーオブジェクトを生成して

More information

Microsoft PowerPoint - 04WWWとHTML.pptx

Microsoft PowerPoint - 04WWWとHTML.pptx 船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet

More information

アンケートフォーム簡易作成機能マニュアル

アンケートフォーム簡易作成機能マニュアル HeartCore アンケートフォーム簡易作成機能マニュアル October 2013 Ver1.1-1 - 改訂履歴 改訂日 改訂内容 Ver1.0 2013 年 07 月 マニュアル改訂 Ver1.1 2013 年 10 月 行間の修正 不要外枠の削除 対象ライセンス項目の追加 - 2 - 目次 1. 本文書の目的と対象ライセンス... - 4-1.1. 目的...- 4-1.2. 対象ライセンス...-

More information

Taro-リストⅠ(公開版).jtd

Taro-リストⅠ(公開版).jtd 0. 目次 1. 再帰的なデータ構造によるリストの表現 1. 1 リストの作成と表示 1. 1. 1 リストの先頭に追加する方法 1. 1. 2 リストの末尾に追加する方法 1. 1. 3 昇順を保存してリストに追加する方法 1. 2 問題 問題 1 問題 2-1 - 1. 再帰的なデータ構造によるリストの表現 リストは データの一部に次のデータの記憶場所を示す情報 ( ポインタという ) を持つ構造をいう

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

Microsoft PowerPoint _1b-HTML.pptx

Microsoft PowerPoint _1b-HTML.pptx HTML5 の XML 構文 (1) 整形式文書として記述する XML 文書として曖昧さのない記述にする (2) 名前空間宣言を入れる XML としての拡張性は名前空間によって実現される (3) XML 宣言を入れる XML 宣言は文字コードの判別に用いられる 14 (1) 整形式文書として記述する (a) 正しい木構造で記述する (b) 終了タグを省略しない (c) タグの大文字 小文字を区別する

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

More information

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHP のファイルは UTF-8 BOM なしで保存し www.cyaneum.org の public_html に置く! テーマ研究会 (05/10) Google Maps を使う 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg11@cuc.ac.jp 資料 http://www.cuc.ac.jp/rg11/ 前回の課題 (1)+α +α 単に

More information

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 STEP9 Ajax を利用した RSS フィードのタイムライン表示 Ajax Asynchronous JavaScript + XML クライアントサイド ( ブラウザ内 ) で非同期サーバ通信と動的ページ生成を組み合わせる技術の総称 ウェブアプリケーションの操作性向上 ( ページ遷移を伴わない ) サーバとの小刻みな通信 = 必要なデータを必要な時に要求 ( リクエスト

More information

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで 19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで Kivy というソフトウェアを使う Kivy は Python のパッケージ管理システム pip を使ってインターネット上のファイルサーバからインストールが可能である

More information

スライド タイトルなし

スライド タイトルなし 御中 ドキュメント種 : お得意様名 : システム名 : デモ説明資料資料 EditionFlex DEMO 第一版平成 22 年 11 月第二版平成 22 年 12 月 11 日 15 日 Page - 1 1 DEMO1 Edition Flex エディター ( 編集画面 ) の呼出 DEMO1 では RESOLOGIC の Web サーバー上のデモメニューから まったく別のクラウド上にある Flex

More information

Microsoft PowerPoint - widget.ppt

Microsoft PowerPoint - widget.ppt WordPress 2.8 用の ウィジェットの開発 藤本壱 1 今日のアジェンダ 自己紹介新しいウィジェット API の概要作成するウィジェット ( ステータス表示 ) クラスとコンストラクタの定義 form メソッド update メソッド widget メソッドウィジェットの登録まとめ 2 自己紹介 3 自己紹介 藤本壱 ( ふじもとはじめ ) フリーライター パソコン関係 ここ数年は Movable

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

More information

NetworkApplication-09

NetworkApplication-09 ネットワークアプリケーション 第 9 回 JavaScript によるクライアントサイドウェブプログラミング 石井健太郎 (423 研究室 オフィスアワー火 3 限 ) スケジュール 9 月 27 日第 1 回 TCP/IPプロトコルスイート 10 月 4 日第 2 回 Javaによるウィンドウプログラミング 10 月 11 日第 3 回 ネットワークアプリケーションのプログラミングモデル 10 月

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) CMP 実習 2 DB+PHP+XML/JSON+JavaScript 中村, 宮下, 斉藤, 菊池 1 PHP と JavaScript 連携 サーバとクライアントをどうやって繋げるか? PHP と JavaScript 間の情報のやりとりを行う JavaScript JSON/XML PHP DB 簡易的な Web API を作ろう! PHP に GET で情報を送り込むことで XML または

More information

Microsoft PowerPoint - kyoin17-naka.pptx

Microsoft PowerPoint - kyoin17-naka.pptx ホームページ作成技術の基礎と応用 動的ホームページの作成 九州産業大学 情報科学部情報科学科 仲 隆 今日の講習会用ページ http://www.is.kyusan-u.ac.jp/~naka/kyoin/ 演習で作成するプログラムは全て掲載している クリックすれば動く ソースを表示すればプログラムを確認できる 画像を 2 枚使うので好きなのを 2 枚デスクトップに保存する サンプルでは "chibi.png"

More information

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 式として評価する文字列 戻り値 :

More information

数のディジタル化

数のディジタル化 第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 4 節コミュニケーションとネットワークの活用 3 コミュニケーションツールの活用 第 3 章 4 節コミュニケーションとネットワークの活用 コミュニケーションツールの活用 本日の内容 第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用

More information

allows attackers to steal the username-password pair saved in the password manager if the login page or other pages in the same domain are vulnerable

allows attackers to steal the username-password pair saved in the password manager if the login page or other pages in the same domain are vulnerable Computer Security Symposium 2015 21-23 October 2015 Google Chrome のパスワードマネージャの脆弱性 市原隆行 寺本健悟 齊藤泰一 東京電機大学 120-8551 東京都足立区千住旭町 5 cludzerothree@gmail.com 東京電機大学大学院 120-8551 東京都足立区千住旭町 5 15kmc11@ms.dendai.ac.jp

More information

ななちゃんの IT 教室 メニューを極めようの巻 by ななちゃんが メニューの使い方をマスターするというお話 第 0.1 版 2017 年 6 月 23 日 フリー素材 いらすとやフリー素材 h

ななちゃんの IT 教室 メニューを極めようの巻 by ななちゃんが メニューの使い方をマスターするというお話 第 0.1 版 2017 年 6 月 23 日 フリー素材   いらすとやフリー素材 h ななちゃんの IT 教室 メニューを極めようの巻 by nara.yasuhiro@gmail.com ななちゃんが メニューの使い方をマスターするというお話 第 0.1 版 2017 年 6 月 23 日 フリー素材 http://freeillustration.net いらすとやフリー素材 http://www.irasutoya.com/ もくじ第 1 回秘密道具 : マイ コンソール2 第

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

NetworkApplication-11

NetworkApplication-11 ネットワークアプリケーション 第 11 回 JavaScript によるクライアントサイドウェブプログラミング 石井健太郎 (423 研究室 オフィスアワー火 3 限 ) スケジュール 9 月 27 日第 1 回 TCP/IPプロトコルスイート 10 月 4 日第 2 回 Javaによるウィンドウプログラミング 10 月 11 日第 3 回 ネットワークアプリケーションのプログラミングモデル 10

More information

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div 1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color

More information

Calendar Plus JavaScript API リファレンス ラジカルブリッジ Ver

Calendar Plus JavaScript API リファレンス ラジカルブリッジ Ver Calendar Plus JavaScript API リファレンス ラジカルブリッジ Ver.20190408 目次 イベント処理の記述方法... 2 イベント処理の概要... 2 イベントハンドラーを登録する... 3 特定のイベントタイプ内の特定のイベントハンドラーを削除する... 5 特定のイベントタイプ内のすべてのイベントハンドラーを削除する... 6 すべてのイベントハンドラーを削除する...

More information

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い 10 ( SVG 10 ( Ajax Ajax I(SVG) 2017/6/27 10 ( Ajax 10 ( Ajax 100 10 HTML 1 2 3 4 5 6

More information

第5回 マインクラフト・プログラミング入門

第5回 マインクラフト・プログラミング入門 マインクラフト プログラミング応用 第 2 回はじめてのプラグイン はじめての JavaScript はじめてのプラグイン 2018.01.22 鎌倉シチズンネット (KCN) 2017-2017 Kamakura Citizens Net All rights reserved 1 はじめての JavaScript(0) JavaScript とは JavaScript はスクリプト言語と呼ばれるプログラミング言語の一種で

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

メディプロ1 Javaサーブレット補足資料.ppt

メディプロ1 Javaサーブレット補足資料.ppt メディアプロジェクト演習 1 Java サーブレット補足資料 CGI の基本 CGI と Java サーブレットの違い Java サーブレットの基本 インタラクティブな Web サイトとは Interactive q 対話 または 双方向 q クライアントとシステムが画面を通して対話を行う形式で操作を行っていく仕組み 利用用途 Web サイト, シミュレーションシステム, ゲームなど WWW = インタラクティブなメディア

More information

Microsoft PowerPoint _1a-HTML.pptx

Microsoft PowerPoint _1a-HTML.pptx HTML 5 の設計思想 誰もが自由に使い続けることができるオープンな Web 特定企業が定めた仕様 (API) や技術 ( プラグイン ) に頼らない 例 : アドビの Flash, マイクロソフトの Silverlight HTML5 に追加された新しい要素 ( タグ ) video, audio 要素 ( 動画や音声を再生する ) canvas 要素 ( ビットマップグラフィックスの表示 )

More information

2003年度 情報処理概論

2003年度 情報処理概論 提出課題 課題 1( 提出課題 ): 利用者の情報を入力し 登録 ボタンを押すと, 入力されたデータで利用者 (user) テーブルにレコードを新規登録する Web ページを作りましょう. 手順 1:HTML のファイル ( 利用者情報の入力 Web ページ ) を input_regist_user.html という名前で作業フォルダに作成する. 手順 2:DB に登録処理を行う PHP プログラムのファイルを

More information

医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ここから 足りないものは借りてくる-Javascrip

医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ここから 足りないものは借りてくる-Javascrip 2014.6.30 医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ------------ ここから-------- 3. 足りないものは借りてくる-Javascript のライブラリ ( 現在地の住所を調べる ) 4. 仕事は人にやらせる-サーバとブラウザの役割分担

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

paper.pdf

paper.pdf Cop: Web 1,a) 1,b) GUI, UI,,., GUI, Java Swing., Web HTML CSS,. CSS,, CSS,.,, HTML CSS Cop. Cop, JavaScript,,. Cop, Web,. Web, HTML, CSS, JavaScript, 1., GUI, Web., HTML CSS (UI), JavaScript, Web GUI.

More information

スマートデバイスWebアプリケーション入門―HTMLを使ったユーザーインタフェースの工夫

スマートデバイスWebアプリケーション入門―HTMLを使ったユーザーインタフェースの工夫 尾崎浩司 / 國元祐二 株式会社ミガロ. RAD 事業部営業 営業推進課 / RAD 事業部技術支援課 [SmartPad4i] スマートデバイス Web アプリケーション入門 HTML を使ったユーザーインタフェースの工夫 はじめに JC/400 SmartPad4i における画面作成の基本 HTML5 を利用した画面項目の工夫 HTML5 を利用した画面表示の設定 HTML5 を活用したグラフの実現

More information

d_appendixB-asp10appdev.indd

d_appendixB-asp10appdev.indd 付録 B jquery Visual Studio 00 ASP.NET jquery ASP.NET MVC Scripts jquery jquery-...js jquery jquery とは jquery JavaScript JavaScript jquery Ajax HTML 図 B- jqurey とブラウザの関係 Visual Studio 00 jquery JavaScript

More information

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/ 1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので

More information

Microsoft Word - no03.doc

Microsoft Word - no03.doc 3 文書 HTML 文書そのものもオブジェクトとして扱います 今まで使ってきましたが document.write( ) も document オブジェクトのメソッドです HTML 文書を表すオブジェクトは次のような関係になり ます これらのオブジェクトのモデルを DOM(Document Object Model) といいます Window ブラウザのウインドウ管理 location 現在表示されている

More information

はじめに HTML5 の登場 Web 上で可能な表現や操作の増加 開発まわりも大きく変化 2

はじめに HTML5 の登場 Web 上で可能な表現や操作の増加 開発まわりも大きく変化 2 Web Components 開発におけるドキュメント同時生成手法の提案 1 はじめに HTML5 の登場 Web 上で可能な表現や操作の増加 開発まわりも大きく変化 2 はじめに ソフトウェア開発手法の輸入 データバインディング MVVM(Model/View/ViewModel) モデル タスクランナー Grunt/Gulp.js ECMAScript2015 etc 3 Web Components

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ST&E API 導入手順書 ver1.0.1 Save Time & Effort! -1- - 目次 - P3 前提 P4 Step1 P5 Step2 P6 Step3 P7. P8 導入の前提条件導入対象のHTMLにリンクを設定導入対象のHTMLにhidden 項目を設定 Step1で命名したjsファイルとその中身を作成アップロードお問い合わせ -2- 前提条件 1. ST&E APIのお申込みがしていること

More information

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

スライド 1

スライド 1 Sencha Touch 入門 2011/11 伊藤雄大 ( 株 ) コア北海道カンパニー ビジネスソリューション部 IT ビジネスチーム アジェンダ 1. 会社紹介 自己紹介 2. なぜWebUI? 3. Sencha Touch ってどんな感じ? 4. Sencha Touch デモ 5. どうやって実装するの?- 基礎編 6. どうやって実装するの?- 応用編 7. 今回の開発で困ったこと 会社紹介

More information

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 9 回 JavaScript 入門 (2) 萩野達也 (hagino@sfc.keio.ac.jp) 1 JavaScript 入門 ( 前回 ) オブジェクト指向について JavaScriptの誕生プロトタイプベースのオブジェクト指向 言語 構文および制御構造 代入条件文繰り返し関数

More information

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) 明治大学総合数理学部先端メディアサイエンス学科中村聡史研究室 CMP 実習 2 JavaScript の基本 中村 宮下 斉藤 菊池 1 明治大学総合数理学部先端メディアサイエンス学科中村聡史研究室 Web でユーザの操作を取得 テキスト入力していないのに送信ボタンを押さないで! ユーザが入力する前には入力例を示しておいて, 入力開始しようとしたら消したい! リアルタイムに値を取得して表示したい!

More information

情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは イン

情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは イン 情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは インターネットなで 無料で提供されているソフトウェアのこと フリ ーソフト とも言う パソコンの学習や活用に大いに役立つ

More information

ウェブサイト内検索機能マニュアル

ウェブサイト内検索機能マニュアル HeartCore ウェブサイト内検索機能マニュアル October2013 Ver1.1-1 - 改訂履歴 改訂日 改訂内容 Ver1.0 2013 年 07 月 マニュアル改訂 Ver1.1 2013 年 10 月 フォーマット改訂 - 2 - 目次 1. 本文書の目的と対象ライセンス... - 4-1.1 目的...- 4-1.2 対象ライセンス...- 4-2. 機能概要... - 4-2.1

More information

_IMv2.key

_IMv2.key 飯島基 文 customb2b@me.com $ ssh ladmin@im.example.com $ cd /Library/Server/Web/Data/Sites/Default/ $ git clone https://github.com/msyk/inter-mediator.git

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認 受講管理システム AMUSE を使って 本日の出席登録をせよ 学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information