Lesson video
In progress...Loading...
Hi everyone, my name is Mrs. Welsh.
Today we'll be learning about JavaScript.
Don't worry if this is new to you, I'll be guiding you through at each step.
So let's get started.
Welcome to today's lesson from the unit HTML Programming Project.
This lesson is called JavaScript.
By the end of today's lesson, you'll be able to use JavaScript to add interactivity to a webpage.
Let's take a look at some of those keywords we'll be using during today's lesson.
JavaScript, a programming language used to add interactivity to webpages.
DOM, or Document Object Model, a representation of a webpage that JavaScript can use to access and change HTML elements.
Event listener, a function that waits for a user action, such as a click, and then triggers a response.
So during today's lesson will be looking at how JavaScript makes webpages interactive, using JavaScript to modify webpage content, and creating an interactive webpage.
So let's begin by looking at how JavaScript makes webpages interactive.
Let's take a look at how a webpage is built.
We use HTML, which controls the structure of a webpage, CSS, which controls the style of a webpage, and we have JavaScript, which controls the behaviour of a webpage.
If we take a look at this in a diagram, we have our completed webpage right at the top and behind that we have got our HTML, which provides the structure, we have CSS, which as said before, provides the styling, and the JavaScript, which provides the functionality.
JavaScript is a programming language.
It allows us to make websites interactive.
It works in the web browser and can respond when a user clicks buttons, types in a box or scrolls through a page.
Let's have a look at a question.
True or false, JavaScript lets a user interact with a website? What do you think it is, true or false? If you need to pause the video so you can read through the question, decide upon your answer, do so now.
What do we think? Is it true or false? The answer is true.
JavaScript is a programming language that allows a website developer to add interactivity to a website.
Moving on.
JavaScript can allow us to show messages, change text or images on a webpage, react when someone clicks a button, or make animations and games.
So what we need to do is think about when you click on a button on a webpage, a message may pop up, or think about when you've hovered your mouse over an icon and maybe a menu appears or the text may change or the colour of something may change.
These are all examples of JavaScript working.
When we think about adding JavaScript into a webpage, there are two ways in which we can do this.
We can use internal script within the HTML code for a webpage, or we can use an external file that you link to the webpage.
When adding JavaScript inside the HTML code for webpage or using the internal script method, we use the <script> tag within the <body> tag to include the interactive elements.
We would use the internal script method when the script is short or it is going to be something simple.
So for example, at the bottom of the page, we have got a small webpage example, which is Welcome to Gaming Club.
Click the button to get started! And when we click the button, it has JavaScript sitting behind it, which will send us onto another part of the website or maybe where we can go and fill something in or maybe a message will pop up.
When we are using internal JavaScript within the HTML code itself, it needs to sit within the <body> tag.
We need to create the element we are going to attach the JavaScript to.
And in this case, it is the button tag.
We have then got the script tag, which is where our JavaScript will sit.
And within that we have got a function, and in this example it is showMessage.
So that means that when we click the button, we will get an alert message showing on the screen.
Looking at how we use JavaScript with an external file, this means that the JavaScript will be written in a separate file and it is linked to the HTML file.
Using an external file is better for bigger projects because it means that the script is easier to read and manage.
It means we can also reuse the scripts on different web pages.
It also helps to keep our HTML code tidy.
Let's have a look at an example using an external file for JavaScript.
We need to make sure that we have got the external file linked to our HTML file and this is done within the body of the HTML code.
As we can see there, we've got the script tag, we've got script and source, and then we've got the name of our external file for our JavaScript.
And in this example it's called scripts.
js, js meaning JavaScript.
We have then got at the bottom an example of what we would put into our script or our external JavaScript file.
And again, it is the same thing, we've got our function, we've got the name of our function, which is showMessage, and then we again, we have got the alert with the text that's going to display on the page.
Let's have a look at a question.
Which of the following statements about JavaScript is correct? A, internal JavaScript is written in a separate.
js file and linked using the <script> tag.
External JavaScript is written inside the HTML page using <script> tags.
Internal JavaScript is written inside the HTML file, usually within the <script> tags.
If you need to pause the video to read back through the question and decide on the answer, do so now.
Okay, what do we think the answer is? Is it A, B or C? The answer is C.
Internal JavaScript is written inside the HTML file, usually within the <script> tags.
Did you get that? Excellent job, and let's move on.
Task A, what I want you to do is use the word bank that you've been given to complete the following sentences.
One, something is a programming language that helps makes websites more (pauses).
Two, JavaScript runs inside the (pauses).
Three, JavaScript can (pauses) do something when the user does something on the page, like (pauses) a mouse or type in a box.
And four, you can use JavaScript to (pauses) the text on a web page, show a pop-up (pauses) or check user (pauses).
You have got eight words within the word bank.
You'll use each word once to fill in all the gaps on those sentences.
If you need to pause the video so you can complete the task, do so now.
Let's take a look at the answers.
So for one, JavaScript is a programming language that helps makes websites more interactive.
So from the word bank for sentence one, you'll use the word JavaScript and interactive.
Two, JavaScript runs inside the web browser, and web browser being the word you have inserted from the word bank.
Question three, JavaScript can respond when the user does something on the page, like a click a mouse or type in a box.
Four, you can use JavaScript to change the text on a webpage, show a popup alert or check user input.
Did we get all the words in the right place? So if you've got them all right, well done, good job.
Moving on, let's have a look at how JavaScript can be used to modify webpage content.
To do this, we're gonna have a look at what the Document Object Model is and how it is used to represent a webpage in the computer's memory.
The DOM is a live structured representation of the HTML and the content of a webpage.
When a web browser loads a webpage, it reads the HTML code and creates the DOM in the memory.
And the DOM represents a HTML page as a tree structure.
So let's take a look at some of the key features that make up this tree structure.
It contains the root node, which is the starting point of the tree, the parent node, which is an element that holds other elements inside it.
So for example, the <body> tag is a parent node because it holds other tags inside it, and the child node, which is any element inside another element.
So for example, the <h1> tag, that will be a child node because it will sit inside the <body> tag.
So in this example for the gaming club website, we've got the root node of the tree diagram is the fact that it's the document.
We've got a parent node containing the head and the body elements.
And then again, we have got both parent and child nodes because they are both a parent because they have other tags sitting inside them, but they also sit inside a tag in itself, which is the HTML tag.
And it says there the child node is one that doesn't have an tag sitting within it.
So in this example paragraph and h1 are both child nodes.
So you might be wondering why I'm talking about DOM.
Well, JavaScript uses the DOM to access, modify and respond to elements on the page.
JavaScript can use it to access the HTML elements, change the content or the styles, or add or remove elements from the webpage.
Let's take a look at a question about what we've just discussed.
What is the DOM in web development? Is it A, a programming language used to style webpages, B, a tool that stores images for a website, C, a structure that represents the content of a webpage in memory, or D, a part of the internet that connects webpages together? So if you need to pause the video to read back through the question, decide on your answer, do so now.
Okay, let's have a look.
What did we get? What was it, A, B or C? If you got C, you're correct.
The DOM is a structure that represents the contents of a webpage in memory.
And remember it uses a tree structure.
So moving on, an HTML element is part of a webpage, like a heading, a paragraph, a button or an image.
What we can do is change an element using JavaScript.
To change something with JavaScript, we need to make sure it's selected using an ID, and an ID is a label given to a HTML element.
It is the ID that specifies which element the script is going to modify.
If we take a look at an example where we started to use ID, we have got our body HTML that has got some headings and some paragraphs, but we can see about halfway down the page, one of our paragraphs now has an ID called clubMessage.
So we now know that this paragraph will be identified as clubMessage.
We'll be using these IDs later on when we create some interactive elements for our webpages.
We will be using an external JavaScript file to store our scripts because it allows us to modify or update JavaScript quite easily and it allows us to add interactivity through linking the file.
Before we do that though, we're gonna have a look at some of the common functionalities we might want to add to our webpage.
We might want to change text or content on a webpage.
Below is an example of how we will update the text and we use document.
getElementByID.
Our ID is then in brackets and it's the clubMessage.
So if you remember, we have got a paragraph that has the ID clubMessage.
And this first part of the JavaScript is looking for that ID.
So it is looking for clubMessage.
The JavaScript will then use innerText, which means it's going to update the text within that clubMessage paragraph, and it's gonna update it to Checking for updates.
If we wanted to change the colour or the style of something on a webpage, we use the same method, which is we are going to look for an element by its ID, and in this example it's called header, and we are going to change the style colour, and in this case we are going to be changing it to blue.
Other things that we can do is create an alert or a message for a webpage.
And again, it has the command word alert and in the brackets we would have our updated message.
And another one we can look at is allowing the user to enter a value.
So this might be if they need to type in a username, maybe a password or maybe the answer to a quiz.
And we have got our let, which is our command word there, our variable, which is called name.
And again, we are looking for an ID, and this is called username.
And.
value means we're allowing the user to type something in.
Let's have a look at creating some script.
On the slide, we've got an example of how to update text using JavaScript.
So we've got let messageParagraph = what ID we're looking for, and in this case again it is clubMessage.
We have then got what we want to do to it, which is update the text, and that's that innerText.
And we've got the text we want to update it to, which is Next meeting: Wednesday at 3:15 in Room 10.
So this is the new text that's going to replace the show meeting info that is currently sitting on the webpage itself.
Let's have a look at how we bring that into the HTML code.
So we've got within the <body> tag, we have linked our JavaScript file to the HTML page, and we can see there we've got script src, the name of the JavaScript file, and then further down we've got the paragraph with the ID clubMessage.
And this is the paragraph that will automatically update when the webpage loads.
If we take a look at what this webpage would display as, we've got welcome to the school gaming club, we've got the first paragraph about the club, we've then got the club meeting details and it's got loading meeting info, and that is the text that is going to update when the webpage is finished loading.
And what should happen is that it will update automatically with when the next meeting date is going to be.
With this example though, you might not actually see the original text because as the webpage loads, the JavaScript loads straight away so you might always just see the next club meeting so you might not think your JavaScript is actually doing anything.
So what we can use is something called a delay, and we would use a delay with JavaScript to time when we want content on a webpage to be updated.
So if we have a look at the original script that we set up, which is let messageParagraph = document.
getElementById("clubMessage"); messageParagraph.
innerText = "Checking for Updates.
.".
So that's our original text that's going to be displayed.
We are then going to create a delay, and that's called setTimeout.
So that's our delay key command.
And in there we are then going to create a function that's going to cause that delay.
So we've got our messageParagraph.
innerText Next meeting: Wednesday at 3:15 in Room 10.
So that's taken from our original bit of script, which is the update to the message.
But what we're then including after that within this function is the time we want it to be delayed by, and it's got 2000 there, so that's 2,000 milliseconds which equals about two seconds.
So what we've got down there is a delay that once the webpage is loaded, it will display checking for updates.
After two seconds, the checking for updates message will change into Next meeting: Wednesday at 3:15 in Room 10.
And if we take a look at how that would work, we've got our original webpage checking for updates, two seconds will pass, and then the club meeting details will update with when the next meeting is.
We would use a delay so when users are viewing the website they can see important pieces of information updating, so it will draw their eye into that piece of information on the webpage.
Let's take a look at a question.
What is the purpose of an ID? Is it A, to apply styles from a CSS class, B, to uniquely identify a HTML element for use in CSS or JavaScript, C, to group several elements together on a webpage, D, to automatically create interactive features on a webpage? If you need to pause the video to go back through the question and decide on your answer, do so now.
Okay, what did we think A, B or C? The answer is B because if you remember, we do sometimes use identifiers within CSS and then we can also use them within JavaScript.
So if you selected B, excellent job, well done and let's move on.
For task B, you are going to be creating or modifying some JavaScript.
So the scenario is you are helping to design the webpage for your school's gaming club.
The page needs to be kept up to date with meeting times and club news.
Your job is to modify the JavaScript that updates the content of the webpage.
So the first thing you need to do is open the starter code using the link oak.
link/using-javascript and click on the script.
js file.
You need to change the heading text to Gaming Club - Let the Games Begin! You need to update the meeting information to Next meeting: Friday at 4:00 pm in Room 12, and modify the timeout so it has a two second delay and displays tournament this Friday! Bring your best game.
Okay, if you need to pause the video so you can read back through the task, do so now.
Let's take a look.
Did you manage to do all the changes to the JavaScript? So right at the top we have got the main heading text of the webpage being updated to Gaming Club - Let the Games Begin! Moving on from that, we have got the meeting information has been updated, and finally the news information has been updated as well and the delay has been set to two seconds.
So if you've got all of those right, brilliant job.
If you have played with it further and you have updated the content with something slightly different or you have played with the delays and you've made it longer or shorter, as long as when you run your script and your HTML code, you can see the changes happening and they are changes that you have made and you know about, excellent job and let's move on.
So for the third part of this lesson, we are going to look at creating an interactive webpage.
On an interactive webpage, the JavaScript needs to run after something has happened.
This is called an event.
An event could be something like a user clicking a button, a key being pressed, the web page has finished loading.
JavaScript can listen for these events and then run the code to respond.
JavaScript needs to use what's called an event listener to detect events.
The event listener will wait for an event and respond by running the relevant script.
Let's have a look at an example of an event listener.
This one is waiting for the button to be clicked.
So the element is called joinButton.
We have then used the built-in Java function to select which event to listen for and then which script to run, so that's the addEventListener.
So we now know the JavaScript is looking for an event to happen.
The event in this case is click and then the script it's going to run is called showMessage.
Let's have a look at this question.
Which of these is an example of a user event? A, a mouse moving over a heading, B, a page loading with CSS styling, or C ,JavaScript code being saved? If you need to pause the video so you can read back through the question and decide on your answer, do so now.
Which one do we think it is, A, B or C? The answer is A because that is something the user will do.
Okay, so that's an event the user will do.
Okay, so common events that we can use are a click, so this is when a user will click something on the screen, we can use a mouseover, so that's when the mouse moves over an element we might use mouseout, that's after the user has moved the mouse away from an element.
We may use a keydown so when the user presses a particular key on the keyboard, or we might use submit which is when a form is submitted.
So those are the common ones we might want to include on our webpage.
If we have a look at an example of an event click, the HTML on the webpage is we will have our button set up and it will have an ID.
And in this example our button is called joinButton.
So that is then unique and we can use that within our JavaScript event.
We have then got a paragraph with an ID of joinMessage.
And again that is the unique ID for that paragraph.
Within our JavaScript we have then got our code to find the joinButton element, we've got our addEventListener.
It is a click, which is the event we're looking for.
And then we have got our function, and our function is finding the joinMessage element and updating the text.
If we have a look at a mouseover and mouseout event, what we've got for our HTML code, we have got a section or a division within our webpage called clubInfo, and that can be used with mouseout and mouseover events.
So our script may be we are again finding the element clubInfo.
We have got an addEventListener, and this time we are using the mouseover.
And then we've got a function, and we've got a function which is going to change the background colour, and it's changing the background colour to light blue so when we move our mouse onto the clubInfo element, it's gonna change the background to light blue.
When we want to move the mouseout, we want it to go back to its default colour, and that's the second piece of JavaScript we have got on this example.
Again, we are looking for the clubInfo element.
Again, we have got addEventListener, but this time we are using the mouseout event, and the function this time, again we are using the backgroundColor styling but we are setting it to that blank value, which means it will change back to its default colour.
Another thing that we can actually do is update using what's called a constant variable, and you can make the JavaScript tidier by using a constant variable to represent the document.
getElementById, and we've already seen that earlier on in this lesson.
So our constant in this example is called meeting section, and that is gonna be used instead of having to repeatedly type in document.
getElementById("meetingSelection"); because we can see how untidy that is gonna make our JavaScript over time if we keep having to type all of that in.
So our example is we've got meetingSection, addEventListener, our mouseover, and then our function to change the backgroundColor to light blue.
We have then got meetingSection.
addEventListener mouseout and the function to change the backgroundColor back to its default.
So we can see how that is much tidier than our original code on the previous slide where we were having to still use the full document.
getElementById("meetingSelection"); so we can see how much tidier it is using a constant variable.
The benefits to using events to handle JavaScript means that it keeps HTML and JavaScript separate, the code is more organised and tidier, one event can also have multiple event listeners.
As we've just shown, we have mousein or mouseover and mouseout on that same ID.
It makes the webpage code easier to test and debug.
It also makes managing larger websites easier.
So lots of benefits to using events to handle JavaScript.
Let's have a look to see if we can match each of these actions to the correct attribute.
So what you need to do is draw lines between the action and its correct attribute.
So we've got as an event in JavaScript, put JavaScript inside HTML, detects when a user clicks.
So which one do you think matches which action? So if you need to pause the video now to read back through and make your decisions, do so now.
Okay, let's have a look at the answer.
What did we get? So the top one adds an event in JavaScript, addEventListener is the answer you were looking for.
Puts JavaScript inside HTML, the onclick and then function is what we would use if we were putting our JavaScript inside our HTML code.
And detects when a user clicks is that click.
So how did we do? Did we have to do it by identifying which ones we knew first and then the third one might have been the leftover one? I have a sneaking suspicion the second one puts JavaScript in inside HTML may have been the one that you answered last.
But if you've got them all, good job.
It is quite tricky learning about JavaScript because there are lots of things that are very similar to stuff we have done already.
Looking at task C, your gaming club has created a webpage to share updates and information with students.
The club wants to make the page more interactive to engage visitors.
You've been asked to update the webpage to include interactive features using JavaScript.
One, open up the starter code, two, make sure you're in the index_script.
js file.
This means all the modifications are going to run on the index webpage.
You're going to create a mouseover event for the next meeting to change the background colour to light blue, create a mouse out event to change the background colour back to the default colour.
Update the innerText on the gamesInfo to update the game of the week, and then modify the background colour of gamesInfo to a colour of your choosing.
And then the third part of this task is to complete the following in the games_script.
js file.
So do make sure in this task you are working in the right file, and again you're going to create a mouseover event for "Minecraft" using the following description, a creative sandbox game where you can build, mine and explore.
B, create a mouseover event for the "Super Smash Brothers," again updating the text that displays.
And C, create a mouseover event for "FIFA," again using the following description provided.
When you've done all that, do make sure that you test your web pages, make sure the mouseovers and the mouseouts do actually work as intended and they are the displaying the right content.
If you need to pause the video so you can read back through the whole task again, do so now.
Let's take a look at some possible solutions.
So on the first one, we are looking at the index_script.
js file.
We have got our mouseover event.
And on our mouseover event, we have got our backgroundColor set to a light blue.
So as long as it's set to a light blue kind of colour, it doesn't matter which light blue you have picked.
And then on the second part, we have got our mouseout event, which is reverting the backgroundColor back to the default, and it's got those empty quote marks.
Moving on, we have then got the updating of the text.
So again, we have created the innerText function and we have got our new text, which is Game of the Week : "Minecraft." And on the second part of this, we're updating the backgroundColor to a colour of your choosing from the light green that it was originally.
Moving on and looking at the games_script.
We have got a mouseover event for each of the games.
And in the gameDescription, we have got the textContent and you should have for each of the games the description that was provided.
So the example here is the "Minecraft" one.
So we are looking for the element by the ID called "Minecraft." We've got our event listener, which is our mouseover.
Then we have got our gameDescription and the textContent is the text provided, which is "Minecraft" and it's a creative sandbox game where you can build, mine, and explore.
And you should have one of those for each of the games.
So how did we do? Did we manage to get all of those modifications or updates done? If you got all of them done, brilliant job 'cause there was quite a lot there and some of it is quite tricky when you're using the IDs and you're trying to update colours and text and so on, so really good job.
If you managed to get more in and you went and experimented with some of the others, again really, really well done if you've got it all to work and display as intended.
So really good job.
To wrap this lesson up, JavaScript adds interactivity to the web pages.
The DOm is the webpage structure that JavaScript can change.
Events like clicks and hovers can start JavaScript actions, and event listeners help make web pages respond to users.
If you've managed to complete all the tasks today and you've understood how JavaScript can add interactivity to your webpage and the benefits of using JavaScript to add that interactivity, really well done in today's lesson.
It is something that was brand new, and we have done quite a lot today.
I hope you'll join me for the following lessons, where we will be looking at putting all of what we have learned together, so I'll hopefully see you next time.
