Okay, good morning, everyone.
Before I get started here. So first of all.
Thank you all for taking the midterm. We're going to be working on grading.
I haven't got a chance to split the grading piles, but I'll be doing that later today.
Yesterday.
was a bit of a wash.
We're now on lecture 13.
Halloween. Happy Halloween, everyone.
So I hope you're…
Hope you're all going to have a good one today or maybe you all went to parties already last weekend.
And for anyone who's Hindu, happy Diwali that's
coming up right now, which is basically today and through this weekend.
So.
fun time we're getting into the holidays.
So what I want to do today was talk about
Tutorial 6.
Which I've just posted.
And, uh.
The reason why I want to talk about tutorials, I want to talk tutorials only taught what inspired it.
Oh, most of you
have figured out the validator.
Most of you.
But a significant fraction of you
still have issues.
with validating assignments.
And…
And some of you, I think, managed to make it validate through very complex gymnastics.
So…
So that was an issue. And then I realized
We're at the stage now I need to teach you about client-side JavaScript.
And I have a client-side JavaScript application that you all have been using.
So that's tutorial six.
And so my plan right now for assignment three
is basically I'll combine
DOM demo.
and the code from tutorial 6, i.e. I'm going to make something that will
validate an assignment on the client side and then upload it to the server
and then save it in a database.
Without all the fancy things that you'd normally do for a proper version of this with your authentication stuff, but I think that will do
maybe in the later ones, but I think for this next assignment
It'll be combining those two bits of code.
with minimal glue. I'm not planning on making it too fancy. We'll fancy it up later on.
And actually explore client-side JavaScript.
So for those of you who had trouble with the validator.
I'm going to have to go through and fix your midterms.
I'm going to manually edit them
In order to make sure they parse properly.
And…
That's annoying but
But I will do it. That's why I was trying to save myself some work.
But that's what I'm going to probably be working on this afternoon.
And I'm hoping you all can learn. Now, I am going to say, I will…
I'm going to walk through this.
We're going to do this real quick. And then I'm going to have a little rant probably later on.
about this. So first off.
you know i have you a bunch of tasks you do in this tutorial and I have the code here.
Now, the thing to understand about this code
is this is a web page.
right this is
you know, this is a pure web page
it has
And inside of this webpage, so you have doc type HTML, HTML,
HTML here and stuff, it has a title. It has a little
A little bit of style. So this is a little bit of css
Here's the JavaScript.
JavaScript is most of the file.
And it goes here at the end of a script.
But it's all in the header of the page.
And then the body of the page.
Is this a little bit of HTML?
And that's it.
So why are we using validators?
The reason I'm using these validators is because when we do grading, see, that's a good question. What is the purpose of this
I will talk about that in a second when I switch over because I want to do a couple of things first.
And then we'll talk about the purpose of this and
why at all makes sense.
But let's go there. So here's the code.
So here I need to select a file.
And I need to do this.
So, you know, I need to do this.
I'm not going to give you a template for this tutorial.
you're going to have to make one, but I'm going to make one now
to show you.
Now.
One thing that you should know.
So I will first
I specifically brought up a Windows VM
To show you this, because I wanted to
Where's notepad?
I'll just search for notepad.
So we're going to use Notepad.
So if I use notepadep
And I do file
I do save as.
And I do…
We'll do this.
Okay.
So I've created this file here.
And then I go over, so I didn't put anything in it.
But I give the right file name. And actually, let me put um
not actually do anything properly here because this thing's not going to validate properly.
And I wanted to show you all this. So let's browse this.
I go desktop here and
Huh.
That's not what I was expecting. What's going on?
That's interesting.
Okay, I need to. So first off, let me show you how we're going to, so now this code's doing something weird.
So how am I going to deal with this? So first, I want to run this locally. So I'm going to say save page as.
And I'm just going to save it to my desktop here.
So I've saved that one and now I'll just
Here it is. And now it loads there. Now I'm running my local version of this.
And so we're going to just edit this in Notepad because this is not a good thing, but I'm just sort of trying to do the lowest common denominator.
here.
So here is
Oh, do they really convert it for me?
That's just rude.
Oh, that's just…
I'm a little irritated because when I save this HTML file, it changed it into a Windows
carriage on the line feed. So this is the thing I want to show you.
Up.
Let me first make sure, I'm just going to make another template here and then we will
the way you're going to do it on Windows, it turns out that
By default, Windows does this
Line encoding is Windows, carriage return line feed.
That is…
not what you want for the validator. This will generate an error.
But right now I'm just going to fix the code.
And I'm just going to
turn off
this.
Oh.
I don't want to have the height analysis now.
We can reload this.
What?
Save that. I got rid of that.
Okay, this is wrong.
So.
Sorry, I'm just being a little confused here because it's not doing what I expected it to.
So when I clicked on this, if you just
click on it and save this page.
Seems that Firefox actually mangles it slightly.
So what you want to do instead say save link as
And then save this to, you know, just save it as that.
Because if you do that.
then the file that's saved is going to be
I don't want that.
Don't save.
Okay, good.
I want to load this with
Open with.
So I've loaded in WordPad and notice when I load it now in WordPad, it says Unix.
This is what it should be doing it. It shouldn't be
converting text files on buying my back is like very irritating
this is the format you want.
Notepad will edit and respect them once you download, but it will not create them that way.
Anyway, I just want to make sure
While I'm trying to demonstrate this, I'm doing a little debugging that I was not expecting to have to do.
So we'll
Why is it not showing me my
There we go.
now this is what I wanted.
There.
that's what I was looking. For some reason, it wasn't showing that. I don't know why, but I'll debug that later.
I hate that you're, oh yeah this is, I'm going to switch back to Emacs in a second. I just wanted to show this
part. This is really gross.
So here is
Here's what it is. You select the button
there should be a submit button. We'll talk about that submit button in a second here.
So what it says error
is not a Unix text file. It is a DOS Windows text file.
So that is because that is because
if i am
Where's my other file here?
this. So if I
If I look at this file, it says Windows carriage turn line feed.
There is no way to save a notepad
a file and change it to Unix here.
But if you download a file, so if you go to
So if we go to the templates.
So for example, I'll just download the midterm template.
Let's just do right click.
And…
So now if i do that.
And I…
load this one, notice the template comes up
as Unix.
So this one's fine.
And in fact, we can do this one. We can save it as
And then we just go ahead and delete.
Then we change this to be
I've done those.
And I saved the document.
Sure.
Okay, that looks good. And now we go into the validator
Now, one thing is if it says this
you have to really reload it so it says
no file selected because of the on change
you'll see, but…
you have to reload it so it doesn't do that then you load it
You do this and it says past.
File name is this, name is this.
Student ID is this.
And then it questions first answer
Second answer, fourth answer.
Which is what we expected.
So…
what's the upshot of this?
Sorry that took too long there. I was kind of fiddling around.
is in doing the tutorial, you should
When you're here.
you should not just click on it and save locally.
You should right click and do save link as.
edit that version.
And then once you have that version locally.
You can access it locally.
Okay, this is not the one we want.
And so here we have the file desktop
tootidator.
And then you can do this
you know, browse, edit, and then you can create. Now, if you create a template
that just using something like notepad is probably going to be character and line feed. But if you download a template, just download it.
from the process assignments, edit that, that will be a Unix text file then you can use that.
Or you can use an editor
on windows that properly supports line feed endings. But even using notepad
you can see that there's a problem with these.
or see that whether you're doing things right.
Because here says Unix.
And that's what your NCLF, line feet characters.
So now let me stop sharing here.
And now let's start talking about what's going on here.
Share.
the code.
So I've got the code here, i.e. the web page.
And I've got this here.
So bright space.
So why do I do things like this?
It's because it's because
So by having a text file formatted like this.
I can run a JavaScript program or any other program and I
Split this up by question. Make a file that is just
Questions.
And because it's just questions.
Then the TAs can just go through and grade it very quickly
Then, you know, versus going through these things because they don't have to change what they go like they're comparing the same question over and over again.
And then I can run another program that splits them all up and
That puts them all back together and then you have that that's the feedback files you get.
For your assignments.
I owe you grades for finishing assignment two. I will be working on that today.
today and tomorrow. So we should have by the weekend.
Yeah. And so Brightspace
you can do all kinds of things through Brightspace, and I kind of need to use it because it has accounts
set up for all of you individually as students and it has confidentiality and things so
it's kind of important for me to use up for grades, but actually the quizzes are okay
little things, but like doing any sort of real
you know interactions and stuff is just painful and grading through it
is definitely painful. I mean, going through it in the interface, I mean, it's fine. Like if you're writing an essay and things, it's like, it's kind of okay but
It's not very fast.
And certainly there's no way to slice and dice things like, oh, I want this TA just to grade this question.
it just doesn't have support for that.
So I made my own thing to do this.
And now I realize this would be something useful to
to cover.
So.
That's why I do things in the sport, this text file. So I made this validator. And so now let's use it as an example of client-side JavaScript.
So you're all familiar with the interface.
But let's talk about what it actually is.
So…
This is an HTML document.
So we have
Dr. HTML, HTML, we have a head.
There's a closing head and then there's a body
And this is the body so the body
We'll talk about this on load here in a second, but it's otherwise it's a body tag.
You have an H1.
That's the heading of the page.
there's an input
Here, this is a form.
with the um
you know what the thing so
I think I'm going to fix this for the tutorial because it actually isn't that reliable.
I think I need to make this a i might make this a proper
form
Because you can make JavaScript forms
Well, we'll see. I'll wait.
You know, I'll probably keep it like this.
It's good to see. It's kind of janky, but then you can see why we don't use this most time and you instead have a submit button.
But instead of a submit button, what this does is this
has this on change call, which I'll explain and then it
has on
has a type file and stuff and that's where you select the file locally to do it.
And then here's the div.
Inside of which is all the analysis
of it. So what we
have here is we have embedded JavaScript
But JavaScript does two things.
One of the things it does is this.
When the pages load, it does this hide analysis.
And then it has
And then it's, you know, there's a whole page. So hide analysis
hides the entire div of the analysis section.
there was a glitch when I was looking at earlier, and I'm going to see if I can figure out what's going on with that.
In a bit, because I hadn't seen that on my machine without a singer on
on Firefox or Windows. I'm not sure why but
So it hides this.
And all this stuff is initially like this
this stuff is changed by JavaScript.
when you select a file.
So it's like when this when this thing changes
it calls load assignment on this.
And so this is referring to
the file name that you get here.
But this height analysis is called when the page finishes loading.
This onChange is called when
um the
file selector gets a new value.
So those are two little bits of JavaScript. Notice there's these little handlers. You can do these
on something.
associated with in HTML. You can basically set these are event handlers. When this event happens.
call this code.
And here we've defined, you know, where is this code defined? It can be defined in a separate JavaScript program.
Burr can be defined in the HTML file right here in a script tag.
And that's what I've done here. So everything is in one place.
So we go to the top here we have
Here in this one, we have a style thing. So I incorporate CSS into this
And then here is my JavaScript.
And so this is all you have to go through this to figure out what is, but there's this
height analysis function.
That's what's being called here on load.
And what it does is it gets
the element of the element
the document here.
And then sets it to be hidden.
Because it has a property, it's an object. And you say hidden true, it shouldn't show it.
Let's see if I can bring up my class.
Yes, I want to show you kind of like
some stuff of how you play with this.
And that way you can
Sharing.
Yep, I'm going to walk through the code here in a second here.
Just one second. We've got a lot more to talk about this code. There's a lot going on in this code and I have to start at the top.
Oh, right.
documents.
There we go. Here's my document stuff and there's tutorial validator.
I'll make sure this works.
Good.
So, uh.
What I wanted to show was that this code was working and I'm not sure if it's
breaking on your desktop spot.
The objective today is to go over the code of tutorial 6, yes, and I'm going to start walking through it.
One of the things to understand about
front-end development.
is so you're looking at this code
And the reason why I want to bring the browser
is to show you some stuff that you can do
with the code here.
Good question. So the question is, why do we put html
Yes, that's exactly what we're talking about here. So we've got
I'm now putting an error into the HTML here.
So notice this, this is the code successfully running in the console. It's outputting this.
Notice that basically this is a
object which contains the
the question names and the question values.
not displayed, something going under the hood.
But now I'm going to reload this.
And now we've got an error.
What's this error here? So in order to get here, you go to the
inspector, once you go into tools
get a web developer tools, which is control shift i on my machine. It has other shortcuts elsewhere, but you go to the web developer tools
And then you're here and you've got all these options for things.
If you select the console, this is a JavaScript console that is running in the context
of this webpage. So that's what we're doing now is we're doing JavaScript still, but we're doing in the context
of the client. And now you're going to see things get a little bit
funnier.
because you know
So one thing we hear, unexpected, you know, uncut
syntax are unexpected token identifier.
hide analysis and then hide analysis is not defined.
So what is this? So this is saying toot validator HTML1
68. So if I click here
it brings about the source and it goes like, oh, I put a typo there, a function
instead of just function. So that's wrong
And then also what it said, reference error, hide analysis is not defined.
Here.
And so it's saying that there's a call here. So you can actually, by going through this.
And we can do a more detailed debugging demo, I think, on Tuesday.
This basically lets you do all kinds of things for understanding what exactly is happening in this web page.
And the beautiful thing, because everything is in this one page.
everything here is useful because there's some stuff like, oh, the code's running on the server and stuff
And you have to run a debugger there and connect to it and things like this is everything is client side, so you can go through it.
This is Firefox. Chrome has
you know inspector, you know, dev tools that are very similar to it
I prefer to use Firefox.
And there's a whole story there.
So what I've shown you is you can run the code here, save it locally.
doing the browser, it should work
go to the console, you can see the output. If you have coding errors, you should be able to fix them there.
but now
Let's go back to sharing.
So what do we have here? We have here a code
And let's go back to our notes.
So.
So when we talk about client-side document and client-side JavaScript, we have to understand that web browsers
render HTML documents.
So since client-side judgment runs within the context of an HTML document.
it's you know
that's, you know, that's what defines this environment.
So when we go back to this code here, there was a question earlier, what is um
there are these calls to document
Document represents
the HTML. Then there's this get element by ID.
So, uh.
So when you look through this and you see this one says update tag, it says document get l id
by this ID, enter HTML equals val so it's
looking up something by id
where the ID values? They're here.
ID equals analysis, ID equals status, ID equals file name, ID equals
name, these are all there.
to name specific to
HTML tags, which become nodes
in a tree data structure.
And they're not necessarily just leaf nodes. They potentially have nodes below them just you know how
HTML tags can be inside HTML tags, inside HTML tags.
Instead of them being inside, they're children.
on the tree. So this is a tree data structure
you can access parts of it.
what this code is doing
When you're looking at the page and you're loading stuff, it's updating the page with the analysis.
So let's walk through this code and seeing what the heck is this doing.
So first of all, what's our entry point?
So.
Oh, span tags are used for styling?
Oh, here?
this is not a great this is a great
This is kind of gross.
Let me show you what I mean.
So we're back in here. I've just loaded a document. I've just validated it.
So this is after the code is run.
Now we can look at this document and see what it looks like.
So if you look under analysis here, we look under these paragraphs.
you're looking at these things
So what we're doing with these spans
They are used for formatting, but here what I'm doing with these spans is
I'm filling in data for them.
But if I look at the
source of this.
we look at what does this page actually look like initially, it's got status, it's got span, unknown
It's got the span, you know.
you know span ID file name
this thing, there's nothing there
But then you go over here
and you look at these spans.
And you see they have contents.
there's stuff in them. They've been changed.
The HTML, the tree that's in the page
no longer corresponds to this here. It's been changed programmatically.
So these ID tags are the key for changing the code programmatically.
what are the two entry points? One is height analysis.
that calls the code here and then load assignment.
So height analysis is on the onload event
The onload event
So this on load event
is the event that happens when the page is finished loading.
In developing this tutorial, I actually thought
Oh, let me just
you know, I just literally put this code at the very top of the script tag and just ran it.
to see what happened.
And what I found is that that code
It tried doing a get element by ID analysis
Analysis didn't exist.
He got nearly like, what are you talking about? It's right there because it hadn't finished loading the HTML, it was still parsing
the rest of the file when it was a net
evaluating this JavaScript. So if this is
concurrency is a big thing in JavaScript. You have to be aware of
when things happen and things can happen in parallel in funny ways.
So.
Let's go back to my um
Yeah, so this
code here is happening. Now notice the syntax highlighting is kind of off
And that's because this is JavaScript inside of a script tag.
potentially a reason to
loaded into you know
split it out into a separate file, but I wanted to kind of show you how everything can be.
in one place.
But…
So we have this
height analysis function, it needs to only run after the page is fully loaded. All it does is it gets the analysis section
node and then sets it to
So as to hide that portion because it doesn't have any valid data until
the page has been fully loaded.
And then Lotus on change
happens.
You know, when input field change. So when the file name changes
In here.
then it calls load assignment with this, and this is the value of
this input object.
input widget.
Hide analysis is simple enough, what does load assignment do?
Here's load assignment. So we have some, so here we have script text JavaScript
I wonder why the…
I don't know why these parts don't highlight.
But the other ones do.
I guess maybe it's just too long. That's probably what it is. It's just too much code and script tag.
So input, so we set the text JavaScript
Notice this format. It's a mime type.
Just like application PDF.
or something else, it's specifying the MIME type of this.
You might say, why do I have a mime type associated with the script?
It's because technically
Web pages support multiple languages.
There are other languages that you could have embedded. And which ones are implemented can have historically varied from browser to browser.
The fact of the matter is
there's no other languages that you can use in any sort of general way inside of a browser, inside of this script tag.
It's JavaScript.
Currently and currently
Yeah. It's been that way for a long time. It's probably not going to change.
could change, but that's what they're so you but you're specifying what
what's the title code this is?
setup of constants constants here
I also set up a var.
This is where I do the dot get document, get the element by ID that just gets set to that.
And I know that the on load event will happen before someone can click the button because that's going to happen when it's loaded.
this variable will be initialized and can be used inside load assignment and
following functions.
Now, if we're talking about Lotus Light, it takes a file input
And it first checks to see if it's defined.
So file input dot files
is, you know, no files to examine
And then we
have to do this whole thing of
loading the file.
So this is using some callbacks.
And says, so this is called a new file reader
Because…
We don't do this synchronously. We have to do it asynchronously.
It's a new file and we say reader when it's on load, when it's finished loading it
Here's a function to call. This is the callback
And so what's the result that we got from it? And then we call check submission on what we got back.
So.
And then we have on error
If it tried loading it, it couldn't read the file.
then it updates this.
So this is all tags on load here. And this is what actually does the loading of the
data. So this is going to start the reading of the text file and
when it's finished, onload will get called.
If it fails, on error will get called.
And then we have this
Number of questions is expected question list split.
by comma dot length.
So this is expected questions.
There's a list by comma.
So that counts the number of questions.
We define this helper function update tag, which is based on
Just so you don't.
this document get element by ID, you get an ID, and then enter HTML
So we say inner HTML.
What that means is that refers to the things
inside of the tags. So for any tree, whatever is inside between those tags, so like if I'm
If I refer to
status here and then the span here what is
you know this is a span tag ID here. If I do inner HTML, it's referring to the stuff between the span text
If I set that to a value, I basically replace everything
between those. And that's how I set all these values. I'm just replacing those values inside of it.
Where is the semicolon right after the curly brace of both reader on error? Ah, okay, so…
This semicolon is…
there should be a semicolon here actually
JavaScript's very, because what's happening here is
I'm saying rear on load and I'm defying an anonymous function here
And that's a statement that should end with a semicolon because that's the end of the statement.
there should be a semicolon there.
Because this is think of this as this is defined anonymous function. It's a value
But it's being assigned to a variable here.
Well, you know, a value of an object.
And that's similarly what on error is doing.
Object here is recently called so
But that's actually a syntax error. JavaScript is so like
You totally don't need the semicolons but uh
Why can they be there? Why not just get rid of them all but
then the cone looks fine. So we defined a little helper function, update tag
And then we have line encoding.
And so this is a function to check the encoding of lines. You're wondering about the Unix
So here's what check submission, what it does at first
We'll walk through that side, but this is a helper function to check what the line encoding is of the file.
So you give it a bunch of lines of a file.
And then goes through and checks them.
And it says.
And then they go.
if the next to last character
of it is.
Sorry, it's the last character of it is a backslash R, then it's a DOS Windows text file.
So because the backslash n represents new line
That's what we're talking about, the carriage return line feed stuff.
So we have
line encoding goes here
we have the
How does this all fit together? We have now check submission.
It's got a whole bunch of variables. This is not my best code.
I didn't really…
designed this code to be taught. I cleaned up a little bit, but this part is
a little nasty, I will admit.
But I can walk you through some of this. So there's this
I have some regular expressions.
What do I first check here is
This is the file name pattern is
file prefix plus
It's a dash here. Now, what this regular expression goes
I should probably go for regular expression syntax a bit. I'll go through some basic. But based on what this represents is letters and numbers.
some number of them.
And ending in text.
And then we turn that into a regular expression.
And then we have
We test the regular expression against the file name, and if it matches
you know if it doesn't match, that's the exclamation negates it it says
We update the tag of status.
And we say error this.
And then here, if the template is not, if it's dash template
We go like you kept it as a dash template. It's an error.
then we update the file name tag with the file name. Okay, we pass the file name.
check stage. Now we check the encoding, it was line encodings lines.
Instances of line current does not equal Unix.
We say, you know, Unix text file, we do this.
Where do we get lines?
So lines, the lines was up here we split up
the file because when you read the file, it's just one big
string here we split it on backslash n so we get it into lines. And so then we just reject it
if it's in line encoded and sees backslash r's.
So carriage return characters as the last character of lines.
And so it just checks the file name. And now we start checking. So now we have a submission.
The first, if submission name does not equal lines of zero. So the first line
should be
what is it?
The first line should be this string.
Exactly. If it's not that, then it goes, I don't know what this is.
A good reason to do things like, doesn't that seem kind of picky? Why do I care about that? Well, that's to make sure you're reading the right kind of file.
Because what if it's just some garbage file? You don't want to do it. Like, is this supposed to look what we're expecting?
That's one reason you do this.
So make sure it starts with it and now
We do a try and catch to see whether we match
on these things so like because these if these regular expressions don't match
So this is matching now online some one. So the next line should be name
And then student id
And does that correspond to the template
notice it's that. So this is line zero, line one, line two.
Line one, line two, we're doing a match on these.
And also it's extracting the name and ID from those. That's what these regular expressions are doing.
It's worth playing with these and trying to, and looking up this, I'll give you a reference for all your expressions, but I'll
talk show some details. If these don't work, you have a catch goes like, oh, we got an error, better handle it.
And then we update the tag with status error and we just return for the function don't
Try parsing any further.
update the tag of the name and the student ID fields.
Now we have a question regular expression.
We start at line four.
We skip line three because line three is supposed to be blank
And now it just starts going through these lines and starts
processing them. And this mess of things is basically what's needed
Yeah, this code is messy and messy
I did a lot of versions of this to try to deal with the way different people
put questions between here but this
All this does is it gets a
gets the question into a string.
And well, I tried to get all the questions. So it tries all the lines.
Each of the lines that's
it basically adds it on to
the question so the algorithm
For the tutorial, I haven't asked you to do
that thing but that thing
Eventually, I'll want you to understand this.
Right now, don't worry about it. I'm more concerned about you using the thing this is
This is one of those pieces of code that you just sort of incrementally develop and I even read the code and I kind of go like, what the hell is it doing?
But it's not too bad. Like first check type of lines of string
if type, you know, basically make sure if it's a
So if it's a string.
So this is actually replace it.
Funnily enough.
is actually replacing carriage returns.
In there.
And then there's
m equals match you know here's the match for the question. If match worked
then we increment the number of questions we have. So C is the count of how many questions we've seen so this is the
question number. And then we push the question on to
the question list.
and then um
Yeah, so.
Okay, I won't try. I'm not going to explain more about this. It's doing a couple of funny things, but it's worth
maybe spend some time trying to figure it out. But hey, after this is run, you've gotten all the questions into this
into this set of questions this
Q object.
The question string is question list to string
of the JSON stringify Q.
this is what's outputting all the questions.
That's how you verify that.
Then you go through this.
So the question now says, and I'll make a question string
Which is…
I have that list that I built up through here, which is saying what questions did I actually
this part is the question list that i found
equal to the expected question list.
It is
You know, again, put that error there.
And then here, what this is code is just to update
And this builds up.
the questions.
So question div is document get element by the questions. So you've got like that whole thing of listing all the questions at the bottom
this loop does that.
So I'm creating a new, so this document create element
is creating a paragraph element
And then I put…
the new text and here's create text node is
the text of the question named was this
And I append this child.
They get a child of the paragraph. So paragraph
It has some text. And then on to the
question I append
I basically add that, take this node that I create independently
and add it on to question div.
So you have this existing node. I made a new tree.
add it back in.
And then this is pre-formatted text.
And then I'm going to create text
an appended as a child
of that and append child to the paragraph.
So it just loops to the questions and builds up these nodes. And you might want to try removing individual lines here and see what it does and see how they're
rendering of the questions change.
And then finally, after all the analysis is done, I say the analysis section is no longer in
So it's shown to the user.
And then it returns.
So going back to, we have a few minutes here.
So just think what we just showed here.
In client-side JavaScript.
You can load files.
you can process them.
And you can display the results
Not in text.
You can do it in text, do a console.log, but you can do it in effectively a GUI.
by changing
So if you manipulate the HTML of the document
you can make a GUI.
So, uh.
So why not set the analysis? Why hide the analysis on load? Wouldn't it be easier to just set the display none by default and they
Oh, yes, there's lots of ways you could do it to do that. I specifically did this
Just to show
I still did it this way just to show the onload
functionality to do something about it. Like if you just want to hide something when a page loads, there's definitely
easier ways to do it. But I wanted to have that
code there. And also that code initializes that
analysis node, which you really don't need to do but
Anyway.
trying to show some different techniques.
But when we're talking about client-side code.
what can it do?
So understand the client-side JavaScript itself is very powerful. You can do a huge amount with it.
But the data is living in a sandbox it's just
it's isolated there. And that's why you have web servers to serve the pages
and process the data for you, you know, process data for users
you know on the of the data that's in the HTML. It gives you
persistence.
It's not just
there so
one of the things I want you to do in the tutorial
is um
Okay.
If you look at the tutorial here.
this is what I'm asking to do.
Create a file that validates correctly.
Okay, I'm not providing you a template.
make one.
I would suggest if you're going to use something like Notepad to edit things on Windows.
download an old template and edit it because it will have the right line feed endings.
or use an editor that will
let you slave it as a Unix text file.
Then when validated, look at what's printed in the console, save a little copy of the validator, run it.
set up a class, you know, then make it serve from your own web server
And then make it validate assignment three.
Change a font, change the border. So play a little with the CSS
Chance of Alice want to accept MS-DOS files and process them properly
What's that? And then add a section
you know change the file and then change the form of the questions
And then walk through the code.
So the last one is kind of more implicit with all of them, but I put it explicitly in this one.
you're going to see this code again, but it's going to be in the context of
the next assignment. So it's worth spending time on this trying to understand it because
Again, you're going to have an assignment.
you know that deals with this.
So.
I'm trying to think there's anything else I wanted to show on
Kind of.
Done.
What's her.
One of the things I wanted to show you with this.
So I had to enter HTML I talked about
So.
So certainly, yeah, we could do other things for hiding. We've got those on change. We got this
What's tags
All this manipulation of the tree.
regular expressions.
I haven't talked about regular expressions.
Okay, so it's…
So let's play a little bit with regular expressions here.
So.
But I've got a string here.
And…
So this is what you can do with regular expressions.
That's kind of cool.
So you do
you define a new regular expression
Another way of defining it is
But it would say R equal to r
So notice it's the
Not sure why it formatted on one line versus multiple lines
I can't like that. But this is the basic idea of a regression. You give it a pattern.
You make the regular expression either by making an object here with new regular expression
Or you can define it statically by just putting it between slashes.
And then you get a regular expression and then you can use it for, there's a bunch of regular expression things like match and test.
are kind of the most simplest ones so s dot
So there are methods that are
string methods that take a regular expression and there's regular expression methods that take
strings
gets a little confusing. So you can see already tests
like that that's there. And then we can say
That's false.
In terms of regular expressions.
there's lots of so just having a string in there is
not that interesting because you can just do that on match but we're
you can get more interesting things is
The S.
I think that's i'm trying to.
Why does the indexing change?
So remember, I changed the regular, so people ask me the regular expression first one
This regular expression first was
brown.
And then I changed it to quick.
And so here I matched on quick
And there I matched on brown.
And so here, this is index four. So one, two, three, four, that was character here.
This match here was 10 because it was doing brown.
Is that right? 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
10. Yes. Brown starts at index position 10.
So if I'm oh so i'm
If you look up regular expressions JavaScript on the web.
there is…
Okay, character concept, character classes.
I'll show you the link for it. I'm sure I remember what.
Non-whitespace characters class escape so
That, that, that. And then…
Oh, thank you.
Well, no, no. Now, RE is, I changed my re though
No, actually, Ari and so
That's more one two surpasses this.
matching.
This is what I hate about
Does the rate of need to be a string? So this thing, so this is special JavaScript syntax for defining static ones.
You can just do it between slashes. And you can see this is what's coming out here. It understands what the regular expression is.
So what's this supposed to mean, Rod, is that this is
Oh, I know what we're going to do.
there is actually a really cool thing here.
Here we go. I'm going to go
Let's just do this right here.
Here's a regular expression visualizer.
So group two, one or more times, group two, one or more times.
that should just
So the plus means one or more, one or more times whites
Oh, it's white space
oh, I'm doing the wrong character class.
that's what it is. I'm being stupid. It's not backslash S.
So if you look here for
This is a good, so this is a good
Regular expressions here
I do not need to see ads, but
Creating a regular expression, writing regular expression patterns
Character classes.
So…
digit characters
Okay, word character. Ah.
Word.
S is space.
Word.
There, that matches.
Okay.
to use this and so you can spec select the regression engine do this
This is actually linked to from
I got this from Mozilla's
If you go here at the very bottom it has this
the reject visualizer is right here.
And so you go here and like you go here
Everyone I know everyone
But there are some people who can code regular expressions
in their sleep but
like you create this really crazy thing for declaring it and like the g is
you don't strictly need the g the flags
Yeah, we don't need global search
So here, this is matching those. And so notice
Notice it's getting two things.
I've got to finish up my lecture. I'm kind of here, but I'll only just do one last thing here and then I will stop.
go back to my window.
And…
So let's fix this. These were not spaces but
W's.
And so here, what's cool is that the input is this
index start a match is there, and then it's the slow brown fox.
then it's…
And this. And then we can even do
still matches, but it's just at the index here.
If I wanted to make the regular expression
match at the beginning of the line
Put a carrot here.
And now my match is false.
You got null there, but we can um
change our string to be
Back to this.
And you see it matches
this whole thing and then we can do the
I still use things like backslash.
Yep. And…
doesn't match.
But if I change my regular expression back to
this.
it will match, but it will just
do really slow brown fox it will skip
the first word.
This is the kind of fun you can have with write expressions.
can do lots of fun stuff.
But it's kind of a pain. And basically what you do is you spend your time playing with the regular expression until you get what you want and
then you forget how it works. And then one day someone has to debug it.
People are always trying to develop better ways of doing this. And I know there are some ones, but this is what JavaScript's got.
Okay, I will stop there and have fun with Tutorial 6.
And I will keep you posted about grading.
See you next week.