| JavaScript - Methods and Properties |
|
| You have now learned a bit about HTML, so now we can start to create more fancy features to your HTML code. |
|
| What is a method in JavaScript? A method is an action you can perform on HTML elements. We can therefore either add or delete elements by using methods. |
|
| What is a property in JavaScript? Properties are values of HTML elements that you can set or change. property can with other words change the content of an HTML element. |
|
| Imagine you have this kid (this is an object) and the kid can do different things like cry, eat, sleep, walk, vomit etc. So these different actions the kid can do are called methods. JavaScript methods are written with parentheses () that hold parameters. This can e.g. be kid.sleep(“30 minutes”) or kid.cry().
|
|
| Then the kid has different properties as well, like weight, height, age etc. The properties are written without parentheses, but can be change in case the kid grows taller or put on some weight. This can be e.g. kid.height or if we want to change a value we can write this kid.weight=”50 kg”. |
|
|
<html>
<body>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "Hello, I’m a young girl living in London!";
</script>
</body>
</html>
|
|
|
| In the example the document is the object, just like the kid in the previous example and what we want to do with the document is to getElementById, the method, just like sleep or cry in the example above. We use this method (getElementById) to find the element (which in this case is id=”demo”). Then innerHTML = “Hello World!” is the property and will change id=”test” to id="Hello, I’m a young girl living in London!"
|
|
| Popup boxes |
| There are three kinds of popup boxes you can use in JavaScript; it’s Alert Box, Confirm Box and Prompt Box. With these boxes you can show messages, alerts or even write your own text. Let’s look at what the different popup boxes actually do.
|
|
| Alert Box |
| The alert box will show a popup with an alert message. To proceed, the user needs to press ‘OK’. The syntax for the alert box is: |
| window.alert(“put your text here!”); |
| So here you can see that window is the object and alert is the method, and the parentheses are the parameters, in this case of text. |
|
|
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
|
|
|
| Confirm Box |
|
The confirm box will include a message and two buttons, the ‘OK’ button and the ‘Cancel’ button. The syntax for the confirm box is:
|
| window.confirm(“put your text here!”); |
| So here you can see that window is the object and confirm is the method, and the parantheses are the parameters, in this case of text.
|
|
|
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
|
|
|
| Prompt Box |
| In the prompt box you get the user to input a value that you can display later, look at the example. The syntax looks like this:
|
| window.prompt(“put your text here!”); |
| So here you can see that window is the object and prompt is the method, and the parantheses are the parameters, in this case of text. |
|
|
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = prompt("Please enter your name", "Winnie the Pooh");
if (person != null) {
document.getElementById("demo").innerHTML ="Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>
|
|
|