Internet Programming | Http is a Stateless

Posted by   on   with  No comments

Http is a Stateless


Because a stateless protocol does not require the server to retain session information or status about each communications partner for the duration of multiple requests. 
HTTP is a stateless protocol, which means that the connection between the browser and the server is lost once the transaction ends.

Java Servlet code for print out the current date and time

Posted by   on   with  No comments

Java Servlet code for print out the current date and time



import java.io.PrintWriter;
import java.io.IOException;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
   This servlet prints out the current date and time.
*/
public class DateServlet extends HttpServlet
{
   public void doGet(HttpServletRequest request,
      HttpServletResponse response)
      throws ServletException, IOException
   {
      // get information
      String now = new Date().toString();

      // set content type to HTML
      response.setContentType("text/html");

      // print formatted information
      PrintWriter out = response.getWriter();

      String title = "Date Servlet";
      out.println("<html><head><title>");
      out.println(title);
      out.println("</title></head><body><h1>");
      out.print(title);
      out.println("</h1><p>The current time is: ");
      out.println(now);
      out.println("</p></body></html>");

      out.close();
   }
}

JavaScript HTML DOM Elements (Nodes) | Removing Existing HTML Elements

Posted by   on   with  No comments

Removing Existing HTML Elements

To remove an HTML element, you must know the parent of the element:

Example


<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p2");
parent.removeChild(child);
</script>

</body>
</html>

Output

This is a paragraph.


The method node.remove() is implemented in the DOM 4 specification.
But because of poor browser support, you should not use it.

Example Explained 

This HTML document contains a <div> element with two child nodes (two <p> elements):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Find the element with id="div1":
var parent = document.getElementById("div1");
Find the <p> element with id="p1":
var child = document.getElementById("p1");
Remove the child from the parent:
parent.removeChild(child);
It would be nice to be able to remove an element without referring to the parent.
But sorry. The DOM needs to know both the element you want to remove, and its parent.
Here is a common workaround: Find the child you want to remove, and use its parentNode property to find the parent:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

JavaScript HTML DOM Elements (Nodes)

Posted by   on   with  No comments

Creating New HTML Elements (Nodes)

To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.


Example


<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>


Output


This is a paragraph.
This is another paragraph.
This is new.



Example Explained 

This code creates a new <p> element:
var para = document.createElement("p");
To add text to the <p> element, you must create a text node first. This code creates a text node:
var node = document.createTextNode("This is a new paragraph.");
Then you must append the text node to the <p> element:
para.appendChild(node);
Finally you must append the new element to an existing element.
This code finds an existing element:
var element = document.getElementById("div1");
This code appends the new element to the existing element:
element.appendChild(para);

Internet Programming | HTML and JSP program for simple calculator

Posted by   on   with  No comments

HTML and JSP program for simple calculator

<html>
<head>
<title>calculator program in jsp</title>
<script>
function checkValue(){
var msg = "";
if (f1.operand1.value == "" || f1.operand2.value == "")
msg += "Operands missing\n";
if (f1.op.selectedIndex == 3 && f1.operand2.value == 0)
msg += "Division by zero";
if (msg.length > 0){
alert(msg);
return false;
} else
return true;
} 
</script>
</head>

<body>

<%
String str = "0",op2 = "0";
int result = 0;
String op = "+";
char opchar = op.charAt(0); 
if (request.getParameter("op") != null){
op = request.getParameter("op");
opchar = op.charAt(0);
str = request.getParameter("operand1");
op2 = request.getParameter("operand2");
switch(opchar){
case '0': result = Integer.parseInt(str) + Integer.parseInt(op2);
break;
case '1': result = Integer.parseInt(str) - Integer.parseInt(op2);
break;
case '2': result = Integer.parseInt(str) * Integer.parseInt(op2);
break;
case '3': result = Integer.parseInt(str) / Integer.parseInt(op2);
break;
case '4': result = Integer.parseInt(str) % Integer.parseInt(op2);
break;
} 
}
%>
<center>

<h2>Simple calculator program in jsp</h2>
<form method ="get" name ="f1" onsubmit = "return checkValue()">
<input type ="text" size ="20" name ="operand1" value = <%= str %> />

<select name = op size = 1>
<option value = "0" <% if (opchar == '0') out.print("selected"); %> >+</option>
<option value = "1" <% if (opchar == '1') out.print("selected"); %> >-</option>
<option value = "2" <% if (opchar == '2') out.print("selected"); %> >*</option>
<option value = "3" <% if (opchar == '3') out.print("selected"); %> >/</option>
<option value = "4" <% if (opchar == '4') out.print("selected"); %> >/</option>
</select>

<input type ="text" size="20" name ="operand2" value = <%= op2 %> />
<p>
<input type = submit value = Calculate />

Result = <%= result + "" %>
</form>

</body>

</html>

Internet Programming | Simple Scientific calculator using HTML, JavaScript and css

Posted by   on   with  No comments

Simple Scientific calculator using HTML, JavaScript and css



Hello guys, today i am going to walk you through step by step in creating your own simple scientific calculator which can perform the major calculations which most of the calculators do. Take a look at the awesome calculator below that you will create using html, javascript and css. That’s right. All you need to know is just the basics and with the few neat lines of code you can create your own working scientific calculator! So lets get started.




Step-1: Creating the HTML file     Don’t be startled by the size of the code. Here, we are just creating a bunch of buttons and getting its values when they are clicked.
<body>
<div id=”big_wrapper”>
<h1 id=”heading”>SIMPLE SCIENTIFIC CALCULATOR </h1>
<div id=”form_wrapper”>
<form id=”formone” name=”calc”>
<input id=”display” type=”text” name=”display” value=” ” disabled contenteditable=”false” >
<br>
<input class=”button number” type=”button” value=”1” onClick=”calc.display.value+=1”>
<input class=”button number” type=”button” value=”2” onClick=”calc.display.value+=2”>
<input class=”button number” type=”button” value=”3” onClick=”calc.display.value+=3”>
<input class=”button three” type=”button” value=”C” onClick=”Resetfunction(this.form)”>
<input class=”button three” type=”button” value=”<-” onClick=”backspace(this.form)”>
<input class=”button three” type=”button” value=”=” onClick=”evaluation(this.form)”>
<br>
<input class=”button number” type=”button” value=”4” onClick=”calc.display.value+=4”>
<input class=”button number” type=”button” value=”5” onClick=”calc.display.value+=5”>
<input class=”button number” type=”button” value=”6” onClick=”calc.display.value+=6”>
<input class=”button opps” type=”button” value=”-” onClick=”calc.display.value+=’-‘”>
<input class=”button opps” type=”button” value=”%” onClick=”calc.display.value+=’%’”>
<input class=”button” type=”button” value=”cos” onClick=”cos_function()”>
<br>

<input class=”button number” type=”button” value=”7” onClick=”calc.display.value+=7”>
<input class=”button number” type=”button” value=”8” onClick=”calc.display.value+=8”>
<input class=”button number” type=”button” value=”9” onClick=”calc.display.value+=9”>
<input class=”button opps” type=”button” value=”*” onClick=”calc.display.value+=’*’”>
<input class=”button” type=”button” value=”n!” onClick=”fact_function()”>
<input class=”button” type=”button” value=”sin” onClick=”sin_function()”>
<br>
<input class=”button opps” type=”button” value=”.” onClick=”calc.display.value+=’.’”>
<input class=”button number” type=”button” value=”0” onClick=”calc.display.value+=0”>
<input class=”button opps” type=”button” value=”,” onClick=”calc.display.value+=’,’”>
<input class=”button opps” type=”button” value=”+” onClick=”calc.display.value+=’+’”>
<input class=”button opps” type=”button” value=”/” onClick=”calc.display.value+=’/’”>
<input class=”button” type=”button” value=”tan” onClick=”tan_function()”>
<br>
<input class=”button” type=”button” value=”E” onClick=”calc.display.value+=2.718”>
<input class=”button” type=”button” value=”pi” onClick=”calc.display.value+=3.141”>
<input class=”button” type=”button” value=”x^y” onClick=”power_function()”>
<input class=”button” type=”button” value=”(” onClick=”openpara(this.value)”>
<input class=”button” type=”button” value=”)” onClick=”closepara(this.value)”>
<input class=”button” type=”button” value=”log” onClick=”log_function()”>
<br>
<input class=”button” type=”button” value=”sqrt” onClick=”sqrt_function()”>
<input class=”button” type=”button” value=”LN2” onClick=”calc.display.value+=0.693”>
<input class=”button” type=”button” value=”LN10” onClick=”calc.display.value+=2.302”>
<input class=”button” type=”button” value=”log2E” onClick=”calc.display.value+=1.442”>
<input class=”button” type=”button” value=”log10E” onClick=”calc.display.value+=0.434”>
<input class=”button” type=”button” value=”EXP” onClick=”exp_function”>
</form>
</div>
</div>
</body>

At this point you should get an output like this,



Step-2: JavaScript to carry on the operations
As you can see there is a global variable called flag set to 0 initially. This variable checks the number of opening parenthesis and the closing ones to avoid errors due to parenthesis. Each time an opening bracket is clicked, the flag is incremented and each time a closing bracket is clicked, it is decremented so that finally its value will become 0.
We are making use of the javaScript’s inbuilt functions wherever possible like cos(), sin(), tan(),sqrt(), log(), etc,. These functions belong to the Math object and hence we access them using it like this “Math.cos()”. And in the display of the calculator, when any of these operations is clicked, it displays the function along with the Math object like this “Math.function()”. I know displaying objects is not a good practice but i tried a few possible ways and couldn’t come up with a better code so if any of you guys have a better solution leave it in the comment and I’ll be really happy to take a look at it.
<script>
flag = 0;
function openpara(val)
{
calc.display.value+=val;
flag+=1;
}
function closepara(valval)
{
calc.display.value+=valval;
flag-=1;
}
function backspace(calc)
{
var size = calc.display.value.length;
calc.display.value=calc.display.value.substring(0,size-1);
}
function Resetfunction(calc)
{
calc.display.value=” “;
flag=0;
}
function cos_function()
{
flag+=1;
calc.display.value+=’Math.cos(‘;
}
function sin_function()
{
flag+=1;
calc.display.value+=’Math.sin(‘;
}
function tan_function()
{
flag+=1;
calc.display.value+=’Math.tan(‘;
}
function log_function()
{
flag+=1;
calc.display.value+=’Math.log(‘;
}
function sqrt_function()
{
flag+=1;
calc.display.value+=’Math.sqrt(‘;
}
function exp_function()
{
flag+=1;
calc.display.value+=’Math.exp(‘;
}
function fact(x)
{
factvar=1;
for (i=1;i<=x;i++)
{
factvar=factvar*i;
}
return factvar;
}
function fact_function(x)
{
flag+=1;
calc.display.value+=’fact(‘;
}
function power_function(x)
{
flag+=1;
calc.display.value+=’Math.pow(x,y’;
}
function evaluation(calc)
{
n = calc.display.value;
var size = calc.display.value.length;
var lastchar = calc.display.value.charAt(size)
if(isNaN(lastchar) && lastchar!=”)” && lastchar!=”!”)   {calc.display.value=”syntax error”;}
else if(flag!=0){calc.display.value=”error:paranthesis”;}
else {
result=eval(n);
calc.display.value=result;}
}
</script>
Step-3: Making the calculator look pretty
Now that the important part of our calculator is over, it is all up to css to make it look beautiful. You can also toss in some of your own ideas to make it look even better.
<style>
*{padding:0;
margin:0;
}
body {text-align:center;
background-color:#637ACB;
}
#heading {margin-top:30px;}
#form_wrapper {width:405px;
height:450px;
margin:30px auto auto 420px;
background-color:#000;
text-align:center;
border-radius:10px;
border-right:2px groove #333;
box-shadow:4px 4px 2px #666666;}
#formone{padding-top:10px;}
#display {width:380px;
height:40px;
font-size:18px;
color:black;
margin:4px;
border:2px inset black;
border-bottom:1px inset #FFF;
border-right:1px inset #FFF;
background-color:#D5F192;}
.button {width:60px;
height:60px;
margin:1px;}
.number {font-size:16px;
font-weight:bold;}
.opps {font-size:18px;}
.three {font-weight:bold;
background-color:#FBB9A8;
}
.three:hover{background-color:#F66;}
</style>
That’s it you’re done.Play around by adding more functions and enjoy.
Your calculator will be displayed as,