前言
版权声明：本文为本博主在CSDN的原创文章搬运而来，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：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()方法去弹窗警示框
<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 代码。
<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中的一个获取时间和日期的方法.
<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()这个方法是向控制台输出运算结果或信息的方法.
<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学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
每日一言
为什么要担心？如果努力了，担心不会让结果变得更好。
