webを飾る技術

2,495 views

Published on

HTML ,CSS ,XML ,XSLT,JavaScript
Japanese Only

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,495
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

webを飾る技術

  1. 1. Webを飾る技術 第 6 回 変 ゼミ 2008/07/23 id:inajob http://d.hatena.ne.jp/inajob/
  2. 2. 何? <ul><li>最近Webアプリが熱い! </li></ul><ul><ul><li>GoogleMaps </li></ul></ul><ul><ul><li>karuki </li></ul></ul><ul><ul><li>Etc... </li></ul></ul><ul><li>具体的に何をどうやって作っているのか? </li></ul>
  3. 3. 要素技術 <ul><li>HTML(XHTML) </li></ul><ul><li>CSS </li></ul><ul><li>XML </li></ul><ul><li>XSLT </li></ul><ul><li>JavaScript </li></ul><ul><li>(Flash) </li></ul><ul><li>(Java) </li></ul><ul><li>( サーバサイドの技術 ) </li></ul>
  4. 4. HTML <ul><li>J科は授業でやる? </li></ul><ul><li>HyperTextMarkupLanguage </li></ul><ul><li>タグで文章を装飾する </li></ul><ul><ul><li><なんとか>~</なんとか> という形式 </li></ul></ul><ul><li>「見た目」ではなく「意味」を付加するのが本来の目的 </li></ul><ul><ul><li>意味に対する見た目はブラウザに依存する </li></ul></ul><ul><ul><li>TeXもそんな感じ </li></ul></ul><HTML>
  5. 5. HTMLを書いてみる <html> <head> <title>TestPage</title> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr />   <!-- 水平線 これはコメント --> </body> </html> <HTML>
  6. 6. もっとHTML <a href=” http://www.google.co.jp ”>go to Google</a> <table> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>foo</td> <td>bar</td> <td>hoge</td> </tr> </table> <ul> <li>apple</li> <li>peach</li> <li>orange</li> </ul>
  7. 7. CSS (Cascading Style Sheets) <ul><li>HTML </li></ul><ul><ul><li>「見た目」ではなく「意味」を付加するのが本来の目的 ⇒見た目は CSS で記述 </li></ul></ul><ul><li>各タグの見た目を定義する </li></ul><ul><ul><li>色 </li></ul></ul><ul><ul><li>大きさ </li></ul></ul><ul><ul><li>背景 </li></ul></ul><ul><ul><li>枠 </li></ul></ul><ul><ul><li>etc... </li></ul></ul>{CSS}
  8. 8. CSSを書いてみる <html> <head> <title>TestPage</title> <style> h1{ color:red; } p{ border:solid; background-color:#ffffdd; } </style> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr />   <!-- 水平線 これはコメント --> </body> </html> {CSS}
  9. 9. {CSS} CSSを書いてみる2 <html> <head> <title>TestPage</title> <style> h1{ text-align:center; border:solid #ddaaaa; border-width:1px 1em 1px 1em; } p{ font-size:1.5em; padding:1em; background-color:#ddddff; } </style> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr>   <!-- 水平線 これはコメント --> </body> </html> 同じページでも 見た目が全然違う
  10. 10. CSSとclassとidと文脈 <ul><li>タグ以外でCSSを適応する範囲を指定したい </li></ul><ul><ul><li>class </li></ul></ul><ul><ul><ul><li>複数存在可 </li></ul></ul></ul><ul><ul><li>id </li></ul></ul><ul><ul><ul><li>唯一のもの </li></ul></ul></ul><ul><ul><li>文脈 </li></ul></ul><ul><ul><ul><li>(例) div(class==main)の中のpは赤色 </li></ul></ul></ul>
  11. 11. {CSS} CSSを書いてみる3 h1{ text-align:center; border:solid #ddaaaa; border-width:1px 1em 1px 1em; } div. main p{ color:red; } div# footer { text-align:right; font-size:x-small; } ============================== <h1>HTML を書いてみる </h1> <div class=” main ”> <p> ここに本文が書いてあったりする </p> </div> <div id=” footer ”> <p>powered by CSS</p> </div>
  12. 12. XML <ul><li>Extensible Markup Language </li></ul><ul><li>個別の目的に応じたマークアップ言語群を創るために汎用的に使うことができる仕様である (Wikipedia) </li></ul><ul><li>気分としては </li></ul><ul><ul><li>HTMLのような書き方でもっといろんなものを記述する </li></ul></ul><XML>
  13. 13. XMLを書いてみる <ul><li>意味と一緒にデータを記述する </li></ul><ul><ul><li>ぱっと見でなんとなく意味がわかる </li></ul></ul><ul><ul><li>オープンな仕様 </li></ul></ul><ul><ul><ul><li>既存ライブラリで処理できる </li></ul></ul></ul><ul><ul><ul><li>標準定義をincludeできる </li></ul></ul></ul><DataSet> <Software> <title>eclipse</title> <language>java</language> </Software> <Software> <title>linux</title> <language>C</language> </Software> <Software> <title>apt</title> <language>perl</language> </Software> <DataSet> eclipse,java linux,C apt,perl
  14. 14. XSLT(XSL Transformations) <ul><li>W3Cにより標準化されたXML文書の変換用言語 </li></ul><ul><li>XMLを変換する方法を定義するXML文書 </li></ul><ul><li>Webブラウザで処理できる </li></ul><XML>
  15. 15. <XML> XSLTを書いてみる1 <DataSet> <Software> <title>eclipse</title> <language>java</language> </Software> <Software> <title>linux</title> <language>C</language> </Software> <Software> <title>apt</title> <language>perl</language> </Software> </DataSet> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <xsl:stylesheet version=&quot;1.0&quot; xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; > <xsl:output method=&quot;html&quot; doctype-public=&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; doctype-system=&quot;http://www.w3.org/TR/html4/loose.dtd&quot; /> <xsl:template match=&quot;/DataSet&quot;> <html> <head> <title>test page</title> </head> <body> <xsl:for-each select=&quot;./Software&quot;> <h1> <xsl:value-of select=&quot;title&quot; /> </h1> <p> <xsl:value-of select=&quot;language&quot; /> </p> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
  16. 16. XSLTを書いてみる2 <DataSet> <Software> <title>eclipse</title> <language>java</language> </Software> <Software> <title>linux</title> <language>C</language> </Software> <Software> <title>apt</title> <language>perl</language> </Software> </DataSet> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <xsl:stylesheet version=&quot;1.0&quot; xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; > <xsl:output method=&quot;text&quot; encoding=&quot;Shift_JIS&quot; /> <xsl:template match=&quot;/DataSet&quot;> Sample Input <xsl:for-each select=&quot;./Software&quot;> <xsl:value-of select=&quot;title&quot; />,<xsl:value-of select=&quot;language&quot; /><xsl:text> </xsl:text> </xsl:for-each> </xsl:template> </xsl:stylesheet>
  17. 17. JavaScript <ul><li>本日の本題 </li></ul><ul><li>HTML文書に「動き」を与える </li></ul><ul><ul><li>ブラウザ上で動作する 唯一 の言語 </li></ul></ul><ul><li>見た目はJavaと似ていて名前にも含まれるが まったく別の言語 です </li></ul><ul><li>キモいらしい </li></ul><ul><li>オブジェクト指向っぽくもかけるらしい </li></ul><ul><li>FlashとかJava </li></ul><ul><ul><li>プラグインが必要,単純な処理でもそれなりにメモリを食う </li></ul></ul>
  18. 18. JavaScriptを書いてみる <html> <head> <title>TestPage</title> </head> <body> <script> for(i=0;i<10;i++){ document.write(“<h1>”+i+”:Hello World</h1>”); } </script> </body> </html> for 文とか使えます document.write( ほげほげ )  は  document クラスの write メソッド的なものを文字列を引数にして呼び出している
  19. 19. JavaScriptを書いてみる2 <html> <head> <title>TestPage</title> <script> function sum(n){ x=0; for(i=1;i<=n;i++){ x+=i; } return x; } </script> </head> <body> <script> document.write(sum(10)); </script> </body> </html> <ul><li>関数を定義することができる </li></ul><ul><li>関数は普通ヘッダに定義する </li></ul>
  20. 20. JavaScriptを書いてみる3 <ul><li>実はブラウザのアドレスバーでも実行できる </li></ul><ul><ul><li>javascript:(alert(1+2+3+4)) </li></ul></ul><ul><li>もっとがんばったものがブックマークレット </li></ul><ul><ul><li>雨を降らせてみる </li></ul></ul>
  21. 21. イベントハンドラ1 <html> <head> <title>TestPage</title> </head> <body> <input type=”button” onclick=” alert('Hello World') ”> </body> </html> <ul><li>“ でも ' でも文字列をあらわす </li></ul><ul><li>“ 中の文字列は ' で表すことができる。 </li></ul><ul><ul><li> もでも OK  ⇒ ”Hello World” </li></ul></ul>
  22. 22. イベントハンドラ2 <html> <head> <title>TestPage</title> <script> function over(obj){ obj.style.backgroundColor=0xFF0000; } function out(obj){ obj.style.backgroundColor=0xFFFFFF; } </script> </head> <body> Point <span onmouseover=&quot;over(this)&quot; onmouseout=&quot;out(this)&quot; >Here</span>! </body> </html> マウスが乗っかると色が変わる ⇒ CSS にアクセスできる
  23. 23. タイマー <ul><li>イベントの一種としてタイマーがある </li></ul><html> <head> <title>TestPage</title> <script> var count=0; function countUp(){ count++; document.getElementById(“counter”).innerHTML=count; } function init(){ setInterval(“countUp()”,1000); } </script> </head> <body onload=”init()” > <h1>Timer Test</h1> <p> 滞在時間 <span id=”counter” ></span></p> </body> </html>
  24. 24. JavaScriptとスレッド <ul><li>JavaScriptはシングルスレッドで動作 </li></ul><ul><ul><li>ある関数が実行中はほかの処理は割り込めない </li></ul></ul>for(var i=0;i<10;i++){ alert(“Hay!”); sleep(1000); } function hoge(){ alert(“Hay!”); } setInterval(“hoge()”,1000); for(var i=0;i<10;i++){ alert(“Hay!”); for(var j=0;j<10000;j++); }
  25. 25. Ajax (Asynchronous JavaScript + XML) <ul><li>JavaScriptはシングルスレッドで動作 </li></ul><ul><ul><li>動的にデータを取りに行く時に固まってほしくない </li></ul></ul>function getContents(){ 通信をしてデータを取ってくる //   <= ここでブラウザが固まる とってきたデータを加工 データを表示 } function getContents(){ 通信をしてデータをとりに行け 終わったら completeReq を呼び出せ }    // 即座に関数から抜ける function completeReq(req){ data=req.responseText(); //data に読み込んだデータが入る 煮るなり焼くなり }
  26. 26. JavaScriptの型 <ul><li>数字   --小数も同じ扱い </li></ul><ul><li>文字列 </li></ul><ul><li>オブジェクト(連想配列的なもの) </li></ul><ul><ul><li>配列 </li></ul></ul><ul><ul><li>関数 </li></ul></ul><ul><ul><li>Etc... </li></ul></ul><ul><li>数字や文字列は自動変換される </li></ul><ul><ul><li>“your score is”+ 20 </li></ul></ul><ul><ul><li>“1”+1 => “11” </li></ul></ul><ul><ul><li>1+1=> 2 </li></ul></ul>a=[1,2,3,4] // 配列 alert(a[0]); // => 1 a[10]=10; // 要素数無視 // オブジェクト b={one:10,two:20} alert(b[“one”]); // =>10 alert(b.one); // =>10 b.three=30; // 要素の追加
  27. 27. スコープ var x =”global” function f(){ var x =”local”; alert( x ); // local } alert( x ); //global f(); alert( x ); //global var 重要 var x =”global” function f(){ x =”local”; alert( x ); // local } alert( x ); //global f(); alert( x ); //local グローバル function f
  28. 28. 関数オブジェクト function calc(f,a,b){ return f(a,b); } add= function(x,y){ return x+y; } sub= function(x,y){ return x-y; } calc(add,5,1); // => 6 calc(sub,5,1); // => 4 <ul><li>関数を変数に代入して扱うことができる </li></ul><ul><li>関数をreturnすることができる </li></ul>function addn( n ){ return function(p){return n +p} ; } add1=addn(1); add1(5); // =>6 function hoge(){ alert(“hello”); return 1; }; hoge=function(){ alert(“hello”); return 1; } ; hoge(); hoge=function(){ alert(“hello”); return 1; } ();
  29. 29. JavaScriptとオブジェクト指向 <ul><li>オブジェクト指向 </li></ul><ul><ul><li>クラスとかインスタンスとか そういうやつ Java,C++ </li></ul></ul><ul><li>JavaScriptのそれは少し趣が違うので紹介 </li></ul><ul><ul><li>正直使わなくても書ける </li></ul></ul><ul><ul><li>ライブラリなどを 作る/使う ときは知っておくと良い </li></ul></ul>
  30. 30. new <ul><li>クラスとかインスタンスの区別は無い </li></ul><ul><li>あるのは全部「オブジェクト」 </li></ul><ul><li>JavaScript における n ew </li></ul><ul><li>new <オブジェクト> </li></ul><ul><li>new Rectangle() </li></ul><ul><ul><li>新たに空のオブジェクトを作成し(便宜上aと呼ぶ) </li></ul></ul><ul><ul><li>(a の親を Rectangle.prototype とする ) </li></ul></ul><ul><ul><li>Rectangle()の処理を実行(このときthisはaをさすようにする) </li></ul></ul>function Rectangle(w,h){ this.width=w; this.height=h; } r=new Rectangle(); alert(r.width);
  31. 31. new <ul><li>toString などの基本的なプロパティは Object.prototype で定義されている </li></ul>null new null
  32. 32. prototype function Rectangle(w,h){ this.width=w; this.height=h; } rect=new Rectangle(10,20); rect.area=function(){return this.width*this.height}; function Rectangle(w,h){ this.width=w; this.height=h; this.area=function(){return this.width*this.height}; } rect=new Rectangle(10,20); <ul><li>面積を求めるプロパティを定義したい </li></ul><ul><li>もう少しスマートに </li></ul>
  33. 33. prototype <ul><li>area はどのオブジェクトでも同じ </li></ul><ul><ul><li>area の分メモリが無駄 </li></ul></ul><ul><li>親に定義すればよくね? </li></ul>null new null new null
  34. 34. prototype <ul><li>prototype </li></ul><ul><ul><li>newしたときに新規オブジェクトの親になるものを入れておく </li></ul></ul><ul><ul><li>詳しいことは次の図に示す </li></ul></ul>function Rectangle(w,h){ this.width=w; this.height=h; } Rectangle. prototype .area= function(){return this.width*this.height}; r=new Rectangle(); alert(r.width);
  35. 35. prototype new <ul><li>new すると関数 Rectangle で初期化される </li></ul><ul><li>親として Rectangle の prototype が登録される </li></ul><ul><li>自身に無いプロパティへのアクセスは次々と親へ問い合わせる </li></ul>new null null null new
  36. 36. すでにあるオブジェクトを変更 <ul><li>prototypeをいじれば既存のオブジェクトの挙動を変更することができる </li></ul><ul><li>prototype.jsではArray.prototypeの上書きをしている </li></ul><ul><ul><li>eachとかfilterとか </li></ul></ul>
  37. 37. Object.prototype汚染 <ul><li>だれでもHelloWorldを実行できる! </li></ul>Object.prototype.hello=function(){ alert(“Hello world”); } a=[1,2,3]; a.hello(); b={a:10,b:20}; b.hello();
  38. 38. 配列のtoStringを変更してみる <ul><li>配列の標準のtoString </li></ul><ul><ul><li>[a,b,c] </li></ul></ul><ul><li>改造してみる </li></ul>Array.prototype.toString=function(){ var s=&quot;&quot;; for(var i=0;i<this.length;i++){ s+=i+&quot;:&quot;+this[i]+&quot; &quot;; } return s; } a=[“a”,”b”,”c”] alert(a); 0:a 1:b 2:c
  39. 39. お疲れ様でした <ul><li>まとめ </li></ul><ul><ul><li>HTML(XHTML) </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><ul><li>XSLT </li></ul></ul></ul><ul><ul><li>JavaScript </li></ul></ul>

×