JS基础(语法结构变量数据类型运算符流程控制)

news2025/1/12 9:56:13

JS基础(语法结构/变量/数据类型/运算符/流程控制)

目录

  • JS基础(语法结构/变量/数据类型/运算符/流程控制)
    • 什么是js?
    • 注释语法
    • 语法结构
    • 引入方式
        • 【1】script标签内部直接书写js代码
        • 【2】script标签src属性引入外部js代码
    • JS基础数据类型
    • 变量与常量
      • 变量的定义
      • 常量的定义
    • 运算符
      • 算数运算符
        • 算术运算符:
        • 赋值运算符
        • 比较运算符:
        • 逻辑运算符
        • 条件运算符(三元运算符)
    • 流程控制语句
      • if条件语句
      • for循环
      • switch语句
      • while循环

什么是js?

JavaScript 是一种前端脚本编程语言,主要依赖于Web浏览器运行,同时也可以进行后端开发,例如Node.js。通过DOM操作网页元素,POM设计模式使测试代码更可维护、可扩展,提高自动化测试效率。

注释语法

// 单行注释
/*
多行注释
多行注释
*/

语法结构

js可以加;结尾,也可以不加,不会影响代码执行。建议要么整个项目都加,要么整个项目都不加

console.log("Hello");
console.log("World")

image-20240220203804586

引入方式

【1】script标签内部直接书写js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log("你好")
</script>
</body>
</html>

image-20240220203256152

【2】script标签src属性引入外部js代码
<!--test.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

<!--test.js-->
console.log("Hello")

image-20240220203659082

JS基础数据类型

  1. 字符串String,表示文本数据,使用单引号或双引号包裹起来,例如 'Hello'"World"
  2. 数字Number,表示数字类型,可以是整数和浮点数,例如63.5
  3. 布尔值Boolean,表示逻辑值,只有TrueFalse
  4. 空值Null,表示没有值的特殊类型,只有一个取值Null
  5. 未定义Undefind,表示未被赋值的变量,默认情况下具有未定义的值,通过 undefined 表示
  6. 符号Symbol,表示独一无二的值,用于创建唯一的对象属性键
  7. 数组Array,表示有序的可迭代的数据列表,通过 [] 定义,可以存储多个值,与python中的列表相似
  8. 对象Object,表示键值对集合,通过 {} 定义,并且可以动态添加、修改和删除属性,与python中的字典相似

变量与常量

变量的定义

在JS中定义变量会用varlet关键字进行声明

var x = 10; // 可以修改值
let y = "Hello"; //可以修改值

常量的定义

在JS中定义常量会用const关键字进行声明

const z = 3.14; //不可修改值

常量一旦被赋值后便不可被修改,如果修改则会报错

运算符

算数运算符

  1. 算术运算符:
    • 加法:+

    • 减法:-

    • 乘法:*

    • 除法:/

    • 取余:%

    • 自增:++

    • 自减:--

      • 其中++和–需要额外注意的是,x++和++x并不是同一个含义

      • // ++x表示先+1再赋值
        var x = 10;
        console.log(++x); // x = 11
        
        // y++表示先赋值再+1
        var y = 10;
        console.log(y++); // y = 10
        console.log(y); // y = 11
        
  2. 赋值运算符
    • 简单赋值:=
    • 加法赋值:+=
    • 减法赋值:-=
    • 乘法赋值:*=
    • 除法赋值:/=
    • 取余赋值:%=
    • 其他赋值运算符如 **=<<=>>= 等等
  3. 比较运算符:
    • 相等:==
    • 不相等:!=
    • 全等:===
    • 不全等:!==
    • 大于:>
    • 小于:<
    • 大于等于:>=
    • 小于等于:<=
  4. 逻辑运算符
    • 逻辑与:&&
    • 逻辑或:||
    • 逻辑非:!
  5. 条件运算符(三元运算符)
    • 条件条件成立表达式1:条件不成立表达式2

    • var age = 18;
      var result = (age >= 18) ? "成年人" : "未成年人";
      console.log(result); // 输出: "成年人"
      

流程控制语句

if条件语句

var x = 8;
if (x<20){
    conlose.log('x小于20')
}else if (x<10){
    conlose.log('x小于10')
}else{
    conlose.log('x大于等于20')
}

image-20240220211836909

for循环

for (var i = 0; i < 5; i++) {
    console.log(i)
}

image-20240220211534169

switch语句

var x = 3;
switch(x){
    case 1:
        console.log("今天是周一");
        break;
    case 2:
        console.log("今天是周二");
        break;
    case 3:
        console.log("今天是周三");
        break;
}

image-20240220212252477

while循环

var x = 0;
while(x < 10){
    console.log(x);
    x++;
}

image-20240220212038156

console.log("今天是周三");
    break;

}


[外链图片转存中...(img-2oAdrPYx-1708435445382)]

### while循环

```js
var x = 0;
while(x < 10){
    console.log(x);
    x++;
}

[外链图片转存中…(img-dCzXvelv-1708435445382)]

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

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

相关文章

2000-2022各省产业结构高级化合理化指数(含原始数据、计算过程+计算结果)

2000-2022各省产业结构高级化合理化指数&#xff08;含原始数据、计算过程计算结果&#xff09; 1、时间&#xff1a;2000-2022年 2、指标&#xff1a;国内生产总值、第一产业增加值、第二产业增加值、第三产业增加值、总就业人数、第一产业就业人数、第二产业就业人数、第三…

Maven的初步认识

Maven 1,Maven 简介 Maven是Apache软件基金会的一个开源项目,是一个优秀的项目构建工具,他用来帮助开发者管理项目中的jar包以及jar之间的依赖关系,完成项目的编译,测试,打包发布等工作. Maven中的概念 pom(Project Object Model 项目对象模型) maven 管理项目的根目录下 都…

DOC主题 WordPress博客、文库、资讯主题

主题专为博客、自媒体、资讯类的网站设计开发&#xff0c;适合做博客、文库、帮助中心的主题。 演示站&#xff1a;做好服务 - 服务器故障、网站故障、宝塔问题快速排查与修复 截图 代码非常简练&#xff0c;主题下载地址&#xff1a;DOC主题.zip

CAN_相关的测试用例+测试方法+测试工具使用+输出测试报告

测试类型: 第一:通信测试 第二:间接网络管理测试 第三:AUTOSAR网络管理测试 第四:诊断协议栈Diva测试 第五:诊断协议补充测试 第六:Bootloader测试 第七:网…

【数据结构】队列「介绍+完整代码+调试」

1.队列 1.1队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称…

忘记管理员密码

1、在/home/jenkins/config.xml中删除&#xff1a; <useSecurity>true</useSecurity><authorizationStrategy class"hudson.security.FullControlOnceLoggedInAuthorizationStrategy"><denyAnonymousReadAccess>false</denyAnonymousRea…

windows安装以及切换使用nodejs多版本

1 安装nvm nvm是一个简单的bash脚本&#xff0c;它是用来管理系统中多个已存的Node.js版本。 可以先把系统已有的node卸载掉&#xff0c;也可不卸载&#xff0c;但是以防没必要的冲突&#xff0c;尽量还是卸掉。 1.1 下载nvm 下载地址&#xff1a;https://github.com/corey…

Flutter踩坑记之四

又踩了一个大坑&#xff0c;Flutter分享到微信的&#xff0c;Android一直正常&#xff0c;苹果的不行 搞了3天&#xff0c;反复的核对苹果开发者中的相应参数设置与info的相关参数 找了很多贴子&#xff0c;最后还是通过手工加日志&#xff0c;发现在registryWxAPI的时候就返…

【Vuforia+Unity】AR03-圆柱体物体识别

1.创建数据库模型 这个是让我们把生活中类似圆柱体和圆锥体的物体进行AR识别所选择的模型 Bottom Diameter:底部直径 Top Diameter:顶部直径 Side Length:圆柱侧面长度 请注意&#xff0c;您不必上传所有三个部分的图片&#xff0c;但您需要先为侧面曲面关联一个图像&#…

笔试与面试

目录: 笔试与面试Java程序员如何应对笔试面试中的基本礼仪如何解除面试的紧张情绪如何做好自我介绍如何做好项目介绍面试中的多种问法如何让你的回答更到位被面试官问住了该怎么办面试中的一面二面与终面如何应对HR面试如何有效地与HR洽谈薪水如何了解公司福利待遇如何做好面试…

老年人手环的设计与实现

随着我国进入老年化社会&#xff0c;患有慢性病的老年人也越来越多&#xff0c;是需要时刻关注身体的生理指标以更好地知道个人的身体健康状况。过去对人体生理参数的检测都是当生病住院的时候通过医院的设备来检测&#xff0c;而人们缺乏日常的检测手段。而随着单片机和传感器…

【办公类-16-07-04】合并版“2023下学期 中班户外游戏(有场地和无场地版,一周一次)”(python 排班表系列)

背景需求&#xff1a; 把 无场地版&#xff08;贴周计划用&#xff09; 和 有场地版&#xff08;贴教室墙壁上用&#xff09; 组合在一起&#xff0c;一个代码生成两套。 【办公类-16-07-02】“2023下学期 周计划-户外游戏 每班1周五天相同场地&#xff0c;6周一次循环”&…

使用 Docker 安装 Kibana 8.4.3

使用 Docker 安装 Kibana 8.4.3 一. 安装启动 Kibana 8.4.3二. 简单使用2.1 向 Elasticsearch 发送请求2.2 搜索2.3 整体页面 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 安装k…

【Linux系统化学习】动静态库 | 软硬链接

目录 硬链接和软链接 硬链接 软链接 动态库和静态库 静态库 静态库的生成 静态库的使用 将库打包和使用 动态库 动态库的生成 动态库的使用 库搜索路径 硬链接和软链接 硬链接 上篇文章我们说到真正找到磁盘上的文件并不是文件名&#xff0c;而是inode。其实在…

CTFshow web(sql注入171-175)

web171 还得先爆表名 -1 union select 1,2,group_concat(table_name) from information_schema.tables where table_schema database()-- 注意这里已经提示你了&#xff0c;只要知道是ctfshow_user&#xff0c;就可以拿到flag -1 union select 1,2,password from ctfshow_user…

神经网络算法 —— Embedding(嵌入)!!

文章目录 前言 1、Embedding的本质 &#xff08;1&#xff09;机器学习中的Embedding &#xff08;2&#xff09;NLP中的Embedding 2、Embedding的原理 &#xff08;1&#xff09;Image Embedding&#xff08;图像嵌入&#xff09; &#xff08;2&#xff09;Word Embedding&am…

vue创建项目报:Error: command failed: yarn

我的文件在&#xff1a;C:\Users\Administrator 下 原来里面 useTaobaoRegistry 是否使用淘宝源 是 false &#xff0c;我改为true就好了 也可以 packageManager 默认安装工具 改为 npm 或 cnpm 原文连接&#xff1a;vue创建项目报&#xff1a;Error: command failed: yarn-阿…

企业客户服务的细节关注与客户满意度的提升

在今天这个竞争激烈的市场环境中&#xff0c;企业要想在众多的竞争者中脱颖而出&#xff0c;仅仅依靠优质的产品或服务已经无法满足。企业必须更深入地理解和满足客户的需求&#xff0c;提供超出客户期望的服务&#xff0c;才能真正赢得客户的忠诚和满意。那么&#xff0c;如何…

redis分布式锁redisson

文章目录 1. 分布式锁1.1 基本原理和实现方式对比synchronized锁在集群模式下的问题多jvm使用同一个锁监视器分布式锁概念分布式锁须满足的条件分布式锁的实现 1.2 基于Redis的分布式锁获取锁&释放锁操作示例 基于Redis实现分布式锁初级版本ILock接口SimpleRedisLock使用示…

mysql 2-20

TEXT类型 枚举类型 SET类型 二进制字符串类型 BLOB类型 注意事项 JSON类型 提取数据 空间类型 选择建议 约束