"Learning Notes" JavaScript Basics (ii)

Source: Internet
Author: User
Tags array length setinterval switch case

"The learning process has encountered questions and extended reading"

Summarize
Array of variables
code block, judging branch execution, judging loop execution
Flexible use of nested branches and nested loops
Branch type-if,elseif,switch case
Loop type-while,do-while,for


Array and object Contact differences

Members vs objects

Prototype object vs Object prototype

"New concept, important concept"

Function object

Extended reading:
Http://www.cnblogs.com/huaan011/p/3669599.html

"Practical knowledge of the context of the point"

1. Arrays
Array structure, storing some data, logically related data (structured)

Subscript-the location of the data

1.1 How arrays are created
var a = new Array ();
var B = new Array (size);
var c = new Array (d1,d2,... DN);
var d = [d1,d2,..., dn];

1.2 Accessing arrays
[] operator to access one of the data in the array
A[0], can be read can write, placed on the left side of the equal sign is written, on the right side of the equals sign is read.
Index starting from 0

Undefine

1.3 Array length
. length
Indicates how many lengths the current array occupies, and the largest array subscript +1

. Length can be written, array length can be modified
You can remove something from the back of the array or increase the length

A[a.length]= "XX";//extensibility Code, no matter how the future needs change, do not change the code
Continues appending an element at the end of the array.

1.4 Converting an array to a string
The entire array can be output.
. toString ()/. ValueOf ()
. Join ("| |")

1.5 Stacks
A data structure: advanced back-out
In JavaScript,
Stack operations
The array implements two functions,
Push (), pop ()

Queue operations
Push (), Shift ()

Sort-from small to large
Sort ()
Reverse the original order.
Reverse ()

Array manipulation
Connection concat ()
Intercept Slice (x,x)

Splice (start position, delete number, insert element ...)
Delete, insert, replace

2 functions
function is a piece of code, we give it seven names,
Put it up, you can use it later.

JavaScript has many built-in functions,
can help us achieve a lot of useful functions
Alert (), document.write ()

2.1 Defining functions
function Fun_name () {}
function Fun_name (A, b) {}
When something is going to be done very often. Can be defined as a function.
Easy to call and use repeatedly.

Calling functions

2.2 Function with return value
Return

2.3 Function variables
A function is defined by the keyword,
You can also define a function as an object, called a function object.
var f= new Function ("X", "Y", "return X*y");
Equivalent to
function f (x, y) {return x*y};

Now that you can assign a function to a variable,
That is, it is possible to treat a function as a number, a string
, passing to the inside of another function,
And then do the operation in another function.

When writing a program, try to be based on a function that you have already defined.
To do a new function.
Try to break your function down into a number of small functions to execute.

2.4 Variable Space
The entire page outside the function, the variables within the function are different
Different scopes

Variables defined within a function, independent of the Outside,
Even with the same name as the external.

3 objects
Objects of 3.1JavaScript
object is a composite data type of JavaScript,
It can centralize multiple data in one variable,
And give each of these data names.

An object is a collection of properties.

JavaScript does not have the same class concept as other OOP languages,
The class Remanufacturing object is not designed first.

Directly with the object
Adding attributes to Objects,
You can continue to add properties in the run.

You can also define functions, create objects, and look like you create objects in other languages.

The language that has the object, not the strict object-oriented language.

3.2 Creating objects
var o = new Object (); Object 1
var ciclr = {X:0,y:0,radius:2}; Object 2

3.3 Accessing Object properties
Once the object has been created, go to access the property.
And the array is different, each element is not a number,
Instead, they all took their names.

So you can use it with a name.
var book = new Object ();
Book.title = "HTML5"; On the left of the title before this, there is no place to use.
We just have to assign a value to Book.title, and we have the title.

It is the same as the array practice.

-even properties that do not exist at the time of construction can be added at any time in the future.
Even when running, you can also add properties to the "system object" at any time.

3.4 Delete Object Properties
Delete Book.chapter1;
Book.chapter1 = null;

3.5 Traversing all properties
for (var x in O) ...
For each of the attributes in O is taken out,
I use it as x for every cycle.
Then I can do something about this x.

<script>
var o = new Object ();
O.name = "John Mike";
O.age = 30;
Alert (o);

for (var x in O) {
alert (x); the name of the//o property
How do I get the value of a property? What is the attribute of o.x?o called X?
Alert (o[x]);//You can use brackets to get the value of a property like an array.
}

</script>

O[x] Indicates computable, the program we write can be very flexible.
X is a value that is known at run time,
The name of the O property is dynamic.

3.6 Constructors
Before, we created an object that
is obtained through new Object (),
Then add various attributes to it.

But if you're going to be a lot of objects,
Each object is then added with various attributes.
In this way, the code is cumbersome.

So we're going to do a construction method.

constructor function
(1) Not directly manufacturing objects
(2) Define members by this
(3) No return
Example:
function Rect (w,h) {
This.width = W;
This.height = h;//
This.area = function () {return this.width * this.height;};
};//inside the constructor, you can have member methods in addition to the attributes that can have members

var r = new Rect (5,10);
Alert (R.area ());

-Once a constructor is defined, any number of objects can be constructed

3.7 Prototype objects

Make a person's constructor;
In person, we can write Person.prototype.name
Make a prototype constructor
Instead of this, use the constructor name. prototype. property name

In a prototype constructor,
New two objects, accessing their same property name,
Get the same property value.

In fact, all using the prototype constructor,
New comes out of the object, and the property value of the prototype inside it is shared.
There is only one copy.

Unless you rewrite an object, it has its own data.

Prototype prototype will produce some problems.
For example, let's look at this example
This prototype is a little bit more complicated,
We can see multiple friends properties inside
The value of this property is the number of groups

Similarly, after new two objects,
Overwrite one of the objects,
Once more than one element is moved to the array push,
The Friends of another object has also been modified.

The push is different from the assignment, cannot be rewritten, or is the original array.
There is no friends equal to another array.

In this way, some problems arise, because things like arrays,
We don't want it to be shared among several members.

We can combine, "combinatorial prototypes and Construction methods"
We can make the person have something of their own,
For example, we're writing this now.
What about this constructor for person,
It this.xx,this.xx ... These are objects of their own, and it is not shared with others.
And then we'll add a prototype to the person.

Prototype says it has functions, and those functions are shared by members.
So after we new person comes out,
In these person, Name,age,job,friend is his own,
The Sayname () function, which is shared.

The friends array of Person1 is added to the element,
Person2 is not going to change.

Of course, JavaScript objects have many more detailed ways to use them.
A lot of the use is related to the specific application,
So in the future development, with your needs of the generation,
You will appreciate the need for various methods of use.

3.8 JS in the browser
3.8.1 Global Objects
Now let's take a look at JavaScript in the browser
What we've been working on is the language features of JavaScript itself.

No deep understanding of how JavaScript relates to a browser.
How it can manipulate the browser, how to manipulate our pages.
The variables we've done before,
Those global variables, in fact, he is not really a global variable.

Any JavaScript running environment will provide a
The global object.
So the so-called global variable is actually the member variable of that global object,
Because unlike other languages, we want to add a JavaScript object to the
The new members are very simple.

So, for a browser, its Global object is window

So, the global variables that we do are actually the window's global object.
The member.

So everything in the browser is actually a member of window.

3.8.2document
Window.document represents an HTML page in a browser window
Docment.write () write content to page
The elements in the page are members of the docment.
for (x in document) {
document.write (x+ "<br/>");
}

Document model
You can change the element in this to see the dynamic effect of the page.

JavaScript in 3.8.3HTML
-In the <script></script> tag
-In the SCR property of <script> or in the external file specified by archive
-In an event handler for an HTML tag

external JavaScript files
-such as <script src= "Util.js" ></script>//tell the browser, find the JS file called Util
-A pure code file with no HTML tags
(If the code is defined as a function, then the page can be used;
Code, the file is loaded in and executed. )

4 event handler
There will be some events in the HTML processor.
<p onmouseover= "alert (' Hi ');" >
onmouseout

4.1body Events
OnLoad
Before OnUnload was turned off.

4.2 Simple dialog box
Alert ()
Confirm ()
Prompt ()

4.3 Status bar
Status =
Defaultstatus =
<p onmouseover= "status= ' netease Cloud Learning '";></p>

4.4 Timers
Functions that can call window
SetInterval ()
This function, can give two parameters,
The first parameter is what you make it do. It's usually a function.
The second parameter is how much the event interval is.

We put the timer on the body onload event.
Then in SetInterval () is a function of update (),
Defines that update () will be count>0, minus 1, and displayed on the status.
Do the countdown.
Define the update () and count global variables in the head.

"Learning Notes" JavaScript Basics (ii)

Related Article

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.