Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Friday, August 22, 2014

Javascript and Fuzuli Integration

JFuzuli, the Java implementation of Fuzuli Programming Language now supports limited Javascript integration.

JFuzuli currently supports passing Fuzuli variables to Javascript environment, passing Javascript variables to Fuzuli environment, embedding Javascript code in any part of a Fuzuli source code.

The full support is planned to have ability of calling Fuzuli functions directly from within Javascript.

Here is the examples. This is the simplest one to demonstrate the basic usage of Javascript support:



In the example above, the variable a is set to 10 in Fuzuli part, is incremented by 1 in Javascript part and is printed in the Fuzuli part again. After all, value of a is 11.





In the example above, the variable message is first defined in Javascript section and was null in Fuzuli section at the top. And also, it is clear that the variable message is defined using the var keyword in Javascript section. After all, at the Fuzuli section, message is printed with its value which was set in Javascript section.


The example above is more interesting as it has a function which is written in Fuzuli language, but the function has its body written in Javascript! In this example, square function has a single parameter x. x is then passed to Javascript body and the result is calculated. Value of result is then returned in Fuzuli. At the end, the Fuzuli function call  (square 5) simply returns 25 which is calculated by Javascript.


Passing Arrays 

Because the list object in Fuzuli is simply a java.util.ArrayList, all public fields and methods of ArrayList are directly accessable in Javascript section. Look at the example below. In this example a list object is created with values 1,2 and 3, respectively. In Javascript section, the values of this object is cleaned first and then 10 and 20 are added to the list. Finally, in the Fuzuli section, object is printed only with values 10 and 20.


List objects can be created directly in Javascript section. Look at the example below. Since JFuzuli interpreter uses the javax.scripting framework, a Java object can be created with new keyword. The variable a is a list object in Fuzuli section again and the printed output includes two values of 10 and 20.



You can try similar examples using our online interpreter in url 

http://fuzuliproject.org/index.php?node=tryonline

Hope you get fun with Fuzuli...







Wednesday, April 23, 2014

Only Numeric Values ​​in Form Fields With JavaScript

Hi everyone! 

We use form fields almost in every web project. This fields often are different. For example, password field's type is password, text's type textfield. If you want users to sign up, you should develop e-mail fields on it. so, you have to confirm values of e-mail fields. In this article, we will create a textfield for only numeric values.
First, we create HTML form:

input name="" type="text" onChange="isNumeric(this)"

The code given above is a textfield in the HTML file. As you have seen, there is a onChange function, isNumeric. Let's do this JavaScript function:
function isNumeric(v) {
    var isNum = /^[0-9-'.']*$/;
    if (!isNum.test(v.value)) {
        alert('Only Numeric Values Dude!');
        v.value = v.value.replace(/[^0-9-'.']/g,"");
    }
}

When you run this page, you will see an alert on the screen if you write some string values.

Saturday, March 8, 2014

Sending Data to MySQL Database Using PHP With Unity3D Game Engine

Hello everyone, In this article, I will share an Unity3D game engine example with you guys. We will imagine that we have got a game has been played and opened score scene. This step will be sharing platform for scores between users. At this stage score information will be taken and posted to PHP page for sending to MySQL database. For these steps, we'll need these digital materials and tools given below:
  • An empty scene in the Unity3D game engine and Main Camera
  • An JavaScript scripting file for posting data to PHP page
  • An table named highscore in the MySQL database
  • An Server that can work PHP programming language

First, we will add javascript file to Main Camera Inspector in the empty scene.

function send(data, username) {
    var form = new WWWForm();
    form.AddField("action", "send");
    form.AddField("score", data);
        form.AddField("username", username);
    var url = "http://localhost/unity/send.php";
    var w = WWW(url, form);
    yield w;
}

send(999, "phpservisi");

Codes given above send score information to send.php PHP file for saving MySQL database. WWWForm object has been created for outside connection. This object has got action attribute and send value. This value will be used in PHP file as a condition to send MySQL database. score attribute's value is going to share with other players. For that reason we need all attribute, variable and values. Url variable shows us what will we use for target POST URL information.

Just remember that you have to add this JavaScript file to Main Camera's Inspector part using Add Component.

Now, we can finally create our PHP file for saving datas to MySQL DATABASE. But first create highscore table in the MySQL: 


Let's get PHP file:

mysql_connect("localhost","username","password");
mysql_select_db("database_name");
 
if($_REQUEST['action']=="send") {
$score = $_REQUEST['score'];
$username = $_REQUEST['username'];
$query = "INSERT INTO `highscore` (username, score) VALUES ('$username', '$score')";
mysql_query($query);

From on now, we can send our score data to PHP file for saving database, when the game run. send function helps us to POST datas. username and score datas are used via JavaScript file in the Unity3D game engine. $score and $username variables came from JavaScript file as you have known. After this we just use
SQL query.



As result, we have just done sent datas to MySQL database using PHP programming language with Unity3D game engine JavaScript codes. This article will be helpful. Because if you want to create a game for muliplatform, you have to develop multiplatform.

See you guys next articles!

Tuesday, November 15, 2011

Web 2.0 Tech and a Jquery Auto Search Complete Application!

Hi! Today I want to talk about web 2.0 technology. As you know, web 2.0 is being used by many of us. Especially frameworks developed with javascript and ajax, used by everyone. Well, we can say that huge companies which are google, yahoo, facebook and twitter etc. use web 2.0 too.

I would like to make an application on Jquery and share with you guys. So, in 2006, Jquery's started to be developed as an open source project. When you see "The write less, do more", you should understand that is Jquery! There is a powerful library of javascript, that's why we can do good jobs with the less code on Jquery.

If you want to see more information, you can visit the official web site of jquery. You can also find documentation and examples on it. That is here!

You must call as include jquery library on your web site, for the successful operation of your jquery code. You can find the library on Jquery Web Site easily.

The point I wanted to show you here is an ajax application on jquery. However, I am thinkin' that I should show you couple simple examples, before starting to applicaton.

$('#divID').slideUp(1000); //Sliding the div up
$('#divID').slideDown(1000); //Sliding the div down
$('#divID').slideToggle(1000); //Sliding the div up and down
$('#divID').FadeToggle(1000); //Displaying or hiding the div
$('#divID').html(“Hello World!”); //Printing something as HTML tags

$(‘a’).click(function() {
 $("#divID").animate({left:'+=100px'}, 2000); //when you click the mouse, do something
});

As you have seen, when you code jquery, you can control the web site all the way.
The application I'll show you, is an AUTO SEARCH COMPLETE!


This is the text field we'll use when searching.


This is the div layer will open during our php script works.
// JavaScript Document
$(document).ready(function() {
 $('#TextBox').keyup(function() {
  document.getElementById("result").style.display="block";
  var variable=$('#TextBox').val();
  $.ajax({
      url:"data.php",
      data:"TextBox="+variable,
      cache:false,
      async:false,
      method:'post',
      success:function(kitchen) {
          var message="Loading..";
          $('#result').html(message).load();
      }
  });
 });       
});

As you have seen, when keyup() function works, the system is getting data from data.php page. data.php page is shown below

 include("database.php");
 $data=$_REQUEST["TextBox"];
 if(!$data==0) { 
  $MyData=mysql_query("select * from names where name like '%$data%'");
  if(mysql_num_rows($MyData)<"1") {
   echo "There is nothing about it!"; 
  } else {
   echo "Languages!
"; while($MyList=mysql_fetch_array($MyData)) { echo $MyList["name"]."\n"; } } } else { echo "Please, start to write something.."; }


Today, we made a jquery search auto complete application. If you visit and see this application, just click demo page!

See you guys next article!

Wednesday, October 5, 2011

Form Validation Using AJAX and PHP

In this article, we'll show you something about form validation, namely form control solutions using AJAX and PHP. As you know, we can submit a form without refreshing page with Ajax. So, we should use this tech.

NOTE : Ajax is not one technology, but a group of technologies. Ajax uses HTML, JavaScript, CSS, XML etc.

This example, shows the relationship between getting data of form and checking:

Step 1 is, users type something or not!

Step 2 is, the system checks what the data is or, is there any typed data?

Well, let's do our pages. For that we create three files,
  1. example.html
  2. kitchen.php
  3. lib.ajax.js
lib.ajax.js
// JavaScript Document
	//What does JaX stand for? is the function we use for ajax object
function JaX() {
	var httpObject = null;
	var httpBrowser = navigator.appName;
	
	if(httpBrowser == "Microsoft Internet Explorer") {
		httpObject = new ActiveXObject("Microsoft.XMLHTTP");	
	} else {
		httpObject = new XMLHttpRequest();	
	}
	return httpObject;
}

function UJaX(subject, method, path, more, func, statu) {
	//subject is object of ajax
	//method is the method of getting variables
	//path is the path of file
	//func is the function you use on it
	//statu can be true or false
	ajaxObject = JaX();
	
	if(method == 'POST') {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('POST', path, statu);
			header = "application/x-www-form-urlencoded";
			ajaxObject.setRequestHeader("Content-Type", header);
			ajaxObject.send(more);
		} else {
			alert("Error(1)->The System Cannot Be Opened!");	
		}
	} else {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('GET', path+'?'+more, statu);
			ajaxObject.send(null);
		} else {
			alert("Error(2)->The System Cannot Be Opened!");	
		}
	}
}


example.html

var ajaxObject;

function CheckItOut() {
	subject = ajaxObject;
	method = 'GET';
	path = 'kitchen.php';
	func = sonuc;
	dataMore = document.getElementById("data").value;
	more = 'data=' + dataMore;
	statu = "true";
	
	UJaX(subject, method, path, more, func, statu);
}

function sonuc() {
	if(ajaxObject.readyState == 4) {
		if(ajaxObject.status == 200) {
			DM = ajaxObject.responseText;
			//DM = document.form1.data.value;
			if(DM == "You must write something!")
				document.getElementById("MyButton").disabled = true;	
			else
				document.getElementById("MyButton").disabled = false;	
		} else
			DM = "Error = Nu/1";	
	} else
		DM = "Loading...";	
		document.getElementById("MyLabel").innerHTML = DM;
}

< form name="form1" method="GET">
< input name="data" type="text" id="data" onChange="CheckItOut();">
< input name="MyButton" type="button" id="MyButton" value="I'm Ok!">
< /form>

Preview example.html page

And php page, kitchen.php


$DataOfForm = $_REQUEST["data"];
if(!$DataOfForm == 1) {
	print "You must write something!";
} else {
	print "You said:".$DataOfForm."";	
}

And yes! We just finished our script! go to example.html page and write something;

When you typing

If we don't type anything on this, we'll see like down here:

When you type none.

Like you see, "Button" is disabled when you type none. Because of it is DM variable of javascript.

If you want to see this project, you can click Demo!

We'll see you next article!