Summer Training Program| Javascript Workshop 2| Vimal Daga
This is the continuation of my Javascript workshop, so if you are reading this before hand, highly recommend to read the previous one first and come back here.
In previous article we have covered a lot of concepts like, Variables, events, inbuilt methods, function, DOM manipulation and all. This article will get much more deep dive into more concepts.
Javascript has three kind of popup boxes: Alert box, confirm box and prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click “OK” to proceed.
alert(“I am an alert box!”);
Confirm Box
A confirm box is often used if you want the user to verify or accept something.When a confirm box pops up, the user will have to click either “OK” or “Cancel” to proceed.
If the user clicks “OK”, the box returns true. If the user clicks “Cancel”, the box returns false.
And this true and false, is a boolean data type in javascript. We can use these returns to direct the code logic.
if (confirm(“Press a button!”)) {
txt = “You pressed OK!”;
} else {
txt = “You pressed Cancel!”;
}
if condition will trigger if the user clicked OK and the code inside the block will run and if cancel is clicked the confirm box will return false and else block will run.
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value.
If the user clicks “OK” the box returns the input value. If the user clicks “Cancel” the box returns null.
var person = prompt(“Please enter your name”, “Harry Potter”);
if (person == null || person == “”) {
txt = “User cancelled the prompt.”;
} else {
txt = “Hello “ + person + “! How are you today?”;
}
You can use the knowledge of function and use the code inside and try to print the input in the window. This will be fun exercise.
Integrate Javascript with CSS
Modern websites are complex enough to need many front-end specialities. There will lot of cases where, implementation of more user interactive elements. In these cases, Javascript can help us!
so let’s get right back into basics! What is CSS?
Whatever style we need to give it to an HTML element, we can only give that by using CSS(Cascading Style Sheet). Color, background, font style, font weight etc. Let’s see a simple demo!
<style>
div {
border: 5px dotted blue;
}
</style>
<div>This is the first div</div>
<div>This is the second div</div>
<p>This is a paragraph</p>
What we have done here is, in the div element, we put a border of width 5px , dotted line and blue in color. We have given this style to all the div elements. This is how we can style the elements in HTML.
Browser knows where all the element is positioned and they start the point form the top left corner(0,0) and this reference of elements with this point is called the absolute. So if we want to change the position of an element we can use the absolute property of CSS. Let’s create a div and change the position of the element.
<style>
div{
height: 100px;
width: 100px;
border: 2px solid blue;
}
</style>
<div>This is a div</div>
The box is present in the side and if we want to change the position of the element, we can use the absolute property in CSS. If we add these properties, then it will change the position.
position: absolute;
left: 500px;
This was just a small wrap of CSS, lets see how we can change the colour of the box by the user.
<script>
function changecolor(){
button_element = document.getElementById(‘div’)
button_element.style.border = “2px solid red”;
}
</script>
<div id=”div”>This is a div</div>
<button id=”bt” onclick=”changecolor();”>Click me!</button>
If you know css, you can use the entire knowledge of css here, as you can see that we directly wrote the css code, we need to specify the property of css after the style method in javascript. What this code do is that, When the button is clicked the initial colour blue will be changed to red. When clicking, there we are calling a changecolor function which further do the step.
We can use the simple use javascript knowledge to do the simple animations using the variable incrementation.
I need to here give you a javascript method which will come handy during development, that is the setTimeOut method.
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
1000 ms = 1 second
Display an alert box after 3 seconds (3000 milliseconds):
setTimeout(function(){ alert(“Hello”); }, 3000)
Ajax
Ajax gives the capacity to access the data from other websites/endpoints withour reloading the page. You can go to some other page and get the data and can display it on the current webpage without reloading the page.
Let’s see how this is done, we will be creating a program for predicting the age. We will send the user input data to the server and receive the data without loading the page.
We created an input element to get the user input, the we call the predictor function when clicking the button, we use the XMLHttpRequest object to interact with servers.
After we created the object, we use the open method which accepts three arguments. We passed the request type and url, then used the .send() method to send this to server. The server will respond this with a reply. Every response will be saved in a variable responseText. Then we save the data in a variable. As the data is comming from the server is JSON, so we use JSON.parse to construct the JSON to javascript object, then we appended the data in respective fields.
This is not an Ajax, because we can only do any other operation in the page after we get the result, if the server we are accessing this data is down, we won’t be able to do anything other than that, it will hold the page till the server come back up. This is called Javascript Synchronous.
In the open method, we give the third argument false, this means that we are telling to do the synchronous action.
for example, when you using facebook, we will be searching and chatting at the same time, this is an Asynchronous(Ajax). Functions will run in parallel.
I hope you get an overall idea about javascript, now it is practice time and time to get your hands dirty!!
Cheers!
Sarath Kumar R S