Learn Basics - JavaScript, HTML and Forms
|
HTML and JavaScript
We can use HTML to create forms and program websites. This can make websites dynamic and interactive. This tutorial you will be creating a madlibs activity as a final result. |
|
Changing HTML
|
JavaScript can be used to change HTML
This is done using ID's. You can give HTML elements such as <div> and <span> unique id's. Task: update HTML using a button. 1.) Create a new HTML file. 2.) Enter the doctype and a heading. 3.) Enter the following div tag: <div id="changeMe"> I will be changed </div> 4.) Create a button that calls a function called "changeHTML()" 5.) Insert this code: document.getElementById("changeMe").innerHTML = "Changed" 6.) Run the program |
Div Tags
Div tags will create brand new HTML when used (divide). Anything under Div will start on a new line. Span Tags Span tags will inherit the previous HTML tags. Anything under Span tags will be on the same line. 
TASK: Add the following to your page:
- Another button called "change by name" - A function called "changeByName" - Make it so that when you click the button it asks for the users name and includes it in the changed text |
Brief: Create a button that makes itself disappear
Task: Create a button that when clicked will create another button.
When the other button is clicked it will make itself disappear.
When the other button is clicked it will make itself disappear.
Getting information from boxes
|
Rather then using unsophisticated prompts and alerts we can now use fancy input boxes.
Here is the code for the boxes: HTML: <input type="text" id="firstName"> </input> JavaScript: document.getElementById("firstName").value; With this code you should be able to create the app on your right :-) |
|
Brief: Booking a lobotomy
Using <input type="date"> and <input type="time"> let a user input their first name, last name and book their very first lobotomy.
It should come up with a message confirming their lobotomy
Extra: Make a some text appear warning them of the side effects of the lobotomy and a button to confirm.
It should come up with a message confirming their lobotomy
Extra: Make a some text appear warning them of the side effects of the lobotomy and a button to confirm.
Checkboxes
|
Check Boxes.
As part of the assessment for term you will want to get values from check boxes. This section will show how we use these work. Check Boxes. In HTML a checkbox looks like this: <input type="checkbox"> If you want to get information from it you would add: "id=largeSize" And if you wanted an option to be checked you would do this: "checked=true" When we get information it will look like this: let large = document.getElementById("largeSize").checked; Task: Create a list of checkboxes for pokemon you like to eat. 1.) Create the checkboxes 2.) Create a button for ordering 3.) When clicked it should list the items you have purchased. Extra for experts: Program it so that if none of the boxes are checked it states: you have ordered northing. |
Hint: You actually don't need "== true" in an if statement.
You can just write if(document.getElementById("mewTwo").checked) |
Brief: Minesweeper
Create a series of checkboxes (minimum 5) and a button that says "step on mines".
If they have checked the wrong boxes they should "blow up"
If they have only clicked the right ones give them a score. (such as 3 out of 4).
Extra for experts: Everytime they click step on mines, clear the checks from the checkboxes.
If they have checked the wrong boxes they should "blow up"
If they have only clicked the right ones give them a score. (such as 3 out of 4).
Extra for experts: Everytime they click step on mines, clear the checks from the checkboxes.
Radio Buttons
|
Radio buttons can be used when you want to force users to choose a limited set of options:
Do you want fried with your burger?: Yes () No () What makes radio buttons different is that you can group together the boxes and force students to make a selection. Task: Fix the HTML I have created 3 groups of HTML radio buttons that do not work together. Try and fix them up so that you can only pick one from each group. <<Hint>> Use "name" to group together buttons. 
Task: Choose a version of Pokémon
1.) Create a webpage that has 4 different radio buttons for different pokemon versions. 2.) Create a button that when clicked shows the cost of that pokemon game. 
|
| ||
Brief: Unlock the secret combination
Create a webpage with a series of radio buttons and check boxes and a button.
If the right buttons and radio buttons are clicked then give them a secret answer.
If the right buttons and radio buttons are clicked then give them a secret answer.
External JavaScript Files
|
Rather then have your script all on one page we can actually have it in a separate file.
1.) Open any of your previous projects in Code. 2.) Create a new file call it "code.js" 3.) Copy all the code from inside the <script> tags into your js file 4.) Inside your script tags add: src="code.js" type=text/javascript 5.) Test your app |
|
Drop Down Lists
|
Task: Learn for yourself
1.) Go to w3 schools input dropdown. www.w3schools.com/html/html_form_elements.asp 2.) Create a drop down list of whatever you want 3.) Create a button that when clicked will alert you to what option you choose in the dropdown list. |
|
Checkpoint: Create this Madlib activity in JavaScript
Tip: Rome wasn't built in a day. Don't try to do it all at once, break it down into small steps that you can do.
|
Using input boxes ask for the following:
- Name A - Name B - 2 Numbers - A Thing Once the user hits submit, it should automagically create the madlib filled in on the left. It should also calculate how many each they have in total You will need to remember to use the following code: Number() += document.getElementById().value document.getElementById().innerHTML |
