JavaScript笔记1
- 项目1.使用js在页面进行打印 ★
- 项目2.外部引用js文件 ★
- 项目3.弹出警告框 ★
- 项目4.确认用户选择（使用if语句）★★
- 项目5.询问用户 ★★
- 项目6.使用js重定向 ★★
注：js文件的位置一般在
<body>的最下方
使用js在页面进行打印
<script>
document.write("hello")
</script>
若无特殊标注，本文档引入js均为内部引入（使用
<script> </script>）
1.document.write("hello")
document.write("")是JavaScript中用于向 HTML 文档写入内容的方法。("")内写入的是html中显示的内容。
如本例，即在页面中显示 hello 字样，同时("")内也支持html标签，如document.write("<h2>hello</h2>")，在页面中会显示二级标题的 hello 字样。
外部引用js文件
<script src="2.3.js"></script>
我们用<script> </script>中的src属性用来指定js文件的路径
弹出警告框
<script>
alert("jspage hello")
</script>
在js中,我们使用alert("")弹出警告框，("")中为警告框显示的内容。
如本例的效果如下:
确认用户选择（使用if语句）
<script>
if (confirm("你选择的是？")) {
alert("yes!")
} else {
alert("no!")
}
</script>
1.if (confirm("你选择的是？")) {
本句中,if/else是一个条件语句(可理解为中文中的 如果/否则)，语法为if () {} else {},()中填写判断条件，
若用户的操作符合这个判断条件，执行if中的语句，否则执行else中的语句。
confirm("")是一个 提问框 ，可以根据用户的选择返回true或false，如本例，效果如下
当用户点击 确定 时，返回true 执行if语句，点击 取消 时，返回false 执行else语句
2.alert("yes!")
本句为if语句中的代码，点击 确定 时，返回true 执行此代码
弹出 警告框 显示("")中的内容，如本例显示 yes!
3.} else {
if语句结束，开始else语句
若返回的是true 则跳过
else语句
4.alert("no!")
本句为else语句中的代码，点击 取消 时，返回false 执行此代码
弹出 警告框 显示("")中的内容，如本例显示 no!
5.}
结束语句
询问用户
<script>
let ans = prompt("你想说什么?")
if (ans) {
alert("你说 " + ans)
}
else {
alert("你什么都没说......")
}
</script>
1.let ans = prompt("你想说什么?")
我们一般使用let声明一个变量，语法格式let 变量名 = 值
变量是什么?
在 JavaScript 中，变量用于存储数据，并可以在程序执行过程中动态更改。
在 JavaScript 中，变量可以存储各种类型的数据，如数字、字符串、对象、函数等。
变量名是标识符，用于引用存储在变量中的数据。
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
总结 变量可以看作一个容器，你可以往里面放任何东西，比如数值 字符串 对象 函数等
本例中，变量名为ans；=的含义是赋值，将等号右侧的值赋给左侧的变量
右侧的值为prompt("你想说什么?")，prompt("")可在页面中显示一个输入框，输入框的提示字为("")中的内容
这段代码的含义就是，将用户在输入框中输入的内容存储在ans这个变量中
2.if (ans) {alert("你说 " + ans)}
这个条件语句使用了刚才设置的变量。如果ans存在(用户输入了响应)，那么会弹出一个警告对话框，其中显示"你说 "(请注意文本字符串末尾的额外空格)和ans值的拼接。
例如,我输入了hello，效果如下
3.else {alert("你什么都没说......")}
如果用户点击了取消按钮，ans没有取得值，执行此代码。
使用js重定向
2.8.1
<h2>
<a href="2.8.2.html" id="a">点击我到2.8.2</a>
</h2>
<script>
window.onload = init
function init() {
document.getElementById("a").onclick = inita
}
function inita() {
window.location = "2.8.3.html"
return false
}
</script>
2.8.2
<p>2.8.2</p>
2.8.3
<h2>
我是2.8.3,到这里说明js脚本成功执行
</h2>
1.<a href="2.8.2.html" id="a">点击我到2.8.2</a>
这行代码点击之后会跳转到2.8.2.html
实际上，若js脚本成功执行，会跳转到2.8.3.html
2.window.onload = init
window.onload是一个事件处理程序,含义是 当页面完成加载时执行
这段话的含义是当页面完成加载时执行 init函数
注意：在本例中，必须要在页面加载完成时执行js代码，否则可能会导致js代码运行时未找到id为a的标签，无法正确执行.
3.function init() {document.getElementById("a").onclick = inita}
我们使用function创建一个函数 function init()含义是创建init函数
document.getElementById("a")含义是告诉文档中id为a的元素
.onclick = inita .onclick是一个事件处理程序 含义是 用户点击了对象
这里的对象是id为a的链接
= inita 含义是 执行inita函数
总结一下:
function init() {document.getElementById("a").onclick = inita}的含义是创建init函数,告诉文档中id为a的元素,当他被单击时执行inita函数
4.function inita() {window.location = "2.8.3.html"; return false}
function inita()含义是创建inita函数
{window.location = "2.8.3.html" window.location =用来将浏览器的页面设置为一个新页面，本例中将浏览器的页面设置为2.8.3.html
return false}表示停止对用户单击的处理，这样就不会加载原来的a标签所指向的页面
2025.10.02
end
本文难免有疏漏，如需反馈或有任何建议，可联系邮箱：uu20002025@163.com
评论