js中关于输出语句的注意事项

一:用window.alert()方法弹出警告框注意事项:

1;警告框无返回值。

2:window可以省略。

3:参数可以是变量、字符串、表达式。

4:主要用于调试。

二:使用document.write()方法写入到HTML中:

1:注意写入的内容可以包括HTML

例如:

<script>

document.write("<h3>所在班级:23班<br/>年龄:18岁</h3>");

</script>

三:使用console.log()方法写入到浏览器的控制台中:、

1:一般用于浏览器调试使用

四:使用innerHTML写入HTML元素

1:注意document.getElementById("demo")是使用id属性来寻找HTML元素的javascript代码。innerHTML=“内容”是用于修改元素的HTML内容。可以精确的控制显示的位置,也是最常用的,但是使用时应该注意id位置和innerHTML的位置顺序。

举例说明顺序导致不同的结果:

测试一代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{ height:200px; 
width:300px;
background:#FFF;
border:#C06 1px solid;}
</style>
<script>
document.write("<pre>好好学习\rjavascript语言!</pre>");
</script>
</head>
<body><p id="demo">javascript是一种好语言啊,大家学习时候一定要认真的好好学习啊,不然就学不会了呢</p>
<script>document.getElementById("demo").innerHTML="好好学习\njavascript语言!";
</script>
</body>
</html>

运行结果如下:

结论:很明显原来文本被修改成了“好好学习javascript语言!"

测试代码二如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{ height:200px; 
width:300px;
background:#FFF;
border:#C06 1px solid;}
</style>
<script>
document.write("<pre>好好学习\rjavascript语言!</pre>");
</script>
</head>
<body><script>document.getElementById("demo").innerHTML="好好学习\njavascript语言!";
</script>

<p id="demo">javascript是一种好语言啊,大家学习时候一定要认真的好好学习啊,不然就学不会了呢</p>
</body>
</html>

结论:如果id位置位于document.getElementById("demo").innerHTML="要改成的内容"之前,可以做到修改输出的效果,如果id在document.getElementById("demo").innerHTML="要改成的内容"之后则不可以做到修改的效果所以一定要注意id和document.getElementById("demo").innerHTML="要改成的内容"的位置关系。

五:如何输出转义字符。

下面是常用的转义字符:

JavaScript 转义序列
序列 代表字符
\0 Null字符(\u0000)
\b 退格符(\u0008)
\t 水平制表符(\u0009)
\n 换行符(\u000A)
\v 垂直制表符(\u000B)
\f 换页符(\u000C)
\r 回车符(\u000D)
\" 双引号(\u0022)
\' 撇号或单引号(\u0027)
\\ 反斜杠(\u005C)
\xXX 由 2 位十六进制数值 XX 指定的 Latin-1 字符
\uXXXX 由 4 位十六进制数值 XXXX 指定的 Unicode 字符
\XXX 由 1~3 位八进制数值(000 到 377)指定的 Latin-1 字符,可表示 256个 字符。如 \251 表示版本符号。注意,ECMAScript 3.0 不支持,考虑到兼容性不建议使用。

注意:在使用转义字符时,只有将其放在格式化文本标签<pre></pre>中才会起作用。

例如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{ height:200px; 
width:300px;
background:#FFF;
border:#C06 1px solid;}
</style>
<script>
document.write("<pre>好好学习\njavascript语言!</pre>");
</script>
</head>
<body>
<p id="demo">javascript是一种好语言啊,大家学习时候一定要认真的好好学习啊,不然就学不会了呢</p><script>document.getElementById("demo").innerHTML="<pre>好好学习\njavascript语言!</pre>";
</script>
</body>
</html>

其中两个输出部分都用到了格式化文本标签<pre></pre>,都起到了换行的作用,不用的话将起不到作用。

例如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{ height:200px; 
width:300px;
background:#FFF;
border:#C06 1px solid;}
</style>
<script>
document.write("好好学习\njavascript语言!");
</script>
</head>
<body>
<p id="demo">javascript是一种好语言啊,大家学习时候一定要认真的好好学习啊,不然就学不会了呢</p><script>document.getElementById("demo").innerHTML="好好学习\njavascript语言!";
</script>
</body>
</html>

此时没有用到格式化标签<pre></pre>,则起不到转义字符的作用。

猜你喜欢

转载自blog.csdn.net/weixin_45147894/article/details/106250350