定义前端

定义前端

综述

Web 和移动应用开发过程一般包含以下步骤

• (1) 用户在浏览器（客户端）里输入或者点击一个链接
• (2) 浏览器向服务器发送 HTTP请求
• (3) 服务器处理请求，如果查询字符串或者请求体里含有参数，服务器也会把这些参数信息 考虑进去
• (4) 服务器更新、获取或者转换数据库里的数据
• (5) 服务器以HTML、JSON或者其他格式返回一个 HTTP响应
• (6) 浏览器接收 HTTP响应
• (7) 浏览器以HTML或者其他格式（比如JPEG、XML或者 JSON）把 HTTP响应呈现给用户

移动应用和普通网站

• 移动应用的行为动作与普通网站相同，只不过原生应用取代了浏览器
• 其他主要区别为：带 宽带来的数据传输限制、更小的屏幕、更高效地使用本地存储

HTML

概述

• HTML本质上不是编程语言，而是一组用来描述内容结构和格式的标记
• HTML标签由一对 尖括号以及括号内的标签名组成
• 大多数情况下，内容会包含在一对开始标签和结束标签之间， 结束标签的标签名前有一个斜杠（/）
• 所有其他元素都是 html 标签的子标签

元素属性

• class

  • class 属性定义了一个类，以便于使用 CSS给元素添加样式或者进行 DOM操作

      <p class="normal">...</p>
    

• id

  • id 属性定义了元素的 ID，作用有点像 class，但是必须是唯一的

      <div id="footer">...</div>
    

• style

  • style 属性定义了一个元素的内联 CSS

      <font style="font-size:20px">...</font>
    

• title

  • title 属性为元素指定了一些额外信息，在大多数浏览器里这些信息均是以小提示条的形式 呈现的

      <a title="Up-vote the answer">...</a>
    

• data-name

  • data-name 属性可以用来在 DOM中存储一些元数据

      <tr data-token="fa10a70c-21ca-4e73-aaf5-d889c7263a0e">...</tr>
    

• onclick

  • onclick 属性意味着在点击事件发生时，内联的 JavaScript代码将运行

      <input type="button" onclick="validateForm();">...</a>
    

• onmouseover

  • 鼠标悬停事件触发

      <a onmouseover="javascript: this.setAttribute('css','color:red')">...</a>
    

• 其他与内联 JavaScript代码相关的 HTML属性

  • onfocus：当浏览器的焦点聚集在某个元素上时触发
  • onblur：当浏览器的焦点离开一个元素时触发
  • onkeydown：用户按下键盘上的键时触发
  • ondblclick：用户双击鼠标时触发
  • onmousedown：用户按下鼠标时触发
  • onmouseup：用户释放鼠标时触发
  • onmouseout：用户将鼠标移开元素区域时触发
  • oncontextmenu：用户点击鼠标右键时触发

• 注意：内联 CSS和 JavaScript不是好方案，我 们会尽量避免内联

CSS

概述

• CSS 是一种控制内容呈现和格式的方式

• CSS 的三种引入方式

  • 内联式css样式

    • 内联式css样式表就是把css代码直接写在现有的HTML标签中

          <p style="color:red">这里文字是红色。</p>
      

    • css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）

  • 嵌入式css样式

    • 在head元素内style属性内写，此样式可以被当前页面中元素使用

          <style type="text/css">span{color:red;}</style>
      

  • 外部式css样式

    • 在单独CSS文件中写的样式，那个网页引用该文件就能复用该样式

          <link href="style.css" rel="stylesheet" type="text/css" />
      

• 定位元素

  • 在 CSS 里可以通过元素的 id、class、标签名，以及它与父级标签的关系或者元素属性值来定位元素

  • id

    • 如：通过 id main 定位一个 div，并设置它的内边距

          #main {  padding-bottom:2em;  padding-top:3em; }
      

  • class

    • 如：把所有拥有类 large 的元素字体大小设置为 14pt

          .large {  font-size:14pt; }
      

  • 标签名

    • 如：把所有的段落（p 标签）的颜色变成了灰色

          p {  color:#999999; }
      

  • 父子标签关系

    • 如：div 是 body 元素的直接子元素；现在要隐藏下标签 div

          body > div {  display:none; }
      

  • 元素属性值

    • 如：设置 name 属性为 email 的 input 元素的宽度为 150px

          input[name="email"] {  width:150px; }
      

JavaScript

使用方式

• 最简单使用方式

  • 把 JS代码放进 HTML文档的 script 标签里

      <script type="text/javascript" language="javascript">  
            alert("Hello world!");  
            //简单的提示对话框 
      </script>
    

• 引入外部的 js 文件

  • 通过设置 script 标签的源属性 src="filename.js"来引入外部的 js 文件

      <script src="js/app.js" type="text/javascript" language="javascript"> </script>
    

• 其他运行 JavaScript 代码的方式

  • 内联的代码
  • 使用Webkit的浏览器开发者工具和 FireBug控制台
  • Node.js的交互命令行

JavaScript 对象/类（本身没有类；对象继承自对象）里一些主要的类型

• 数值原始值

  • 数值

      var num = 1;
    

• 数值对象

  • 数值对象和它的方法

      var numObj = new Number("123"); //数值对象 
      var num = numObj.valueOf(); //数值原始值 
      var numStr = numObj.toString(); //字符串表示
    

• 字符串原始值

  • 包含在单引号或者双引号之间的字符序列

      var str = "some string"; 
      var newStr = "abcde".substr(1,2); 
      // stringObject.substr(start,length)
      // substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
    

• 字符串对象

  • 字符串对象有很多非常有用的方法，比如 length、match

      var strObj = new String("abcde");//字符串对象 
      var str = strObj.valueOf(); //字符串原始值 
      strObj.match(/ab/); 
      str.match(/ab/); //两种调用都可行 
      // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
    

• 正则表达式对象

  • 正则表达式对象是特殊的字符模式，以方便搜索、替换以及测试字符串

      var pattern = /[A-Z]+/; 
      str.match(/ab/);
    

• 特殊类型

  • 可以使用 typeof 对象来看看它的类别

      NaN ，null ，undefined， function
    

• 全局方法

  • 可以在代码的任意地方调用这些方法，因为它们是全局方法

      1 decodeURI 
      2 decodeURIComponent 
      3 encodeURI 
      4 encodeURIComponent 
      5 eval 
      6 isFinite 
      7 isNaN 
      8 parseFloat 
      9 parseInt
      10 uneval 
      11 Infinity 
      12 Intl
    

• JSON

  • JSON库帮助我们序列化和解析 JavaScript对象

      var obj = JSON.parse('{a:1, b:"hi"}'); 
      var stringObj = JSON.stringify({a:1,b:"hi"});
    

• 数组对象

  • 数组是从 0 开始索引的列表。如创建一个数组

      var arr = new Array(); 
      var arr = ["apple", "orange", 'kiwi"]; 
      // 数组有一些非常好用的方法，比如 indexOf、slice、join
    

• 数据对象

  var obj = {name: "Gala", url:"img/gala100x100.jpg",price:129} 
  或 
  var obj = new Object();
  

• 布尔原始值和对象

  • 就像字符串和数值，布尔值既可以是原始值，也可以是对象

      var bool1 = true; 
      var bool2 = false; 
      var boolObj = new Boolean(false);
    

• 日期对象

  • 日期对象帮助我们处理日期和时间

      var timestamp = Date.now(); 
      // 1368407802561 
      var d = new Date(); 
      //Sun May 12 2013 18:17:11 GMT-0700 (PDT)
    

• 数学对象

  • 数学常量和一些方法

      var x = Math.floor(3.4890); 
      var ran = Math.round(Math.random()*100);
    

• 浏览器对象

  • 用于访问浏览器及其一些属性，比如 URL

      window.location.href = 'http://rapidprototypingwithjs.com'; console.log("test");
    

• DOM对象

  document.write("Hello World"); 
  var table = document.createElement('table'); 
  var main = document.getElementById('main');
  

函数式和原型语言是 JS的另一个重要特性

• 一般的函数声明语法

  function Sum(a, b) {  
        var sum = a + b;  
        return sum; 
  } 
  console.log(Sum(1, 2));
  

• 函数可以用作变量和对象

  • 比如，一个 函数可以作为另一个函数的参数传递

      var f = function(str1) {  
            return function(str2) {  
            return str1 + ' ' + str2;  }; 
      }; 
      var a = f('hello'); 
      var b = f('goodbye'); console.log((a('Catty')); console.log((b('Doggy'));
    

对象继承方式

• 类式继承
• 伪类继承
• 函数式继承