webを飾る技術

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="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd" /> <xsl:template match="/DataSet"> <html> <head> <title>test page</title> </head> <body> <xsl:for-each select="./Software"> <h1> <xsl:value-of select="title" /> </h1> <p> <xsl:value-of select="language" /> </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="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="text" encoding="Shift_JIS" /> <xsl:template match="/DataSet"> Sample Input <xsl:for-each select="./Software"> <xsl:value-of select="title" />,<xsl:value-of select="language" /><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="over(this)" onmouseout="out(this)" >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=""; for(var i=0;i<this.length;i++){ s+=i+":"+this[i]+""; } 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]

webを飾る技術

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a webを飾る技術

Similar a webを飾る技術 (20)

Más de ina job

Más de ina job (12)

Último

Último (9)

webを飾る技術