獲取input輸入框的內容「js獲取input輸入的值」

本節是第四講的第十三小節，上一節我們為大家介紹了JavaScript事件的概念，由於對象在JavaScript中有著舉足輕重的作用，本節以及後面幾節課將著重介紹JavaScript中的對象，本節為大家介紹JavaScrip對象的基礎概念。

對象(Object)基礎

對象是一個包含相關數據和方法的集合（通常由一些變數和函數組成，我們稱之為對象裡面的屬性和方法）。對象定義如下：

var objectName = {
member1Name : member1Value,
member2Name : member2Value,
member3Name : member3Value
};

以下是一個具體的實例：

var person = {
name : [‘Bob’, ‘Smith’],
age:32,
gender: ‘male’,
greeting: function() {
alert(‘Hi! I’m ‘ + this.name[0] + ‘.’);
}};

對象成員的值可以是任意的，在我們的person對象里有數字(Number)，字元串(string)，數組(array)，函數(function)。前3個成員是資料項目，被稱為對象的屬性(property)，greeting成員是函數，允許對象對資料做一些操作，被稱為對象的方法(method)。

點表示法(Dot notation)

使用了點表示法(dot notation)來訪問對象的屬性和方法。對象的名字表現為一個命名空間(namespace)，它必須寫在第一位——當你想訪問對象內部的屬性或方法時，然後是一個點(.)，緊接著是你想要訪問的項目，標識可以是簡單屬性的名字(name)，或者是數組屬性的一個子元素，又或者是對象的方法調用。例如：person.name[0]，person.gender，person.greeting()

子命名空間(Sub-namespaces)

我們將上面person對象裡面的name屬性改為以下形式：

name : {
first : ‘Bob’,
last : ‘Smith’
},

用一個對象來做另一個對象成員的值。其中,原先的person.name[0]和person.name[1]可表示如下：

person.name.first
person.name.last

在這裡，person是命名空間，name是子命名空間。

括弧表示法(Bracket notation)

另外一種訪問屬性的方式是使用括弧表示法(bracket notation)，替代這樣的代碼。

person.age
person.name.first

等價於

person[‘age’]
person[‘name’][‘first’]

這看起來很像訪問一個數組的元素，從根本上來說是一回事兒，你使用了關聯了值的名字，而不是索引去選擇元素。難怪對象有時被稱之為關聯數組(associative array)了——對象做了字元串到值的映射，而數組做的是數字到值的映射。

設置對象成員

修改原有成員的值如下：

person.age = 45
person[‘name’][‘last’] = ‘Cratchit’
創建新的成員如下：
person[‘eyes’] = ‘hazel’
person.farewell = function() { alert(“Bye everybody!”) }

Note:括弧表示法一個有用的地方是它不僅可以動態的去設置對象成員的值，還可以動態的去設置成員的名字。這是使用點表示法無法做到的，點表示法只能接受字面量的成員的名字，不接受變數作為名字。

比如說，我們想讓用戶能夠在他們的數據里存儲自己定義的值類型，通過兩個input框來輸入成員的名字和值，通過以下代碼獲取用戶輸入的值：

var myDataName = nameInput.value
var myDataValue = nameValue.value
person[myDataName] = myDataValue

“this”的含義

以下的例子中請注意this的用法：

var person1 = {
name : ‘Chris’,
greeting: function() {
alert(‘Hi! I’m ‘ + this.name + ‘.’);
}};
var person2 = {
name : ‘Brian’,
greeting: function() {
alert(‘Hi! I’m ‘ + this.name + ‘.’);
}};

關鍵字”this”指向了當前代碼運行時的對象—這裡即指person對象，為什麼不直接寫person呢？我們開始使用構造器(constructor)時，”this”是非常有用的——它保證了當代碼的上下文(context)改變時變數的值的正確性（比如：不同的person對象擁有不同的name這個屬性，很明顯greeting這個方法需要使用的是它們自己的name）。

就像我們之前說的，this 指向了代碼所在的對象(其實代碼運行時所在的對象)。在字面量的對象里this看起來不是很有用，但是當你動態創建一個對象（例如使用構造器）時它是非常有用的，之後你會更清楚它的用途。

一直在使用對象

我們學習的示例使用瀏覽器內建的API和JavaScript的一些對象時，我們就在使用對象，因為，這些功能是由跟我們所看到的對象同樣的結構來構建的，雖然比我們自己定義的要複雜許多。

例如：myString.split(‘,’);

當你這樣訪問document對象時：

var myDiv = document.createElement(‘div’);

var myVideo = document.querySelector(‘video’);

以上內容部分摘自視頻課程04網頁遊戲編程JavaScript-13對象基礎，更多示例請參見網站示例。跟著張員外講編程，學習更輕鬆，不花錢還能學習真本領。