Be a geek-learning programming from scratch: ubiquitous Javascript 4

Source: Internet
Author: User

Make a small advertisement before you start: The story of a Chinese girl and a programmer written by my girlfriend: "Time is too narrow, fingers are too wide". Before starting with object-oriented, we should first simplify the above Code,

Person.future=function dream(){future;}

It seems much simpler than above, but we can also simplify it into the following code...
var Person=function(){this.name="phodal";this.weight=50;this.height=166;this.future=function dream(){return "future";};};var person=new Person();document.write(person.name+"<br>");document.write(typeof person+"<br>");document.write(typeof person.future+"<br>");document.write(person.future()+"<br>");

At this time, Person is a function, but the person we declare becomes an object <strong> A Javascript function is also an object, and, all objects are technically just functions. </Strong> here + "<br>" is an element in HTML, called DOM. Here we will introduce it later, here we first care about this. This keyword indicates the function owner or scope, that is, the Person here.

The above method seems a bit undesirable.

    document.write(3*4);    
Similarly, it is not flexible, so after we complete the function, we need to optimize it, which is the true meaning of program design-after solving the actual problem, we need to start the real design, instead of programming for solving the problem.
var Person=function(name,weight,height){this.name=name;this.weight=weight;this.height=height;this.future=function(){return "future";};};var phodal=new Person("phodal",50,166);document.write(phodal.name+"<br>");document.write(phodal.weight+"<br>");document.write(phodal.height+"<br>");document.write(phodal.future()+"<br>");
Therefore, such a reusable Javascript Object is generated. The this keyword establishes the property owner.


Other Javascript also has a very powerful feature, that is, prototype inheritance. However, we will not consider these parts here. We will use up a small amount of code and keywords to implement the core functions we want to express, this is the core here. We can learn other things from other books.


The so-called inheritance,
var Chinese=function(){this.country="China";}var Person=function(name,weight,height){this.name=name;this.weight=weight;this.height=height;this.futrue=function(){return "future";}}Chinese.prototype=new Person();var phodal=new Chinese("phodal",50,166);document.write(phodal.country);
The complete Javascript should consist of the following three parts:

  • ECMAScript-core language functions
  • Document Object Model (DOM)-methods and interfaces for accessing and operating webpage content
  • Browser Object Model (BOM)-methods and interfaces for interacting with browsers
 
We are talking about ECMAScript above, that is, syntax-related, but Javascript is really powerful, or what we need most is DOM operations, this is one of the reasons why libraries such as jQuery can become popular, and the core language functions are applicable wherever they are. There are few opportunities for BOM to be used, because there is no unified standard.

A simple DOM example,
<!DOCTYPE html> 

Modify to add helloworld.html
<p id="para" style="color:red">Red</p>
At the same time, you also need to move the script tag to the body. If there is no accident, we will see Red in Red on the page and modify app. js.
var para=document.getElementById("para");para.style.color="blue";
Then, the font turns blue. with DOM, we can operate on the page. We can say that most of the page effects we see are achieved through DOM operations.
The beauty of the Javascript mentioned here is only a small part. Many things are ignored. The only concern is how to design a practical app as a programming language, he also has other powerful internal functions and needs a valuable reference book to learn well. The only thing mentioned here is less than 20% of the items, and the other 80% or more will appear when you solve the problem.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.