Instructobit
Javascript is a client-side scripting language that is used with HTML to perform processing on the client machine. This can be used to interface with HTML elements to add, remove, edit and much more.
Javascript can be incorporated into an HTML document with the <script> tag. This can be done by adding this tag and placing your code directly inside it or by using a separate file with a .js extension and including with the "src" attribute of a script tag. The script tag can be placed in the body of an HTML document.
<html>
<head>
</head>
<body>
<script>
//your javascript code here
</script>
<script src="your_javascript_file.js"></script>
</body>
</html>
Firstly we should learn how to select an element from within the HTML document, this can be done with document.getElementById() which returns and element with the specified ID. This can be assigned to a variable. (more on Javascript variables
)
document.getElementById()
<div id="div1">Hello world</div>
<script>
element = document.getElementById("div1");
</script>
To retrieve the inner content of the element including any other elements within in text format, we can use innerHTML.
document.getElementById().innerHTML
<script>
var element = document.getElementById("div1");
elementHTML = element.innerHTML;
// or
elementHTML = document.getElementById("div1").innerHTML;
</script>
Both of these methods will return the same string.
To add text or other elements to an existing element, we can again use innerHTML, this time we will assign it a value to change the contents.
<script>
document.getElementById("div1").innerHTML="Hello again";
</script>
This will change the contents of the element from "Hello world" to "Hello again". This can be useful in examples such as setting an element's content to the value of a user input.
Inserting HTML elements into another element
<script>
document.getElementById("div1").innerHTML="<h1>Hello again</h1>";
</script>
This will appear as a proper h1 tag, this can be done with any other HTML element.
Functions in Javascript are blocks of code that are not run with the rest of the script but can be called by a unique identifier at any point. This can be useful for actions such as button clicks. the onclick attribute of a button can specify a certain function to call each time it is clicked, the code within the function will then be run.
functions can also have include parameters that can be set when calling the function, the parameters can then be used within the function's code as variables.
<button onclick="first_function()">Button 1</button>
<button onclick="second_function('Hello')">Button 2</button>
<script>
function first_function(){
alert("Hello user"); // displays an alert box with a string value
}
function second_function(inputString){
alert(inputString);
}
</script>
<span>Enter your name: </span>
<input id="name_input" type="text">
<button onclick="input_enter()">submit</button>
<div id="name_display"></div>
<script>
function input_enter(){
var input_value=document.getElementById("div1").value;
document.getElementById("div1").innerHTML=input_value;
}
</script>
This function, which is activated when the user clicks the submit button,
will change the contents of "div1" to the value of whatever they entered
into the input.
With this knowledge, you should be able to make basic use of Javascript in your website, for further reading check out the other Javascript tutorials on this site.
