Post JavaScript (2)

1Do not think that struts is out of date, or blindly follow JSF and the updated MVC framework.
Is the best MVC Framework, especially later in combination with spring, Hibernate (or ibatis), so that the struts application has been further developed. Maybe you
I think that webwork2, springmvc, or JSF is better and more practical, and it does not matter. In fact, as long as it applies to you or your company, it will be enough.

2Do you know the typeof and instanceof operations in JavaScript?
In terms of knowledge, typeof returns the object type, such as string, number, and object. instanceof judges whether an object is a class.
For example:
VaR arr = new array ();
VaR type = typeof (ARR); // returns the object
VaR flag = arr instanceof array; // return true
VaR flag2 = arr instanceof object; // return true;
In actual use, you will find that instanceof is more powerful. Of course, typeof is very convenient to use many times, but it is not suitable for complicated scenarios, instanceof can be used to conveniently identify custom objects and objects with complex inheritance relationships.

3Although you may know the usage of typeof in Javascript, if you cannot do the following, it means that you do not have enough understanding of typeof. For example:
VaR;
VaR rs = typeof (a); // What is the RS value?
(A) The answer to object (B) variable (c) undefined (d) string (e) null (f) is incorrect.
 
If you select a, you still have some knowledge about Js. If you select B, it is basically a random guess. If you select D, nothing can be said, if you select e, it indicates that you have some knowledge about Java and JavaScript.
The selection of F is incorrect. The answer is C. Remember that in Javascript, if a variable is not initialized, the type of the variable is undefined.

4Maybe you have been complaining about the absence of lists, Hasse tables, stacks, queues, and other data structures in Javascript. If you are complaining, it is not your fault. After all, it includes myself, we do not know much about Js. In JS, the array object itself fully supports the above data structures, for example:
VaR list = new array (); // list
List [0] = "";
List [2, 100] = "B ";
VaR map = new array (); // Hasse table
Map ["001"] = "";
Map ["username"] = "zhangsan ";
VaR stack = new array (); // stack, that is, back-to-first-out
Stack. Push ("");
Stack. Pop ();
VaR queue = new array (); // queue, that is, first-in-first-out
Queue. unshift ("");
Queue. Shift ();
Obviously, JavaScript is very powerful. The key is that we know too little about it. For JavaScript operations on arrays, you can also refer to JavaScript operations on arrays.

5As a web developer, we can't expect the artist to split the graph for us and generate html
And then convert the HTML files to JSP, ASP, or PHP files. I always think that splitting should or is best done by our programmers, because
What is actually done for the artist is applied to our products or projects, and the specific products and projects need to be entered in the text and context, where is
Automatic scaling is required, and there are strict requirements on where the size must be guaranteed, in particular, if we use template technologies like sitemesh in our products or projects
We should do the graph work by ourselves. This does not mean that the artist does not need to understand HTML, CSS, or other technologies. It does not mean that the image cut by the artist does not meet our requirements. We know that an effect
There can be n cut methods, but there is usually only one of the most suitable cut methods to meet the actual needs, and the cut method is generally not clear to the artist, developers are also not clear, only developers
People who know how to cut the chart can find the most appropriate splitting method, and such talents are very scarce!

6Don't be too obsessed with Ajax technology, or be too keen on the trendy word "Web2.0", not to say that something is stuck with Ajax or
Web can be exploited or beneficial to our actual development. If you are a public website, pay attention to the improper Ajax use, this will significantly increase the information indexed by search engines.
However, Ajax or flex2 technology is quite good for user experience. Therefore, whether Ajax or other technologies are used depends on whether the promotion of Your Solutions works.
One point is to see if it actually improves our applications.

7For the Ajax post submission method, you may have some questions, such as whether the POST method only needs to be specified during open
The method is fine. Why do I put big data behind the URL instead of being completely passed in? Why does my background use request. getparamter similar to JSP?
The method does not receive data. Let's take an example to see how Ajax sends/receives big data:

 
1) Send. jsp: (the Ajax class library of the Javascript open-source framework jsjava is used in the example above. This class library applies to IE and Firefox
XMLHttpRequest and other objects are encapsulated for ease of use. Unlike prototype. JS, the uploaded data is subject to urlencode encoding by default)

VaR ajaxrequest = new ajaxrequest ();
Ajaxrequest. setrequestmethod ("Post ");
Ajaxrequest. setrequesturl ("ajaxresponse. jsp ");
Ajaxrequest. setasync (true );
Ajaxrequest. setmethodonsuccess (onsuccess, [ajaxrequest]);
Ajaxrequest. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded; charset = UTF-8 ");
Ajaxrequest. Send ("content = This is a thousand words document... omitted here ");

Note: Set the sending method to post, set the content type of the header information to application/X-WWW-form-urlencoded, and set charset to check whether content encoding is required, in addition, big data is placed in send, and remember that big data is not placed in URL parameters.

2) receive. jsp

Inputstream stream = request. getinputstream ();
Inputstreamreader ISR = new inputstreamreader (Stream );
Bufferedreader BR = new bufferedreader (ISR );
String STR = Br. Readline ();
System. Out. println (STR );
BR. Close ();

You need to know that the data submitted in Ajax post mode can be obtained on the server side if it is JSP rather than simply using getparameter. It needs to be retrieved from the input stream, this is similar to uploading attachments. Of course, you must pay attention to encoding and decoding.

8In the interface, we often use the setTimeout method to implement scheduled or asynchronous operations, for example:
SetTimeout (myfunc, 2000); // execute the myfunc Function two seconds later.
However, note that the setTimeout method does not block the execution of the subsequent JS Code logic, for example:
<SCRIPT>
VaR A = 8;
SetTimeout (myfunc, 3000 );
Document. Write ("Wait ...");
</SCRIPT>
In the above Code, document. write ("Wait... "); the logic will not be executed three seconds later, but will be executed immediately. In fact, most developers may know this, but if you do not pay attention to it, it is easy to make the following errors, as shown in the following code:
VaR ajax2hasexecuted = false;
VaR ajaxrequest1;
Function ajax1func (){
If (! Ajax2hasexecuted ){
SetTimeout (ajax1func, 200 );
}
VaR text = ajaxrequest1.getresponsetext ();
...
}
VaR ajaxrequest2;
Function ajax2func (){
VaR text = ajaxrequest2.getresponsetext ();
...
Ajax2hasexecuted = true;
}
 
The code above is that two Ajax asynchronous requests are sent at the same time on a page, each with two corresponding receiving operations, and the business logic requires that these two operations should be sequential, the first receiving operation,
Processing can only be performed after the second receiving operation is completed. Therefore, the setTimeout method is used in the first operation. The intention is to determine the second operation at the beginning.
Whether or not the operation has been completed. If the operation has not been completed, wait 200 milliseconds and re-execute the second operation. Because setTimeout cannot organize the subsequent logic to continue the execution
Whether or not the second operation is completed, the first operation will continue to be executed, resulting in business errors. The solution is either to add else after if or
Return directly after setTimeout, for example:
If (! Ajax2hasexecuted ){
SetTimeout (ajax1func, 200 );
Return;
}

9The window. Open and window. showmodaldialog methods are believed to have been used many times, but there are always problems in one way or another. The main problems are as follows:
1) The showmodaldialog function name is often written incorrectly. For example, the function name is often written as showmodeldialog, which makes it impossible to open a window.
2) controlling the properties of window opening, such as size, scroll bar, menu, and status bar is a common situation, however, we often mix the names of these two open methods and the delimiters between them to make the execution of the properties incorrect. For example, let's take the following example, a window with a width of 200 and a height of 300 is required. Which of the following methods are correct?
(A) window. Open ("about: blank", "", "width = 200, Height = 300 ");
(B) window. Open ("about: blank", "", "width: 200, height: 300 ");
(C) window. Open ("about: blank", "", "width = 200; Height = 300 ");
(D) window. Open ("about: blank", "", "width: 200; Height: 300 ");
(E) window. showmodaldialog ("about: blank", "", "dialogwidth: 200px; dialogheight: 300px ");
(F) window. showmodaldialog ("about: blank", "", "dialogwidth = 200px; dialogheight = 300px ");
(G) window. showmodaldialog ("about: blank", "", "dialogwidth: 200; dialogheight: 300 ");
No more options will be written. The correct answer is A and E. We need to remember the following points through the above questions:

• The delimiter between window. Open control properties is comma (,), and the attribute and value are connected by an equal sign (= ).
• The separator between window. showmodaldialog control properties is semicolon (;), and the properties are connected by colon (:).
• Window. the length and width of the Open Control attribute can be directly written into numbers or measurements, such as PX, but for Windows. the length and width of showmodaldialog must contain PX; otherwise, the size is invalid, which is very important.

10For varchar fields in the database, the length is limited. For example, for the varchar2 field in Oracle10g
The maximum length is 4000 characters. in MySQL, The varchar can be up to 255 characters. Note that the restricted value here is the single-byte character value, and the Chinese character is a double-byte character. Therefore
The varchar2 field can store a maximum of 2000 Chinese characters. This problem is caused by Form submission verification during web development.
The content may be a combination of Chinese characters and English characters. Therefore, to determine the length of the input string, you must note that the JavaScript method to determine the length of a string is:
VaR STR = "abcdef ";
VaR length = Str. length;
However, this attribute of a string is used to calculate the length of an independent character. For example, a Chinese character is calculated as 1 in length. Therefore, it is calculated as follows:
VaR STR = "hello ";
VaR length = Str. length;
The length is 2 rather than 4. How can we calculate the actual length of a string containing Chinese characters or double-byte characters? You can quickly find the search method by replacing the double-byte characters with two single-byte characters,
Then calculate the length of the replaced character. Of course, jsjava provides support for calculating the actual length of the double byte string. You can view the stringutils class.

11If you cannot silently write the values of commonly used colors in English and the hexadecimal value in tabulation, it means that your basic HTML skills still need to be practiced. For example
White is white, hexadecimal is ffffff, red is red, hexadecimal is ff0000, blue is blue, hexadecimal is 0000ff, purple is purple, orange
It's orange. The gray colors commonly used in Web pages are eeeee, or the efef is lighter. Of course, this doesn't mean that you need to carry a lot of colors and hexadecimal values, but Master some common,
It is necessary.

12, JavaScript supports multi-dimensional arrays, but no constructor can directly generate multi-dimensional arrays. For example, one-dimensional arrays can be generated through arrays. For example:
VaR arr = new array (12 );
Multi-dimensional array generation, although not supported by constructor, can be implemented in another way, for example, to implement a 12x5 Two-dimensional array:
VaR arr = new array (12 );
For (VAR I = 0; I <arr. length; I ++ ){
Arr [I] = new array (5 );
}
In addition, you can directly use the standard class multidimensionarrayutils of jsjava to generate 2D and 3D arrays.

13For the IMG tag, we know that it has an align attribute. This align controls the relationship between the image and the adjacent text
According to msdn, the default value of this attribute is left, but it seems that this is not the case from the actual display effect. We can compare it together and assign the value of align
In the left case, if the default value is left, do not write align and assign align to left. The effect should be the same. Let's take a look:
jsjava is the best JavaScript class library solution and Interface Application Development Support Framework!
The effect is as follows:

Let's look at the addition of align = left:
_ Fcksavedurl = "http://jsjava.sourceforge.net/images/logo.gif ""
_ Fcksavedurl = "http://jsjava.sourceforge.net/images/logo.gif ""
_ Fcksavedurl = "http://jsjava.sourceforge.net/images/logo.gif ""
_ Fcksavedurl = "http://jsjava.sourceforge.net/images/logo.gif ""
Align = "Left"> jsjava is the best JavaScript class library solution and Interface Application Development Support Framework!
As follows:

According to the actual results, the default align of IMG is not left. It seems that it should be bottom, and the above situation has been tested in ie6.0 and firefox2.0. It seems that the msdn statement is not credible, or do you understand it wrong? You can take a look at the description in msdn: http://msdn2.microsoft.com/en-us/library/ms533066.aspx

14You can add events in the following ways:
1) Add the onload event to the <body/> label, that is:
<Body onload = "myfunc ()"...>
2) define window. onload in any place where javascript can be executed, that is:
Window. onload = myfunc;
3) defined in the <script/> label, namely:
<Script for = Window event = onload>
Myfunc ();
</SCRIPT>
4) Add the event to the event queue:
Window. attachevent ("onLoad", myfunc) in IE)
Window. addeventlistener ("LOAD", myfunc, false) in Firefox)
We recommend that you use the fourth method, because only the fourth method can avoid overwriting other similar events. The fourth method is to add the event to the queue of similar events, will not cover other similar things
This requires special attention in the Web development process. In particular, we often need to define onload events when we define some interface frameworks or build them. In this case, it is best to use the fourth method.
Because you may want to use the onload logic on the page by referencing the interface framework and the created users. Of course, you can use the fourth method without any problems, but as a responsible interface expert, yes
We should not think like this. We should be strict with ourselves and be generous with others.

15Not only does the body (or window) have an onload event, <IFRAME/> can also define an onload event, and can also define an onload event. For example, after an image is loaded, display successfully Loaded Words in the status bar of window:

Of course, for IMG, you 'd better study the usage of various events and attributes in depth. You will find that there are so many things you did not know, of course, there must be many developers, I have already studied this, but most developers still lack the knowledge.

16, How to add a segment of reserved formatted text in HTML, I believe you will think of the <PRE> </PRE> label, for example:
<PRE>
This is a formatted text,
The text in it is output in the format directly.
</PRE>
The result is as follows:
This is a formatted text,
The text in it is output in the format directly.

In general, the PRE Tag is enough, but the disadvantage of the PRE Tag is that it cannot output the HTML tag as is, but parse it. For example:
<PRE>
This is a formatted text. The text in <font color = "red"> </font> is directly output in <br> format.
</PRE>
The result is as follows:
This is a formatted text.
Format output

So how can we output HTML content as is? In fact, there are <XMP/> tags in the HTML specification to achieve this effect, for example:
<XMP>
This is a formatted text. The text in <font color = "red"> </font> is directly output in <br> format.
</XMP>
The result is as follows:
This is a formatted text. The text in <font color = "red"> </font> is directly output in <br> format.

17How to obtain the dimensions and coordinates of an object area is a common problem in the interface development process.
The getboundingclientrect method is used to obtain the region of the object and obtain the dimensions and coordinates of the region. However, this method can only be used in IE. Of course, Firefox also has a class
Similar method, I believe most developers do not know, this method is getboxobjectfor, in order not to worry about cross-browser, you can directly download jsjava, use
The getelementrectangle static method of the documentutils class, for example:
<SCRIPT src = "jsjava. js"> </SCRIPT>
<SCRIPT>
VaR elemobj = Document. getelementbyid ("div1"); // div1 is the ID of a div
VaR rect = documentutils. getelementrectangle (elemobj); // The returned rect is the rectangle object in jsjava.
VaR x = rect. getx ();
Var y = rect. Gety ();
VaR width = rect. getwidth ();
VaR Height = rect. getheight ();
</SCRIPT>
Jsjava classes and methods have been tested by IE and Firefox and are easy to use.

18In the interface, calculating and understanding the object location is troublesome, such as clientheight,
Clienttop, scrollheight, scrolltop, offsetheight, and offsettop. How to differentiate them and what are their meanings?
Deep understanding of location attributes helps you understand the nature of HTML interface layout and is the only way to become a master. Here is a brief introduction:
1) clientheight indicates the screen height of the object area. It does not contain the border size of the area, but includes the size of padding.
2) clienttop, half of the difference between offsetheight and clientheight in the object area
3) scrollheight indicates the distance between the bottom of the object area and the top of the area.
4) scrolltop indicates the height of the rolling part of the object area, that is, the distance between the top of the area and the top of the visible part of the area
5) offsetheight indicates the screen height of the object area, including the border and padding sizes.
6) offsettop, indicating the distance between the object area and the previous object height
The above explanation is somewhat confusing if you have no practical experience. It doesn't matter. I will give you one:

Therefore, scrollheight is not always greater than or equal to clientheight. In fact, some developers believe that scrollheight is not always greater than or equal to clientheight.
It is the same as clientheight. scrollheight = clientheight + scrolltop when there is a scroll. This recognition is incorrect or inaccurate.
.
The above figure's HTML source code is:
<SCRIPT>
Function pos (){
Debug (test1.clientheight );
Debug (test1.clienttop );
Debug (test1.scrollheight );
Debug (test1.scrolltop );
Debug (test1.offsetheight );
Debug (test1.offsettop );
Debug ("--------------");
Debug (test2.clientheight );
Debug (test2.clienttop );
Debug (test2.scrollheight );
Debug (test2.scrolltop );
Debug (test2.offsetheight );
Debug (test2.offsettop );
Debug ("--------------");
}
Function debug (STR ){
Info. Value + = STR + "/N ";
}
</SCRIPT>
<Body onclick = "pos ()">
<Div id = "test1" style = "padding: 5; border-width: 15; border-color: black; border-

Style: solid; Background-color: red; Height: 100; width: 200 "> area 1, Height 100 </div>
<Span id = "Test2" style = "background-color: Blue; Height: 50; width: 200"> area 2, height 50 </span>
<Div id = "test4" style = "height: 100; width: 200; Background-color: Green"> area 4, Height 100 </div>
<Textarea id = "info" Cols = "50" rows = "20"> </textarea>
<Body>
The result is as follows:
70
15
28
0
100
15
--------------
50
0
18
0
50
115
--------------

19Many people on the Internet have asked how to convert an RGB color to a hexadecimal color in HTML. I have seen some implementations of Some netizens, such
Define an array with a length of 256 and initialize it according to the hexadecimal rule. Some other features of HTML tags are also used, but there are some limitations, in fact, we only need to understand RGB colors.
The basic knowledge of colors is easy to convert. RGB represents three basic colors: Red, green, and blue, each base color can be defined as 256 from light to deep.
Color. In this way, RGB can represent the 256x256x256 colors. For hexadecimal colors, hexadecimal numbers are used to represent RGB. For example, ffffff represents RGB.
(256,256,256), the conversion is also very simple, that is, the conversion between the decimal and hexadecimal notation, for example, for RGB color RGB (132,216, 12),
The hexadecimal color representation is calculated as follows:
132 convert to a hexadecimal number 84
216 convert to a hexadecimal number to D8
12 to a hexadecimal number 0c
Therefore, the hexadecimal color of RGB (132,216, 12) is 84d80c. Let's take a look at the effects of the two:
<Div style = "background-color: RGB (132,216, 12); width: 50; Height: 50"> </div>
<Br>
<Div style = "background-color: # 84d80c; width: 50; Height: 50"> </div>
Shown:

Does JavaScript provide the conversion between the decimal number and the hexadecimal number? JavaScript does not provide a built-in function for this conversion, but you can download jsjava, use the static method of the integer class: tohexstring method, for example
<SCRIPT src = "jsjava. js"> </SCRIPT>
<SCRIPT>
VaR hex = integer. tohexstring (253 );
Document. Write ("<br>" + HEX); // display as FD
</SCRIPT>
Or you can directly use the jsjava color object:
VaR color = new color (132,216, 12 );
VaR hex = color. tohexvalue (); // The value of hex is 84d80c.

20In the web development process, the interaction between the original page and the pop-up page is often encountered. If it is just a simple variable transfer, it is not difficult
But we often encounter a practical scenario: for example, there is a user list page, click the "new" button to bring up a page to create a user, after entering the information, submit the form and close the window.
The page lists the newly created users. Some developers prefer to use the following methods:
Userform. Submit ();
Opener. Location. Reload (); // or some developers prefer to use opener. Location = List page request URL.
Window. Close ();
The above code has a very obvious problem, that is, if the form is submitted to the background, the background is still processing, and at this time the original page has been overloaded, after new users are stored in the background, the list page is not displayed.
In progress, of course, refresh will be available, but it will not achieve the effect we want. The following describes a more secure method (I will not describe the Ajax method ):
First, submit the form, return to the pop-up page, or another page, and then make a judgment on the page. If the background information is processed successfully, reload the original page and close the window.
Of course, some developers say that the previous method has never found any problems in the project. I will tell you that it is because you are lucky and the background processing speed is very fast, when the list is reloaded, the backend processing is finished, but once the backend processing is slow, the customer should find trouble.

21The interface problem is the current web development field (do not think it is only development of ASP, JSP, or PHP, etc.
ASP. NET and J2EE) is one of the most difficult problems. Most developers do not know how to solve interface problems, and often encounter some incredible problems. Actually, I told you
You, there are some interface problems that are really strange, but don't go into the cause of the problem because of this. During my years of development, I encountered many strange interface problems, including
Others asked me to solve the problem, but I found that behind these strange problems, most of our developers have some problems in terms of interface capabilities and literacy, for example, some people are too careless, while others
There is a lack of basic interface knowledge and so on. It is not a purpose to become an interface expert. Cultivating the ability and literacy to solve interface problems is the most critical.

22To add the onclick operation to the connection tag. For example:
<A href = "#" onclick = "window. Open ('yoururl')"> personnel management </a>
In general, this method is no problem, but if the page content is relatively long and the upper and lower scroll bars appear, this method will cause some problems, mainly due to href, we know what the anchor
The role is to let the page locate and move it to the anchor. The above code developer's intent is mainly to do not execute the link href when you want to click it, so write a #, but # For the scrolling page, will be executed
In addition to onclick, mobile positioning occurs on the page, and the user experience is poor. There are several solutions:
<A href = "javascript: void 0" onclick = "window. Open ('yoururl')"> personnel management </a>
<A href = "javascript: Return" onclick = "window. Open ('yoururl')"> personnel management </a>
We recommend that you use the void 0 method because the return method sometimes affects the propagation of click events, especially when the return is false.

23In the Window XP system, we often wonder why we use JavaScript to control the window size and position operations, but IE does not fully support them. For example, the following code:
<SCRIPT>
Window. Open ("about: blank", "", "width = 10000, Height = 15000 ");
</SCRIPT>
In principle, a large window named "wxx15000" should be displayed. In fact, what ie gives us is a window of the same size as the browser. Why? Actually, we understand micro
Soft. If this restriction is not applied, the system may crash due to a large amount of such code. Of course, Microsoft's IE also provides the configuration entry to check whether the configuration is restricted. The specific entry is:

For general websites, It is disabled by default. You only need to open it.

24, The form data is usually submitted in post mode on our page. After submission, if we refresh the page, ie will usually prompt the information shown in:

To avoid this kind of prompt, you can program the solution, that is, do not execute the reload method of location on the window from other windows after the form is submitted. It is best to use
Location href attribute or assign, replace, and other methods). In the advanced options of IE, there is also an entry that can be used to set whether to provide a prompt message when the Redirection form is submitted.
But after the settings, there is no effect, so there is no more introduction.

25The layout of Div + CSS is very popular now. It is true that the flexibility of the interface framework is greatly increased. We can say that all la s can come out,
Currently, the lightweight portal framework of Ajax basically adopts the layout of Div + CSS, but it should not be used excessively or in any scenarios. For example, for
For medium and large projects, you should not only consider the layout, but also consider many things of the interface framework. In this case, it is better to use templates, in fact, div + CSS is
The layout, and the template is a "Framework", the two can be used in combination, as to how much can be combined, it depends on your practical skills.

26As a project manager, product manager, or technical director, you should pay attention to interface issues. Think about our current developers,
The background logic can be quickly developed, but the interface display is too slow, the interface effect and ease of use are not in place, and the interface has been adjusted, the time required is usually not later than that for background logical development.
I believe you have seen a small amount of time. In order to debug a strange problem on the interface, it usually takes one or two days, if we do not pay attention to the learning and cultivation of interface technologies
How far can I go.

 
I also summarized some of my experiences in web development, especially in interface development. These experiences are just a bit of experience, but not necessarily true. Many things still need
I want you to practice, test, and summarize these things on your own. If I write these things for you, even if they are just a little useful, I am very pleased. what else I need to say is, that is, we should gradually step out of Master worship.
Don't talk about agile development, eXtreme Programming, etc. In the face of foreign masters, we are more important to learn their spirit and quality, rather than being a loyal evangelist, for these
We have the spirit and quality of the Chinese nation for a long time, but we have little pity, but it does not mean that we have no hope, let's take a look at the scientific community and the national elites in various industries.
The spirit in the child is worthy of our reverence and learning.