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

前端学习第三天笔记 JavaScript JavaScript的引入 数据类型 运算符 条件语句 字符串

news 2026/2/9 21:44:38

这里写自定义目录标题

    • JavaScript
      • JavaScript引入到文件
        • 嵌入到HTML文件中
        • 引入本地独立js文件
        • 引入网络来源文件
      • JavaScript的注释方式
      • 嵌入在HTML文件中的注释
      • JavaScript的输出方式
      • 数据类型
        • 原始类型（基础类型）
        • 合成类型（复合类型）
    • 运算符
      • typeof运算符
      • 算术运算符
      • 赋值运算符
      • 比较运算符
      • 布尔运算符
      • 条件语句
        • if语句
        • if-else条件语句
        • Switch语句
        • 三元运算符
      • 字符串
        • length属性
        • 字符串方法：charAt()
        • 字符串方法：concat()
        • concat和+的区别
        • 字符串方法：substring()
        • 字符串方法：substr()
        • 字符串方法：indexOf()
        • 字符串方法：trim()
        • 字符串方法：split()

JavaScript

JavaScript引入到文件

嵌入到HTML文件中
<body><script>var age = 20;</script>
</body>
引入本地独立js文件
<body><script type="text/javascript" src="./hello.js"
</body>
引入网络来源文件
<body><script scr="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
</body>

JavaScript的注释方式

  • 单行：//
  • 多行：/* 内容*/

嵌入在HTML文件中的注释

<!-- 注释 -->

温馨提示
注释快捷键：ctrl+/

JavaScript的输出方式

在这里插入图片描述

数据类型

  • JavaScript的数据类型一共有6种，分别是：数值、字符串、布尔值、null、undefined、对象
  • ES6又新增了两种数据类型，分别是：Symbol类型的值和BigInt类型
原始类型（基础类型）
  • 数值、字符串、布尔值
合成类型（复合类型）
  • 对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
var user{name:"复合类型",age:20,learn:true
}

运算符

typeof运算符

  • 用来判断一个变量的类型
var num = 20;
console.log(typeof num);
//会打印“number”

算术运算符

在这里插入图片描述

赋值运算符

在这里插入图片描述

比较运算符

在这里插入图片描述

布尔运算符

在这里插入图片描述

条件语句

if语句

在这里插入图片描述

if-else条件语句

在这里插入图片描述

Switch语句

在这里插入图片描述

三元运算符

在这里插入图片描述

字符串

  • 可以单引号嵌套双引号，也可以双引号嵌套单引号，但是注意不可以双引号中嵌套双引号，单引号中嵌套单引号。
  • 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义，双引号字符串内部使用双引号，也是如此。
var str = "我们知道\"阅读\"是很重要的";
  • 字符串默认只能一行显示，如果要换行，需要转义。
length属性
  • length属性返回字符串的长度，该属性也是无法改变的。
  • 注意：length后不用加小括号
var str = '123456';
console.log(str.length)
//会打印出来6
字符串方法：charAt()
  • charAt方法返回指定位置的字符，参数是从0开始编号的。
  • 如果参数为负数，或者大于等于字符串的长度,charAt返回空字符串。
字符串方法：concat()
  • concat方法用于连接两个字符串，返回一个新的字符串，不改变原字符串。
  • 该方法可以接收多个参数
<script>
var str1 = "hello";
var str2 = "world";
var str3 = "!";
console.log(str1.concat(str2,str3));
//会打印出"helloworld!"
</script>
  • 做字符串相加时，是不需要使用concat的，可以使用+连接字符串。
concat和+的区别
  • concat不管什么类型直接合并成字符串
  • +是遇到数字类型直接做运算，遇到字符串和字符串相连接。
字符串方法：substring()
  • substring方法用于从原字符串取出子字符串并返回，不改变原字符串，它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）
  • (左闭右开区间)
  • 如果省略第二个参数，则表示子字符串一直到原字符串的结束。
  • 如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置
"itbaizhan".substring(8,2);
//等同于
"itbaizhan".substring(2,8);
  • 如果参数是负数，substring方法会自动将负数转为0
字符串方法：substr()
  • substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring方法的作用相同
  • substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
"itbaizhan".substr(2,7)//baizhan
  • 如果省略第二个参数，则表示子字符串一直到原字符串的结束
"itbaizhan".substr(2)//baizhan
  • 如果第一个参数是负数，表示倒数计算的字符位置，如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
"itbaizhan".substr(-7)//baizhan
"itbaizhan".substr(4,-1)//""
字符串方法：indexOf()
  • indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置，如果返回-1，就表示不匹配。
  • indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
字符串方法：trim()
  • trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串
  • 该方法去掉的不仅仅是空格，还包括制表符（\t, \v）、换行符（\n）和回车符（\r）。

trim方法不能去掉字符串中间的空格！！！！

  • ES6扩展方法，trimEnd()和trimStart()方法
  • trimEnd()：去掉字符串尾部空格。
  • trimStart()：去掉字符串头部空格。
字符串方法：split()
  • split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
  • 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split("")//["a","|","b","|","c"]
  • 如果省略参数，则返回数组的唯一成员就是原字符串
'it|sxt|bz'.split()//[it|sxt|bz]
  • split方法还可以接受第二个参数，限定返回数组的最大成员数。
    在这里插入图片描述

相关文章：

前端学习第三天笔记 JavaScript JavaScript的引入 数据类型 运算符 条件语句 字符串

这里写自定义目录标题 JavaScriptJavaScript引入到文件嵌入到HTML文件中引入本地独立js文件引入网络来源文件 JavaScript的注释方式嵌入在HTML文件中的注释JavaScript的输出方式数据类型原始类型&#xff08;基础类型&#xff09;合成类型&#xff08;复合类型&#xff09; 运算…...

编程日记 2024/10/5 16:37:30

C++教程一口气讲完！（万字讲解）(￣y▽￣)╭ Ohohoho... 下

C 常量 常量是固定值&#xff0c;在程序执行期间不会改变。这些固定的值&#xff0c;又叫做字面量。 常量可以是任何的基本数据类型&#xff0c;可分为整型数字、浮点数字、字符、字符串和布尔值。 常量就像是常规的变量&#xff0c;只不过常量的值在定义后不能进行修改。 …...

编程日记 2024/10/5 16:35:28

unity软件安装教程

目录 一、Unity Hub的安装 二、Unity Hub的基础设置 语言切换 安装默认路径 安装unity编辑器和visual Studio 申请许可证 创建新项目 Unity和Visual Studio进行绑定 一、Unity Hub的安装 打开浏览器输入以下网址&#xff1a;unity.cn&#xff0c;打开unity官网 点击下载&#x…...

编程日记 2024/10/5 16:31:25

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠

[大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠 目录 文章目录 [大语言模型-论文精读] 更大且更可指导的语言模型变得不那么可靠目录0. 摘要1. 核心内容3. 创新点4. 算法模型5. 实验效果6. 重要数据与实验结论7. 推荐阅读指数&#xff1a;8. 推荐理由 后记 论文…...

编程日记 2024/10/5 16:29:23

云手机可以解决TikTok运营的哪些问题？

随着社交媒体的飞速发展&#xff0c;TikTok迅速崛起&#xff0c;成为个人和企业进行品牌宣传和内容创作的首选平台。然而&#xff0c;在运营TikTok账号的过程中&#xff0c;不少用户会遇到各种问题。本文将详细阐述云手机如何帮助解决这些问题。 1. 多账号管理的高效便捷 通过云…...

编程日记 2024/10/5 16:25:20

Redis基础三(redis的高级配置)

Redis进阶配置 一、Redis持久化操作 ​ 持久化就是把内存的数据写到磁盘中去&#xff0c;防止服务宕机了内存数据丢失。&#xff08;Redis 数据都放在内存中。如果机器挂掉&#xff0c;内存的数据就不存在。所以需要做持久化&#xff0c;将内存中的数据保存在磁盘&#xff0c…...

编程日记 2024/10/5 16:23:18

Telnet、SSH、RDP和VNC

Telnet、SSH、RDP和VNC都是远程访问和管理的协议或工具&#xff0c;它们各自具有不同的特点和适用场景。 一、基本概念与用途 Telnet 定义&#xff1a;一种基于命令行界面的远程管理协议&#xff0c;允许用户通过网络远程访问和管理计算机。用途&#xff1a;主要用于远程登录和…...

编程日记 2024/10/5 16:21:16

FiBiNET模型实现推荐算法

1. 项目简介 A031-FiBiNET模型项目是一个基于深度学习的推荐系统算法实现&#xff0c;旨在提升推荐系统的性能和精度。该项目的背景源于当今互联网平台中&#xff0c;推荐算法在电商、社交、内容分发等领域的广泛应用。推荐系统通过分析用户的历史行为和兴趣偏好&#xff0c;预…...

编程日记 2024/10/5 16:16:12

影刀RPA:Excel内容填充指令

1.实战目标 本次主要介绍影刀RPA如何操作内容相关的填充与替换指令。主要包含以下 这些指令在数据处理方面有着重要的作用&#xff0c;可以对数据做运算&#xff0c;填充&#xff0c;替换&#xff0c;实现数据格式统一&#xff0c;便于最终的数据分析。在操作的过程中&#xf…...

编程日记 2024/10/5 16:13:09

Threejs创建正多边体

上一章节实现了球体的绘制&#xff0c;这节来绘制多面体&#xff0c;包括正多面体&#xff0c;平面中&#xff0c;每条边一样长组成的图形叫正多边形&#xff0c;这里每个面一样&#xff0c;叫正多面体。如上文一样&#xff0c;先要创建出基础的组件&#xff0c;包括场景&#…...

编程日记 2024/10/5 16:12:08

链表——单链表

题目描述 实现一个单链表&#xff0c;链表初始为空&#xff0c;支持三种操作&#xff1a; (1) 向链表头插入一个数&#xff1b; (2) 删除第 k 个插入的数后面的数&#xff1b; (3) 在第 k 个插入的数后插入一个数 现在要对该链表进行 M 次操作&#xff0c;进行完所有操作后&am…...

编程日记 2024/10/5 16:10:05

【YOLO学习】YOLOv5口罩检测实战

文章目录 1. 环境配置2. 下载代码3. 安装库3.1 安装pytorch3.2 安装其他库 4. 测试5. 数据标注6. 模型训练7. 界面可视化 1. 环境配置 1. 先参考其他文章安装 Anaconda 或者 Miniconda&#xff0c;我安装的是 Miniconda。 2. 更换国内源&#xff0c;以加快速度 。可以参考下面这…...

编程日记 2024/10/5 16:09:03

场景题1-设计redis的key和value的原则

在设计 Redis 的 key 和 value 时&#xff0c;遵循一些最佳实践和设计原则可以确保系统的性能、可扩展性和易维护性。以下是设计 Redis key 和 value 时的常见原则&#xff1a; 1.RedisKey的设计原则 1.1.简短有意义 1&#xff09;Redis 是内存数据库&#xff0c;key 越短&am…...

编程日记 2024/10/5 16:01:57

Shell-使用函数

在 Shell 脚本中&#xff0c;函数是由一段代码定义的&#xff0c;可以被重复调用。Shell 函数的定义和调用相对简单&#xff0c;并且它支持参数传递和返回值。错误处理在 Shell 中也非常重要&#xff0c;通常通过检查返回的状态码来判断是否有错误发生。 1.Shell 函数的定义和…...

编程日记 2024/10/5 16:00:55

Git介绍--github/gitee/gitlab使用

一、Git的介绍 1.1、学习Git的原因&#xff1a;资源管理 1.2、SCM软件的介绍 软件配置管理(SCM)是指通过执行版本控制、变更控制的规程&#xff0c;以及使用合适的配置管理软件来保证所有配置项的完整性和可跟踪性。配置管理是对工作成果的一种有效保护。 二、版本控制软件 …...

编程日记 2024/10/5 15:56:51

【ubuntu】【VirtualBox】VirtualBox无法加载USB移动设备的解决方法(支持U盘启动盘)

TOC 提示&#xff1a;测试可用 一、安装VirtualBox VirtualBox-7.1.2-164945-Win。 下载路径。 Download_Old_Builds_7_0 – Oracle VirtualBox 二、安装Oracle_VirtualBox_Extension_Pack-7.1.2 下载路径见上文。 三、安装增强功能 四、挂载USB 4.1 设置USB协议 4.2 挂…...

编程日记 2024/10/5 15:55:50

Koa2+mongodb项目实战1（项目搭建）

前言 在正式开始之前&#xff0c;需要先知道用到的东西&#xff1a; koa&#xff1a;Koa 是一个基于 Node.js 的 Web 应用框架&#xff0c;非常适合开发API服务&#xff0c;可以与前端框架&#xff08;如 Vue.js、React.js&#xff09;结合使用&#xff0c;实现前后端分离的开…...

编程日记 2024/10/5 15:54:48

Pyhton爬虫使用Selenium实现浏览器自动化操作抓取网页

第三方库Selenium主要是用来抓取动态生成的网页数据&#xff0c;有些网站的内容要下拉网页才会动态加载&#xff0c;特别是那些使用javaScript渲染的内容。当然Selenium还可用于自动化浏览器操作&#xff0c;比如编写一个自动抢火车票的python脚本&#xff0c;这并不难实现。接…...

编程日记 2024/10/5 15:51:45

矩阵学习过程中的一些思考

2024.09.27&#xff08;学习鸢尾花书_矩阵力量_Ch20&#xff09; &#xff08;1&#xff09;所有中心过原点的椭圆都可以用一个二维矩阵表示&#xff0c;且特征值表示长短轴长度&#xff0c;特征向量表示长短轴所在方向的单位向量&#xff08;表征椭圆旋转方向&#xff09;&am…...

编程日记 2024/10/5 15:50:44

初识Django

前言: 各位观众老爷们好&#xff0c;最近几个月都没怎么更新&#xff0c;主要是最近的事情太多了&#xff0c;我也在继续学习Django框架&#xff0c;之前还参加了一些比赛&#xff0c;现在我会开始持续更新Django的学习&#xff0c;这个过程会比较久&#xff0c;我会把我学习的…...

编程日记 2024/10/5 15:49:43

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2026/2/6 5:51:15

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2026/1/23 0:14:48

Springboot 高校报修与互助平台小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;高校报修与互助平台小程序被用户普遍使用&#xff0c;为…...

编程新知 2026/1/21 12:50:02

第14节 Node.js 全局对象

JavaScript 中有一个特殊的对象&#xff0c;称为全局对象&#xff08;Global Object&#xff09;&#xff0c;它及其所有属性都可以在程序的任何地方访问&#xff0c;即全局变量。 在浏览器 JavaScript 中&#xff0c;通常 window 是全局对象&#xff0c; 而 Node.js 中的全局…...

编程新知 2025/11/23 16:36:05