前端学习-JavaScript学习-js基础01
学习教程：黑马程序员视频链接
JS简介
JS组成
JavaScrip = ECMAscript（语言基础）+web API
web API=BOM+DOM
资料查询网站：MDN
<!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>
.ayu {
background-color: purple;
}
</style>
</head>
<body>
<button class="ayu">button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<script>
let bts = document.querySelectorAll('button');
for(let i = 0;i < bts.length;i++) {
bts[i].addEventListener('click',function () {
document.querySelector('.ayu').className = '';
this.className = 'ayu';
})
}
</script>
</body>
</html>
JS书写位置
1、内部JS
书写位置：页面底部，前（因为浏览器按顺序加载HTML元素，不写在最后可能因为元素还没加载而没有实现对应效果
2、外部JS
通过.js文件以及以下语句实现
<script src="./js/01-js.js"></script>
3、内联JS
<button onclick="alert('this is js')"></button>
数据类型
基本数据类型
number,string,boolean,null,undefined
number
数据类型练习01
<!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>
const PI = 3.14;
let radius = prompt('please input a number');
document.write(PI*radius*radius);
</script>
</body>
</html>
string
字符串类型需要用引号包裹
'' --单引号
"" --双引号
`` --反引号
模板字符串-使用反引号+${}
<!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 age = prompt('your age:');
let uname = prompt('your name:');
document.write(`your name is ${uname},and your age is ${age} `);
</script>
</body>
</html>
字面量
true,false 是常量，非字面量
快速理解JavaScript中字面量、变量与常量
引用数据类型
object
检测数据类型
typeof x //建议用这种
typeof(x)
类型转换
隐式转换
console.log(1 + '1'); \\输出11
console.log(+'123'); \\可将字符串转为数字型
显示转换
Number('123')
parseFloat('12.34ppp')
parseInt('12.34ppp')
类型转换练习01
<!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>
console.log(parseFloat('12.34ppp'));
console.log(parseFloat('12ppp'));
console.log(parseFloat('aaa12.34ppp'));
console.log(parseInt('12.34ppp'));
console.log(parseInt('12ppp'));
console.log(parseInt('aaa12.34ppp'));
let num1 = prompt('please input num1:');
let num2 = +prompt('please input num2:');
document.write(`the sum of two nums is ${Number(num1) + num2}`);
</script>
</body>
</html>
案例练习
<!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>
h2 {
text-align: center;
}
/* 合并边框 */
table {
border-collapse: collapse;
height: 80px;
text-align: center;
}
th {
padding: 6px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let price = +prompt("please input the price:");
let num = +prompt("please input the num:");
let totalPrice = price*num;
let addr = prompt("please input the address:");
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>地址</th>
</tr>
<tr>
<td>小米手机</td>
<td>${price}</td>
<td>${num}</td>
<td>${totalPrice}</td>
<td>${addr}</td>
</tr>
</table>
`);
</script>
</body>
</html>
分类:
前端学习 / JavaScript学习
, 前端学习
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！