Home > Developer > Web Develop
Ubiquitous Javascript
Javascript is everywhere now. Maybe a website you are opening may be node. js + json + javascript + mustache. although you have not understood what the above is, it is precisely because you do not understand it that you need to learn more. However, Javascript is everywhere. It may run in a process in your IDE in an app on your mobile phone, on the Web page you browse.
Before getting started
Make a small advertisement: The story of Chinese girls and programmers written by my girlfriend: "Time is too narrow and fingers are too wide"
Bytes<!DOCTYPE html>Then we start to integrate our javascript into the HTML. To insert Javascript into html, we need to use the \ <script> tag in HTML. We first use the page embedding method to write helloworld.
<!DOCTYPE html>
According to the standard writing, we also need to declare the Script Type
<!DOCTYPE html>Hello, world? Try the following code:
<!DOCTYPE html>For JavaScript, we need to make our code look more like js and end with js. C language source code but ended with C, so we need to make our code look more formal. To create an app. js in the same folder of helloworld.html, it says
<pre><code class="javascript">document.write('hello,world');</code></pre>At the same time, our helloworld.html also needs to tell us where the browser js code is.
<!DOCTYPE html>
Ubiquitous JavascriptJavascript is everywhere now. Maybe a website you are opening may be node. js + json + javascript + mustache. although you have not understood what the above is, it is precisely because you do not understand it that you need to learn more. However, Javascript is everywhere. It may run in a process in your IDE in an app on your mobile phone, on the Web page you browse.
Starting from mathematicsLet's go back to chapter 1's question about James,Programming from actual problems makes it easier to learn Programming. In the elementary school age, the math problems most like this: the sugar in a store costs 5 yuan, James bought 3 sugar, and James spent a total of how much money. Maybe we are still elementary school students in programming. The most direct method is to directly calculate 3x5 =?
document.write(3*5);Document. write can also be understood as output, that is, the result of writing 3*5 to the page will be output in double quotation marks. We will see 15 in the browser, which is a good start and a bad start. (Reprinted and retained: be a geek 3: ubiquitous javascript 2)
Design and ProgrammingIf our actual problems always end with the expected results, we will become a code monkey many years later. Design the problem once. The so-called design sometimes complicate the simple problem, and sometimes make the expansion easier in the future. On this day, because the store's sugar price is too high, the store manager reduced the price to 4 yuan.
document.write(3*4);So we got our results again, but the next time we saw the code, we didn't know which is the quantity of sugar and which is the price, so we re-designed the program.
tang=4;num=3;document.write(tang*num);This can be called programming. Maybe you have noticed the existence of the symbol ";". What I want to say is that this is another standard and we have to comply with it and have to perform fuck.
FunctionRemember that when we first learned the trigonometric function, we wrote
sin 30=0.5Our functions are similar to this. In other words, because many pioneers in computer science have learned mathematics well and brought the laws of the mathematical world to the computer world, our functions are similar to this, let's make a simple start.
function hello(){ return document.write("hello,world");}hello();
When I first saw the function, I was a little excited. We wrote a function named hello, which returns the method for writing hello and world to the page. Then we call the hello function, so there is hello and world on the page.function sin(degree){ return document.write(Math.sin(degree));}sin(30);Here degree is called a variable, that is, the amount that can be changed. The output is-0.9880316240928602 instead of 0.5, because here we use radians instead of angle.
sin(30)The output result of is somewhat similar to sin 30. The purpose of writing parentheses is to facilitate parsing. This may be different in different languages. For example, in ruby, we can directly use expressions similar to those in mathematics:
2.0.0-p353 :004 > Math.sin 30=> -0.98803162409286182.0.0-p353 :005 >We can input multiple variables in the function, so we will go back to Xiaoming's question and write the code like this.
function calc(tang,num){ result=tang*num; document.write(result);}calc(3,4);However, to some extent, our calc has done computation and output. In general, the design is poor.
Ubiquitous JavascriptJavascript is everywhere now. Maybe a website you are opening may be node. js + json + javascript + mustache. although you have not understood what the above is, it is precisely because you do not understand it that you need to learn more. However, Javascript is everywhere. It may run in a process in your IDE in an app on your mobile phone, on the Web page you browse.
RedesignWe move the output work out of the function,
function calc(tang,num){ return tang*num;}document.write(calc(3,4));Then we use a more interesting method to write the solution to this problem.
function calc(tang,num){ return tang*num;}function printResult(tang,num){ document.write(calc(tang,num));}printResult(3, 4)It seems to be a little more professional. If we only need to call calc when we only need to calculate, if we need to output, we will call the printResult method.
Object and FunctionWe have not yet made it clear that the syntax of document. write and Math. sin we have encountered looks strange, so let's see what they are, modify app. js as well as the content.
document.write(typeof document);document.write(typeof Math);Typeof document: the data type of the document is returned, and the output result is
object objectSo we need to figure out what an object is. Object definition is (reprinted and retained: be a geek 4: ubiquitous javascript 3)
A set of unordered attributes, which can contain basic values, objects, or functions.Create an object and observe that this is what we will do next
store={};store.tang=4;store.num=3;document.write(store.tang*store.num);We have the same usage as document. write, which is also the beauty of the object, but the object here only contains the basic value, because
typeof story.tang="number"This is the case for an object.
store={};store.tang=4;store.num=3;document.writeln(store.tang*store.num);var wall=new Object();wall.store=store;document.write(typeof wall.store);The document. write and the document. writeln used above are all functions in this unordered attribute set.
The following code describes the functions in this unordered attribute set.
var IO=new Object();function print(result){ document.write(result);};IO.print=print;IO.print("a obejct with function");IO.print(typeof IO.print);We have defined an object called IO, and the declared object can be used
var store={};Or
var store=new Object{};The two are equivalent, but the latter is more readable. We define a function called print, whose function is document. the print function in write and IO is equivalent to the print () function, which is the difference between objects and functions. Objects can contain functions, and objects are a set of unordered attributes, its Attributes can contain basic values, objects, or functions.
A more complex object is the case below.
var Person={name:"phodal",weight:50,height:166};function dream(){ future;};Person.future=dream;document.write(typeof Person);document.write(Person.future);These will be used more in our future practical programming.
Before starting object-oriented, we should 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:
<!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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
