当前位置：首页 > news >正文

看完这篇，轻松搞定JavaScript复杂的问题

news 2024/10/23 21:46:07

一、JavaScript概述

二、JavaScript在HTML网页中的使用

（一）行内式

（二）内嵌式

（三）外链式

（四）基本的执行顺序

（五）注释

1、单行注释

2、多行注释

三、JS语法基础

（一）变量

1、概念

2、语法

3、数据类型

4、变量提升现象

（二）运算符

1、typeof运算符

2、算术运算符

（1）加减乘除运算符：+、-、*、/

（2）取余运算符：%

（3）自增自减运算符：++、--

3、赋值运算符

4、比较运算符

5、布尔运算符

（1）取反运算符：！

①布尔值取反

②非布尔值取反

（2）且运算符：&&

（3）或运算符:||

一、JavaScript概述

JavaScript是一种web脚本编程语言，简称JS；主要用于向HTML页面中添加交互行为；不需要编译，直接由浏览器解释运行，语法和Java类似。因此，在语法学习过程中，需注意与Java对比学习。
注意：JavaScript 与 Java 是两种完全不同的语言（只是语法相似），无论在概念还是设计上。

二、JavaScript在HTML网页中的使用

与CSS的引用类似，主要有三种方式：行内式，内嵌式，外链式

（一）行内式

行内式是将 JavaScript 代码直接写在 HTML 文件中的 <body> 标签内。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 行内式：不推荐使用 --><input type="submit" value="登录" onclick="javascript:alert('登录成功')">
</body>
</html>

在此例子中，当用户点击登录按钮时，会出现一个提示弹窗框显示“登录成功”。如下图：

行内式比较简单直接，适合较少且简单的代码，但这不利于代码较多或者其他网页的复用

（二）内嵌式

行内式是将 JavaScript 代码直接写在 HTML 文件中的 <script> 标签内。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内嵌式：js代码不多时，或者做实验时，可以用一下 --><script>document.write("内嵌式js的引用1")</script></head>
<body></body>
</html>

效果图如下：

（三）外链式

将 JavaScript 代码写在一个单独的 .js 文件中，然后在 HTML 文件中通过 <script> 标签的 src 属性引入。例如：

1. 首先创建一个名为 script.js 的文件，内容如下：

document.write("外链式js的引用方式")

2. 然后在 HTML 文件中引入这个js文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外链式：工程项目开发主打引用方式 ，可以解除耦合--><script src="./1_我的第一个js程序.js"></script>
</head>
<body></body>
</html>

效果图如下：

注意：① <script>标签可以放置在HTML文档中任意位置；

② 在HTML文档中，<script>标签的个数没有限制；

（四）基本的执行顺序

1、从上到下线性执行：HTML中的JS脚本通常是从上到下线性执行的。也就是说，浏览器会按照HTML文档中JS脚本出现的顺序依次执行它们。

2、阻塞行为

当JavaScript代码按顺序执行一个比较耗时的同步操作时，就会产生阻塞，它会停止解析和渲染页面，优先下载、解析并执行该标签中的JS代码。这个过程会阻塞页面其他内容的下载和渲染，直到JS代码执行完毕。

我们可以使用delay（time）来使网页的内容延迟出现，避免阻塞行为的出现。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 内嵌式：js代码不多时，或者做实验时，可以用一下 --><script>document.write("内嵌式js的引用1")document.write("内嵌式js的引用2")document.write("内嵌式js的引用3")// 延时语句，延时30分钟delay(30)</script></head>
<body>

（五）JS的输出方式

使用 window.alert()通过浏览器弹出框进行输出

<!DOCTYPE html>
<html>
<body><script> alert("第一种：通过浏览器弹出框进行输出"); </script></body>
</html>

效果图：

使用 document.write() 直接在网页页面中进行输出

<!DOCTYPE html>
<html>
<body><script> document.write("第二种：直接在网页页面中进行输出"); </script></body>
</html>

效果图：

在现代Web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容。

使用 console.log() 通过浏览器控制台进行输出，此方法最常用！

<!DOCTYPE html>
<html>
<body><script> console.log("第三种：通过浏览器控制台进行输出！此方法最常用！"); </script>
</body>
</html>

效果图：

主要用于代码的调试，强烈推荐这种方式。在运行代码后点击F12，点胶机控制台即可查看。

（五）注释

1、单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

快捷键：ctrl+/

2、多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

三、JS语法基础

（一）变量

1、概念

JavaScript变量是存储数据值的容器

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

2、语法

变量的声明和赋值语句var的语法为：var 变量名称1[=初始值1] , 变量名称2[=初始值2]...;
注意：① 不能用JavaScript的关键字，如var、int、true等作变量名称。

② JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，但在使用变量之前先进行声明是一种好的习惯。变量的类型在赋值时根据数据类型来确定。

3、数据类型

数值类型（number）：包括整数和浮点数。例如 5、3.14 等。

<!DOCTYPE html>
<html>
<body><script>var num1=12;var num2=23.6;document.write(num1+"<br>");document.write(num2+"<br>");
</script></body>
</html>

效果图如下：

字符串类型（string）：用单引号或双引号括起来的字符序列。例如 'Hello'、"World" 等。

<!DOCTYPE html>
<html>
<body><script>var str1="双引号定义字符串 ";var str2='单引号定义字符串';document.write(str1+"<br>");document.write(str2+"<br>");
</script></body>
</html>

效果图如下：

布尔类型（boolean）：只有两个值，true 和 false。常用于条件判断和逻辑运算。

<!DOCTYPE html>
<html>
<body><script>var b=true;document.write(b);
</script></body>
</html>

效果图如下：

null 类型：表示一个空值，通常用于表示对象为空或者变量尚未赋值。

<!DOCTYPE html>
<html>
<body><script>var b=nulldocument.write(b);
</script></body>
</html>

效果图如下：

特殊情况：尽管 null 是一个表示空值的特殊关键字，但 typeof null 会返回 "object"。这是一个著名的 JavaScript 特性，已经存在了很长时间，不必理会。

undefined 类型：表示变量已声明但未赋值的状态。

<!DOCTYPE html>
<html>
<body><script>var b=true;document.write(b);
</script></body>
</html>

效果图如下：

object类型：对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。

<!DOCTYPE html>
<html>
<body><script>var a=['Tom','Jack','Joe'];document.write(a);
</script></body>
</html>

效果图如下：

4、变量提升现象

所有的变量的声明语句（不包含赋值），都会被提升到代码的头部

 // 原来写的语句（变量先用后声明）
document.write(name);
name='zhangsan';// 实际运行效果（变量提升现象）
var name;
document.write(name); 
name='zhangsan';

（二）运算符

1、typeof运算符

typeof是用于确定JavaScript变量的类型的

<!DOCTYPE html>
<html>
<body><script>var num1=23.6;document.write(num1+"的数据类型："+typeof num1+"<br>");
</script></body>
</html>

运行结果如下：

2、算术运算符

（1）加减乘除运算符**：+、-、*、/**

<!DOCTYPE html>
<html>
<body><script>var a=1;var b=2;var c=a+b;document.write(c+"的数据类型："+typeof c+"<br>");
</script></body>
</html>

运行结果如下：

（2）取余运算符：%

<!DOCTYPE html>
<html>
<body><script>var a=4;var b=3;var c=a%b;document.write(c+"的数据类型："+typeof c+"<br>");
</script></body>
</html>

运行结果如下：

（3）自增自减运算符：++、--

<!DOCTYPE html>
<html>
<body><script>var a=1;var b=1;document.write(a++);
</script></body>
</html>

效果图：

自加运算符在变量后面，先返回变量的值，然后才开始自加，相当于c=a;a=a+1;这样返回的值就是1.

<!DOCTYPE html>
<html>
<body><script>var a=1;var b=1;document.write(++a);
</script></body>
</html>

效果图：

自加运算符在变量前面，先自加，再返回变量的值。先a=a+1；返回的值是2.

3、赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

<!DOCTYPE html>
<html>
<body><script>var a=1;var b=1;//算数赋值结合运算符console.log(a+=b); //a=a+bconsole.log(a%=b); //a=a%b
</script></body>
</html>

运算结果如下：

4、比较运算符

运算符	描述
==	等于
===	严格等于
!=	不相等
!==	严格不等于
>	大于
<	小于
>=	大于或等于
<=	小于或等于

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件，它返回的结果是True和False。

相等运算符不严格要求数据类型相等,只要转换后的值相等就可以；严格相等是对数据类型也要一致。

<!DOCTYPE html>
<html>
<body><script>var a=1;var b="1";console.log(a==b); console.log(a===b);
</script></body>
</html>

运行结果如下：

5、布尔运算符

（1）取反运算符：！

①布尔值取反

！true 运行结果为false

！false 运行结果为true

②非布尔值取反

对于非布尔值，取反运算符会将其转为布尔值。以下六个值取反后为true，其他值都为false。undefined、null、false、0、NaN、空字符串

（2）且运算符：&&

全部为真则为真，有一个为假则为假，全部为假则为假

<!DOCTYPE html>
<html>
<body><script>var a=true;var b=false;console.log(a && b);
</script></body>
</html>

运行结果如下：

（3）或运算符:||

<!DOCTYPE html>
<html>
<body><script>var a=true;var b=false;console.log(a || b);
</script></body>
</html>

全部为真则为真，有真有假也为真，全部为假则为假

运行结果如下：

查看全文

http://www.mrgr.cn/news/57096.html

架构演进史

ElasticSearch-7.17.10集群升级至ElasticSearch-7.17.24

BufferPool

学习笔记之ifconfig看不到ens33的解决方法和普通用户sudo命令的配置以及Linux基础命令

机器学习4

vue使用jquery的ajax，页面跳转

基于Word2Vec和LSTM实现微博评论情感分析

D46【python 接口自动化学习】- python基础之类

stl（1）pair

JVM、字节码文件介绍

四、多线程带来的的⻛险-线程安全

webpack4 - 动态导入文件 dynamic-import 报错的解决方法

安装Python及pip使用方法详解

重生之“我打数据结构，真的假的？”--1.单链表（无习题）

哪些WordPress的AI插件，更适合收集整理地球前100大行业的信息和关键词？谢谢。0.1

SAP B1 缺少税务科目 - 报错 debug

秃姐学AI系列之：FCN + 代码实现

java和嵌入式现在哪个好?

一、JavaScript概述

二、JavaScript在HTML网页中的使用

（一）行内式

（二）内嵌式

（三）外链式

（四）基本的执行顺序

（五）注释

1、单行注释

2、多行注释

三、JS语法基础

（一）变量

1、概念

2、语法

3、数据类型

4、变量提升现象

（二）运算符

1、typeof运算符

2、算术运算符

（1）加减乘除运算符：+、-、*、/

（2）取余运算符：%

（3）自增自减运算符：++、--

3、赋值运算符

4、比较运算符

5、布尔运算符

（1）取反运算符：！

①布尔值取反

②非布尔值取反

（2）且运算符：&&

（3） 或运算符:||

相关文章：

（1）加减乘除运算符**：+、-、*、/**

（3）或运算符:||