Contemporary Design Issues in Programming Languages

Engineers have developed variety of programming languages until the invention of computer based technologies. At the beginning there were binary code languages then they've started to code higher level of languages that are more easy to have abstraction of real time actions. In addition, still engineers continue to develop new languages respected to their needs in computer field. Thus, what is the reason behind designing new languages instead of using existing ones and what are the issues behind developing modern programming languages.

Issues:

1- Development on hardware technologies;
Since the developing hardware technologies, programmers are able to give some new instructions to the machines to do more complicated processes in faster ways.
For example, with the development on the multi core systems, programmers want to be able to share program actions on different cores so new programming languages gives new tools to be used on multi core systems. Java threating and C/C++ libraries are good example that support multi core processes. Joint Java also another language that was developed from Java to have concurrency support. However these popular languages are not sufficient to cover all advantages of multi-core processing. Erlang and occam-π are also good examples with different syntaxes to support multi-core. Erlang is good in this area by its nature of being functional language. Occam-pi also is a imperative language.

As can be seen one or two programming language is not enough to have fully capable language that uses all advantages of hardware so according to your priorities you have different languages or you can create your own.

2- Simplicity and performance trade off.
There are also two concepts, simplicity and performance in design of language that are conflicted. Simpler language means slower processing and more detailed languages are faster but more tricky to be used. Thus, the programs that are coded with assembly languages or directly binary codes are really fast programs but they have millions of lines codes so there are also variety of languages that goes lower level to higher level. For example C programming language is like the bridge between assembly and high level languages, thus it is used commonly in OS's designs, compiler designs and hardware drivers. However, we sometimes do not need such complicated languages to code a basic calculator for instance so we have more simpler languages like Java or there are some languages that are called script languages (Ruby Python, Lua, Perl) to have the ability code complicated tasks with really simple codes and attach these codes to host languages such as c++, Java. Ruby is popular script language to have web applications that have database systems, Python also a popular language in web field and also it is used in executable programs, Perl purposes to give easy manipulation on text files and it is used in server side programming language in web applications. These script languages aims to support your main language with huge libraries and they generally have the interpreter systems instead of compilers so they make our tasks simple but slower since the dynamic interpretation.

3- Usage Area
There are lots of languages that supports different computer fields. For example, there are web languages such as, PHP -server side programming-, JavaScript – Browser side programming-, SQL -Database manipulation-. But most popular languages c/c++ and Java generally used for executable programs although they can be used in web by CGI programming. In addition, COBOL is a good example that is specified for data processing language especially for business application or MATLAB is designed for mathematical calculation and graphing tool, Lisp is most popular language that is functional one for AI programming.

4- Potability
Another issue to have portability in your application and sure, Java is the most common example in that way. It can be used in any environment that have Java interpreter. It can be used in web as applet, or in Linux, windows machines. It is really powerful language in that way but the problem is, Java cannot use the all power of the computer to have portable feature. Therefore, again we have the trade of between portability and performance.

5- Variety of Project's Design Patterns
There are lots of different approaches to design a software system so there are also different languages to support such patterns. Today's most common design approach is Object Oriented programming that is supported with popular languages; C++ (Multi-paradigm support), Java and the others; Eiffel, Smalltalk, Ruby, C#. There are also different paradigms such as Structured Programming Languages (C, ADA ,Pascal), Procedural Programming Languages (BASIC, FORTRAN), Logic Programming (LISP).

6- Safety and security
Safety and security are other concerns about programming languages. In that way the level of the language is really important since low level languages are hard to maintain and code safe codes since you need to consider detailed things so using high level ones give the developer to code more safe codes and gives more maintainable codes. For instance it is hard to code a program with C instead of Java because in C you need to deal with low level structures like pointers, addressing, garbage collection but in Java these facts are handled by the language itself. Nevertheless, again we have performance trade off. Dealing with low level language gives efficient performance.

There are lots of programming languages and there will be more of them since the requirements always change in the way of software structures and hardware structures so it is not possible to meet all these need with a single language.

Today, I was working on constructing a dynamic web page that allows user to add new paragraphs or links dynamically.

Here the basic way to add new elements to the webpage dynamically.

//we create a new paragraph element
newParag = document.createElement('p');
//we create a new text node
newText = document.createTextNode("Here the new paragraph");
//we add the text node inside the newly created paragraph element
newParag.appendChild(newText);
//Assume we have a division that has id 'content' and we 
//call the 'content' division and add new paragraph to it
document.getElementById('content').appendChild(newParag);

That's all. Have a good life... see you:)

To Determine the Size Of a Division Dynamically

I just add a option to my Google Extension that user can set the size of the application while he is using it. Here is the my work and the way to have this ability in my appli.

First assume we have a element in html that have the attribute " id = 'map' ".

First we add a new division to have three radio buttons to be selected for setting size.

<div id="options">
<form>
<input type="radio"  name="size" onchange="setSize(400px, 600px)">400x600
<input type="radio"  name="size" onchange="setSize(600px, 800px)">600x800
<input type="radio"  name="size" onchange="setSize(100%, 100%)">FullScreen
</form>
<div>

We call setSize(--) function when we select one of the radio button. Then it is the time to define the setSize(--) function.

function setSize(h,w){
document.getElementById("map").setAttribute("style","height:"+h+"; width:"+w+";");
}

that is all...

My First Google Extension !!!

Click to browse extension page.

Here the link to install this extension. I am waiting for all kind of comments and suggestions.

Take Care :)

Solution against file_get_contents(url) restriction in host server!

$content= file_get_contents("http://blabla");
echo $content;

If you need to use such php code for your purpose such as cross domain xmlhttprequest, there can be a problem depends on you hosting company. They could disable the opportunity to have contact with external files because of security reasons. Thus, here is the solution.

<?php
$ch = curl_init();
$timeout = 5; // set to zero for no timeout
curl_setopt ($ch, CURLOPT_URL, "http://blabla");
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);

// display file
echo $file_contents;
?>

Take care!

Here My New AJAX Project "BusStop Editor"!

It is my one of the recent project and I think I've done well. But I guess there are some flaws at the moment because of the browser and database differences. I've done it specifically for Google Browser and PostGreSQL database but currently I converted it to MySQL database and make some changes to be available in my webhost and the other bowsers. It is working on IE now but not in FireFox and for best performance use Google Chrome.By the way this application is Turkish learn some Turkish first. :)

Thanks!

http://erengolge.0fees.net/busStopEditor/duraklar.php

My Basic Solution For Cross Domain XMLHTTPRequest

As I told in my last post, I was working on the problem of cross domain XMLHTTPrequest and now I have a solution. I think it is easy to use and really basic implementation. Here the solution.

First we have a php that takes the content of the specified URL.
(I am using this to use the googleMAP reverse geocoding.)

//proxy.php
<?php>
$content= file_get_contents("http://maps.google.com/maps/api/geocode/xml?latlng=36.9125,30.6897222&sensor=true");
echo $content;
?>

Then we have a basic XMLHTTPRequest JavaScript;

<html>
<head>
<script type="text/javascript">

var xml;

function loadXMLDoc()
{
 var file = "proxy.php";//our php file
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    xml = xmlhttp.responseText;
  }
 }
 xmlhttp.open("GET",file,false);
 xmlhttp.send();;
}

function parseXML(){
 try{
 loadXMLDoc();
 xml = (new DOMParser()).parseFromString(xml, "text/xml");
 path='/GeocodeResponse/result/address_component[type="route"]/long_name/text()';
 // code for IE
 if (window.ActiveXObject)
 {
 var nodes=xml.selectNodes(path);
 
   //alert("fsdgsdg"+nodes[0].nodeValue);
   document.write(nodes[0].nodeValue);
   document.write("
");
   
 }
 // code for Mozilla, Firefox, Opera, etc.
 else if (document.implementation && document.implementation.createDocument)
 {
 var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
 var result=nodes.iterateNext();
 
 while (result)
   {
   alert(result.nodeValue);
   document.write(result.nodeValue);
   document.write("
");
   result=nodes.iterateNext();
   }
 }
 }catch(err){
  alert(err);
 }
}
</script>

</head>
<body onLoad="parseXML();">
</body>
</html>


//-->
</script>
</head>

This is an example implementation. Maybe you need to change some part of the program but this example is to get the idea behind the solution.

Take Care:)

Today's gain is about XMLHTTPRequest to other server.

Today I was working on parsing a XML document that is coming from one of the Google servers. I wanted to use one of the datum in my map processing program and I was really happy since I could get such info. from Google server. However, suddenly and sadly :( I realized that XMLHTTPRequest the my most trusted tool cannot talk with another server beside mine because of the security reasons. Thus, I started to search about this problem on internet as a Google oriented computer engineer and I found three solution. I will give some little explanations not all implementations. If you wan to get more please ask to internet.

1-)(most common one) The best approach is having a server-side proxy that receives Ajax requests, and in turn, sends HTTP requests to other servers. This should be carefully implemented by sanitizing input and whitelisting the types of requests that are sent, and the servers that are contacted.
2-)If you are using apache server, configure your server to be able to give permission for such connection
3-) What you can do as a third is dynamically create a SCRIPT tag and reference an external address

choose one and search it... good luck :)

A LITTLE MSSQL (TRANSACT SQL)...

I guess I am little out of the purpose of the blog but I am put effort on my internship so I cannot give my all attention to Webing. Also I do not want to stay my blog empty. In that way, I share my today's work. I try to learn SQL in Microsoft way. Here my codes with short explanations just to give little sense about SQL.

SQL is a universal standard language to manage Databases but it has different styles respected to the server systems such as MsSql, MySql ... So now I am talking about "Transact SQL" that work with Microsoft Server system "MSSQL".

FOR MORE INFO.


HERE SOME BASIC EXAMPLE CODES WRITTEN IN THE QUERY FILES

CREATE DATABASE BookDatabase3
GO

DROP DATABASE BookDatabase3 --delete database
GO

USE BookDatabase2; --use database

PRINT 'This is EREN''s experiment on MSSQL';

SELECT (SELECT 448.25); --print on table
GO

SELECT 'Ahmet' AS 'Author Name', '43' AS Age;--AS using to define the column name

DECLARE @Mustafa int, @Ali int, @Ahmet int; --define a variable @ must be added

SELECT @Mustafa = 46;--initialize the variable

SET @Ali = 43;--initialize the variable

DECLARE @IsFamous bit;
SET @IsFamous = 1;
SELECT @IsFamous AS [Is Famuos?];
Go

DECLARE @Distance DEcimal(6,2);
SET  @Distance = 208.12;
SELECT @Distance;
GO

DECLARE @Name char(20);--using string as char array
SET @Name = 'Eren';
SELECT @Name AS 'My Name';
GO


--CREATE TYPE shortString FROM nchar(20); --create your own data type

DECLARE @num1 int, @num2 int;

--CONDTITIONAL STATEMENT
SET @num1 = 20;
SET @num2 = 20;
IF (@num1 = @num2)
 BEGIN
  PRINT 'Numbers are not equal';
  PRINT 'Change the code';
 END 
GO 

 
--SWITCH - CASE of alertnative
DECLARE @num1 int, @num2 int, @Result char(20);
SET @num1 = 20;
SET @num2 = 20;
SET @Result  = CASE @num2
     WHEN 1 THEN 'It is 1'
     WHEN 2 THEN 'It is 2'
     WHEN 3 THEN 'It is 3'
     ELSE 'It is nothing'
      END
PRINT @Result;
Go

--WHILE ITERATION
DECLARE @Number As int
SET @Number = 1
WHILE @Number < 5
    BEGIN
 SELECT @Number AS Number
 SET @Number = @Number + 1
    END
GO

New Sliding Image Gallery Experiment with JavaScript.

At this heading I will explain hoe to create such a Sliding Picture Gallery. You need to know some basics of HTML and JavaScript to do this.

Here the link to see the result.

First we start to set the positioning of the necessary divisions on the browser screen. We need to use some CSS to do that. Here The codes. We need basically one container division to include all the others then two "movePart" and "fillingPart" divisions. "movePart" will include the picture and it will be slided. "filingPart" will include two more divisions to be used for arrows to change the images. The divisions for arrows are "leftArrow" and "rightArrow".

#container{
 position:relative;
 width:350px;
 height:345px;
 border:thin solid;
}

#fillingPart{
 position:absolute;
 width:350px;
 height:25px;
 left:0px;
 top:0px;
}

#rightArrow{
 position:absolute;
 width:24px;
 height:25px;
 background-color:#0C9;
 right:0px;
 top:0px;
 cursor:pointer;
 background:url(rightArrow.jpg);
}

#leftArrow{
 position:absolute;
 width:24px;
 height:25px;
 background-color:#0C9;
 left:0px;
 top:0px;
 cursor:pointer;
 background:url(leftArrow.jpg);
}
 
#movePart{
 position:absolute;
 top:25px;
 left:0px;
 width:350px;
 height:320px;
 background:#A6BBCD;
 overflow:hidden;
}

#fullScreenButton{
 cursor:pointer;
}

Now it is time to add HTML components to our design.

<body onload="setImageArray();">
<div id = "container">
 <div id = "fillingPart" align="center">
    
     <div id = "rightArrow" onclick="useSlideForward()">
        
  </div>
        <table id = "panel" border="0">
    <tr>
           <td id = "fullScreenButton" align="center" onclick="fullScreen();" onmouseover="mouseOn();" onmouseout="mouseOff()"><font id="sized">Real Sized View</font></td>
       </tr>
   </table>
        <div id = "leftArrow" onclick="useSlideBackward()">
         
        </div>
        
 </div>
  
    <div id="movePart">
     
 </div>
</div>
</body>

At html part we start with calling the function "setImageArray" which we will see late but basically it sets an array of the images that will be used for gallery. It behaves like a constructor. Then as I defined, we create the structure of the divisions. Also we add event for a click over to arrows' divisions to call the functions that change the images on the screen. I used table for setting the certain center alignment to the "fullScreenButton" between the arrows in the "fillingPart". In addition, it calls "fullScreen" function with mouse click to show the image with real size on a new opened window. We have also "movePart" division that will be filled by JavaScript code at the script field of the code.

Now it is time for the script code.

 var sliderIntervalId = 0;
 var sliderIntervalId2 = 0;
 var sliderHeight = 320;
 var sliding = false;
 var slideSpeed = 10;
 var countImage = 0;
 var numOfImages = 8;
 var forwardOrBack;
 
 function useSlideForward(){
  forwardOrBack = true;
  slide();
 }
 
 function useSlideBackward(){
  forwardOrBack = false;
  slide();
 }
  
 
 function slide(){
  if(sliding)
   return;
  sliding = true;
  if(sliderHeight == 320)
   sliderIntervalId = setInterval('slideUpRun()',30);
  else 
   sliderIntervalId = setInterval('slideDownRun()',30);
 }
 
 function slideUpRun()
 {
  slider = document.getElementById('movePart');
  if(sliderHeight <= 0)
  {
   sliding = false;
   sliderHeight = 0;
   slider.style.height = '0px';
   clearInterval(sliderIntervalId);
   if(forwardOrBack)
    moveForward();
   else
    moveBackward(); 
   slide();
  }
  else
  {
   sliderHeight -= slideSpeed;
   if(sliderHeight < 0)
    sliderHeight = 0;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 function slideDownRun()
 {
  slider = document.getElementById('movePart');
  if(sliderHeight >= 320)
  {
   sliding = false;
   sliderHeight = 320;
   slider.style.height = '320px';
   clearInterval(sliderIntervalId);
   //change the image
  }
  else
  {
   sliderHeight += slideSpeed;
   if(sliderHeight > 320 )
    sliderHeight = 320;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 //***********************
 //create the images array
 //***********************
 var images = [];
 
 function setImageArray(){
  var j =0;
  for(var i = 0; i < numOfImages; i++){
   images[i] = new Image();
   images[i].src = "image"+(i+1)+".jpg";
   images[i].width = "350";
   images[i].height = "320";
  }
  document.getElementById("movePart").appendChild(images[0]);
 }
 
 function moveForward(){
  document.getElementById("movePart").removeChild(images[countImage]);
   countImage++;
  if(countImage >= numOfImages)
   countImage = 0;
  document.getElementById('movePart').appendChild(images[countImage]);
 }
 
 function moveBackward(){
  document.getElementById("movePart").removeChild(images[countImage]);
   countImage--;
  if(countImage < 0)
   countImage = 7;
  document.getElementById('movePart').appendChild(images[countImage]);
 }
 
 var windowm;
 
 function fullScreen(){
  windowm = window.open("","Real Sized Image",width = 300, height= 200);
  windowm.document.write("");
  windowm.document.write("
Close");
 } 
 //********************
 //set the color of the text
 //********************
 
 function mouseOn(){
  document.getElementById("sized").style.color = "#999999";
 }
 
 function mouseOff(){
  document.getElementById("sized").style.color = "#000000";
 }

We start by defining some of variables of the script.
slideIntervalId -- to keep the id of the setInterval function of the script.
If you do not know setInterval method here the little tutorial.

sliderHeight -- it defines the height of the "movePart" division and it will be used to limit its motion.
sliding -- it is used to check whether "movePart" is sliding or not.
slideSpeed -- it is used to define the speed of the motion by using it inside the setInterval() function.
countImage -- it defines index of the imagesArray.
numOfImages -- it is number of the images.
forwardOrBack -- it defines which of the arrow is clicked.If it is true "rightArrow" is clicked otherwise "letfArrow"

Now type functions.

First two functions are called by the clicks over the corresponding arrow. Then they define clicked arrow and call the slide function that slides the galley.

"slide" function checks gallery is on the motion or not firstly. If it is not on motion choose the correct sliding function respected to the current situation of the motion.

Then we come to "slideUpRun" that slides the image to up and "slideDownRun" gives the opposite motion. They are called sequentially by "slide" function. Both of them have same basic algorithm in the function declaration. First we create a "slider" object of the "movePart" division. Then we check the sliderHeight to stop the motion ( as example, for slide up funtion if sliderHeight is 0 then stop the motion.).To stop the motion we set the height of the "movePart" division height 320 px. It makes guarantied to set the height to correct number.Moreover we calls the "clearInterval" function to stop the execution of the "setInterval" function correspond to sliderIntervalId.

In slide up and slide down function we gives the motion with the "else" section of the codes. We start this section with the code segment that increase or the decrease the height of the division for each call. Then we check whether our motion id out of the out limit or not. Finally we set the height of the division to our sliderHeight.

We solved the motion problem of our gallery. Now we get into the problem of setting the images and changing the images. First function of this section is "setImageArray"
that sets the image array and put the initial image to the "movePart" division. Then we have changing image functions with basic algorithms. Next function is "fullScreen" that opens new window with current image's real size. Our final functions are "mouseOn" and "mouseOff" functions that chage the color of the "Real Sized View" text on the top of the script.

That's all. For further help you can contact me. Take care !

My Projects!!

Google Maps v3 api project is new and I am working on it at the moment.

For the java project, it has some flaws but I have no time to fix it but it will be fixed soon.

Link to my projects page.

Fastest search code in the world!! :) (not related to webbing but?)

This is implementation of the radix sort in binary base with C++ code. You could see the O(1) implementation of radix sort with huge fast difference from other algorithms.


void radixAt(int numberOfItems,int byteNumber, int *temp, int *arr){
int count[256];
int index[256];
for(int i = 0; i<256; i++){//fill all elements of count array with 0
count[i] =0;
}
for(int i = 0; i < numberOfItems; i++){//determine the number of each byte amounth
count[(arr[i] >> (byteNumber*8))&0xff]++;//take byte to controll
}
index[0] = 0;
for(int i = 1; i < 256 ; i++){//for each byte amounth, keep the index space
index[i] = index[i-1] + count[i-1];
}
for(int i = 0; i < numberOfItems ; i++){//fill elements according to their byte to temp array for next call to main array
temp[index[(arr[i]>>(byteNumber*8))&0xff]++] = arr[i];
}
}
void radixSort (int *arr, int *tempArr, int size){
radixAt(size, 0, tempArr, arr);
radixAt(size, 1, arr, tempArr);
radixAt(size, 3, tempArr, arr);
radixAt(size, 4, arr, tempArr);
}

Creating Web Page Template By HTML div tag

You need to know CSS and HTML for this topic.

Now it is different piece from JavaScript but it is fundamental side of web page design. Creating a template makes your life easy while you are designing a web page since, you can easily shape your pages by adding some necessaries to template.

Today's most common way to create a template is using div tag. Basically you define a container "division" that is the main division that includes the other container inside it. Then we add others respected to our design to its inside. Do not forget to give id or class name to each division to be specified for CSS. (Like as in the figure.)

Example HTML for such template;
<div class = "container" >
<div class = "left"> </div>
<div class = "right">  </div>
</div>

But it is not enough to have this HTML code, also we need to use some CSS to define our divisions' width and height.

CSS code
.container{
 width: 960px;
 background-color:#FFF;
 height: 500px;
 margin-left:auto;
 margin-right:auto;
}

.left{
 float: left;
 width: 430px;
 height: 490px;
 background-color: #DFDFDF;
 padding: 10px;
 overflow:auto;
}

.right{
 float: left;
 width: 430px;
 height: 490px;
 background-color: #BFBFBF;
 padding: 10px;
 overflow:auto;
}

To see the resulted page click!

Let's start with JavaScript.(click to see all)

JavaScript is a script language to add more professional functionality and appearance to your webpage. Some of people think that JavaScript is related to a application programing language Java but they are not. JavaScript is developed by Netscape and supported by all major browsers today.

And start as all programming exercises with writing a "hello world" script.

Up to line 6 there are usual XHTML beginning tags as you realize.

Real excitement is starting with the line 6 it includes "script" tag that
indicates the beginning of the script then we have " <!-- " html comment tag which is necessary to make your page available for the old browser that does not support JavaScript so comment tag makes your script comment for the olds. Thus your script is not shown at your page.

Line 8 includes a object (document) usage. It is provided by browsers. Then we use its ".writeln" function to write your string to your page's HTML. There is also ".write" function to be udes but it stays on same line but ".writeln" goes to next line at the end. In addition as you realize the string parameter of method is writing its corresponding HTML tags because as I said parameter of the method is writing to your page HTML.

NOTE!:Write functions can use special characters like " /n, /t, /" " as parameter.

Line 9 has "//" single line comment tag of JavaScript to have proper script to neglect "-->" comment tag for HTML. We have no "//" before "<!--" since it is also single line comment delimiter. Finally close your script.

We add our script to head section of our HTML to be executed before body part of HTML but it is also possible to use your script in body part of your html and we'll see how to use in such way but be patient :).

to copy pase!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First tutorial of JavaScript</title>
<script type="text/javascript">
<!-- 
document.writeln(" <h1> Hello World, This is Eren Golge! </h1>");
//-->
</script>
</head>

download the example page