1.javaScript学习路线
![](https://i-blog.csdnimg.cn/blog_migrate/86aa27a10865eafbf9cf71554bad4e50.png)
2.javaScript介绍
![](https://i-blog.csdnimg.cn/blog_migrate/3ea3e2318f44e1ec8b64c9399d0a89a6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c53c06adc960e4341d8cbcd24916acbc.png)
3.书写位置
1.内部
![](https://i-blog.csdnimg.cn/blog_migrate/d3534e23128e4286bca8b2e1b9afb386.png)
2.外部
![](https://i-blog.csdnimg.cn/blog_migrate/9122ea7d10262c172f94a4b51eeae9b3.png)
3.内联
![](https://i-blog.csdnimg.cn/blog_migrate/77e55dcb5acb825bbf74c9072642c92e.png)
4.小结
![](https://i-blog.csdnimg.cn/blog_migrate/f0d2e7b741700bef174f702463f0a2c4.png)
5.课堂练习
![](https://i-blog.csdnimg.cn/blog_migrate/e4e2fa1da0787f0acf1c7a486e8605e6.png)
<!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>Document</title>
</head>
<body>
<!-- <script>
alert("勤奋")
</script> -->
<script src="./my.js"></script>
</body>
</html>
alert("我要努力学习js")
4.注释
![](https://i-blog.csdnimg.cn/blog_migrate/97feab264d9ff80ee6cf6f8f6f024d9c.png)
5.结束符号
![](https://i-blog.csdnimg.cn/blog_migrate/c13ca03448afbceca4255f4997491f9d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d11caaff33a284f136d02142c5a886cd.png)
6.输入输出语法
1.输出
![](https://i-blog.csdnimg.cn/blog_migrate/4cfe41a2868c6def1da1beac8fcb20e2.png)
2.输入
![](https://i-blog.csdnimg.cn/blog_migrate/440e4ebb01dd8608e16dcf178f6f0553.png)
3.练习
![](https://i-blog.csdnimg.cn/blog_migrate/e519d40d6c347b300d5337d2128160b3.png)
<!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>Document</title>
</head>
<body>
<script>
alert("你好js")
document.write("js我来了")
console.log("他会魔法")
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/72a256bc4c2a4f7807153b3404d04e32.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8fbb0b82ffde349720e7fa67b74e042c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0170c417784457f6554e1275098ff2ac.png)
7.字面量
![](https://i-blog.csdnimg.cn/blog_migrate/316e8868f0892b5eb197432b980c7aed.png)
8.总结
![](https://i-blog.csdnimg.cn/blog_migrate/27095c8144b51c6f0e913740c2985833.png)
3.变量
1.变量是什么
![](https://i-blog.csdnimg.cn/blog_migrate/0649b22c69001b2da410ee2af61363c1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/514d8c892a46c9add9b9f9c5010628f9.png)
2.基本使用
变量声明
![](https://i-blog.csdnimg.cn/blog_migrate/0901a236cd1d4bcb582e2e9ad8002ab3.png)
2.变量赋值
![](https://i-blog.csdnimg.cn/blog_migrate/427fd7e46d161cce13cf8368394b17b3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a485308da5d2842d8ee240d6fcc77aa3.png)
3.总结
![](https://i-blog.csdnimg.cn/blog_migrate/834df31de26ed49b1fcae83ede868642.png)
4.课堂练习
![](https://i-blog.csdnimg.cn/blog_migrate/b8e417ff8f8f568d6468f16c3d0765d6.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=scr, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = 20
let uname = "张三"
console.log(num);
console.log(uname);
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/9224a30fb02bee1b6c4539e25b6ee9d1.png)
5.更新变量
![](https://i-blog.csdnimg.cn/blog_migrate/f2bd681addac9c91c0c16851ca50bb60.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b9910da01d36b642c1c1dd0a9452f664.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6b210d68d417a3ba7c0eaf99013fbc51.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5d22593a3f8bed952188a296b81d7fde.png)
6.声明多个变量
![](https://i-blog.csdnimg.cn/blog_migrate/6cbd47c8a232d4014794c75c2d9b920f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/277e53f4c811936b538cc35338058844.png)
7.总结
![](https://i-blog.csdnimg.cn/blog_migrate/8b68cd968bde44af2c92e610db8d67a3.png)
8.案例练习
1.弹出名字
![](https://i-blog.csdnimg.cn/blog_migrate/ccb398126507d4b5f1180baa5b13ec16.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a38aa02affdc4077542aa5d8e7dc8f7d.png)
2.交换变量的值
![](https://i-blog.csdnimg.cn/blog_migrate/5dcac71145b0a7fc884a736eaae6cc26.png)
![](https://i-blog.csdnimg.cn/blog_migrate/276d1054902875046c4c88dfb737d503.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f8376821fe8cc936a297d46db1488647.png)
9.变量的本质
![](https://i-blog.csdnimg.cn/blog_migrate/70cde18ca8c4b246359d0f120510e4cf.png)
10.命名规范和规则
![](https://i-blog.csdnimg.cn/blog_migrate/06157638511e9976e881bc641a367cb7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c6e3a0bd9da6fd4db12c38c611a293bd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/27c0b1eaca96588fec8182b88693bb95.png)
11.课堂练习
![](https://i-blog.csdnimg.cn/blog_migrate/eaedf3c6af29a5a455a648d0b4126d3b.png)
<!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>Document</title>
</head>
<body>
<script>
let name = prompt("请输入名字")
let age = prompt("请输入年龄")
document.write(name, age)
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/221478f07bf4f649599b80190fbc9923.png)
12.let和var区别
![](https://i-blog.csdnimg.cn/blog_migrate/8e840d515ef0ab19bf1d5af6f19d9c1b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/24a84b6971373d34cea7e2896c42a13c.png)
4.变量拓展-数组
1.简介
![](https://i-blog.csdnimg.cn/blog_migrate/5c366eb0c0884d8c7ccc94d4abe8fca1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/df871bdc66c46e99199cf98a42351d60.png)
2.案例
![](https://i-blog.csdnimg.cn/blog_migrate/17565bea485be8832bd6ff14848df082.png)
3.总结
![](https://i-blog.csdnimg.cn/blog_migrate/d7360f89f6f36f6d0f3f1da5382cd0ed.png)
5.常量
1.概念
![](https://i-blog.csdnimg.cn/blog_migrate/d673a633d15011ed36a27522ac80703f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/86db6e6e8fbccafa3f95ce90d8020030.png)
![](https://i-blog.csdnimg.cn/blog_migrate/704af6ce3ad6aeb85611bc6a9c1ea590.png)
2.总结
![](https://i-blog.csdnimg.cn/blog_migrate/d5cff413e8fdeaf46cecf5e54a4f8780.png)
6.数据类型
1.数据类型
![](https://i-blog.csdnimg.cn/blog_migrate/6c1ba68fe1fd3069b2b3107c4138c56d.png)
2.数字类型
1.简介
![](https://i-blog.csdnimg.cn/blog_migrate/cacd4c5d95968971d6f8ffa8363e4a35.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c2e7a385f2c77c2179325ae3fb7962fa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d485414715efdf364bd348178306c875.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1d1c34f65dc3192f90fe79f6336b59f8.png)
2.总结
![](https://i-blog.csdnimg.cn/blog_migrate/8e48618dc458e9072e3c963380ddfb38.png)
3.案例
![](https://i-blog.csdnimg.cn/blog_migrate/c14c6c060fa3cebe79c3091cd339416a.png)
<!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>Document</title>
</head>
<body>
<script>
const pi = 3.14
let r = prompt("请输入圆的半径")
document.write(pi *r *r)
</script>
</body>
</html>
4.特殊值NaN
![](https://i-blog.csdnimg.cn/blog_migrate/899f29539c4367599b3895222e6f45fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7918845ead548c2a28bd423095a2eb94.png)
3.字符串类型string
1.简介
![](https://i-blog.csdnimg.cn/blog_migrate/4a6e5115d902f439d04658f98c165395.png)
![](https://i-blog.csdnimg.cn/blog_migrate/98bcf69a195cbde06e9bdedf6c8e14c3.png)
2.拼接
![](https://i-blog.csdnimg.cn/blog_migrate/7e043c0155a88dd475f503f656d1dbcb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cb5ab407906127c7a914af1eae281d52.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5e72b1d7d5733673cc7dd6f25e366898.png)
3.模板字符串
1.简介
![](https://i-blog.csdnimg.cn/blog_migrate/343e8eecf1c83699858269f9e5dfe6b5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dc8c7a61d6c0d6c76987dc8c470b45f8.png)
2.总结
![](https://i-blog.csdnimg.cn/blog_migrate/61bf990ed74451031d5f1bae3ff0dc55.png)
3.案例
![](https://i-blog.csdnimg.cn/blog_migrate/a22bcacd9f28f38fb3d8f377d4230a3e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/458645e8678b4e6752051a004be3e871.png)
4.boolean
![](https://i-blog.csdnimg.cn/blog_migrate/88cffb630f7f0d926a04b5c1b164851f.png)
5.undefined
![](https://i-blog.csdnimg.cn/blog_migrate/10cb082e7c39f7f3d35ce9e8127464b1.png)
6.null
![](https://i-blog.csdnimg.cn/blog_migrate/9007f28f3317caf3d702c0616a3255a7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8079f8a4262d1c0123766911bfa1f11a.png)
7.总结
![](https://i-blog.csdnimg.cn/blog_migrate/75763c5a37941490d281b594c83d3612.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c4f5ba65c43c7f00ca2cd42e700eb696.png)
8.检测数据类型
![](https://i-blog.csdnimg.cn/blog_migrate/14b08a230c94431ee6416aac32787725.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3fd94f06ebffc1979ba7f5da6661af05.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c55e369d14c5638c30654f29cf157c39.png)
7.类型转换
1.为什么类型转换
![](https://i-blog.csdnimg.cn/blog_migrate/0050754fe71839a732dc81bea1c0c968.png)
2.隐式转换
![](https://i-blog.csdnimg.cn/blog_migrate/ddcbbf99a0d74bf870d8a79675949583.png)
![](https://i-blog.csdnimg.cn/blog_migrate/91e06dc60c6a805a9e62342613564ebb.png)
3.显式转换
![](https://i-blog.csdnimg.cn/blog_migrate/7abed644d3512f3f4fec97e34ecde385.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ecdffbc4d2a05ff1ca41fa32b5450171.png)
4.案例
![](https://i-blog.csdnimg.cn/blog_migrate/5121bee6da6e65c1e329d3f70a6d599a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3f37ab4df7c908a9230455934f1fcb86.png)
8.综合案例
1.案例1
![](https://i-blog.csdnimg.cn/blog_migrate/dc9c3891f281b44c8fc48de39f9a79ed.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b41bcb8c7563d4cf61a02f66ff5b315d.png)
<!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>Document</title>
<style>
* {
text-align: center;
font-weight: 400;
}
table {
/* 合并相邻边框 */
border-collapse: collapse;
}
th {
padding: 0 20px;
}
table,th,td {
border:1px solid black;
}
</style>
</head>
<body>
<script>
let name = prompt("请输入名称")
let money = prompt("请输入价格")
document.write(`<table>
<tr>
<th>商品名称</th>
<th>价格</th>
</tr>
<tr>
<td>${name}</td>
<td>${money}</td>
</tr>
</table>`)
</script>
</body>
</html>
2.常见错误
![](https://i-blog.csdnimg.cn/blog_migrate/a31d1ebdfa115a2d955dc88f55fd3c0b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1a18dcbec54bbe72c1f78612b04a42ef.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fc69401a46b026315f255da863e429dd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/03db056e85e6b4aa0d59d350b99b6387.png)
![](https://i-blog.csdnimg.cn/blog_migrate/031a1e7483a49298c07fa5d576e1a282.png)
9.单选题
![](https://i-blog.csdnimg.cn/blog_migrate/0747c792d2e956121afeef70ad0fddf9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ca1a92239ab22e2070c425e7e400909.png)
10.简答题
请说出变量的使用场景?
声明变量,申请内存空间,赋值
请说出基本数据类型有哪5种?
number,string,boolean,undefined,null
请说出模板字符串使用方法?
`${num1}`
下面代码输入结果是? ()
const num=10
console.log( num+11) 21
console.log( num+'11') 1011
console.log( num+ +'11') 21
下面代码输入结果是? ()
const num=10
console.log( typeofnum+'11') number11
console.log( typeof (num+'11'))string
console.log( typeof (num+ +'11'))number
11.编程题
1.获取用户信息
![](https://i-blog.csdnimg.cn/blog_migrate/5ebf5d8c3a043fbf2eeb18082806e5bd.png)
<!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>Document</title>
</head>
<body>
<script>
let name = prompt("请输入姓名")
let age = prompt("请输入年龄")
let gender = prompt("请输入性别")
console.log(`用户的姓名为${name}`)
console.log(`用户的年龄为${age}`)
console.log(`用户的性别为${gender}`)
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/33e77cf4d293ac606dbf5e76a5fedcca.png)
2.增加年龄
![](https://i-blog.csdnimg.cn/blog_migrate/2fffeec92c4b1cda9b2a2224dba32365.png)
<!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>Document</title>
</head>
<body>
<script>
let age = +prompt("请输入年龄")
alert(`据我估计,你五年后年龄为${age + 5}`)
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/49307a800e086d8f1d904593d10ac82f.png)
3.计算银行卡余额案例
![](https://i-blog.csdnimg.cn/blog_migrate/6ff834a4f831a2f39566e8dff9358dfc.png)
<!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>Document</title>
<style>
* {
text-align: center;
font-weight: 400;
}
th {
padding: 5px 20px;
}
table,th,td {
border-collapse: collapse;
border:1px solid black;
}
</style>
</head>
<body>
<script>
let total_money = +prompt("请输入总金额")
let elec = +prompt("请输入总电费")
let water = +prompt("请输入总水费")
let net = +prompt("请输入总网费")
let money = total_money - elec - water - net
document.write(`
<table>
<tr>
<th>总金额</th>
<th>电费</th>
<th>水费</th>
<th>网费</th>
<th>余额</th>
</tr>
<tr>
<td>${total_money}</td>
<td>${elec}</td>
<td>${water}</td>
<td>${net}</td>
<td>${money}</td>
</tr>
</table>
`)
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/75f8bd3f328cac4fe87095f16be5585d.png)
12.排错题
![](https://i-blog.csdnimg.cn/blog_migrate/54fa6d350fcf244852f9546e4033b254.png)
4.1
5行:关键字不能作为变量名
7行:变量名不能以字母开头
11行:const定义的常量不能二次赋值
4.2
5行:个实话输出字符串,是键盘上的esc下边那个键``,不是单引号