前端要不要学习一门后端语言_这是一门免费课程，可帮助前端开发人员学习数学

最新推荐文章于 2024-09-24 09:19:59 发布

cumian9828

最新推荐文章于 2024-09-24 09:19:59 发布

阅读量290

点赞数

文章标签：列表 java python 大数据 css

原文链接：https://www.freecodecamp.org/news/want-to-learn-practical-math-for-front-end-developers-heres-our-free-11-part-course-by-radical-coder/

版权

前端要不要学习一门后端语言

Are you looking to become a more effective developer by improving your fundamental math skills without reaching for NASA-level calculations? Look no further!

您是否希望通过提高基本数学技能而无需达到NASA级别的计算能力而成为一名更有效的开发人员？别再看了！

At Scrimba, we're are really excited to announce our new course 'Practical Math for Front-End Developers', which offers exactly that. In the course we build 3 projects:

在Scrimba，我们非常高兴地宣布我们的新课程“面向前端开发人员的实用数学”提供了确切的课程。在课程中，我们建立3个项目：

A Shopping Cart, where we generate a list of products, calculate the total price of the products and apply a tax rate.
购物车，我们在其中生成产品列表，计算产品的总价并应用税率。
A Weekly Schedule, where we introduce the Date object, perform layout manipulation and learn about the reduce function.
每周计划，我们引入Date对象，执行布局操作并了解reduce函数。
A Monthly Expense Sheet, which brings together everything we've learned and gives us a few handy tips and tricks.
月度费用表，汇总了我们学到的所有内容，并为我们提供了一些方便的提示和技巧。

This course is brought to you by Ryan Gonyon, who has his own Twitch and YouTube channels.

本课程由拥有自己的Twitch和YouTube频道的Ryan Gonyon提供。

With 5 years of Web Dev experience, a B.S. in Computer Science, and experience tutoring K-12 and University-level math, Ryan is the perfect tutor for this course. Head over to Scrimba to see what he has in store!

Ryan拥有5年的Web开发经验，拥有计算机科学学士学位，并且具有针对K-12和大学水平的数学进行辅导的经验，是该课程的理想指导。前往斯克林巴，看看他的店里有什么！

应用布局和CSS calc()简介 (App Layout and CSS calc() Introduction)

Click the image to access the course.

单击图像访问课程。

In this screencast, Ryan shows us how to build the outer shell of our applications by correctly sizing the <header>, <footer> and <main> tags with CSS variables and the calc() function.

在此截屏视频中，Ryan向我们展示了如何通过使用CSS变量和calc()函数正确调整<header> ， <footer>和<main>标签的大小来构建应用程序的外壳。

We use overflow-y: auto; to ensure that the contents of the <main> tag do not extend over the footer.

我们使用overflow-y: auto ; 以确保<main>标记的内容不会在页脚上延伸。

* {
	--headerFontSize: 2rem;
	--headerPadding: 0.5rem;
	--footerFontSize: 1rem;
	--footerPadding: 1rem;
}

header {
	font-size: var(--headerFontSize);
	padding: var(--headerPadding);
}

main {
	font-size: 1.5rem;
	height: calc(
		100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
				--footerFontSize
			) - (2 * var(--footerPadding))
	);
	overflow-y: auto;
}

footer {
	font-size: var(--footerFontSize);
	padding: var(--footerPadding);
}

roll()函数 (The roll() Function)

At some point during your front-end journey, it will be useful to generate random data to test your layouts. The roll() function does exactly that. This cast also shows us how to use JavaScript's Math module and random() function.

在您的前端旅程中的某个时候，生成随机数据以测试布局将很有用。 roll()函数正是这样做的。该演员表还向我们展示了如何使用JavaScript的Math模块和random()函数。

function roll(min, max, floatFlag) {
	let r = Math.random() * (max - min) + min;
	return floatFlag ? r : Math.floor(r);
}

购物车-生成数据/构建布局 (Shopping Cart - Generate Data / Build Layout)

Click the image to access the course.

单击图像访问课程。

Now we start building our first project, the Shopping Cart, using our newly written roll() function to generate prices. This shows us how much time we save using our new knowledge!

现在，我们使用新编写的roll()函数生成价格来开始构建第一个项目“购物车”。这向我们展示了使用我们的新知识可以节省多少时间！

let products = [...Array(5)].map((_, i) => {
	return {
		index: i,
		title: possibleProducts[roll(0, possibleProducts.length)],
		price: roll(1, 10, 1).toFixed(2),
		count: roll(1, 6),
	};
});

购物车-计算总/应用税率 (Shopping Cart - Calculate Total / Apply Tax Rate)

In this screencast, we learn how to use .reduce to calculate the total price of the cart

在此截屏视频中，我们学习如何使用.reduce计算购物车的总价

let cartTotal = products
	.reduce(function (accumulator, product) {
		console.log(accumulator, product);
		return accumulator + parseFloat(product.price) * product.count;
	}, 0)
	.toFixed(2);

We also see how to use roll() to generate a random tax rate and apply it.

我们还将看到如何使用roll()生成随机税率并将其应用。

let taxRate = roll(5, 9, 1).toFixed(1);

Along the way, we practise parsing float values and rounding them to a specified number after a decimal point.

在此过程中，我们练习解析浮点值并将其舍入到小数点后的指定数字。

购物车(奖金挑战)-重量 (Shopping Cart (Bonus Challenge) - Weights)

As a bonus challenge in this cast, we randomly generate the weight of each item in our shopping cart and calculate the total weight at the checkout. In the real world, this could be used to estimate the shipping cost for the buyer.

作为此演员表中的一项额外挑战，我们随机生成购物车中每件商品的重量，并在结帐时计算总重量。在现实世界中，这可以用于估算买方的运输成本。

No spoilers here, so if you want to see the solution you'll have to click through to the course. 😜

这里没有剧透，因此，如果您想查看解决方案，则必须单击该课程。 😜

CSS形状简介 (A Brief Exploration of CSS Shapes)

Click the image to access the course.

单击图像访问课程。

In this cast, we learn how to create a square, a circle, a diamond and a triangle with CSS shapes.

在此演员表中，我们将学习如何创建具有CSS形状的正方形，圆形，菱形和三角形。

.triangle {
	height: 0;
	width: 0;
	border-left: 5.5rem solid transparent;
	border-right: 5.5rem solid transparent;
	border-bottom: 5.5rem solid black;
	margin: 1rem;
	position: relative;
}

.triangle:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	border-left: 4.5rem solid transparent;
	border-right: 4.5rem solid transparent;
	border-bottom: 4.5rem solid red;
	left: -4.5rem;
	top: 0.6rem;
}

每周计划-使用Date()来构建星期/生成任务 (Weekly Schedule - Using Date() to Build Week / Generating Tasks)

In this cast, we start work on our Weekly Schedule app. First up, we learn about JavaScript's Date object.

在此演员表中，我们开始在每周计划应用程序上工作。首先，我们了解JavaScript的Date对象。

function getNextDay(day) {
	let nextDay = new Date(day);
	nextDay.setDate(day.getDate() + 1);
	return nextDay;
}

Next, we look at using the roll() function to test the layout and produce a list of tasks. Take a look at the course to see how it works

接下来，我们看一下使用roll()函数测试布局并生成任务列表。看看课程，看看它是如何工作的

每周计划-构建布局/显示数据 (Weekly Schedule - Build Layout / Display Data)

Click the image to access the course.

单击图像访问课程。

In this cast, Ryan shows us how to use the calc() function to display the data generated in the previous cast.

在此演员表中，Ryan向我们展示了如何使用calc()函数显示前一演员表中生成的数据。

--mainHeight: calc(
	100vh - var(--headerFontSize) - (2 * var(--headerPadding)) - var(
			--footerFontSize
		) - (2 * var(--footerPadding))
);

We also learn how to cross out completed tasks (click through to find out how.) The result is a clean, functional app that we can use in everyday life.

我们还将学习如何处理已完成的任务( 单击以了解操作方法。)结果是我们可以在日常生活中使用的干净实用的应用程序。

每月费用表-生成并显示月份 (Monthly Expense Sheet - Generate and Display Month)

Click the image to access the course.

单击图像访问课程。

Next, use the concepts from the previous casts to build something more complex - our expenses tracker. In this project we generate data, display months and draw up a grid.

接下来，使用前面的转换中的概念来构建更复杂的东西-我们的费用跟踪器。在此项目中，我们生成数据，显示月份并绘制网格。

function displayMonth(month) {
	// <div class="day">3</div>
	let monthHtml = month.reduce(function (accumulator, day) {
		return accumulator + `<div class="day">${day.date.getDate()}</div>`;
	}, "");
	document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}

每月费用表-生成，显示和跟踪费用 (Monthly Expense Sheet - Generate, Display, and Track Expenses)

Click the image to access the course.

单击图像访问课程。

In the final cast, we perform budget calculations by writing functions to track our expenses, rent and utility bills. We then display the expenditures alongside the remaining available budget.

在最后的演员表中，我们通过编写跟踪支出，房租和水电费的功能来执行预算计算。然后，我们将显示支出以及剩余的可用预算。

function displayMonth(month, budget, netValue) {
	let monthHtml =
		`<div class="monthly-summary">
        Budget: \$${budget.toFixed(2)} | Net Value: \$${netValue.toFixed(2)}
    </div>` +
		month.reduce(function (accumulator, day) {
			return accumulator + `<div class="day">${day.date.getDate()}</div>`;
		}, "");
	document.getElementById("MonthlyExpenses").innerHTML = monthHtml;
}