使用Visual Studio 2010开发和调试Html5项目

简介:

上周有幸参加微软技术大会(TechED2010),身临其境领略微软这样的国际化公司大家风范,云加端的概念将技术思维提到的一个新的档次,此行收获很大,在第一天谢恩伟提到正在进行的IE9开发大赛让我很是关注,一心好奇外加脑瓜一热开始研究Html5——毕竟这个IE9大赛比的还只是html5开发大赛而已。

关于IE9开发大赛请浏览这里:http://ie9.onlinevoc.cn/contest/Cintro.html

我觉得Visual Studio是现今最好的开发工具之一,尤其是调试功能,使得我们非常容易的完成复杂项目的Debug,当然了还有其他的功能,无论是编程老鸟还是初学者,从易用性和学习性的方面上讲选择Visual Studio比较好,尤其是Express面向学生版本更加贴近初学者。

可是经过一番查找,发现这方面的中文资料并不多,甚至没有明确的如何搭建Html5的开发环境,难道只能使用很笨拙的方法开发Js代码吗?我觉得可能还未到真正的时机,Visual Studio 2010未必支持Html5的开发,不过最终找到了有关信息,简单配置就可以创建和开发html5项目,在这里和大家分享一下。

首先,开发环境直接使用Visual Studio 2008、Visual Studio 2010和Visual Studio Express 2010。

需要安装IE9才能正常的调试,IE9官方主页如下:http://windows.microsoft.com/zh-CN/internet-explorer/products/ie-9/home

其次,需要下载一个HTML 5 Intellisense,下载地址:http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d

 

 

这是微软Visual Studio的官方网站的一个页面,按照信息,2010年上半年已经发布HTML 5 Intellisense for Visual Studio,可能信息在什么地方慢了半拍,我们没有得到,下载完成之后安装,如果你是内行,到此应知道下面的内容了:)。

现在打开Visual Studio新建一个网站项目:

 

 

这里各位自行选择,为了方便说明,我仅仅建立了一个空的Web项目。

现在为功能添加一个.htm,如果你需要其他的页面形式,可以参考这个静态页面的后续流程。

 

在目标框架的选项栏内,已经拥有了Html5框架。

 

我们选定之后就可以使用html5的标签,后续的请参考有关Html5标签的说明教程,在这里不做太多的讲解,下面通过一个例子来表述一下Canvas这个标签,和简单的调试演示。

首先放一张图片到目录中(具体看你的需求),然后编写一个简单的Js代码,这段代码在很多的html5教程中有详细说明。

 

将上面的js加入到页面中,输入Canvas标签,此时你会发现已经有了canvas的标签,先写页面还是先写JS取决于你的习惯,他们之间没有先后关系。为了方便演示,我们加一个按钮在页面方便后面的调试演示。

 

当我们点击按钮的时候就会执行刚才的js绘制代码,好了,我们点击一下看看效果。

 

非常好,现在断一下点看看,启动调试,点击按钮就能激活断点了:

 

是不是非常不错呢:)现在可以使用我们熟悉的环境进行Html5的项目开发,
如果你不能调试的话,可能会一些错误来自IE设置,打开IE设置做一下调整。

 

随着IE9的来临,Html5将成为开发者的关注焦点,可能至今没有任何一项能引起全体开发者的聚焦,即便是微软也将其作为跨平台的重要战略,还举办了IE9开发大赛,可是现今Html5的开发工具少之又少,使得我们开发者只能驻足徘徊,简单以教程的方式讲述如何在Visual Studio 2010和Visual Studio Express 2010上开发和调试Html5的项目,希望能给各位带来便利。



本文转自nowpaper 51CTO博客,原文链接:http://blog.51cto.com/nowpaper/712172

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
100 1
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0
|
1月前
|
Windows
Qt 5.14.2 打造跨平台应用的秘诀:用Visual Studio 2022和Qt 5.14.2轻松创建你的首个QT项目
Qt 5.14.2 打造跨平台应用的秘诀:用Visual Studio 2022和Qt 5.14.2轻松创建你的首个QT项目
|
1月前
|
C++
Visual Studio 2022编译错误 Error MSB8041-此项目需要MFC库解决方案
Visual Studio 2022编译错误 Error MSB8041-此项目需要MFC库解决方案
|
2月前
|
编译器 C++
Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案
Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案
46 0
Visual Studio 2022中创建的C++项目无法使用万能头<bits/stdc++.h>解决方案
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
35 1
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0
|
4月前
|
JavaScript 应用服务中间件 nginx
docker安装的nginx放在html文件下的vue项目404解决
docker安装的nginx放在html文件下的vue项目404解决