Placeholder Image

字幕表 動画を再生する

  • [BELL RINGS]

  • Hi.

  • So I have so far made three videos in this series

  • about learning to code from the very beginning

  • with p5 and the p5 web editor.

  • And I kind of have been avoiding showing

  • you what happens when you make a mistake, which I really

  • should not have done.

  • That's the thing I really should be showing you right from

  • the beginning, but I didn't.

  • And I also haven't mentioned to use

  • something called code comments.

  • And both of these things are fundamental to how

  • you might create a p5 sketch, one

  • that you might work on over a period time

  • and return to later.

  • So let's first look at the console and errors.

  • So there's this whole extra section

  • down here that I've ignored.

  • I've been talking about this is where you write your code,

  • the Play button executes the code,

  • and this is where you see the result of your code.

  • Well what do you see down here?

  • What you see down here is messages

  • that are things that are related to what's

  • happening in your code that might be a mistake

  • or something that you add that you want to specifically put

  • a message there.

  • So I'm going to show you.

  • There's a function called Print.

  • I'm going to say Print, and I'm going to say Hello.

  • And I'm putting this in Setup because I want this just

  • to happen at the beginning.

  • And this again, I will come back to later.

  • So this being in the code, suddenly in the console,

  • we have this down here.

  • The idea of the console is not something.

  • So if you're making a project that you imagine users

  • using, like a game, you wouldn't put the score of the game here.

  • You would want to draw the score somewhere on the canvas,

  • or there's actually a way you could

  • put the score below the canvas, something for the user

  • to ultimately see.

  • But if you just want to be able to see

  • what the score of the game is and kind of like for yourself

  • while you're developing, the console

  • is for you, the person who's writing the code,

  • or your friend who you're sharing the code with,

  • or your teacher, or whoever.

  • I mean, it's something that anybody using the p5 web editor

  • can see.

  • But when you've finished it and you put it

  • on your own website, which is maybe

  • something I'll show you how to do,

  • that console wouldn't necessarily appear.

  • So in addition to be on to put your own messages,

  • anything that you do wrong is going to be down there.

  • Now, one thing that's really important,

  • notice how noStroke has a capital S?

  • noStroke also doesn't even have any arguments in here,

  • like, it's just open and close parentheses,

  • because there's no way to modify it.

  • That's something I didn't mention.

  • Notice how there's comments here?

  • If I get anything wrong, like if I delete this comma,

  • look at this.

  • Now I'm also getting error messages in here.

  • Now this is-- maybe not.

  • [BUZZ]

  • Oh, buzz, look.

  • Error message.

  • So here's the thing.

  • Whenever you see the red error message.

  • First of all, just take a deep breath.

  • Sometimes that error message is lovely,

  • if it tells you exactly what's wrong and you can--

  • and it tells you how to fix it.

  • And this might be a case.

  • Uncaught SyntaxError missing parentheses after your argument

  • list, sketch line 11.

  • Oh look, line 11 missing parentheses.

  • Sorry.

  • You know what it really should say?

  • Missing comma.

  • So this is the thing.

  • The thing that's generating the error, the web editor,

  • the JavaScript language, the browser, all of these pieces

  • are figuring out what to put down there.

  • It doesn't always guess correctly.

  • So the nice thing is they can see like, oh, I

  • expected a parentheses.

  • We can kind of like see it there,

  • but we're going to have to guess.

  • What's wrong?

  • It's actually a comma.

  • Sometimes we'll get an error message

  • that totally makes sense.

  • I'm going to change this from strokeWeight with a capital W

  • to strokeweight with a lower case W. And this,

  • I'm not getting such a great error message,

  • but this is a really important one.

  • Uncaught ReferenceError. strokeweight is not defined.

  • Well, but why is it not defined?

  • I watched a video from Daniel Schiffman,

  • and he said that strokeweight is a function

  • from the p5.js library.

  • It's not part of the JavaScript language,

  • but it's a function of the p5.js library,

  • and I can call it in my code if I'm using the p5 web

  • editor, which is true.

  • But because programming is in JavaScript is case sensitive,

  • it doesn't know what it is without the capital W.

  • And notice how the editor is syntax highlighting it for you.

  • So strokeWeight, suddenly it turns blue.

  • This is, by the way, no different than me saying,

  • like, oh, I want to write a function called unicornmagic.

  • Uncaught ReferenceError unicornmagic is not defined.

  • Because it's not a function.

  • It's not part of the p5.js library or any other library

  • that I might be choosing to use as part of my project.

  • There are other functions that you can call up

  • by the way, that are just part of JavaScript

  • inherently, that you get when you use JavaScript.

  • And p5 adds functions to that.

  • So that's an error you're going to see a lot.

  • It's because you misspelled it.

  • Maybe you got a capital wrong, or it's just

  • something you thought was in p5 or some other library

  • you're using, but it's not there at all.

  • So here's an interesting thing.

  • I'm just going to take out all the semicolons,

  • or like some of them.

  • No error message.

  • I'm having like heart palpitations right now,

  • because the semicolons give me comfort.

  • But the truth of the matter is, the semicolons are somewhat

  • optional in JavaScript.

  • They indicate where the end of the line is.

  • The end of a line of code background 100 is--

  • where is it?

  • Where is it?

  • It's there.

  • But JavaScript can usually figure out where the end

  • the line of code is even if you don't

  • include this, the semicolon.

  • The weird thing is, I'm going to show you

  • something kind of interesting.

  • If I were to put, let's say, rectMode up here

  • on the same line, the code runs just fine the same way.

  • JavaScript actually thinks of that as two lines of code

  • because semicolon means the end of a line, then the next line.

  • But if I delete the semicolon now, all is lost.

  • It can't figure it out.

  • So this is why it's generally good practice

  • to use the semicolons.

  • It's like a safety net.

  • Like, I'm really explicitly saying where

  • the end of the line of code is.

  • But you might really just-- you should have fun

  • and just like not use the semicolons,

  • but I can't help it.

  • And also, I have to do the tidy code thing now.

  • There.

  • OK.

  • [BELL RINGS]

  • All right, I know I said at the beginning of this video

  • that I was going to talk about the code comments,

  • but I'm not going to.

  • That's going to be in the next video.

  • I'm going to do that separately so you

  • can look at them individually, and this video's title should

  • probably just say, like, Console and Error Messages, so you

  • won't turn up in your search.

  • All right, so if you want, the next thing

  • that I think is useful to you in like working

  • on your assignment, your project,

  • for this first set of videos is understanding

  • what code comments are and how to use them.

  • I'll do that in the next video.

[BELL RINGS]

字幕と単語

動画の操作 ここで「動画」の調整と「字幕」の表示を設定することができます

A2 初級

1.5: エラーとコンソール - p5.jsチュートリアル (1.5: Errors & Console - p5.js Tutorial)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語