1.行内式

直接在HTML标签内写符合js标准的语句，作为标签的事件属性的属性值。

最好使用在功能简单，使用次数少的情况。

简单，方便，明了，一目了然。

 例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="background-color: cyan;width: 200px;height: 200px;"onmouseover="alert('Hi')"></div>
	</body>
</html>

2.嵌入式

HTML中的<script type=”textjavascript”>用来告诉浏览器改行语句后面直到</script>中都是js编写的程序。

将符合js标准的语句放在<script type=”text/javascript”></script>标签之间，因为type属性默认值为”text/javascript”所以type=”text/javacript”可省略；

<script></script>标签的位置可以在HTML文档内的任何地方，并且标签次数并不固定可以根据需求想写多少写多少。

方便快捷。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>alert("Hello World")</script>
	</body>
</html>

 

3.链入式

当HTML中需要使用外部js文件中的程序，则在HTML网页的头部<head></head>之中加入<script src=”url”></script>将js文件中的脚本引入到本文档中

使用于使用次数多，使得脚本和内容分离。

js 文件内容是:

alert("Hello World")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/new_file.js"></script>
	</head>
	<body>
	</body>
</html>

Javascr的基本语法

1.执行顺序

代码按照HTML文档内出现的顺序从上到下执行

2.大小写敏感

Javascrip对字母的大小写是严格分开的。比如ABC和abc不是同一个变量。

3.结尾分号可有可无

每行结尾不一定需要分号(;)做为结尾标志，javascript会自动认为该行的结尾为语句结尾。

4.注释

在大量脚本代码中可能分不清某行代码的作用，可以用注释来标注代码的作用方便编写也方便修改，注释信息并不会出现在网页中，它不会被脚本解释器执行。

单行注释用”//”，多行注释用”/*”” */”括起来

一些简单的js语句

1.alert(“对话框的内容”)；

alert用来弹出对话框

如果alert括号内带双引号则原样输出。

如果alert括号内不带双引号则输出括号内变量的值，如果括号不是变量则无法弹出窗口。

2.调试Console.log(参数1);

向控制台输出参数1的信息；

输入的信息会出现在网页右上角三个点中的更多工具->开发者工具Console

  

3.Prompt(“参数1”,”参数2”)

弹出一个输入框，参数1的值为提示语，参数2的值为输入框内的默认值，参数2可有可无。

 

如果点确定则文本框内是什么就返回什么，

如果点取消则返回null（空）

 

4.Var用来定义一个变量

5.Confirm(参数1)确定取消框:确保不会进行误操作

参数1是弹出框的提示

点击确定返回turn

点击取消返回false

6.document.write()

向网页的页面也就是HTML中的body标签中输出内容，会直接作用于页面，但是使用不多，因为使用可能会把原来body标签中的内容给覆盖掉

7.在JavaScript中运算符加号(+)有两种情况

如果加号两边都是整数的数字那么则是加法

如果加号两边有一个是字符那么加号施行连接的作用，将加号右边字符链接进加号左边的最后

# javascript # html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟