Js的三种书写位置
- 行内式
<!-- on+事件名会是一个点击事件,此处为行内式编写script -->
<input type="button" value="唐伯虎" onclick="alert('秋香')">
<!-- 写成行内样式 -->
- 嵌入式
<script>
alert("你好!")
</script>
<!-- 写入<script>标签内 -->
- 外部式
<script src=”my.js”></script>
<!-- 外部引入js文件 -->
注释
网页文档的注释分为三种:
HTML
<!-- 注释 -->
CSS
/* 注释 */
JavaScript
// 注释
输入输出语句
<script>
//这是一个弹出输入框
prompt('请输入您的年龄');
//弹出警示框,给用户展示的
alert('计算的结果是');
//console 控制台输出 给程序员测试看的
console.log('这是程序员在控制台能够看见的');
</script>
两种网页输出格式:
- document.write();
- elements.innerHTML();
这是两种在网页上输出的重要格式,这个格式的输出中,如果遇见了HTML标签,将转化为页面效果
但是两者用法的差距是巨大的
首先
write是方法
而innerHTML则是属性
<div class="test1">test1</div>
<div class="test2">test2</div>
<script>
window.onload=function(){
document.write("test3")
}
</script>
<!-- 输出test3,但原网页的test1、test2被覆盖重写 -->
其次
write方法的每次输出都将重写网页内容,原本网页的内容会被覆盖
innerHTML是针对网页中某个节点对象,改写其内容
<div class="test1">test1</div>
<div class="test2">test2</div>
<script>
window.onload=function(){
document.querySelector(".test2").innerHTML="test3"
}
</script>
<!-- 针对于test2盒子的内容更改,原本的内容被重写为test3,test1内容不变 -->
案例来源网络 https://www.jianshu.com/p/d7474aa1815a