PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

|
|
|
FR
Accueil → WINDEV 2024 → Using javascript in webdev
Using javascript in webdev
Débuté par guest, 02 déc. 2009 07:58 - 9 réponses
#1
Posté le 02 décembre 2009 - 07:58
Hi,
Anybody used java script in webdev before ?
Can provide some example/sample code ( browser's side ) based on user that clicks on a button?
Thanks & Regards,
PETER ZHOU
Signaler
0
0
#2
Posté le 02 décembre 2009 - 10:36
Hi Peter,

Using javascript is relatively easy if you know where to start. I made this example :

http://megusta.webdevtest.com/WD120AWP/WD120Awp.exe/CONNECT/Slimbox

You will see it in action and the source is provided.

I have also a tutorial here :
http://ilikewd.free.fr/index.php…

And I also have made a WebDev example using jQuery (a javascript library). The sources are available both in version 12 and version 14.

http://megusta.webdevtest.com/jQueryFAQ12.zip
http://megusta.webdevtest.com/jQueryFAQ14.zip

Version 14 can be tested here :

http://megusta.webdevtest.com/WD140AWP/WD140Awp.exe/CONNECT/jQueryFaq14

Hope it will help

--
pat
Signaler
0
0
#3
Posté le 02 décembre 2009 - 10:54
Hi Peter
Yes I have used Javascript quite a bit in WebDev-14 and generally it works very well.
What is it that you want to do in JavaScript?
Here is a generic example that I use to validate dates entered by the users:
Create a global procedure (Browser)
Set the type to JavaScript (Click the green band. It turns to blue for JavaScript)
Enter the following JavaScript code:
function DATE_CHECK(d1)
{
var string
// string= document.frmInfo.txtDate.value;
string= d1;
if (d1.length == 0) {return true; }

var match = /^(\d\d)([-\/])(\d\d)\2(\d\d|\d{4})$/.exec(string)
if (!match) {
alert("Invalid date")
return false;} // illegal format

var month = Number(match[1])-1;
var date = Number(match[3]);
var year = Number(match[4]);
if (match[4].length == 2) { // short year, treat <70 as 2000+
year += (year > 70 ? 2000 : 1900);
}
var jsDate = new Date(year,month,date);
if (jsDate.getMonth()!=month || jsDate.getDate()!=date) {
alert("Invalid date")
return false; // illegal date
}
return true; // object, can be used as true or the date
}
-----
Now on your form, add a date editor field. Add this code to “Control Exit (onblur) of the field:
IF DATE_CHECK(DateToString(MySelf,"MM/DD/YYYY")) = False THEN
ReturnToCapture(MySelf)
END
That is it.
This is a simple example of Webdev browser code in WLanguage calling a Javascript code.
By the way I am aware that you could do the same validation using WLanguage only, but here I am showing the use of Javascripts in WebDev.
Hope this has been of some help.
Happy coding
Shahine
Signaler
0
0
#4
Posté le 02 décembre 2009 - 18:10
Dear Shahine,
Thank you for the sample code.
I'm not familar with javascript, it's just that my client has "ready to run" javascript code and i will need to integrate them into webdev.
Another question :-
How do i use the META NAME from the java script as the META NAME contain the table's column data?
Thanks & Regards,
PETER ZHOU
Signaler
0
0
#5
Posté le 02 décembre 2009 - 18:36
Hi Peter...

be careful... If you are not VERY familiar with javascript, integrating
external js code (ready to run or not) with a webdev site can be quite
challenging

best regards

--
Fabrice Harari
International WinDev, WebDev and WinDev mobile Consulting

More information on http://www.fabriceharari.com


PETER ZHOU wrote:
Dear Shahine,
Thank you for the sample code.
I'm not familar with javascript, it's just that my client has "ready to run" javascript code and i will need to integrate them into webdev.
Another question :-
How do i use the META NAME from the java script as the META NAME contain the table's column data?
Thanks & Regards,
PETER ZHOU
Signaler
0
0
#6
Posté le 02 décembre 2009 - 19:18
Hi Peter,

I've published a message for you that did not make it on the MySNIP forum.
I have a lot of examples available.
Have a look here :

http://forum.pcsoft.fr/thread.awp…

--
Regards
pat
Signaler
0
0
#7
Posté le 04 décembre 2009 - 08:25
Dear Everybody,
Thank you all for the advice & samples.
I will feedback if any issue.
Thanks & Regards,
PETER ZHOU
Signaler
0
0
#8
Posté le 04 mai 2010 - 17:26
hey guy. your example on using javasript have been of a good help. It opened my mind on using other language. I tried to apply the same approach using google map api and code, but it doesn't work. May be I don't know wich part of the code goes where. please since I am very new at webdev, could you help by telling me?
this is the sample of the code I got from google maps in order to be able to use the maps:
[code]
//Use of Gmap in your web page

//
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>My Locations</title>
<script src="http://maps.google.com/maps…;
key=ABQIAAAAcl" type="text/javascript"></script>
<script type="text/javascript">

function load()
{
if (GBrowserIsCompatible()) {
var point;
var map=new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
var address='<img src="myimage.gif" width=150 height=40/><br/>' +
<font size="2" face="Arial"><b>INDIA</b><br/><br/>Home.<br/>' +
New York City<br/><br/>America<br/>Ph.: 23743823</font>';
var marker = new GMarker(point);
map.setCenter(point,17);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(address);});
marker.openInfoWindowHtml(address);

}
}
</script>
<body onload="load();" onunload="GUnload()" style="
background-color:Transparent">
<div id="map" style="width: 900px; height: 500px"></div>
</body>
</html>
[code]
Signaler
0
0
#9
Posté le 14 décembre 2015 - 09:37
function addFields(){
// Number of inputs to create
var number = document.getElementById("member").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Member " + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i;
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}

i want someone to translate this for me from javascript to windev
Signaler
0
0
#10
Posté le 14 décembre 2015 - 12:53
Hi,

> i want someone to translate this for me from javascript to windev

No need to translate. Just create a JS function and call it from your
webdev browser code

Best regards

--
Fabrice Harari
International WinDev, WebDev and WinDev mobile Consulting

Ready for you: WXShowroom.com, WXReplication (open source) and now WXEDM
(open source)

More information on http://www.fabriceharari.com
Signaler
0
0
→ Revenir à WINDEV 2024