Tips for using alert () functions in JavaScript _ javascript skills

Source: Internet
Author: User
This article describes how to use the alert () function in JavaScript. This article describes common pop-up, text with line breaks, use tabs, use variables, and use styles, you can refer to the following JavaScript code to use the alert () function of the window object to display a piece of text, so as to debug the program, or warn the user about the information:


The code is as follows:


// Use window object's alert () function
Window. alert ("sample text ");


This method can be simplified to directly using the alert () function:


The code is as follows:


// Simplified alert () usage
Alert ("sample text ");


To display text with line breaks, use \ n:


The code is as follows:


// Use \ n in alert ()
Alert ("The first line \ nThe second line ");

To use a tab, use \ t:

The code is as follows:


// Use \ t in alert ()
Alert ("Alex \ t50 \ t34 \ nBob \ t59 \ t38 ");

Use of variables

In addition to displaying static strings, the alert () function can also accept variables and splice the variable values with other strings:

The code is as follows:


// Use variable in alert ()
Var word = "life ";
Alert ("The magic word is:" + word + ". Don't panic .");

Unfortunately, although the alert () function can accept variables, only this string concatenation operation can be done. it is used with the console of another debugging method. on the contrary, the alert () function does not accept passing parameters to strings. The following code is used as an example:

The code is as follows:


// Try to use parameter in alert (), will fail
Var name = "Bob ";
Var years = 42;
Alert ("% s is % d years old.", name, years );


If the alert () function accepts string upload, the expected output will be "Bob is 42 years old. but actually the alert () function does not support this, so the final output result is "% s is % d years old. ".

Pop-up window style

Because the pop-up box used by the alert () function is a browser system object instead of a webpage document object () the function uses the HTML tag to define the style in the pop-up box. the HTML tag will be displayed intact. For the following code:


The code is as follows:


// Try to use HTML tags in alert (), will fail
Alert ("Test Text");

The output result is not a bold "Test Text ".

To change the alert box style, you can use either of the following methods:

1. use Unicode characters in the alert () function. The advantage of this solution is that it is very simple to implement, but its limitations are also obvious: the expressiveness of Unicode characters is very limited.

2. instead of using the alert () function, use HTML Components to simulate the pop-up box (for example, using jQuery UI Dialog ). The advantage of this solution is that the pop-up box is expressive, but its use will increase the complexity of the front-end code.

Conclusion

The alert () function can be used to warn users or debug programs. For the former, jQuery UI Dialog and other components can greatly increase the expressiveness and user experience. for the latter, the alert () pop-up box will block JavaScript code execution, therefore, the console is used in many cases. log () to debug the program is a better solution.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.