【VScode配置HTML如何编译 基础 JavaScript 实例】

基础 JavaScript 实例

VScode

打开扩展搜索

右键看到即可

用JavaScript输出文本

javascript 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

用JavaScript改变HTML元素

javascript 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

一个外部JavaScript

javascript 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</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>


相关推荐
哟哟-6 分钟前
Nginx配置:静态文件访问时动态添加时间戳
运维·前端·javascript·nginx
wuhen_n35 分钟前
JavaScript 深拷贝的完全解决方案
前端·javascript
2301_7965125242 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Grid 宫格(展示内容或进行页面导航)
javascript·react native·react.js·ecmascript·harmonyos
夕除1 小时前
js-20
开发语言·javascript·windows
@––––––1 小时前
力扣hot100—系列8-回溯算法
javascript·算法·leetcode
phltxy1 小时前
Vue核心进阶:v-model深度解析+ref+nextTick实战
前端·javascript·vue.js
三小河1 小时前
React 样式——styled-components
前端·javascript·后端
春日见1 小时前
如何查看我一共commit了多少个,是哪几个,如何回退到某一个版本
vscode·算法·docker·容器·自动驾驶
Jing_Rainbow1 小时前
【React-10/Lesson94(2026-01-04)】React 性能优化专题:useMemo & useCallback 深度解析🚀
前端·javascript·react.js
白中白121382 小时前
Vue系列-3
前端·javascript·vue.js