JS基础（1）

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