微软的Visual Studio提供了多种构成win8应用的方式，其中最让我感到激动的是基于网页设计语言的开发模式，它提供了结合HTML5与Javascript来开发应用的方法，通过这种方法进行开发，不但可以掌握win8应用的开发方式，又可以提高网页的设计水平，达到一石二鸟的效果。

为了学习这种开发，我找了许多电子书来看，但最后结果都不太理想，突然有一天我惊喜的发现微软的官方有相应的教程和完整的电子书供下载，于是我就通过这两样资料，展开了学习，并把自己的学习经历记录下来，供以后查阅和大家参考。

一、总体概述

在Hello World这一节内容中，HTML文件主要使用了三种元素，input、button与Rating，还利用了组块级元素div用于区域分隔。

一般调用方式为：

<input id=" " type="text"/>

<button id=" ">内容</button>

<div id=" ">内容</div>

div元素可以不填写内容，然后利用innerText方法进行动态生成，例如显示欢迎信息。

在JS部分，包含了onactivated与oncheckpoint函数，前者涉及到首次启动和再次唤醒的初始化问题，后者涉及程序挂起的问题。

二、功能实现

①获取input框内的内容

使用 document.getElementById("<id>").value

例如：

对<inputid="nameInput"type="text"/>

使用 var userName =document.getElementById("nameInput").value;来调用

②更改div元素的内容

对<div id="greetingOutput"></div>

使用document.getElementById("greetingOutput").innerText="<string>";来调用，注意此时不用获取value属性。

③注册button事件与写button函数

首先要写一个button的执行函数，它执行的内容就是获取input，经过字符运算，打印到div元素，注意到JS的字符串支持相加，相加后串联。

代码如下

function buttonClickHandler(eventInfo)

{

    var userName = document.getElementById("nameInput").value;

    var greetingString = "Hello, " + userName + "!";

    document.getElementById("greetingOutput").innerText = greetingString;

}

其中事件参数eventInfo可以随便命名，不写也不会报错，但为了严密起见，还是跟随着官方的写法。

接下来就是要注册事件，注册时间发生在程序激活以后，在onactivated函数内，有语句args.setPromise(WinJS.UI.processAll());这一句用来扫描HTML中的WinJS控件并进行初始化。

WinJS.UI.processAll()方法具有异步性，也就是说它后面的代码可以比它先执行，这样有可能就会造成未初始化完毕就执行后面的代码，从而引发错误。

对于一般的HTML元素如button没有这个顾虑，但是对WinJS控件就不行，为了统一起见，我们把所有的脚本都放在通用的位置。

使用setPromise的then方法可以解决这个问题，对于WinJS的processAll，它返回一个promise来表明已经完成，它支持then方法，该方法的参数为completed函数，当promise返回时会执行completed，从而保证它在processAll之后执行。具体写法如下：

原来的函数为：

args.setPromise(WinJS.UI.processAll());

现在变为：

args.setPromise(WinJS.UI.processAll().then(function completed { } ));

我们只需要在completed函数内填写注册程序即可，如下：

args.setPromise(WinJS.UI.processAll().then(function completed()

{

    var helloButton = document.getElementById("helloButton");

    helloButton.addEventListener("click", buttonClickHandler, false);

}));

可以看到，注册时不用获取value的值，而直接访问元素，注册使用addEventListener方法，该方法的三个参数分别为：触发方式、函数名、事件处理时机，其中触发方式有click、mousemove等，触发时机分为：捕获、目标、冒泡，true只在捕获阶段处理事件，而false在目标与冒泡阶段处理，一般填false，该方法还有后续参数，这里暂时用不到。

这样就完成了button、input、div的事件，程序就可以运行了。

三、CSS修饰

①对于背景，在default.html中有一行对css的调用如下：

<link href="//Microsoft.WinJS.1.0/css/ui-drak.css" rel="stylesheet" />

它表示深色背景，将dark改为light，即可显示浅色背景。

②对于元素，一般在default.css中进行设置。

设置步骤为，先为元素添加class属性，如下：

<body>

    <h1 class="headerClass">Hello, world!</h1>

    <div class="mainContent">

        <p>What's your name?</p>

        <input id="nameInput" type="text" />

        <button id="helloButton">Say "Hello"</button>

        <div id="greetingOutput"></div>

    </div>

</body>

在css中调用的方式为：

body {

}

.headerClass {

    margin-top: 45px;

    margin-left: 120px;

}

.mainContent {

    margin-top: 31px;

    margin-left: 120px;

    margin-bottom: 50px;

}

#greetingOutput {

    height: 20px;

    margin-bottom: 40px;

}

注意到与body直接相连的元素使用了"."，而中间隔着mainContent的greetingOutput使用了"#"，其中的属性margin表示边距，单位为px（像素点），下面这张来自百度百科的图片指明了各个边距的含义。

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/25/89/wKioL1NjAXuBVyxTAAEot38eT7U010.jpg" title="margin.jpg" alt="wKioL1NjAXuBVyxTAAEot38eT7U010.jpg" />

此外还有很多修饰属性，可以查阅有关css的资料。

四、WinJS控件Rating

与HTML不同，WinJS控件不是通过标签添加，而是通过为div元素指定data-win-control属性，如下：<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>，这个控件用于打分，一共五颗星，值可以在0到5之间变化。

接下来同样要注册和处理该事件，把它放在completed函数内注册即可，注册代码如下：

var ratingControlDiv = document.getElementById("ratingControlDiv");

var ratingControl = ratingControlDiv.winControl;

ratingControl.addEventListener("change", ratingChanged, false);

同样的，先获取元素，不同的是还要在获取的基础上获取winControl方法的值，然后是事件注册，此时的触发条件为change。

当事件触发时，执行ratingChanged函数打印分数：

function ratingChanged(eventInfo)

{

    var ratingOutput = document.getElementById("ratingOutput");

    ratingOutput.innerText = eventInfo.detail.tentativeRating;

}

经过这些步骤，第一个应用“Hello World”就完成了，在这个过程中我不仅巩固了网页设计的知识，也了解了WinJS的一些特点。

Win8 HTML5与JS编程学习笔记（一）的更多相关文章

  1. Win8 HTML5与JS编程学习笔记（二）

    近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是 ...

  2. 转 网络编程学习笔记一：Socket编程

    题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公司使用的一些控件的开发,浏览器兼容性搞死人:但主要是因为这段时间一直在看html5的东西,看到web socket时觉得很有 ...

  3. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  4. js再学习笔记

    #js再学习笔记 ##基本 1.js严格区分大小写   2.js末尾的分号可加,也可不加   3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...

  5. Linux Shell编程学习笔记——目录（附笔记资源下载)

    LinuxShell编程学习笔记目录附笔记资源下载 目录(?)[-] 写在前面 第一部分 Shell基础编程 第二部分 Linux Shell高级编程技巧 资源下载 写在前面 最近花了些时间学习She ...

  6. DirectX 11游戏编程学习笔记之8: 第6章Drawing in Direct3D(在Direct3D中绘制)(习题解答)

            本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com         注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...

  7. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  8. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

  9. 多线程编程学习笔记——async和await（二）

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

随机推荐

  1. Jedis分片Sentinel连接池实验

    Jedis分片Sentinel连接池实验 1.起因 众所周知,Redis官方HA工具Sentinel已经问世很久了,但令人费解的是,Jedis官方却迟迟没有更新它的连接池.到目前Maven库中最新的2 ...

  2. 解决linux删除文件后空间没有释放问题

    linux删除文件后沒有释放空间 今天发现一台服务器的home空间满了,于是要清空没用的文件,当我删除文件后,发现可用空间沒有变化 os:centos4.7 现象: 发现当前磁盘空间使用情况: [ro ...

  3. PHP+MySQL 分页那点事

    分页技术随处可见,这可以算得上是最为基础的网站功能了.于是今天尝试着用PHP来实现一个分页的小例子. 准备工作 环境准备 Apache MySQL PHP 工作环境 数据库准备 建库 建表 预存数据 ...

  4. ROS机器人程序设计（原书第2版）补充资料 （玖） 第九章 导航功能包集进阶 navigation

    ROS机器人程序设计(原书第2版)补充资料 (玖) 第九章 导航功能包集进阶 navigation 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中 ...

  5. Android Studio下导出jar包和aar包

    Android Studio下导出jar包和aar包 jar包和aar包的区别 步骤 1. 创建Android工程 创建工程比较简单,不错复述 2. 创建一个Library(Module) 创建了一个 ...

  6. Swift中不用桥接文件和.h头文件直接和C代码交互的方法

    我们知道一般情况下Swit要想调用obj-c,c或c++代码必须通过obj-c以及桥接文件才可以办到,但是对于某些简单的代码,我们可以跳过桥接文件和.h头文件,直接和C代码交互呢! 我们再Projec ...

  7. JAVA面向对象-----多态

    多态的概述 1:什么是多态 一个对象的多种状态 (老师)(员工)(儿子) 教师 a =老钟; 员工 b= 老钟; 2:多态体现 1:Father类 1:非静态成员变量x 2:静态成员变量y 3:非静态 ...

  8. JAVA面向对象-----extends关键字

    继承使用extends关键字实现 1:发现学生是人,工人是人.显然属于is a 的关系,is a就是继承. 2:谁继承谁? 学生继承人,发现学生里的成员变量,姓名和年龄,人里边也都进行了定义.有重 复 ...

  9. UNIX网络编程——利用ARP和ICMP协议解释ping命令

    一.MTU 以太网和IEEE 802.3对数据帧的长度都有限制,其最大值分别是1500和1492字节,将这个限制称作最大传输单元(MTU,Maximum Transmission Unit)      ...

  10. 如何在web.xml文件中引入其他的xml文件（拆分web.xml）

    转载自:http://www.blogjava.net/jiangjf/archive/2009/04/09/264685.html 最近在做一个Servlet+javaBean的项目,服务器用的是t ...