初识JavaScript
🌹JS简介
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
那我们为什么要学习JS呢
JavaScript 是 web 开发者必学的三种语言之一:
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
🌸JavaScript的使用
<script>
标签,在 HTML 中,JS代码必须位于 <script>
与 </script>
标签之间。
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "第一段JS";
</script>
</body>
</html>
注释:旧的 JavaScript 例子会使用 type 属性:<script type="text/javascript">
。type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
🍊JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。
🍡head中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <head>
部分。
实例:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>
<body>
<p id="demo">旅行是对平淡生活的一次越狱。</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
🍓body中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <body>
部分。
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo">旅行是对平淡生活的一次越狱。
</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>
</html>
提示:把脚本置于 <body>
元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
🌼外部脚本
脚本可放置与外部文件中。
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo">旅行是对平淡生活的一次越狱。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>(myFunction 存储在名为 "jg.js" 的外部文件中。)</p>
<script src="./jg.js"></script>
</body>
</html>
注释:还可通过完整的 URL 或相对于当前网页的路径引用外部脚本.
🍎JavaScript 输出
JavaScript 能够以不同方式“显示”数据:
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
🍇使用 innerHTML
如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。
实例:
<!DOCTYPE html>
<html>
<body>
<p>旅行是对平淡生活的一次越狱。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5555 + 6;
</script>
</body>
</html>
🥝使用 document.write()
使用 document.write() 比较方便。
实例:
<!DOCTYPE html>
<html>
<body>
<p>旅行是对平淡生活的一次越狱。</p>
<script>
document.write(5 + 42);
</script>
</body>
</html>
注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML 。
🍷使用 window.alert()
使用 window.alert()警告框来显示数据。
实例:
<!DOCTYPE html>
<html>
<body>
<script>
window.alert(4 + 7);
</script>
</body>
</html>
🍦使用 console.log()
在浏览器中,可以使用 console.log() 方法来显示数据。
实例:
<!DOCTYPE html>
<html>
<body>
<p>按f12在控制台中查看</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
🍉JavaScript 语句
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var a, b, c;
a = 8;
b = 17;
c = a + b;
document.getElementById("demo").innerHTML = "c 的值是" + c + "。";
</script>
</body>
</html>
🥤分号
分号用来分隔 JavaScript 语句。
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<script>
var a, b, c;
a = 2;
b = 8;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
🍭JavaScript 空白字符
JS会忽略多个空格。我们可以向脚本添加空格,以增强代码可读性。在运算符旁边( = + - * / )添加空格是个好习惯。
🍿JavaScript 行长度和折行
如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符:
实例:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Alger.";
</script>
</body>
</html>
🍬JavaScript 代码块
JavaScript 语句可以用花括号({
…}
)组合在代码块中。
实例:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">点我!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Alger.";
document.getElementById("demo2").innerHTML = "敬故";
}
</script>
</body>
</html>
🍫JavaScript 关键词
🍨第一节到这里就结束了
幸福就是一觉醒来,窗外的阳光依然灿烂。