One 5 basic types
typeof keywords
Three types of forced type conversion
Date
Two if statement for statement whiledo-whileswitch-case
comparison operator
Logical operator
if for statement while do-while switch-case
Three JavaScript is a scripting language that the browser will read Execute the script code line by line when fetching the code
Four Javascript built-in string methods
Regular expressions
Five JavaScript errors-ThrowTry and Catch
throw
Six Javascript verification
E-mail verification
Seven HTML DOM operations
Operate CSS
to hide DOM nodes through CSS visibility properties
Eight event
usage js to assign events to trigger the functions
onload and onunload events
onchange input box content changes automatically trigger onfocus
onmouseover onmouseout mouse events
onmousedownonmouseup and onclick events when the focus is lost.
Nine operations DOM node HTML tags
create
delete
ten objects
Traversal properties Java reflection
11 Browser Object Model
12 JS library
13 AJAX
openmethodurlasync
asynctrue
asyncfalse
sendstring
Use Callback function
AJAX small example-search tips
server-side php file
AJAX database
server-side php file
One of the five basic types of
JavaScript variables are objects. When you declare a variable, you create a new object.
undefined
//No assignment is undefined type
var testUndefined1;
//The only value of undefined type is undefined
var testUndefined = undefined;
//The only value of null type is null
var testNull = null;
//undefined "inherited" from null
alert(testUndefined= =testNull);//true
//boolean
var testBoobean = true;
/*
Data type converted to true value converted to false value
Boolean ture false
String All non-empty strings "" (empty string)
Number Any non-zero number (including infinity) 0 and NaN
Object Any object does not exist
Undefined does not exist undefined
*/
// string
var testString = "Hello";
//number
//All JavaScript numbers are 64 bits.
// Integer numbers (without decimal point or exponential notation) can be up to 15 bits.
// The maximum number of decimal places is 17, but floating point operations are not always 100% accurate var x=0.2+0.1; //! =0.3
0108
0x1016
1.0
.1//not recommended
2.3e7
/* Arithmetic
round(double… x) //Supports rounding of decimals and negative numbers
random(double… x) // Random numbers between 0 and 1.
max(double... x).
min(double… x)
*/
//var testNull = null;
var testObject = {a:1};
/*
person=new Object();
person.firstname=“Bill”;
person.lastname=“Gates”;
person.age=56;
person.eyecolor=“blue”;
*/
//function
//As long as the function finishes running, the local variable will be deleted.
//The variable declared inside the function (using var) is a local variable, so it can only be accessed inside the function.
//The variable declared outside the function is a global variable, and all scripts and functions on the webpage can access it.
var testFunction = function(){return;};
/*
Exception:
If you assign a value to a variable that has not been declared, the variable will be automatically declared as a global variable.
This statement:
carname="Volvo";
will declare a global variable carname, even if it is executed within a function.
*/
//array
var cars=new Array();
cars[0]=“Audi”;
cars[1]=“BMW”;
cars[2]=“Volvo”;
var cars = new Array (“Audi”, “BMW”, “Volvo”);
var cars = [“Audi”, “BMW”, “Volvo”];
//javascript supports arrays of mixed types
var cars=[1,"s"];
for(i=0;i<cars.length;i++) { alert(typeof cars[i]); } //number string typeof key The word typeof variable name returns a string only valid for undefined alert(testUndefined == undefined)
通用：
alert(typeof testUndefined == “undefined”)
Three types of forced conversion
Boolean(value)
Number(value)
String(value)
Date
displayed in tenths of a second
function checkTime(i)
{
if (i<10)
{i=“0” + i}
return i
}
Comparison operator
!=
=== Congruence (value and type)
x=5;
x=5 //is true;
x= "5" // is false
1
2
3
Logical operator
&&
||
!
Variablename=(condition)?value1:value2
if, for语句, while, do-while, switch-case
//if
if (age<18) document.write(“Too young”);
if() {
//
}else if() {
//
}
else {
//
}
//for
cars=[“BMW”,“Volvo”,“Saab”,“Ford”];
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + “
”);
}
//while
while (i<5)
{
x=x + "The number is " + i + “
”;
i++;
}
//do-while
do
{
x=x + "The number is " + i + “
”;
i++;
}
while (i<5);
//switch
var day=new Date().getDay();
switch (day)
{ case 6: x="Today it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x= "Looking forward to the Weekend"; } Three JavaScript is a scripting language. The browser will execute the script code line by line when reading the code. Four Javascript built-in string method "foo".length //length of the string /* anchor() creates an HTML anchor. big() displays the string in a large font. blink() Display the blinking string. bold() displays the string in bold. charAt() returns the character at the specified position. charCodeAt() returns the Unicode code of the character at the specified position. concat() connection string. fixed() displays the string in typewriter text. fontcolor() uses the specified color to display the string. fontsize() uses the specified size to display the string.
fromCharCode() Create a string from the character code.
indexOf() Retrieve the string.
italics() displays strings in italics.
lastIndexOf() searches the string from back to front.
link() displays the string as a link.
localeCompare() compares two strings in a local specific order.
match() finds one or more regular expression matches.
replace() Replace the substring that matches the regular expression.
search() Retrieve the value that matches the regular expression.
slice() extracts a fragment of a string and returns the extracted part in a new string.
small() uses small font size to display strings.
split() splits the string into an array of strings.
strike() uses strikethrough to display the string.
sub() displays the string as a subscript.
substr() extracts the specified number of characters in the string from the starting index number.
substring() extracts the characters between two specified index numbers in a string.
sup() displays the string as a superscript.
toLocaleLowerCase() converts the string to lowercase.
toLocaleUpperCase() converts the string to uppercase.
toLowerCase() converts the string to lowercase.
toUpperCase() converts the string to uppercase.
toSource() represents the source code of the object.
toString() returns a string.
valueOf() returns the original value of a string object.
*/
Among them, the method
search() of the String object that supports regular expressions retrieves the value that matches the regular expression
match() finds one or more regular expression matches
replace() replaces the substring that matches the regular expression
split() Split the string into an array of strings
Regular expression
new RegExp(pattern, attributes); The parameter pattern is
used to store the retrieval pattern, which can be a string or a regular expression. For the syntax of regular expressions, please see http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp.
Parameter attributes
If pattern is a regular expression instead of a string, this parameter must be omitted. Attributes can be "g", "i" and "m", which are used to specify global matching, case-sensitive matching, and multi-line matching, respectively.
The following code defines a RegExp object named patt1, and its retrieval mode is-the string "e":
var patt1=new RegExp("e");
1
RegExp object has 3 methods: test(), exec() and compile().
The test() method retrieves the specified value in the string. The return value is true or false. Similar to find() method of java Regex class
The exec() method retrieves the specified value in the string. The return value is the value found. If no match is found, null is returned. Similar to the group() method of the Java Regex class
var patt1=new RegExp(“e”);
document.write(patt1.test(“The best things in life are free”));
//增加模式d
patt1.compile(“d”);
document.write(patt1.test(“The best things in life are free”));
五 JavaScript 错误 - Throw、Try 和 Catch
Six Javascript verification
E-mail verification
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,“Not a valid e-mail address!”)==false)
{email.focus();return false}
}
}
element:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
1
2
This example changes the src attribute of the element:
Operate css The most authoritative DOMcss style document http://www.w3school.com.cn/jsref/dom_obj_style.asp
The following example will change
The style of the element:
Hello World!
Hello World!
The above paragraph has been modified by a script.
Hide DOM nodes through the visibility property of cssThis is a piece of text.
Eight events use js to assign events to trigger the function HTML DOM allows you to assign events to HTML elements by using JavaScript: Example assign onclick events to button elements:onload and onunload events
onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to detect the visitor's browser type and browser version, and load the correct version of the web page based on this information.
The onload and onunload events can be used to handle cookies.
Instance
The prompt box will tell you whether your browser has cookies enabled.
onchange (the content of the input box changes, automatically triggered when the focus is lost) onfocusPlease enter English characters:
When you leave the input field, a function that converts the input text to uppercase is triggered.
Please enter English characters:
When the input field gets the focus, it will trigger a function to change the background color.
onmouseover onmouseout (mouse event)This is a paragraph.
This is another paragraph.
This is a paragraph.
This is another paragraph.
The DOM needs to be clear about the element you need to delete and its parent element.
This is the common solution: find the child element you wish to delete, and then use its parentNode property to find the parent element:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
Ten Object
JavaScript is an object-oriented language, but JavaScript does not use classes.
In JavaScript, classes are not created, and objects are not created by classes (just like in other object-oriented languages).
JavaScript is based on prototypes, not classes.
//Constructor
Traverse properties (Java reflection!)for (x in person)
{
txt=txt + person[x];
}
document.getElementById(“demo”).innerHTML=txt;
}
十一 Browser Object Model
window
screen
location
history
navigator
popupAlert
Timing
Cookies
Twelve JS library
please refer to jQuery, AngularJS, React tutorial
Now the mainstream is slowly shifting from jQuery to AngularJS and React
十三 AJAX
asynchronous javascript and xml
In 2005, Google proposed that apps provide search suggestions when searching
Event-driven function loadXMLDoc()
XMLHttpRequest object()
xmlhttp=new XMLHttpRequest();
Obtain the string returned by the server through the xmlhttp.responseText property
eval and convert the string into an object array json = eval(json);
Obtain the response data in XML form through xmlhttp.responseXML.
open(method,url,async)
specifies the request type, URL, and whether to process the request asynchronously.
method: the type of request; GET or POST. When sending user input containing unknown characters, POST is more stable and reliable than GET
url: The location of the file on the server. Usually php or asp. The path is relative to the root directory of the website.
async: true (asynchronous) or false (synchronous)
async=true
must be true asynchronous.
Through AJAX, JavaScript does not need to wait for the server's response, but:
execute other scripts
while waiting for the server's response, and process the response when the response is ready
When using async=true, please specify the function to be executed when the response is in the ready state in the onreadystatechange event:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState4 && xmlhttp.status200)
{ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); Whenever the readyState changes, Will trigger the onreadystatechange event. The readyState property stores the status information of the XMLHttpRequest.
0: The request has not been initialized
1: The server connection has been established
2: The request has been received
3: The request is being processed
4: The request has been completed and the response is ready
async=false
Async = false
If you need to use async=false, please change the third parameter in the open() method to false:
xmlhttp.open("GET","test1.txt",false);
We do not recommend using it async=false, but it is also possible for some small requests.
Remember that JavaScript will not continue execution until the server response is ready. If the server is busy or slow, the application will hang or stop.
Note: When you use async=false, please do not write the onreadystatechange function-put the code after the send() statement:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send() ;
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
send(string)
sends the request to the server.
string: only used for POST requests
xmlhttp.open(“POST”,“ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);
Using the Callback function
The function call should include the URL and the task to be executed when the onreadystatechange event occurs (each call may be different):
function myFunction()
{
loadXMLDoc(
“/ajax/test1.txt”,
function()
{
if (xmlhttp.readyState4 && xmlhttp.status200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
);
}
Let AJAX change this text
Suggest:
“
Please type letters (A-Z) in the input box below:
Last name:Suggest:
服务器端 php文件 <?php // 用名字来填充数组 $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky";//Get the q parameter from the URL
q = q=q=_GET[“q”];
//If q is greater than 0, find all hints in the array
if (strlen($q)> 0)
{ hint = " "; for (hint=""; for(
hint="";for(i=0; i < c o u n t ( i<count( i<count(a); KaTeX parse error: Expected '}', got 'EOF' at end of input: …if (strtolower(q)strtolower(substr( a [ a[ a[i],0,strlen(KaTeX parse error: Expected '}', got 'EOF' at end of input: … { if (hint"")
{
h i n t = hint= hint=a[$i];
}
else
{
h i n t = hint= hint=hint." , ". a [ a[ a[i];
}
}
}
}
// If no suggestion is found, set the output to "no suggestion"
// otherwise set to the correct value
if ($hint == "")
{ $response="no suggestion"; } else { response = response=
response=hint;
}
//Output response
echo $response;
?>
AJAX database
set conn=Server.CreateObject(“ADODB.Connection”)
conn.Provider=“Microsoft.Jet.OLEDB.4.0”
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open sql,conn
response.write("
")do until rs.EOF
for each x in rs.Fields
response.write("”)
response.write("”)
next
rs.MoveNext
loop
response.write("
| " & x.name & “ | " & x.value & “ |
%>