J2EE Review (c) JavaScript (on) - the basis of entry

Posted on 2009-07-03 filed under: AJAX (RSS) 105 views

As far as I am in the process of learning and the use of JavaScript, the feeling a lot of confusion on the language of logic, sometimes inexplicable errors, and not a very good development tools, debugging them is very time-consuming and nerve-racking, but the development of JavaScript in the web to serve as a very important role, which makes me very upset, I hope can be a long-term experience of learning and coding in order to get progress.

JavaScript Introduction
JavaScript is a scripting language based on the object for the development based on client and server-based Internet applications can be used to create client-side script and server-side script by Sun Microsystems and Netscape to develop, from the Netscapes developed from Livescript

JavaScript numeric data type (Number) integer or real numbers or Boolean logic (boolean) true or false
String type (String), such as "Hello World", "123.4"
Space type (null) null value, said the special keyword

Arithmetic Operators increase + by - x * In addition to / from a dollar increase of more than% + + a dollar decline --

Equivalent comparison operators: == congruent: === ranges:! = Greater than:> greater than or equal to:> = less than: <less than or equal to: <=
PS: congruent === is the comparison of data types and values, only two are equal only to return true.

Logic and Logical Operators: & & Logical OR: | | logic of non-:!
PS: JavaScript is not & logical

Conditional operator: (condition)? TrueVal: falseVal; example: status = (age> = 18)? "Adult": "minor"
typeof operator: typeof operator to return a string, the string representative of the type of operands;

JavaScript array, there are two ways to assign to the array (you can add any number of values, just as you can define your needs, like any number of variables).

var mycars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

You can also use an integer argument to control the capacity of the array:

var mycars=new Array(3);
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

There is also a definition of the way

var mycars=new Array("Saab","Volvo","BMW");

During his visit to java array is the same with, mycars [0], subscript from 0.
Array of methods and properties using concat () method to merge the two arrays.
Use join () method to all the elements of the array to form a string.
Use sort () method from the literal or numerical sort of array.
JavaScript array length property is also

JavaScript Multi-dimensional array

MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";
MyArray[0, 1] = 1;
MyArray[1, 0] = "Mike Donne";
MyArray[1, 1] = 2;

JavaScript try ... catch throw the use of

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{ 
if(x>10) 
throw "Err1";
else if(x<0)
throw "Err2";
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high");
if(er == "Err2") 
alert("Error! The value is too low"); 
}
</script>
</body>
</html>

If the value of x is greater than 10 or less than 0, the error will be thrown out (throw). This error was caught after the catch parameter will display an error message from the definition.

JavaScript for ... in statement to use
for ... in statement for each of the attributes in the object, or array cycle between the various elements

<HTML>
  <BODY>
     <SCRIPT LANGUAGE = "JavaScript">
       color = new Array("红色","蓝色","绿色");    
       for (var prop in color){
         var record = "color " ;
         record+=prop+"="+color[prop] + "<BR>";
         document.write(record);
       }
    </SCRIPT>
  </BODY>
</HTML>

The use of JavaScript new statement
new operator for the new instance of the object type.

<HTML>
    <BODY>
        <SCRIPT LANGUAGE="JavaScript">
        function employee(name, code, designation) {
            this.name = name
            this.code = code
            this.designation = designation
        }
        newemp = new employee("John Dias", "A001", "职员");
        document.write("雇员姓名：" + newemp.name + "<BR>");
        document.write("雇员代号：" + newemp.code + "<BR>");
        document.write("头衔：" + newemp.designation);
        </SCRIPT>
    </BODY>
</HTML>

The use of JavaScript with statement
with statements for the implementation of a set of statements, all of which have assumed that the quoted statement of the object specified.

<HTML>
    <BODY>
        <SCRIPT LANGUAGE ="JavaScript">
             var a, b, c;
            var r=10;
        with (Math)  {
              a = PI * r * r;
              b = r * cos(PI);
              c = r * sin(PI/2);
           }
           document.write (a +"<BR>");
           document.write (b +"<BR>");
           document.write (c +"<BR>");
        </SCRIPT>
    </BODY>
</HTML>

JavaScript String Object String Object Example

<HTML>
  <BODY>
   <script language = "Javascript">
    var bstr = "大号";
    var sstr = "小号";
    var blstr = "粗体";
    var blkstr = “闪烁”;
    var ucase = "大写";
    var lcase = "小写";
    document.write ("<BR>这是"+ bstr.big() + "文本");
     document.write ("<BR>这是"+ sstr.small() +"文本");
     document.write ("<BR>这是"+ blstr.bold() + "文本");
     document.write ("<BR>这是"+ blkstr.blink() + "文本");
     document.write ("<BR>这是"+ ucase.toUpperCase() + "文本");
     document.write ("<BR>这是"+ lcase.toLowerCase() + "文本");
  </script>
 </BODY>
</HTML>

Around both ends of the string space approach

<html>
<head>
<title>js String Object</title>
<script language="javascript">
//此处为string类添加三个成员 
String.prototype.Trim = function(){ return Trim(this);} 
String.prototype.LTrim = function(){return LTrim(this);} 
String.prototype.RTrim = function(){return RTrim(this);} 

//此处为独立函数 
function LTrim(str)//去除左边空格
{ 
var i; 
for(i=0;i<str.length;i++) 
{ 
if(str.charAt(i)!=" "&&str.charAt(i)!=" ")break; 
} 
str=str.substring(i,str.length); 
return str; 
} 
function RTrim(str)//去除右边空格
{ 
var i; 
for(i=str.length-1;i>=0;i--) 
{ 
if(str.charAt(i)!=" "&&str.charAt(i)!=" ")break; 
} 
str=str.substring(0,i+1); 
return str; 
} 
function Trim(str)//去除左右两边空格
{ 
return LTrim(RTrim(str)); 
}
</script>
<head>
<body>
<script>alert("    string         ".LTrim(this).length);</script>
<script>alert("    string         ".RTrim(this).length);</script>
<script>alert("    string         ".Trim(this).length);</script>
</body>
</html>

JavaScript RegExp (regular expression) object

/**语法1 re = new RegExp("pattern",["flags"]);
  语法2 re = /pattern/[flags];
  可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有： 
  g （全文查找出现的所有 pattern） 
  i （忽略大小写） 
  m （多行查找）*/

var pattern1 = new RegExp("e","g");
var pattern2 = new RegExp(/^[1-9]\d*$/);
var pattern3 = /^[1-9]\d*$/;

RegExp object has three methods: test (), exec () and compile ().
test () method searches the specified string value. Return value is true or false, usually check the legality of the use of strings, such as checking whether the input is floating point value.
exec () method searches the specified string value. Return value is the value to be found. If no match, then return null.
compile () method has been applied to change the RegExp, do not clearly see if the following example.

<html>
<body>
<script type="text/javascript">
function CompileDemo(){
   var rs;
   var s = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp";
   // 只为大写字母创建正则表达式。
   var r = new RegExp("[A-Z]", "g");
   var a1 = s.match(r);              // 查找匹配。
   // 只为小写字母编译正则表达式。
   r.compile("[a-z]", "g");
   var a2 = s.match(r);              // 查找匹配。
   return(a1 + "\n" + a2);
}
alert(CompileDemo());
</script>
</body>
</html>

JavaScript --- access to event information
JavaScript in: window.event object or event access to event information call access to its key keyCode of the key bit No.
event.keyCode ---- return to the value of the corresponding key bit
event.shiftKey ---- if shift key is touched to return true
event.ctrlKey ---- if ctrl key is touched to return true
touched event.altKey ---- if alt key is to return true

HTML events
onClick --- click event
Double-click the mouse ondblclick ---
onMouseDown --- mouse click
mouse up onMouseUp ---
Right-click the mouse oncontextmenu ---
value change event onChange ---
access to the focus of onFocus ---
onBlur --- loss of focus
mouse onMouseOver ---
left mouse onMouseOut ---
onLoad --- load event
submit event onSubmit ---

Navigator object properties
appCodeName to return to your browser's code name.
appMinorVersion to return to the sub-version of the browser.
appName return the name of the browser.
appVersion browser to return to the platform and version information
browserLanguage browser to return to the current language.
cookieEnabled browser to return to specify whether the value of the opening of Boolean cookie.
system cpuClass browser to return to the CPU level.
to return to onLine specify whether the system is in offline mode boolean value.
platform running the browser to return to the operating system platforms.

Object Navigator
javaEnabled () provided for the opening of the browser is Java.

Window object properties:
closed to return to the window has been closed.
defaultStatus settings or return to the default window status bar text.
document on the Document object of the read-only reference.
history on the History of the read-only object reference.
length set or return the number of window frame.
location for the window or the framework of the Location object.
name set or return the name of the window.
Navigator Object Navigator to invoke the read-only.
return to the opener window of this window to create references.
outerheight window to return to the external high.
outerwidth to return to the external width of the window.
parent to return to the parent window.
Screen on the Screen object read-only reference.
return self reference on the current window. Attribute is equivalent to Window.
Status Bar settings window status text.
top return to top-level window of the ancestors.
window window attribute is equivalent to self attributes, it contains references to the window itself.

Window Object Methods:
alert (string message) a warning message pop-up
confirm (string message) Show a confirmation dialog box
prompt (string prompt [, default]) shows that message and to provide input to the field
atob (decoding string) on the base-64 encoded string to decode
btoa (string) will be base-64 encoding
back () to return to the previous history page
forward () to load the next history page
open (URL, window name [, window specifications])
close ()
focus () focus to the window
blur () the window into the background
stop () to stop loading the page
enableExternalCapture () framework to allow access to the window event
disableExternalCapture () to close enableExternalCapture ()
captureEvents (event type) to capture a particular event window
routeEvent (events) have been sent to capture events
handleEvent (event) so that the entry into force of a specific incident
releaseEvents (event type) to obtain the release of the incident
moveBy (the level of points, vertical points) relative positioning
moveTo (x coordinate, y coordinate) Absolute positioning
home () into the browser's home page
find ([string [, caseSensitivr, backward]]) window to find a specific string
print () Print the contents of the current window.
setHotKeys (true | false) key combination to activate or shut down
setZOptions () set the window stack at the time of the order of overlap
setInterval (expression, milliseconds)
setTimeout (expression, milliseconds)
clearInterval (timer object)
clearTimeout (timer object)
showModalDialog () pop-up modal form, through the mass window.dialogArguments form from the parent to obtain the value, through window.returnValue value to the parent form.

Document Object Properties
body to provide direct access <body> elements. Sets a framework for the definition of the document, the attributes cited in the outermost <frameset>.
cookie settings or return to the current document and all cookie.
domain name to return to the current document.
lastModified return the document was last modified date and time.
referrer to return the documents included in the current document URL.
title to return to the title of the current document.
URL to return to the current document URL.

Document object methods
close () closed by document.open () method to open the output stream, and display selected data.
getElementById () to return to the possession of the specified id of the first object.
getElementsByName () return the name of the object with the specified collection.
getElementsByTagName () return label name with the object of the specified collection.
open () opens a stream to collect from any document.write () or document.writeln () method output.
write () to document the expression or JavaScript to write HTML code.
writeln () equivalent to write () method, different expressions in each write a newline after.

Location object's properties
set to return from the hash or pound (#) to start the URL (anchor).
host set or return the host name and port number of the current URL.
hostname set or return the current URL's hostname.
href settings or return to a complete URL.
set the current pathname or return to the path part of URL.
port settings, or return to the current URL of the port number.
protocol settings, or the agreement to return to the current URL.
search settings, or to return from the question mark (?) started in URL (query part).

Object Location
assign () to load the new document.
reload () to reload the current document.
replace () with a new document to replace the current document.

History Object Properties
length back to the browser's URL history list the number of

History Object
back () to load the list of pre-history of a URL
forward () to load the list of history of the next URL
go () to load the list of history of a specific page