Home >Web Front-end >JS Tutorial >An introduction to the basics of js syntax for beginners
With the popularity of ajax, js has attracted a lot of attention. The biggest advantage of js is that it can operate on all elements on html, including creating label elements, changing element attributes, etc., which allows us to use js to achieve many dynamic effects and provide users with stronger interactivity!
Js test method
In debugging When writing Javascript scripts, if there is an error, there will be a question mark in the status bar of IE [click this question mark], or an error box will pop up. In order to find the error as soon as possible, the following are commonly used debugging methods:
1. If the object appears null or the object cannot be found, it means that the id, name or DOM is written incorrectly. Please check the line where the error is located;
2.If the error is located in a function call, it means that the function body has If there is a problem, go to the function body to find the reason.
3.In order to speed up, you can first use /* */ comments to block part of the code and check it step by step;
4.You can add alert(xxx) to see See if the variable has the expected value;
5.IE error reports are often inaccurate. For example, if line 18 is wrong, sometimes there is a problem with line 19;
6. In order to ensure that the code can run correctly, when you are really not sure whether an error will occur, use the try{}catch{} statement to do other methods. Please continue to add.
<script> try{ x=y; // Cause an error. } catch(e){ // Create local variable e. alert(e); // Prints "[object Error]". alert(e.number & 0xFFFF); // Prints 5009. alert(e.description); // Prints "'y' is undefined". } </script>
Every item is a small skill in js, but it is very practical!
1.document.write(""); Output statement
2. The comment in JS is //
3. The traditional HTML document sequence is: document->html-> (head,body)
4. The DOM order in a browser window is: window->(navigator, screen, history, location, document)
5. Get the name and value of the element in the form: document .getElementById("ID number of the element in the form").name(or value)
6. A lowercase to uppercase JS: document.getElementById("output").value = document.getElementById("input"). value.toUpperCase();
7. Value types in JS: String, Number, Boolean, Null, Object, Function
8. Convert character types into numerical types in JS: parseInt(), parseFloat()
9. Convert numbers in JS to character type: (""+variable)
10. The length of string in JS is: (length)
11. Characters in JS are connected to characters Use the + sign.
12. The comparison operators in JS are: == equal to, != not equal to, >, >=, <.>13. To declare variables in JS: var to declare
14. Judgment statement structure in JS: if(condition){}else{}
15. Loop structure in JS: for([initial expression];[condition];[upadte expression ]) {inside loop}
16. The command to terminate the loop is: break
17. Function definition in JS: function functionName([parameter],...){statement[s]}
18 .When multiple forms appear in the file, you can use document.forms[0], document.forms[1] instead.
19. Window: open the window window.open(), close a window: window. close(), window itself: self
20. Status bar setting: window.status="character";
21. Pop-up prompt message: window.alert("character");
22. Pop-up Confirmation box: window.confirm();
23. Pop up the input prompt box: window.prompt();
24. Specify the location of the currently displayed link: window.location.href="URL"
25 .Get the number of all forms in the form: document.forms.length
26. Close the output stream of the document: document.close();
27. String append connector: +=
28 .Create a document element: document.createElement(), document.createTextNode()
29. Method to get the element: document.getElementById()
30. Set the values of all text-type members in the form to empty:
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == "text"){
form.elements.value = "" ;
}
}
31. Determine whether the check button is selected in JS: document.forms[0].checkThis.checked (the checked attribute represents whether it is selected and returns TRUE or FALSE)
32 .Radio button group (the names of the radio buttons must be the same): take the length of the radio button group document.forms[0].groupName.length
33. Checked.# is also used to determine whether the radio button group is selected. ##34. The value of the drop-down list box: document.forms[0].selectName.options[n].value (n sometimes uses the name of the drop-down list box plus .selectedIndex to determine the selected value)
35. Characters Definition of string: var myString = new String("This is lightsword");
36. Convert string to uppercase: string.toUpperCase(); Convert string to lowercase: string.toLowerCase();
37 .Return the position where string 2 appears in string 1: String1.indexOf("String2")!=-1 means it is not found.
38. Get a character at the specified position in the string: StringA.charAt( 9);
39. Take out the substring of the specified starting point and end point in the string: stringA.substring(2,6);
40. Math functions: Math.PI (returns pi), Math.SQRT2( Returns the square root), Math.max(value1, value2) returns the highest value of the two numbers, Math.pow(value1,10) returns the tenth power of value1, Math.round(value1) rounding function, Math.floor (Math.random()*(n+1)) returns a random number
41. Define date variable: var today = new Date();
42. List of date functions: dateObj.getTime() gets the time , dateObj.getYear() gets the year, dateObj.getFullYear() gets the four-digit year, dateObj.getMonth() gets the month, dateObj.getDate() gets the day, dateObj.getDay() gets the date, dateObj.getHours() Get the hours, dateObj.getMinutes() gets the minutes, dateObj.getSeconds() gets the seconds, dateObj.setTime(value) sets the time, dateObj.setYear(val) sets the year, dateObj.setMonth(val) sets the month, dateObj.setDate( val) sets the day, dateObj.setDay(val) sets the day of the week, dateObj.setHours sets the hours, dateObj.setMinutes(val) sets the minutes, dateObj.setSeconds(val) sets the seconds [Note: This date and time starts from 0]
43.FRAME representation: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent represents the parent object, top represents the top object
45. The parent window that opens the child window is: opener
46. Indicates the current location: this
47. When calling a JS function in a hyperlink, use: (javascript:) to start and add the function name
48. This JS will not be executed in old browsers:
49. Quote a file-style JS:
50. Specify the HTML displayed in browsers that do not support scripts:
//去左空格; function ltrim(s){ return s.replace( /^\s*/, ""); } //去右空格; function rtrim(s){ return s.replace( /\s*$/, ""); } //左右空格; function trim(s){ return rtrim(ltrim(s)); } //检查非法字符 //str 要检查的字符 //badwords 非法字符 &|<>= function checkbadwords(str, badwords) { if (typeof (str) != "string" || typeof (badwords) != "string") { return (false); } for (i=0; i bad = badwords.charAt(i); for (j=0; j if (bad == str.charAt(j)) { return false; break; } } } return true; } //检查合法字符,限制只能输入的字符 //str 要检查的字符 //goodwords 合法字符 1234567890abcdefghijklmnopqrstuvwxyz function checkgoodwords(str, goodwords) { if (typeof (str) != "string" || typeof (goodwords) != "string") { return (false); } for (i=0; i this_str = str.charAt(i); for (j=0; j if (this_str == goodwords.charAt(j)) { break; } if(j==goodwords.length-1){ return false; } } } return true; }
//函 数 名:chkinteger //功能介绍:检查是否为数字 //参数说明:要检查的字符串 //返 回 值:false:不是 true:是 function chkinteger(checkStr) { var checkOK = "0123456789+-"; var allValid = true; for (i=0; i ch = checkStr.charAt(i); if (checkOK.indexOf(ch) == -1) { allValid = false; break; } if ((ch == '+' || ch == '-') && i>0) { allValid = false; break; } } return (allValid); } //函 数 名:chklength //功能介绍:检查字符串的长度 //参数说明:要检查的字符串 //返 回 值:字节长度值 function chklength(checkStr) { var n = 0; for (i=0; i chcode = checkStr.charCodeAt(i); if (chcode>=0 && chcode<=255) { n++; } else { n += 2; } } return (n); }
以上就是js入门基础编程的全部内容了,感谢大家的阅读!
The above is the detailed content of An introduction to the basics of js syntax for beginners. For more information, please follow other related articles on the PHP Chinese website!