目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

お決まりのHello!Worldにチャレンジ

このエントリーをはてなブックマークに追加
昨日、やっとWindows8とVisualStudio2012を入れることができました!
さっそく今日から気分を切り替えてWindows8のメトロスタイルアプリにチャレンジしていきます!

HTMLとJavascriptは割と使い慣れていると意気込んでスタートしてみたものの、
ちょっとクセがあるので注意が必要だということを思い知らされる。

VisualStudioだと、デザインビューが見れないみたいなので今回はExpressionBlend使用。
空のアプリケーションのプロジェクトを作ると、必要なhtml、css、jsなどのファイルが用意される。

*html*default.html
<!DOCTYPE html>
~省略~
<body>

<button onclick="msgShow();">
<div id="msgArea"></div>

</body>


*javascript*default.js
function msgShow()
{
   document.getElementById("msgArea").innerText = "Hello!World!!";

}

ボタンを押すとdivエリアにHello!World!!を表示という簡単なプログラムだったけどデバッグするとガスンと落ちるので下記のようにaddEventListenerで書き換える。

*html*default.html
<!DOCTYPE html>
~省略~
<body>

<button id="msgShow">
<div id="msgArea"></div>

</body>



*javascript*default.js
~省略~
    args.setPromise(WinJS.UI.processAll());

      var helloButton = document.getElementById("msgShow");
      helloButton.addEventListener("click", buttonClickHandler, false);

~省略~
app.oncheckpoint = function (args) {

};

function buttonClickHandler(eventInfo) {
document.getElementById("msgArea").innerText = "Hello!World!!";
}

app.start();
~省略~


jsファイルにピンクの箇所のコードを追記。

スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/06/18(月) 07:35:56|
  2. Windows8のアプリを作ろう!
  3. | トラックバック:0
  4. | コメント:0
<<続きを読むをカスタマイズ | ホーム | 自分メモ*イメージを移動させる*>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://gatoprateado.blog.fc2.com/tb.php/18-472839cc
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。