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找到需要操作的元素

02-11 12:01