JavaScript概述
JavaScript基础 2021-12-27 10:33:18小码哥的IT人生shichen
JavaScript 是属于 HTML 和 Web 的编程语言。
编程令计算机完成您需要它们做的工作。
JavaScript 很容易学习。
为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
您知道吗？
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。
JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 6 （发布于 2015 年）是最新的 JavaScript 版本。
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：
实例
document.getElementById("demo").innerHTML = "Hello JavaScript";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
</body>
</html>
提示：JavaScript 同时接受双引号和单引号：
实例
document.getElementById("demo").innerHTML = 'Hello JavaScript';
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能做什么？</h1>
<p id="demo">JavaScript 可以更改 HTML 内容。</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击这里</button>
</body>
</html>
JavaScript 能够改变 HTML 属性
本例通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像：
灯泡
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：
实例
document.getElementById("demo").style.fontSize = "25px";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！
</button>
</body>
</html>
JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素：
实例
document.getElementById("demo").style.display="none";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击我！
</button>
</body>
</html>
JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素：
实例
document.getElementById("demo").style.display="block";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能够做什么</h2>
<p>JavaScript 能够显示隐藏的 HTML 元素。</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
点击我！
</button>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html 