11.8 days-2017 review summing up miscellaneous---Today we talk about ES law and HTML5 (dot Matrix generation collision detection) Very good section

Source: Internet
Author: User
Tags uppercase character


ES Standard

1
Well-known variable naming conventions


Just because the syntax of the variable names is correct does not mean that they should be used. Variables should also adhere to one of the following well-known naming conventions:
Camel Labeling Method
The first letter is lowercase, and the next letter begins with an uppercase character. For example:
var mytestvalue = 0, Mysecondvalue = "HI";
Pascal Labeling Method

The first letter is capitalized, and the next letter begins with an uppercase character. For example:
var mytestvalue = 0, Mysecondvalue = "HI";
Hungarian type Marking method

Appends a lowercase letter (or a lowercase sequence) to a variable named after the Pascal notation, indicating the type of the variable. For example, I represents an integer and S represents a string, as shown below.
var imytestvalue = 0, Smysecondvalue = "HI";
Integers (integer)


These prefixes are used in this tutorial to make the sample code easier to read:
Type Prefix example
Array Aavalues
Boolean type Bbfound
Floating-point (digital) Ffvalue
function Fnfnmethod
Integral type (digital) iivalue
Object Ootype
Regular Expression Rerepattern
String Ssvalue
Variant (can be of any type) Vvvalue

When an ECMAScript interpreter encounters an undeclared identifier, it creates a global variable with the variable name and initializes it to the specified value. --------This is a key

Note: If you use a keyword as a variable name or function name, you might get an error message such as "Identifier expected" (there should be an identifier, an expected identifier).
Note: If you use a reserved word as a variable or function name, you will likely not receive any error messages unless the reserved word is implemented by the future browser.
When the browser implements it, the word is treated as a keyword, so a keyword error occurs.


The last special value is NaN, which represents a non-number (not a digit). NaN is a strange special value. In general, this occurs when a type (String, Boolean, etc.) conversion fails.
For example, to convert a word blue to a numeric value will fail because there is no value equal to it. As with infinity, NaN cannot be used for arithmetic calculations.
Another peculiarity of NaN is that it is not equal to itself, which means that the following code will return false:

For this reason, it is not recommended to use the NaN value itself. The function IsNaN () will do quite well:


The interesting thing about ECMAScript's original values of Boolean values, numbers, and strings is that they are pseudo-objects, which means that they actually have properties and methods.


The ToString () method of number type is special, and it has two modes, the default mode and the base mode.
With the default mode, the ToString () method simply outputs a numeric value (whether integer, floating point, or scientific notation) with the corresponding string, as follows:

Note: In the default mode, the ToString () method of number type returns a decimal representation of the numbers, regardless of what notation was originally used to declare numbers.
Therefore, the output of a number declared in the form of eight hexadecimal literals is in decimal form.
The base mode of the ToString () method with the number type can be used with different base output numbers, such as the binary base is 2, the octal base is 8, and the hexadecimal base is 16.
Base is just another addition to the cardinality to be converted, which is the parameter of the ToString () method:
var iNum = 10;
Alert (inum.tostring (2));//output "1010"
Alert (inum.tostring (8));//Output "12"
Alert (inum.tostring (16));//Output "A"
In the previous example, the number 10 was output in 3 different forms, namely binary form, octal form, and 16 binary form.
HTML is a hexadecimal representation of each color, which is useful when working with numbers in HTML.
Note: calling ToString (10) on a number is the same as calling ToString (), and they return the decimal form of the number.


A reference type is often called a class, which means that a reference value is encountered and the object is processed.

Example Project for HTML5
1 Tangram-----Tangram

var tangram=[
{s:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color: "Red"},
{s:[{x:0,y:0},{x:400,y:400},{x:800,y:0}],color: "Orange"},
{s:[{x:0,y:800},{x:200,y:600},{x:400,y:800}],color: "Yellow"},
{s:[{x:200,y:600},{x:400,y:400},{x:600,y:600},{x:400,y:800}],color: "green"},
{s:[{x:400,y:400},{x:600,y:200},{x:600,y:600}],color: "Blue"},
{s:[{x:600,y:200},{x:800,y:0},{x:800,y:400},{x:600,y:600}],color: "Navy"},
{s:[{x:400,y:800},{x:800,y:400},{x:800,y:800}],color: "Purple"}
]


Reference array?----class???????


<! DOCTYPE html>
<body>
<canvas style= "display:block;margin:20px auto;border:2px solid #ccc" id= "Canvas" >
</canvas>
<script>


var tangram=[
{s:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color: "Red"},
{s:[{x:0,y:0},{x:400,y:400},{x:800,y:0}],color: "Orange"},
{s:[{x:0,y:800},{x:200,y:600},{x:400,y:800}],color: "Yellow"},
{s:[{x:200,y:600},{x:400,y:400},{x:600,y:600},{x:400,y:800}],color: "green"},
{s:[{x:400,y:400},{x:600,y:200},{x:600,y:600}],color: "Blue"},
{s:[{x:600,y:200},{x:800,y:0},{x:800,y:400},{x:600,y:600}],color: "Navy"},
{s:[{x:400,y:800},{x:800,y:400},{x:800,y:800}],color: "Purple"}
]

Window.onload=function () {


var Canvas=document.getelementbyid ("Canvas");
canvas.width=800;
canvas.height=800;

var Context=canvas.getcontext ("2d");

for (Var i=0;i<tangram.length;i++)
{
Draw (Tangram[i],context);
}


function Draw (Piece,ctx) {

Ctx.beginpath ();
Ctx.moveto (piece.s[0].x, PIECE.S[0].Y);
for (Var i=1;i<piece.s.length;i++)
{
Ctx.lineto (piece.s[i].x, PIECE.S[I].Y);
}
Ctx.closepath ();
Ctx.fillstyle= Piece.color;
Ctx.fill ();
}

}
</script>
</body>

2
Dot Matrix generation
Collision detection

11.8 days-2017 review summing up miscellaneous---Today we talk about ES law and HTML5 (dot Matrix generation collision detection) Very good section

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.