Js Notes
1. You can put <script> in head without worrying about affecting page loading speed by adding defer="defer", such as <script defer="defer" type= "Text/javascript" src= "Examplae.js" ></ Script>
2. Infinity/infinity=nanin Division, finite large values divided by infinite numerical results are finite large values, finite large values divided by 0 result is Nan, the Infinity value divided by a finite large value result is nan
3. addition, with one number being nan Then the result is nan,infinity+-infinity result is nan
4. String addition is the concatenation
5. Subtraction,infinity-infinity for nan,-infinity--infinity=nan,infinity--infinity=infinity,- Infinity-infinity=nan
6. When a value is compared, one number is nan, the equality operator returns false, and the inequality operator returns true,nan Not equal to nan,nan equals undefined
7. The object literal uses commas to differentiate the attribute, and the last property does not add any symbols immediately after the end, such as var person={name:"Nicolas", age:29};
8. There are two ways to access an object's properties, one is person.name and The other is person["name"]
9. Practice One:
<! DOCTYPE html>
<meta charset= "UTF-8" >
exercises </title>
<body>
<script>
function DisplayInfo (args) {
var output= "";
if (typeof args.name== "string")
output+= "Name:" +args.name;
if (typeof args.age== "number")
output+= ", Age:" +args.age;
alert (output);
}
DisplayInfo ({name: "Abracadabra", age:18});
DisplayInfo ({name: "Nicolas"});
</script>
</body>
10. Exercise II (Appreciation sort):
<! DOCTYPE html>
<meta charset= "UTF-8" >
exercises </title>
<body>
<script>
function Compare (A, b) {
return a-B;
}
var number=[78,13,4,3,5];
Number.sort (Compare);
alert (number);
</script>
</body>
11. In the array slice (num1,num2), Num1 is the beginning of the division,num2-1 is where the end of the array segmentation, if num1/num2 is a negative number, the array length is used length where the negative number gets to the beginning of the end, if num2 less than NUM1 , an empty array is returned
12. Splice usagein the array, the first parameter insplice (ARG1,ARG2,ARG3,ARG4) refers to the position of the element to be modified, The second parameter is how many elements to delete, the third argument starts until the last argument is the element content to be added to the array, andsplice can be used to add or subtract array elements
13.indexOf (ARG1,ARG2), arg1 must not be omitted,arg2 can be omitted, two parameters are present when the position of the arg2 from the beginning to search backwards arg1 , lastIndexOf (ARG1,ARG2) refers to the arg2 Start Search forward arg1
14. Exercise three (every each element satisfies a condition to return true,some returns true code validation if one yuan satisfies the condition):
<! DOCTYPE html>
<meta charset= "UTF-8" >
exercises </title>
<body>
<script>
var number=[1,2,3,4,5,6,7];
var result=number.every (function (Item,index,array) {
Return item>2;
});
var result1=number.some (function (Item,index,array) {
Return item>2;
});
Alert ("result is" +result);
Alert ("RESULT1 is" +RESULT1);
</script>
</body>
15.math.ceil () rounding up,Math.floor () down rounding , Math.Round () rounded
16. Exercise four (Use the object idea to calculate the version of a book)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<script>
var book={_yaer:2004,edition:1};
Object.defineproperty (book, ' Year ', {
Get:function () {
return this._year;
},
Set:function (NewValue) {
if (newvalue>2004) {
This._year=newvalue;
this.edition=newvalue-2004+1;}
}
})
book.year=2015;
alert (book.edition);
</script>
</body>
mode of 17.js:
Factory mode
code example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<script>
function Createperson (name,age,sex) {
var o=new Object ();
O.name=name;
O.age=age;
O.sex=sex;
alert (o.name);
}
Createperson ("Abracadabra", "Woman");
Createperson ("John", "a", "man");
</script>
</body>
Constructor mode
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<script>
function Person (name,age,sex) {
This.name=name;
This.age=age;
This.sex=sex;
alert (this.name);
}
Person ("Abracadabra", "Woman");
Person ("John", +, "man");
</script>
</body>
18.<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<script>
function Person (name,age,sex) {
This.name=name;
This.age=age;
This.sex=sex;
}
var person1=new person ("Abracadabra", "Woman");
var person2=new person ("John", +, "man");
alert (Person1.constructor==person);
Alert (Person2 instanceof Object);
</script>
</body>
Constructor: an Object . Constructor refers to his object type
19. Practice
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<script>
function PersonName (name) {
This.getname=function () {
return name;
};
This.setname=function (value) {
Name=value;
};
}
var name1=new personname ("Abracadabra");
Alert (Name1.getname ());
Name1.setname ("John");
Alert (Name1.getname ());
</script>
</body>
HTML5 Notes
1.mark tags can make text highlight
2. Verify the mailbox format
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<form id= "Check" onsubmit= "return Check ()" >
<input type=email name= "email" id= "Email" >
<input type= "Submit" >
</form>
<script>
function Check () {
var Email=document.getelementbyid ("email");
if (email.value== "")
{Alert ("Please enter email");}
else if (!email.checkvalidity ())
Alert ("Please enter the right email");
Else
{Alert ("Enter the right One");}
}
</script>
</body>
3. Progress bar
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Version number calculation </title>
<body>
<p> disk usage <meter min= "0" max= "value=" ></meter>GB</p>
</body>
In addition to IE are supported, in ie to use the words added
3. Picture Adaptive
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Adaptive </title>
<style>
img{
Display:flex;
height:300px;
width:50%;
}
</style>
<body>
</body>
4. A small icon
<! Docctype html> |
|
<style> |
|
. Triangle,.word{float:left;} |
|
. triangle{ |
|
Width:20px;height:20px;transform:rotate (45DEG); |
|
} |
|
. Word{margin-left:-14px;margin-top:-5px;width:100px;height:30px;border-radius:7px;padding-left:18px;color: #fff ;} |
|
. int{margin-top:4px;} |
|
</style> |
|
<div class= "icon" > |
|
<div class= "Triangle" ></div> |
|
<div class= "word" ><div class= "int" ><input type= "Radio" >Hexo</div></div> |
|
</div> |
|
Text-overflow:ellipsis indicates an ellipsis when text overflows within an object;
Text-overflow:clip refers to the text overflow in the object does not display the ellipsis to directly cut off the extra parts
Redrawing in web design refers to the change of attributes such as Background-colorandborder-color , and rearrangement refers to margin, The value of padding is changed,
Indentation with text-indent:2em is not useful because the element is not a block-level element, and adding a float to the element makes it a block-level element.
Recent study Notes
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
