SlideShare a Scribd company logo
1 of 39
Webを飾る技術 第 6 回 変 ゼミ 2008/07/23 id:inajob http://d.hatena.ne.jp/inajob/
何? ,[object Object],[object Object],[object Object],[object Object],[object Object]
要素技術 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<HTML>
HTMLを書いてみる <html> <head> <title>TestPage</title> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr />   <!-- 水平線 これはコメント --> </body> </html> <HTML>
もっと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>
CSS (Cascading Style Sheets) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],{CSS}
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}
{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> 同じページでも 見た目が全然違う
CSSとclassとidと文脈 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
{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>
XML ,[object Object],[object Object],[object Object],[object Object],<XML>
XMLを書いてみる ,[object Object],[object Object],[object Object],[object Object],[object Object],<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
XSLT(XSL Transformations) ,[object Object],[object Object],[object Object],<XML>
<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>
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>
JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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 メソッド的なものを文字列を引数にして呼び出している
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> ,[object Object],[object Object]
JavaScriptを書いてみる3 ,[object Object],[object Object],[object Object],[object Object]
イベントハンドラ1 <html> <head> <title>TestPage</title> </head> <body> <input type=”button” onclick=” alert('Hello World') ”> </body> </html> ,[object Object],[object Object],[object Object]
イベントハンドラ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 にアクセスできる
タイマー ,[object Object],<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>
JavaScriptとスレッド ,[object Object],[object Object],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++); }
Ajax (Asynchronous JavaScript + XML) ,[object Object],[object Object],function getContents(){ 通信をしてデータを取ってくる  //   <= ここでブラウザが固まる とってきたデータを加工 データを表示 } function getContents(){ 通信をしてデータをとりに行け 終わったら completeReq を呼び出せ }    // 即座に関数から抜ける function completeReq(req){ data=req.responseText();  //data に読み込んだデータが入る 煮るなり焼くなり }
JavaScriptの型 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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; // 要素の追加
スコープ 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
関数オブジェクト 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 ,[object Object],[object Object],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; } ();
JavaScriptとオブジェクト指向 ,[object Object],[object Object],[object Object],[object Object],[object Object]
new ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],function Rectangle(w,h){ this.width=w; this.height=h; } r=new Rectangle(); alert(r.width);
new ,[object Object],null new null
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); ,[object Object],[object Object]
prototype ,[object Object],[object Object],[object Object],null new null new null
prototype ,[object Object],[object Object],[object Object],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);
prototype new ,[object Object],[object Object],[object Object],new null null null new
すでにあるオブジェクトを変更 ,[object Object],[object Object],[object Object]
Object.prototype汚染 ,[object Object],Object.prototype.hello=function(){ alert(“Hello world”); } a=[1,2,3]; a.hello(); b={a:10,b:20}; b.hello();
配列のtoStringを変更してみる ,[object Object],[object Object],[object Object],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
お疲れ様でした ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Muyuu Fujita
 
Perl logging
Perl loggingPerl logging
Perl loggingkeroyonn
 
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介sters
 
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)ひとし あまの
 
concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識Hishikawa Takuro
 
Modern PHP Programming @ PFI Seminar
Modern PHP Programming @ PFI SeminarModern PHP Programming @ PFI Seminar
Modern PHP Programming @ PFI SeminarSotaro Karasawa
 
WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話Hidetaka Okamoto
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Yasutaka Kawamoto
 
PHPの今とこれから2020
PHPの今とこれから2020PHPの今とこれから2020
PHPの今とこれから2020Rui Hirokawa
 
PHPの今とこれから2019
PHPの今とこれから2019PHPの今とこれから2019
PHPの今とこれから2019Rui Hirokawa
 
PHPの今とこれから2021
PHPの今とこれから2021PHPの今とこれから2021
PHPの今とこれから2021Rui Hirokawa
 
PHP, Now and Then 2011
PHP, Now and Then 2011PHP, Now and Then 2011
PHP, Now and Then 2011Rui Hirokawa
 
最新PHP事情 (2000年7月22日,PHPカンファレンス)
最新PHP事情 (2000年7月22日,PHPカンファレンス)最新PHP事情 (2000年7月22日,PHPカンファレンス)
最新PHP事情 (2000年7月22日,PHPカンファレンス)Rui Hirokawa
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springTakuya Ueda
 
Hack/HHVM 入門
Hack/HHVM 入門Hack/HHVM 入門
Hack/HHVM 入門y-uti
 
BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門Yohei Sasaki
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoShoot Morii
 
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Akio Ishida
 

What's hot (20)

Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
Perl logging
Perl loggingPerl logging
Perl logging
 
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
PHPBLT#6 PHPの未来に入るかもしれない機能の紹介
 
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
ウェブアプリのセキュリティをちゃんと知ろう (毎週のハンズオン勉強会の資料)
 
concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識concrete5デザインカスタマイズに必要なPHPの知識
concrete5デザインカスタマイズに必要なPHPの知識
 
Modern PHP Programming @ PFI Seminar
Modern PHP Programming @ PFI SeminarModern PHP Programming @ PFI Seminar
Modern PHP Programming @ PFI Seminar
 
WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話WordBench京都12月、WordCampUSからのWP REST APIな話
WordBench京都12月、WordCampUSからのWP REST APIな話
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
 
PHPの今とこれから2020
PHPの今とこれから2020PHPの今とこれから2020
PHPの今とこれから2020
 
WCO2012「PHP教室」
WCO2012「PHP教室」WCO2012「PHP教室」
WCO2012「PHP教室」
 
PHPの今とこれから2019
PHPの今とこれから2019PHPの今とこれから2019
PHPの今とこれから2019
 
PHPの今とこれから2021
PHPの今とこれから2021PHPの今とこれから2021
PHPの今とこれから2021
 
PHP, Now and Then 2011
PHP, Now and Then 2011PHP, Now and Then 2011
PHP, Now and Then 2011
 
HHVM Hack
HHVM HackHHVM Hack
HHVM Hack
 
最新PHP事情 (2000年7月22日,PHPカンファレンス)
最新PHP事情 (2000年7月22日,PHPカンファレンス)最新PHP事情 (2000年7月22日,PHPカンファレンス)
最新PHP事情 (2000年7月22日,PHPカンファレンス)
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
 
Hack/HHVM 入門
Hack/HHVM 入門Hack/HHVM 入門
Hack/HHVM 入門
 
BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門BPStudy32 CouchDB 再入門
BPStudy32 CouchDB 再入門
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
 
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト
 

Viewers also liked

Tuch Tui Santander1
Tuch Tui Santander1Tuch Tui Santander1
Tuch Tui Santander1Gabo00
 
Pasos Para La Creación De Un Blog
Pasos Para La Creación De Un BlogPasos Para La Creación De Un Blog
Pasos Para La Creación De Un BlogMartin Villarroel
 
Informational / Formational Paradox
Informational / Formational ParadoxInformational / Formational Paradox
Informational / Formational Paradoxjvoorhees
 
Simon 婚禮用媽媽篇 +Os
Simon 婚禮用媽媽篇 +OsSimon 婚禮用媽媽篇 +Os
Simon 婚禮用媽媽篇 +OsSimon Lee
 
Juega Juega Y Aprende
Juega Juega Y AprendeJuega Juega Y Aprende
Juega Juega Y Aprendeguest819ca1
 
The Value of Sharing - Business Social Networking - Leverage
The Value of Sharing - Business Social Networking  - LeverageThe Value of Sharing - Business Social Networking  - Leverage
The Value of Sharing - Business Social Networking - Leverageguest51d0ff
 
Colleen Mid Term Reflection
Colleen Mid Term ReflectionColleen Mid Term Reflection
Colleen Mid Term ReflectionColleen Flood
 
Οι καλύτερες πισίνες του κόσμου
Οι καλύτερες πισίνες του κόσμουΟι καλύτερες πισίνες του κόσμου
Οι καλύτερες πισίνες του κόσμουguest148a2b
 
Time Management
Time ManagementTime Management
Time Managementdrjms
 
Dispositivo de Capacitación
Dispositivo de CapacitaciónDispositivo de Capacitación
Dispositivo de Capacitacióngabriela.asinsten
 

Viewers also liked (20)

wonderful nature
wonderful naturewonderful nature
wonderful nature
 
Natura 2
Natura 2Natura 2
Natura 2
 
4, 5 Y 6
4, 5 Y 64, 5 Y 6
4, 5 Y 6
 
Tuch Tui Santander1
Tuch Tui Santander1Tuch Tui Santander1
Tuch Tui Santander1
 
Stayroi1
Stayroi1Stayroi1
Stayroi1
 
Pasos Para La Creación De Un Blog
Pasos Para La Creación De Un BlogPasos Para La Creación De Un Blog
Pasos Para La Creación De Un Blog
 
Informational / Formational Paradox
Informational / Formational ParadoxInformational / Formational Paradox
Informational / Formational Paradox
 
Simon 婚禮用媽媽篇 +Os
Simon 婚禮用媽媽篇 +OsSimon 婚禮用媽媽篇 +Os
Simon 婚禮用媽媽篇 +Os
 
FÓRUM RH 2008
FÓRUM RH 2008FÓRUM RH 2008
FÓRUM RH 2008
 
Charges
ChargesCharges
Charges
 
Juega Juega Y Aprende
Juega Juega Y AprendeJuega Juega Y Aprende
Juega Juega Y Aprende
 
minxnile
minxnileminxnile
minxnile
 
Presentation2
Presentation2Presentation2
Presentation2
 
The Value of Sharing - Business Social Networking - Leverage
The Value of Sharing - Business Social Networking  - LeverageThe Value of Sharing - Business Social Networking  - Leverage
The Value of Sharing - Business Social Networking - Leverage
 
Luxana
LuxanaLuxana
Luxana
 
Colleen Mid Term Reflection
Colleen Mid Term ReflectionColleen Mid Term Reflection
Colleen Mid Term Reflection
 
Οι καλύτερες πισίνες του κόσμου
Οι καλύτερες πισίνες του κόσμουΟι καλύτερες πισίνες του κόσμου
Οι καλύτερες πισίνες του κόσμου
 
Poner Comentarios En Blog
Poner Comentarios En BlogPoner Comentarios En Blog
Poner Comentarios En Blog
 
Time Management
Time ManagementTime Management
Time Management
 
Dispositivo de Capacitación
Dispositivo de CapacitaciónDispositivo de Capacitación
Dispositivo de Capacitación
 

Similar to webを飾る技術

京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 akiannulus
 
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 arisu yano
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talkmitamex4u
 
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjaxKensaku Komatsu
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップShumpei Shiraishi
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 

Similar to webを飾る技術 (20)

YUI
YUIYUI
YUI
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
it研修講座
it研修講座it研修講座
it研修講座
 
It01
It01It01
It01
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
it研修講座
it研修講座it研修講座
it研修講座
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 aki
 
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
 
2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk2008.10.18 L4u Tech Talk
2008.10.18 L4u Tech Talk
 
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
Module02
Module02Module02
Module02
 
Java Script4
Java Script4Java Script4
Java Script4
 

More from ina job

KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介ina job
 
僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介します僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介しますina job
 
シェル入門
シェル入門シェル入門
シェル入門ina job
 
Voice remix!
Voice remix!Voice remix!
Voice remix!ina job
 
Mustache入門
Mustache入門Mustache入門
Mustache入門ina job
 
MTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきたMTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきたina job
 
Erlangやってみた
ErlangやってみたErlangやってみた
Erlangやってみたina job
 
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理ina job
 
OooBasic
OooBasicOooBasic
OooBasicina job
 
ICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったかICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったかina job
 
context free art
context free artcontext free art
context free artina job
 
WxHaskell
WxHaskellWxHaskell
WxHaskellina job
 

More from ina job (12)

KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介
 
僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介します僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介します
 
シェル入門
シェル入門シェル入門
シェル入門
 
Voice remix!
Voice remix!Voice remix!
Voice remix!
 
Mustache入門
Mustache入門Mustache入門
Mustache入門
 
MTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきたMTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきた
 
Erlangやってみた
ErlangやってみたErlangやってみた
Erlangやってみた
 
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理
 
OooBasic
OooBasicOooBasic
OooBasic
 
ICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったかICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったか
 
context free art
context free artcontext free art
context free art
 
WxHaskell
WxHaskellWxHaskell
WxHaskell
 

Recently uploaded

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdffurutsuka
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 

Recently uploaded (9)

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdfUPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 

webを飾る技術

  • 1. Webを飾る技術 第 6 回 変 ゼミ 2008/07/23 id:inajob http://d.hatena.ne.jp/inajob/
  • 2.
  • 3.
  • 4.
  • 5. HTMLを書いてみる <html> <head> <title>TestPage</title> </head> <body> <h1>HTML を書いてみる </h1> <p>p はパラグラフの P です。 </p> <hr />   <!-- 水平線 これはコメント --> </body> </html> <HTML>
  • 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.
  • 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. {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.
  • 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.
  • 13.
  • 14.
  • 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. 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.
  • 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.
  • 20.
  • 21.
  • 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.
  • 24.
  • 25.
  • 26.
  • 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.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.