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 的区别

在大部分情况下，let和var的行为类似，但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定义的变量只在声明它的代码块内可见。这就是let比var更严谨的地方，它可以防止一些作用域相关的错误。 因此，现代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（布尔型）: 这种类型只有两个值：true 或 false。它通常用于条件语句中进行逻辑判断。
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. 对于null，typeof运算符返回的结果是object，这是一个历史遗留问题。要检测一个值是否为null，可以直接使用===运算符。
  4. 对于undefined，typeof运算符返回的结果是undefined。这是因为undefined是一个特殊的值，表示变量已经被声明，但尚未赋值。
  5. 对于函数，typeof运算符返回的结果是function。

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

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

相关文章

系列六、GC垃圾回收【四大垃圾算法-标记清除算法】

系列六、GC垃圾回收【四大垃圾算法-标记清除算法】

一、概述 标记清除算法分为两个阶段&#xff0c;即&#xff1a;标记和清除两个阶段&#xff0c;先标记出要回收的对象&#xff0c;然后统一回收这些对象。形如&#xff1a; 老年代一般是由标记清除或者标记清除 标记压缩的混合实现。 二、原理 用通俗的话解释一下标记清除算法…
阅读更多...
2023年中职“网络安全“—Web 渗透测试②

2023年中职“网络安全“—Web 渗透测试②

2023年中职“网络安全“—Web 渗透测试② Web 渗透测试任务环境说明&#xff1a;1.访问http://靶机IP/web1/,获取flag值&#xff0c;Flag格式为flag{xxx}&#xff1b;2.访问http://靶机IP/web2/,获取flag值&#xff0c;Flag格式为flag{xxx}&#xff1b;3.访问http://靶机IP/web…
阅读更多...
SOME/IP 协议介绍（六）接口设计的兼容性规则

SOME/IP 协议介绍（六）接口设计的兼容性规则

接口设计的兼容性规则&#xff08;信息性&#xff09; 对于所有序列化格式而言&#xff0c;向较新的服务接口的迁移有一定的限制。使用一组兼容性规则&#xff0c;SOME / IP允许服务接口的演进。可以以非破坏性的方式进行以下添加和增强&#xff1a; • 向服务中添加新方法 …
阅读更多...
莹莹API管理系统源码附带两套模板

莹莹API管理系统源码附带两套模板

这是一个API后台管理系统的源码&#xff0c;可以自定义添加接口&#xff0c;并自带两个模板。 环境要求 PHP版本要求高于5.6且低于8.0&#xff0c;已测试通过的版本为7.4。 需要安装PHPSG11加密扩展。 已测试&#xff1a;宝塔/主机亲测成功搭建&#xff01; 安装说明 &am…
阅读更多...
新生儿奶藓：原因、科普和注意事项

新生儿奶藓：原因、科普和注意事项

引言&#xff1a; 新生儿奶藓是一种常见的婴儿皮肤问题&#xff0c;通常在生后的头几个月内出现。尽管奶藓对婴儿的健康没有太大影响&#xff0c;但了解其原因、科普相关信息以及采取适当的注意事项是帮助父母更好地照顾婴儿皮肤的关键。本文将深入探讨新生儿奶藓的原因、相关…
阅读更多...
PPT基础入门

PPT基础入门

目录 相关设置快捷键shift 快捷键Ctrl 快捷键Ctrl Shift 组合快捷键快捷键总结 相关设置 设置撤回次数 自动保存 图片压缩 字体嵌入&#xff1a;目的是在不同的电脑上保留已经设置好的字体 多格式导出 &#xff08;1&#xff09;可以导出PDF &#xff08;2&#xff09;可以导…
阅读更多...
DevExpress中文教程 - 如何在macOS和Linux (CTP)上创建、修改报表（上）

DevExpress中文教程 - 如何在macOS和Linux (CTP)上创建、修改报表（上）

DevExpress Reporting是.NET Framework下功能完善的报表平台&#xff0c;它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集&#xff0c;包括数据透视表、图表&#xff0c;因此您可以构建无与伦比、信息清晰的报表。 DevExpress Reports — 跨平台报表组件&#x…
阅读更多...
7.docker运行redis容器

7.docker运行redis容器

1.准备redis的配置文件 从上一篇运行MySQL容器我们知道&#xff0c;需要给容器挂载数据卷&#xff0c;来持久化数据和配置&#xff0c;相应的redis也不例外。这里我们以redis6.0.8为例来实际说明下。 1.1 查找redis的配置文件redis.conf 下面这个网址有各种版本的配置文件供…
阅读更多...
C++ 十进制与十六进制转换

C++ 十进制与十六进制转换

文章作者&#xff1a;里海 来源网站&#xff1a;里海C\C专栏 十进制与十六进制转换 #include <iostream> #include <string> using namespace std;//十进制整数转十六进制字符串 string DecimalToHex(long long decimal) {string hex "";while (de…
阅读更多...
svg图标最简单的使用方式

svg图标最简单的使用方式

svg图标最简单的使用方式 使用svg图标1. 复制图标的svg代码2. 新建个存放svg图标的目录&#xff0c;新建.vue文件3. 在<template>标签内粘贴svg的代码4. 在代码中也可以调整颜色和大小5. 在组件中引用6. svg做的图标要独占一行,使用布局将它安排到合适的地方 使用svg图标…
阅读更多...
Leetcode经典题目之“双指针交换元素“类题目

Leetcode经典题目之“双指针交换元素“类题目

1 LC 27. 移除元素 class Solution {public int removeElement(int[] nums, int val) {int nnums.length;int s0;for(int i0;i<n;i){// 只有不等于目标值的时候才会进行交换&#xff0c;然后移动s指针if(nums[i]!val){swap(nums,i,s);}}return s;}void swap(int[]nums, int…
阅读更多...
Uniapp连接iBeacon设备——实现无线定位与互动体验（理论篇）

Uniapp连接iBeacon设备——实现无线定位与互动体验（理论篇）

目录 前言&#xff1a; 一、什么是iBeacon技术 二、Uniapp连接iBeacon设备的准备工作 硬件设备&#xff1a; 三、Uniapp连接iBeacon设备的实现步骤 创建Uniapp项目&#xff1a; 四、Uniapp连接iBeacon设备的应用场景 室内导航&#xff1a; 五、Uniapp连接iBeacon设备的未来…
阅读更多...
X12学习手册

X12学习手册

EDI术语中的X12是指ANSI X12 报文标准&#xff08;EDI Document Standard&#xff09;&#xff0c;于 1979 年发布&#xff0c;由认证标准委员会维护&#xff0c;在过去的几十年中得到扩展&#xff0c;以满足全球业务流程的要求&#xff0c;包括汽车、物流、零售、医药、金融、…
阅读更多...
七,vi和vim

七,vi和vim

Linux系统会内置vi文本编辑器 Vim具有程序编辑的能力&#xff0c;可以看做是Vi的增强版本&#xff0c;可以主动的以字体颜色辨别语法的正确性&#xff0c;方便程序设计。代码补完、编译及错误跳转等方便编程的功能特别丰富&#xff0c;在程序员中被广泛使用。 vi和vim常用的三…
阅读更多...
buildadmin+tp8表格操作（3）----表头上方按钮绑定事件处理，实现功能（选中或取消指定行）

buildadmin+tp8表格操作（3）----表头上方按钮绑定事件处理，实现功能（选中或取消指定行）

在buildAdmin的表格中&#xff0c;通过按钮来选中和取消某一行 这种情况&#xff0c;只适合表格行的单选 在elementplus是这样说的 我们所使用的就是这个方法 看一下buildAdmin中的用法 highlight-current-row 是element-plus 中表格的属性 因为 buildadmin 中的table是对 el…
阅读更多...
STM32存储左右互搏 SPI总线FATS文件读写FLASH W25QXX

STM32存储左右互搏 SPI总线FATS文件读写FLASH W25QXX

STM32存储左右互搏 SPI总线FATS文件读写FLASH W25QXX FLASH是常用的一种非易失存储单元&#xff0c;W25QXX系列Flash有不同容量的型号&#xff0c;如W25Q64的容量为64Mbit&#xff0c;也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库实现FATS文件操作W25Q各型号FLASH的例程。…
阅读更多...
08.智慧商城——购物车布局、全选反选、功能实现

08.智慧商城——购物车布局、全选反选、功能实现

01. 购物车 - 静态布局 基本结构 <template><div class"cart"><van-nav-bar title"购物车" fixed /><!-- 购物车开头 --><div class"cart-title"><span class"all">共<i>4</i>件商品…
阅读更多...
10-19 HttpServletResponse

10-19 HttpServletResponse

相应的对象 web开发模型&#xff1a;基于请求与相应的模型 一问一答的模型 Response对象:响应对象,封装服务器给客户端的相关的信息 顶级接口: ServletResponse 父接口:HttpServletResponse response对象的功能分为以下四种:(都是服务器干的事注意) 设置响应头信息; 发送状态码…
阅读更多...
Vue2基础-Vue对象进阶介绍1

Vue2基础-Vue对象进阶介绍1

文章目录 一、绑定样式绑定class样式绑定style样式总结 二、渲染条件渲染列表渲染语法key详解 三、Vue检测数据原理问题解决 四、收集表单数据五、过滤器定义语法: 六、内置指令回顾v-text指令:v-htmlcookie问题 v-clock指令v-oncev-pre 一、绑定样式 绑定class样式 <!-- …
阅读更多...
SpringCloud-Gateway修改Response响应体，并解决大数据量返回不全等问题

SpringCloud-Gateway修改Response响应体，并解决大数据量返回不全等问题

官网相关案例&#xff1a; Spring Cloud Gatewayhttps://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/#the-modifyresponsebody-gatewayfilter-factory ModifyRequestBodyGatewayFilterFactory类: https://github.com/spring-cloud/spring-cloud-gate…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023