初识JavaScript

最新推荐文章于 2024-06-16 18:09:06 发布

敬故

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量200

点赞数 2

分类专栏：从单调到花里胡哨文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_57376815/article/details/122295808

版权

从单调到花里胡哨专栏收录该内容

22 篇文章 0 订阅

订阅专栏

初识JavaScript

🌹JS简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
那我们为什么要学习JS呢
JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

🌸JavaScript的使用

<script> 标签，在 HTML 中，JS代码必须位于 <script> 与 </script> 标签之间。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = "第一段JS";
		</script>

	</body>
</html>

注释：旧的 JavaScript 例子会使用 type 属性：<script type="text/javascript">。type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

🍊JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

🍡head中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 <head> 部分。
实例：

<!DOCTYPE html>
<html>
	<head>
		<script>
			function myFunction() {
			    document.getElementById("demo").innerHTML = "段落已被更改。";
			}
		</script>
	</head>

	<body>


		<p id="demo">旅行是对平淡生活的一次越狱。</p>

		<button type="button" onclick="myFunction()">试一试</button>

	</body>
</html>

在这里插入图片描述

🍓body中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 <body> 部分。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo">旅行是对平淡生活的一次越狱。

		</p>

		<button type="button" onclick="myFunction()">试一试</button>

		<script>
			function myFunction() {
			    document.getElementById("demo").innerHTML = "段落已被更改。";
			}
		</script>

	</body>
</html>

在这里插入图片描述

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

🌼外部脚本

脚本可放置与外部文件中。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo">旅行是对平淡生活的一次越狱。</p>

		<button type="button" onclick="myFunction()">试一试</button>

		<p>（myFunction 存储在名为 "jg.js" 的外部文件中。）</p>

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

	</body>
</html>

在这里插入图片描述

注释：还可通过完整的 URL 或相对于当前网页的路径引用外部脚本.

🍎JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

🍇使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p>旅行是对平淡生活的一次越狱。</p>

		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = 5555 + 6;
		</script>

	</body>
</html>

在这里插入图片描述

🥝使用 document.write()

使用 document.write() 比较方便。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p>旅行是对平淡生活的一次越狱。</p>

		<script>
			document.write(5 + 42);
		</script>

	</body>
</html>

在这里插入图片描述
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML 。

🍷使用 window.alert()

使用 window.alert()警告框来显示数据。
实例：

<!DOCTYPE html>
<html>
	<body>

		<script>
			window.alert(4 + 7);
		</script>

	</body>
</html>

在这里插入图片描述

🍦使用 console.log()

在浏览器中，可以使用 console.log() 方法来显示数据。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p>按f12在控制台中查看</p>

		<script>
			console.log(5 + 6);
		</script>

	</body>
</html>

在这里插入图片描述

🍉JavaScript 语句

实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo"></p>

		<script>

		var a, b, c;
		a = 8; 
		b = 17;
        c = a + b;
        
        document.getElementById("demo").innerHTML = "c 的值是" + c + "。";  

		</script>

	</body>
</html>

在这里插入图片描述

🥤分号

分号用来分隔 JavaScript 语句。
实例：

<!DOCTYPE html>
<html>
	<body>

		<p id="demo1"></p>

		<script>
		var a, b, c;
		a = 2;
		b = 8;
		c = a + b;
		document.getElementById("demo1").innerHTML = c;
		</script>

	</body>
</html>

在这里插入图片描述

🍭JavaScript 空白字符

JS会忽略多个空格。我们可以向脚本添加空格，以增强代码可读性。在运算符旁边（ = + - * / ）添加空格是个好习惯。

🍿JavaScript 行长度和折行

如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：
实例：

<!DOCTYPE html>
<html>
	<body>


		<p id="demo"></p>

		<script>
		document.getElementById("demo").innerHTML =
		"Alger.";
		</script>

	</body>
</html>

在这里插入图片描述

🍬JavaScript 代码块

JavaScript 语句可以用花括号（{…}）组合在代码块中。
实例：

<!DOCTYPE html>
<html>
	<body>

		<button type="button" onclick="myFunction()">点我！</button>

		<p id="demo1"></p>
		<p id="demo2"></p>

		<script>
		function myFunction() {
		    document.getElementById("demo1").innerHTML = "Alger.";
		    document.getElementById("demo2").innerHTML = "敬故";
		}
		</script>

	</body>
</html>