【JavaScript学习笔记】

achaoyang

已于 2023-07-24 10:42:13 修改

阅读量132

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2023-07-05 17:45:54 首次发布

本文链接：https://blog.csdn.net/achaoyang/article/details/131551918

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括如何在HTML中嵌入<script>标签，使用Chrome的开发者工具进行JavaScript代码调试，以及通过window.alert()、document.write()和console.log()进行数据输出。此外，还提到了操作HTML元素和外部JS文件的使用方法。

摘要由CSDN通过智能技术生成

JavaScript用法

 HTML中的JavaScript脚本代码必须位于<script> 与</script>之间

JavaScript脚本代码可以被放置于HTML页面的<body> <head>部分中

script标签

’如果在HTML页面中插入JavaScript 必须使用<script>标签

<script> </script>会告诉JavaScript在何处开始和结束

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

上面例子中的JavaScript语句，会在页面加载时执行。

可以在HTML文档中放入不限数量的脚本。
脚本可以位于’'' <head> 或者<body>' ''部分中，或者同时存在于两个部分
通常是放在头部，或者放在页面底部，这样就可以把他们安置到同一位置，不会干扰页面内容。
放在头部跟身体里的显示效果是相同的
也可以把脚本保存到外部文件中，外部文件通常包含多个网页使用的代码。外部 JavaScript文件的文件扩展名是 .js
如需使用外部文件，可以在 **

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
	
</body>
</html>

其中，外部文件myScript.js文件代码如下

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

** 外部js脚本不能包含<script 标签>直接写script代码**

JavaScript Chrome中执行JavaScript

在Chrome浏览器中按下 F12按钮或者右击页面，选择“检查”来开启开发者工具
在Chrome浏览器右上角菜单栏选择“更多工具”-“开发者工具”来开启

Console窗口调试JavaScript代码

开发者工具打开后，使用Console直接调试js代码
在 > 后输入要执行的代码，按回车后执行
清空Console窗口的内容可以按以下按钮
Chrome snippets 小脚本
直接在Chrome浏览器中创建一个脚本来执行，在开发者工具中点击Sources，选择Snippets选项卡，在导航器中右击鼠标，创建一个新的脚本文件；

点击“New snippet”会自动创建一个文件，只需在右侧窗口输入要执行的js代码保存，右键点击文件点击“run”即可运行

JavaScript输出

JavaScript没有任何打印或者输出的函数

JavaScript显示数据

JavaScript可以通过不同的方式来输出数据；

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

使用window.alert()弹出警告框显示数据

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

运行效果
在这里插入图片描述

操作html元素

如果需要从JavaScript访问某个HTML元素，可以使用document.getElementById(id)方法
用“id”属性来标识HTML元素，并使用innerHTML来获取或插入元素内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

运行后“我的第一个段落”会变为“段落已修改”
上面的JavaScript语句在<script>标签中，可以在web浏览器中运行
document.getElementById(“demo”)是使用id属性来查找HTML的js代码
InnerHTML="段落已修改“是用于修改id定位出来的HTML元素内容

写到HTML文档

有时会出于测试的目的，直接将JavaScript写在HTML文档中,使用document.write(“xxxxxx”)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write("啦啦啦啦");
</script>
	
</body>
</html>

运行效果
在这里插入图片描述
使用document.write()可以向文档写入内容
如果在文档已加载后执行document.write().整个HTML页面都将被覆盖

写到控制台

如果浏览器支持调试则可以使用console.log()方法在浏览器中显示JavaScript的值
启用方法在上文中已经描述清楚

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

效果截图
在这里插入图片描述

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G