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

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

news 2026/5/20 21:20:33

这里写自定义目录标题

    • 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

你的动漫图片为什么总是不够清晰？3个步骤让AI帮你还原4K级画质

你的动漫图片为什么总是不够清晰&#xff1f;3个步骤让AI帮你还原4K级画质 【免费下载链接】Real-ESRGAN Real-ESRGAN aims at developing Practical Algorithms for General Image/Video Restoration. 项目地址: https://gitcode.com/gh_mirrors/re/Real-ESRGAN 想象一…...

编程新知 2026/5/20 21:19:25

AUTOSAR Ea模块深度剖析：从原理到实战的EEPROM抽象层配置与优化

1. 项目概述&#xff1a;为什么我们需要深入理解Ea模块&#xff1f;在AUTOSAR的软件架构里&#xff0c;NVRAM管理器&#xff08;NvM&#xff09;负责非易失性数据的抽象管理&#xff0c;而Ea&#xff08;EEPROM Abstraction&#xff0c;EEPROM抽象&#xff09;模块&#xff0c;…...

编程新知 2026/5/20 21:04:45

YOLO-ONNX-Java分布式推理架构设计与实现

YOLO-ONNX-Java分布式推理架构设计与实现 引言&#xff1a;单机推理的性能瓶颈 在实际的AI视觉识别项目中&#xff0c;随着业务规模的扩大&#xff0c;单机推理往往面临以下挑战&#xff1a; 并发处理能力有限&#xff1a;单台服务器无法同时处理大量视频流GPU资源利用率低&…...

编程新知 2026/5/20 19:18:03

React Google Maps自定义地图控件开发：扩展原生控件的完整指南

React Google Maps自定义地图控件开发&#xff1a;扩展原生控件的完整指南 【免费下载链接】react-google-maps React components and hooks for the Google Maps JavaScript API 项目地址: https://gitcode.com/gh_mirrors/rea/react-google-maps 你是否想让你的Google…...

编程新知 2026/5/20 18:37:21

新手村通关攻略：大唐杯‘通信技术导论’仿真模块全流程实操解析（含设备配置清单）

大唐杯通信技术仿真实战指南&#xff1a;从零搭建智能通信系统 第一次参加大唐杯的新手们&#xff0c;面对仿真模块里密密麻麻的设备参数和操作界面&#xff0c;是不是有种"我是谁&#xff1f;我在哪&#xff1f;我要点哪里&#xff1f;"的迷茫感&#xff1f;别担心&…...

编程新知 2026/5/20 16:03:18

手把手改造libmad：将一次性加载改为流式解码，拯救你的内存不足嵌入式系统

嵌入式音频革命&#xff1a;libmad流式解码改造实战指南 在资源受限的嵌入式环境中处理MP3音频&#xff0c;就像试图用吸管喝光整个游泳池的水——传统的一次性加载方式会让你的系统瞬间窒息。当树莓派Pico这类微控制器只有264KB的RAM时&#xff0c;一个5MB的MP3文件就能让内存…...

编程新知 2026/5/20 15:27:30

MarkdownViewer++：5分钟让Notepad++变身专业Markdown编辑器的终极指南

MarkdownViewer&#xff1a;5分钟让Notepad变身专业Markdown编辑器的终极指南 【免费下载链接】MarkdownViewerPlusPlus A Notepad Plugin to view a Markdown file rendered on-the-fly 项目地址: https://gitcode.com/gh_mirrors/ma/MarkdownViewerPlusPlus 你是否还在…...

编程新知 2026/5/20 14:19:19

告别Python依赖！用SpringBoot+LangChain4j从零搭建企业级RAG知识库（附避坑指南）

告别Python依赖&#xff01;用SpringBootLangChain4j从零搭建企业级RAG知识库&#xff08;附避坑指南&#xff09; 在AI技术快速落地的今天&#xff0c;检索增强生成&#xff08;RAG&#xff09;已成为企业知识管理的热门解决方案。然而&#xff0c;当大多数团队都在Python生态…...

编程新知 2026/5/20 14:00:28

用Wave2Lip和GFP-GAN给老电影片段配音：从《秋天不回来》到自定义音频的完整实践

用Wave2Lip和GFP-GAN重塑经典影像&#xff1a;从技术原理到影视级修复实战 当黑白胶片中的玛丽莲梦露突然用AI生成的嘴唇同步唱起Billie Eilish的《Bad Guy》&#xff0c;或是《罗马假日》里的奥黛丽赫本开始用你录制的生日祝福开口说话——这种跨越时空的"数字口技"…...

编程新知 2026/5/20 13:39:40

华硕笔记本终极控制工具G-Helper：如何用免费轻量软件完全替代臃肿的Armoury Crate？

华硕笔记本终极控制工具G-Helper&#xff1a;如何用免费轻量软件完全替代臃肿的Armoury Crate&#xff1f; 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Stri…...

编程新知 2026/5/20 12:01:44