The Coding Bootcamp Primer-一个免费的Web开发课程，可让您准备参加任何Bootcamp

一个免费的4小时课程，它将教您足够的Web开发知识，以准备进行任何编码训练营。 (A free 4-hour course that'll teach you enough web development to be ready for any coding bootcamp.)

Today, I'm  happy to announce that we're launching a course for people who are considering embarking upon a web development education.

今天，我很高兴地宣布，我们正在为正在考虑进行网络开发教育的人们开设一门课程。

It's called The Coding Bootcamp primer (<– link), and it'll teach you the most fundamental building blocks of building websites: HTML, CSS and Javascript. You'll also learn how to set up your computer, debug your code, search for solutions, solve problems and more. By the end, you should be able to build a styled page, such as a calculator, name generator or a personal page.

它被称为The Coding Bootcamp入门 (<-链接)，它将教您构建网站的最基本要素：HTML，CSS和Javascript。 您还将学习如何设置计算机，调试代码，搜索解决方案，解决问题等等。 最后，您应该能够构建样式化的页面，例如计算器，名称生成器或个人页面。

The lessons have been created by V School, a top-notch coding bootcamp located in Salt Lake City, Utah. It's actually the exact course that they send their students through before starting on their immersive bootcamp.

这些课程是由位于犹他州盐湖城的顶级编码训练营V School创建的。 实际上，这是他们在开始身临其境的训练营之前向学生发送的确切课程。

It's also a great resource for people who aren't necessarily planning to enroll in a coding bootcamp, but who are curious about web development in general. It is designed with the general public in my mind, as we believe everyone can benefit from learning basics coding skills.

对于那些不一定要注册编码训练营但对总体网络开发感到好奇的人来说，这也是一个很好的资源。 它是为大众设计的，因为我们相信每个人都可以从学习基础编码技能中受益。

Now, let's have a look at the underlying pedagogical philosophy, as well as how the course is structured.

现在，让我们看一下基本的教学哲学，以及课程的结构。

V学校的学习哲学 (V School's Learning Philosophy)

Over the years of teaching V School has developed a learning philosophy that can be best described with The easy way is the hard way. It means that solving problems and challenges is the best way to learn. Naturally, this course will have a lot of hands-on practice

多年来，V School已发展出一种学习哲学，可以用最好的描述The easy way is the hard way. 这意味着解决问题和挑战是最好的学习方法。 当然，该课程将有很多动手实践

Most of the tutorials will be on Scrimba, but there will also be links to a few external resources, like assignments and how-to videos for a handful of topics.

大多数教程将在Scrimba上进行，但也将提供指向一些外部资源的链接，例如作业和一些主题的入门视频。

It is recommended that you to don't binge-watch the course. Make sure you take frequent breaks, sleep on the problems and take your time.

建议您不要疯狂观看课程。 确保您经常休息，沉睡于问题上并花些时间。

给这些课程的学生的提示： (Tips for the students of these course:)

• Do rewatch screencasts if you're not sure about something. It doesn't mean you're bad at learning or remembering.
  如果不确定某件事，请重新观看屏幕录像。 这并不意味着您学习或记忆能力很差。
• Try to use your knowledge and it's ok to stray away to try something out and come back to the course.
  尝试利用您的知识，可以流浪尝试一些东西然后回到课程。
• Learning shouldn't be lonely. Find help by searching online, asking a friend or a classmate, reaching out to an instructor.
  学习不应该孤单。 通过在线搜索，询问朋友或同学，与教员联系来寻求帮助。

V School has also been generous enough to create a dedicated slack channel for you to ask for help and help others. Please join and let's build a community around this course!

V School还足够慷慨地创建一个专用的闲暇渠道，让您寻求帮助和帮助他人。 请加入，让我们围绕此课程建立一个社区！

如何使用Scrimba (How to Use Scrimba)

It's best to see something once than a hundred times to read about. If you're not familiar with how Scrimba works, watch our screencast, where Bob Ziroll, Director of Education at V School walks you through it.

最好看一次而不是一百次。 如果您不熟悉Scrimba的工作原理，请观看我们的截屏视频 ，V School教育总监Bob Ziroll将带您逐步学习。

外部链接-计算机设置 (External Link - Computer Setup)

Before we start with the course, we need to have some your computer set up. Feel free to jump in our screencast to learn how to do that.

在开始本课程之前，我们需要设置一些计算机。 随意跳入我们的截屏视频中学习如何做。

外部链接-使用VS代码 (External Link - Using VS Code)

At some point in the course, you will need to be able to write some of the code in an editor offline. We normally recommend VSCode, but really any code editor will do. If you'd like to follow the installation steps, you can find them in our video.

在课程的某个时候，您将需要能够在脱机编辑器中编写一些代码。 我们通常建议使用VSCode，但实际上任何代码编辑器都可以。 如果您想按照安装步骤操作，可以在我们的视频中找到它们。

预览：V School的学前项目 (Preview: the V School Pre-course Project)

This course is free and open to anyone. It also has a capstone project in the end, that can double as V School's pre-course project for anybody interested in applying.

本课程免费开放给任何人。 最后，它还有一个顶点项目，对于任何有兴趣申请的人，它都可以作为V School的学前项目加倍。

So if you're thinking about joining V School or are on the fence about bootcamps, in general, this course is also for you.

因此，如果您正在考虑加入V School或对新兵训练营持怀疑态度，通常来说，本课程也很适合您。

HTML简介 (Introduction to HTML)

In this screencast, Nate Jensen, V School's instructor, is going to introduce us to the basic HTML concepts: boilerplate, tags and HTML syntax.

在此截屏视频中，V School的老师Nate Jensen将向我们介绍基本HTML概念：样板，标签和HTML语法。

HTML元素 (HTML Elements)

Continuing on the previous chapter's intro, next up are the most common HTML elements, like

to

tags, ,

,

, etc.

继续上一章的介绍，接下来是最常见HTML元素，例如

到

标记， ，

，

等。

HTML属性 (HTML Attributes)

In this chapter, Nate will cover HTML attributes. Some HTML elements, like a tag for an image has source attribute src. An anchor tag has href. Attributes add extra functionality to our elements.

在本章中，Nate将介绍HTML属性。 一些HTML元素(例如图像的标签)具有源属性src 。 定位标记具有href 。 属性为我们的元素增加了额外的功能。

任务-傻CIA的第1部分 (Assignment - Silly CIA part 1)

This is our first assignment and you should attempt to complete it yourself without cutting corners such as copypasting code, even if it might take you quite some time to complete it. Having said that, if you get stuck always reach out to other people either on Scrimba, or the V School's coursework page.

这是我们的第一个任务 ，即使您可能要花一些时间来完成它，您也应该尝试自己完成任务而不要冒复制粘贴代码等捷径。 话虽如此，如果您陷入困境，请始终在Scrimba或V School的课程页面上与其他人联系。

HTML5语义标签 (HTML5 Semantic Tags)

In this chapter, Nate covers what semantic tags are and why there were introduced in HTML5.

Nate在本章中介绍了什么是语义标记以及为什么在HTML5中引入了语义标记。

CSS简介(内联样式) (CSS Intro (inline-style))

In this cast, Grant Wilhelm, V School's instructor shows us how we can add styling to HTML elements by writing them inline using style attribute.

在此演员表中，V School的讲师Grant Wilhelm向我们展示了如何通过使用style属性内联编写HTML元素来为HTML元素添加样式。

Welcome to CSS!

CSS选择器 (CSS Selectors)

In this part, Grant shows us how to link a separate stylesheet with link tag.

在这一部分中，Grant向我们展示了如何使用link标记链接单独的样式表。

And then Grant introduces styling with selectors as a better alternative to inline styling from the previous chapter.

然后，格randint介绍了使用选择器的样式，作为上一章中内联样式的更好替代方法。

For example, to target an

tag in our styles.css file we can write:

例如，要在我们的styles.css文件中定位

标签，我们可以编写：

h1 {
  color: Blue;
  font-size: 55px;
}

任务-傻CIA第2部分 (Assignment - Silly CIA part 2)

This is our next self-driven assignment and similar to the first one, you're highly advised to not cut corners and reach out if stuck for too long.

这是我们的下一个自我驱动的任务 ，与第一个任务类似，强烈建议您不要走捷径，如果卡得太久也不要伸手。

分配-CSS Wars：选择器唤醒 (Assignment - CSS Wars: The Selector Awakens)

Congratulations on completing the previous assignment! Nothing pushes your skills further than a good challenge. Keep it up and dive straight into your next assignment.

恭喜您完成上一个作业！ 没有什么比一个好的挑战更能推动您的技能了。 继续努力，直接进行下一个作业。

CSS颜色和字体 (CSS Colors and Fonts)

Welcome to your next CSS cast, we hope you've enjoyed your challenge.

欢迎来到您的下一个CSS演员表，我们希望您喜欢挑战。

In this chapter, we will learn that to define colors in CSS, we have quite a few options, apart from just writing the color's name.

在本章中，我们将学习在CSS中定义颜色的方法，除了编写颜色名称外，还有很多选择。

We can use hexadecimal (hex, for short) notation.

我们可以使用十六进制(简写为十六进制)表示法。

body {
  background-color: #a4f6b9;
}

Specifying via red, green, blue values with rgb.

通过rgb通过红色，绿色，蓝色值指定。

.header {
  background-color: rgb(55, 155, 255);
}

Or with rgba where a is an alpha parameter that is a number between 0.0, fully transparent, and 1.0, fully opaque.

或与rgba ，其中a是一个alpha参数，介于0.0(完全透明)和1.0(完全不透明)之间。

.header {
  background-color: rgba(55, 155, 255, 0.5);
}

CSS显示属性 (CSS Display Property)

When using HTML we're going to be talking about block elements that take up the full width of the page, and inline elements that only take up as much as they need.

使用HTML时，我们将讨论占据页面整个宽度的块元素，以及仅占据所需宽度的内联元素。

Oftentimes, we might want to override the defaults. For example, if we wish to display a few images one under the other, rather than side by side.

通常，我们可能想覆盖默认值。 例如，如果我们希望将一些图像一个接一个地显示，而不是并排显示。

We can do this default by using display property.

我们可以通过使用display属性来实现此默认设置。

/* img by default is an inline element */
img {
  display: block;
  height: 175px;
  width: 175px;
}

注册我们的电子邮件列表 (Sign up for our Email List)

This might be a perfect time to interject and offer to stay in touch and get the latest updates from V School. You can sign up in our screencast.

这可能是插入和提供联系并从V School获取最新更新的绝佳时机。 您可以注册我们的截屏视频。

作业-新闻 (Assignment - Newsies)

Welcome to your next challenge! If you're getting stuck, make sure that you go back and rewatch some of the previous screencasts, otherwise, you've got this!

欢迎来到您的下一个挑战 ！ 如果您被卡住了，请确保返回并重新观看以前的一些截屏视频，否则，您就已经掌握了！

CSS Box模型 (CSS Box Model)

In this screencast, Grant will introduce CSS box model.

在此截屏视频中，Grant将介绍CSS盒模型。

分配-从零开始的颜色网格 (Assignment - Color Grid From Scratch)

It's time for our new assignment and when you're done we'll be looking forward to continuing with the course in the next lesson.

现在是我们进行新作业的时候了，当您完成后，我们将期待在下一课中继续该课程。

CSS布局和定位 (CSS Layout and Positioning)

In this screencast, Grant will help us to learn the principles of layout and positioning with CSS. For example, how to overlap elements, make some of them sticky on the page, etc.

在此截屏视频中，Grant将帮助我们学习CSS的布局和定位原理。 例如，如何重叠元素，如何使其中的一些元素粘在页面上，等等。

分配-CSS标志 (Assignment - CSS Flags)

In the next assignment you will be asked to build some countries' flags with pure CSS! When in doubt, fall back and rewatch some of the casts from before and see you in the next assignment.

在下一个作业中 ，系统将要求您使用纯CSS构建某些国家/地区的标志！ 如有疑问，请退后并重新观看之前的部分演员表，并在下一个作业中与您会面。

作业-设计博客 (Assignment - Design a Blog)

Our next assignment will be slightly different, as you can very easily personalise it and have it as a basis for your actual real-life blog in the future!

我们的下一个任务会稍有不同，因为您可以轻松地对其进行个性化设置，并将其作为将来您实际博客的基础！

外部链接-调试简介 (External Link - Debugging Intro)

The skill of debugging is extraordinarily important in web development. What are bugs and some ways on how to find them in our screencast.

调试技巧在Web开发中非常重要。 什么是错误以及如何在我们的截屏视频中找到它们。

外部链接-Chrome开发工具 (External Link - Chrome Dev Tools)

The Developer Tools in your browser of choice will be one of the most important tools you will need to learn. Check out our primer on the topic.

您选择的浏览器中的开发人员工具将是您需要学习的最重要的工具之一。 查看有关该主题的入门。

外部链接-使用Google (External Link - Using Google)

We're quite sure that you are very familiar with using Google to search for things. We've collected a few tips on how to search efficiently, so do check it out.

我们非常确定您对使用Google搜索事物非常熟悉。 我们已经收集了一些有关如何有效搜索的提示 ，因此请查看一下。

JavaScript数据类型 (Javascript Data Types)

Hello and welcome to the Javascript part of the course, where our old friend Nate, will help us write our first lines of Javascript. Nate will introduce primitive and complex data types.

您好，欢迎来到本课程的Javascript部分，我们的老朋友Nate将帮助我们编写第一行Javascript。 Nate将介绍原始和复杂的数据类型。

Primitives are:

基元是：

• strings, e.g "hello"

  字符串，例如"hello"

• numbers, e.g 2, 3

  数字，例如2 ， 3

• booleans, e.g true or false

  布尔值，例如true或false

Complex are combinations of primitives:

复杂是原语的组合：

• array, e.g [1, 2, true, "hello"]

  数组，例如[1, 2, true, "hello"]

• objects, e.g {likes: "travel", countries_visited: 21, has_passport: true}

  对象，例如{likes: "travel", countries_visited: 21, has_passport: true}

分配-杂货店JS (Assignment - Grocery Store JS)

Congrats! You have reached your first Javascript assignment. Do reach out if you get stuck and, more importantly, have fun!

恭喜！ 您已经完成了第一个Javascript任务 。 如果遇到困难，请伸出手，更重要的是，玩得开心！

Javascript数组 (Javascript Arrays)

Welcome back to our next cast. Nate dives a little deeper into arrays and shows how to access various elements of an array and determine its length.

欢迎回到我们的下一个演员表。 Nate深入探讨了数组，并展示了如何访问数组的各种元素并确定其长度。

//              0        1       2        3         4
var colors = ['blue', 'green', 'red', 'yellow', 'purple'];

console.log(colors[1]); // green
console.log(colors.length); // 5

Javascript条件 (Javascript Conditionals)

In this screencast, Nate will help us learn how to add logic to our Javascript programs.

在此截屏视频中，Nate将帮助我们学习如何向Javascript程序添加逻辑。

Often, we would like to do something only if something else is in the right place. For example, if the user's birthday is on the day they are looking at your page, show them a confetti animation :)

通常，我们只想在正确的地方做一些事情。 例如，如果用户的生日是他们浏览您网页的当天，请向他们显示五彩纸屑动画:)

For that, we would use conditionals.

为此，我们将使用条件 。

Nate will walk us through all the if, else if and else, how they are used and more.

Nate将带我们逐步了解所有if ， else if和else ，如何使用它们以及更多内容。

作业-If Statement Olympics (Assignment - If Statement Olympics)

Great, time to practice those if-statements with the next JS assignment

太好了，是时候在下一个JS作业中练习这些if语句了

Javascript循环 (Javascript Loops)

Another common thing in programming is to repeat a certain operation for a number of times. You don't have to copy-paste code for the number of times you need it done, because there are loops for that.

编程中的另一件事是重复执行某项操作多次。 您无需将代码复制粘贴所需的次数，因为这样做有循环 。

for (i = 0; i < 100; i++) {
  // your code you wish to repeat
}

Nate will let teach us all about for loops, and even how you can supercharge them with conditionals from the previous lesson.

Nate将教我们所有关于for循环的知识，甚至教您如何用上一课中的条件增强它们。

分配-偶数/奇数循环 (Assignment - Even/Odd Looping)

Nice one! Let's now practice loops. Be sure to not cut corners and seek help if stuck. Good luck and have fun.

好一个！ 现在让我们练习循环。 确保不要偷工减料，如果被卡住，请寻求帮助。 祝好运并玩得开心点。

分配-循环和数组实践 (Assignment - Loops And Arrays Practice)

All right! Let's now do a very common programming task and practice loops and arrays together.

行！ 现在让我们做一个非常普通的编程任务， 并一起练习循环和数组。

Javascript函数第1部分 (Javascript Functions part 1)

Remember how we talked about not having to copy-paste code in the chapter about loops? Well, a programming term for that is DRY, Don't Repeat Yourself.

还记得我们在关于循环的一章中谈到过不必复制粘贴代码的话题吗？ 好吧，一个编程术语是DRY ，不要重复自己。

Functions are used when we have a piece of code that we would like to reuse, in multiple places.

当我们要在多个地方重复使用一段代码时，就会使用函数 。

function sum(x, y) {
  console.log(x + y);
}

Javascript函数第2部分 (Javascript Functions part 2)

Great, now when we know how to make a function, how do we use it? A term for using a function is calling a function.

太好了，现在我们知道如何创建函数时，如何使用它？ 使用函数的术语是调用函数。

We can call the function from the previous chapter

我们可以从上一章中调用该函数

sum(2, 2); //displays 4

More on calling, how to store results of a function and how to combine them with loops, in this chapter's screencast with Nate.

在本章与Nate 的截屏视频中 ，有关调用，如何存储函数结果以及如何将它们与循环结合的更多信息 。

作业-功能练习 (Assignment - Functions Exercise)

Welcome back! We now have an exercise to practice functions. Reach out if you're stuck, have fun and good luck.

欢迎回来！ 我们现在有一个练习功能的练习。 伸出援助之手，祝您好运和好运。

Javascript对象第1部分 (Javascript Objects Part 1)

It's now time to cover Javascript objects. If you didn't see the point of them after the chapter on data structures, we will cover them in-depth now.

现在该介绍Javascript对象了。 如果您在数据结构一章之后看不到它们的要点，那么我们现在将对其进行深入介绍。

Objects are for those cases when we need to describe something in depth. Objects have properties. For example, personal details of your friends and relatives might be stored in an object, so you know when to send them a birthday card.

对象是针对那些我们需要深入描述某些东西的情况。 对象具有属性 。 例如，您朋友和亲戚的个人详细信息可能存储在一个对象中，因此您知道何时向他们发送生日贺卡。

// to create an object
var person = {
  name: 'Rick',
  age: 70,
  relation: 'grandfather'
};

// to access a property, use '.' dot notation
console.log(person.name);
console.log(person.age);

You would often hear people say key-value pair when they talk about properties and their values.

当人们谈论属性及其值时，您经常会听到人们说“ 键值对” 。

Javascript对象第2部分 (Javascript Objects Part 2)

You can also create properties on existing objects.

您还可以在现有对象上创建属性。

var car = {
  type: 'Honda',
  make: 'Civic',
  wheels: 4,
  honk
};

car.hasHadAccident = true;

console.log(car.hasHadAccident); // displays true

And some properties can be assigned to functions

某些属性可以分配给函数

var car = {
  type: 'Honda',
  make: 'Civic',
  wheels: 4,
  honk: function() {
    console.log('HOOOOONK');
  }
};

car.honk(); // HOOOOONK

作业-社交JS (Assignment - Social JS)

Our next assignment will help you write more complex data structures and help you think how about them.

我们的下一个任务将帮助您编写更复杂的数据结构，并帮助您考虑它们。

任务-奥运循环 (Assignment - Loop Olympics)

Welcome back again, the next exercise will give you additional practice on using and creating for loops.

再次欢迎您， 下一个练习将为您提供有关使用和创建for循环的更多练习。

JavaScript约定 (Javascript Conventions)

Javascript is a very dynamic language and there are many ways to do things. Over the years developers have come up with a set of go-to rules and generally, everybody tends to follow them. These include ways to name variables and functions, use of whitespace, where and how to use comments, etc.

Javascript是一种非常动态的语言，可以通过多种方式来执行操作。 多年来，开发人员已经提出了一套入门规则，通常，每个人都倾向于遵循它们。 这些方法包括命名变量和函数的方式，空格的使用，在何处以及如何使用注释等。

Nate shares these important rules of courtesy among the developers in our screencast, do check it out.

Nate 在我们截屏的开发人员中分享了这些重要的礼貌规则，请务必检查一下。

作业-每日星球编辑器 (Assignment - Daily Planet Editor)

We now have another exercise to complete. This assignment will have you clone down a repository from GitHub that has some javascript code inside. The code is plagued with bad JS conventions, and your goal is to clean it up and make sure it runs correctly.

现在，我们需要完成另一个练习。 这项作业将使您从GitHub中克隆一个包含一些javascript代码的存储库。 该代码受到不良JS约定的困扰，您的目标是清理并确保其正确运行。

DOM简介 (Introduction to the DOM)

So far we were learning about Javascript, but how does it apply to the actual web development?

到目前为止，我们正在学习Javascript，但是它如何应用于实际的Web开发？

Javascript comes in when you need to programmatically update your HTML and CSS. To add interactivity and makes things happen on your page.

当您需要以编程方式更新HTML和CSS时，就会使用Javascript。 要增加交互性并使事情发生在您的页面上。

In this screencast, Bob explains how this can be achieved.

在此截屏视频中，Bob解释了如何实现这一目标。

什么是DOM？ (What is the DOM?)

DOM stands for "Document Object Model". It's essentially a set of tools that are given to developers to be able to change the page programmatically. The DOM is simply an object, on which we can use different methods and properties to make changes to the page.

DOM代表“文档对象模型”。 从本质上讲，它是提供给开发人员的一组工具，能够以编程方式更改页面。 DOM只是一个对象，我们可以在其上使用不同的方法和属性来更改页面。

The way we access the DOM is by adding a

Then inside index.js file, we can access the DOM by using document keyword.

然后在index.js文件中，我们可以使用document关键字访问DOM。

console.log(document);

分配-将document到控制台 (Assignment - log document to the console)

This is going to be a short one. For your next assignment try to build a basic HTML page from scratch, try to log document and look what actually gets logged in the console.

这将是一个简短的。 对于下一个任务，请尝试从头开始构建基本HTML页面，尝试记录document并查看控制台中实际记录的内容。

选择元素-getElementById (Selecting Elements - getElementById)

In this cast, Bob shows us how we can select a specific DOM element by a provided id on the element.

在此演员表中，Bob向我们展示了如何通过元素上提供的id选择特定的DOM元素。

And now we can select that element with Javascript

现在我们可以使用Javascript选择该元素

var hello = document.getElementById('hello');
console.log(hello); // 

分配-getElementById (Assignment - getElementById)

Welcome to the next exercise. In this one you will practice some DOM manipulation and also attempt to solve a problem that you haven't been introduced before. No worries, any search engine is your friend!

欢迎参加下一个练习 。 在这一部分中，您将练习一些DOM操作，并尝试解决以前没有介绍过的问题。 不用担心，任何搜索引擎都是您的朋友！

选择多个元素 (Selecting Multiple Elements)

In this chapter, Bob shows us how to select multiple DOM elements. You really have a selection in this case. Elements could be selected by their id, class name or tag name.

在本章中，Bob向我们展示了如何选择多个DOM元素。 在这种情况下，您确实有选择。 元素可以通过其ID，类名或标签名进行选择。

   
  
    
Thing 1
    
Thing 2
    
Thing 3

    
  

var things = document.getElementsByClassName('things');
console.log(things); // HTMLCollection with 3 elements.

querySelector和querySelectorAll (querySelector and querySelectorAll)

There is also another way that can help us select elements and it could be used with all three: tags, ids and class names.

还有另一种方法可以帮助我们选择元素，并且可以与所有三个元素一起使用：标签，id和类名。

document.querySelector('#favorite-things'); // returns the first element that matches the id
document.querySelectorAll('#favorite-things'); // returns all elements that match the id

修改元素的文字 (Modifying an element's text)

It's all well and good to be able to select elements, but it's really useful to be able to update them once selected. One of the most common usages is updating some text with Javascript.

能够选择元素很好，但是一旦选择就能够更新它们真的很有用。 最常见的用法之一是使用Javascript更新某些文本。

In this chapter, Bob covers a few ways and looks at their pros and cons. One of them is:

在本章中，Bob讨论了几种方法，并介绍了它们的优缺点。 其中之一是：

PLACEHOLDER

document.querySelector('#paragraph').textContent = "I've changed!";

修改样式 (Modifying Styles)

If we can modify some text, the same applies to modifying styles.

如果我们可以修改某些文本，则修改样式也是如此。

Modifying Styles with JS

var header = document.getElementById('header');
header.style.color = 'blue'; // header changes color to blue

修改样式-className和classList (Modifying Styles - className and classList)

Often you might not want to change a style permanently. It's common to change colors depending on some event or input for some time and then return it to a default position. For example, you're inputting a text in a field, you might want to highlight that box's edges.

通常，您可能不想永久更改样式。 通常会根据某些事件或输入更改颜色一段时间，然后将其返回到默认位置。 例如，您要在字段中输入文本，则可能要突出显示该框的边缘。

This is a perfect case for adding and removing a class.

这是添加和删除类的完美案例。

Modifying Styles with JS

document.querySelector('#header').classList.add('new-class'); // now classes in #header are: title new-class another
document.querySelector('#header').classList.remove('title'); // now classes in #header are: new-class another

// to turn on or off use toggle
document.querySelector('#header').classList.toggle('title'); // adds title class back.

修改元素-值 (Modifying elements - value)

While we're on the subject of modifying elements, tag deserves our special attention. It's a bit of an odd one out, as it doesn't have textContent property and the way you would access what the user has typed into an input field is with value property.

当我们讨论修改元素的主题时， 标记值得我们特别注意。 这有点奇怪，因为它没有textContent属性，而访问用户在输入字段中键入内容的方式就是使用value属性。

var inputBox = document.getElementById('text-input');
console.log(inputBox.value); // will log user's input

在JS中创建元素 (Creating elements in JS)

If we can modify an element, why not create it?

如果我们可以修改元素，为什么不创建它呢？

We can do it with createElement() function.

我们可以使用createElement()函数来实现。

For example, if we have a list

例如，如果我们有一个列表

  
0
  
1
  
2

We can add another

element like so:

我们可以像这样添加另一个

元素：

// create a new list element
var newLi = document.createElement('li');

// add an order number inside, so it looks like 
3
newLi.textContent = '3';

//select the existing list
var myList = document.getElementById('my-list');

// add the newly created li to the list.
myList.append(newLi);

在JS中创建元素-innerHTML (Creating elements in JS - innerHTML)

The approach Bob has shown us in the previous chapter is the go-to way. But in this chapter, he shows us that for such quick operations we can simplify the code by using innerHtml.

Bob在上一章中向我们展示的方法是必经之路。 但是在本章中，他向我们展示了对于这样的快速操作，我们可以使用innerHtml简化代码。

var myList = document.getElementById('my-list');
// innerHTML is a string represantation, which is why it's possible to just add another element.
myList.innerHTML += '
3
';

在JS中创建元素-用于循环+ createElement (Creating elements in JS - for loops + createElement)

Ok, let's now apply what we've learnt.

好的，现在让我们应用所学到的知识。

We can combine our knowledge of loops with createElement to display information on the screen.

我们可以将循环知识与createElement相结合，以在屏幕上显示信息。

Imagine you're having a party and you've sent the invitations. When someone agrees to come, you'd like to show their names on a page. This list of people can change. So different users might see different information depending on when they saw your page.

假设您正在参加一个聚会并且已经发送了邀请。 当有人同意来时，您想在页面上显示他们的名字。 此人列表可以更改。 因此，不同的用户可能会看到不同的信息，具体取决于他们看到您的页面的时间。

Let's see how it can be done

让我们看看如何做到

// my guests
var partyGuests = [
  'Jason Lee Scott',
  'Kimberly Hart',
  'Zack Taylor',
  'Trini Kwan',
  'Billy Cranston'
];

// grab the list
var guestList = document.getElementById('guests');

// for every guest in the partyGuests array
for (var i = 0; i < partyGuests.length; i++) {
  // create a list element for each
  var newName = document.createElement('li');

  // and guest's name to the list element
  newName.textContent = partyGuests[i];

  // add the list element to my list of guests
  guestList.append(newName);
}

事件监听器 (Event Listeners)

All of the DOM modifications we've learnt so far were leading up to this very chapter. A lot of the changes usually depend on a user interacting with your page.

到目前为止，我们已经学习了所有的DOM修改。 很多更改通常取决于用户与您的页面进行交互。

This brings us to events and event listeners. Events are clicks, hovers, keyboard presses, the usual ways people interact with web pages. Event listeners are special bits of code that wait for those events and then trigger your code when something happens.

这将我们带入事件和事件侦听器 。 事件包括点击，悬停，键盘按键以及人们与网页交互的常用方式。 事件侦听器是代码的特殊位，它们等待这些事件，然后在发生某些情况时触发您的代码。

Let's look at an example of a button.

让我们看一个按钮的例子。

  
    
  
  
    Click me

    
  

var button = document.getElementById('button');

// add an vent listener for clicks
button.addEventListener('click', function() {
  // when a user clicks the button, run this function.
  console.log('The button was clicked!');
});

自学-从输入元素获取价值 (Self study - get the value from an input element)

Welcome to your next challenge. You will need to record user's input and the log it in the console after they click on a button. No worries if you're not sure how to do it. There are some useful links in the cast and we're sure you can do it.

欢迎来到您的下一个挑战。 您需要记录用户的输入，并在他们单击按钮后将其记录在控制台中。 如果您不确定该怎么做，请不用担心。 演员表中有一些有用的链接，我们相信您可以做到。

DJ JS-事件侦听器练习 (DJ JS - Event listener practice)

Great job for getting this far in the course. It's now time to practice event listeners in our next exercise. As always if you get stuck, do watch some of the previous screencasts and feel free to reach out.

在课程中取得如此出色的成就非常出色。 现在是时候在下一个练习中练习事件侦听器了。 与往常一样，如果您遇到困难，请观看一些以前的截屏视频，并随时与我们联系。

课前项目 (Pre-course Project)

Nice one. You've made it through the course materials and you are ready for the pre-course project. This project is aimed at people who would like to enrol to V School, but if you'd like some extra practice, also feel free to jump in.

好一个。 您已经完成了课程材料，并准备进行课前项目 。 该项目面向想要报读V School的人们，但是如果您想要一些额外的练习，还可以随时加入。

恭喜！ (Congrats!)

Huge congratulations for completing the course. You've worked very hard and you should be really proud of yourself. This is the beginning of an amazing journey for you!

祝贺您完成本课程。 您工作非常努力，应该为自己感到骄傲。 对于您来说，这是一段神奇旅程的开始！

翻译自: https://www.freecodecamp.org/news/the-ultimate-bootcamp-primer/