JavaScript is an object- and event-driven scripting language with security features.
Common uses of JavaScript:
(1) You can write directly to the HTML output stream
<script>
document.write("<h1>标题</h1>");
document.write("<p>这是一个 <strong>段落</strong>。</p>");
</script>
(2) Respond to the incident
<button type="button" onclick="alert('欢迎!')">点击我!</button>
(3) Change the content of HTML elements
<p id="demo">
可以改变 HTML 元素的内容
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
(4) Change the HTML image
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
(5) Change the style of HTML elements
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
(6) Verify input
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
Writing norms
1) The file encoding is unified to utf-8
2) After the writing process, there must be a semicolon at the end of each line of code;
3) Library introduction: In principle, only the jQuery library is introduced
4) Variable naming: link each word with underscore, type_variable name
- s: Represents a character string.
- n: Represents a number.
- b: Represents logic.
- a: Represents an array.
- r: Represents a regular expression.
- f: Represents a function.
- o: Indicates other objects not mentioned above,
Variables are declared at the top of the scope
5) Constants: all capitals, separated by underscores such as website URL, domain, image directory path, directory path used by js and css
6) Class naming: initial capitals, camel case naming. Such as Comment;
7) Function naming: first letter lowercase camel case name. Such as getUserName();
8) Private methods in the class are marked with an underscore + method name. Private methods cannot be called outside the class.
8) Semantic naming, use English words or their abbreviations as much as possible;
9) The code structure is clear, and appropriate comments are added. Improve the reuse rate of functions;
(1) Function descriptions of large functional blocks (classes, functions)
(2) Single-line comments (placed at the end of the line)
10) Pay attention to separation from html, reduce reflow, and focus on performance.
11) The custom class in Dom, in the form of j_classname
12) Put the external JavaScript file at the bottom of the HTML, at the front
13) Optimize the loop (If there is a Dom operation in the loop body, the Dom operation should be added to the outside of the loop; in the same scope, Dom chooses to assign a value to a local variable.)
14) Use a simpler format to write innerscript
15) Always check the data.
Check all the data entered by your method, on the one hand for safety and on the other hand for usability.
16) Avoid mixing with other technologies, js does not directly control the detailed settings of css, but can control the classname
17) Avoid global variables (App.dialog. in the class name space)
global variables and global functions are very bad. Because all the JavaScript contained in a page runs in the same domain. So if you declare global variables or global functions in your code, the variables and functions with the same name in the script file loaded in the following code will overwrite yours.
18) When declaring variables, always use var
. Variables in JavaScript may be global or local. It is more intuitive to declare with var.
19) Avoid using the eval() method (ajax data request verification)
The eval() method in JavaScript is a method to calculate/run any code as an object at runtime. In fact, due to safety reasons, eval() should not be used in most cases. There is always a more "correct" way to accomplish the same job.
20) Don’t be lazy and omit "and {}
21) Use square brackets instead of dots when obtaining object properties.
If you use dot notation to obtain the properties of the object, the property name is hard-coded and cannot be changed at runtime; while square brackets are used, JavaScript will find the square brackets The value is then calculated to obtain the attribute name. That is to say, with square brackets, the attribute name can be hard-coded, or it can be a variable or function return value.