JavaScript基础
函数
语法:
function 函数名(形参表){代码}
代码中加
return
语句则可以返回值,默认返回值为undefined两个相同的函数,后面会覆盖前面
命名规则:
前缀为动词
传参注意事项
- 实参个数 > 形参个数 ==> 没用上的实参被忽略
- 实参个数 < 形参个数 ==> 没赋予值得形参为undefined
作用域
全局变量 | 在函数体外定义 |
---|---|
局部变量 | 在函数体中定义 |
访问原则:
有命名冲突,先用局部变量
匿名函数
没有函数名的函数,如何调用
-
函数表达式
let fn = function(){}
-
立即执行
(function(){})();
防止变量污染多个要用分号隔开,前后都要
案例:
函数传参为数组名
let arr = [1, 2, 3, 4]
function calArr(a) {
let all = 0
for (let i = 0; i < a.length; i++) {
all += a[i]
}
document.write(all)
}
calArr(arr)
局部与全局的区别
function f1() {
let num = 123
function f2() {
console.log(num)
}
}
f2()
let num = 456
f1()
匿名函数
//1.函数表达式调用
let fn = function () { document.write('hello') }
fn();
//2.立即执行
(function () { document.write('byebye') })();
转换时间
let time = +(prompt('请输入秒数'))
//1.小时
let hour = parseInt(time / 3600)
time -= hour * 3600
if (hour < 10) {
document.write(`0${hour}h`)
} else {
document.write(`${hour}h`)
}
//2.分钟
let minute = parseInt(time / 60)
time -= minute * 60
if (minute < 10) {
document.write(`0${minute}m`)
} else {
document.write(`${minute}m`)
}
//3.秒数
let sec = time
if (sec < 10) {
document.write(`0${sec}s`)
} else {
document.write(`${sec}s`)
}
对象
无序的数据集合 ==> 用来描述某个对象:静态特征(属性)和动态行为(方法)
声明语法
let 对象名 = {}
或 let 对象名 = new object()
属性书写语法
uname : '猪猪侠' ,
age : 18
若属性名中有特殊符号,用引号包住
方法书写
方法名 : function(形参表) {代码}
==若后面还有方法需要加,
有特殊符号也可用引号包起
方法调用
对象名.方法名
增删改查
增
对象名.新属性 = 属性值
删
delete 对象名.属性名
仅作了解
改
对象名.已有属性名 = 新属性值
查
两种方法
对象名.属性名
对象名['属性名']
遍历对象
可以用来遍历数组,但不推荐
书写语法
for(let k in 对象名){console.log(对象名[k])}
k
代表的是属性名,可以用其他字母代替,但最好是k
或key
经验
script
可以写在body
标签的中部,可以更好地进行循环操作
内置对象
JavaScript内部提供的对象 ==> 给开发者调用
如
- document.write()
- console.log()
Math中提供了一系列做数学操作的运算方法
- random 0~1的随机数,包含0但不包含1
- ceil 向上取整
- floor 向下取整
- max 找最大
- min 找最小
- pow 幂运算
- abs 绝对值
实际应用
N ~ M 之间的随机数
Math.floor(Math.random()*(M - N + 1) + N)
案例
对象声明
let goods = {
name: '小米10 青春版',
number: '100012816024',
weight: '0.05kg',
address: '中国大陆'
}
document.write(goods.name)
document.write('</br>')
document.write(goods.number)
document.write('</br>')
document.write(goods.weight)
document.write('</br>')
document.write(goods.address)
document.write('</br>')
对象的增和改
let goods = {
name: '小米10 青春版',
number: '100012816024',
weight: '0.05kg',
address: '中国大陆'
}
goods.name = '小米10 PLUS'
goods.color = 'pink'
document.write(goods)
对象的方法调用
let player = {
dance: function () {
document.write('dance')
document.write('</br>')
},
song: function () {
document.write('sing')
document.write('</br>')
}
}
//对象方法调用
player.dance()
player.song()
遍历对象数组
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
//遍历对象数组
for (let i = 0; i < students.length; i++) {
for (let k in students[i]) {
console.log(students[i][k])
}
}
数组对象渲染生成表格
<!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 thead {
background-color: #ddd;
}
table tr:not(。thead):hover {
background-color: #eee;
}
</style>
</head>
<body>
<script>
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
document.write(`<table>
<caption>学生列表</caption>
<thead>
<tr class = "thead">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>家乡</td>
</tr>
</thead>
<tbody>`)
for (let i = 0; i < students.length; i++) {
document.write(`<tr>`)
document.write(`<td>${i + 1}</td>`)
for (let k in students[i]) {
document.write(`<td>${students[i][k]}</td>`)
}
document.write(`</tr>`)
}
document.write(`</tbody>`)
</script>
</body>
</html>
随机点名案例
let nameArr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let n = Math.floor(Math.random() * (6 - 0) + 0)
document.write(nameArr[n])
nameArr.splice(n, 1)
document.write(`</br>`)
document.write(nameArr)
猜数字
let n = Math.floor(Math.random() * (10 - 1) + 1)
let num = +(prompt('请输入你要猜的数字'))
while (n !== num) {
num = +(prompt('猜错了,继续猜'))
}
alert('终于猜对了老弟')
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>
`)
}
</script>
</ul>
</div>
</div>
</body>
</html>
注意
代码执行顺序
按照编写顺序,但alert和prompt优先,先于页面渲染执行
数据类型在内存中的情况简单比喻
简单的数据类型将值放在栈空间中,而复杂的数据类型将数据地址放在栈空间中,然后将一系列的值放在堆空间中
思维导图