<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>對象</title>
</head>
<body>
<script>
person = new Object();//定義一個對象
person.name = "Bill";//對象的屬性,name
person.age = 0;
//定義對象的方法
person.doing = function donging(){
document.write(person.name+" is "+person.age+"<br />");
}
//調用對象的方法
person.doing();
//調用系統方法
document.write(person.name.toUpperCase());
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.類:同一特性物體的統稱,比如人類;
2.對象:類的具象化,比如具體的某一個人,張三.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>方法</title>
<script>
var All = 0;//全局變量,頁面關閉時刪除
//無參無返回值
function NoPerNoRet(){
alert("無參無返回值:All="+All+"(全局變量)");
}
//有參函數
function PerNoRet(per1,per2){
var Part = "!";//局部變量,方法結束時刪除,包括per1,per2均為局部變量
alert(per1+" "+per2+" "+Part);
}
//有返回值函數
function NoPerRet(){
return 1;//直接return,不加任何返回值,則表示直接結束此方法.
}
//有參有返回值
function PerAndRet(per1){
if(per1 == "" || isNaN(per1)){
return "非數字!";//返回固定值
}else{
return per1;//返回變量值
}
}
</script>
</head>
<body>
<!--函數的調用,必須嚴格遵循函數定義的大小寫-->
<button onclick="NoPerNoRet()">無參無返回值</button>
<br />
<br />
<button onclick="PerNoRet('Hello','World')">有參無返回值</button>
<br />
<br />
<button onclick="alert(NoPerRet())">有返回值函數</button>
<br />
<br />
<div>
<input type="text" id="inputNum"/>
<!--
document.getElementById().value 獲得輸入框值
PerAndRet(per1) 調用函數,參數為輸入框獲得的值
alert() 彈出框,參數為函數的返回值
ps:雙引號與單引號要交叉使用 例:"aa'bb"cc"'"
-->
<button onclick="alert(PerAndRet(document.getElementById('inputNum').value))">有參有返回值</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>對象</title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em -19em;
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 4em;
color: black;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>01. 直接創建對象實例</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//新建對象
person = new Object();
//對象屬性以及方法的定義
person.name = "case01";
person.age = 1;
person.say = function say(){
return "Hello , Case01 ! 直接創建對象"
}
//自定義展示對象內容的方法
objDisplay("case01",person);
//調用對象屬性或方法的方式
document.getElementById("case01_01").innerHTML = person.say();
</pre>
</div>
<h4>結果:</h4>
<div id="case01" class="result"></div>
<p id="case01_01" class="result"></p>
<hr />
<script>
//新建對象
person = new Object();
//對象屬性以及方法的定義
person.name = "case01";
person.age = 1;
person.say = function say(){
return "Hello , Case01 ! 直接創建對象"
}
//自定義展示對象內容的方法
objDisplay("case01",person);
//調用對象屬性或方法的方式
document.getElementById("case01_01").innerHTML = person.say();
</script>
</li>
<li>
<h3>02. 使用{}創建對象實例</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//新建對象并定義其屬性方法
var pers = {
name:"case02",
age:2,
say:function say(){return "Hello , Case02 ! {}創建對象"}
};
//自定義展示對象內容的方法
objDisplay("case02",pers);
//調用對象屬性或方法的方式
document.getElementById("case02_01").innerHTML = pers.say();
</pre>
</div>
<h4>結果:</h4>
<div id="case02" class="result"></div>
<p id="case02_01" class="result"></p>
<hr />
<script>
//新建對象并定義其屬性方法
var pers = {
name:"case02",
age:2,
say:function say(){return "Hello , Case02 ! {}創建對象"}
};
//自定義展示對象內容的方法
objDisplay("case02",pers);
//調用對象屬性或方法的方式
document.getElementById("case02_01").innerHTML = pers.say();
</script>
</li>
<li>
<h3>03. 對象構造器</h3>
<h4>代碼:</h4>
<div class="code">
<pre>
//通過函數實現對象便利構造器
function per(name,age){
this.name = name;
this.age = age;
this.say = say;
function say(){
return "Hello , Case03 ! 對象構造器"
}
}
//直接通過函數創建對象
var perObj = new per("case03",3);
//為對象添加新的屬性
perObj.sex = "male";
//自定義展示對象內容的方法
objDisplay("case03",perObj);
//調用對象屬性或方法的方式
document.getElementById("case03_01").innerHTML = perObj.say();
</pre>
</div>
<h4>結果:</h4>
<div id="case03" class="result"></div>
<p id="case03_01" class="result"></p>
<hr />
<script>
//通過函數實現對象便利構造器
function per(name,age){
this.name = name;
this.age = age;
this.say = say;
function say(){
return "Hello , Case03 ! 對象構造器"
}
}
//直接通過函數創建對象
var perObj = new per("case03",3);
//為對象添加新的屬性
perObj.sex = "male";
//自定義展示對象內容的方法
objDisplay("case03",perObj);
//調用對象屬性或方法的方式
document.getElementById("case03_01").innerHTML = perObj.say();
</script>
</li>
</ul>
</body>
</html>
