1. 对象_属性和方法
<!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>// 声明对象 声明对象使用大括号，大括号就是对象字面量let ym = {/* 属性：事物的描述信息称为属性 一般是名词属性就是依附在对象上的变量（对象外是变量，对象内是属性）*/name: '杨幂',age: 18,weight: 90,/* 方法：事物的行为性称为方法 一般是动词方法是依附在对象中的函数 （对象外是函数，对象内是方法）*/dance: function () {console.log('dance方法')},sing: function (song) {console.log(`sing${song}`)},}console.log(ym)// 访问对象属性 对象.属性名console.log(ym.age)console.log(ym.name)console.log(ym.weight)// 调用对象方法 对象.方法名()ym.dance()ym.sing('爱的供养')ym.sing('你没事儿吧？吃溜溜梅')</script>
</body></html>
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>
</head><body><!-- 对象属性和方法的简写 --><script>let name = prompt('输入姓名')let age = prompt('输入年龄')let obj = {// 在对象中，如果属性名和属性值的变量一致，可以简写只写属性名即可// name: name,name,// age: 18,age,// 在对象中，方法（函数）可以简写/* sing: function (song) {console.log(`sing${song}`)}, */sing(song) {console.log(`sing${song}`)}}console.log(obj)</script>
</body></html>
3. 操作对象
<!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><!-- 操作对象：增删改查查：对象.属性 对象['属性']（多词属性或者需要解析变量的时候使用 [] 语法，其余的直接使用点语法）改：对象.属性 = 新值增：对象.新属性 = 新值（改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改）删：delete 对象.属性（了解）--><script>let ym = {name: '杨幂',age: 18,weight: 90,dance: function () {console.log('dance方法')},sing: function (song) {console.log(`sing${song}`)},}console.log(ym)// 改ym.age = 19console.log(ym.age)ym.dance = function () {console.log('dance方法 改后')}ym.dance()// 增ym.gender = '女'console.log(ym)// 删delete ym.gender// 删除方法时不加小括号，调用时候加delete ym.dance</script>
</body></html>
4. 案例1_产品对象
<!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>let goods = {name: '小米10青春版',num: '100012816024',weight: '0.55kg',address: '中国大陆',}console.log(goods.address)console.log(goods.name)console.log(goods.num)console.log(goods.weight)console.log('------------')// 修改商品名称goods.name = '小米10PLUS'// 新增商品颜色goods.color = '粉色'console.log(goods.address)console.log(goods.name)console.log(goods.num)console.log(goods.weight)console.log(goods.color)</script>
</body></html>
5. 对象['属性']
<!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>let Person = {'actor-name': '杨幂',age: 18,weight: 90,}console.log(Person) // {actor-name: '杨幂', age: 18, weight: 90}console.log(Person.age) // 18// 找不到console.log(Person.actor - name) // NaN// 报错// console.log(Person.'actor-name')// 正确操作console.log(Person['actor-name']) // 杨幂</script>
</body></html>
6. 遍历对象 for in
<!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><!-- 利用for in遍历对象 --><script>let Person = {'actor-name': '杨幂',age: 18,weight: 90,}/* 键值对 键key 值value变量k的数据类型为字符串一般不用这种方式遍历数组，主要是用来遍历对象*/for (let k in Person) {// k是获得对象的属性名console.log(k)// 对象名[k]是获得属性值console.log(Person[k])}/*actor-name杨幂age18weight90*//* for in同样可以遍历数组（不常用）常用for循环三要素 for (let i = 0; i < array.length; i++) { }来遍历数组*/let names = ['Tom', 'Jerry', 'Joy']/* for (let k in names) {console.log(k)console.log(names[k])} *//* 0Tom1Jerry2Joy*/for (let i = 0; i < names.length; i++) {console.log(names[i])}/*TomJerryJoy*/</script>
</body></html>
7. 遍历对象数组
<!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>// 对象数组 → 数组里包对象let students = [{ name: '小明', age: 18, sex: '男', hometown: '河北省' },{ name: '小红', age: 19, sex: '女', hometown: '河南省' },{ name: '小刚', age: 17, sex: '男', hometown: '山西省' },{ name: '小丽', age: 18, sex: '女', hometown: '山东省' },]// 遍历students数组for (let i = 0; i < students.length; i++) {// 输出students数组中所有对象console.log(students[i])// 输出students数组中所有对象的name属性值console.log(students[i].name)}</script>
</body></html>
8. 案例2_渲染学生信息表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渲染学生信息表案例</title><style>h2,p {text-align: center;}.student {overflow: hidden;margin: 0 auto;/* 合并相邻边框 */border-collapse: collapse;text-align: center;border-radius: 10px 10px 0 0;}.student tr {cursor: pointer;}.student th {padding: 5px 50px;color: #fff;}.student,th,td {border: 1px solid #fff;line-height: 45px;}/* 给行添加渐变背景颜色 */.student thead tr {background-image: linear-gradient(to right, #f46e33, #f057a5);}/* 从第2行开始修改背景颜色 */.student tbody tr {background-image: linear-gradient(to right, #fdf0eb, #fdeff6);}/* 从第2行开始 最后一个单元格颜色变化 */.student tbody tr :last-child {color: #f282bb;}/* 第一行鼠标经过不要变颜色 */.student tbody tr:hover {background-image: linear-gradient(to right, #f9e3da, #f9d6e8);}</style>
</head><body><h2>学生信息</h2><p>将数组中存储的学生信息，以表格的形式把数据渲染到页面中...</p><table class="student"><!-- 表头 --><thead><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr></thead><!-- 表格主体 --><tbody><!-- <tr><td>1</td><td onclick="update()">小明</td><td>18</td><td>男</td><td>河北省</td></tr> --><!-- <tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr> --></tbody></table><script>// 数据let students = [{ name: '小明', age: 18, sex: '男', hometown: '河北省' },{ name: '小红', age: 19, sex: '女', hometown: '河南省' },{ name: '小刚', age: 17, sex: '男', hometown: '山西省' },{ name: '小丽', age: 18, sex: '女', hometown: '山东省' },{ name: '小强', age: 18, sex: '男', hometown: '北京市' }]// 渲染function render() {let strStudents = ''for (let i = 0; i < students.length; i++) {let strValue = `<td>${i + 1}</td>`for (let k in students[i]) {// console.log(i, k)// 错误 ${k}需用引号包裹 字符串解析？// strValue += `<td onclick="update(${i}, ${k} )">${students[i][k]}</td>`strValue += `<td onclick="update(${i},'${k}')">${students[i][k]}</td>`// ondblclick 双击// strValue += `<td ondblclick="update(${i},'${k}')">${students[i][k]}</td>`}// console.log(strValue)strStudents += `<tr>${strValue}</tr>`}document.querySelector('tbody').innerHTML = strStudents}render()function update(index, key) {// console.log(index, key)let value = prompt('请输入修改后内容')if (value) {students[index][key] = valuerender()}}</script>
</body></html>
9. 内置对象_Math
<!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><!-- 内置对象：JavaScript内部提供的对象，包含各种属性和方法给开发者调用document.querySelector(),console.log() 都是JS内置对象的方法--><!-- 内置对象-Math --><script>console.log(Math)// 圆周率console.log(Math.PI) // 3.141592653589793// 最大值console.log(Math.max(10, 23, 45, 1, 2, 4, 456)) // 456// 最小值console.log(Math.min(10, 23, 45, 1, 2, 4, 456)) // 1// 绝对值console.log(Math.abs(-10)) // 10// 向上取整console.log(Math.ceil(1.1)) // 2console.log(Math.ceil(1.9)) // 2// 向下取整console.log(Math.floor(1.1)) // 1console.log(Math.floor(1.9)) // 1// 四舍五入取整console.log(Math.round(1.1)) // 1console.log(Math.round(1.9)) // 2console.log(Math.round(1.5)) // 2/* 四舍五入规则：如果小数部分小于0.5，则向下舍入（即向零的方向）。如果小数部分大于或等于0.5，则向上舍入（即远离零的方向）。四舍五入规则是相对于零的方向来定义的。对于负数，远离零的方向实际上是数值更小的方向。 */console.log(Math.round(-1.5)) // -1console.log(Math.round(-2.5)) // -2// 随机数(最常用) 0-1之间的随机小数(取不到1)console.log(Math.random()) // 0.6042880830773085(随机)// 实际开发中需要随机整数// 0-4console.log(Math.floor(Math.random() * 5)) // 4(随机)// 生成N-M之间的随机整数// Math.floor(Math.random() * (差值 + 1)) + 最小值// 5-15console.log(Math.floor(Math.random() * 11) + 5)</script>
</body></html>
10. 案例3_随机显示名字
<!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>let names = ['Tom', 'Jerry', 'Rose', 'Joy', 'Jack', 'Lisa', 'Yuqi']let i = Math.floor(Math.random() * names.length)console.log(names[i])</script>
</body></html>
11. 案例4_猜数字游戏
<!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><!-- 猜数字游戏需求：程序生成 1~10 之间的一个随机整数，用户输入一个数字，返回猜的是否正确①：如果输入数字大于随机数字，就提示：'数字猜大了，继续猜'②：如果输入数字小于随机数字，就提示：'数字猜小了，继续猜'③：如果输入数字等于随机数字，就提示猜对了，程序结束--><script>let random = Math.floor(Math.random() * 10 + 1)for (; ;) {let num = +prompt('请输入数字')if (num > random) {alert('数字猜大了，继续猜')} else if (num < random) {alert('数字猜小了，继续猜')} else if (num === random) {alert('恭喜你猜对了！')break}}</script>
</body></html>
12. 案例5_生成随机颜色
<!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><h1>一级标题</h1><h2>二级标题</h2><!-- 生成随机颜色需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。①：如果参数传递的是 true 或者无参数，则输出 一个随机十六进制的颜色②：如果参数传递的是 false ，则输出 一个随机rgb的颜色--><script>function getRandomColor(flag) {if (flag !== false) {// 十六进制let sixteen = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']let RandomColor = '#'for (let i = 0; i < 6; i++) {let num = Math.floor(Math.random() * 16)RandomColor += sixteen[num]}// console.log(RandomColor)return RandomColor} else {// rgblet r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)let RandomColor = `rgb(${r},${g},${b})`// console.log(RandomColor)return RandomColor}}console.log(getRandomColor(true)) // #f02db4console.log(getRandomColor()) // #de9c1dconsole.log(getRandomColor(false)) // rgb(129,198,236)// 直接修改元素的 style.color 属性 ; innerHTML 替换整个标签document.querySelector('h1').style.color = getRandomColor(true)document.querySelector('h2').style.color = getRandomColor(false)</script>
</body></html>
13. 案例6_学成在线页面渲染
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线</title><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 精品课程 --><div class="course wrapper"><div class="hd"><h3>精品推荐</h3><a href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a></div><div class="bd"><ul class="common"><!-- <li><a href="#"><div class="pic"><img src="./uploads/quality01.png" alt=""></div><h4>JavaScript数据看板项目实战</h4><p><span>高级</span> · <i>1125</i>人在学习</p></a></li> --></ul></div></div><script>// 综合案例代码// 1. 利用对象数组的数据渲染页面let data = [{src: './uploads/quality01.png',title: 'JavaScript数据看板项目实战',num: 1125},{src: './uploads/quality02.png',title: 'Vue.js实战——面经全端项目',num: 2726},{src: './uploads/quality03.png',title: '玩转Vue全家桶，iHRM人力资源项目',num: 9456},{src: './uploads/quality04.png',title: 'Vue.js实战医疗项目——优医问诊',num: 7192},{src: './uploads/quality05.png',title: '小程序实战：小兔鲜电商小程序项目',num: 2703},{src: './uploads/quality06.png',title: '前端框架Flutter开发实战',num: 2841},{src: './uploads/quality07.png',title: '熟练使用React.js——极客园H5项目',num: 95682},{src: './uploads/quality08.png',title: '熟练使用React.js——极客园PC端项目',num: 904},{src: './uploads/quality09.png',title: '前端实用技术，Fetch API 实战',num: 1516},{src: './uploads/quality10.png',title: '前端高级Node.js零基础入门教程',num: 2766},{src: './uploads/quality10.png',title: '前端高级Node.js零基础入门教程',num: 27669}]console.log(data.length)// 2. 利用循环来做字符串拼接生成多个li标签，之后把生成的li标签放入容器 ul 里面渲染即可let strData = ''for (let i = 0; i < data.length; i++) {strData += `<li><a href="#"><div class="pic"><img src="${data[i].src}" alt=""></div><h4>${data[i].title}</h4><p><span>高级</span> · <i>${data[i].num}</i>人在学习</p></a></li>`}document.querySelector('.common').innerHTML = strData</script>
</body></html>
14. 数据类型存储
<!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><!-- JS 数据类型整体分为两大类：基本数据类型（简单数据类型） number、string、boolean、undefined、null引用数据类型（复杂数据类型） Object、Function、Array--><!-- 内存中堆栈空间分配区别：栈: 优点访问速度快，基本数据类型存放到栈里面堆: 优点存储容量大，引用数据类型存放到堆里面--><script>// 1. 基本数据类型放 栈 里面// 基本数据类型赋值的是 值let age = 18// 2. 引用数据类型放 堆 里面// 引用数据类型赋值的是 地址，真正数据存放在堆空间中let arr = [1, 2]let x = 10let y = xx = 20console.log(y) // 10let obj1 = {age: 18,}let obj2 = obj1obj1.age = 20console.log(obj2.age) // 20</script>
</body></html>
15. 变量声明
<!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><!-- const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化但是对于引用数据类型，const声明的变量，里面存的不是 值，是 地址所以： const声明的变量不可以修改，本质是说，const声明的变量 地址不能修改--><!-- 建议数组和对象使用 const 来声明 --><script>let num = 10num = 20console.log(num) // 20// const age = 20// age = 30// console.log(age)// 复杂类型的数据建议用const声明 → 好处：固定了内存地址，性能高// 不影响修改堆里面保存的数据const arr = []// 用法错误，会修改内存地址// arr = [10, 20]// 向数组中添加数据arr.push(10)console.log(arr) // [10]</script>
</body></html>
