【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
找方案7 分钟前
hello-agents 学习笔记:解锁智能体三大经典范式,从原理到实战
javascript·笔记·学习·hello-agents
想学后端的前端工程师9 分钟前
【Vue3响应式原理深度解析:从Proxy到依赖收集】
前端·javascript·vue.js
Rhys..18 分钟前
js-箭头函数
开发语言·javascript·ecmascript
资深低代码开发平台专家21 分钟前
厌倦JavaScript 框架桎梏?Still.js:用原生之力,解遗留系统之困
开发语言·javascript·ecmascript
纟 冬24 分钟前
Flutter & OpenHarmony 运动App运动目标设定组件开发
开发语言·javascript·flutter
2501_9444460025 分钟前
Flutter&OpenHarmony应用内导航与路由管理
开发语言·javascript·flutter
_Kayo_34 分钟前
vue3 状态管理器 pinia 用法笔记1
前端·javascript·vue.js
2501_9462338940 分钟前
Flutter与OpenHarmony Tab切换组件开发详解
android·javascript·flutter
3秒一个大41 分钟前
LangChain 中的 Output 解析器与 Zod:用法与意义
javascript·langchain