JavaScript入门
===============

JavaScript 属于脚本语言，通常在浏览器上解释执行。 通常用于可视化和交互软件。

JavaScript是一种“动态类型语言”，这意味着不同于其他一些语言(如C、JAVA)，
您不需要指定变量将包含什么数据类型.


变量（Variable）
----------------

变量 是存储数据的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称 ::

    let myVariable;
    var avar;

var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，
但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

变量存储值的类型有字符串、数字、布尔值、数组及对象。

* String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。例如 ::
  
   let myVariable = 'hello';

* Number	数字：无需引号。	:: 
   
   let myVariable = 10;

* Boolean	布尔值（真/假）： true/false  是 JavaScript 里的特殊关键字，无需引号。	例如 ::
    
	let myVariable = true;
 
* undefined  未定义的，例如变量声明了但未赋值。
  ::
  
   let myVariable;
   
* null  特指对象的值未设置。在布尔运算中被认为是false。
 
* Array	数组：用于在单一引用中存储多个值的结构。	::

    let myVar = [1, 'hello', 'world', 10];
 
数组元素引用方法：  myVariable[0], myVariable[1] 

* Object 对象：JavaScript 里一切皆对象，一切皆可储存在变量里。

   let myVariable = document.querySelector('h1');

现在推荐都使用let来声明变量, 因为它限制较为严格，对于重复定义变量，会立即出错。

查看变量类型 typeof myVariable

变量也可以隐式声明，例如直接赋值 ::
   
    a = 10

	
常量
------

通过 const 定义的变量与 let 变量类似，但不能重新赋值, 可以称为常量。


基本代码规范
-------------

*  赋值符号两边留一个空格
*  每行结束添加一个分号

   let aa = 1;
   


运算符
--------

* 等于， ===, 测试两个值是否相等，并返回一个 true/false （布尔）值。

* 不等于 "!==", 和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。	


在代码中使用==和!=来判断相等和不相等，也是JavaScript中的有效运算符，但它们与===/!==不同，
前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。

例如 ::
    var a="123"
	var b=123
	c = (a==b)
	d = (a===b)
	
* instanceof 是否是对象的实例。

逻辑运算符
-----------

逻辑运算符共有三个， 分别为"&&"、"||"和 "!"。

* "&&", 逻辑与, 如果第一个为真，则表达式值为第二个参数， 否则为第一个参数值。
* "||", 逻辑或, 如果第一个为假，则表达式值为第一个参数，否则为第二个参数值。
* "!", 逻辑非， 取反。

示例代码 ::
    
	let a = 3 && 4
	let b = 0 || 3
	let c = !b 

类型转换
----------

* Number函数， 类型转换为数字。

	
字符串
-------

可以选择单引号或双引号来包裹字符串。

Number函数用来将字符串转换为数字类型 ::

	let myString = '12345';
	let mm = Number(myString);
	typeof mm;

另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串 ::
 
	let myNum = 12345;
	let ss = myNum.toString();
	typeof ss;


获得字符串的长度, 使用 length 属性. 输入以下的两行代码 ::

	let s1 = 'hello world';
	s1.length;
	
取子字符串，使用slice方法，并传递上下索引 ::

    let s1 = 'hello world';
    s1.slice(3);     //从3到结尾
	s1.slice(3,5);   //从3到5
	s1.slice(-3,-1); //从-3到-1
	
	
* charAt() 访问字符串的指定位置 ::

  let str = "Hello OpenWrt"
  str.charAt(6)

* indexOf方法查询子字符串首次出现的位置， 返回-1, 表示没有此字符串。
  可以指定查找的起始位置 ::
  
  let str = "Hello Beijing"
  str.indexOf("Bei")
  str.indexOf("Bei", 7)
  
* 替换子字符串， replace方法，并返回替换后的字符串。

* split() 字符串分割，返回数组。传递一个分割字符sep。

* search() 查找字符串的返回索引，找不见返回-1

数组
-----

数组是一个包含了多个值的对象, 数组元素可以为任意类型，有一个length属性获取数组长度。

   var arr = [1, 3, 5];
   var arr2 = [];
   var arr3 = new Array();
   var arr4 = new Array(1,2,3,4);
   var arr5 = new Array(10);       //长度为10的空数组。
   var arr6 = [1,2,3,,,10];        //数组长度6    
   
   arr[10] = "hello";  //长度为11， 前面填undefiled


数组相关方法：

	 
* push() 在末尾增加元素，增加一个或多个，并返回数组元素个数。

* pop() 弹出最后一个元素并返回。

* shift() 弹出第一个元素并返回。

* unshift() 在数组最前面添加元素，并返回元素个数。

* reverse()  原地逆转数组元素的顺序。

* slice() 通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容。此方法会改变原数组。

通常用于在中间添加元素

原型如下 ::

   array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  
  - start 起始位置, 可以取负值，表示length+start位置，例如-1表示倒数最后一个位置。
  - deleteCount 删除的个数。
  - item1 ... 添加的部分。

* sort()  数组进行排序，默认正序。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码
  单元值序列时构建的
  可以有一个参数是比较函数。
  
  arr = [1, 10, 20, 5, 9, 0]
  function compareFn(a, b){
     if(a>b) return 1;
	 if(a==b) return 0;
	 return -1;
  }
  arr.sort(compareFn);
  
* toString() 方法, 不需要参数，转化为字符串。

* concat()  连接两个数组，并返回。不改变原有数组。

* slice()  截取指定范围数组并返回，不改变原数组。 begin,表示开始位置，end表示结束位置。

     arr.slice([begin[, end]])

* join() 数组转化为字符串，需要一个参数 ::
 
     let myNewString = myArray.join(',');




数组去重
----------

利用哈希



循环
-----

* while循环
* do while循环
* for循环 
* for in循环，通常用于遍历数组中的所有数组元素，或者遍历对象的所有属性。
::

   for 变量  in 对象 {
      执行语句块
   }
遍历为数组的下标。

函数
------

函数定义以function开头，函数参数类型不需要定义，没有返回值定义。示例如下 ::

	function multiply(num1, num2) {
	  let result = num1 * num2;
	  return result;
	}
	
匿名函数，通常赋值给一个变量 ::

    var f = function (参数列表){
	}

::
    var f = new Function (参数列表)( 函数执行体 )

函数调用
----------

* 直接调用，函数默认都为windows对象下。采用window.fn(...)形式或fn(...)调用。

* 以call方式调用，形如： fn.call(window,...)调用，形参从第二个开始，

* 以apply方法调用，形如: fn.apply(window,[...])调用, 参数为一个数组。

如果方法想连续调用，那方法返回this。
    return this;

call
-----

apply 
------


立即执行函数
-------------



预编译
-------

js会进行预编译， 系统会把函数声明提升到逻辑的最前面。即函数定义可以放在函数调用的代码块下面。
::

	hello()
    function hello(){
	   console.log("hello world")
	}



事件
-----

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。
最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，
然后点击页面的任意位置 ::

	document.querySelector('html').onclick = function() {
		alert('别戳我，我怕疼。');
	}

将事件与元素绑定有许多方法。在这里选用了 <html> 元素，把一个匿名函数（就是没有命名的函数，
这里的匿名函数包含单击鼠标时要运行的代码）赋值给了 html 的 onclick 属性。


包装类
-------

   var a = new Number(123);
   var str = new String("hello");


	var num = 10;
	num.len = 20;
	console.log(num.len);
	
	var str = "abcd"
	str.length = 2
	console.log(str)
   
Date对象
----------

获取时间 ::

    d = new Data()

    getDate() //返回一个月的某一天，（1-31）
	getMonth() //返回月份 (0-11), 实际情况要加一。
	getFullYear() // 返回4位的年份
	getDay()      // 返回星期几， 0表示星期日，1表示星期一，依次类推。
	
构造一个日期::

	setDate()      //设置天
	setFullYear()  //设置年
	setMonth()    //设置月
	
Math对象
--------

* abs(x)  返回绝对值
* floor(x) 对数进行下舍入
* round(x)  四舍五入到最近的整数。
* round() 返回随机数 （0-1)



DOM表单
--------

表单，form标签

* action 返回该表单的提交地址
* reset() 重置表单
* submit() 提交表单。



JSON
------------

  var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
  
  var str1 = JSON.stringify(obj); //由obj转换为字符串。
  

客户端存储
------------

新流派：Web Storage 和 IndexedDB

现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。

Web Storage API 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。
当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，
这是非常有用的。

IndexedDB API 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的
用户记录到甚至是复杂的数据类型，如音频或视频文件。


Storage.setItem() 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的JavaScript控制台（如果你愿意的话，可以把它的值改为你自己的名字！）

localStorage.setItem('name','Chris');
Storage.getItem() 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。
现在将这些代码输入到你的JavaScript控制台：

var myName = localStorage.getItem('name');
myName
在输入第二行时，您应该会看到 myName变量现在包含name数据项的值。

Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中
删除该数据项。在您的JavaScript控制台中输入以下几行：

localStorage.removeItem('name');
var myName = localStorage.getItem('name');

为每个域名分离储存
每个域都有一个单独的数据存储区(每个单独的网址都在浏览器中加载). 你会看到，
如果你加载两个网站（例如google.com和amazon.com）并尝试将某个项目存储在一个网站上，
该数据项将无法从另一个网站获取。


存储复杂数据 — IndexedDB
''''''''''''''''''''''''''


get
````````````


post
`````````````

echart 
--------

百度前端框架。


JS面试题
--------

1, var和let的区别
2, 匿名函数？
3, 变量类型有几种， 变量的作用域？
4, 闭包



常见问题
-----------

1，出现from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

  答: 这是响应头解决跨域请求问题，通常浏览器不允许跨域请求。
  
  解决方法: 如果是go语言，在服务端将HTTP相应头上加上以下信息 ::

    resp.Header().Set("Access-Control-Allow-Origin", "*")