JavaScript：

参考文章：

  1.  http://www.cnblogs.com/wupeiqi/articles/5369773.html
  2.  http://javascript.ruanyifeng.com/oop/basic.html
  3.  http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html
  4.  http://www.cnblogs.com/wupeiqi/articles/5602773.html

介绍：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。内置支持类型。它解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，

用来给HTML网页增加动态功能。

解释器：浏览器。
代码存在位置：

1）单独的js文件。

2）<head>或者<body>标签内。

推荐在<body>标签底部。

原因：因为如果我们加载的js的代码或者文件比较耗时的话，会导致用户查看不到网页的静态资源。而放在<body>标签底部，即时看不到效果或者效果加载过慢，对用户来说，可以直接看到网页的静态资源。

code：

  1.  <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
  2.  <script>
  3.      alert('123');
  4.  </script>

3）变量定义：

局部变量：var 变量名=xx。

全局变量：变量名=xxx

需要注意：局部变量有var关键字。容易出错！！！！

code：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.  
  9.      <script>
  10.          function f1(){
  11.              var i=;
  12.          }
  13.          alert(i);
  14.      </script>
  15.  </body>
  16.  </html>

由于i我们声明的是局部变量所以alert(i)会报错。

aaarticlea/png;base64,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" alt="" />

5）数据类型：

JavaScript中，数据类型分为：原始类型和对象类型。

原始类型：

　　1：数字

　　2：字符串

　　3：布尔值

对象类型：

　　1：字典

　　2：数组

字典和python里的字典类似。而数组和python里的列表差不多，但并不完全一样。

a:数字：（number）在js中没有浮点型、整型只有数字类型。

  1.  var a=;
  2.  var age=Number()；
  3.  parseInt("")；
  4.  
  5.  parseFloat("1.2")；
  6.  1.2

b：字符串（string）：在python中字符和字符串含义是一样。但是在js中，字符是组成字符串的一部分。

obj.length：字符长度。

  1.  a='tom'
  2.  "tom"
  3.  a.length
  4.

obj.trim：去掉字符前后的空格 字符中间的空格不去掉。

  1.  a=' t o m '
  2.  a.trim()
  3.  "t o m"

obj.trimLeft()去掉左边的空格。

obj.trimRight()去掉右边的空格。

  1.  a=' t o m '
  2.  " t o m "
  3.  a.trimLeft()
  4.  "t o m "
  5.  a=' t o m '
  6.  " t o m "
  7.  a.trimRight()
  8.  " t o m"

charAt(n)获取字符串的第几个字符。n是索引。在js中索引也是从0开始。

  1.  a='evil'
  2.  "evil"
  3.  a.charAt()
  4.  "e

obj.concat(obj2,obj3,obj3......)字符串的拼接，类似python中的+

  1.  a='evil'
  2.  b='man'
  3.  "man"
  4.  t=a.concat(b)
  5.  "evilman"

obj.indexOf(substring,start):求子字符的索引。如果start不指定索引位置，默认是从左 0开始。

  1.  a
  2.  "evil"
  3.  a.indexOf('i')
  4.  
  1.  a='evill'
  2.  "evill"
  3.  a.indexOf('l',)
  4.

obj.lastIndexOf(substring,start):从右边开始查找子字符串。如果不指定位置，默认从-1开始查找。

  1.  a='mimi'
  2.  a.lastIndexOf('m')
  3.  
  1.  a.lastIndexOf('m',)
  2.

obj.substring(from,to):从from到to之间的字符输出。不写的话，默认是输出所有字符。

  1.  a.substring(,)
  2.  "im"
  3.  a.substring()
  4.  "mimi"

obj.slice(start,end)：切片，和python切片一样；左闭右开。

  1.  a
  2.  "mimi"
  3.  a.slice(,-)
  4.  "im

obj.toLowercase();obj.toUpercase()字符串的转换小写、转换大写。

  1.  a.toLowerCase()
  2.  "mimi"
  3.  a.toUpperCase()
  4.  "MIMI"
  5.  a="MIMI"
  6.  "MIMI"
  7.  a.toLowerCase()
  8.  "mimi"

obj.split()以什么进行分割。

  1.  a='mi,mi'
  2.  "mi,mi"
  3.  a.split(',')
  4.  ["mi", "mi"]

写一个跑马灯:

code:

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>test</title>
  6.  </head>
  7.  <body>
  8.  <span id="sex" style="background-color: yellow">欢迎苍老师来京东视察</span>
  9.  <script>
  10.      //1000单位是毫秒 湖之一调用函数用引号。
  11.      setInterval('f1()',);
  12.      function f1() {
  13.          //获取对应的<div>标签
  14.          var tag = document.getElementById('sex');
  15.  // 获取对应的<div>标签的内容。
  16.          var tex = tag.innerText;
  17.  //    获取字符串的第一个字符。
  18.          var fitst = tex.charAt();
  19.  //        获取剩余最后字符。
  20.          var last_tex = tex.substring(, tex.length);
  21.          var new_str = last_tex.concat(fitst);
  22.  //        给id=sex标签的text文件重新赋值。
  23.          tag.innerText = new_str;
  24.      }
  25.  
  26.  </script>
  27.  </body>
  28.  </html>

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAqCAIAAACcKEYsAAACQElEQVR4nO2UYW5DIQyDuf95pl5v+zFpSoAYG3jdpNlC1SsvBCf52vb6eHl5/az2aVlBBsJKMhBWkoGwkgyElWQgrCQDYSUZCCvJQFhJUyDaz2qtxa/TnXExMWrkyUH1lrs13jp+eGNYfwCI6tT3PtA7Z6wGxzBsnte2K2VSIhCCfaJm7FUpgw3b838OhPQWJKxMLpPEyO45F/ur/xDTeBWIk+mSk+Dzk9MaX3Ux+Gs1ZlDv9KLZ5g0gQOXSvPeAABmuLykz6M+0tDhLPN3uCqlRDwKBPY11LgXaVwXjOveM8QMm0QGlVcGgBCnbu4FgWo89MX1ftgC8BUBs798FIhKAycBHqsgO9AeBGB2onXoaCHCXBIT0E4xjII1Vs1/65zF9FohY7bQX/CuwQz7wOgFCzTx+AiBiZJd22jSVngeBiP5Aa6Zt6qwsS2UewPBAd/CM8cHl7RiL1iYZSLcjPWCHNDYc3PqHqMqoDMXrl00/AQI0fW/ApDEmZ4XC2JwloJUTEgh46nkgyCmSZYPKtwdWPd+KJy0tc1a3S35WwZeAiM4OewcOVjR0v6Tumc9f+cEBy/wMEGTT1FokkzeBUGve8rpGgQyTCCDzqwPm/VR9U80wkTeBYAqoRGbArdnooNIpFA9uWf5szv0wNeL+hykcAMEPWFqYp3MgToJVD9Ng3CXeD8+9smQgrP8rA2ElGQgryUBYSQbCSjIQVpKBsJIMhJVkIKwkA2ElGQgryUBYSQbCSjIQVpKBsJIMhJX0BVYj2HdPh1UeAAAAAElFTkSuQmCC" alt="" />

注意：

在写js代码的时候，每行结束用分号结束。因为css可以进行压缩。如果js压缩成一行的时候，如果不行；分号进行分割的话，会报错。~~~！！！！！！！！

c:布尔类型。

== ：比较2个值是否相等。

!= ：不等于。

===：比较值和类型相等。

!===:值和类型不相等。

||：或。

&&：且。

注意：在js中，慎用==。因为在js中比较只要值相等类型不一样也是相等！！！

  1.  a='';
  2.  ""
  3.  b=;
  4.  
  5.  a==b;
  6.  true

如果比较2个对象的值和类型是否相等。用===

  1.  a='';
  2.  ""
  3.  b=;
  4.  
  5.  a==b;
  6.  true
  7.  a===b;
  8.  false

同样!=和!==也需要注意：前一个比较值，后一个比较值和类型！！！

  1.  a='';
  2.  ""
  3.  b=;
  4.  
  5.  a==b;
  6.  true
  7.  a===b;
  8.  false
  9.  a!==b;
  10.  true
  11.  a!=b;
  12.  false

d:数组。js中的数组和python中的列表类型。但是也有不同。

常见方法：

obj.length :数组大小。

  1.  a=[,,,]
  2.  [, , ]
  3.  a.length
  4.

obj.push()：数组尾部追加元素。和python中append方法类型。

obj.pop()：获取数组尾部一个元素。并删除！！！！

obj.unshift():头部插入元素。

obj.shift()：头部删除元素。

  1.  a
  2.  [, , ]
  3.  a.push()
  4.  
  5.  a
  6.  [, , , ]
  7.  a.pop()
  8.  
  9.  a.unshift()
  10.  
  11.  a
  12.  [, , , ]
  13.  a.shift()
  14.  
  15.  a
  16.  [, , ]

obj.splice(start,deletcount,value....)插入、删除、替换数组中的元素。

　　1：obj.splic(start,0,value):插入元素。

  1.  a=[,,,]
  2.  [, , , ]
  3.  a.splice(,,)
  4.  []
  5.  a
  6.  [, , , , ]

　　2：obj.splic(start,1,value):替换数组中元素。

  1.  a
  2.  [, , , , ]
  3.  a.splice(,,)
  4.  []
  5.  a
  6.  [, , , , ]

　　3：obj.splic(start,1) 删除元素，1表示一个  2表示删除2个元素  start起始元素。

  1.  a=[, , , , ];
  2.  [, , , , ]
  3.  a.splice(,)
  4.  []
  5.  a
  6.  [, , , ]
  1.  [, , , ]
  2.  a.splice(,)
  3.  [, ]
  4.  a
  5.  [, ]

obj.slice():数组切片。和python切片一样。

  1.  a=[, , , , ];
  2.  [, , , , ]
  3.  a.slice(,)
  4.  [, , ]

obj.reverse():数组反转。

  1.  a=[, , , , ];
  2.  [, , , , ]
  3.  a.reverse()
  4.  [, , , , ]

obj.join():将数组的元素连接起来。python中字符串join和js不一样，python中'连接符'.join(x)，而js相反。

  1.  a
  2.  [, , , , ]
  3.  a.join('|')
  4.  "4|9|2|0|1"

obj.contact(val,val1...)：连接数组。

  1.  a=['a','b']
  2.  ["a", "b"]
  3.  b=[,]
  4.  [, ]
  5.  a.concat(b)
  6.  ["a", "b", , ]

obj.sort():对数组元素进行排序。

  1.  t
  2.  ["a", "b", , ]
  3.  t.sort()
  4.  [, , "a", "b"]

JSON.stringify(obj):反序列化，将对象转换成字符串。

JSON.parse(str):序列化，将字符串转换对应的数据类型。

  1.  t
  2.  [, , "a", "b"]
  3.  JSON.stringify(t)
  4.  "[1,2,"a","b"]"
  5.  str=JSON.stringify(t)
  6.  "[1,2,"a","b"]"
  7.  JSON.parse(str)
  8.  [, , "a", "b"]

e:字典。js中的字典和python中字典类同。

  1.  a={'a':,'g':}
  2.  Object {a: , g: }
  3.  
  4.  a['g']
  5.

f:转义：包括2种，一种是URL的转义，一种是字符串的转义。

URL转义：

  1.  decodeURI( )                   URl中未转义的字符
  2.  decodeURIComponent( )   URI组件中的未转义字符
  3.  encodeURI( )                   URI中的转义字符
  4.  encodeURIComponent( )   转义URI组件中的字符

code：

  1.      <script>
  2.          var url="https://www.baidu.com/?n=王宝强;";
  3.          var t=encodeURI(url);//将字符串转义
  4.          console.log(t);//输出到浏览器console控制台。
  5.          var s=decodeURI(t);
  6.          console.log(s);
  7.          var n=encodeURIComponent(url);
  8.          console.log(n)
  9.      </script>
  1.  s10.html: https://www.baidu.com/?n=%E7%8E%8B%E5%AE%9D%E5%BC%BA;
  2.  s10.html: https://www.baidu.com/?n=王宝强;
  3.  s10.html: https%3A%2F%2Fwww.baidu.com%2F%3Fn%3D%E7%8E%8B%E5%AE%9D%E5%BC%BA%3B

字符串的转义：

  1.  escape( )                         对字符串转义
  2.  unescape( )                     给转义字符串解码
  3.  URIError                         由URl的编码和解码方法抛出
  1.  escape(' ')
  2.  "%20"
  1.  unescape("%20")
  2.  " "

g:eval:js中的eval不仅仅可以处理表达式。也可以处理复杂for循环。相当于python中的evial和exec的结合体。

  1.  eval('1-2')
  2.  -

h：js的时间处理。

当js创建新的对象 需要用new关键字 类似于要创建变量需要var关键字一样。

  1.  t=new Date
  2.  Fri Aug   :: GMT+ (中国标准时间)
  3.  t.getFullYear();
  4.  
  5.  t.getMonth();
  6.  
  1.  t=new Date
  2.  Fri Aug   :: GMT+ (中国标准时间)
  3.  t.getMonth();
  4.  
  5.  t.getMinutes;
  6.  getMinutes() { [native code] }
  7.  t.getMinutes();
  8.  
  9.  t.setMinutes();//直接设置分钟。
  10.  
  11.  t
  12.  Fri Aug   :: GMT+ (中国标准时间)
  13.  t.getMinutes();
  14.  
  15.  t=new Date
  16.  Fri Aug   :: GMT+ (中国标准时间)
  17.  t.setMinutes(t.getMinutes() +);//设置比t时间快20分钟
  18.  
  19.  t.getMinutes();
  20.

6：语句：

if 和switch 语句：

  1.  if(条件){
  2.  
  3.      }else if(条件){
  4.  
  5.      }else{
  6.  
  7.      }
  8.  
  9.  if语句
  1.  switch(name){
  2.          case '':
  3.              age = ;
  4.              break;
  5.          case '':
  6.              age = ;
  7.              break;
  8.          default :
  9.              age = ;//匹配case条件，最后没有匹配的话，匹配default语句。
  10.      }
  11.  
  12.  switch语句

循环语句;

for循环：

1：

  1.      <script>
  2.          var  a=[,,];
  3.          for (var i =;i< a.length;i++){
  4.              console.log(i,a[i])
  5.          }
  6.      </script>

2：推荐使用第2种。

  1.      <script>
  2.          var  a=[,,];
  3.          for (var i in a){
  4.              console.log(i,a[i])
  5.          }
  6.      </script>

字典循环的，使用的是第2中for循环。循环字典中的key值。

  1.      <script>
  2.          var  a={'k1':,'k2':};
  3.          for (var i in a){
  4.              console.log(i,a[i])
  5.          }
  6.      </script>
  7.  k1
  8.  k2

while循环：

  1.  <script>
  2.      var i=;
  3.      while (i<){
  4.          console.log(i);
  5.          i++;
  6.      }
  7.  </script

也有break和continue。

7：异常处理：

语法：

  1.  try {
  2.      //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
  3.  }
  4.  catch (e) {
  5.      // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
  6.      //e是一个局部变量，用来指向Error对象或者其他抛出的对象
  7.  }
  8.  finally {
  9.       //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
  10.  }

对于js创建对象需要new关键字。

主动抛出异常：

throw  new Error('xxxx')

和python不一样，python主动抛出异常：raise Exception('xxx')

7:函数：三种形式。

  1.  //普通函数
  2.      function fus() {
  3.          console.log('fus');
  4.          return ''
  5.      }
  6.      var a = fus();
  7.      console.log(a);
  8.      function aaa(arg) {
  9.          console.log(arg);
  10.      }
  11.      aaa();
  12.  //匿名函数
  13.      var aas = function (arg) {
  14.          console.log(arg);
  15.      };
  16.      aas();
  17.  //自执行函数
  18.      (function (arg) {
  19.          console.log(arg)
  20.      })();  //223为参数

函数的作用域：

http://www.cnblogs.com/wupeiqi/p/5649402.html

8：面向对象：

  1.  //面向对象
  2.  function MyFoo(name,age) {
  3.      this.Name = name;
  4.      this.Age = age;
  5.      this.Func = function (arg) {
  6.          return this.Name + arg;
  7.      }
  8.  }
  9.  
  10.  var obj = new MyFoo('liu',);
  11.  var ret = obj.Func('meide');
  12.  console.log(ret);

模拟对话框：

1：

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8" />
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6.      <title> 对话框 </title>
  7.  <style type="text/css">
  8.  html,body {
  9.      height: %;
  10.  }
  11.  .dialog {
  12.      position: fixed;
  13.      top: %;
  14.      left: %;
  15.      margin-left: ;
  16.      margin-top: ;
  17.      width: ;
  18.      height: ;
  19.      overflow: hidden;
  20.      border: 1px solid #;
  21.      text-align: center;
  22.      border-radius: 25px;
  23.      box-shadow: 5px 5px 5px #;
  24.      background: #88f;
  25.      transition: all .3s;
  26.  }
  27.  .dialog .close {
  28.      position: absolute;
  29.      bottom: 10px;
  30.      left: %;
  31.      margin-left: -25px;
  32.      width: 50px;
  33.      height: 20px;
  34.      border: 1px solid #;
  35.      background: #;
  36.      color: #fff;
  37.      text-align: center;
  38.  }
  39.  #dialogswitch {
  40.      display: none;
  41.  }
  42.  #dialogswitch:checked+.dialog {
  43.      margin-left: -150px;
  44.      margin-top: -100px;
  45.      width: 300px;
  46.      height: 200px;
  47.  }
  48.  
  49.  </style>
  50.  </head>
  51.  <body>
  52.  <label for="dialogswitch">点击弹出对话框</label>
  53.  <input type="checkbox" id="dialogswitch" />
  54.  <div class="dialog">
  55.      <h3>对话框</h3>
  56.      <input type="text" value="输入内容"/>
  57.      <label class="close" for="dialogswitch">commit</label>
  58.  </div>
  59.  </body>
  60.  </html>

2：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.  <input type="button" onclick="duihua()" value="点击显示提示框" />
  9.  <script>
  10.      function duihua()
  11.    {
  12.    var s=prompt("请输入提交内容");
  13.    if (s!=null && t!="")
  14.      {
  15.      document.write("提交内容：" + t);
  16.      }
  17.    }
  18.  </script>
  19.  </body>
  20.  </html>

终结版：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          .hide{
  8.              display: none !important;
  9.          }
  10.          .shade{
  11.              position: fixed;
  12.              top:;
  13.              bottom: ;
  14.              left: ;
  15.              right: ;
  16.              /*background-color: black;*/
  17.              /*opacity: 0.6;*/
  18.              background-color: rgba(,,,.);
  19.              z-index: ;
  20.          }
  21.          .modal{
  22.              height: 200px;
  23.              width: 400px;
  24.              background-color: white;
  25.              position: fixed;
  26.              top: %;
  27.              left: %;
  28.              margin-left: -200px;
  29.              margin-top: -100px;
  30.              z-index: ;
  31.          }
  32.      </style>
  33.  </head>
  34.  <body>
  35.      <div id="o" style="width: 2000px"> </div>
  36.      <input  id='cc'type="button" value="点击" onclick="ADD()"/>
  37.      <div id="p" class="shade hide"></div>
  38.      <div id="l" class="modal hide" >
  39.          <a href="javascript:void(0)" onclick="HIDE()">取消</a><!--javascript:void()表示标签不执行任何操作相当于python里的pass
  40.           onclick 绑定点击事件-->
  41.      </div>
  42.      <script>
  43.          function ADD() {
  44.              var t=document.getElementById('p');
  45.              var t1=document.getElementById('l');
  46.              t.classList.remove('hide');//显示遮罩层和对话框
  47.              t1.classList.remove('hide');
  48.          }
  49.          function HIDE() {
  50.              var t=document.getElementById('p');
  51.              var t1=document.getElementById('l');
  52.              t.classList.add('hide');//显示遮罩层和对话框
  53.              t1.classList.add('hide');
  54.          }
  55.      </script>
  56.  </body>
  57.  </html>

前端：js的更多相关文章

  1. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  2. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  3. json处理总结(前端js和后端java)

    前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...

  4. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  5. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

  6. RSA加密前端JS加密，后端asp.net解密，报异常

    RSA加密前端JS加密,后端asp.net解密,报异常 参考引用:http://www.ohdave.com/rsa/的JS加密库 前端JS加密代码: function GetChangeStr() ...

  7. 前端js的书写规范和高效维护的方案_自我总结使用的方案

    作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...

  8. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  9. 前端js上传文件 到后端接收文件

    下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...

  10. Gridview 行变色和行按钮调用前端js

    1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...

随机推荐

  1. js对特殊字符转义、时间格式化、获取URL参数

    /*特殊字符转义*/ function replace_html(str) { var str = str.toString().replace(/&/g, "&" ...

  2. 大数的除法 不使用BigInteger Java实现

    import java.util.Arrays; public class Solution { public void div(String a, String b) { char[] chara ...

  3. 《JavaScript高级程序设计》读书笔记--（4）对象的创建

    ECMAScript支持面向对象(OO)编程,但不使用类或者接口.对象可以在代码执行过程中创建或增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以采用下列模式创建对象. 对象的创建 工厂模 ...

  4. Ubuntu 使用Gparted工具扩大第一分区方法步骤

    Ubuntu 使用Gparted工具扩大第一分区方法步骤 环境:vmware9.01 .ubuntu12.04 需要的工具: 1.U盘,Universal-USB-Installer-1.9.6.4. ...

  5. Linux学习 ： 裸板调试 之 配置UART

    1.UART原理说明 发送数据时,CPU将并行数据写入UART,UART按照一定的格式在一根电线上串行发出:接收数据时,UART检测另一根电线上的信号,串行收集然后放在缓冲区中,CPU即可读取UART ...

  6. Titanium studio介绍

    1.Titanium Studio 概述 TitaniumStudio是Appcelerator公司开发的一款基于Eclipse的,使开发者利用Javascript来快速开发移动应用程序的跨平台的集成 ...

  7. 跨域资源共享(CORS)问题解决方案

    CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...

  8. hightchart属性（更新中...）

    legend:{ layout: 'vertical', //legend中内容垂直放置 align: 'right', //放在图表右边 verticalAlign: 'middle',    // ...

  9. 关于 QImage::Format_Mono

    QImage::Format_Mono 为通常所讲的位图模式, QT中本提供了 QBitmap 来作为位图相关的应用, 但其最大弊端在于无法操作图片中 pixel 本身或说相关方法太过繁琐. Mono ...

  10. CMD和AMD区别的概括

    CMD和AMD区别   AMD CMD 关于依赖的模块 提前执行(不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)), 延迟执行 关于依赖的位置 依赖前置 ...