【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>


相关推荐
踢球的打工仔4 分钟前
typescript-类的静态属性和静态方法
前端·javascript·typescript
C_心欲无痕6 分钟前
Next.js Script 组件详解
开发语言·javascript·ecmascript·next.js
匠心网络科技6 分钟前
前端框架-Vue双向绑定核心机制全解析
前端·javascript·vue.js·前端框架
Jinuss6 分钟前
源码分析之React中的FiberRoot节点属性介绍
前端·javascript·react.js
2501_9445264213 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 收藏功能实现
android·java·开发语言·javascript·python·flutter·游戏
2501_9445264214 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 个人中心实现
android·java·javascript·python·flutter·游戏
自回归向前看15 分钟前
2020-25 Js ES新增加特性
前端·javascript
Jinuss21 分钟前
源码分析之React中的Fiber节点介绍
前端·javascript·react.js
放逐者-保持本心,方可放逐22 分钟前
react 之 useState 和 useEffect 应用
前端·javascript·react.js·usestate·useeffect
集成显卡10 小时前
Bun v1.3.6 发布:内置 Tarball 归档支持、JSONC 解析、Bundle 分析增强等重磅更新!
javascript·新版本·bun.js