(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)
object
1. What is the object
Object (object): A data type in JavaScript
can be understood as an unordered data collection. Note that an array is an ordered data collection used
to describe something, such as describing a person. A person has information such as name, age, gender, and functions such as eating, sleeping, and typing codes. ,
jump , rap) => use function representationlet obj= { uname:'zxc', age:18, sex:'man' }
2. Object use
1. Object declaration syntax
For example:
In actual development, we often use curly braces. {} is an object literal
2. An object consists of properties and methods
Attribute : information or feature (noun). Such as mobile phone size, color, weight, etc...
Method : function or behavior (verb). Such as mobile phone calls, text messages, play games...
3. Properties
Data descriptive information is called attributes, such as a person's name, height, age, gender, etc., which are generally nominal.
let obj= { uname:'zxc', age:18, sex:'man' }Attributes appear in pairs, including attribute names and values, and English is used between them : separated
Use English between multiple attributes , separated
Attributes are variables attached to objects (variables outside, attributes inside objects)
attribute names can use "" or '', generally omitted, unless the name encounters special symbols such as spaces, dashes, etc.
properties - check
After declaring an object and adding several attributes, you can use . to obtain the value corresponding to the attribute in the object, which is called attribute access.
Syntax: objectname.propertyThe simple understanding is to get the attribute value in the object.
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
document.write(obj.age)
document.write(`<br>`)
document.write(obj.sex)The web page appears as:
Attribute - Another way of writing Cha
For attributes such as multi-word attributes or ze-, the dot operation cannot be used.
We can take: object ['property'] way, single quotes and double quotes are wideSummary:
Use the dot syntax directly when it is not necessary, and use the [ ] syntax when you need to parse variables
let obj=
{
"uname-123":'zxc',
age:18,
sex:'man'
}
document.write(`<br>`)
document.write(obj["uname-123"])The web page appears as:
Properties - change
Syntax: objectname.property = newvalue
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
document.write(obj.age)
document.write(`<br>`)
obj.age=19
document.write(obj.age)The web page appears as:
attribute - increase
Syntax: objectname.newproperty = newvalue
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
obj.live='happy'
console.log(obj);The console shows as:
Properties - delete
Syntax: delete objectname.attribute
let obj=
{
uname:'zxc',
age:18,
sex:'man'
}
delete obj.age
console.log(obj);The console shows as:
5. Methods in Objects
The behavioral information of the data is called a method, such as running, singing, etc., which is generally a verb, and its essence is a function.
1. A method is composed of a method name and a function, separated by : 2.
English is used between multiple attributes , separated
3. The method is a function attached to the object
4. The method name can use "" or '', which is generally omitted unless the name encounters special symbols such as spaces, dashes, etc.
6. Call the method in the object
After declaring the object and adding several methods, you can use . to call the function in the object, which I call method call.
Formal and actual parameters can also be added
3. Traversing objects
The problem of for traversing objects:
the object does not have a length property like an array, so the length cannot be determined
. There are unordered key-value pairs in the object, which is irregular. Unlike the regular subscripts in the array
Generally, it is not necessary to traverse the array in this way. It is mainly used to traverse the object . The k
in the for in syntax is a variable, which represents the property name of the object in turn during the loop.
<!--
// 定义一个存储了若干学生信息的数组
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
需求：根据以上数据渲染生成表格
分析：
1. 打印表格 头部和尾部
2. 中间的行遍历数组，然后填充对象数据 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
{
width: 600px;
text-align: center;
}
table,
th,
td
{
border: 1px solid #ccc;
border-collapse: collapse;
}
caption
{
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr
{
height: 40px;
cursor: pointer;
}
table tr:nth-child(1)
{
background-color: #ddd;
}
table tr:not(:first-child):hover
{
background-color: #eee;
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- script写到这里 -->
<script>
// 1. 数据准备
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' },
{ name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
]
// 2. 渲染页面
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${i + 1}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>
`)
}
</script>
</table>
</body>
</html>The web page appears as:
4. Built-in objects
What are built-in objects?
Objects provided by JavaScript, including various properties and methods for developers to call
document.write()
console.log()
Built-in object - Math
Introduction: The Math object is a "mathematical" object provided by JavaScript
Function: Provides a series of methods for doing mathematical operations
The Math object contains the following methods:
random: generate a random number between 0 and 1 (including 0 but not including 1)
ceil: round up
floor: round down
max: find the maximum number
min: find the minimum number
pow: power operation
abs: absolute value
Generate random numbers in any range
Math.random() random number function, returns a random decimal between 0 - 1, including 0 but not including 1 [0, 1)
How to generate random numbers from 0-10?
How does Math.floor(Math.random() * (10 + 1))
generate a random number of 5-10?Math.floor(Math.random() * (5 + 1)) + 5
How to generate a random number between NM
Math.floor(Math.random() * (M - N + 1)) + N
<!-- 需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
分析：
①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.生成随机数
function getRandom(N,M)
{
return Math.floor(Math.random()*(M-N+1))+N
}
let random=getRandom(1,10)
while(1)
{
//2.用户输入
let num = +prompt('请输入数字')
//3.判断输出
if(num>random)
{
alert('猜大了')
}
else if(num<random)
{
alert('猜小了')
}
else
{
alert('猜对了')
break
}
}
</script>
</body>
</html>