Study address:
- Grain Academy-Shang Silicon Valley
- Bilibili website——Silicon Valley's latest version of JavaScript basic full set of tutorials (140 episodes of practical teaching, JS from entry to master)
table of Contents
P41 41.Silicon Valley_JS Basic_Nested for loop 18:50
P42 42. Shang Silicon Valley_JS Basic_Exercise 05:47
P43 43. Shang Silicon Valley_JS Foundation_for loop exercise 18:37
Nested loop exercise 1: Printing the nine-nine multiplication table
Nested loop exercise 2: Print out all prime numbers between 1-100
P44 44. Shang Silicon Valley_JS Basics_break and continue 28:00
Timer: console.time(), console.timeEnd()
P45 45. Shang Silicon Valley_JS Basic_Improvement of Prime Number Practice 08:38
P46 46. Introduction to Silicon Valley_JS Foundation_Object 11:51
P47 47. Still Silicon Valley_JS Basics_Basic Operation of Objects 13:10
1. Create an empty object [var obj = new Object(); // construction method]
2. Add attributes to the object [Syntax: Object. Attribute Name = Attribute Value;]
3. Read the properties in the object [Syntax: object. Property name]
4. Modify the property value of the object [Syntax: object. Property name = new value;]
5. Delete the properties of the object [Syntax: delete object. Property name;]
P48 48.Silicon Valley_JS Foundation_Attribute name and attribute value 16:34
Special attribute name [Syntax: object ["attribute name"] = attribute value]
in operator: Check whether an object contains the specified attribute.
P49 49. Still Silicon Valley_JS Foundation_Basic Data Types and Reference Data Types 26:38
P50 50. Still Silicon Valley_JS Foundation_Object Literal 08:20
P51 51. Introduction to Silicon Valley_JS Basics_Function 23:02
Add attributes to the function
Function creation method 1: String encapsulation code creation function
Function creation method 2: Function declaration
Function creation method 3: Function expression
P52 52. Still Silicon Valley _JS Basic _ Function Parameters 11:35
P41 41.Silicon Valley_JS Basic_Nested for loop 18:50
/*
Through the program, output the following graphics on the page:
* 1 <1 i=0
** 2 <2 i=1
*** 3 <3 i=2
**** 4 <4 i=3
*** ** 5 <5 i=4
*****
*****
*****
*****
*****
***** 1 j<5(5-0) i=0
**** 2 j<4(5-1) i=1
*** 3 j<3(5-2) i=2
** 4 j<2(5-3) i=3
* 5 j<1 (5-4) i=4
*/
P42 42. Shang Silicon Valley_JS Basic_Exercise 05:47
P43 43. Shang Silicon Valley_JS Foundation_for loop exercise 18:37
Nested loop exercise 1: Printing the nine-nine multiplication table
* 1. Print 99 multiplication table
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4= 8 3*4=12 4*4=16
* ....9*9=81<span></span> is used to align elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for (var i = 1; i <= 9; i++) { //创建外层循环，用来控制乘法表的高度
for (var j = 1; j <= i; j++) { //创建一个内层循环来控制图形的宽度
document.write("<span>" + j + "*" + i + "=" + i * j + "</span>");
}
document.write("<br />"); //输出一个换行
}
</script>
<style type="text/css">
body {
width: 2000px;
background-color: #87CEEB;
}
span {
display: inline-block; /*转为行内元素*/
width: 80px; /*span是块元素*/
background-color: #FCD410;
}
</style>
</head>
<body>
</body>
</html>Nested loop exercise 2: Print out all prime numbers between 1-100
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//打印2-100之间所有的数
for (var i = 2; i <= 100; i++) {
//创建一个布尔值，用来保存结果，默认i是质数
var flag = true;
//判断i是否是质数
//获取到2-i之间的所有的数
for (var j = 2; j < i; j++) {
//判断i是否能被j整除
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
}
}
//如果是质数，则打印i的值
if (flag) {
console.log(i);
}
}
</script>
</head>
<body>
</body>
</html>P44 44. Shang Silicon Valley_JS Basics_break and continue 28:00
break keyword
The break keyword can be used to exit a switch or loop statement. Break and continue cannot be used in an if statement .
The break keyword will immediately terminate the loop statement closest to it.
label: loop statement
You can create a label for the loop statement to identify the current loop.
label: loop statement
When using the break statement, you can follow the break with a label, so that the break will end the specified loop instead of the nearest one.
continue keyword
The continue keyword can be used to skip the current loop , and continue also by default will only work on the loop closest to it.
Timer: console.time(), console.timeEnd()
P45 45. Shang Silicon Valley_JS Basic_Improvement of Prime Number Practice 08:38
19/2 = 9.5. It is impossible to multiply the number after 10 by anyone to get 19, and there is no need to check the value after 9.5.
Except for 2, all prime numbers are odd . Prime number: prime number.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//测试如下的程序的性能
//在程序执行前，开启计时器
//console.time("计时器的名字") // 可以用来开启一个计时器
//它需要一个字符串作为参数，这个字符串将会作为计时器的标识
console.time("test");
//打印2-100之间所有的数
for (var i = 2; i <= 100000; i++) {
var flag = true;
for (var j = 2; j <= Math.sqrt(i); j++) {
if (i % j == 0) {
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
//一旦进入判断，则证明i不可能是质数了，此时循环再执行已经没有任何意义了
//使用break来结束循环
break;
//不加break 215ms
//加break 25ms
//修改j<=后 2.6
}
}
//如果是质数，则打印i的值
if (flag) {
//console.log(i);
}
}
//终止计时器
//console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数
console.timeEnd("test");
/*
* 36
* 1 36
* 2 18
* 3 12
* 4 9
* 6 6
*/
//可以通过Math.sqrt()对一个数进行开方
var result = Math.sqrt(97);
console.log("result = " + result)
</script>
</head>
<body>
</body>
</html>P46 46. Introduction to Silicon Valley_JS Foundation_Object 11:51
Data types in JavaScript (6 types):
1. String
2, Number
3, Boolean
4, Null
5, Undefined
-The above five types are basic data types , which we will see later Values, as long as they are not the five above, are all objects.
6, Object object ( reference data type )The basic data types are all single values "hello", 123, true, and there is no connection between value and value .
To express a person's information in JS (name gender age):
* var name = "Sun Wukong";
* var gender = "男";
* var age = 18;
If we use basic data types of data, the variables we create They are all independent and cannot be a whole.The object belongs to a composite data type, and multiple attributes of different data types can be stored in the object.
Classification of objects:
- Built-in objects: objects defined in the ES standard, can be used in any ES implementation, such as: Math, String, Number, Boolean, Function, Object...
- Host object: the object provided by the runtime environment of JS, currently mainly refers to the object provided by the browser , such as BOM DOM.
- Custom object: An object created by the developer himself.
P47 47. Still Silicon Valley_JS Basics_Basic Operation of Objects 13:10
1. Create an empty object [var obj = new Object(); // construction method]
2. Add attributes to the object [Syntax: Object. Attribute Name = Attribute Value;]
3. Read the properties in the object [Syntax: object. Property name]
4. Modify the property value of the object [Syntax: object. Property name = new value;]
5. Delete the properties of the object [Syntax: delete object. Property name;]
P48 48.Silicon Valley_JS Foundation_Attribute name and attribute value 16:34
Attribute name
Add attributes to objects
Attribute name: The attribute name of the object is not mandatory to comply with the identifier specification. Any messy name can be used, but we should try to follow the identifier specification as far as possible.
Special attribute name [Syntax: object ["attribute name"] = attribute value]
If you want to use a special attribute name, you cannot use the. Method to operate, you need to use another method: syntax: object ["attribute name"] = attribute value .
It is also necessary to use this method when reading, using the form of [] to manipulate attributes, which is more flexible. You can directly pass a variable in [], so that the value of the variable will read that attribute.
Attribute value
Attribute value: The attribute value of the JS object, which can be any data type, or even an object.
in operator: Check whether an object contains the specified attribute.
in operator: This operator can be used to check whether an object contains the specified attribute, if it has, it returns true, and if it does not, it returns false.
Syntax: "attribute name" in object
P49 49. Still Silicon Valley_JS Foundation_Basic Data Types and Reference Data Types 26:38
- Basic data type: String Number Boolean Null Undefined
- Reference data type: Object
- Variables in JS are stored in the stack memory . The values of basic data types are stored directly in the stack memory. Values and values exist independently. Modifying one variable will not affect other variables.
- The object is saved in the heap memory. Every time a new object is created, a new space is opened in the heap memory. The variable saves the memory address of the object (reference to the object). If two variables are saved It is the same object reference, when one modifies the property through a variable, the other is also affected.
Value and value are independent !
- When comparing values of two basic data types , you are comparing values.
- When comparing two reference data types , it is the memory address of the compared object. If the two objects are exactly the same but have different addresses, it will also return false.
P50 50. Still Silicon Valley_JS Foundation_Object Literal 08:20
Using object literals, you can directly specify the attributes in the object when creating the object, the syntax is: {property name: property value, property name: property value...} .
The attribute name of the object literal can be quoted or not. It is recommended not to add it. If you want to use some special names, you must add quotes.
Attribute name and attribute value are a set of name-value pair structure. The name and value are connected by ":", and multiple name-value pairs are separated by ",". If there are no other attributes after an attribute, then Don't write ",".
P51 51. Introduction to Silicon Valley_JS Basics_Function 23:02
Function introduction
Function function:
- A function is also an object.
- Some functions (code) can be encapsulated in functions, and these functions (code) can be executed when needed.
- Some code can be saved in the function to be called when needed.
- When using typeof to check a function object, function is returned.
Add attributes to the function
Function creation method 1: String encapsulation code creation function
Function creation method 2: Function declaration
Using the function declaration to create a function:
Syntax:
function name of the function ([parameter 1, parameter 2 ... parameter N]) {// [] means "optional"
statement ...
}
Like the constructor method, the method of function declaration is clearer. Declare the function without writing ";" at the end.
Function creation method 3: Function expression
Use function expressions to create a function: create an anonymous function and assign the anonymous function to a variable (assignment statement, it is best to write ";" at the end).
var function name = function([formal parameter 1, formal parameter 2...formal parameter N]) { statement.... }
P52 52. Still Silicon Valley _JS Basic _ Function Parameters 11:35
Define a function to sum two numbers.
One or more formal parameters (formal parameters) can be specified in the () of the function. Multiple formal parameters are used and separated. Declaring a formal parameter is equivalent to declaring the corresponding variable inside the function, but not assigning a value .
