Java Web——JavaScript基础

news2025/1/19 20:18:39

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 的值就成了 18
    document.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 是什么类型数据,结果为 number
        document.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.coloradmin.cn/o/1224573.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git命令总结-常用-后续使用频繁的再添加~

Git命令总结-常用 久了不用&#xff0c;有些时候老是会忘记一些命令&#xff0c;多的都记录一下&#xff0c;方便查找 git init 初始化一个Git仓库&#xff0c;执行完git init命令后&#xff0c;会生成一个**.git**目录&#xff0c;该目录包含了资源数据&#xff0c;且只会在…

如何解决swagger-editor在线接口调试时的跨域问题

文章目录 一&#xff0c;序言二&#xff0c;问题重现1. 运行swagger-editor2. 运行接口服务3. 问题重现步骤 三&#xff0c;解决问题思路1. 去除浏览器安全限制2. 服务器接口统一处理3. 委托nginx转发 四&#xff0c;完整接口代码传送 一&#xff0c;序言 在 Docker 运行swagg…

从C语言的面向过程编程过渡理解面向对象编程风格中的封装

黑发不知勤学早&#xff0c;白首方悔读书迟 专栏推荐Easyx学习实践 有所收获希望大家能够三连哇&#xff01;&#xff01;&#xff01; 在C语言中&#xff0c;我们解决一个问题通常是采用在了解了问题如何解决后&#xff0c;设置一个一个的函数&#xff0c;依次调用实现不同的功…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

windows安装Git【超详细图解】

目录 git安装地址 git配置 提交代码时使用的命令 git安装地址 Git for WindowsWe bring the awesome Git VCS to Windowshttps://gitforwindows.org/ 打开终端&#xff0c;输入git --version git配置 git config --global user.name "用户名" git config --g…

目录自动清洗

文章目录 前言一、需求分析二、操作步骤详解&#xff08;标准章节&#xff09;1. 提取文章目录2. 更改保存目录.txt3. 二级标题前面加4个空格4. 在章字和节字后面添加一个空格5. 在页码前面加上>符号6. 代码完全体 三、进阶一&#xff08;有章无节小数二级标题&#xff09;1…

MLC-LLM 支持RWKV-5推理以及对RWKV-5的一些思考

自从2023年3月左右&#xff0c;chatgpt火热起来之后&#xff0c;我把关注的一些知乎帖子都记录到了这个markdown里面&#xff0c;&#xff1a;https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/large-language-model-note &#xff0c;从2023年3月左右到现…

cesium 重点区域大屏展示效果(加载行政区划)

cesium 重点区域大屏展示效果(配色不太好看,主要看思路和方法) 1、实现思路(文张最后有**源码 **) 1、第一步将cesium背景调成透明关掉光照大气等效果相关属性都在“viewer.scene”中 2、第二步添加背景图片此背景图片直接用html加css就可以完成 3、第三步添加蒙版效果也…

Vue3 函数式弹窗

运行环境 vue3vitetselement-plus 开发与测试 1. 使用h、render函数创建Dialog 建议可在plugins目录下创建dialog文件夹&#xff0c;创建index.ts文件&#xff0c;代码如下 import { h, render } from "vue";/*** 函数式弹窗* param component 组件* param opti…

2023-11-18 LeetCode每日一题(数位和相等数对的最大和)

2023-11-18每日一题 一、题目编号 2342. 数位和相等数对的最大和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的数组 nums &#xff0c;数组中的元素都是 正 整数。请你选出两个下标 i 和 j&#xff08;i ! j&#xff09;&#xff0c;且 nums[i] …

【教3妹学编程-java基础6】详解父子类变量、代码块、构造函数执行顺序

-----------------第二天------------------------ 本文先论述父子类变量、代码块、构造函数执行顺序的结论&#xff0c; 然后通过举例论证&#xff0c;接着再扩展&#xff0c;彻底搞懂静态代码块、动态代码块、构造函数、父子类、类加载机制等知识体系。 温故而知新&#xff…

Redis新操作

1.Bitmaps 1.1概述 Bitmaps可以对位进行操作&#xff0c;实际上它就是一个字符串&#xff0c;可以将Bitmaps想象为一个以位为单位的数组&#xff0c;数组中的每个元素只能存储0或者1&#xff0c;数组的下标在Bitmaps被称为偏移量。 setbit key offset value&#xff1a;设置o…

问卷工具价格一览:合理定价,满足您的预算需求

在市场调研、市场营销和客户反馈收集等方面&#xff0c;问卷调查是一项重要而有效的工具。而在众多的问卷工具中&#xff0c;Zoho Survey以其丰富的功能和灵活的定价模式而备受关注。Zoho Survey的定价如何&#xff1f;今天我们来聊一聊。 Zoho Survey提供了多种定价方案&…

【【萌新的SOC学习之 VDMA 彩条显示实验之一】】

萌新的SOC学习之 VDMA 彩条显示实验之一 实验任务 &#xff1a; 本章的实验任务是 PS写彩条数据至 DDR3 内存中 然后通过 VDMA IP核 将彩条数据显示在 RGB LCD 液晶屏上 下面是本次实验的系统框图 VDMA 通过 HP接口 与 PS端的 DDR 存储器 进行交互 因为 VDMA 出来的是 str…

Nginx安装配置与SSL证书安装部署

一、Nginx Nginx是一款高性能的开源Web服务器和反向代理服务器&#xff0c;被广泛用于构建现代化的Web应用和提供静态内容。 nginx官网 这里下载nginx-1.24.0-zip Nginx是一款高性能的开源Web服务器和反向代理服务器&#xff0c;被广泛用于构建现代化的Web应用和提供静态内…

【数据分享】2023年我国省市县三级的科技型中小企业数量(Excel/Shp格式)

企业是经济活动的参与主体。一个城市的企业数量决定了这个城市的经济发展水平&#xff01;比如一个城市的金融企业较多&#xff0c;那这个城市的金融产业肯定比较发达&#xff1b;一个城市的制造业企业较多&#xff0c;那这个城市的制造业肯定比较发达。 之前我们给大家分享了…

青少年CTF-WEB-Flag在哪里?

题目环境&#xff1a;F12查看源代码得到flag&#xff1a;qsnctf{1167716c-54f0-47da-baed-49e3b08dfaeb} 此题主要考察F12查看源代码的使用

龙芯 操作系统选择和安装

龙芯3a5000及之后的cpu底层架构已经从mips64el改为了loongarch64 所以这里分了2种来说明&#xff0c;分别对应3a4000之前的和3a5000之后的 龙芯的系统安装难点在于操作系统的选取和引导 一、烧录工具 制作安装盘使用常规的烧录工具是不行滴&#xff0c;会提示没有\boot\initrd…

机器学习第8天:SVM分类

文章目录 机器学习专栏 介绍 特征缩放 示例代码 硬间隔与软间隔分类 主要代码 代码解释 非线性SVM分类 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 介绍 作用&#xff1a;判别种类 原理&#xff1a;找出一个决策边界&#xff0c;判断数据所处区域来识别种类 简单…

Redisson 分布式锁实战应用解析

文章目录 前言一、Redisson介绍二、Redisson的使用1.1 引入依赖1.2 编写配置1.3 示例测试_011.4 示例测试_02 三、Redisson源码分析2.1 加锁源码2.2 看门狗机制 前言 分布式锁主要是解决分布式系统下数据一致性的问题。在单机的环境下&#xff0c;应用是在同一进程下的&#x…