JavaScript简介和使用-CSDN博客

本文链接：https://blog.csdn.net/qq_41696334/article/details/104550493

JavaScript简介和使用

JavaScript是属于HTML和Web的编程语言。
- HTML定义网页的内容
- CSS规定网页的布局
- JavaScript对网页行为进行编程
JavaScript和Java是完全不同的语言，不论是概念还是设计。

JavaScript能够改变HTML内容

getElementById()（通过ID获取元素）是JavaScript HTML常用方法之一。

例子：“查找`“id=“demo”`的HTML元素，并把元素内容（`innerHTML`）更改为“Hello JavaScript”：

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

提示：JavaScript同时接受双引号和单引号：

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript能够改变HTML属性

例子：通过改变`<img>`标签的`src`属性（source）来改变一张HTML图像：

<button onclick="document.getElementById('myImage').src='/i/on.gif'">开灯</button>

<img id="myImage" border="0" sec="/i/off.gif" style="text-align:center; ">

<button onclick="document.getElementById('myImage').sec='/i/off.gif'">关灯</button>

👇运行结果👇
在这里插入图片描述

JavaScript能够改变HTML样式（CSS）

document.getElementById('demo').style.fontSize = "25px";

JavaScript能够隐藏/显示HTML

通过display样式来隐藏和显示HTML元素：
隐藏👇

document.getElementById('demo').style.display="none";

显示👇

document.getElememtById('demo').style.display="block";

JavaScript使用

<script>标签
在HTML中，JavaScript必需放在<script>与</script>标签之间

<script>
	document.getElementById('demo').innerHTML = "Hello JavaScript";
</script>

有些JavaScript例子会使用type属性：

JavaScript函数和事件

JavaScript函数是一种JavaScript代码块，它可以在调用时被执行。
例如，当发生时间时调用函数，比如当用户点击按钮时

`<head>`中的JavaScript

例子：JavaScript函数被放置于HTML页面的`<head>`部分，该函数会在按钮被点击时调用:

<!DOCTYPE html>
<html>
	<head>
		<script>
			function myFunction() {
  				document.getElementById("demo").innerHTML = "段落被更改。";
			}
		</script>
	</head>
	<body>
		<h1>一张网页</h1>
		<p id="demo">一个段落</p>
		<button type="button" onclick="myFunction()">试一试</button>
	</body>
</html>

`<body>`中的JavaScript

例子：JavaScript函数被放置在HTML页面的`<body>`部分，该函数会在按钮被点击时调用：

<!DOCTYPE html>
<html>
	<body>
		<h1>一张网页</h1>
		<p id="demo">一个段落</p>
		<button type="button" onclick="myFunction()">试一试</button>
		<script>
			function myFunction(){
				document.getElementById('demo').innerHTML = "段落被更改。";
			}
		</script>
	</body>
</html>

提示：把脚本置于<body>元素底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本

脚本可放置于外部文件中：

外部文件：myScript.js

function myFunction(){
	document.getElementById("demo").innerHTML = "段落被改变。";
}

外部脚本很实用，可以使相同的脚本被用于许多不同的网页。
JavaScript文件的文件扩展名是.js。
如需使用外部脚本，请在<script>标签的src（source）属性中设置脚本的名称：

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

我们可以在<head>或<body>中放置外部脚本引用。
外部脚本的表现和它被置于<script>标签中是一样的。但是外部脚本不能包含<script>标签。

外部JavaScript的优势

在外部文件中放置脚本有如下优势：
- 分离了HTML和代码
- 是HTML和JavaScript更易于阅读和维护
- 已经缓存的JavaScript文件可加速页面加载
如需向一张界面添加多个脚本文件-请使用多个script标签

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

JavaScript简介和使用

JavaScript简介和使用

JavaScript能够改变HTML内容

例子：“查找“id=“demo”的HTML元素，并把元素内容（innerHTML）更改为“Hello JavaScript”：

JavaScript能够改变HTML属性

例子：通过改变<img>标签的src属性（source）来改变一张HTML图像：

JavaScript能够改变HTML样式（CSS）

JavaScript能够隐藏/显示HTML

JavaScript使用

JavaScript函数和事件

<head>中的JavaScript

例子：JavaScript函数被放置于HTML页面的<head>部分，该函数会在按钮被点击时调用:

<body>中的JavaScript

例子：JavaScript函数被放置在HTML页面的<body>部分，该函数会在按钮被点击时调用：

外部脚本

外部文件：myScript.js

外部JavaScript的优势

例子：“查找`“id=“demo”`的HTML元素，并把元素内容（`innerHTML`）更改为“Hello JavaScript”：

例子：通过改变`<img>`标签的`src`属性（source）来改变一张HTML图像：

`<head>`中的JavaScript

例子：JavaScript函数被放置于HTML页面的`<head>`部分，该函数会在按钮被点击时调用:

`<body>`中的JavaScript

例子：JavaScript函数被放置在HTML页面的`<body>`部分，该函数会在按钮被点击时调用：