JavaScript示例

2022/1/24 11:04:31

编程Tag： js javascript JSON html 示例 paragraph myScript

本文主要是介绍JavaScript示例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一. JavaScript能做什么？

1.1 JavaScript可以改变HTML内容

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

1.2 JavaScript可以改变HTML属性

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

1.3 JavaScript可以改变CSS样式

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

1.4 JavaScript可以隐藏HTM元素

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>

1.5 JavaScript可以显示隐藏HTML元素

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

二. 在哪里插入JavaScript

2.1 <head>中的JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

2.2 <body>中的JavaScript

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

2.3 外部文件中的JavaScript

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>

2.4 外部的URL中的JavaScript

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click Me</button>

<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

2.5 外部文件中的JavaScript

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>

<script src="/js/myScript.js"></script>

</body>
</html>

三. JavaScript输出

四. JavaScript语法

五. JavaScript语句

六. JavaScript评论

七. JavaScript变量

八. JavaScript算术

九. JavaScript赋值

十. JavaScript字符串连接

十一. JavaScript数据类型

十二. JavaScript对象

十三 . JavaScript函数

十四. JavaScript事件

十五. JavaScript字符串

十六. JavaScript数字

十七. JavaScript数字方法

十八. JavaScript数学

十九. JavaScript 随机

二十. JavaScript日期

二十一. JavaScript数组

二十二. JavaScript数组方法

二十三. JavaScript数组排序

二十四. JavaScript数组迭代

二十五. JavaScript类型转换

二十六. JavaScript布尔值

二十七. JavaScript比较

二十八. JavaScript 条件

二十九. JavaScript循环

三十. JavaScript错误处理

三十一. JavaScript正则表达式

三十二. JavaScript对象

三十二. JavaScript对象属性

三十三. JSON对象

三十四. JSON数组

三十五. JSON解析

三十六. JSON字符串化

三十七. JSON PHP

三十八. JSON HTML

三十九. JSON JSONP

这篇关于JavaScript示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript示例

相关编程文章