Java教程

JavaScript示例

本文主要是介绍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示例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航