Lecture 50, Part 2: Arrays

Loading...

來自 Johns Hopkins University 的課程

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

4850 個評分

Johns Hopkins University

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

4850 個評分

課程 4（共 6 門，Specialization Ruby on Rails Web Development）

你是否意识到用户与Web应用程序直接交互的唯一渠道是通过Web页面？对于用户来说，Web页面实现得不好，服务端将变得与用户毫不相干！如今用户对Web页面之外有更多的期待：必须加载够快、传递需要的服务、舒适的在各个设备上浏览：从台式电脑到移动手机。在本门课程中，我们将学习每个Web页面程序员需要知道的基本工具。我们将从最基本的如何用HTML、CSS实现现代的Web页面学习开始。然后我们将进一步学习如何编写页面代码，例如根据用户屏幕的大小来自动调整组件位置和它们的大小。你将能够自己编写一个台式电脑和移动手机都能用的网页。不需要“捏和缩放”！最后，我们将对网络上最普遍、最受欢迎的、令人难以置信的强大语言：Javascript，进行深入的介绍。用Javascript，你将能够建立一个全功能的Web应用程序，通过利用Ajax传递服务端的功能和数据给最终用户。

從本節課中

Introduction to Javascript

What fun would a web site be if there was no functionality to it? In this module, we are going to concentrate on learning the fundamentals of the Javascript language. A lot of even seasoned developers “tinker” with Javascript without really understanding how the language works. That leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are going to concentrate not only on the “how” but also on the “why”, so you are empowered by the Javascript language features, not confused by them. We’ll cover just about everything - from common language constructs and Javascript types to objects, functions, arrays, closures, and scope isolation.

Lecture 50, Part 1: Arrays8:28

Lecture 50, Part 2: Arrays4:26

Lecture 51: Closures6:54

Lecture 52, Part 1: Fake Namespaces6:05

Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs)8:55

Module 4 Wrap-Up0:44

與講師見面

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] There is one more issue that you should really

be aware of when it comes to using a certain for loop with arrays.

Let's go ahead and comment all this out, and I'll go ahead and

copy my array one more time.

And I'll just call it something else, I'll call it names2 maybe.

Let's see, names2, so I have a name2 array, and

again it says Yaakov, John, and Joe.

Okay, so let's leave the site for now, and let's create an object literal.

We'll create obj, let's say myObj and we'll create it as an object literal.

We'll put the semicolon there.

And we'll say name Yaakov.

We'll say another property course: "HTML/CSS/JS" comma,

and we'll say platform: "Coursera".

Okay, so that's good enough.

So now, there's something we actually haven't seen yet that I haven't shown you.

And there's a special for

loop that you could use to traverse the properties of an object.

So this for loop looks like this.

It's a for, and you declare it as a var Prop in myObj.

So basically it will say, I want to grab every property in my object.

This is what this prop is going to be.

So it's very convenient for objects,

because objects don't really have indices like an array does, it has properties.

So let's go ahead and console that out.

Console.log prop and we'll say semicolon here,

add that in, and we'll add myObj, and

we'll give it prop again.

And since that notation and the brackets notation are equivalent, I'm allowed to

do this, so this just lets us kind of a calculated, in the calculated property.

Okay. So if I save that.

And I'll see that it's printing out name, that's the name of the property, and

the value, name of the property and the value, name property and the value.

Okay that's all great.

Now we know that in JavaScript arrays are just objects and

the indices are just property names.

So technically speaking I could use the same type of four loop

on my names2 array as well.

So let's go ahead and try that.

Let's actually comment this out for

a minute, so we don't have it crowd our console, make a little bit more room.

Okay. So now let's say, for name in names.

It sounds pretty good.

So we'll say console.log, and we'll say hi, hello, and we'll say names,

and we'll use a computed property notation name.

So every time through the loop

this name will be equal a different property of their rate.

So the first time it will be equal zero,

because that's a property name of the array.

The second time it will equal one and the third time it will be equal two.

So this should work.

Let's go ahead and save that.

And I messed up something here, names is not defined, of course not.

Names2, let's go ahead and save names2 here.

Let's save that again.

Names2 is still not defined, and that's because I didn't put names2 right here.

Okay. So now it will work.

So now it says hello Yaakov, hello John, and hello Joe.

But the problem with this for loop is that arrays are objects after all.

So for example, there's nothing wrong with me saying names2.greeting = "hi".

Let's say I want to save a specific greeting that I want to use.

So now if I use the same array.

We'll go ahead and copy that.

And say, afterwards, hi.

And now if I use the same array, and let's go ahead and comment that out for

a minute and save it, what I'm going to get is hello Yaakov,

hello John, hello Joe, hello hi.

Now the reason that is, is because the greeting became a property of

the array no different than a number zero, or number two, or number one, and so on.

Greeting becomes a property of the array, and this for

loop loops over the property names of the object.

And since again, arrays are just objects in JavaScript, this for

loop will loop over properties, even over properties that really have

nothing to do with the core data that we want to loop over.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取