Embedded Files
Introduction to JavaScript
Introduction to JavaScript
JavaScript is the programming language we learn in 11DTEC.
JavaScript is the programming language we learn in 11DTEC.
You might not realise it, but dragging and dropping those coloured blocks around in both Scratch and Game Lab created JavaScript code behind the scenes. So you have already created JavaScript programs.
You might not realise it, but dragging and dropping those coloured blocks around in both Scratch and Game Lab created JavaScript code behind the scenes. So you have already created JavaScript programs.
However, we start from the beginning, so it is OK if you have never programmed before.
However, we start from the beginning, so it is OK if you have never programmed before.
Learning is done by completing a series of simple mini skill tasks. There is a heap of extra helpful information on internet, including the w3schools site
Learning is done by completing a series of simple mini skill tasks. There is a heap of extra helpful information on internet, including the w3schools site
For the JavaScript skills class work you will use GitHub Codespaces
You will work through the exercises in this repository
Use the link your teacher will give you to the GitHub Classroom assignment
Task 01 - Intro to JS and setting up your .js file
Task 01 - Intro to JS and setting up your .js file
Learning goal - We are learning how to:
Use code comments and a template to organise your code.
By the end of this topic you will have:
Gone through the google slide.
Modified introduction_01.js using the template in the slideshow. It is expected that you use that template to structure your code for all activities.
Task 02 - Variables
Task 02 - Variables
Learning goal - We are learning to how to:
Set up, name and use variables to store information. This will allow us to store the information we have gained from the user.
By the end of this topic you will have:
Gone through the slides and watched all the videos.
Copied the code from task 1
Update the header comments and console.log()
Defined three variables to hold:
The users' name.
The users' age.
How much pocket money the user has.
The current year.
Used console.log() to display the message below:
Hi _______
As of ____ you are __ years old
You have __ dollars
Task 03 - Math Equations
Task 03 - Math Equations
Learning goal - We are learning how to:
Do basic math using JavaScript.
By the end of this topic you will have:
Gone through the slides.
Copied the code from the last task
Update the header comments and console.log()
Displayed this message, using JavaScript maths to work out the correct values (marked in red)
Hi _______
As of ____ you are __ years old
You were born in ____
In 10 years you will be __ years old
You have __ dollars
You spend half of your money, now you have __
Then you get $3, now you have __
Task 04 - Debugging
Task 04 - Debugging
Learning goal - We are learning how to:
Use console.log() to help us find bugs in our code.
Identify different types of bug.
Strategies for bug hunting.
By the end of this topic you will have:
Gone through the google slides.
Got the program working properly.
Task 05 - JavaScript and HTML
Task 05 - JavaScript and HTML
Learning goal - We are learning how to:
use JavaScript to change the HTML page
By the end of this topic you will have:
Gone through the slides.
Copied your code from the last task.
Update the header comments and console.log()
Keep the "Running task 05..." console.log
Replace the other console.logs with updates to the HTML page
You might want to use <p> paragraphs </p> to format the messages
Task 06 - Functions
Task 06 - Functions
Learning goal - We are learning how to:
Define and call functions.
By the end of this topic you will have:
Gone through the slides.
Copied your code from the last task.
Update the header comments and console.log()
Converted the program to use functions:
Written one function with parameters for all HTML updates (welcome is a good name)
Written functions with return values for the calculations
Called the functions to welcome two different people
Task 07 - Variable Scope
Task 07 - Variable Scope
Learning goal - We are learning how to:
Use variable scope to understand how a program runs.
By the end of this topic you will have:
Gone through the slides.
Predicted the output of the code.
Checked your prediction.
Task 08 - Activate VIA button
Task 08 - Activate VIA button
Learning goal - We are learning how to:
Get a html button to work.
By the end of this topic you will have:
Gone through the slides.
Copied your code from the task 6, functions.
Update the header comments and console.log()
Created a start() function.
Moved the functional code inside the start() function.
Edited the HTML - Add a button that activates the start() function.
What happens if you press it more than once?
Task 9- Get input from HTML with a form
Task 9- Get input from HTML with a form
Learning goal - We are learning how to:
use HTML forms to get input instead of prompts
By the end of this topic you will have:
Gone through the slides and watched all the videos.
Copied your code from the last task.
Update the header comments and console.log()
Create an input box to collect the user's name
When the form is submitted the html page shows the message with the name from the form.
Task 10 - Data Types
Task 10 - Data Types
Learning goal - We are learning how to:
use the different types of JavaScript variables
By the end of this topic you will have:
Gone through the slides and watched all the videos.
Copied your code from the last task.
Update the header comments and console.log()
Create an input box to collect the user's age and pocket money
When the form is submitted the html page is updated with the new age and pocket money.
Task 11- Conditional statements
Task 11- Conditional statements
Learning goal - We are learning how to:
Use conditional statements to make decisions.
By the end of this topic you will have:
Gone through the slides and watch the video.
Copied the code from the last task.
Update the header comments and console.log()
Altered your program to use the user's pocket money to check whether they have enough money to buy a 4 dollar chocolate bar.
Add one message that states either:
"A chocolate bar costs $4
Sorry you CAN'T afford a chocolate bar"
"A chocolate bar costs $4
You CAN afford a chocolate bar"
Task 12 - Arrays part 1
Task 12 - Arrays part 1
Learning goal - We are learning how to:
Use arrays to store several pieces of information.
By the end of this topic you will have:
Gone through the slides and watch the video.
Copied the code from the last task.
Update the header comments and console.log()
Created an array with four different messages. eg:
"You loath chocolate"
"Chocolate is meh"
"Chocolate is pretty good"
"Chocolate is the best thing EVER!!!!"
Ask the user for a number between 0 and 3. eg:
"On a scale of 0-3 how much do you like chocolate"
Display the appropriate message in the page
Task 13 - Iteration - The For Loop
Task 13 - Iteration - The For Loop
Learning goal - We are learning how to:
Get a section of code to repeat a certain number of times.
By the end of this topic you will have:
Gone through the slides and watch the videos.
Copied the template from task 1.
Update the header comments and console.log()
Ask the user for a number of verses
Print out the lyrics to "99 bottles of <milk> on the wall", starting at the number the user chose (you might want to create a new form for this).
Bonus challenge:
How will you handle the last verse when there is only 1 bottle (not 1 bottles)?
Task 14 - Arrays
Task 14 - Arrays
Learning goal - We are learning how to:
Use arrays to sort a list of items and access the different values.
By the end of this topic you will have:
Gone through the slides and watched all the videos.
Copied your code from the last task.
Update the header comments and console.log()
Create a new form for the shopping list
Ask the user for an item to add to the list
Have one button to add the item to the list (you can use the value attribute to change the word on the submit button)
Display a confirmation message "You have added <item> to the list"
Have another button to display the message "These are the items on your shopping list:" along with the list of items, each on a separate line.
Task 15 - Using a testing plan for expected values
Task 15 - Using a testing plan for expected values
Learning goal - We are learning how to:
Develop a testing plan which covers expected input.
By the end of this topic you will have:
Gone through the slides.
Used your program from task 10 - activate via button
Tested the program using expected values. The teacher will share this testing plan with you through Google Classroom. There should be at least 4 test cases.
In Part 2 you will look at testing Boundary and Invalid cases.
Congratulations! You've completed the basics.
Congratulations! You've completed the basics.
You have done enough to get level 6p. If you want to do COMP next year you should complete the last few tasks
Task 16 - Validating your input
Task 16 - Validating your input
Learning goal - We are learning how to:
use HTML forms to validate input
By the end of this topic you will have:
Gone through the slides
Copied your code from the last task.
Update the header comments and console.log()
Add appropriate validation to all your inputs
Task 17 - Constants and Conventions
Task 17 - Constants and Conventions
Learning goal - We are learning:
The difference between, variables, constants and literal values and the benefits of using constants over literal values.
By the end of this topic you will have:
Gone through the slides
Copied your code from the last task.
Update the header comments and console.log()
Gone through the code and replace any hardcoded values with constants.
Replaced variables (let or var) that do not change with constants (const)
Changed variable names to the conventional case for JavaScript
Task 18 - Objects
Task 18 - Objects
Learning goal - We are learning:
To use JavaScript objects to hold data.
By the end of this topic you will have:
Gone through the slides
Copied your code from the last task.
Update the header comments and console.log()
Modify your page so that when the users submits the user details (name, age, pocket money and chocolate preference) these are saved to an array as an object.
Add a button that displays the welcome for all the users.
Task 19- Testing for boundary & invalid cases
Task 19- Testing for boundary & invalid cases
Learning Goal - We are learning how to:
Use a testing plan to ensure our program handles boundary (both valid and invalid) and invalid cases.
By the end of this topic you will have:
Gone through the slides and watched all the videos.
The teacher will share this testing plan with you through Google Classroom. There should be at least 4 test cases for boundary and 4 for invalid.
Once you have completed all of these tasks, get them checked by the teacher and then you can start part one of the project, this let you demonstrate that you understand the basics oF JavaScript.
Once you have completed all of these tasks, get them checked by the teacher and then you can start part one of the project, this let you demonstrate that you understand the basics oF JavaScript.
Page updated
Report abuse