Menu
IDC40 - javascript
Javascript
HTML provides a way to format content on a web page by using tags, and it provides a way to jump to a new web page via hyperlinks. However, it was never designed to provide much interactivity.
JavaScript is a programming language that can be added INSIDE of the HTML tags and provides a way for users to interact with the web page. In the example below, I have modified the example at w3schools. You can see two buttons (“up” and “down”) which will change the screen output when you click on them. These buttons are created using standard HTML tags, but their resulting actions are programmed with JavaScript.
JavaScript is a programming language that can be added INSIDE of the HTML tags and provides a way for users to interact with the web page. In the example below, I have modified the example at w3schools. You can see two buttons (“up” and “down”) which will change the screen output when you click on them. These buttons are created using standard HTML tags, but their resulting actions are programmed with JavaScript.
id=
Notice that our paragraph tag above has id= attribute inside of it. This gives the paragraph a name “demo” much like we can create a variable in TinkerCAD that has a name and stores a value. This allows us to make changes to the text in “demo” later on.
Button
The button tag allows you to create a control in HTML, and you can set its type to be a button, or a checkbox, or a variety of other types of controls. However, that is not JavaScript either - it is still HTML. The JavaScript portion is actually found in the onclick=.
The onclick is similar to the “Button Pressed” sub-program in TinkerCAD. The JavaScript will run when the button is clicked. In this case, the JavaScript will look in the current document for the paragraph that has the id “demo” and then will replace its HTML text with something else. |
Script
The <script> tag allows you to enter JavaScript code at any point in your HTML doc.
We can create a variable in JavaScript and give it a starting value with the word Let… For instance, if we want to create a variable for the X vector, we would type: Let VecX =0;
*Notice that the variable name must be all one word and at the end of the line is a semicolon.
To increase the value of a variable by 1, use the ++ operation: VecX++;
To decrease by 1, use a double minus. To adjust it by any other number, add the number to itself:
let VecX = VecX + 7;
We can create a variable in JavaScript and give it a starting value with the word Let… For instance, if we want to create a variable for the X vector, we would type: Let VecX =0;
*Notice that the variable name must be all one word and at the end of the line is a semicolon.
To increase the value of a variable by 1, use the ++ operation: VecX++;
To decrease by 1, use a double minus. To adjust it by any other number, add the number to itself:
let VecX = VecX + 7;
Exercises
Copy the code above into the w3Schools tool so that the button will increase a variable.
Add a second button to decrease the value of the variable.
Send a pic of your experiment
Add a second button to decrease the value of the variable.
Send a pic of your experiment