Java Web——JavaScript基础

1. 引入方式

JavaScript程序不能独立运行,它需要被嵌入HTML中,然后浏览器才能执行 JavaScript 代码。

通过 script 标签将 JavaScript 代码引入到 HTML 中,有3种方式:

1.1. 内嵌式(嵌入式)

直接写在html文件里,用script标签包住

<script>

// JavaScript代码

</script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><!-- 内联形式:通过 script 标签包裹 JavaScript 代码 --><script>alert('Hello world!')</script>
</body>
</html>


1.2. 外部式(外链式)

代码写在以.js结尾的文件里,通过script标签,引入到html页面中。

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

// 中间不要写内容

</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></head><body><script src="./js/my.js">// 中间不要写内容</script></body></html>
alert('我是外部的 js文件')


1.3. 行内式 (理解即可)

代码写在标签内部

注意: 此处作为了解即可,但是vue框架会用这种模式

<body><button onclick="alert('逗你玩~~~')">点击我月薪过万</button>
</body>


2. 注释

通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法:

2.1. 单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释alert('Hello world!')</script>
</body>
</html>

2.2. 多行注释

使用 /* */ 注释多行代码

<body><script>/* 这种的是多行注释的语法 *//*更常见的多行注释是这种写法在些可以任意换行多少行都可以*/document.write('你好小伙伴')</script>
</body>

注:编辑器中单行注释的快捷键为 ctrl + /


3. 结束符

在 JavaScript 中 ; 代表一段代码的结束,多数情况下可以省略 ; 使用回车(enter)替代。

但为了风格统一,结束符要么每句都写,要么每句都不写

<body><script>alert(1);alert(2);alert(3)alert(4)</script>
</body>


4. 输出输入

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。

4.1. 输出

alert( )

document.wirte( )

JavaScript 可以接收用户的输入,然后再将输入的结果输出:

alert( )、document.wirte( )

以数字为例,向 alert( ) 或 document.write( )输入任意数字,他都会以弹窗形式展示(输出)给用户。

上文以举例就不多写了

4.2. 输入

prompt( )

<body><script> // 1. 输入的任意数字,都会以弹窗形式展示document.write('要输出的内容')alert('要输出的内容');// 2. 以弹窗形式提示用户输入姓名,注意这里的文字使用英文的引号prompt('请输入您的姓名:')</script>
</body>


4.3. 控制台使用

在编译器中运行 HTML 代码后,会在浏览器中显示网页界面。这时,按下 F12 键或者 Ctrl + Shift + i 键可以打开浏览器的开发者工具,也叫控制台界面。 在控制台界面中,您可以查看网页的 HTML 结构、CSS 样式以及 JavaScript 代码等信息,并且可以进行实时调试和修改。这对于网页开发和调试非常有用,可以帮助开发者更好地理解和修改代码,以实现所需的功能和效果。

通过浏览器的开发者工具,我们可以进行很多有用的操作,包括但不限于:

  1. 元素检查:查看网页的 HTML 结构,通过修改 HTML 元素的属性来实时改变页面效果。
  2. 样式调试:查看和修改 CSS 样式,立即看到样式改变对页面的影响。
  3. JavaScript 调试:可以查看和运行 JavaScript 代码,进行断点调试,查看变量值等。
  4. 网络监控:查看所有加载的资源文件,包括加载时间、文件大小等,对于优化网页加载速度非常有帮助。
  5. 控制台输出:JavaScript 的错误信息、警告信息和调试信息都会显示在控制台,方便开发者查找和解决问题。

5. 变量

变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆,通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】(数据)

<script>// x 符号代表了 5 这个数值x = 5// y 符号代表了 6 这个数值y = 6//举例: 在 JavaScript 中使用变量可以将某个数据(数值)记录下来!// 将用户输入的内容保存在 num 这个变量(容器)中num = prompt('请输入一数字!')// 通过 num 变量(容器)将用户输入的内容输出出来alert(num)document.write(num)
</script>


5.1. 变量的声明

声明(定义)变量有两部分构成:声明关键字、变量名(标识)

<body><script> // let 变量名// 声明(定义)变量有两部分构成:声明关键字、变量名(标识)// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语// age 即变量的名称,也叫标识符let age</script>
</body>

关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是

声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量!!!

5.2. 赋值

声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。

<body><script> // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)// let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语// age 即变量的名称,也叫标识符let age// 赋值,将 18 这个数据存入了 age 这个“容器”中age = 18// 这样 age 的值就成了 18document.write(age)// 也可以声明和赋值同时进行let str = 'hello world!'alert(str);</script>
</body>

5.3. *定义变量关键字

JavaScript 使用专门的关键字 let 和 var 来声明(定义)变量,在使用时需要注意一些细节:

5.3.1. 使用 let 时的注意事项

  1. 允许声明和赋值同时进行
let a = 10; // 声明变量a并赋值为10

  1. 不允许重复声明
let b = 20;
let b = 30; // 报错,b已经被声明过了

  1. 允许同时声明多个变量并赋值
let c = 10, d = 20, e = 30; // 同时声明并赋值多个变量

  1. JavaScript 中内置的一些关键字不能被当做变量名
let let = 10; // 报错,"let"是JavaScript的关键字,不能用作变量名

5.3.2. 使用 var 时的注意事项

  1. 允许声明和赋值同时进行
var f = 40; // 声明变量f并赋值为40

  1. 允许重复声明
var g = 50;
var g = 60; // 不报错,但不推荐这样做,因为会覆盖前一个值

  1. 允许同时声明多个变量并赋值
var h = 10, i = 20, j = 30; // 同时声明并赋值多个变量

5.3.3. let 和 var 的区别

在大部分情况下,letvar的行为类似,但let具有更严格的块级作用域规则,而var在函数级作用域内有效。因此,let可以防止某些在var中可能出现的错误。例如:

if (true) {var x = 'var'; // x在整个函数内部都可见let y = 'let'; // y只在if语句块中可见
}
console.log(x); // 输出 "var"
console.log(y); // 报错,y is not defined,因为y只定义在if语句块中

在这个例子中,我们可以看到var定义的变量在整个函数内部都可见,而let定义的变量只在声明它的代码块内可见。这就是letvar更严谨的地方,它可以防止一些作用域相关的错误。 因此,现代JavaScript编程中,建议使用let来定义变量。


5.4. 变量命名规则

  • 只能是字母、数字、下划线 _ 、美元符号 $ ,且不能能数字开头
  • 字母区分大小写,如 Age 和 age 是不同的变量
  • JavaScript 内部已占用于单词(关键字或保留字)不允许使用
  • 尽量保证变量具有一定的语义,见字知义
<body><script> let age = 18 // 正确let age1 = 18 // 正确let _age = 18 // 正确// let 1age = 18; // 错误,不可以数字开头let $age = 18 // 正确let Age = 24 // 正确,它与小写的 age 是不同的变量// let let = 18; // 错误,let 是关键字let int = 123 // 不推荐,int 是保留字</script>
</body>

6. 常量

概念:使用 const 声明的变量称为“常量”。

使用场景:当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let。

命名规范:和变量一致

//常量PI被赋值为3.14,代表圆周率。
const PI = 3.14

注:因为是常量,常量不允许重新赋值,声明的时候必须赋值(初始化)


7. 数据类型

计算机程序可以处理大量的数据,为了方便数据的管理,在JavaScript中,将数据分成了不同的类型:

注:可以通过 typeof 关键字检测数据类型

<body><h1>JavaScript 类型检测</h1><script>// 检测 1 是什么类型数据,结果为 numberdocument.write(typeof 1)</script>
</body>

7.1. JS弱类型数据语言

同时,JavaScript是一种弱类型的语言,不用提前声明变量的数据类型

JavaScript 是一种弱类型(或动态类型)语言,这意味着不需要提前声明变量的数据类型。

好比,Java 是一种强类型语言,需要提前声明变量的数据类型。

Java 代码示例:

// 在Java中,需要提前声明变量的数据类型
public class Main {public static void main(String[] args) {// 声明一个整型变量int myInt = 10;// 声明一个浮点型变量double myDouble = 20.5;// 声明一个字符串变量String myString = "Hello, World!";System.out.println("myInt: " + myInt);System.out.println("myDouble: " + myDouble);System.out.println("myString: " + myString);}
}

JavaScript 代码示例:

// 在JavaScript中,不需要提前声明变量的数据类型
// 使用var关键字声明变量(在旧版JavaScript中常用,现在推荐使用let或const)
var myInt = 10;
var myDouble = 20.5;
var myString = "Hello, World!";console.log("myInt: " + myInt);
console.log("myDouble: " + myDouble);
console.log("myString: " + myString);// 在JavaScript中,变量类型可以在程序执行过程中动态改变
myInt = "Now I'm a string!";
console.log("myInt: " + myInt);

在 Java 中必须提前声明数据类型,并且一旦声明后就不能改变。

而在 JavaScript 中,可以随时更改变量的数据类型。

这就是强类型语言和弱类型语言之间的主要区别之一。


7.2. 数据类型分类

数据类型

具体类型

解释

基本数据类型

Boolean

布尔型

String

字符串型

Number

数字型

Null

空型

Undefined

未定义型

复杂数据类型

Object

对象

  1. Boolean(布尔型): 这种类型只有两个值:truefalse。它通常用于条件语句中进行逻辑判断。
let isTrue = true;
let isFalse = false;

  1. String(字符串型): 用于表示文本或字符序列。字符串可以用单引号(')或双引号(")定义。
let myString = "Hello, World!";
let myOtherString = 'Another string.';

注意事项:

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套,但是不以自已嵌套自已
  3. 必要时可以使用转义符 \,输出单引号或双引号

对于String类型,你给出了三个注意事项,以下是对于这些注意事项的代码举例:

  1. 无论单引号或是双引号必须成对使用
// 正确
let correctString1 = "Hello";
let correctString2 = 'Hello';// 错误 - 不成对使用引号
let incorrectString1 = "Hello; // 报错,缺少结束的双引号
let incorrectString2 = 'Hello; // 报错,缺少结束的单引号

  1. 单引号/双引号可以互相嵌套,但是不以自己嵌套自己
// 正确 - 双引号内部嵌套单引号
let nestedString1 = "He said, 'Hello!'";// 正确 - 单引号内部嵌套双引号
let nestedString2 = 'She said, "Hi!"';// 错误 - 尝试用自己嵌套自己,这将导致错误
let incorrectNestedString1 = "This is an ""error""."; // 报错,双引号内部不能直接嵌套双引号
let incorrectNestedString2 = 'This is an ''error''.'; // 报错,单引号内部不能直接嵌套单引号

  1. 必要时可以使用转义符 \,输出单引号或双引号
// 使用转义符在双引号字符串内输出双引号
let escapedString1 = "He said, \"Hello!\"";
console.log(escapedString1); // 输出:He said, "Hello!"// 使用转义符在单引号字符串内输出单引号
let escapedString2 = 'She said, \'Hi!\'';
console.log(escapedString2); // 输出:She said, 'Hi!'

  1. Number(数字型): 用于表示数值,包括整数和浮点数。
let myNumber = 10;
let myFloat = 10.5;

  1. Null(空型): 这是一个特殊类型,只有一个值,就是 null。它表示一个空值或无值的状态。
let myNull = null;

  1. Undefined(未定义型): 这是一个特殊类型,表示变量已被声明,但尚未赋值。
let myUndefined;

注意:如果你试图访问一个尚未声明的变量,JavaScript将会抛出一个错误,而不是返回undefined。例如,console.log(notDeclaredVariable) 会导致 ReferenceError: notDeclaredVariable is not defined

  1. Object(对象): 对象是属性的集合,每个属性都有名字和值。JavaScript的对象是键值对的集合,可以是任何数据类型。
let myObject = new Object();
myObject.key1 = "value1";
myObject.key2 = 2;

也可以使用字面量方式创建对象:

let myOtherObject = {key1: "value1",key2: 2,
};

7.3. 数据类型检测

在JavaScript中,可以用typeof运算符进行数据类型的检测

确实,在JavaScript中,我们可以使用typeof运算符来检测数据的类型。下面是一些例子:

console.log(typeof "Hello world"); // 输出:string
console.log(typeof 123); // 输出:number
console.log(typeof true); // 输出:boolean
console.log(typeof { a: 1 }); // 输出:object
console.log(typeof [1, 2, 3]); // 输出:object
console.log(typeof null); // 输出:object
console.log(typeof undefined); // 输出:undefined
console.log(typeof function() {}); // 输出:function

这里有几个要注意的点:

  1. 对于字符串、数字和布尔值,typeof运算符返回的结果是其对应的数据类型。
  2. 对于对象和数组,typeof运算符返回的结果是object。要区分数组和其他对象,可以使用Array.isArray()方法。
  3. 对于nulltypeof运算符返回的结果是object,这是一个历史遗留问题。要检测一个值是否为null,可以直接使用===运算符。
  4. 对于undefinedtypeof运算符返回的结果是undefined。这是因为undefined是一个特殊的值,表示变量已经被声明,但尚未赋值。
  5. 对于函数,typeof运算符返回的结果是function

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/197657.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[C/C++]数据结构 链表OJ题:随机链表的复制

题目描述: 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新…

从零开始 通义千问大模型本地化到阿里云通义千问API调用

从零开始 通义千问大模型本地化到阿里云通义千问API调用 一、通义千问大模型介绍 何为“通义千问”&#xff1f; “通义千问大模型”是阿里云推出的一个超大规模的语言模型&#xff0c;具有强大的归纳和理解能力&#xff0c;可以处理各种自然语言处理任务&#xff0c;包括但…

Oracle主备切换,ogg恢复方法(集成模式)

前言: 文章主要介绍Oracle数据库物理ADG主备在发生切换时(switchover,failover)&#xff0c;在主库运行的ogg进程(集成模式)如何进行恢复。 测试恢复场景&#xff0c;因为集成模式不能在备库配置&#xff0c;所以场景都是基于主库端: 1 主备发生switchover切换&#xff0c;主库…

VUE(一)

1.vue简介 英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js 中文官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js 2.Vue的特点 3.初识VUE 在官网下载VUE.js,有两个版本&#xff0c;一个开发一个生产 <!DOCTYPE html> <html lang"en"…

贝锐蒲公英云AP,企业WiFi功能如何使用?

1. 功能介绍 基于WPA2-EAP安全认证技术&#xff0c;为企业提供了一套易用安全的企业无线网络,实现企业员工通过蒲公英客户端一键连接企业无线WiFi。自动分配一人一帐一密&#xff0c;无需配置证书或手动输入密码&#xff0c;减少沟通成本&#xff0c;方便快捷&#xff0c;提高…

前置语音群呼与语音机器人群呼哪个更好

最近通过观察自己接到的营销电话&#xff0c;通过语音机器人外呼的量应该有所下降。同时和客户交流获取到的信息&#xff0c;也是和这个情况类似&#xff0c;很多AI机器人群呼的量转向了OKCC前置语音群呼。询问原因&#xff0c;说是前置语音群呼转化更快&#xff0c;AI机器人群…

Android修行手册-POI操作中文API文档

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

pm2在Windows环境中的使用

pm2 进程管理工具可以Windows操作系统上运行&#xff0c;当一台Windows电脑上需要运行多个进程时&#xff0c;或者运维时需要运行多个进程以提供服务时。可以使用pm2&#xff0c;而不再是使用脚本。 1. 使用PM2管理进程 1.1. 启动PM2项目 1.1.1. 直接启动项目 参数说明&…

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…

ACWSpring1.3

首先,前端写ajax写上我们的访问路径(就在我们前端的源代码里面),我们建了两个包pkController用于前端页面url映射过来一层一层找到我们的RestController返回bot1里面有键值,返回的这就是一个session对象bot1这个map.前端拿到我们bot1里的两个值给到我们前端显示出来 1准备页面:…

Linux:补充一些常用命令

Linux&#xff1a;补充一些常用命令 1. free -h2. df -lh3. du -sh *4. uname -a5. which6. mvn install 编译打包7. find -name *.jar8. cd -9. nohup java -jar *.jar &10. ps -ef|grep java11. netstat -ntlp 1. free -h free 命令显示系统使用和空闲的内存情况&#x…

Flutter笔记:缩放手势

Flutter笔记 缩放手势 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134485138 目 录 1. 概述2. 缩放手…

Java多线程核心技术第一阶段-Java多线程基础 02

接上篇&#xff1a;Java多线程核心技术第一阶段-Java多线程基础 01 3.3 清除中断状态的使用场景 this.interrupted()方法具有清除状态标志值的功能&#xff0c;借用此特性可以实现一些效果。 【示例3.3.1】在MyThread4线程中向list1和list2存放数据&#xff0c;基于单一职责原…

docker-compose 部署 MySQL 8

目录 前言MySQL 配置文件(my.cnf)docker-compose.yml安装卸载 前言 Windows/Linux 系统通过 docker-compose 部署 MySQL8.0。 MySQL 配置文件(my.cnf) # 服务端参数配置 [mysqld] usermysql # MySQL启动用户 default-storage-engineINNODB # 创建新表时…

【脑与认知科学】【n-back游戏】

请参考课堂内容&#xff0c;设计一种测试工作记忆的实验方法&#xff0c;并选择三位同学作为被试测试工作记忆。请画出实验流程图&#xff0c;叙述实验测试目标&#xff0c;并分析实验结果。 举例&#xff1a;一般我们选择n_back来测试对数字或字母的记忆&#xff0c;选择色块实…

springboot实现在线人数统计

在线人数统计 笔者做了一个网站&#xff0c;需要统计在线人数。 在线有两种&#xff1a; 一、如果是后台系统如果登录算在线&#xff0c;退出的时候或者cookie、token失效的时候就算下线 二、如果是网站前台&#xff0c;访问的时候就算在线 今天我们来讲一下第2种情况&…

SQL零基础入门教程,贼拉详细!贼拉简单! 速通数据库期末考!(九)

UNION ALL UNION ALL 用于合并两个或多个 SELECT 语句的结果。 请注意&#xff0c;UNION ALL 合并的每个 SELECT 语句必须是查询相同数量&#xff0c;相同数据类型的字段&#xff0c;且顺序也必须一致。另外结果集中的列名总是等于 UNION ALL 中第一个 SELECT 语句中的列名。 …

数据结构与算法-图

图 &#x1f388;2.图的存储结构&#x1f4d6;2.4.2邻接表的存储✅2.4.2.1逆邻接表✅2.4.2.2邻接表存储结构的定义✅2.4.2.3邻接表存储结构的类定义✅2.4.2.4创建n个顶点m条边的无向网✅2.4.2.5创建n个顶点m条边的有向网✅2.4.2.6定位操作-查找定点信息在顶点数组中的下标✅2.4…

3GPP协议解读(一)_23.501_23.502_PDU Session_SMF与UDP的交互

UE发起计算服务申请后&#xff0c;网络侧处理的流程 UE发起服务的流程&#xff1a;service request网络侧处理服务涉及的通信数据通过PDU Session进行传输&#xff0c;涉及到SMF与UPF的交互。PDU Session的建立、管理全部由SMF&#xff08;Session Management Function&#x…

【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

uniapp 顶部导航和弹窗被video遮挡解决办法 第一步&#xff1a;配置 subNVues {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom","app-…