JavaScript基础入门之浏览器控制台调试输出

2024-05-04 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.

前言

原文链接：https://blog.csdn.net/weixin_72543266/article/details/132643998

本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习

思维导图

1，如何在Edge浏览器中执行 JavaScript

1.1,首先按F12

初次使用时按F12后会提示你,是否打开,开发者工具,确定后,就会打开一个如图所示的页面:

1.2,使用控制台窗口调试js代码

1.2.1,如何使用

这里,我们点击控制台,然后点击圆圈划斜线的图案

1.2.2,进行js测试使用

这里我们输入console.log(),这个是控制台输出指令,当然控制台可以进行一些运算操作.

这里我们按图中的圈可以清空窗口

1.3,Edge小脚本

1.3.1,如何创建脚本

我们也可以在Edge浏览器中创建一个脚本来执行，在开发者工具中点击源代码，点击>>，选择其中的片段，然后选择点击新片段来创建一个脚本文件：

我们在新创建的文件中输入下面的代码

document.write(Date());

1.3.2,运行脚本

右键左边的文件点击运行即可

编辑

2，JavaScript 输出

注意:JavaScript 没有任何打印或者输出的函数。但是JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

3，弹出警告框来显示数据

3.1,代码解读

这里我们使用window.alert()方法去弹窗警示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
</head>
<body>
<h1>我的第一个弹窗</h1>
<script>
    window.alert('1' + '3'+'1'+'4');
</script>
</body>
</html>

3.2,效果展示

4,操作 HTML 元素

4.1,代码解读

使用 document.getElementById(id) 方法,来访问需要的元素,使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或修改元素内容：document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改文本</title>
</head>
<body>
<h1>我的第一个修改文本练习</h1>
<p id="demo">进行修改的文字</p>
<script>
    document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>

4.2,效果展示

5,写信息到网页中

5.1,代码解读

这里使用 document.write() 可以向网页写入内容。其中Date(),这个方法是js中的一个获取时间和日期的方法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息到网页</title>
</head>
<body>
<h1>我的第一个写信息到网页练习</h1>
<script>
    document.write(Date());
</script>
</body>
</html>

5.2,效果展示

6.写到控制台

6.1,代码解读

使用 console.log() 方法在浏览器中显示 JavaScript 值。在浏览器中使用 F12 来启用调试模式，在调试窗口中点击控制台菜单。这里我们使用的就是基本的运算,但是使用了console.log()这个方法是向控制台输出运算结果或信息的方法.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制台输出</title>
</head>
<body>
<h1>我的第一个控制台输出信息练习页面</h1>
<p>
    浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击控制台。
</p>
<script>
    a = "13";
    b = "14";
    c = a + b;
    console.log(c);
</script>
</body>
</html>

6.2,效果展示

7，总结

本章主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.

每日一言

为什么要担心？如果努力了，担心不会让结果变得更好。