Sunday, September 20, 2015

Vowels and Consonants in Javascript

In this article I will show you how to count the number of vowels and consonants in Javascript what the program will do is to ask the user to enter a word or string and then the program will count the number of vowels and consonants given by the user.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.





Sample Program Output


Program Listing

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vowels and Consonants Counter</title>
</head>
<body bgcolor="lightgreen">
<SCRIPT> 
function count_now()
 {
    var TextVar = document.getElementById('userInput').value;
    
    if (TextVar.length==0) {
     document.getElementById('userInput').focus();
     alert("Sorry cannot be empty");
     }
    else { 
    document.getElementById('word_string').innerHTML =  "The word or string is " 
                       + "<font color='red'>" +TextVar + ".</font>";
    document.getElementById('vowels').innerHTML =  "    Number of Vowels      :  " 
                     + vowel_count(TextVar);
    document.getElementById('consonants').innerHTML = " Number of Consonants :  " 
                     + consonants_count(TextVar);
     }                
}

function clear_now()
{
 document.getElementById('userInput').value="";
 document.getElementById('word_string').innerHTML="";
 document.getElementById('vowels').innerHTML="";
 document.getElementById('consonants').innerHTML="";
 document.getElementById('userInput').focus();
}  

function vowel_count(str1)
{
  var vowel_list = 'aeiouAEIOU';
  var vcount = 0;
  
  for(var x = 0; x <str1.length ; x++)
  {
    if (vowel_list.indexOf(str1[x]) !== -1)
    {
      vcount += 1;
    }
  
  }
  return vcount;
}

function consonants_count(str1)
{
  var consonant_list = ' bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ';
  var c_count = 0;

  for(var x = 0; x <str1.length ; x++)
  {
    if (consonant_list.indexOf(str1[x]) !== -1)
    {
      c_count += 1;
    }
  
  }
  return c_count;
}
</SCRIPT>
<style>

b {
  font-family:arial;
  color:blue;
  font-size:18px;
  }


 .for_div 
 { 
  font-weight: bold;
  font-family:arial;
  font-size:18px;
  color:blue;
}
  
 input[type="text"] {
  display: block;
  margin: 0;
  width: 35%;
  font-family: arial;
  font-size: 18px;
  appearance: none;
  border-radius: 2px;
  box-shadow: 10px 10px 7px #888888;
}
input[type="text"]:focus {
  outline: none;
}

input[type=button] {
padding:12px 31px; 
background:yellow; border:10px;
cursor:pointer;
-webkit-border-radius: 12px;
box-shadow: 10px 10px 7px #888888;
border-radius: 5px; 
font-family: arial;
font-size: 18px;
}
</style>
   
</head>
<body>
<b> Vowels and Consonants Counter </b> <br><br>
<form name="myform" action="">
<b> Enter a word or a sentence </b><br><br>
<input type='text' id='userInput' placeholder="enter text here" value='' size="30" required/>
<br><br>
<input type='button' onclick='count_now()' title="Click here to count the vowels and consonants" value='OK'/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='button' onclick='clear_now()' title="Click here to clear the textbox." value='CLEAR'/>
</form>
<br><br><br>
<div class="for_div" id='word_string'></div> <br><br>
<div class="for_div" id='vowels'> </div>
<div class="for_div" id='consonants'> </div>
</body>
</html>


Posted by at No comments:
Labels:

Wednesday, September 16, 2015

Factorial Solver in Javascript

A factorial program that I wrote using JavaScript as my programming language what does the program will do is to ask the user to enter a number and then our program will compute the factorial value in a given number by the user.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.





Sample Program Output


Program Listing

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Factorial Solver in Javascript</title>
</head>
<style>
body,label {
     background-color:lightgreen;
     font-family:arial;
     color:blue;
     font-size:18px;
     font-weight:bold;
     }
label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}
button {
    font-family: 'arial';
    font-size:18px;
    color:red;
}
input[type="number"] { 
    font-family: 'arial';
    font-size:18px;
    color:red;
    height: 25px;
    width: 38px;
}
</style>
<body>
<h2> Factorial Solver in Javascript </h2>
 <div class="row"><label>Enter a Number</label>
      &nbsp;&nbsp;&nbsp;
      <input type="number" size="2" id="values" maxlength="2" onkeypress="return isNumber(event)" 
      required autofocus><br></div>
  <br>
<button title="Click here to find the factorial value.">Solve Factorial</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button title="Click here to clear the text box.">Clear</button><br>
<br><br>
<div id="result"></div>
<script>
var button = document.getElementsByTagName('button');

button[0].onclick = display_result;
button[1].onclick = clear_text;

document.onload = function() {
   document.getElementById('values').focus();
};
    // function to compute the factorial value of a given number.
function find_factorial_value(number_value)
{
   if (number_value < 0) {
       return -1;
   }
  
   else if (number_value == 0) {
       return 1;
   }
   
   else {
       return (number_value * find_factorial_value(number_value - 1));
   }
}

// This function will display the computed factorial results.
function display_result() {
var numbers = document.getElementById("values").value;
var result = find_factorial_value(numbers);
 
if (document.getElementById("values").value == '') {
       alert("Cannot be empty. Please put a numerical value.");
       document.getElementById('values').focus();
       
   }
else {
 document.getElementById('result').innerHTML = "The factorial value of "
        + numbers + " is " + result + ".";
}
}
// This function will clear the text box.
function clear_text() {
document.getElementById("values").value="";
document.getElementById("result").innerHTML="";
document.getElementById("values").focus();
}

// This function will only allow numerical value in the text box.
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
</script>
</body>
</html>



Posted by at No comments:
Labels:

Kilograms To Pounds Converter in Javascript

In this article I will show you how use Javascript to convert kilograms to pounds . In the code I included a function that will only accept numeric value and not allow characters like letters and special characters. I hope you will find my work useful and beneficial in learning how to program in Javascript.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.






Sample Program Output


Program Listing

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title> Kilograms To Pounds Converter in Javascript</title>
</head>
<style>
body,label {
     background-color:lightgreen;
     font-family:arial;
     color:blue;
     font-size:18px;
     font-weight:bold;
     }
label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}
button {
    font-family: 'arial';
    font-size:18px;
    color:red;
}
input[type="number"] { 
    font-family: 'arial';
    font-size:18px;
    color:red;
    height: 25px;
    width: 38px;
}
</style>
<body>
<h2> Kilograms To Pounds Converter in Javascript </h2>
 <div class="row"><label>Enter a value to convert</label>
      &nbsp;&nbsp;&nbsp;
      <input type="number" size="5" id="values" maxlength="5" onkeypress="return isNumber(event)" 
      required autofocus><br></div>
  <br>
<button title="Click here to convert to pounds.">Convert To Pounds</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button title="Click here to clear the text box.">Clear</button><br>
<br><br>
<div id="result"></div>
<script>
var button = document.getElementsByTagName('button');

button[0].onclick = display_result;
button[1].onclick = clear_text;

document.onload = function() {
   document.getElementById('values').focus();
};
   // Function to convert kilogram(s) to pound(S)
function convert_to_pounds(number_value)
{
   
  return (number_value *  2.20462262 );
}

// This function will display the pounds equivalent
function display_result() {
var kilograms = document.getElementById("values").value;
var result = convert_to_pounds(kilograms);
 
if (document.getElementById("values").value == '') {
       alert("Cannot be empty. Please put a numerical value.");
       document.getElementById('values').focus();
       
   }
else {
 document.getElementById('result').innerHTML = kilograms + " kilogram(s) is equal to "
       + result.toFixed(2) + " pound(s). ";
}
}
// This function will clear the text box.
function clear_text() {
document.getElementById("values").value="";
document.getElementById("result").innerHTML="";
document.getElementById("values").focus();
}

// This function will only allow numerical value in the text box.
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
</script>
</body>
</html>


Posted by at No comments:
Labels:

Tuesday, September 15, 2015

Reading XML File Using JSP

In this article I would like to show you how to read XML or Extensible Markup Language using JSP or Java Server Pages.  The code is quiet complex but it is not difficult as you may think. JSP is the language used in creating enterprise Java applications for the web.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.


Program Listing

name.xml


<people>
  <person>
    <name>Joe Zamora</name>
    <age>30</age>
  </person>
  <person>
    <name>Rob Dela Rosa</name>
    <age>29</age>
  </person>
  <person>
    <name>Ana Tan</name>
    <age>45</age>
  </person>
  <person>
    <name>Raul Smith</name>
    <age>61</age>
  </person>
<person>
    <name>Leslie Paul Adams</name>
    <age>53</age>
  </person>
</people>


read.jsp



<%@page import="org.w3c.dom.*, javax.xml.parsers.*" %>
<%
DocumentBuilderFactory docFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder docBuilder = docFactory.newDocumentBuilder();
Document doc = docBuilder.parse("http://localhost:8080/xml_reader/name.xml");
%>
<%!
public boolean isTextNode(Node n){
return n.getNodeName().equals("#text");
}
%>

<html>
<title> Reading Users Name From XML File </title>
<head>
    
</head>
<style>
label {
      display: block;
  float: left;
  width : 250px;    
font-size:20px;
}
input, select {
                width: 200px;
                border: 2px solid #000;
                padding: 0;
                margin: 0;
                height: 30px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
</style>

<!--  Code for translating thai language in the web browser -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <body>
  <div class="container">
 <h3>Reading Users Name From XML File</h3>
</div>
<br><br>
<form method="post" action="read.jsp">
<label> FIRST SELECTION  </label>
<select id="select" class="select" name="filter" style="text-align:center;">
<option value="1"  ${param.filter == '1' ? 'selected' : ''}> 1st Choice</option>
<option value="2"  ${param.filter == '2' ? 'selected' : ''}> 2nd Choice</option>
<option value="3"  ${param.filter == '3' ? 'selected' : ''}> 3rd Choice</option>
<option value="4"  ${param.filter == '4' ? 'selected' : ''}> 4nd Choice</option>
</select> <br><br>
<input type="submit" id="submit" name="submit" value="OK" title="Click here to select your choice.">
</form> <br>
     
 <!--   Document doc = builder.parse("http://localhost:8080/xml_reader/users_xml/users.xml"); -->
   <%
   
   
   String option = request.getParameter("filter");  
      
    
   if("1".equals(option)){
 
%>  



 <table border='2'>
 <tr>
  <th>NAME</th>
  <th>AGE</th>
  </tr>  
 <%   Element  element = doc.getDocumentElement(); 
NodeList personNodes = element.getChildNodes();     
for (int i=0; i<personNodes.getLength(); i++){
Node emp = personNodes.item(i);
if (isTextNode(emp))
continue;
NodeList NameDOBCity = emp.getChildNodes(); 
%>
<tr>
     <%
for (int j=0; j<NameDOBCity.getLength(); j++ ){
Node node = NameDOBCity.item(j);
if ( isTextNode(node)) 
continue;
%>
<td>     <%= node.getFirstChild().getNodeValue() %></td>
<%
} 
%>
</tr>
<%
}
%>
</table>
<% } %>
</body>   
</html>


Posted by at No comments:
Labels: ,

Student Subject Grade Solver in JavaScript

In this article I would like to share with you a program that I wrote that using HTML forms, Javascript and CSS I called this program Student Subject Grade Solver in JavaScript. What does the program do is to ask the user to enter the name of the student, the subject, the prelim, midterm and endterm grade of the student and then the program will compute the average of the student. In addition the program will check and determine whether the student pass or failed in the subject by giving a remark passed or failed.

I added a function to clear the text boxes in order for a new student record to be process by our program. The code is written purely using JavaScript it is not hard as many may think. It takes a lot of learning and patience how the code works. I see to it that the code is very easy to understand and use.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.







Sample Program Output


Program Listing

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Student Subject Grade Solver</title>
</head>
<style>
body {
     background-color:lightgreen;
     font-family:arial;
     color:blue;
     size:5;
     font-weight:bold;
     }
label{
    display: table-cell;
    text-align: right;
}
input {
  display: table-cell;
}
div.row{
    display:table-row;
}

</style>
<body>
<h2> Student Subject Grade Solver </h2>
 <div class="row"><label>Student Name</label>
      &nbsp;&nbsp;&nbsp;
      <input type="text" size="40" id="student_name" autofocus><br></div>
      <div class="row"><label>Subject</label>
      &nbsp;&nbsp;&nbsp;
      <input type = "text" size="30" id="subject"></div><br>
      <div class="row"><label>Prelim Grade</label>&nbsp;&nbsp;&nbsp;
      <input type="text" size="3" id="prelim_grade"></div>
      <div class="row"><label>Midterm Grade</label>&nbsp;&nbsp;&nbsp;
      <input type="text" size="3" id="midterm_grade"></div>
       <div class="row"><label>Endterm Grade</label>&nbsp;&nbsp;&nbsp;
      <input type="text" size="3" id="endterm_grade"></div>
<br>
<button title="Click here to compute the subject grade of the student.">Compute Grade</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button title="Click here to clear the text box.">Clear</button><br>
<br><br>
<div id="result1"></div>
<script>


var button = document.getElementsByTagName('button');
button[0].onclick = solve_subject_grade;
button[1].onclick = clear_text;

document.onload = function() {
document.getElementById('student_name').focus();
};


function solve_subject_grade() {
    var remarks;
    
    var student_name = document.getElementById("student_name").value;
    var subject = document.getElementById("subject").value;
    var prelim_grade = document.getElementById("prelim_grade").value;
    var midterm_grade = document.getElementById("midterm_grade").value;
    var endterm_grade = document.getElementById("endterm_grade").value;

    var final_grade =(parseInt(prelim_grade) + parseInt(midterm_grade)+ parseInt(endterm_grade))  / 3;

   if (final_grade >= 75) {
        remarks = " passed ";
    }
    if (final_grade <= 74) {
      remarks = " failed ";
    }
    if (student_name && subject && prelim_grade && midterm_grade && endterm_grade) {
        document.getElementById('result1').innerHTML = 
        student_name + " your final grade in the " +subject+ " is " +
          "<font color='red'>"+  Math.round(final_grade,0) + "</font>.<br><br>"+
         "You " + remarks + " the subject.";
    } else {
        document.getElementById('result1').innerHTML = "Kindly check first your input values."
    }
}


function clear_text() {
document.getElementById("student_name").value="";
document.getElementById("subject").value="";
document.getElementById("prelim_grade").value="";
document.getElementById("midterm_grade").value="";
        document.getElementById("endterm_grade").value="";
        document.getElementById("student_name").focus();

}
</script>
</body>
</html>




Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)