用户投稿JavaScript 是什么？
在「快速入门前端」这个系列中，我们已经介绍过组成网页的 Structure (HTML) 和 Presentation (CSS) 的部分，也就是说我们已经可以写出一个完整的网页画面了，那接下来要让我们的网页动起来就必须仰赖 JavaScript 啦！
JavaScript ( 简称 JS ) 是一种脚本，也是程式语言之一，它可以让网页提供使用者动态性的互动功能，例如填写完表单后送出，或按下按钮弹出视窗等，除此之外 JavaScript 也能将有用的值暂存在自定义的「变数」中以供后续逻辑运算和使用 (有点像数学中代数的概念)。
JavaScript 该写在哪？
在 HTML 页面中使用 JavaScript 的方法与 CSS 类似，主要分为在内部、外部、以及行内撰写。
外部引入
在 HTML 档的 <head> 或 <body> 标籤中使用 <script> 标籤引入外部 js 档案是专案中最常见的引入方式，属性值 src 中可以填写 JS 档案的绝对位置或相对位置。
範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js小练习</title> <script type=“text/javascript” src=“./test.js”> <!-- 引入外部 JS 档案 --> </head> <body> <script type=“text/javascript” src=“./test.js”></script> <!-- 引入外部 JS 档案 --> </body></html>内部嵌入
内部嵌入是指在 HTML 档中直接使用 <script> 标籤，将 HTML 内容和 JS 程式写在同个档案中，JS 程式只对该档的内容有效。
範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js小练习</title> <script> // 这边写 js 程式码 </script> </head> <body> <script> // 这边写 js 程式码 </script> </body></html>行内 JavaScript
行内的 JavaScript 需要利用元素的「事件属性」，在属性值中撰写 JS 程式或呼叫 Function (函式)。
範例：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js小练习</title> </head> <body> <button οnclick="alert(123)">点选时跳出视窗</button> </body></html>JavaScript 注解和规则
注解
与 HTML 和 CSS 相同，在 JavaScript 的程式码中也可以撰写注解，注解的程式会被浏览器忽略，通常用来暂时“关掉”不需要的程式码，或加入程式开发纪录。在 JavaScript 中注解分为单行注解和多行注解：
单行注解
// 这是单行注解// 这也是单行注解// 写在符号'//'后的程式会被注解alert('123'); // 符号'//'前的程式不受影响多行注解
/* 这里一次可以注解很多行真的很多行超级多行 */JavaScript 执行顺序和撰写规则
在 JS 中执行的顺序是从上到下依序执行每一行中以分号; 作为程式结束的标记严格区分大小写开发者工具 - console
当我们需要检视 JavaScript 是否运作正确时，可以使用开发者工具的 console 检视或输出运算的值，只需要在 js 程式中加一行 console.log(”输出 log 的内容”); 就可以在开发者工具的 console 部分看到了( 如下图範例 )。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>JavaScript 小练习</title> </head> <body> <script> console.log("输出"); console.log("测试看看"); </script> </body></html>
基本语法
JS 主要用来进行动态逻辑运算，所以不像 HTML 或 CSS，在撰写后可以很容易就在网页上看到效果，例如元素的显示和样式改变等等，所以在开发中我们可以借助一些简单的语法将目前的值显示出来。
console
刚刚介绍的开发者工具，是开发中最常用于输出的语法，输出内容只存在于开发者工具中，不会影响使用者在网页中的体验，语法为：
console.log("要输出的东西");document.write
document.write("文字"); 会在页面中新增括号中的内容，例如：
<script> document.write('123');</script>
alert
alert 是指弹出视窗，会显示括号中的内容，值得一提的弹出视窗显示后，需等使用者按下确定才会执行下一行程式。
範例：(关闭视窗后才显示 console)
<script> alert('我是弹出视窗'); console.log('弹出视窗已关闭');</script>
上一篇：[快速入门前端 35] Flex Box 弹性盒子
下一篇：[快速入门前端 37] JavaScript：变数和常数
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
