📄 3120_codecomplfunc.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>Code completion for JavaScript functions</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta name="generator" content="RoboHelp by eHelp Corporation www.ehelp.com">
<link rel="stylesheet" href="interakt_new_ns.css" type="text/css">
<script type="text/javascript" language="JavaScript">
<!--
if (navigator.appName !="Netscape")
{ document.write("<link rel='stylesheet' href='interakt_new.css'>");}
//-->
</script>
<style type="text/css">
<!--
div.whs1 { width:100%; }
p.whs2 { text-align:right; }
img_whs3 { border:none; width:40px; height:50px; float:none; }
table.whs4 { width:100%; }
td.whs5 { }
hr.whs6 { float:aligncenter; }
ol.whs7 { list-style:decimal; }
img_whs8 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:257px; height:344px; float:none; }
img_whs9 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:367px; height:198px; float:none; }
img_whs10 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:197px; height:77px; float:none; }
img_whs11 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:300px; height:125px; float:none; }
ul.whs12 { list-style:disc; }
img_whs13 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:711px; height:144px; float:none; }
img_whs14 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:325px; height:183px; float:none; }
img_whs15 { border-left-style:Solid; border-left-width:1px; border-right-style:Solid; border-right-width:1px; border-top-style:Solid; border-top-width:1px; border-bottom-style:Solid; border-bottom-width:1px; width:322px; height:67px; float:none; }
-->
</style>
<script type="text/javascript" language="JavaScript">
<!--
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
origWidth = innerWidth;
origHeight = innerHeight;
onresize = reDo;
}
onerror = null;
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="whtopic.js">
</script>
<script type="text/javascript" language="javascript1.2" src="whutils.js">
</script>
<script type="text/javascript" language="javascript" src="whver.js">
</script>
<script type="text/javascript" language="javascript1.2">
<!--
var linkedScrollbarStyle = "<link rel='stylesheet' href='wf_topics.css'>";
if( (!isTopicOnly()) &&(parent.gbFHPureHtml == null) )
{
document.write(linkedScrollbarStyle);
}
//-->
</script>
</head>
<body>
<script type="text/javascript" language="javascript1.2">
<!--
if (window.addTocInfo)
{
addTocInfo("Using JSEclipse\nUsing code completion\nCode completion for JavaScript functions");
addAvenueInfo("Using JSEclipse","3100_codecomplet.htm","3130_javadoc.htm");
addShowButton();
}
if (window.setRelStartPage)
{
setRelStartPage("jseclipse.htm");
sendTopicLoaded();
autoSync(1);
sendSyncInfo();
sendAveInfo();
sendBgColorInfo();
}
//-->
</script>
<div id="header" class="whs1">
<p align="right" class="whs2"><img src="images/adobe_logo.png" width="40px" height="50px" border="0" class="img_whs3" alt=""></p>
<table width="100%" class="whs4">
<tr>
<td colspan="3" valign="top" class="whs5"> <br>
 <br>
<hr class="whs6"></td>
</tr>
</table>
</div>
<h1>Code completion for JavaScript functions</h1>
<p>The code completion provided by <span class="Labels">JSEclipse</span> allows the developer to become more productive by suggesting function and variable names as the code is written. The suggestions range from the standard JavaScript functions to the variable name typed a few rows above.</p>
<p>The code completion mechanism recognizes the correct type of the functions and variables and proposes them as needed. Also, words from the active file are suggested, or functions and methods from the entire project.</p>
<p>Code completion can be accessed and used in several ways:</p>
<ol type="1" class="whs7">
<li class="kadov-p">
<p>Automatically - when using class methods, either custom or predefined, the code completion window will appear automatically.</p>
</li>
<li class="kadov-p">
<p>Manually - when using code completion for function or variable names in the current file, the suggestions are not displayed automatically. To display them, press <span class="UserInput">CTRL+SPACE</span>, or <span class="UserInput">right-click</span> the already typed letters and select <span class="Labels">Content Assist</span>:<br>
<br>
<script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/access_code_completion.png' x-maintain-ratio='TRUE' width='257px' height='344px' border='1' class='img_whs8'>");}
else
{ document.write("<img src='images/access_code_completion.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='257px' height='344px' border='1' class='img_whs8'>");}
//-->
</script><br>
 </p>
</li>
</ol>
<p>The code completion provided by <span class="Labels">JSEclipse</span> suggests functions from the defined classes and from the classes they extend. To access code completion for class methods, simply create a new instance of the class, and type the new object name followed by a dot. The list of available methods for that particular object will be displayed:</p>
<p> </p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/new_class_instance_completion.png' x-maintain-ratio='TRUE' width='367px' height='198px' border='1' class='img_whs9'>");}
else
{ document.write("<img src='images/new_class_instance_completion.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='367px' height='198px' border='1' class='img_whs9'>");}
//-->
</script></p>
<p> </p>
<p>Parameters for the functions that need them are also offered by code completion. The parameter name, as requested by the function is displayed both when the function itself is suggested, and after selecting it, as tool-tip text:<br>
<br>
<script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/codehint_parameters.png' x-maintain-ratio='TRUE' width='197px' height='77px' border='1' class='img_whs10'>");}
else
{ document.write("<img src='images/codehint_parameters.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='197px' height='77px' border='1' class='img_whs10'>");}
//-->
</script></p>
<p> </p>
<p>Function and variable names already defined in the current file can be quickly inserted through <span class="Labels">JSEclipse</span>'s code completion. Simply start typing the function name, and access the code completion option. All possible entries will be suggested:<br>
<br>
<script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/userfunc_code_completion.png' x-maintain-ratio='TRUE' width='300px' height='125px' border='1' class='img_whs11'>");}
else
{ document.write("<img src='images/userfunc_code_completion.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='300px' height='125px' border='1' class='img_whs11'>");}
//-->
</script></p>
<p> </p>
<p><span class="Labels">JSEclipse</span> also provides code completion for standard JavaScript objects and methods. Currently supported are all the methods in the following classes:</p>
<ul type="disc" class="whs12">
<li class="kadov-p">
<p>window</p>
</li>
<li class="kadov-p">
<p>string</p>
</li>
<li class="kadov-p">
<p>screen</p>
</li>
<li class="kadov-p">
<p>object</p>
</li>
<li class="kadov-p">
<p>navigator</p>
</li>
<li class="kadov-p">
<p>element</p>
</li>
<li class="kadov-p">
<p>document</p>
</li>
</ul>
<p>When using a method of a class that extends an existing class, methods from the parent class and the class that extends it are suggested. If the library is properly commented, the comments are also displayed:</p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/code_completion_comment.png' x-maintain-ratio='TRUE' width='711px' height='144px' border='1' class='img_whs13'>");}
else
{ document.write("<img src='images/code_completion_comment.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='711px' height='144px' border='1' class='img_whs13'>");}
//-->
</script></p>
 
<h3>Code completion for the getElmentById method</h3>
<p> </p>
<p>JavaScript is mostly used in conjunction with HTML files to add functionality. Either you just want to display a calendar, hide or display a <span class="Code">div</span> with some information, or more complex element manipulation, you go almost the same way:</p>
<ol type="1" class="whs7">
<li class="kadov-p">
<p>In the HTML file you include the JavaScript file, using a <span class="Code"><script src=""></script></span>tag.</p>
</li>
<li class="kadov-p">
<p>In the JavaScript file you use the <span class="Code">document.getElementById</span> method to access the element.</p>
</li>
</ol>
<p>Each time you use this method, you must check the <span class="Labels">HTML</span> file to see what is the exact ID. <span class="Labels">JSEclipse</span> helps in this task by inspecting all <span class="Labels">HTML</span> files that include the <span class="Labels">JavaScript</span> file you're working on and suggesting a list of ID's. All <span class="Labels">HTML</span> files that exist in the same project and include the script will be parsed, and ID's from all will be suggested:<br>
 </p>
<p><script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/code_compl_ids.png' x-maintain-ratio='TRUE' width='325px' height='183px' border='1' class='img_whs14'>");}
else
{ document.write("<img src='images/code_compl_ids.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='325px' height='183px' border='1' class='img_whs14'>");}
//-->
</script></p>
<p> </p>
<p> </p>
<h3>Code completion limitations</h3>
<ol type="1" class="whs7">
<li class="kadov-p">
<p>New class instance creation - In order for <span class="Labels">JSEclipse</span> to correctly recognize the current object's type, you must define it as an instance of the class explicitly, using the new keyword:<span class="Code"><br>
<br>
var new_object = new class_name([parameters]);</span><br>
<br>
Other ways of creating a new instance are not supported. For example, in the code sample below, the instance <span class="Code">john</span> is correctly recognized as being an object of <span class="Code">person</span> type, while <span class="Code">john2</span> would never be (its type can only be evaluated at runtime). Therefore, for john you have code completion:<br>
<br>
<script type="text/javascript" language="JavaScript">
<!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) <= 4))
{ if (parseInt(navigator.appVersion) != 2) document.write("<img src='images/incorrect_class_instance.png' x-maintain-ratio='TRUE' width='322px' height='67px' border='1' class='img_whs15'>");}
else
{ document.write("<img src='images/incorrect_class_instance.png' x-maintain-ratio='TRUE' style='border-left-style:Solid;border-left-width:1px;border-right-style:Solid;border-right-width:1px;border-top-style:Solid;border-top-width:1px;border-bottom-style:Solid;border-bottom-width:1px;' width='322px' height='67px' border='1' class='img_whs15'>");}
//-->
</script></p>
</li>
</ol>
<p> </p>
<p> </p>
<div id="footer" class="whs1">
<table width="100%" class="whs4">
<tr>
<td colspan="3">
<hr class="whs6"></td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -