JavaScript 标签使用和输出语句

最新推荐文章于 2025-02-21 22:30:59 发布

原创最新推荐文章于 2025-02-21 22:30:59 发布 · 876 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了JavaScript中的三种输出语句：alert()、document.write()和console.log()，以及script标签的使用，包括type、src和charset属性。通过实例展示了如何在不同场景下进行代码编写和内容输出。

一、script标签

属性一：类型type


// 类型为文档的js类型
<script type="text/javascript"></script>;

属性二：路径src`


//引入文件js
<script src="script.js"></script>

此属性类似于css


<link rel="stylesheet" href="style.css">

属性三：字符集charset


//设置字符集为utf-8的编码
<script charset="UTF-8"></script>

二、代码编写方式

方式一:
直接在HTML的body部分写js代码

<script type="text/javascript">
  js代码
</script>

方式二:
需要创建js文件，然后写src引用，将代码写在所创建的js文件中


<script type="text/javascript" src="script.js"></script>

三、输出语句

1. alert（）系统弹出框

语法：alert（” ”）用于显示带有一指定消息和一个确认按钮的警告框

写法一：

<script>
		alert("喋喋")
</script>

结果：
在这里插入图片描述
写法二：

//文件一（写在index.html）
<script src="script.js"></script>

//文件二（script.js）
 alert("喋喋js");

结果：
在这里插入图片描述

2. document.write( ) 输出语句

1> .文档的输出document.write（” ”）;

导引：若写在body内如下

        你说你想在海边买一所房子<br/>
		和你可爱的松狮一起住在那里<br/>
		你会当一个心情杂货铺的老板娘<br/>
		随着心情卖着自己喜欢的东西<br/>
		————《玫瑰》

由此，通过document.write（）方法，在页面打印内容，向网页文档中输出一段文字

<script>
		document.write("study js");
		document.write("22222222");
</script>

以上两段代码打印的内容是连接的，如下：

在这里插入图片描述

因此可以使用 br 回车实现换行，
注：引号内可以写很多内容，如 hr（横线）

2>document.write( ) 以变量的方式输出
首先声明一个变量

<script>
		var str="hello world";
		document.write(str);
</script>

结果：
在这里插入图片描述
其次输出变量与字符串的组合，通过变量拼接字符串的方式来完成

<script>
		var str="hello world";
		document.write(str+""+"hello world");
</script>

结果为两个 hello world
在这里插入图片描述
注：拼接字符串，用“+” ；字符串需要用双引号“”括起来

3>通过document.write( )方法来输出html标签

<script>
		document.write("<p style='border:1px solid black;width:300px;height:90px;line-height:90px;background:#abcdef;text-align:center;'>js学习</p>");
</script>

结果如下：
在这里插入图片描述
注：输出html标签同时也可以将css样式写入到标签中，注意书写格式及引号之间的转义，需要将标签写入双引号中。

3. console.log( ) 在控制台输出内容

在这里插入图片描述
作用：排错，对于开发过程进行测试很有帮助。
注：
*对于JavaScript程序的调试，console.log()更好。因为alert()函数会阻断JavaScript程序的执行；alert弹出框需要点击确认比较麻烦，而console.log()仅在控制台中打印相关信息。
*alert只能输出字符串，不能输出对象里面的结构， console.log()可以输出字符串、数字、变量、函数、数组和JavaScript对象，可以在控制台展开看到对象具体信息，在ajax返回json数组对象时调试很方便。