目录
1.什么是js?
js是运行在客户端(浏览器)上的一门解释性脚本编程语言(代码不需要预编译),需要解释器来执行。主要用于实现人机交互。
2.js书写的位置
一种是使用script标签直接写在HMTL代码head或body标签中,而是将js代码写在一个拓展为js的独立文件中,再在HTML文件中引用js文件,示例如下:
js文件内容如下:
项目运行结果如下:
理论上来说,上面四种书写js代码的方式都可以被实现,但是,考虑到实际开发中项目的规模以及开发中的规范,比较推荐的是第四种。
根据运行结果其实可以知道,项目是从上到下运行的,写在末尾的位置可以使浏览器更快地加载网页并展示给用户。怎么理解这个意思呢,用下面的案例一看便懂。
看上图,我现在在图中位置加了一串代码,让他取了n个随机数构成一个数组,然后再在网页中输出该数组的值,你猜猜,运行结果会是上面?
看到这个结果懂了吧!
3.js的基本输出语句
1.console.log():用于在控制台输出信息(给程序员调试程序用的)。
2.alert():用于弹出一个警告框,显示一条消息并等待用户关闭。
3.document.write():用于在文档中直接写入内容。
看懂了吧,console.log()主要用于开发阶段的调试和输出信息,alert()主要用于在用户界面中显示信息,而document.write()主要用于在网页中直接写入内容。
控制台怎么进,在设置里找到开发者工具,看看后面显示的快捷键,要么点击要么快捷键。
4.声明变量的方法
1.什么是变量?
通俗点来说,变量就是计算机用来装数据的盒子。
2.声明变量的方法。
我们以前学的都是用var,但22年开始它就已经被let和const替代了。根本原因有一:var允许多次声明同一个变量,这就好比你买了一套房子,突然被另一个人买走了,而你的房就成了后来者的了;原因二,var可以先使用再声明,它就不合理,这就跟你看上了栋房子,你还没付钱他就在你名下了,这不就离谱吗?
现在用实例来解释一下,内容如下图:
那串红色的提示就是在告诉你你这个arr2已经存在了,让你换个名字。
那么,学习let和const我们需要先区分二者,let声明的变量数据是可变的,而const是用来声明常量的。看以下案例,
根据显示的结果可以看到,变量的值更改成功了,而设定的常量无法变更,并在输出时告诉你该变量不可更改。
5.模板字符串
模板字符串用反引号(`
)分隔的字面量,允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。
当出现多个表达式时,模板字符串显然更加方便。
6.变量类型的隐式转换
最典型的隐式转换就是+。
注意实例6,它常用于对要求输入数字型(如金额、数量等)输入框的内容进行隐式转换。
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>
<style>
h1 {
text-align: center;
}
table,
th,
td {
border: 2px black solid;
border-collapse: collapse;
margin: 0px auto;
}
table {
height: 100px;
width: 600px;
text-align: center;
}
</style>
</head>
<body>
<h1>钻戒订单</h1>
<script>
let price = +prompt('请输入商品的价格');
let num = +prompt('请输入商品的数量');
let place = prompt('请输入商品的地址');
let sum = price * num;
document.write(`
<table>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>总价</th>
<tr>
<td>DR钻戒</td>
<td>${price}</td>
<td>${num}</td>
<td>${sum}</td>
<td>${place}</td>
</tr>
</table>
`)
</script>
</body>
</html>
本文内容参考自B站黑马程序员视频:
黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili