“HTML Javascript”的版本间差异

本页内容
上一节: HTML_iframe 下一节: HTML_head_标签
Neo（讨论 | 贡献）
无编辑摘要
 
（未显示同一用户的10个中间版本）
第1行： 第1行：
[[Category:HTML教程|32]]
JavaScript 使 HTML 页面更具动态性和交互性。
JavaScript 使 HTML 页面更具动态性和交互性。


第12行： 第14行：
HTML''' <nowiki><script></nowiki> '''标记用于定义客户端脚本 (JavaScript)。
HTML''' <nowiki><script></nowiki> '''标记用于定义客户端脚本 (JavaScript)。


该元素要么包含脚本语句，要么通过属性''' <nowiki><script></nowiki> '''指向外部脚本文件。''' <nowiki>src</nowiki> '''
该元素要么包含脚本语句，要么通过''' <nowiki><script></nowiki> '''的''' <nowiki>src</nowiki> '''属性指向外部脚本文件。


JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
第18行： 第20行：
为了选择一个 HTML 元素，JavaScript 最常使用该 ''' <nowiki>document.getElementById()</nowiki> '''方法。
为了选择一个 HTML 元素，JavaScript 最常使用该 ''' <nowiki>document.getElementById()</nowiki> '''方法。


此 JavaScript 示例编写“Hello JavaScript！” 进入一个 id="demo" 的 HTML 元素：
接下来我们将Hello JavaScript插入到id位demo的元素中去。


<sample title="" run="js" desc="" >
<sample title="" run="js" desc="" >
第24行： 第26行：
<script>
<script>


  document.getElementById("demo").innerHTML = "你好 JavaScript！";
  document.getElementById("demo").innerHTML = "Hello JavaScript！";


</script>  
</script>  
</sample>
</sample>
<run name="js">
<run name="js">
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<body>
<h2>使用JavaScript更改文本</h2>
<h2>使用JavaScript更改文本</h2>
<p>这个例子写的是“你好，JavaScript！” 设置为id=“demo”的HTML：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>


</body>
</body>
</html>
</html>




第43行： 第54行：
以下是 JavaScript 可以做什么的一些示例：
以下是 JavaScript 可以做什么的一些示例：


<sample title="" hererun="s" desc="JavaScript 可以改变内容：" >
<sample title="" run="r1" desc="JavaScript 可以改变内容：" >


  document.getElementById("demo").innerHTML = "你好 JavaScript！";
  document.getElementById("demo").innerHTML = "你好 JavaScript！";
   
   
</sample>
</sample>
<sample title="" hererun="s" desc="JavaScript 可以改变样式：" >
<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";
第54行： 第88行：
document.getElementById("demo").style.backgroundColor = "yellow";  
document.getElementById("demo").style.backgroundColor = "yellow";  
</sample>
</sample>
<sample title="" hererun="s" desc="JavaScript 可以改变属性：" >
 
<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>
<p>
<button type="button" onclick="getImage(1)">大图</button>
<button type="button" onclick="getImage(0)">小图</button>
</p>
<img id="myImage" src="/image.php?w=200&h=200" >
</body>
</html>
</run>
== HTML <noscript> 标签 ==
== HTML <noscript> 标签 ==
HTML''' <nowiki><noscript></nowiki> '''标记定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容：
HTML''' <nowiki><noscript></nowiki> ''' 标签定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容：


<sample title="" hererun="s" desc="" >
要禁用你浏览器的Javascript功能，可以安装[https://chrispederick.com/work/web-developer/ Web Developer]插件，然后点击【Disable】再点击【disable Javascript】即可, 这个时候你的浏览器只会解析HTML和CSS。然后再打开示例试试看noscript标签的效果。
[[文件:Web developer.png]]


<sample title="" run="r5" desc="" >
<script>
<script>
  document.getElementById("demo").innerHTML = "你好 JavaScript！";
  document.getElementById("demo").innerHTML = "你好 JavaScript！";
</script>
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>  
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>  
</sample>
</sample>
<run name="r5">
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>对不起，您的浏览器不支持JavaScript！</noscript>
<p>不支持JavaScript的浏览器将显示写在noscript元素内的文本。</p>
</body>
</html>
</run>

2022年8月6日 (六) 20:05的最新版本


JavaScript 使 HTML 页面更具动态性和交互性。

这是我的第一个JavaScript

HTML <script> 标签

HTML <script> 标记用于定义客户端脚本 (JavaScript)。

该元素要么包含脚本语句，要么通过 <script> 的 src 属性指向外部脚本文件。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

为了选择一个 HTML 元素，JavaScript 最常使用该 document.getElementById() 方法。

接下来我们将Hello JavaScript插入到id位demo的元素中去。


示例

<script>

 document.getElementById("demo").innerHTML = "Hello 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> 标签定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容：

要禁用你浏览器的Javascript功能，可以安装Web Developer插件，然后点击【Disable】再点击【disable Javascript】即可, 这个时候你的浏览器只会解析HTML和CSS。然后再打开示例试试看noscript标签的效果。 Web developer.png


示例

<script>
 document.getElementById("demo").innerHTML = "你好 JavaScript！";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

取自“https://www.xiaobai.wang/index.php?title=HTML_Javascript&oldid=679”
上一节: HTML_iframe 下一节: HTML_head_标签
此页面最后编辑于2022年8月6日 (星期六) 20:05。