readme.md--lesson4 sample代码使用方式
用函数来构建human信息
1. build_a_human.js//将构建person信息封装在函数内
模拟士兵报数两种函数操作方式
1. sound_off.js//函数的顺序调用
2. sound_off_2.js//函数的嵌套调用
3. sound_off_3.js//调用对象方法
厨房工作流
1. kitchen_workflow.js
创建对象的注意点
1. object.js
用vue构建动态数据
1. vue/index.html
build_a_human.js
/*
*
*
*
*【运行步骤】
*1.终端进入到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 + '新生大学';
var myLikeColorsList = ['blue', 'green','black', 'write'];
var myLikeFoods = ['刀削面', '拉面', '牛肉面', '杂酱面', '麻辣面', '烩面', '莜面'];
//定义一个函数变量buildPerson（表达式函数定义法）
var buildPerson = function() {
varxiaoming = {
name: name,
config: {
age,
height,
weight,
isMan,
student,
bloodType: 'A',
haveGirlFriend: true
},
like: {
myLikeColorsList,
myLikeFoods
},
work: {
locaitonBase,
company
}
};
return xiaoming;
};
//调用(执行)buildPerson函数，根据基本信息构建
var personObj = buildPerson();
console.log(personObj);
sound_off.js
/*
*模拟报数过程-顺序调用
*
*函数soldierA()代表士兵A,依次类推。
* startSoundOff()函数是开始报数的处理函数。
*/
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到');
}
//按顺序调用士兵函数韩式报数
//这是一种顺序调用函数的方式，由startSoundOff内部设计好调用的执行流程
function startSoundOff() {
soldierA();
soldierB();
soldierC();
soldierD();
soldierE();
}
//执行报数函数startSoundOff()
startSoundOff();
sound_off2.js
/*
*模拟报数过程-嵌套调用
*
*函数soldierA()代表士兵A,以此类推。
* startSoundOff()函数是开始报数的处理函数。每个士兵报完数后告诉下一个士兵继续报数。
*这是函数嵌套的调用方式。
*/
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()只调用排头士兵执行开始报数
function startSoundOff() {
soldierA();
}
//执行报数函数startSoundOff()
startSoundOff();
sound_off3.js
/*
*模拟报数过程-调用对象方法
*
*对象soldierA代表士兵A,依次类推。
* startSoundOff()函数是开始报数的处理函数。
*/
//定义对象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()按顺序调用每个对象的报数方法
function startSoundOff() {
soldierA.soundOff();
soldierB.soundOff();
soldierC.soundOff();
soldierD.soundOff();
soldierE.soundOff();
}
//执行报数函数startSoundOff()
startSoundOff();
kitchen_workflow.js
//采购食物的函数
function buyFoods() {
console.log('采购原料和菜');
varfoodsList = ['fish', 'egg', 'meat'];
return foodsList;
}
//做准备工作的函数
function prepare() {
console.log('努力磨刀...努力洗碗...努力打扫...劳动最光荣');
return true;
}
//做菜的函数
//
function cooking(foodsList) {
console.log('今天要做这些菜' + foodsList);
console.log('大工告成，上菜');
varfeast = ['鸡蛋西红柿', '红烧肉', '红烧鱼'];
return feast;
}
//流程控制函数
function startWork() {
varsuccess = prepare();
if(success) {
var foodsList = buyFoods();
var feast = cooking(foodsList);
console.log('----酒席准备好了----');
for (var i = 0; i < feast.length; i++) {
console.log(feast[i]);
}
}else {
console.log('还没准备好');
}
}
//干活啦~~
startWork();
object.js
//用直接量的方式创建对象person1
var person1 = {
name: 'xiaoming' //注意：对象属性name没有引号
};
//用直接量的方式创建对象person2(带双引号的属性结构使得该对象更像json格式)
//不推荐把对象属性带有引号
var person2 = {
name: 'xiaoming' //【不推荐】注意：对象属性name有引号
};
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 + '新生大学';
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: '帮助更多小白学习JavaScript',
githubUrl: 'https://github.com/xugy0926/getting-started-with-javascript'
};
/*
*输出个人信息
*输出个人信息时，必要信息要求加辅助提示语
*/
console.log('姓名');
console.log(name);
console.log("年龄: " + age);
console.log('身高= '
+ height + ',体重= ' + weight);
console.log('地点: '+ locaitonBase);
console.log('公司: '+ company);
console.log('\n');
console.log('----我喜欢的颜色----');
console.log('我总共喜欢' + myLikeColorsList.length + '种颜色');
//根据游标访问数据的内容，数组的游标从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循环
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官网：https://cn.vuejs.org/v2/guide/
//初始化Vue
var app2 = new Vue({
el:'#app',// #app和html中div#id的app对应
data: {
personObj: personObj//变量personObj可以在html使用
}
});
