字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：

實例

var x; // x 為 undefined

var x = 5; // 現在 x 為數字

var x = "John"; // 現在 x 為字符串

JavaScript 字符串

字符串是存儲字符（比如 "Bill Gates"）的變量。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號：

實例

var carname="Volvo XC60";

var carname='Volvo XC60';

您可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：

實例

var answer="It's alright";

var answer="He is called 'Johnny'";

var answer='He is called "Johnny"';

JavaScript 數字

JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：

實例

var x1=34.00; //使用小數點來寫

var x2=34; // //不使用小數點來寫

極大或極小的數字可以通過科學（指數）計數法來書寫：

實例

var y=123e5; // 12300000

var z=123e-5; // 0.00123

JavaScript 布爾

布爾（邏輯）只能有兩個值：true 或 false。

var x=true;

var y=false;

布爾常用在條件測試中。您將在本教程稍后的章節中學到更多關于條件測試的知識。

JavaScript 數組

下面的代碼創建名為 cars 的數組：

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

實例

var cars=["Saab","Volvo","BMW"];

數組下標是基于零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。

JavaScript 對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。

空格和折行無關緊要。聲明可橫跨多行：

var person={

firstname : "John",

lastname : "Doe",

id : 5566

};

對象屬性有兩種尋址方式：

實例

name=person.lastname;

name=person["lastname"];

Undefined 和 Null

Undefined 這個值表示變量不含有值。

可以通過將變量的值設置為 null 來清空變量。

實例

cars=null;

person=null;

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：

var carname=new String;

var x= new Number;

var y= new Boolean;

var cars= new Array;

var person= new Object;

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

件是 Web 開發的方向，現在的熱點是 JavaScript 組件，但是 HTML 組件未來可能更有希望。 本文就介紹 HTML 組件的基礎知識：自定義元素（custom elements）。

一、瀏覽器處理

我們一般都使用標準的 HTML 元素。

<p>Hello World</p>

上面代碼中，<p>就是標準的 HTML 元素。

如果使用非標準的自定義元素，會有什么結果？

<greeting>Hello World</greeting>

上面代碼中，<greeting>就是非標準元素，瀏覽器不認識它。這段代碼的運行結果是，瀏覽器照常顯示Hello World，這說明瀏覽器并沒有過濾這個元素。

現在，為自定義元素加上樣式。

greeting {
 display: block;
 font-size: 36px;
 color: red;
}

運行結果如下。

接著，使用腳本操作這個元素。

function customTag(tagName, fn){
 Array
 .from(document.getElementsByTagName(tagName))
 .forEach(fn);
}
function greetingHandler(element) {
 element.innerHTML = '你好，世界';
} 
customTag('greeting', greetingHandler);

運行結果如下。

這說明，瀏覽器對待自定義元素，就像對待標準元素一樣，只是沒有默認的樣式和行為。這種處理方式是寫入 HTML5 標準的。

“User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.”

上面這段話的意思是，瀏覽器必須將自定義元素保留在 DOM 之中，但不會任何語義。除此之外，自定義元素與標準元素都一致。

事實上，瀏覽器提供了一個HTMLUnknownElement對象，所有自定義元素都是該對象的實例。

var tabs = document.createElement('tabs');
tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true

上面代碼中，tabs是一個自定義元素，同時繼承了HTMLUnknownElement和HTMLElement接口。

獲取方式：

1.在你手機的右上角有【關注】選項，或點擊我的頭像，點擊關注！（關注我）

2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信發我：編程

電腦已經設置好了關鍵詞自動回復，自動領取就好了！這幾天上萬個消息，真的回復不過來，所以回復的時候請注意關鍵詞！

其實做為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要這里請私信我“編程”不管你是小白還是大牛歡迎入住大家一起交流成長。小編會在里面不定期分享干貨源碼，包括我精心整理的一份零基礎教程。歡迎各位感興趣的的小伙伴。

學習思路：

二、HTML import

有了自定義元素，就可以寫出語義性非常好的 HTML 代碼。

<share-buttons>
 <social-button type="weibo">
 <a href="...">微博</a>
 </social-button>
 <social-button type="weixin">
 <a href="...">微信</a>
 </social-button>
</share-buttons>

上面的代碼，一眼就能看出語義。

如果將<share-buttons>元素的樣式與腳本，封裝在一個 HTML 文件share-buttons.html之中，這個元素就可以復用了。

使用的時候，先引入share-buttons.html。

<link rel="import" href="share-buttons.html">

然后，就可以在網頁中使用<share-buttons>了。

<article>
 <h1>Title</h1>
 <share-buttons/>
 ... ...
</article>

HTML imports 的更多用法可以參考教程（1，2）。目前只有 Chrome 瀏覽器支持這個語法。

三、Custom Elements 標準

HTML5 標準規定了自定義元素是合法的。然后，W3C 就為自定義元素制定了一個單獨的 Custom Elements 標準。

它與其他三個標準放在一起—- HTML Imports，HTML Template、Shadow DOM—-統稱為 Web Components 規范。目前，這個規范只有 Chrome 瀏覽器支持。

Custom Elements 標準對自定義元素的名字做了限制。

“自定義元素的名字必須包含一個破折號（-）所以<x-tags>、<my-element>和<my-awesome-app>都是正確的名字，而<tabs>和<foo_bar>是不正確的。這樣的限制使得 HTML 解析器可以分辨那些是標準元素，哪些是自定義元素。”

注意，一旦名字之中使用了破折號，自定義元素就不是HTMLUnknownElement的實例了。

var xTabs = document.createElement('x-tabs');
xTabs instanceof HTMLUnknownElement // false
xTabs instanceof HTMLElement // true

Custom Elements 標準規定了，自定義元素的定義可以使用 ES6 的class語法。

// 定義一個 <my-element></my-element>
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

上面代碼中，原生的window.customElements對象的define方法用來定義 Custom Element。該方法接受兩個參數，第一個參數是自定義元素的名字，第二個參數是一個 ES6 的class。

這個class使用get和set方法定義 Custom Element 的某個屬性。

class MyElement extends HTMLElement {
 get content() {
 return this.getAttribute('content');
 }
 set content(val) {
 this.setAttribute('content', val);
 }
}

有了這個定義，網頁之中就可以插入<my-element>了。

<my-element content="Custom Element">
 Hello
</my-element>

處理腳本如下。

function customTag(tagName, fn){
 Array
 .from(document.getElementsByTagName(tagName))
 .forEach(fn);
}
function myElementHandler(element) {
 element.textConent = element.content;
}
customTag('my-element', myElementHandler);

運行結果如下。

ES6 Class 的一個好處是，可以很容易地寫出繼承類。

class MyNewElement extends MyElement {
 // ...
}
customElements.define('my-new-element', MyNewElement);

今天的教程就到這里，更多用法請參考谷歌的官方教程。