“HTML Javascript”的版本间差异
本页内容
第52行: | 第52行: | ||
以下是 JavaScript 可以做什么的一些示例: | 以下是 JavaScript 可以做什么的一些示例: | ||
<sample title="" | <sample title="" run="r1" desc="JavaScript 可以改变内容:" > | ||
document.getElementById("demo").innerHTML = "你好 JavaScript!"; | document.getElementById("demo").innerHTML = "你好 JavaScript!"; | ||
</sample> | </sample> | ||
<sample title="" | <run name="r1"> | ||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1>这是我的第一个JavaScript</h1> | |||
<p>JavaScript可以更改HTML元素的内容:</p> | |||
<button type="button" onclick="myFunction()">点击这里!</button> | |||
<p id="demo">这是一个演示.</p> | |||
<script> | |||
function myFunction() { | |||
document.getElementById("demo").innerHTML = "你好,JavaScript!"; | |||
} | |||
</script> | |||
</body> | |||
</html> | |||
</run> | |||
<sample title="" run="r2" desc="JavaScript 可以改变样式:" > | |||
document.getElementById("demo").style.fontSize = "25px"; | document.getElementById("demo").style.fontSize = "25px"; | ||
第63行: | 第86行: | ||
document.getElementById("demo").style.backgroundColor = "yellow"; | document.getElementById("demo").style.backgroundColor = "yellow"; | ||
</sample> | </sample> | ||
<sample title="" | |||
<run name="r2"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1>这是我的第一个JavaScript</h1> | |||
<p id="demo">JavaScript可以更改HTML元素的样式.</p> | |||
<script> | |||
function myFunction() { | |||
document.getElementById("demo").style.fontSize = "25px"; | |||
document.getElementById("demo").style.color = "red"; | |||
document.getElementById("demo").style.backgroundColor = "yellow"; | |||
} | |||
</script> | |||
<button type="button" onclick="myFunction()">点击这里!</button> | |||
</body> | |||
</html> | |||
</run> | |||
<sample title="" run="r3" desc="JavaScript 可以改变属性:" > | |||
document.getElementById("image").src = "/favicon.ico"; | document.getElementById("image").src = "/favicon.ico"; | ||
</sample> | </sample> | ||
<run name="r3"> | |||
<!DOCTYPE html> | |||
<html> | |||
<body> | |||
<h1>这是我的第一个JavaScript</h1> | |||
<p>JavaScript更改图像的src属性的值。</p> | |||
<script> | |||
function getImage(sw) { | |||
var pic; | |||
if (sw == 1) { | |||
pic = "/image.php?w=400&h=400" | |||
} else { | |||
pic = "/image.php?w=200&h=200" | |||
} | |||
document.getElementById('myImage').src = pic; | |||
} | |||
</script> | |||
<img id="myImage" src="/image.php?w=200&h=200" width="100" height="180"> | |||
<p> | |||
<button type="button" onclick="getImage(1)">大图</button> | |||
<button type="button" onclick="getImage(0)">小图</button> | |||
</p> | |||
</body> | |||
</html> | |||
</run> | |||
== HTML <noscript> 标签 == | == HTML <noscript> 标签 == | ||
HTML''' <nowiki><noscript></nowiki> '''标记定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容: | HTML''' <nowiki><noscript></nowiki> '''标记定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容: |
2022年8月6日 (六) 19:51的版本
JavaScript 使 HTML 页面更具动态性和交互性。
这是我的第一个JavaScript
HTML <script> 标签
HTML <script> 标记用于定义客户端脚本 (JavaScript)。
该元素要么包含脚本语句,要么通过属性 <script> 指向外部脚本文件。 src
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
为了选择一个 HTML 元素,JavaScript 最常使用该 document.getElementById() 方法。
此 JavaScript 示例编写“Hello JavaScript!” 进入一个 id="demo" 的 HTML 元素:
示例
<script>
document.getElementById("demo").innerHTML = "你好 JavaScript!";
</script>
JavaScript 的味道
以下是 JavaScript 可以做什么的一些示例:
示例
JavaScript 可以改变内容:
document.getElementById("demo").innerHTML = "你好 JavaScript!";
示例
JavaScript 可以改变样式:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
示例
JavaScript 可以改变属性:
document.getElementById("image").src = "/favicon.ico";
HTML <noscript> 标签
HTML <noscript> 标记定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容:
示例
<script>
document.getElementById("demo").innerHTML = "你好 JavaScript!";
</script>
<noscript>抱歉,您的浏览器不支持 JavaScript!</noscript>