文章目录
1 简介JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。
2 JavaScript出现的位置
2.1 内联式
在body里用<script>标签对来表示一个代码区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
2.2 嵌入式
在头部用<script>标签对来表示一个代码区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
2.3 外部式
在外部js文件里写js代码(注意千万不要加<script>标签)同时在html文件里有一个指向外部文件的链接,这个链接文件的位置可以是body中或者head中
<script type="text/javascript" src="test.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="test.js">
</script>
</head>
<body>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
3 常见的输出方式
3.1 弹出消息框输出
1.alert(输出内容);
2.实例:输出helloworld
<body>
<script>
alert("hello world")
</script>
</body>
3.2 在网页内容中输出
3.2.1 在当前位置输出消息
1.document.write()
2.如果页面已经加载完成了调用,会覆盖这个页面的内容,如果是在页面加载时调用,则会在当前位置输出值。
下面是一种在页面加载时调用
<body>
<p>这是一个段落</p>
<script>
document.write(Date());
</script>
</body>
3.2.2 修改某个标签的值
- document.getElementById(“id名称”).innerHTML = 修改内容";
2.实例
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
3.3 在控制台输出
浏览器按F12,选择进入控制台。
1.console.log(输出内容)
2.实例
<body>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>