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

JavaScript学习第1天:浏览器组成、JS的组成、变量、数据类型转化、运算符、while和do...while循环

目录

  • 一、浏览器的组成
  • 二、JS的组成
  • 三、变量
    • 1、同时声明多个变量
    • 2、声明变量特殊情况
  • 四、数据类型
    • 1、数据类型
    • 2、 isNaN()方法
    • 3、字符串转义符
    • 4、字符串拼接
    • 5、特殊拼接
  • 五、数据类型转换
    • 1、转化为字符串
    • 2、转化为数字型
    • 3、转化为布尔值
  • 六、运算符
    • 1、递增和递减运算符
    • 2、逻辑运算符
  • 七、流程控制
    • 1、while循环
    • 2、do...while循环

一、浏览器的组成

浏览器分成两部分:渲染引擎和 JS 引擎
渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink
JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。 JavaScript 语言归为脚本语言。

二、JS的组成

JavaScript由ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)组成。

ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

三、变量

变量是程序在内存中申请的一块用来存放数据的空间。

1、同时声明多个变量

同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

2、声明变量特殊情况

情况说明结果
var age;console.log(age);只声明不赋值undefined
console.log(age);不声明不赋值,直接使用报错
age=10,console.log(age);不声明只赋值10

四、数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会
被自动确定。

1、数据类型

JS 把数据类型分为两类:
 简单数据类型 (Number,String,Boolean,Undefined,Null)
 复杂数据类型 (object)

2、 isNaN()方法

isNaN()方法用来判断一个变量是否为非数字的类型,返回 true 或者 false

3、字符串转义符

转义符说明
\n换行符
\斜杠\
\’‘ 单引号
""双引号
\ttab缩进
\b空格

4、字符串拼接

多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

经常会将字符串和变量来拼接,变量是不能添加引号的,因为加引号的变量会变成字符串,如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间

5、特殊拼接

布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaNvar variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

五、数据类型转换

可以使用 typeof 获取变量的数据类型

1、转化为字符串

方式说明举例
toString()转换成字符串var num=1; alert(num.toString())
String转换成字符串var num=1; alert(String(num))
加号拼接字符串和字符串拼接的结果都是字符串var num=1; alert(num+‘你好’)

2、转化为数字型

方式说明举例
parseInt(string)转化为整数parseInt(‘89’)
parseFloat(string)转化为浮点数parseFloat(‘89.98’)
Number()强制转化转化为数字Number(‘89’)
js隐式转换(- * /)利用算术运算隐式转换为数值型‘12’- 0

3、转化为布尔值

方式说明举例
(Boolean()转化为布尔型(Boolean(‘true’)

代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined ,其余值都会被转换为 true

六、运算符

不要直接判断两个浮点数是否相等

var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001

1、递增和递减运算符

递增(++)和递减( – )分为前置递增(递减)运算符和后置递增(递减)运算符,递增和递减运算符必须和变量配合使用

前置递增:先自加,后运算
后置递增:先原值运算,后自加

区别:单独使用时,运行结果相同, 与其他代码联用时,执行结果会不同, 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num–;

var num = 10;
alert(++num + 10); // 21
alert(10 + num++); // 20var a = 10;
++a;      // ++a=11,a=11
var b = ++a + 2;     // ++a=12
console.log(b); // 结果:var c = 10;
c++;      // c++=11,c=11,
var d = c++ + 2;  // c++=11,c=12
console.log(d); // 结果:13var e = 10;
var f = e++ + ++e;  // e++=10,e=11,++e=12
console.log(f); // 结果:23

2、逻辑运算符

《1》布尔值参与的逻辑运算符
&&:两边都是 true才返回 true,否则返回 false,
||:两边都为 false 才返回 false,否则都为true

var num = 7;
var str = "我爱你~中国~";  //length = 7 
console.log(num > 5 && str.length >= num); // true
console.log(num < 5 || str.length >= num); // true

《2》短路运算(逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
&&:如果第一个表达式的值为真,则返回表达式2; 如果第一个表达式的值为假,则返回表达式1
II: 如果第一个表达式的值为真,则返回表达式1;如果第一个表达式的值为假,则返回表达式2

七、流程控制

1、while循环

while 语句可以在条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环。

while (条件表达式) {// 循环体代码
}

使用 while 循环时一定要注意,它必须要有退出条件,否则会成为死循环

2、do…while循环

do… while 语句先执行一次循环体,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。

do {// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

3、continue break关键字
continue 关键字用于立即跳出本次循环,继续下一次循环(本次循环体中 continue 之后的代码就会少执行一次)。
break 关键字用于立即跳出整个循环(循环结束)。

相关文章:

JavaScript学习第1天:浏览器组成、JS的组成、变量、数据类型转化、运算符、while和do...while循环

目录一、浏览器的组成二、JS的组成三、变量1、同时声明多个变量2、声明变量特殊情况四、数据类型1、数据类型2、 isNaN()方法3、字符串转义符4、字符串拼接5、特殊拼接五、数据类型转换1、转化为字符串2、转化为数字型3、转化为布尔值六、运算符1、递增和递减运算符2、逻辑运算…...

【Flutter入门到进阶】Dart进阶篇---Dart多线程异步原理

1 Isolate 1.1 什么是Isolate 1.1.1 概念 线程&#xff1f;异步&#xff1f;隔离&#xff1f;到底什么意思&#xff1f; Isolate中文意思是隔离&#xff0c;从使用角度来说是Dart的线程&#xff0c;但是从本质虚拟机的实现角度来讲Isolate是一组封装。 isolate可以理解为dar…...

WEB系列(二)-----------XSS

XSS原理及基础 定义 恶意攻击者会往Web页面里插入JS代码,当用户点击网页时.镶嵌的JS代码就会执行,从而达到恶意的特殊目的. 原因 程序对输入和输出的控制不够严格&#xff0c;导致payload输出到前段时被浏览器当做有效代码执行从而产生危害。 分类 存储型反射型DOM型 测…...

[python入门㊾] - python异常中的断言

目录 ❤ 断言的功能与语法 ❤ 常用断言 ❤ 常用的断言表达方式 ❤ 异常断言 ❤ 正则断言 ❤ 检查断言装饰器 ❤ 断言的功能与语法 Python assert&#xff08;断言&#xff09;用于判断一个表达式&#xff0c;在表达式条件为 False 的时候触发异常 断言可以在条件…...

一文告诉你什么是财务数据治理?

大家好&#xff0c;我是梦想家Alex&#xff0c;今天是周末&#xff0c;就不给大家分享技术文了&#xff5e;应出版社老师推荐&#xff0c;文末给大家送几本DAMA中国主席力荐&#xff0c;20位行业专家历时2年共同打造的《财务数据治理实战》&#xff0c;将数据治理理论应用于财务…...

MySQL数据库调优————ORDER BY语句

ORDER BY调优的核心原理&#xff0c;原则是利用索引的有序性跳过排序环节 关于ORDER BY语句的一些尝试 我们使用employees表进行尝试&#xff0c;索引情况如下 在执行计划的结果中&#xff0c;Extra里如果存在&#xff0c;Using filesort则表示&#xff0c;排序没有使用到索…...

Linux命令之grep

Linux grep是一个非常强大的文本搜索工具。按照给定的正则表达式对目标文本进行匹配检查&#xff0c;打印匹配到的行。grep命令可以跟其他命令一起使用&#xff0c;对其他命令的输出进行匹配。 grep语法如下&#xff1a; grep [options] [pattern] content 文本检索 grep可以对…...

一起学 pixijs(4):如何绘制文字md

大家好&#xff0c;我是前端西瓜哥&#xff0c;今天我们来学 pixijs 如何绘制文字。pixijs 版本为 7.1.2。 使用原生的 WebGL 来绘制文字是非常繁琐的&#xff0c;pixijs 对此进行了高层级的封装&#xff0c;提供了 Text 类和 BitMapText 类来绘制文字。 Text 最基本的写法&…...

mac m1设备上安装Qt并使用qt编程遇到的问题以及解决方式

# 简介&#xff1a; 首先在M1平台上的程序可以看到有两种架构&#xff0c;分别是intel的&#xff08;x86-64&#xff09;和苹果的m1&#xff08;arm64架构&#xff09;&#xff0c;根据苹果的介绍&#xff0c;当在m1上面运行intel程序的时候使用的是转译的方式运行的&#xff…...

tensorflow 学习笔记(二):神经网络的优化过程

前言&#xff1a; 学习跟随 如何原谅奋力过但无声的 tensorflow 笔记笔记。 本章主要讲解神经网络的优化过程&#xff1a;神经网络的优化方法&#xff0c;掌握学习率、激活函数、损失函数和正则化的使用&#xff0c;用 Python 语言写出 SGD、Momentum、Adagrad、RMSProp、Ada…...

【Java】《Java8 实战》 CompletableFuture 学习

文章目录前言1. 并发(Concurrent) 和 并行(Parallel)1.1 并发的来源1.2 并发技术解决了什么问题2. 并行的来源2.1 并行解决了什么问题3. CompletableFuture 简介4. CompletableFuture 简单应用5. CompletableFuture 工厂方法的应用6. CompletableFuture join() 方法7. 使用 Par…...

Vue3之条件渲染

1.何为条件渲染 条件渲染就是在指定的条件下&#xff0c;渲染出指定的UI。比如当我们显示主页的时候&#xff0c;应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中&#xff0c;这种UI元素的显示和隐藏可以通过两个关键字&#xff0c;v-if 和…...

将Nginx 核心知识点扒了个底朝天(四)

为什么 Nginx 不使用多线程&#xff1f; Apache: 创建多个进程或线程&#xff0c;而每个进程或线程都会为其分配 cpu 和内存&#xff08;线程要比进程小的多&#xff0c;所以 worker 支持比 perfork 高的并发&#xff09;&#xff0c;并发过大会榨干服务器资源。 Nginx: 采用…...

设计模式之工厂模式

文章の目录一、什么是工厂模式二、工厂模式有什么用&#xff1f;三、应用场景四、示例1、用字面量的方式创建对象2、使用工厂模式创建对象参考写在最后一、什么是工厂模式 工厂模式是一种众所周知的设计模式&#xff0c;广泛应用于软件工程领域&#xff0c;用于抽象创建特定对…...

80.链表-由来

链表是怎么发展来的 线性表&#xff1a;是n个具有相同特性的数据元素的有限序列。 链表&#xff1a;具有线性存储结构的线性表。 为什么需要使用链表&#xff1f;&#xff08;链表是如何被设计出来的&#xff09; 程序开发最重要的部分是如何在项目程序中找到一种合适的、好…...

元胞自动机

文章目录前言文献阅读摘要主要贡献方法框架实验结论元胞自动机元胞自动机是什么&#xff1f;构成及规则案例及代码实现总结前言 This week,the paper proposes a Multi-directional Temporal Convolutional Artificial Neural Network (MTCAN) model to impute and forecast P…...

设计模式之各种设计模式总结与对比

目录1 目标2 定位3 一句话归纳设计原则4 G0F 23种设计模式简介5 设计模式使用频次总结6 —句话归纳设计模式7 设计模式之间的关联关系和对比1 目标 1、 简要分析GoF 23种设计模式和设计原则,做整体认知。 2、 剖析Spirng的编程思想&#xff0c;启发思维,为之后深入学习Spring…...

JAVA练习55- Fizz Buzz

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-Fizz Buzz 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 2月19日练习…...

LeetCode笔记:Biweekly Contest 98

LeetCode笔记&#xff1a;Biweekly Contest 98 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 比赛链接&#xff1a;https://leetcode.com/contest/biweekly-contest-98 1. 题目一 给出题目一的试题链接如…...

HNUCM-《算法分析与设计》期末考试考前复习题

问题 A: X星人的地盘题目描述一天&#xff0c;X星人和Y星人在一张矩形地图上玩抢地盘的游戏。X星人每抢到一块地&#xff0c;在地图对应的位置标记一个“X”&#xff1b;Y星人每抢到一块地&#xff0c;在地图对应的位置标记一个“Y”&#xff1b;如果某一块地无法确定其归属则标…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...