2013年
あけましておめでとうございます。
さて、一年の計は元旦にあり、と昔から言われているように
元旦は何かを決意するにはちょうど良い機会ですね。
ということでいきなりですが、toku345の今年の目標は
「JavaScript忍たまなる」
です。
忍たま=ニンジャの卵、ということでニンジャは到底無理でも
せめてその足元にちかづけたらな・・・という思いで今年の目標を立てました。
で、その軌跡をこのブログにのこしていきたいと思ってます。
で、せっかくJavaScriptを勉強しているんだから、
このブログの中でもコードを公開して実際に動かせたらいいな・・・と。
探したらありました。
またまた、小飼弾さんのサイトを参考にして、実際にうごかせるようにしてみました。
それがコチラ↓
- プログラム:
-
p('hoge');
- 出力:
-
- エラー:
-
て、今日はこれだけなんですが・・・
かなーりひさしぶりで・・・
ってまだ2回目じゃないですか!
orz
まぁ、それは良しとして。。。
よ〜し、今日からまじめにブログ続けていこっと。
http://blog.livedoor.jp/dankogai/archives/51837985.html
小飼弾さんのこの記事に触発されて私もコードを表に出していこうと決意しました。
が、ビビリなので、今日は現在勉強中のjQueryMobileのコードを
ブロク公開の練習も兼ねて晒してみます。
もろ、O'REILLYの『jQuery Mobile』のまんまなんですが・・・(;´∀`)
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobileアプリケーション</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <!-- ここから1ページ目 --> <section id="page1" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p> 初めてのページ! </p> <p><a href="#page2" data-rel="dialog">2ページ目へGo!</a></p> </div> <footer data-role="footer"><h1>toku345</h1></footer> </section> <!-- ここまで1ページ目 --> <!-- ここから2ページ目 --> <section id="page2" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>2ページ目!</p> <p><a href="#page3">3ページ目へGo!</a></p> </div> <footer data-role="footer"><h1>toku345</h1></footer> </section> <!-- ここまで2ページ目 --> <!-- ここから3ページ目 --> <section id="page3" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>3ページ目!</p> <p><a href="external.html">外部ページヘGo!</a></p> </div> <footer data-role="footer"><h1>toku345</h1></footer> </section> <!-- ここまで3ページ目 --> </body> </html>
おう、こうやって公開するのか。
もういっちょ!
external.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <p>このコンテンツは無視されます。</p> <!-- ここから4ページ目 --> <section id="page4" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>外部ページ!</p> <p><a href="#page1">1ページ目へ戻る</a></p> </div> <footer data-role="footer"><h1>toku345</h1></footer> </section> <!-- ここまで4ページ目 --> <p>このコンテンツは無視されます。</p> <!-- ここから3ページ目 --> <section id="page3" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>3ページ目!</p> <p><a href="external.html">外部ページヘGo!</a></p> </div> <footer data-role="footer"><h1>toku345</h1></footer> </section> <!-- ここまで3ページ目 --> </body> </html>
なるほど。
結構簡単に公開できるのね。
実際に動くのはこちら↓
http://49.212.131.62/jqm/index.html
これからこちらのコードをいじっていきます。
(当分、教本のとおりですが・・・(^_^;))
良かったら、お付き合いください。