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

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

前言


版权声明:本文为本博主在CSDN的原创文章搬运而来,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。                                    

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


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


思维导图

image.gif


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

1.1,首先按F12

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


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

1.2.1,如何使用

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

image.gif


1.2.2,进行js测试使用

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

image.gif

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


1.3,Edge小脚本

1.3.1,如何创建脚本

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

image.gif

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

document.write(Date());

image.gif

image.gif

1.3.2,运行脚本

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

image.gif 编辑

image.gif

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>

image.gif

3.2,效果展示

image.gif

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>

image.gif

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>

image.gif

5.2,效果展示

image.gif

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>

image.gif

6.2,效果展示

image.gif

7,总结

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


每日一言

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


相关文章
|
13天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
15天前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
|
9天前
|
存储 JavaScript 前端开发
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第8天】Web开发中的客户端存储技术,如`localStorage`, `sessionStorage`和`cookies`,用于保存用户设置和跟踪活动。`localStorage`持久化存储,`sessionStorage`随页面会话消失。两者提供基本的增删查改操作,但有大小限制和安全风险。`cookies`适合会话管理,可设置过期时间并能跨域。使用时注意存储量、安全性和跨域策略,选择适合场景的存储方式。
|
12天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
13 0
|
12天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
14天前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
17 0
|
14天前
|
Web App开发 JavaScript 前端开发
js 调试—— 【控制台】debugger语句 、 命令行API
js 调试—— 【控制台】debugger语句 、 命令行API
15 0
|
14天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
15 0
|
14天前
|
Web App开发 前端开发 JavaScript
|
14天前
|
Web App开发 JavaScript 前端开发
03 JavaScript学习:浏览器中执行 JavaScript
03 JavaScript学习:浏览器中执行 JavaScript