JS：基础 | 语句

JavaScript输出

JavaScript不提供任何内建的打印或显示函数
个人理解：不像Python等编程语言一样，有内建的print打印函数，JS只能通过部分函数，将数据等结果显示在网页上

JavaScript能够以不同方式“显示”数据：
   1、使用window.alert()写入警告框
   2、使用document.write()写入HTML输出
   3、使用innerHTML写入HTML元素
   4、使用console.log()写入浏览器控制台

window.alert()

1、使用window.alert()能够使用警告框来显示数据：小括号里的内容，以弹窗的方式显示出来

2、window.alert()：window是BOM对象，指的是整个浏览器，可以省略不写

3、alert都是把要输出的内容首先转换为字符串然后在输出的

4、弹出比较突然，用户的体验不好，基本用来测试代码使用

5、这种输出方式，给我的感觉就是：先弹窗后，再显示网页内容(如果是定义在按钮内的函数时，就是需要点击按钮后才会显示)

例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<script type="text/javascript">
    /*
     * '我是李康达，我为GDP代言'
     * 我们需要输出的内容，这些内容需要用一对单引号或一对双引号引用起来
     * ;(分号)表示一行代码结束
     * 如果一行只写一行的代码可以省略分号，但是不建议
     *
     */
    window.alert('我是李康达');
    alert("我为GDP代言");
    window.alert(5 + 6);
</script>
</body>
</html>

注：
在JS中单双引号本无区别，但是如果遇到双层引号的问题，则需单引号包双引号，双引号包单引号（英文）

document.write()

1、直接的在页面中展示输出的内容：以HTML的语法解析里面的内容

2、出于测试目的，使用document.write()比较方便

例2：

<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<script>
document.write(5 + 6);
document.write('我是李康达');
</script>

</body>
</html>

注：
1、在HTML文档完全加载后使用document.write()将删除所有已有的HTML

2、document.write()方法仅用于测试

innerHTML

1、如需访问HTML元素，JavaScript可使用document.getElementById(id)方法：id属性定义HTML元素。innerHTML属性定义HTML内容

2、更改HTML元素的innerHTML属性是在HTML中显示数据的常用方法

例3：

<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

console.log()

在浏览器中，您可使用console.log()方法来显示数据：通过F12来激活浏览器控制台，并在菜单中选择“控制台”，在控制台输出内容

例4：

<!DOCTYPE html>
<html>
<body>

<h2>按 F12 启动</h2>

<p>在 debugger 中选择 "Console"。然后再次点击运行按钮。</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript语句

1、在HTML中，JavaScript程序由web浏览器执行的

2、JavaScript语句是由值、运算符、表达式、关键词和注释等构成的

3、大多数JavaScript程序都包含许多JavaScript语句，这些语句会按照它们被编写的顺序逐一执行(JavaScript程序或JavaScript语句常被称为JavaScript代码)

例5：

<!DOCTYPE html>
<html>
<body>
<h2 id="title">JavaScript 语句</h2><!--被覆盖了-->
<p>在 HTML 中，JavaScript 语句由浏览器执行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Kitty.";
document.getElementById("title").innerHTML = "Hello Kitty.";
</script>
</body>
</html>

分号

1、分号分隔JavaScript语句。请在每条可执行的语句之后添加分号

2、如果有分号分隔，允许在同一行写多条语句(个人感觉最好还是一条语句一行)

3、以分号结束语句不是必需的，但还是加上好

例6：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>一行允许多条语句。</p>
<p id="demo1"></p><!--定义一个空行来显示js脚本输出-->
<script>
var a, b, c;
a = 5; b = 6; c = a + b;
//var a, b, c;
//a = 5;
//b = 6;
//c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>

JavaScript空白字符

1、JavaScript会忽略多个空格。您可以向脚本添加空格，以增强可读性

2、在运算符旁边（ = + - * / ）添加空格是个好习惯

例7：

var person = "Bill";
var person="Bill";
var x = y + z;

JavaScript 行长度和折行

如果JavaScript语句太长，可以对其进行折行(最佳位置是某个运算符)

例8：

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Kitty.";
</script>

JavaScript代码块

JavaScript语句可以用花括号{...}组合在代码块中：代码块的作用是定义一同执行的语句或语句执行逻辑

例9：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>JavaScript 代码块在 { 与 } 之间编写。</p>
<button type="button" onclick="myFunction()">点击我！</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
    document.getElementById("demo1").innerHTML = "Hello Kitty.";
    document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>

注：
函数未定义在按钮属性中时：按钮通过onclick属性找到其关联的函数，函数通过id找到需要操作的元素