Hello welcome to another programming from Ato Z course video this video.
I'm going to look at a feature of what really a feature of
the world the web browser and look at in the context of P5js and Javascript.
How do you get text input from a user.
So first I just want to talk you through over here.
What the basic what the three or four methodology I'm going to use.
So number one is if you want to get text input from the user you can use
something called an input element.
So input element is a little box that appears in a browser window where you can
say you know in a web form you might say like name and
then you know you write your name in here.
You could also use something called a text area.
And a text area is the same idea.
It's just bigger and it's usually resizable the user can kind of drag this
corner around for a longer bit of text entry.
So if you want the user to type in a paragraph of text and use that in your
program. You can use a text area and then you could also get, you could ask the user
to submit or you or you could simply load the... spoiler so
many other ways that they're not going to get to because you could use API
Scroll the web and scrape it we'll get to that stuff later in a future video.
But what I'm thinking about right now is: you could also get input from a text file
itself.
And you could use for that you could use the load strings method in
p5js or you could simply just reference an actual text file
that you have us in your sort directory of files.You could also use
a file input and if you've ever seen a web browser you have a little button
that says like choose File and you can actually create that with the p5js
function I think called createFIleInput. And I'll show you how to use that as well.
And finally you could create a Div a sort of area.
a box of stuff on your screen
that you could - in the browser itself- that you could drag a text file over and
I actually have a separate video tutorial that just goes over that which I might
just reference rather than included in this video tutorial.
So I'm going to go through all of these and
you can also look at the dragable area video and
you'll see these as possible ways of getting text input because
What I'm going to do is say " hey user submit some text and
I'm to generate a poem of from that text for you."
So that's kind of the ultimate goal that I may do a couple videos from now.
OK So let me come over here come over here and let's see.
So first of all.
So I'm going to start to implement some of this stuff and
go over how these functions work.
OK So this is my code so far.
Yes no absolute scream video.
I forgot.
Everybody take a deep breath.
I need some like calming sound.
That's not coming but I've got that sound effects.
OK So this is my code so far one of the things you'll notice in all of
the examples that I've popped not all but many of the examples that I'm publishing
is that even though I'm using the P five J.S. style methodology structure
of there's a set up function which is kind of like the pages loaded function.
There's a draw function which runs this continuous loop.
I actually and use it,
calling a function called noCanvas meaning there
is no drawing canvas associated with this program that I am writing.
I am simply writing a program to
mess with the web page other elements of the canvas paragraph headers that sort of thing.
So if I were to look at the output of this page.
Which is over here you can see all there is is a header that says welcome to
A2Z week 1
Now where is that coming from? one thing I notice,
nowhere in my code do I say 'hey display that on the page'.
That's because I actually have that simply hard coded into the HTML
file associated with this itself.
So this is something that I'm going to touch on in this example.
Future examples as I wish I put something in the HTML file which I put something
in the jacvascript file and there's no real answer to that.
It's sort of case by case basis and personal style that sort of thing.
OK but what I want to do first is just simply show you how can I create
a text input on the page.
And I'm going to do that by saying create the input.
And I'm going to run this code.
Look at that and
there it is there is a place where I can type some text on the page wonderful.
Once the user has typed in some text I want to I want to access
that text in my program so let's look at how I might do that.
So first of all this create this input text box that I created on the screen.
I would need to store a reference to it in a variable.
So I'm going to create a variable like input.
I'm going to say input equals createInput and
by the way I'm actually going to take out the draw() loop.
I don't want there's no reason for P5
to be continuously looping right now because I'm not using that aspect of P5
which I might later but there's no cameras there's no animation and so
what I now want to do is, I want to have access
to that stuff that's in the the text box and when do I want to have access to it.
I could have access to it in a draw loop by saying input.Value().
I'm going to skip that for right now what I'm going to show you though is just... I'm
going to open up the developer tools here to make this a little bit bigger.
So let's say I put my, say I type rainbow into there and
then I'd set type input.Value().
You can see this by referencing the variable dot value I have the text
that's in there. So anywhere in my code I can simply reference that text box
.value() and I know what the user has typed.
So now.
I might want to know what they type only when they hit enter.
So the way that I can do that and I've done something rather horrific.
So well actually no I haven't.
On a horrific yet.
I'll show you later I'll fix this later.
So all DOM elements the text input box
being a DOM Element have events associated with them and when I click on it.
It's an event when I hover my mouse over it.
It's an event. Tere is an event called changed and
there's a P5js DOM library function called changed
which allows me to execute a function when that event has been triggered.
So I can say input that changed new text which means I can
just write a function called newText().
And I can say console.log(input.value).
So what I'm saying is whenever the input box has changed
meaning the user has hit enter.
I want to see the results of that in the in the console.
So now if I go back and refresh this page and I type in Rainbow and hit enter.
We can see here into I have Rainbow here if I type in unicorn and
enter we can see I have unicorn in there.
So now I am accessing the content.
Whenever the user types enter and I might do something like say.
CreateP(input.value) createP() makes a paragraph element on the page.
So now I can say unicorn.
And I can say rainbow and I can say.
Swirly happiness and
I'm getting all of those things as paragraph elements on the page.
Now here's a question for you.
What if I want to know every time the user types a key not just when they hit enter.
But any time anything changes in that text box itself.
This event is not the Changed event and this is the work I've done something which
I really don't like which is that big name for
that event is actually input has a little bit of so technically what I need to say.
Is something like this but I sort of hate how I've named the variable input and
then there's also input.
So I want to rename that variable/
So I'm going to just call that you know.. textfield or
something and that way we can have
less confusing there less confusing I can I can make us a little more clear.
So what I'm going to do now is say function newTyping().
And I'm going to say I'm also going to do create space so let's comment out that.
Let's just forthe moment comment out the changed event.
And only have the input event.
So now watch what happens U N I C O R N.
Anytime I type anything.
I'm getting an event and I'm kind of continuously making new paragraph elements
for every keystroke that I type.
So maybe what I want to do instead.
Just as an exercise here to do something different is still what if I had a single
paragraph element that I altered the content of every time I take to keep.
So here's where this like in Shakespeare.
Hamlet.
There's an essential question.
To be or not to be and I have a different question for you today.
And my question for you.
I'm ... maybe I should or should be erasing all of this is a base reference for
later but it's too late. ... To select
or not to select or maybe it's just to create
or not to create; to select or to create what I'm saying to you is.
When do I want something on my web page to appear based on code I write.
I'm creating a new DOM Element and now it's being appended to the page or
verses, when do I want to have something that exists on the page that I access in
my code-- exists in the the raw HTML that I access in my code and manipulated.
And here's a case where I'm going to demonstrate to you
that what I want to do is I am going to put in the HTML.
file itself.
I am going to add a paragraph element and I'm going to give it an ID and
I'm going to call it "output".
Right. I'm going to call it output.
And you can see that it is empty and
what I want to do instead of saying createP() in my code
instead of creating the paragraph element, I want to select this paragraph element.
I want to access it so that as the user types,
I want to update what's in it with the word with the keys that they're typing.
So let's do that right now.
So how I do that in the code is...
So I'm going to do leave that in there.
So what I'm going to do is I'm going to say... I'm going to make a variable called
"output".
And I'm going to say output = select.
And then I need to I'm going to use its ID and
the indicator for an ID is the pound or hash symbol.
Select(
Output) I think that's the ID gave it
And then here now what I want to do is in newTyping(),
I'm going to say output HTML The HTML function in
the P5 Dom library is a function you can call to access the existing content of
a DOM element or place content in it And what I want to do is I want to take what's
currently in the text field and I want to put that in that paragraph element.
So let's look and see if this works now.
And so as I'm typing cannot read property HTML
of NULL so I've made some sort of mistake here.
Here I am back! and if you were wondering what was wrong,
I forgot to hit command S
in my index.html file meaning it wasn't saved.
So now that I've saved it,
the code works as expected or as I want it to.
Which is I can say "hello".
Every time any character that I typed here you can see
that that paragraph element is being updated.
And now when I hit enter.
You can see that I am also saving that.
I have two events that I'm tracking each key being pressed and pressed.
Now a couple of things I want to mention 1 is if you want to have this pre-filled
with some text.
Then one thing you can do is you can in this createInput()
function you can say this you know like 'enter your
favorite food' or something or just say like your favorite food.
Right. And I could then say you know
blueberries.
I love blueberries!
They make me so
happy I wish I had a ball of blueberries right now and
I just do this sort of weird Internet thing right.
"Blueberry on the Internet."
OK so you can seeyou're going to have something pre-fill text in there.
I could also make this a text area instead.
So what I want to do actually right now.
Is what I'm going to do number one
is going to show you two things at once.
Whereas first of all instead of saying createInput() I could have actually just
put an input element in the HTML file and you select to access it.
You can try doing that as an exercise for yourself and
what I'm going to do in this video is change this.
I'm going to actually add a text area and
I'm going to give it an ID I'm call it textfield.
It's a text area.
And you can see now if I refresh this you can see there is now a text area that I
can expand over here so if I wanted to type a paragraph in here and
I could also actually preseed it with some text.
Please type a story.
And you can see now it says "please type a story" there.
And what I'm going to do is in the code.
I'm going to
comment this out instead of creating the input I'm going to
say textfield = select() and
the ID text field so I could probably think of better.
Blueberry I'm going to call it blueberry.
And I'm going to go back to the HTML and
I'm going to say give it an ID blueberry and I will say:
"Tell me about how much you love blueberries"
So that in there you can see that in there and
now you can see this same program works.
The only thing is that event enter is no longer relevant.
So in this case I should probably create. Let's do this.
I'm going to go to the I'm going to actually just create a button element and
I'm going to say submit and I'm going to give that an idea which is submit.
And then I'm going to go to my code and I'm to save bar submit and
I'm going to say submit = select submit and by the way
I'm doing a terrible job of single quotes double quotes everywhere all of you
could argue on the Internet single or double gquote.I am going to use them both.
I don't care...I'm going to say submit.Mousepressed()
which is an event new and I'm going to say new text.
So when you click the submit button
I'm going to call the new text event which will create that new paragraph.
So mouse press does an event for when you click on a button.
So I should be able to do this and you can see that dadadadadadaaaa
and I can hit submit. I get this is how much I love blueberries.
OK so it's did it twice.
Why did it do it twice because I have.
Interesting.
Maybe when I hit tab or something.
I have this text field change so that event is still in there.
Maybe it somehow figured out I don't know what I don't know what happened yet.
Someone needs to write a command saved song.
OK anyway.
I finished with this video.
OK So this is the end by the way here's a little exercise technical exercise for you
to do and I'm going to show you how to do this as I make some video tutorials about
how to manipulate strings but basically the next thing you should think about
how could you instead of just reproducing the exact text.
That is.
That is in the text area our text input box right there on the page.
How could you manipulate that text. So how could you show the user
back what they've typed but reverse the order of the characters or
reverse the order of the words or replace certain words with their pseudonym.
I mean that's you know connecting to an API or something.
So you can come up with some clever idea this is a kind of a technical
exercise that you could try.
OK Thanks for watching this video about how to get text input from the user using
input field or a text area in the next video and
actually show you how to load from a file using load strings or the create file.
OK thanks very much.
And I'll see you in the next video.