Django,HTML,CSS,JavaScript, jQuery, Ajax, Json - 召唤网页七葫芦娃
相信大家在学习Django 框架的时候,一定接触到了不少的网页专用术语,肯定也听说了不少关于这七者的种种说法,“Django只是个框架啦,HTML是编写网页的主体,CSS相当于装饰品,JavaScript作为动态脚本语言比较高级,jQuery只是个库,Ajax是种技术,Json呢,则是一种轻量级语言”等等。对于我们初学者肯定比较难以理解到底都有什么作用呢,我想视图用这篇文章为大家分析一二。要是有任何不理解或则解释不清楚的地方,欢迎大家在文章下面留言。
参考资料:
Django
首先来讲讲我们为什么选择Django 吧。
Django 是用Python 编写的开放源代码的web 应用程序框架,它是一种模型-视图-控制器 model-view-template(MVC)应用程序架构,让用户能专注于编写应用程序并且可以避免很多开发web 会碰到的麻烦。Django 由Django 软件基金会(DSF)维护,该基金会是一个独立的非盈利组织。
Django 的主要目标是简化以复杂的数据库为基础的网站的创建过程。Django 强调组件的可重用性和“可插入性”,遵循“更少的代码、低耦合、快速开发,以及不重复自己”的原则。Python在创建网页的整个过程中都可以被使用,甚至对于设置文件和数据模型也可以。Django 还提供了一个可以 创建、读取、更新和删除 的管理界面。
"通过Django,我能够快速创建web站点,用于收集和显示来自顾问和其他用户的数据",Django 是用于服务器端的。它的意思是假设一个客户端打开了你网页的url,你在视图view 中有一个函数,它能呈现客户端所看到的,并返回html中做出响应。
历史
Django是在2003年秋天由当时的劳伦斯世界新闻报的web程序员Adrian holoval 和Simon Wollison 创建的,他们一开始是使用Python来构建应用程序。Django 于2005年7月在 BSD许可 下公开发布。Django 这个框架是以吉他手Django Reinhardt的名字命名的。
2008年6月,新成立了Django 软件基金会(DSF)来维护Django。
HTML
HTML, Hypertext Markup Language,超文本标记语言是用于创建web 页面和web 应用程序的标准标记语言。它和层叠样式表(CSS)和JavaScript,是万维网形的三种基础技术。
Web 浏览器从Web 服务器或本地存储接收HTML 文档,并将文档呈现为多媒体Web 页面。HTML在语义上描述了web页面的结构,并且包含了文档外观最初的线索。
HTML元素是HTML页面的构建块。有了HTML结构,图像和其他对象,比如交互式表单,可以嵌入到呈现的页面中。HTML提供了一种方法来创建结构化文档,方法是为文本的结构语义,如标题、段落、列表、链接、引号和其他条目。HTML元素由标签来描述,用尖括号来写,比如:
<p>This is a paragraph.</p>
基本网页结构用HTML 来表示如下:
<!DOCTYPE html>
<title>This is a title</title>
</head>
<p>Hello world!</p>
</body>
</html>
浏览器不显示HTML标记,而是使用它们来解释页面的内容。
历史
1980年,物理学家蒂姆伯纳斯-伯纳斯,CERN 的一名承包商,提出并建立了ENQUIRE 的原型,这是一个CERN 研究人员可以使用和共享文件的系统。1989年,Berners-Lee 写了一份备忘录,提议建立一个基于互联网的超文本系统。在1990年后期,Berners-Lee 指定HTML 并用其编写了浏览器和服务器软件。同时那一年,Berners-Lee和CERN 的数据系统工程师Robert Cailliau 合作提出了一项联合请求,但是这个项目并没有被CERN正式采纳。在他1990年的个人笔记中,他列出了8个“使用超文本的许多领域”,并把百科全书放在第一位。
第一个公开的HTML描述是一个名为“HTML标记”的文档,它是由蒂姆伯纳斯-伯纳斯在1991年底在互联网上首次提到的。它描述了18个元素,包括最初的、相对简单的HTML设计。
CSS
前面介绍了HTML,我们知道了HTML 可以嵌入用脚本语言编写的程序,比如CSS,它包含定义了内容的外观和布局。
Cascading Style Sheets (CSS) ,层叠样式表是一种样式表语言,用于描述用HTML 等标记语言编写的文档的表示。CSS 是万维网的三大基础技术之一。
CSS的设计目的是实现表示和内容的分离,包括布局、颜色和字体。这种分离可以提高内容的可访问性,在表示特征的规范中提供更多的灵活性和更方便的控制,使多个web 页面通过一个单独的 .CSS文件可以指定相关的CSS 来共享格式,并减少结构内容中的复杂性和重复性。
格式和内容的分离也使得为不同的呈现方法呈现相同的标记页面变得可行,例如屏幕上的、打印的、语音的(基于语音的浏览器或屏幕阅读器),以及基于brail 的触觉设备。如果在移动设备上访问内容,CSS 也有用于替代格式的规则。
CSS 是由万维网联盟(W3C)维护。W3C为CSS 文档运行一个免费的CSS 验证服务。
举个例子,<style>, 尖框中的style 都是CSS 的运用。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#xyz { color: blue; }
</style>
</head>
<p id="xyz" style="color: green;"> To demonstrate specificity </p>
</body>
</html>
历史
1994年10月10日,Hkon Wium Lie 首次提出了CSS。当时,Lie 正与欧洲研究中心的Tim 一起工作。在同一时间,他还提出了20种其他的Web 样式表语言,并且在1996年,关于公共邮件列表在万维网联盟内部的讨论中发布了第一个W3C CSS推荐(CSS1)。同时,Bert Bos的提议也颇具影响力; 他成为了CSS1 的合著者,并被认为是CSS 的共同创建者。
JavaScript
JavaScript 通常缩写为JS,是一种高级的解释编程语言。它是一种被描述为动态的、弱类型的、基于原型的和多范式的语言。它会影响web页面的行为和内容。
除了HTML和CSS,JavaScript 是万维网的三大核心技术之一。JavaScript支持交互式web 页面,因此是web 应用程序的重要部分。绝大多数的网站都在使用它。
作为一种多范式语言,JavaScript 支持事件驱动、功能和命令式(包括面向对象和基于原型的)编程风格。它有一个用于处理文本、数组、日期、正则表达式和基本操作DOM的API,但是语言本身不包括任何输入输出,例如网络、存储或图形设备,这些依赖于它所嵌入的主机环境。
最初JS 只在web浏览器客户端实现, JS 引擎现在嵌入在许多其他类型的主机软件, 包括在web服务器和数据库服务器端, 或则非web项目, 如文字处理软件和PDF格式的软件。并且JS 在运行时环境 (runtime enviroment),可以编写移动和桌面应用程序包括桌面小部件。
JavaScript 常见格式:
<script type="text/javascript">
document.write("Hello World!");
</script>
历史
1993年,伊利诺伊大学厄巴那-香槟分校的国家超级计算应用中心(NCSA)发布了NCSA Mosaic,这是第一个流行的图形网络浏览器,它在扩大新生的万维网的发展中起到了重要作用。1994年,一家名为Mosaic通信的公司成立于加州山景城,并聘请了许多最初的NCSA 马赛克作者来创建马赛克网景浏览器。1995年,网景通讯公司招募了布伦丹艾奇,其目标是将Scheme编程语言嵌入到其Netscape Navigator中。在他开始创业之前,网景通讯公司与太阳微系统公司合作,在网景浏览器中加入了Sun 的静态编程语言Java,以便与微软竞争用户采用的网络技术和平台。然后,网景通讯公司决定,他们想要创建的脚本语言将与Java相辅,并且应该有类似的语法,这就排除了采用其他语言,如Perl、Python、TCL或Scheme。
最后的名称选择引起了混乱,给人的印象是,这种语言是Java编程语言的副产品,而这个选择被认为是Netscape的一种营销策略,目的是让JavaScript成为当时流行的新Web编程语言的标志。
敲黑板,JavaScript 并不是 JAVA 的分支。有兴趣的同学看一看这篇文章, JavaScript is not Java 。
jQuery
我们为什么在JavaScript 之后介绍 jQuery 呢?因为jQuery 就是JavaScript 的一个框架或库,它允许我们以一种比JavaScript 更直接、更易于学习的方式来操作 DOM(Document Object Model, 文档对象模型, 基本上是web页面的元素),特别是对于初学者和非程序员。但jQuery本质上是JavaScript。它是免费的,并拥有开源软件使用许可的MIT 许可。Web分析表明,它是最广泛部署的JavaScript库。
jQuery的语法旨在使浏览文档、选择DOM元素、创建动画、处理事件和开发Ajax应用程序变得更加容易。jQuery 还为开发人员提供了在JavaScript库之上创建插件的功能。这使得开发人员可以为低级交互或则动画高级效果和高级可使用的小部件创建抽象。jQuery 库的模块化方法允许创建强大的动态Web 页面和Web 应用程序。
常见格式如下:
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});
和JavaScript 太像了,就是多了$ 来阐明这用的是jQuery。
历史
jQuery最初于2006年1月由John Resig在BarCamp NYC 发布,并受到了Dean Edwards早期的css 查询库的影响。它目前由一个Timmy威利斯领导的开发团队维护。
jQuery最初是在CC BY-SA 2.5的授权下获得许可的,并在2006年重新获得了麻省理工学院MIT 的许可。在2006年年底,它在GPL和麻省理工学院的许可下获得了双重许可。由于这导致了一些混乱,在2012年,GPL被取消了,现在只拥有麻省理工学院的许可。
Ajax
全称是Asynchronous javascript and XML,翻译过来就是异步javascript 和XML。Ajax 允许数据“异步”发送,也就是说,在后台不影响显示给用户的现有页面。使用Ajax,Web 应用程序可以异步地从服务器发送和检索数据(在后台),而不会干扰现有页面的显示和行为。通过将数据交换层从表示层分离出来,Ajax允许Web 页面和扩展Web 应用程序动态地改变内容(允许我们在没有刷新的情况下将信息插入到页面中),而不需要重新加载整个页面。
举个例子,我们写了一篇文章,发现里面有一个地方需要改动。没有Ajax的话,我们得重新把整篇文章写一遍;有了Ajax, 我们只需要把需要改动的原段落去掉,换上需要改的新内容即可。
这里给大家推荐我们知乎上的一个答案,里面有更多通俗的关于Ajax 的比喻, 你怎么用最通俗的话解释AJAX是什么东西?
Ajax不是一种技术,而是一组技术,通过HTML和CSS 组合在一起来标记和样式信息。然后,我们可以通过JavaScript 修改网页来动态显示——并允许用户与新信息进行交互。JavaScript内内置的XMLHttpRequest 对象通常用于在web页面上执行Ajax,允许网站在不刷新页面的情况下将内容加载到屏幕上。Ajax不是一种新技术,也不是不同的语言,只是以新方式使用的现有技术。
下面我们展示1个简单的用Get 方法的Ajax 请求文件,用JavaScript 编写。
get-ajax-data.js:
// This is the client-side script.
// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
// Track the state changes of the request.
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
console.log(xhr.responseText); // 'This is the output.'
} else {
console.log('Error: ' + xhr.status); // An error occurred during the request.
// Send the request to send-ajax-data.php
xhr.send(null);
历史
在20世纪90年代早期到中期,大多数Web 站点都是基于完整的HTML 页面。每个用户操作都要求从服务器加载一个完整的新页面。这个过程是低效的,正如用户体验所反映的那样:所有的页面内容都必须先消失了,然后新的页面才能出现。每次仅仅是更改部分内容,所有的内容都必须重新发送,这给服务器增加了额外的负载,使带宽成为性能的一个限制因素。
在1996年,iframe标记由Internet Explorer 引入; 与object元素一样,它可以异步加载或获取内容。1998年,Microsoft Outlook Web应用团队开发了XMLHttpRequest 脚本对象背后的概念。
2005年2月18日,杰西詹姆斯盖瑞特在一篇题为Ajax:一种新的Web应用方法的文章中公开使用了Ajax这个术语,该方法基于Google页面上使用的技术。
2006年4月5日,万维网联盟(W3C)发布了XMLHttpRequest 对象的第一个规范草案,试图创建一个官方的Web标准。XMLHttpRequest 对象的最新草案于2014年1月30日发布。
Json
关于计算机,JavaScript Object Notation 或则说JSON 是一种开放标准的文件格式,它使用人类可读的文本来传输由属性——值对和阵列数据类型(或任何其他可序列化的值)组成的数据对象。它是用于异步浏览器的一种非常常见的数据格式——服务器通信,包括在一些ajax风格的系统中替换XML。
JSON是一种独立于语言的数据格式。它来自于JavaScript,但在2017年,许多编程语言都包含生成和解析json格式数据的代码。JSON的官方网络媒体类型是application/JSON。JSON文件名使用扩展名 .JSON。JSON是用JavaScript 语法来表示数据的一种轻量级语言。
下面的例子展示了描述一个人时的可能用到的JSON表示。
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 27,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
"phoneNumbers": [
"type": "home",
"number": "212 555-1234"
"type": "office",
"number": "646 555-4567"
"type": "mobile",