小白教程
所有教程
关于
Search
172.70.38.102
172.70.38.102
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML Javascript”的源代码
本页内容
上一节:
HTML_iframe
下一节:
HTML_head_标签
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|32]] JavaScript 使 HTML 页面更具动态性和交互性。 <html> <h1>这是我的第一个JavaScript</h1> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> 单击这里显示当前的日期和时间。</button> <p id="demo"></p> </html> == HTML <script> 标签 == HTML''' <nowiki><script></nowiki> '''标记用于定义客户端脚本 (JavaScript)。 该元素要么包含脚本语句,要么通过''' <nowiki><script></nowiki> '''的''' <nowiki>src</nowiki> '''属性指向外部脚本文件。 JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。 为了选择一个 HTML 元素,JavaScript 最常使用该 ''' <nowiki>document.getElementById()</nowiki> '''方法。 接下来我们将Hello JavaScript插入到id位demo的元素中去。 <sample title="" run="js" desc="" > <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </sample> <run name="js"> <!DOCTYPE html> <html> <body> <h2>使用JavaScript更改文本</h2> <p>这个例子写的是“你好,JavaScript!” 设置为id=“demo”的HTML:</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </body> </html> </run> == JavaScript 的味道 == 以下是 JavaScript 可以做什么的一些示例: <sample title="" run="r1" desc="JavaScript 可以改变内容:" > document.getElementById("demo").innerHTML = "你好 JavaScript!"; </sample> <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.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; </sample> <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"; </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''' <nowiki><noscript></nowiki> ''' 标签定义了要向在浏览器中禁用脚本或浏览器不支持脚本的用户显示的替代内容: 要禁用你浏览器的Javascript功能,可以安装[https://chrispederick.com/work/web-developer/ Web Developer]插件,然后点击【Disable】再点击【disable Javascript】即可, 这个时候你的浏览器只会解析HTML和CSS。然后再打开示例试试看noscript标签的效果。 [[文件:Web developer.png]] <sample title="" run="r5" desc="" > <script> document.getElementById("demo").innerHTML = "你好 JavaScript!"; </script> <noscript>抱歉,您的浏览器不支持 JavaScript!</noscript> </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>
返回至“
HTML Javascript
”。
上一节:
HTML_iframe
下一节:
HTML_head_标签