I. JavaScript Advanced
1.js function
(1)stay java Internal Definition Method
public void/int Method name(parameter list) {
//Method body and return value;
}
(2)stay js There are three ways to define functions
//First: Use the keyword function method name (parameter list) {method body and return value}
* Note 1: No need to write type for parameter list. var)，Write parameter names directly
* Note 2: Return value, according to actual needs may or may not have
* Code
function test1() {
alert("123456");
}
//test1();
//Achieve the sum of two numbers
function add1(a,b) {
var sum = a+b;
return sum;
}
alert(add1(2,3));
//The second is anonymous function, using keyword function (parameter list) {method body and return value;}
* Code
//The second way of definition
var test1 = function(a,b) {
return a+b;
}
//Calling function
alert(test1(3,4));
//Third: Dynamic functions (method bodies and return values, including parameter lists, are passed in through parameters)
* Use js Built-in objects inside new Function("parameter list","Method body and return value")
* Code
//The third way of definition
var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
//Calling function
alert(test2(5,6));
2. Overload of functions of JS
(1)stay java There are overloads, method names are the same, parameter lists are different
(2)js Is there any overload of functions?
//First, there is no overload in js
//Second, you can use the arguments array in the js function to simulate the effect of overloading
(3)Effect of simulated overload
* stay js There's an array in it. arguments，Save the passed parameters and use this array to simulate the effect of overloading
* Code
//Effect of simulated overload
//There is an array arguments in the js function that holds the parameters passed in.
function add1() {
//alert(arguments.length);
//foreach
/*for(var i=0;i<arguments.length;i++) {
alert(arguments[i]);
}*/
//Simulate the effect of overloading (there are several parameters to add up these parameters)
var sum = 0;
for(var i=0;i<arguments.length;i++) {
sum += arguments[i];
}
return sum;
}
//call
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));
3.js events
(1)What is an event: in html The event call can be triggered within the element of js Functions inside
(2)stay html How to use events on labels
* There are three ways
* First: Call using event attributes js Method
** Code
<input type="button" value="The first way" onclick="add1();"/>
* Second: First, get the tag to bind, and use the attributes of the event
** Code
//The second way to bind events
document.getElementById("buttonid").onclick = add1;
* Third: First, get the label to bind and write it js Code
** Code
document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");
};
4. Common events in JS
(1)onload Event and onclick Event
* onload: html Pages trigger events when loaded, calling the response's js Method
** <body onload="test1();">
* onclick: Mouse click event
** <input type="text" onclick="test2();"/>
(2)onfocus Event and onblur Event
* onfocus: Focus of acquisition
* onblur: Lose focus
(3)onmouseover Mouse is moved over an element
(4)onmouseout Mouse away from an element
(5)onkeypress: Click on a key on the keyboard to invoke the method
* <input type="text" id="textid1" onkeypress="key1(event);"/>
* function key1(obj) {
//alert(obj.keyCode);
//If you click the return key on the keyboard, call method 13
if(obj.keyCode==13) {
alert("key1");
}
}
5.js dom object
(1) What dom: document object model: document object model
* Documents: Refers to tagged documents (html, xml)
* Objects: There are attributes and methods in objects
** Manipulate tagged documents using attributes and methods within objects provided in dom
* To operate with dom object tagged documents, you first need to parse tagged documents (html for example)
** html contains tags, attributes, text content
(2) parsing html using dom
* Parsing process: allocate a tree structure in memory according to the hierarchical structure of html
* document object, representing the entire document
* element object, representing label
* Attribute object
* Text object
* Node node objects, which are the parent objects of these objects, can't find the method you want to use. Go to Node and find it.
(3) Introduction to DHTML
* It's not a technology. It's the abbreviation of many technologies.
* Included technologies:
** html: encapsulating data
** css: Modify the data style with attributes and attribute values
** ECMAScript: Statements and Grammar
** DOM: Operating on Markup Documents
6.document object
(1)document Objects represent the entire document
(2)Method
//First: write(), which outputs content to the page and can output html code
* document.write("aa");
document.write("<hr/>");
//The second: getElementById(): Get the tag object and get it by the id value of the tag
* var input1 = document.getElementById("textid");
document.write(input1.value);
//The third: getElementsByName(): Returns an array based on the tag's name attribute that is worth the tag object
* //getElementsByName()
var inputs1 = document.getElementsByName("name1");
//alert(inputs1.length);
//Get the value value in each input
for(var i=0;i<inputs1.length;i++) {
var input1 = inputs1[i];
//Get the value value
alert(input1.value);
}
* If there is only one label, use getElementsByName It also returns an array without traversal and uses the subscript of the array to get the value directly.
* var inputs2 = document.getElementsByName("name2");
//alert(inputs2.length);
alert(inputs2[0].value);
//Fourth: getElementsByTagName(): Get the label object by the name of the label and return the array
* var inputs3 = document.getElementsByTagName("input");
//alert(inputs3.length);
//foreach
for(var i=0;i<inputs3.length;i++) {
var input3 = inputs3[i];
//Get the value of the label
alert(input3.value);
}
* If there is only one label, use getElementsByTagName It also returns an array without traversal and uses the subscript of the array to get the value directly.
var arr = document.getElementsByTagName("input");
alert(arr[0].value);
7.innerHTML attributes
(1) innerHTML attributes are not attributes in the dom
(2) What functions are implemented?
First, get the text content in the label
** var span1 = document.getElementById("spanid");
alert(span1.innerHTML);
Second, set the content inside the tag (you can write html code)
** var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";
8. Exercise: Generating Tables Dynamically
(1) Implementation steps
* First create the page with two normal input items and buttons (with events)
* Click the Generation button to generate the corresponding table
** Get the input rows and columns first
** Formulation of tables based on rows and columns
*** Circulating line <tr>
*** Cyclic cells within rows < td >
(2) Code
function add1() {
var hang = document.getElementById("hid").value;
var lie = document.getElementById("lid").value;
var tab = "<table border='1' cellpadding='10'>";
for(var i=1;i<=hang;i++) {
tab += "<tr>";
for(var j=1;j<=lie;j++) {
tab += "<td>aaaaa</td>";
}
tab += "</tr>";
}
tab += "</table>";
var div1 = document.getElementById("div1");
div1.innerHTML = tab;
}
9. Form submission
(1) Write form tags in html and submit them
There are three ways to submit a form
First, in the form tag, write the submit button <input type="submit"/>.
= code
<form method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="submit" value="Submission"/>
</form>
The second way: in the form tag, write the normal button < input type= "button"/>.
= code
function form01() {
var form01 = document.getElementById("form01");
form01.submit();
}
Third way: submit data using hyperlinks
* <a href= "Address to link? Parameter name 1 = parameter value 1 & parameter name 2 = parameter value 2"> hyperlink </a> http://http://http://http://http://http://http://http:/
* < a href = "15-form submission mode II. html? Username = CCC & password = 123456"> hyperlink submission data </a>
10. Form checking
(1) Standardizing the format of data input
(2) How to Check Forms
First, submit is used for form submission and form validation
* Use the event onsubmit event and write it in the form tag
<form method="get" onsubmit="return checkForm();">
* How to return the returned value true to submit the form, if it returns false, it will not submit the form
= code
function checkForm() {
var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
if(username == "") {
alert("User name cannot be empty");
return false;
}
if(password == "") {
alert("Password cannot be empty");
return false;
}
return true;
}
Second, use button for form validation
= code
function form01() {
var username = document.getElementById("usernameid").value;
var password = document.getElementById("passwordid").value;
if(username == "") {
alert("User name cannot be empty");
} else if(password == "") {
alert("Password cannot be empty");
} else {
var form01 = document.getElementById("form01");
form01.submit();
}
}
Introduction to 11.json
(1) JavaScript Object Notation, JavaScript Object Representation. json is a data exchange format, lighter than xml.
json is the native format of js. json can be manipulated directly through JS without relying on other things.
(2) json data format
* json has two data formats
The first is the format of json's objects
* Write {json data name 1:json data value 1,json data name 2:json data value 2...}
** Similar to the key-value form
** Use colons to separate names and values and commas to separate multiple values
** The name of json data is the type of string, the value string, number, object, array, true, false, null of json data
** Specific data format {"name": "zhangsan", "age": 20, "addr", "nanjing"}
Second: json's array format
* Writing [json object 1,json object 2....]
** There are multiple json objects in the array, separated by commas between multiple json objects
** Format of specific data [{name":"lucy","age": 20}, {name", "mary", "age": 30}]
(3) You can use these two formats of json to compose a more complex json format
* Complex formats {"name": [{"zhangsan", "addr": "beijing"}, {"name", "lisi", "addr": "tianjin"}}}
12.js parsing json
(1)js analysis json Data format of object
* adopt json Object Data Format name The name gets name Corresponding value
* Code
//js parses data in json's object format
var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
//Manipulating json's object format data
document.write(json1.username);
document.write("<br/>");
document.write(json1.age);
document.write("<br/>");
document.write(json1.addr);
(2)js analysis json Array data format
* Based on the subscripts of the array json Object, parsing json Object to get a value based on the name of the data
* ergodic json Array, get json Each of the arrays json Object, parse each json Object, according to json Object data
//The name of the
* Code
//js parses data in json array format
var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
{"username":"lisi","age":30,"addr":"tianjin"},
{"username":"wangnwu","age":40,"addr":"nanjing"}];
//js operation array, traverse the array, get the value according to the subscript of the array
//Traversing through the json array format, you get a json object and parse the json object (get the value by name)
//Get the value array subscript of age in the second json object from 0
document.write(json2[1].age);
//Get the value of addr in the first json object
document.write("<br/>");
document.write(json2[0].addr);
//Traversing the format of json arrays
document.write("<hr/>");
for(var i=0;i<json2.length;i++) {
//Get every json object in the array
var person = json2[i];
//Get the values in each object
var username = person.username;
var age = person.age;
var addr = person.addr;
document.write("username:"+username+" ; age:"+age+" ; addr:"+addr);
document.write("<br/>");
}
13.json Exercise: Display of Personnel Information
(1)Save information about multiple people to json In the data format, through js analysis json The data format shows all the people in the table of the page.
(2)[{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}]
(3)Code
//Create the format of json's data for storing personnel's information
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
//Use js to parse persons format and display these personnel information on the page
//Traverse json's array to get information about each person
//Generate tables, put data in tables, and display tables on pages
function showData() {
var tab = "<table border='1' cellpadding='10'>";
//Add table header
tab += "<tr><th>Full name</th><th>Age</th><th>address</th></tr>";
for(var i=0;i<persons.length;i++) {
//Get each json object in the array
var person = persons[i];
//Get the value inside each json object
var name = person.name;
var age = person.age;
var addr = person.addr;
//Generate tables
tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";
}
tab += "</table>";
//alert(tab);
//Display the table table table code on the page, using innerHTML attributes
//Get the div tag
var div1 = document.getElementById("div1");
//Write table code into div
div1.innerHTML = tab;
}