JavaScript authoritative Guide Learning Note 1

Open the book and enter the world of JavaScript. Used to look at all kinds of video, feel what harvest has not, but make brain confusion, hope to follow the rhythm of this book to master JavaScript this language, for my front-end learning lay the foundation.

Pre-study Preparation: Web browser (F12 used to wake up and close the Firebug interface, Ctrl+shift+j to wake up the error Workbench, Console.log () Debug Assist)

This book is divided into 4 parts: JavaScript language core, client Javascript;javascript Core Reference, client JavaScript reference. I learned the first part today. Main Harvest Brief:

Objective

A brief description of 1:javascript language core and client JavaScript

Compared to the past, this book has been introduced to me at the beginning:

(1) Comment method://All content behind the double slash belongs to the comment

(2) Variable: var x=0;//variable is a symbolic name representing a value, denoted by the Var keyword, assigned by an equal sign

(3) Data type: number bool object undefined NULL, etc.

(4) Object: Key-value pair (name = = value) has attributes, through "." or "[]" to access, just like the various search directories, the first level of search down. For example:

1 varbook={//equals no Forget2Author: "Fanfan",3Name: "JavaScript",//separated by "," between different attributes4Buyfalse  5 };6Console.log (Book.author);//Get book's Author property = "Fanfan7Console.log (book["name"]);//enclose attribute names in parentheses with double quotes8book.topic= "study";//if the book property originally had no topic attribute, it would be equivalent to adding a topic attribute with a value of study. 9 Console.log (book.topic);Tenbook.content={};//to set an empty property OneConsole.log (book.content);

(5) Function: A JavaScript snippet with a name and argument that can be called multiple times

1 var square=function(x) {2     return x*x; 3 }; 4 Square (4);

(6) Method: When the function and the object are together, it becomes a method. That is, when a function assigns a property to an object, it is a method, and all JavaScript objects contain methods.

1 varA=[];2A.push (a);//array Assignment Push method3A.reverse ();//Array Reverse4 //We can also define our own method, the This keyword is a reference to the object that defines the method5 varpoints=[6{x:0,y:0},7{x:1,y:1}];8points.dist=function(){9   varp1= This[0];Ten   varP2= This[1]; One   vara=p2.x-p1.x; A   varb=p2.y-p1.y; - returnMATH.SQRT (a*a+b*b);  - } thePoints.dist ();

(7) Control statement: conditional judgment and circulation

(8) Object-oriented: construction--"instantiation--" additional Method--"inheritance

//constructor, no return, Initializes a new pointfunctionPoint (x, y) { This. x=x;  This. y=y;}//New a Point instancevarp=NewPoint ();//Attach an R method to pointPoint.prototype.r=function(){    returnMATH.SQRT ( This. x* This. x+ This. y* This. y);};//Call the R method of P, inheritP.R ();

(9) client-side JavaScript. The main operation is DOM and so on.

Example: A JavaScript-based loan calculator. (Code download: http://yun.baidu.com/share/link?shareid=538259612&uk=3811305747)

• How to find the element var Amount=document.getelementbyid ("Amount") in the document;
• How to get the input data of a user using the form INPUT element var principal = parsefloat (Amount.value);
• How to set HTML content through document elements payment.innerhtml = monthly.tofixed (2);
• How to store data in a browser

  1 Save (Amount.value, Apr.value, Years.value, zipcode.value);2 functionSave (amount, Apr, years, ZipCode) {3         if(window.localstorage) {//Only does this if the browser supports it4Localstorage.loan_amount =amount;5LOCALSTORAGE.LOAN_APR =Apr;6Localstorage.loan_years =years;7Localstorage.loan_zipcode =ZipCode;8         }9}

• How to use scripts to send HTTP requests

  1 functiongetlenders (amount, Apr, years, ZipCode) {2         //If The browser does not support the XMLHttpRequest object3         if(!window. XMLHttpRequest)return;4 5         //Find the element to display the list of lenders in6         varAD = document.getElementById ("Lenders");7         if(!AD)return;//Quit If no spot for output8 9         //Encode The user ' s input as query parameters in a URLTen         varurl = "getlenders.php" +//Service URL plus One"? amt=" + encodeuricomponent (amount) +//user data in query string A"&apr=" + encodeuricomponent (Apr) + -"&yrs=" + encodeuricomponent (years) + -"&zip=" +encodeURIComponent (zipcode); the  -         //Fetch the contents of that URL using the XMLHttpRequest object -         varreq =NewXMLHttpRequest ();//Begin a new request -Req.open ("GET", url);//An HTTP GET request for the URL +Req.send (NULL);//Send the request with no body -  +         //before returning, register an event handler function that'll be called A         //At some later time, the HTTP server ' s response arrives. This kind of at         //asynchronous programming is very common in client-side JavaScript. -Req.onreadystatechange =function() { -             if(Req.readystate = = 4 && req.status = 200) { -                 //If We get here, we got a complete valid HTTP response -                 varResponse = Req.responsetext;//HTTP Response as a string -                 varLenders = json.parse (response);//Parse it to a JS array in  -                 //Convert The array of lender objects to a string of HTML to                 varList = ""; +                  for(vari = 0; i < lenders.length; i++) { -List + = "<li><a href=" + Lenders[i].url + ">" + theLenders[i].name + "</a>"; *                 } $ Panax Notoginseng                 //Display The HTML in the element from above. -ad.innerhtml = "<ul>" + list + "</ul>"; the             } +         } A}

• How to draw with <canvas> elements

  1 varg = Graph.getcontext ("2d");2G.moveto (Paymenttox (0), Amounttoy (0));//Start at Lower left3G.lineto (Paymenttox (payments),//Draw to Upper right4Amounttoy (Monthly *payments));5G.lineto (Paymenttox (payments), Amounttoy (0));//Lower Right6G.closepath ();//And back to start7G.fillstyle = "#f88";//Light Red8G.fill ();//Fill the triangle9G.font = "bold 12px Sans-serif";//Define a fontTenG.filltext ("Total Interest Payments", 20, 20);

  　

Summary: To understand clearly the relationship between the object, function, method of the three. The client's example is basically able to read, but cannot write it. Primarily Localstorage and HTTP requests cannot be done independently. Will come back to review the dictation later.

JavaScript authoritative Guide Learning Note 1