readme.md--lesson4 sample代碼使用方式
用函數(shù)來構(gòu)建human信息
1. build_a_human.js//將構(gòu)建person信息封裝在函數(shù)內(nèi)
模擬士兵報(bào)數(shù)兩種函數(shù)操作方式
1. sound_off.js//函數(shù)的順序調(diào)用
2. sound_off_2.js//函數(shù)的嵌套調(diào)用
3. sound_off_3.js//調(diào)用對象方法
廚房工作流
1. kitchen_workflow.js
創(chuàng)建對象的注意點(diǎn)
1. object.js
用vue構(gòu)建動(dòng)態(tài)數(shù)據(jù)
1. vue/index.html
build_a_human.js
/*
*
*
*
*【運(yùn)行步驟】
*1.終端進(jìn)入到getting-started-with-javascript/study/lesson3
*2.> node sample_code.js
*
*/
//聲明并定義變量
var name = 'xiaoming';
var age = 18;
var height = 170,
weight = 130.1;
var isMan = true;
var student = false;
var xinshengUserName = 'xiaoming';
var wechat_user_name = 'xiaoming';
var locaitonBase = '北京';
var company = locaitonBase + '新生大學(xué)';
var myLikeColorsList = ['blue', 'green','black', 'write'];
var myLikeFoods = ['刀削面', '拉面', '牛肉面', '雜醬面', '麻辣面', '燴面', '莜面'];
//定義一個(gè)函數(shù)變量buildPerson（表達(dá)式函數(shù)定義法）
var buildPerson = function() {
varxiaoming = {
name: name,
config: {
age,
height,
weight,
isMan,
student,
bloodType: 'A',
haveGirlFriend: true
},
like: {
myLikeColorsList,
myLikeFoods
},
work: {
locaitonBase,
company
}
};
return xiaoming;
};
//調(diào)用(執(zhí)行)buildPerson函數(shù)，根據(jù)基本信息構(gòu)建
var personObj = buildPerson();
console.log(personObj);
sound_off.js
/*
*模擬報(bào)數(shù)過程-順序調(diào)用
*
*函數(shù)soldierA()代表士兵A,依次類推。
* startSoundOff()函數(shù)是開始報(bào)數(shù)的處理函數(shù)。
*/
function soldierA() {
console.log('1到');
}
function soldierB() {
console.log('2到');
}
function soldierC() {
console.log('3到');
}
function soldierD() {
console.log('4到');
}
function soldierE() {
console.log('5到');
}
//按順序調(diào)用士兵函數(shù)韓式報(bào)數(shù)
//這是一種順序調(diào)用函數(shù)的方式，由startSoundOff內(nèi)部設(shè)計(jì)好調(diào)用的執(zhí)行流程
function startSoundOff() {
soldierA();
soldierB();
soldierC();
soldierD();
soldierE();
}
//執(zhí)行報(bào)數(shù)函數(shù)startSoundOff()
startSoundOff();
sound_off2.js
/*
*模擬報(bào)數(shù)過程-嵌套調(diào)用
*
*函數(shù)soldierA()代表士兵A,以此類推。
* startSoundOff()函數(shù)是開始報(bào)數(shù)的處理函數(shù)。每個(gè)士兵報(bào)完數(shù)后告訴下一個(gè)士兵繼續(xù)報(bào)數(shù)。
*這是函數(shù)嵌套的調(diào)用方式。
*/
function soldierA() {
console.log('1到');
soldierB();
}
function soldierB() {
console.log('2到');
soldierC();
}
function soldierC() {
console.log('3到');
soldierD();
}
function soldierD() {
console.log('4到');
soldierE();
}
function soldierE() {
console.log('5到');
}
// startSoundOff()只調(diào)用排頭士兵執(zhí)行開始報(bào)數(shù)
function startSoundOff() {
soldierA();
}
//執(zhí)行報(bào)數(shù)函數(shù)startSoundOff()
startSoundOff();
sound_off3.js
/*
*模擬報(bào)數(shù)過程-調(diào)用對象方法
*
*對象soldierA代表士兵A,依次類推。
* startSoundOff()函數(shù)是開始報(bào)數(shù)的處理函數(shù)。
*/
//定義對象soldierA
var soldierA = {
soundOff: function() {
console.log('1到');
}
};
//定義對象soldierA
var soldierB = {
soundOff: function() {
console.log('2到');
}
};
//定義對象soldierA
var soldierC = {
soundOff: function() {
console.log('3到');
}
};
//定義對象soldierA
var soldierD = {
soundOff: function() {
console.log('4到');
}
};
//定義對象soldierA
var soldierE = {
soundOff: function() {
console.log('5到');
}
};
// startSoundOff()按順序調(diào)用每個(gè)對象的報(bào)數(shù)方法
function startSoundOff() {
soldierA.soundOff();
soldierB.soundOff();
soldierC.soundOff();
soldierD.soundOff();
soldierE.soundOff();
}
//執(zhí)行報(bào)數(shù)函數(shù)startSoundOff()
startSoundOff();
kitchen_workflow.js
//采購食物的函數(shù)
function buyFoods() {
console.log('采購原料和菜');
varfoodsList = ['fish', 'egg', 'meat'];
return foodsList;
}
//做準(zhǔn)備工作的函數(shù)
function prepare() {
console.log('努力磨刀...努力洗碗...努力打掃...勞動(dòng)最光榮');
return true;
}
//做菜的函數(shù)
//
function cooking(foodsList) {
console.log('今天要做這些菜' + foodsList);
console.log('大工告成，上菜');
varfeast = ['雞蛋西紅柿', '紅燒肉', '紅燒魚'];
return feast;
}
//流程控制函數(shù)
function startWork() {
varsuccess = prepare();
if(success) {
var foodsList = buyFoods();
var feast = cooking(foodsList);
console.log('----酒席準(zhǔn)備好了----');
for (var i = 0; i < feast.length; i++) {
console.log(feast[i]);
}
}else {
console.log('還沒準(zhǔn)備好');
}
}
//干活啦~~
startWork();
object.js
//用直接量的方式創(chuàng)建對象person1
var person1 = {
name: 'xiaoming' //注意：對象屬性name沒有引號(hào)
};
//用直接量的方式創(chuàng)建對象person2(帶雙引號(hào)的屬性結(jié)構(gòu)使得該對象更像json格式)
//不推薦把對象屬性帶有引號(hào)
var person2 = {
name: 'xiaoming' //【不推薦】注意：對象屬性name有引號(hào)
};
console.log(typeof person1);
console.log(typeof person2);
console.log(person1.name);
console.log(person2.name);
console.log(person1['name']);
console.log(person2['name']);
vue_index.html
我的信息
<src="https://unpkg.com/vue">
課程信息
//聲明并定義變量
var name = 'xiaoming';
var age = 18;
var height = 170, weight = 130.1;
var isMan = true;
var student = false;
var xinshengUserName = 'xiaoming';
var wechat_user_name = 'xiaoming';
var locaitonBase = '北京';
var company = locaitonBase + '新生大學(xué)';
var myLikeColorsList = ['blue', 'green','black', 'write'];
var myLikeFoods = ['刀削面', '拉面', '牛肉面', '雜醬面', '麻辣面', '燴面', '莜面'];
//聲明并定義對象變量
var myJavaScriptLessionInfoObj = {
teacher:name,
teacherWeChat: wechat_user_name,
title: 'JavaScript編程入門',
beginTime: '2018/8/8',
endTime: '2018/9/4',
boysStudent: 417,
girlsStudent: 119,
lessionTarget: '幫助更多小白學(xué)習(xí)JavaScript',
githubUrl: 'https://github.com/xugy0926/getting-started-with-javascript'
};
/*
*輸出個(gè)人信息
*輸出個(gè)人信息時(shí)，必要信息要求加輔助提示語
*/
console.log('姓名');
console.log(name);
console.log("年齡: " + age);
console.log('身高= '
+ height + ',體重= ' + weight);
console.log('地點(diǎn): '+ locaitonBase);
console.log('公司: '+ company);
console.log('\n');
console.log('----我喜歡的顏色----');
console.log('我總共喜歡' + myLikeColorsList.length + '種顏色');
//根據(jù)游標(biāo)訪問數(shù)據(jù)的內(nèi)容，數(shù)組的游標(biāo)從0開始
console.log(myLikeColorsList[0]);
console.log(myLikeColorsList[1]);
console.log(myLikeColorsList[2]);
console.log(myLikeColorsList[3]);
console.log('--------------------');
console.log('\n');
console.log('----我喜歡的食物----');
console.log('我總共喜歡' + myLikeFoods.length + '種食物');
// for循環(huán)
for (var i = 0; i < myLikeFoods.length;i++) {
console.log(myLikeFoods[i]);
}
console.log('--------------------');
console.log('\n');
console.log('JavaScript課程信息');
console.log(myJavaScriptLessionInfoObj);
console.log('\n');
console.log('#####################');
console.log('我是分界線')
console.log('#####################');
//用上面定義的變量重新打包，并定義出xiaoming這邊變量
var personObj = {
name: name,
config: {
age: age,
height: height,
weight: weight,
isMan: isMan,
student: student
},
like: {
myLikeColorsList: myLikeColorsList,
myLikeFoods: myLikeColorsList
},
work: {
locaitonBase: locaitonBase,
company: company
},
myJavaScriptLessionInfoObj: myJavaScriptLessionInfoObj
}
console.log(personObj);
// vue官網(wǎng)：https://cn.vuejs.org/v2/guide/
//初始化Vue
var app2 = new Vue({
el:'#app',// #app和html中div#id的app對應(yīng)
data: {
personObj: personObj//變量personObj可以在html使用
}
});
