©2009 Google -
Code Home -
Terms of Service -
Privacy Policy -
Site Directory
Google Code offered in:
English -
Español -
日本語 -
한국어 -
Português -
Pусский -
中文(简体) -
中文(繁體)
فارسی
با استفاده از API زبان AJAX می توانید بخش هایی از متن را در صفحات وب با استفاده از جاوا اسکریپت شناسایی کرده و ترجمه کنید.
API جدید است بنابراین ممکن است مشکلاتی وجود داشته باشد و اسناد آن کمی نقص داشته باشد. با ما همراه باشید تا این مشکلات را برطرف کنیم، و به مجمع برنامه نویسان API های AJAX ملحق شوید، نظرات خود را مطرح کرده و درباره API بحث کنید.
این سند برای افرادی طراحی شده است که با مفاهیم برنامه نویسی با جاوا اسکریپت و برنامه نویسی شیء گرا آشنا هستند. برنامه های آموزشی بسیاری در رابطه با جاوا اسکریپت بر روی اینترنت موجود است.
ساده ترین راه برای شروع به یادگیری این API مشاهده یک نمونه ساده است. نمونه زیر، زبان متن موجود را شناسایی کرده و سپس آن را به انگلیسی ترجمه می کند.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="text">??????????</div>
<div id="translation"></div>
</body>
</html>
این نمونه ها را می توانید در اینجا مشاهده کرده یا ویرایش کرده و با یک نمونه مشابه در محل کد با آن بصورت آزمایشی کار کنید.
برای قرار دادن API زبان AJAX در صفحه خود، از بارگذار Google AJAX API استفاده کنید. بارگذاری معمولی به شما امکان می دهد تا تمام API های AJAX مورد نیاز خود، از جمله API زبان را بارگذاری کنید. لازم است که برچسب اسکریپت API های Google AJAX و فراخوانی را قرار دهیدgoogle.load("language",
"1"):
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
</script>
اولین برچسب اسکریپت، تابع google.load را بارگذاری می کند که به شما امکان می دهد API های Google را بصورت جداگانه بارگذاری کنید. google.load("language", "1") نسخه 1 API زبان را بارگذاری می کند. در حال حاضر، نسخه 1 از API زبان AJAX موجود است، اما نسخه های جدید ممکن است در آینده عرضه شوند. برای اطلاعات بیشتر به بحث مربوط به نسخه در زیر مراجعه کنید.
دومین آرگومان google.load نسخه API زبان AJAX است AJAX که از آن استفاده می کنید. در حال حاضر نسخه 1 از API زبان AJAX موجود است اما نسخه های جدید ممکن است در آینده عرضه شوند.
اگر به روز رسانی مهمی در آینده برای API وجود داشته باشد، شماره نسخه تغییر می کند و اعلانی در گروه کد Google و گروه بحث APIهای AJAX پست می شود. در صورت بروز چنین امری، پشتیبانی هر دو نسخه در فاصله کمتر از یک ماه ارائه خواهد شد تا امکان انتقال کد شما ایجاد شود.
OAتیم API زبان AJAX مرتباً API را با آخرین رفع عیب ها و بهبودهای اجرایی به روز می کند. این رفع عیب ها تنها به منظور بهبود اجرایی و از بین بردن اشکالات است، اما ممکن است بطور غیرعمد برخی از سرویس گیرندگان API شکسته شوند. لطفاً برای گزارش چنین مواردی، از گروه بحث APIهای AJAX استفاده کنید.
تعدادی از مثال ها در محل کد موجود است که برای آشنایی بهتر با نحوه استفاده از این API می توانید آنها را ویرایش کرده و بطور آزمایشی با آنها کار کنید.
این نمونه ترجمه ساده ای از یک رشته جاوا اسکریپت را نشان می دهد:
google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
این نمونه، شناسایی زبان یک رشته جاوا اسکریپت را نشان می دهد. کد زبان بازگردانده می شود:
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
ممکن است مرورگرها و سیستم های عامل از پشتیبانی مورد نظر برای نمایش نوع حروف خاص یونیکد برخوردار بوده یا آن را پشتیبانی نکنند. می توانید شناسایی کنید که آیا کاربری که از صفحه وب شما استفاده می کند از پشتیبانی لازم برای نمایش نوع حروف یک زبان خاص به روشی خوانا برخوردار است یا از API شناسایی پشتیبانی از نمایش نوع حروف برخوردار نیست. لطفاً توجه داشته باشید که این امر فقط برای نوع حروف یونیکد بدرستی کار می کند. اگر نمایش صفحه وب شما از حروف غیریونیکد استفاده می کند، این کارکرد برای شما مفید نخواهد بود. اگر پشتیبانی از نمایش نوع حروف برای یک زبان خاص موجود نباشد، راه حل های متفاوتی برای حل این مسئله وجود دارد - لطفاً برای اطلاعات بیشتر این مقاله را مطالعه کنید.
در این نمونه، شناسایی پشتیبانی نمایش نوع حروف نمایش داده شده است:
var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
resultStr = "Rendering for " + lang + " is not supported.";
} else {
resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;
مشاهده نمونه (fontdetection.html)
نمونه زیر مشابه نمونه ترجمه اصلی است اما نحوه ترجمه متن بدون آشنایی با زبان مبدأ را نشان می دهد. با مشخص کردن یک رشته خالی برای زبان مبدأ، سیستم آن را شناسایی کرده و در یک سلول ترجمه می کند.
google.language.translate("Hello world", "", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
مشاهده نمونه (autotranslate.html)
زمانی که برنامه شما از APIهای زبان Google AJAX استفاده می کند، برقراری ارتباط بخش نامگذاری Google با کاربران شما از اهمیت برخوردار است. روش google.language.getBranding() برای کمک به این امر در نظر گرفته شده است. این روش، عنصر HTML DOM یا شناسه مربوطه و همچنین گزینه های اختیاری را می پذیرد. نامگذاری به عنصر ارائه شده پیوست شده است.
// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');
نامگذاری را می توان با استفاده از CSS بصورت سفارشی تنظیم کرد که با قالب های اصلی 'vertical' و 'horizontal' ارائه می شوند. یک نمونه نشان دهنده قالب های مختلف و تنظیم سفارشی CSS در زیر آورده شده است.
در اینجا دو نمونه دیگر آورده شده است که برخی از ارتباط های متقابل را امکان پذیر می سازد. اولین مورد، شناسایی زبان را با یک رشته از متن از پیش ضبط شده انجام می دهد اما دیگر متن ها را بعنوان ورودی مجاز می داند. همچنین فاکتورهای محرمانگی و قابلیت اطمینان را نمایش می دهد. همچنین می توانید بصورت آزمایشی با نمونه های مشابه در محل کد کار کنید.
دومین نمونه، ترجمه را انجام می دهد. همچینن، ارتباط متقابل مشابه با نمونه بالا را امکان پذیر می سازد.
API زبان Google AJAX درحال حاضر زبان های زیر را پشتیبانی می کند. این فن آوری بطور پیوسته در حال پیشرفت است و تیم ما به سختی در تلاش است تا این لیست را گسترش بخشد، از این رو بطور مداوم بازگردید و آن را بررسی کنید. همچنین برای مشاهده لیستی به روز از زبان های پشتیبانی شده می توانید از ترجمه Google بازدید کنید.
API زبان Google AJAX در حال حاضر تمام زبان های لیست شده در بالا را شناسایی می کند. زیرمجموعه ای از زبان های بالا که قابل ترجمه هستند در زیر آورده شده اند. هر دو جفت زبان از لیست زیر قابل ترجمه است. برای بررسی اینکه آیا زبانی قابل ترجمه است یا خیر، از google.language.isTranslatable(languageCode); استفاده کنید
برای برنامه نویسان فلش و دیگر برنامه نویسانی که نیاز به دسترسی به API های زبان AJAX از دیگر محیط های غیر جاوا اسکریپت دارند، API یک رابط RESTful ساده را عرضه می کند. در تمام این موارد، روش پشتیبانی شده GET است و قالب پاسخ یک نتیجه کدگذاریJSON همراه با کدهای وضعیت داخلی است. برای google.language.translate، روش POST در دسترس است. برنامه هایی که از این رابط استفاده می کنند باید از تمامی شرایط استفاده موجود تبعیت کنند. یکی از قسمت هایی که باید توجه خاصی به آن داشته باشید، مربوط به شناسایی صحیح خود در درخواست هاست. برنامه ها باید همیشه یک سرصفحه مرجع http معتبر و صحیح در درخواست های خود داشته باشند. علاوه بر آن، ما تقاضا داریم که هر درخواست شامل یک کلید API معتبر باشد اما این امر ضروری نیست. با ارائه یک کلید، برنامه شما یک مکانیسم شناسایی ثانویه را در اختیار ما قرار می دهد که در صورت نیاز به تماس با شما به منظور تصحیح هرگونه مشکل، مفید خواهد بود.
به عنوان آسانترین راه برای شروع یادگیری این رابط، باید آن را امتحان کنید. استفاده از ابزار خط فرمان curl یا wget اجرای فرمان زیر:
curl -e http://www.my-ajax-site.com \
'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'
این فرمان یک ترجمه (/ajax/services/language/translate) برای Hello World (q=hello%20world) از انگلیسی به ایتالیایی (langpair=en%7Cit) انجام می دهد. پاسخ دارای یک Content-Type از text/javascript; charset=utf-8 می باشد. با مشاهده پاسخ زیر متوجه می شوید که responseData به صورت همان ویژگی هایی است که در سند اشیاء نتیجه شرح داده شد.
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200}
علاوه بر این فرمت پاسخ، پروتکل همچنین از یک پاسخ به تماس از نوع JSON-P کلاسیک پشتیبانی می کند که با تعیین یک آرگومان callback فعال می شود. با وجود این آرگومان مورد JSON به عنوان یک آرگومان به پاسخ تماس تعیین شده ارائه می شود.
callbackFunction(
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200})
و سرانجام، پروتکل از آرگومان های callback و context پشتیبانی می کند. وقتی این آرگومان های URL تعیین می شوند، پاسخ به صورت یک تماس جاوا اسکریپ مستقیم با یک امضا از: callback(context, result, status, details, unused)، پیوست می شود. به اختلاف جزئی در فرمان و پاسخ زیر توجه کنید.
curl -e http://www.my-ajax-site.com \ 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'
این فرمان یک ترجمه زبانی انجام می دهد و مانند تماس قبلی است، اما به منظور ارسال هر دو callback و context تغییر داده شده است. با استفاده مناسب از این آرگومان ها، به جای بازگشت مورد JSON، یک تماس جاوا اسکریپت در پاسخ باز می گردد و مورد JSON با استفاده از پارامتر result ارسال می شود.
foo('bar', {"translatedText":"Ciao mondo"}, 200, null)
برای دسترسی به سند کامل این رابط، لطفاً به دفترچه رابط گروه رجوع کنید.
در صورت بروز مشکل در کد شما:
API زبان AJAX برای نویسه گردانی، شما می توانید نویسه گردانی را در هر زمینه یا قسمت متنی در صفحه وب خود فعال کنید. این به کاربران شما کمک می کند با استفاده از صفحه یک کلید انگلیسی به هر زبانی تایپ کنند.
نویسه گردانی چیست؟ نویسه گردانی به معنای تبدیل آوایی یک کلمه نوشته شده در یک اسکریپت به دیگری است. نویسه گردانی را نباید با ترجمه اشتباه گرفت، ترجمه شامل یک تغییر در زبان با حفظ معنا است. با نویسه گردانی، صدای واژه ها از یک حروف الفبای زبانی با دیگری تغییر می کند.
این سند برای افرادی طراحی شده است که با مفاهیم برنامه نویسی با جاوا اسکریپت و برنامه نویسی شیء گرا آشنا هستند. برنامه های آموزشی بسیاری در رابطه با جاوا اسکریپت بر روی اینترنت موجود است. همچنین شما باید با نویسه گردانی از دید یک کاربر آشنا باشید. جهت آشنایی با نحوه استفاده از نویسه گردانی، به صفحات نویسه گردانی هندی یا نویسه گردانی عربی رجوع کنید. برای اطلاعات بیشتر، لطفاً به این مقاله رجوع کنید.
این سند مفهومی کامل و جامع نیست، این سند برای آشنایی سریع شما با نویسه گردانی و استفاده از آن در صفحه خود طراحی شده است.
ساده ترین راه برای شروع به یادگیری این API مشاهده یک نمونه ساده است. نمونه زیر، نویسه گردانی در قسمت متنی با زبان هندی را فعال می کند، به طوری که کاربران می توانند با استفاده از یک صفحه کلید انگلیسی، به زبان هندی تایپ کنند. همچنین کاربر می تواند بین تایپ با زبان انگلیسی و هندی با استفاده از "ctrl+g" به عنوان یک میانبر تغییر وضعیت دهد. برای کسب اطلاعات در مورد انتخاب یک زبان دیگر، به رابط گروه API رجوع کنید.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>
API نویسه گردانی AJAX در زیر مدول "عناصر" قرار گرفته است. برای قرار دادن API نویسه گردانی Google در صفحه خود، ابتدا به برچسب اسکریپت Google AJAX APIs نیاز دارید:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
این برچسب اسکریپت google.load عملکردی را بارگیری می کند که به شما امکان می دهد API های Google را به صورت جداگانه بارگیری کنید. برای بارگیری API نویسه گردانی Google، تماس های برقرار شده با google.load به این شکل می باشند:
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
</script>
این نسخه 1 API نویسه گردانی را بارگیری می کند. در حال حاضر، API نویسه گردانی دارای نسخه 1 است، اما نسخه های جدید ممکن است در آینده موجود باشند. برای اطلاعات بیشتر به بحث مربوط به نسخه در زیر مراجعه کنید.
دومین آرگومان google.load نسخه API زبان AJAX است که از آن استفاده می کنید. در حال حاضر، API نویسه گردانی دارای نسخه 1 است، اما نسخه های جدید ممکن است در آینده موجود باشند.
اگر به روز رسانی مهمی در آینده برای API وجود داشته باشد، شماره نسخه تغییر می کند و اعلانی به کد Google و گروه بحث API های AJAX پست می شود. در صورت بروز چنین امری، پشتیبانی هر دو نسخه در فاصله کمتر از یک ماه ارائه خواهد شد تا امکان انتقال کد شما ایجاد شود.
تیم API زبان AJAX مرتباً API را با آخرین رفع عیب ها و بهبودهای اجرایی به روز می کند. این رفع عیب ها تنها به منظور بهبود اجرایی و از بین بردن اشکالات است، اما ممکن است بطور غیرعمد برخی از سرویس گیرندگان API شکسته شوند. لطفاً برای گزارش چنین مواردی، از گروه بحث API های AJAX استفاده کنید.
این نمونه بسیار شبیه نمونه اولیه ای است که در بخش معرفی نشان داده شد، اما این نمونه کنترلی را برای تغییر وضعیت بین حالت های انلگیسی و هندی نشان می دهد. همچنین نویسه گردانی در دو قسمت متنی را فعال می کند.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
مشاهده نمونه (singlelangtransliteration.html)
این نمونه بسیار شبیه نمونه بالا است، اما کنترلی را نشان می دهد که در آن می توانید زبان مقصد را انتخاب کنید. در این نمونه، از گزینه destinationLanguage را به عنوان ['te', 'ta', 'ml'] تعیین کنید.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['hi','kn','ml','ta','te'],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English and Hindi and also choose other destination language.
control.showControl('translControl');
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
مشاهده نمونه (multilangtransliteration.html)
این یک نمونه پیشرفته است که نشان می دهد چگونه کنترل سفارشی خود را برای کنترل نویسه گردانی ایجاد کنید. این نمونه از یک کادر انتخاب برای تغییر وضعیت بین حالت های تایپ انگلیسی و هندی و یک منوی گشودنی برای تغییر زبان مقصد استفاده می کند. این نمونه همچنین اداره کننده رویداد را برای رویدادهای مختلفی که ممکن است توسط کنترل نویسه گردانی ایجاد شود، ثبت می کند. برای اطلاعات بیشتر در مورد رویدادهای ممکن، به مرجع گروه API رجوع کنید.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage: 'en',
destinationLanguage: ['ar','hi','kn','ml','ta','te'],
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'>
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
</div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
<br><div id="errorDiv"></div>
</body>
</html>
مشاهده نمونه (customtransliteration.html)
API سطح پایین برای نویسه گردانی از API زبان AJAX استفاده می کند (و نه از بسته عواملی که برای بقیه API های نویسه گردانی استفاده می شود). برای قرار دادن API زبان AJAX در صفحه خود، از بارگذارGoogle AJAX API استفاده کنید و دستورالعمل های تعیین شده در اینجا را دنبال کنید.
این نمونه، نویسه گردانی ساده ای از یک رشته جاوا اسکریپت را نشان می دهد.
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
}
});
مشاهده نمونه (transliterate.html)
در حال حاضر API نویسه گردانی از نویسه گردانی از نسخه انگلیسی الفبای لاتین به اسکریپت های زبان های زیر پشتیبانی می کند:
کنترل نویسه گردانی که با استفاده از روش showControl نشان داده می شود را می توانید به سبکی طراحی کنید که با توسعه گروه های CSS تعیین شده در فایل CSS پیش فرض، در صفحه وب شما قرار گیرد. فایل CSS پیش فرض به صورت خودکار در تماس google.load() بارگیری می شود، و این فایل شیوه های کنترل و منوی پیشنهادات نویسه گردانی که هنگام کلیک بر روی یک کلمه نویسه گردانی شده یا ویرایش آن کلمه باز می شود را تعیین می کند. در صورتی که مایل نیستید CSS پیش فرض را بارگیری کنید،"nocss" را روی درست تنظیم کنید.
google.load("elements", "1", {packages: "transliteration", "nocss" : true});
منوی انتخاب زبان، دکمه ای که زبان انتخابی توسط کاربر را نشان می دهد و منوی پیشنهاد که با کلاس های CSS خاص علامتگذاری شده اند در عناصر div ضمیمه می شوند. به منظور طراحی این عوامل متناسب با صفحه خود، می توانید تعیین کنید که قوانین CSS اعمال شده بر این عناصر لغو شوند. لطفاً جهت کسب اطلاعات بیشتر درباره CSS پیش فرض بارگیری شده با بسته API نویسه گردانی، به این فایل CSS نویسه گردانی رجوع کنید. لیستی از کلاس های CSS که برای سفارشی کردن مناسب می باشند در زیر آمده است:
به عنوان مثال، با تعیین پارامتر background-color متعلق به goog-transliterate-indic-suggestion-menu، به شما امکان می دهد پس زمینه منوی پیشنهاد را از مقدار پیش فرض #F0A000 به مقدار جدید تغییر دهید.
برای سیستم های نوشتاری از راست به چپ مانند عربی، API به صورت پیش فرض، و به طور خودکار جهت قسمت متنی را مطابق با جهت سیستم نوشتاری مورد استفاده و محتوای قسمت متنی تغییر می دهد. (جهت قسمت متنی در HTML و جاوا اسکریپت با direction تنظیم می شود، که می تواند دارای مقدار 'ltr' یا 'rtl' باشد. این بر مکان نما و تراز قسمت متنی تأثیر می گذارد.)
مشاهده نمونه نویسه گردانی عربی (arabictransliteration.html)
API نویسه گردانی توسط Firefox 1.5 و بالاتر درWindows ، Linux و Internet Explorer 6.0 و بالاتر در Windows (ترجیحاً Windows XP) پشتیبانی می شود. API نویسه گردانی را می توانید بدون خطا در تقریباً همه مرورگرها بارگیری کنید، بنابراین می توانید قبل از بررسی قابلیت سازگاری، آن را بارگیری کنید.
بعضی اوقات برخی از برنامه ها در مقابل کاربرانی که دارای مرورگرهای نازسازگار هستند، عملکردهای متفاوتی انجام می دهند. API نویسه گردانی یک روش کلی google.elements.transliteration.isBrowserCompatible()برای بررسی قابلیت سازگاری ارائه می کند، اما در این روش در صورت شناسایی یک مرورگر ناسازگار، هیچ گونه عملکرد خودکاری انجام نمی شود. بسیاری از نمونه های ذکر شده در این سند قابلیت سازگاری مرورگر را بررسی نمی کنند، همچنین برای مرورگرهای قدیمی تر پیام خطایی نشان نمی دهند. مسلماً برنامه های واقعی در مقابل مرورگرهای ناسازگار عملکرد دوستانه تری انجام می دهند، اما ما برای قابل فهم تر کردن نمونه ها، این بررسی ها را حذف کرده ایم.
API نویسه گردانی بسیاری از متن های UTF-8 را انجام می دهد بنابراین باید نوع محتوای صفحه خود را با افزودن این برچسب متا <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/>، روی UTF-8 تنظیم کنید. بدون این برچسب متا،API نویسه گردانی در صفحه مرورگر شما به درستی کار نمی کند.
در صورت بروز مشکل در کد شما:
با API زبان AJAX برای صفحه کلید مجازی، می توانید صفحه کلید روی صفحه را در هر زمینه و قسمت متنی در صفحه وب خود فعال کنید. این به کاربران وب سایت شما امکان می دهد با استفاده از چیدمان های صفحه کلید آشنای خود، به هر زبانی تایپ کنند.
صفحه کلید مجازی چیست؟ از صفحه کلید مجازی برای ترجمه ورودی از یک چیدمان صفحه کلید به دیگری استفاده می شود.
این سند برای افرادی طراحی شده است که با مفاهیم برنامه نویسی با جاوا اسکریپت و برنامه نویسی شیء گرا آشنا هستند. برنامه های آموزشی بسیاری در رابطه با جاوا اسکریپت بر روی اینترنت موجود است.
این سند مفهومی کامل و جامع نیست، این سند برای آشنایی سریع شما با صفحه کلید مجازی و استفاده از آن در صفحه خود طراحی شده است.
ساده ترین راه برای شروع به یادگیری این API مشاهده یک نمونه ساده است. نمونه زیر صفحه کلید مجازی را در یک قسمت متنی با چیدمان صفحه کلید روسی فعال می کند، به گونه ای که کاربران می توانند با استفاده از صفحه کلید معمولی یا موشواره به زبان روسی تایپ کنند. کاربر همچنین می تواند با کلیک بر روی دکمه های +/- در صفحه کلید روی صفحه، صفحه کلید مجازی را نمایش داده یا مخفی کند. برای کسب اطلاعات در مورد انتخاب یک چیدمان متفاوت، به رابط گروه API رجوع کنید.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Russian<br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
می توانید بصورت آزمایشی با نمونه مشابه در محل کد کار کنید.
API صفحه کلید AJAX در زیر مدول "عناصر" قرار گرفته است. برای قرار دادن API صفحه کلید مجازی Google در صفحه خود، ابتدا به برچسب اسکریپت Google AJAX APIs نیاز دارید:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
این برچسب اسکریپت google.load عملکردی را بارگیری می کند که به شما امکان می دهد API های Google را به صورت جداگانه بارگیری کنید. برای بارگیری API صفحه کلید مجازی Google، تماس های برقرار شده با google.load به این شکل می باشند:
<script type="text/javascript">
google.load("elements", "1", {
packages: "keyboard"
});
</script>
این نسخه 1 API صفحه کلید مجازی را بارگیری می کند. در حال حاضر، API صفحه کلید مجازی دارای نسخه 1 است، اما نسخه های جدید ممکن است در آینده موجود باشند. برای اطلاعات بیشتر به بحث مربوط به نسخه در زیر مراجعه کنید.
دومین آرگومان google.load نسخه API زبان AJAX است که از آن استفاده می کنید. در حال حاضر، API صفحه کلید مجازی دارای نسخه 1 است، اما نسخه های جدید ممکن است در آینده موجود باشند.
اگر به روز رسانی مهمی در آینده برای API وجود داشته باشد، شماره نسخه به روز می شود و اعلانی به کد Google و گروه بحث API های AJAX پست می شود. در صورت بروز چنین امری، پشتیبانی هر دو نسخه در فاصله کمتر از یک ماه ارائه خواهد شد تا امکان انتقال کد شما ایجاد شود.
تیم API زبان AJAX مرتباً API را با آخرین رفع عیب ها و بهبودهای اجرایی به روز می کند. این رفع عیب ها تنها به منظور بهبود اجرایی و از بین بردن اشکالات است، اما ممکن است بطور غیرعمد برخی از سرویس گیرندگان API شکسته شوند. برای گزارش چنین مواردی، از گروه بحث API های AJAX استفاده کنید.
نمونه زیر نحوه پنهان کردن یا نمایش صفحه کلید در کد شما را نشان می دهد. وقتی یک صفحه کلید مجازی پنهان است، کاربر با استفاده از چیدمان صفحه کلید معمولی تایپ می کند.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.POLISH],
['t1']);
}
// If the keyboard is visible, hide it.
// If the keyboard is invisible, show it.
function toggleVisible() {
var button = document.getElementById("btVisible");
if (kbd.isVisible()) {
kbd.setVisible(false);
document.getElementById('btVisible').value = "Show";
} else {
kbd.setVisible(true);
document.getElementById('btVisible').value = "Hide";
}
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setVisible/isVisible.<br/>
<input type="button" onclick="toggleVisible()" id="btVisible" value="Hide"></input><br/>
<textarea type="text" id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
می توانید بصورت آزمایشی با نمونه مشابه در محل کد کار کنید.
نمونه زیر مشابه نمونه اولیه نشان داده شده در بخش معرفی است، اما این نمونه نحوه تغییر چیدمان را برای یک صفحه کلید مجازی در کد شما نشان می دهد:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
function onLoad() {
// Create an instance on Keyboard.
kbd = new google.elements.keyboard.Keyboard([
google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for setLayout/getLayout.<br/>
<script type="text/javascript">
</script>
<input type="button" onclick="kbd.setLayout('ru')" value="Russian" /><br/>
<input type="button" onclick="kbd.setLayout('hi')" value="Hindi" /><br/>
<input type="button" onclick="kbd.setLayout('th')" value="Thai" /><br/>
<input type="button" onclick="kbd.setLayout('ar')" value="Arabic" /><br/>
<input type="button" onclick="kbd.setLayout('pl')" value="Polish" /><br/>
<input type="button" onclick="kbd.setLayout('fa')" value="Persian" /><br/>
<input type="text" id="t1" style="width: 600px"></input>
</body>
</html>
می توانید بصورت آزمایشی با نمونه مشابه در محل کد کار کنید.
نمونه زیر چیدمان های صفحه کلید پشتیبانی شده را ذکر کرده است و یک منوی چیدمان را در صفحه نشان می دهد:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
var kbd; // A Keyboard object.
// Draw a list of keyboard layouts in their native languages.
// User can click any of them to switch to that keyboard layout.
function drawMenu() {
html = ["<ul>"];
for (var i in google.elements.keyboard.LayoutCode) {
var code = google.elements.keyboard.LayoutCode[i];
var name = google.elements.keyboard.getLayoutName(code);
html.push("<li><a href='#' onclick='kbd.setLayout(\"", code, "\")'>",
name, "</a></li>");
}
html.push("</ul>");
document.getElementById("menu").innerHTML = html.join('');
}
function onLoad() {
kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.RUSSIAN],
['t1']);
drawMenu();
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
This is a demo for LayoutCode and getLayoutName.<br/>
<div id="menu"></div><br/>
<textarea id="t1" style="width: 600px; height: 200px;"></textarea>
</body>
</html>
نمونه زیر مانند نمونه اولیه نشان داده شده در بخش معرفی است. اما این نمونه دارای دو مورد صفحه کلید، هر کدام برای کنترل دو گروه زمینه متنی است. چهار زمینه متنی در صفحه وجود دارد. دو زمینه متنی از یک صفحه کلید مجازی تایلندی و دو زمینه متنی دیگر از یک صفحه کلید مجازی عربی استفاده می کنند.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Onscreen Keyboard API
google.load("elements", "1", {
packages: "keyboard"
});
function onLoad() {
var kbd1 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.THAI],
['th1', 'th2']);
var kbd2 = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.ARABIC],
['ar1', 'ar2']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Thai and Arabic<br/>
<textarea id="th1" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar1" style="width: 300px; height: 80px;"></textarea>
<textarea id="th2" style="width: 300px; height: 80px;"></textarea>
<textarea id="ar2" style="width: 300px; height: 80px;"></textarea>
</body>
</html>
می توانید بصورت آزمایشی با نمونه مشابه در محل کد کار کنید.
در حال حاضر API صفحه کلید مجازی از چیدمان های صفحه کلید زیر پشتیبانی می کند:
ما قصد داریم به تدریج چیدمان های صفحه کلید بیشتری را در آینده منتشر کنیم. منتظر باشد و برای بررسی این سند جهت اطلاعات به روز دیگر بازگردید.
API صفحه کلید مجازی توسط Firefox 3 و بالاتر در Windows و Linux، و Internet Explorer 6.0 و بالاتر در Windows (ترجیحاً Windows XP) پشتیبانی می شود. تقریباً در همه مرورگرها، API صفحه کلید مجازی را می توانید بدون خطا بارگیری کنید، بنابراین می توانید قبل از بررسی قابلیت سازگاری، آن را بارگیری کنید.
در صورت بروز مشکل در کد شما: