重新认识HTML,CSS,Javascript 之node-webkit 初探

今天我们来系统的、全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 包含一些根节点,子节点,文本节点,属性节点,组成,

它通过一系列预定义标签来描述网页结构,如: <title>This is title</title> ,这个表明该网页的标题是 This is title。

什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets),它描述浏览器显示如何显示html元素。

看下面代码,浏览器 将会 以 20px绿色字体   显示 p标签中的文本节点

p {
            font-size: 20px;
            color: green;
 }

这些html元素 、css样式 是由W3C组织制定规范;

然后由不同浏览器实现,所有你会看到 同一个网页 页面,通过不同的 浏览器查看,显示会有一些差别。

下面图片是说明 浏览器 如何解析 html 和 css的:

html 就是一个文本文件,

1、浏览器通过http 请求 服务器,把html文档 下载下来

2、把html解析成dom树,同时提供dom接口,方便其他编程语言操作dom树,如:javascript

3、下载并,解析css样式规则

4、把样式规则依附在html元素上(以css选择器作为依赖)

5、渲染dom树

6、显示

为什么说html,css,javascript 是 跨平台的?

html,css,javascript 其实 就是 一个文本文件,然后通过浏览器 不同的引擎 去 解析相应的 代码 来 执行,

所以 只有 实现某个 平台 下 的 浏览器就行了 ,就可以在 这个平台上 使用 这个 Web Project,听起来 是不是 觉得 顿悟了。

而java 跨平台 的原理 则是 ,把 java源文件 翻译成 与 平台无关的class文件,然后通过 JVM 去 加载 执行。

值得一提的是 JVM 也是 一个 规范, 使用广泛的JVM 是 Java HotSpot ,如果你能力够强的话,可以基于openjdk

来 开发 自己的jdk ,来实现jdk级别的 优化。

如此分析,是不是觉得HTML、CSS、Javascript 很可爱,它其实就是一个规范,

现在HTML5 、CSS3 ,EcmaScript6 提出很多 新的 特性,概论,如果一旦 浏览器得到了更好的 支持,那就移动Web开发 将成为 主流, 而 android,ios ,这类原生的程序 将会慢慢 的减少。

想象一下,通过浏览器,就可以实现所有的请求,比如 聊天 ,看视频,上网方式 将会变得非常 优美,不是么。

好吧,接下来 说一下 node-webkit,我的理解是 它是一个nodejs引擎+ webkit 引擎。

通过nodejs引擎 解析 js ,而通过 webkit
引擎 解析 html 、 css ,所以在网页中可以嵌入 nodejs 的代码 。

有些html 、 css、js的经验的话, 会很平滑的过渡,来开发一些东西。

那我们来 掀起node-webkit的盖头来 吧。

打开nw.exe 来看看

乍一看 ,就是 谷歌浏览器啊,好吧,来点干货吧。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>what's node-webkit?</title>
    <style>
        h1 {
            color: red;
        }

        p {
            font-size: 20px;
            color: green;
        }
    </style>
    <script>
        console.log('当你看到这段文字,说明这段代码被nodejs引擎,解释,执行了');
        console.log(this);
    </script>
</head>
<body>
<h1>This is a nw app.</h1>

<p>它是一个nodejs引擎+ webkit 引擎 </p>

</body>
</html>

package.json

{
    "name": "nw-frist",
    "version": "0.0.1",
    "main": "index.html"
}

打包成zip格式的文件,然后执行 nw.exe nw-first.zip 来运行它

第一图 是用 nw 去执行 ,第二图是在Google Chrome 中查看,

可以看出 ,效果 是一样的。

好吧,来添加点不一样的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>what's node-webkit?</title>
    <style>
        h1 {
            color: red;
        }

        p {
            font-size: 20px;
            color: green;
        }
    </style>
    <script>
        console.log('当你看到这段文字,说明这段代码被nodejs引擎,解释,执行了');
        console.log('this : ', this);
        console.log('global : ', global);
    </script>
</head>
<body>
<h1>This is a nw app.</h1>

<p>它是一个nodejs引擎+ webkit 引擎 </p>

</body>
</html>

可以看到我们输出 global 对象的信息,

这意味着node-webkit  javascript 运行环境 是 nodejs,

那 我们就可以在 html script标签中 使用 nodejs 进行 编程,包括,读取本地文件,进行网络请求,访问本地硬件设备。。。等等 ,这是不是 意味着可以用来 开发 本地程序 ?答案 当然是 true ,而且可以 跨平台 ,就如 上面分析的一样。我们可以使用html5 、css3 开发 非常优美,交互更棒的 本地 web app ,有大量的 nodejs 包 和 js lib 使用,
试想一下 用 c++ , vb ,Python 开发一个 漂亮的本地程序,要自定义 一些 组件, 那是多么 麻烦。

有时间我们将通过  node-webkit,写一个 文件浏览器,来实践一下 ,这些技术是 怎么 结合 的?

以上 纯属个人 见解。

重新认识HTML,CSS,Javascript 之node-webkit 初探,布布扣,bubuko.com

时间: 2024-10-23 01:01:26

重新认识HTML,CSS,Javascript 之node-webkit 初探的相关文章

网页性能之HTML,CSS,JavaScript

转载自AlloyTeam:http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/ 前言 html css javascript可以算是前端必须掌握的东西了,但是我们的浏览器是怎样解析这些东西的呢 我们如何处理html css javascript这些东西来让我们的网页更加合理,在我这里做了一些实验,总结起来给大家看看. 最简单的页面 1 2 3 4 5 6 7 8 9 <!DOCTYPE html>

聊聊html+css+javascript的学习顺序

最近在知乎看到一篇文章,内容颇具感染力,助力了我经营TwentyHeart的想法,手动补上文章地址https://zhuanlan.zhihu.com/p/23893278 时不我待,如果有想法有信念想入前端大坑的朋友,just do it! 说下小编入坑八个月的感悟想法与学习顺序吧: 身为一个前端,必须会核心技能是HTML+CSS+Javascript,如果把HTML比作一个裸体机器人的话,那么css就是这个机器人的皮肤,Javascript就是这个有身体,有皮肤的机器 人的动作了,用技术词来

Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 and 3 plugin allowing you to format your HTML, CSS, JavaScript and JSON code. It uses a set of nice beautifier scripts made by Einar Lielmanis. The form

JavaScript事件在WebKit中的处理流程研究

本文主要探讨了JavaScript事件在WebKit中的注册和触发机制. JS事件有两种注册方式: 通过DOM节点的属性添加或者通过node.addEventListener()函数注册: 通过DOM节点的属性添加如下所示,节点的属性采用on后面紧接event name的形式,比如onclick, onload; <html> <head> <script type="text/javascript"> function listener(e){ a

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 03

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列举出来,估计做完上面这个颜色表,估计人都废了. 为了解决这个重复性的问题,我们必须引入另一种语言:JavaScript 为何学习 JavaScript? JavaScript 是 web 开发者必学的三种语言之一: HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进

hta+vbs+js+div+css (javascript是原生态的)

talbe是javascript动态生成的,根据你的sql语句来的,分页是vbs用数组来造的轮子,vbs这脚本虽然强大,却没有返回数据集的东东,数组来做简单的分页还是比较简单的,批量跟新呢?是上传execl来更新的,最好是用vba操作execl的话,直接在execl里修改了立马更新数据库,只是个小工具,目前还不是很强大不是很满意,慢慢做,局限hta不能跨平台只能windows,不能和硬件结合.优点调用webservies不需要考虑域的问题,做一个小巧强悍的工具还是比较方便的,因为hta直接双击就

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

分享一个CSS+JavaScript框架materializecss

一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:

创业笔记-Node.js入门之JavaScript与Node.js

JavaScript与Node.js JavaScript与你 抛开技术,我们先来聊聊你以及你和JavaScript的关系.本章的主要目的是想让你看看,对你而言是否有必要继续阅读后续章节的内容. 如果你和我一样,那么你很早就开始利用HTML进行“开发”,正因如此,你接触到了这个叫JavaScript有趣的东西,而对于JavaScript,你只会基本的操作——为web页面添加交互. 而你真正想要的是“干货”,你想要知道如何构建复杂的web站点 —— 于是,你学习了一种诸如PHP.Ruby.Java

CSS JavaScript仿天猫侧边网页菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ