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

news2024/10/5 1:20:51

这里写自定义目录标题

    • 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方法还可以接受第二个参数,限定返回数组的最大成员数。
    在这里插入图片描述

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

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

相关文章

Github优质项目推荐-第二期

文章目录 Github优质项目推荐 - 第二期一、【hello-algo】&#xff0c;96.1k stars - 算法与数据结构动画图解二、【tabby】&#xff0c;58.6k stars - ssh工具三、【mem0】&#xff0c;22.1k stars - 大模型长期记忆四、【HivisionIDPhotos】&#xff0c;10.6k stars - AI证件…

多智能体协作强化学习中的知识共享

本文提出了一种名为谨慎乐观知识共享&#xff08;CONS&#xff09;的新方法&#xff0c;用于解决合作多智能体强化学习&#xff08;MARL&#xff09;中的知识共享问题。针对传统的行动建议方法可能导致团队探索受阻的情况&#xff0c;即经验丰富的智能体会分享其知识而较不成熟…

【C++算法】10.滑动窗口_长度最小的子数组

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a;图解 题目链接&#xff1a; 209. 长度最小的子数组 题目描述&#xff1a; 解法 解法一&#xff1a;暴力求解&#xff08;会超时&#xff09; 暴力枚举出所有子数组的和。 查找子数组n2&#xff0…

03:(寄存器开发)OLED的简单使用

OLED的简单使用 将江科大的标准库开发OLED的代码进行移植&#xff0c;修改的部分代码如下&#xff1a; /*引脚配置*/ //#define OLED_W_SCL(x) GPIO_WriteBit(GPIOB, GPIO_Pin_8, (BitAction)(x)) //#define OLED_W_SDA(x) GPIO_WriteBit(GPIOB, GPIO_Pin_9, (BitAction)(x))…

mybatis-plus使用总结

基本使用 mybatis-plus依赖 <!-- mybatis-plus开始 --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.7</version></dependency><dependency>&l…

D27【 python 接口自动化学习】- python 基础之判断与循环

day27 判断和循环中常见错误 学习日期&#xff1a;20241004 学习目标&#xff1a;判断与循环&#xfe63;-38 避坑指南&#xff1a;判断和循环中的常见错误 学习笔记&#xff1a; 循环过程中改变遍历次数 遍历中修改列表导致误操作 循环嵌套中的缩进导致运行语句有差别 总结…

17 链表——21. 合并两个有序链表 ★

17 链表 21. 合并两个有序链表 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3,4,4] 算法设计: 合并两个有序链表,并保持有序性,可以采用迭代法和递归法两种…

小白必看web专题!渗透测试还是src?

大家好&#xff0c;我是Dest1ny&#xff01; 今天是回答问题的&#xff0c;有小伙伴私信我&#xff1a; 渗透测试还是src&#xff1f; 今天回答一下&#xff01; 渗透测试&#xff08;Penetration Testing&#xff09;&#xff1a; 渗透测试是一种模拟真实攻击者的技术手段&…

Vue3+TS项目 - ref和useTemplateRef获取组件实例

在Vue2中&#xff0c;子组件使用的是选项式 API &#xff0c;被引用的组件实例和该子组件的 this 完全一致&#xff0c;这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易&#xff0c;当然也因此&#x…

java相关新技术

Java作为一种广泛应用的编程语言&#xff0c;其新技术层出不穷&#xff0c;为开发者提供了更多的工具和框架来构建高效、可扩展的应用程序。以下是一些当前比较热门的Java新技术 Java 17及更高版本&#xff1a; Java平台持续更新&#xff0c;每个新版本都带来了性能改进和新特…

C++学习笔记之类对象(一)

C学习笔记之类&对象&#xff08;一&#xff09; https://www.runoob.com/cplusplus/cpp-classes-objects.html 类是C的核心特性&#xff0c;为用户自定义的数据类型&#xff0c;可以在其中放入数据和函数作为成员&#xff0c;并且以此为模板&#xff0c;创建多个对象个体进…

三维世界的魅力:探索开源的Three.js案例

三维世界的魅力&#xff1a;探索开源的Three.js案例 原生Three.js 和 Cesium.js 案例 - 不断 - 只做开源 。 引言 在这个数字化时代&#xff0c;三维技术已经成为我们生活中不可或缺的一部分。无论是在游戏、电影制作、建筑设计还是虚拟现实中&#xff0c;三维技术都发挥…

ARM Assembly: 第8课 branching

branch causes a branch to a target address. The "B" mnemonic signifies an unconditional branch. 单个的B表示进入一个无条件的分支&#xff0c;而含条件的分支通常可以基于APSR 条件flag进行指令的执行。比如&#xff0c;基于condition flag z是否为1, 我们可…

深度学习基础—目标定位与特征点检测

1.目标定位 &#xff08;1&#xff09;定义 目标定位就是在图片中&#xff0c;定位对象的位置&#xff0c;对于对象的位置可以用框圈住显示。如下图所示&#xff1a; 假设正在进行图片分类工作&#xff0c;那么这个汽车图片很有可能被分类为汽车类别。对于目标定位&#xff0c;…

[图形学]smallpt代码详解(1)

一、简介 本文介绍了著名的99行代码实现全局光照的光线跟踪代码smallpt。 包括对smallpt的功能介绍、编译运行介绍&#xff0c;和对代码的详细解释。希望能够帮助读者更进一步的理解光线跟踪。 二、smallpt介绍 1.smallpt是什么 smallpt(small Path Tracing) 是一个全局光照…

C# List遍历元素重新赋值问题

需求&#xff1a;修改List<string>类型的链表的每一个string对象。 第一反应是List.ForEach&#xff0c;但是使用完后&#xff0c;原链表还是原链表&#xff1b; 后来又学习了一下&#xff0c;了解到C#用foreach语句对数组进行遍历,只能采用只读的方式,不能修改任何元素…

探索Kimi:用Spring Boot + Vue打造现代网站

在数字化时代&#xff0c;网站成为了企业和个人展示自己的窗口。今天&#xff0c;我将带你一起探索如何利用Spring Boot和Vue.js这两个强大的技术栈&#xff0c;结合Kimi的智能助手功能&#xff0c;来构建一个现代的网站。这不仅是一个技术分享&#xff0c;更是一次实战演示&am…

一个信号量操作的例子

代码&#xff1a; #include<stdio.h> #include<sys/sem.h> #include<sys/ipc.h> #include<errno.h> #include<string.h> typedef int sem_t; union semun{ int val; struct semid_ds *buf; unsigned short *array; }arg;sem_t CreateSem(key_t …

【Qt】控件概述 (1)—— Widget属性

控件概述 1. QWidget核心属性1.1核心属性概述1.2 enable1.3 geometry——窗口坐标1.4 window frame的影响1.4 windowTitle——窗口标题1.5 windowIcon——窗口图标1.6 windowOpacity——透明度设置1.7 cursor——光标设置1.8 font——字体设置1.9 toolTip——鼠标悬停提示设置1…