Javaweb之javascript的详细解析

1.3.2 变量

书写语法会了，变量是一门编程语言比不可少的，所以接下来我们需要学习js中变量的声明，在js中，变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的：

关键字解释
var早期ECMAScript5中用于变量声明的关键字
letECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

    • 数字不能开头

    • 建议使用驼峰命名

接下来我们需要通过VS Code编写代码来演示js中变量的定义

第一步：在VS Code中创建名为 12.JS-基础语法-变量.html的文件：

第二步：编写代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body></body>
<script>
​//var定义变量var a = 10;a = "张三";alert(a);
​
</script>
</html>

可以看到浏览器弹出张三

在js中，我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的，注释掉之前的代码，添加如下代码：

<script>//var定义变量// var a = 10;// a = "张三";// alert(a);
​//特点1 : 作用域比较大, 全局变量{var x = 1;}alert(x);
</script>

浏览器照样成功弹出：

而且var关键字声明的变量可以重复定义，修改代码如下：

{var x = 1;var x = "A";
}
alert(x);
    

浏览器弹出内容是A

所以在ECMAScript 6 新增了 let关键字来定义变量，它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明。注释掉之前的代码，添加代码如下：

<script>
​//var定义变量// var a = 10;// a = "张三";// alert(a);
​//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {//     var x = 1;//     var x = "A";// }// alert(x);//let : 局部变量 ; 不能重复定义 {let x = 1;}alert(x);
​
</script>

浏览器打开，f12抓包，来到控制台页面，发现报错，变量没有定义，说明let声明的变量在代码块外不生效

接着我们使用let重复定义变量，代码修改如下：发现idea直接帮我们报错了，说明let声明的变量不能重复定义

在ECMAScript6中，还新增了const关键字用来声明常量，但是一旦声明，常量的值是无法更改的。注释之前的内容，添加如下代码：

    const pi = 3.14;pi = 3.15;alert(pi);

浏览器f12抓包，来到控制台页面发现直接报错了，

关于变量的讲解我们就此结束，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body></body>
<script>
​//var定义变量// var a = 10;// a = "张三";// alert(a);
​//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {//     var x = 1;//     var x = "A";// }// alert(x);
​//let : 局部变量 ; 不能重复定义 // {//     let x = 1;//     alert(x);// }//const: 常量 , 不能给改变的.const pi = 3.14;pi = 3.15;alert(pi);
​
</script>
</html>

1.3.3 数据类型和运算符

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引皆可
boolean布尔。true，false
null对象为空
undefined当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof函数可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

第一步：在VS Code中创建名为13. JS-基础语法-数据类型.html的文件

第二步：编写如下代码，然后直接挨个观察数据类型：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body>
​
</body>
<script>
​//原始数据类型alert(typeof 3); //numberalert(typeof 3.14); //number
​alert(typeof "A"); //stringalert(typeof 'Hello');//string
​alert(typeof true); //booleanalert(typeof false);//boolean
​alert(typeof null); //object 
​var a ;alert(typeof a); //undefined</script>
</html>

熟悉了js的数据类型了，那么我们需要学习js中的运算法，js中的运算规则绝大多数还是和java中一致的，具体运算符如下：

运算规则运算符
算术运算符+ , - , * , / , % , ++ , --
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , = 注意 == 会进行类型转换，= 不会进行类型转换
逻辑运算符&& , || , !
三元运算符条件表达式 ? true_value: false_value

接下来我们通过代码来演示js中的运算法，主要记忆js中和java中不一致的地方

第一步：在VS Code中创建名为14. JS-基础语法-运算符.html的文件

第二步：编写代码

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的==和===是有区别的。

  • ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较

  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-运算符</title>
</head>
<body></body>
<script>var age = 20;var _age = "20";var $age = 20;alert(age == _age);//true ，只比较值alert(age === _age);//false ，类型不一样alert(age === $age);//true ，类型一样，值一样
​
</script>
</html>

在js中，虽然不区分数据类型，但是有时候涉及到数值计算，还是需要进行类型转换的，js中可以通过parseInt()函数来进行将其他类型转换成数值类型。注释之前的代码，添加代码如下：

// 类型转换 - 其他类型转为数字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

除此之外，在js中，还有非常重要的一点是：0,null,undefined,"",NaN理解成false,反之理解成true。注释掉之前的代码，添加如下代码：

 if(0){ //falsealert("0 转换为false");}

浏览器刷新页面，发现没有任何弹框，因为0理解成false，所以条件不成立。注释掉上述代码，添加如下代码：

if(1){ //truealert("除0和NaN其他数字都转为 true");
}

浏览器刷新，因为1理解成true，条件成立，所以浏览器效果如下；

其他情况可以一一演示，完整演示代码如下：

   
 // if(0){ //false//     alert("0 转换为false");// }// if(NaN){//false//     alert("NaN 转换为false");// }if(1){ //truealert("除0和NaN其他数字都转为 true");}
​// if(""){ //false//     alert("空字符串为 false, 其他都是true");// }// if(null){ //false//     alert("null 转化为false");// }// if(undefined){ //false//     alert("undefined 转化为false");// }

流程控制语句if，switch，for等和java保持一致，此处不再演示

需要注意的是：在js中，0,null,undefined,"",NaN理解成false,反之理解成true

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Maven】＜dependencyManagement＞详解

【Maven】＜dependencyManagement＞详解

<dependencyManagement> 元素是 Maven POM 文件中的一个非常重要的元素&#xff0c;它用于集中管理项目中所有模块的依赖项版本&#xff0c;允许您在父 POM 中定义依赖版本&#xff0c;然后在子模块中引用这些版本而不需要显式指定版本号。这可以大大减少维护成本&#x…
阅读更多...
【redis】ssm项目整合redis，redis注解式缓存及应用场景，redis的击穿、穿透、雪崩的解决方案

【redis】ssm项目整合redis，redis注解式缓存及应用场景，redis的击穿、穿透、雪崩的解决方案

一、整合redis redis是nosql数据库&#xff0c;mysql是sql数据库&#xff0c;都是数据库因此可以参考mysql整合ssm项目的过程。 1.pom依赖 <properties> <redis.version>2.9.0</redis.version><redis.spring.version>1.7.1.RELEASE</redis.spri…
阅读更多...
JWT（JSON web token）的三个组成部分

JWT（JSON web token）的三个组成部分

每日鸡汤&#xff1a;每个你想要学习的瞬间都是未来的你向自己求救 前几天去考 系统架构师的考试&#xff0c;有一道案例分析题就是关于JWT的&#xff0c;作为一个前端工程师&#xff0c;我居然没答上来&#xff0c;真的气的拍大腿&#xff0c;但凡再努力一点呀&#xff01;这次…
阅读更多...
C++——搜索二叉树

C++——搜索二叉树

作者&#xff1a;几冬雪来 时间&#xff1a;2023年11月7日 内容&#xff1a;C的搜索二叉树讲解 目录 前言&#xff1a; 什么是搜索二叉树&#xff1a; 搜索二叉树的增删查改&#xff1a; 搜索二叉树的定义初始化&#xff1a; 搜索二叉树增操作&#xff1a; 搜索二叉树找…
阅读更多...
目前安卓、鸿蒙、澎湃的关系

目前安卓、鸿蒙、澎湃的关系

1、了解AOSP是什么 AOSP全名为Android Open-Source Project&#xff0c;中文为安卓开源项目&#xff0c;开源即开放源代码。Android是一个基于Linux&#xff0c;由Google主导的开源系统。 2、AOSP谁的贡献最大&#xff1f; 3、华为的鸿蒙、小米的澎湃是套壳安卓吗&#xff1…
阅读更多...
C#中的DataTable使用

C#中的DataTable使用

在C#中&#xff0c;DataTable 是一个非常重要的组件&#xff0c;它是System.Data命名空间下的一部分。它用于在内存中存储表格数据&#xff0c;可以看作是一个内存中的数据库表。以下是DataTable的一些主要特点和常用的操作&#xff1a; 特点 内存中的数据存储&#xff1a;Da…
阅读更多...
QGC 中添加海康威视摄像头记录（Qt For Android 使用 JNI 进行JAVA 与 C++ 的通讯）

QGC 中添加海康威视摄像头记录（Qt For Android 使用 JNI 进行JAVA 与 C++ 的通讯）

文章目录 1. 配置海康威视 SDK 下载库文件移植工程文件添加动态库&#xff08;.so&#xff09;Android xml 配置添加 java 文件 2. JavaQGCActivity.javaHkwsManager.java 3. C头文件添加&#xff1a;C 中调用 Java 静态函数&#xff08;hcnNetSDKInit&#xff09;JNI 传入规则…
阅读更多...
unity笔记

unity笔记

物体的各种控制方法 using System.Collections; using System.Collections.Generic; using UnityEditor; using UnityEngine;public class Componentl : MonoBehaviour {// Transform transform;GameObject obj;public float floSpeed 0;public float floRotate 0;// Start …
阅读更多...
JJJ：PCI / PCIE 的一些术语和概念

JJJ：PCI / PCIE 的一些术语和概念

转发事务和非转发事务 在PCIe&#xff08;Peripheral Component Interconnect Express&#xff09;总线中&#xff0c;存在两种类型的事务&#xff1a;转发事务和非转发事务。 1、转发事务&#xff08;Forwarded Transactions&#xff09;&#xff1a;转发事务是指从一个PCIe…
阅读更多...
11 传输层协议

11 传输层协议

1、传输层里比较重要的两个协议&#xff0c;一个是 TCP&#xff0c;一个是UDP 对于不从事底层开发的人员来讲&#xff0c;或者对于开发应用的人来讲&#xff0c;最常用的就是这两个协议。 2、TCP 和 UDP 有哪些区别&#xff1f; 1.TCP 是面向连接的&#xff0c;UDP 是面向无…
阅读更多...
视频号小店所需资金明细，2023最新费用详解！

视频号小店所需资金明细，2023最新费用详解！

我是电商珠珠 22年7月视频号团队开始发展自己的电商平台-视频号小店。截止到目前为止&#xff0c;也才发展了一年的时间。 新平台预示着新机会&#xff0c;在这个平台内可发展的空间很大&#xff0c;利润比较高。 对于新手来说一般可以做到5w的数据&#xff0c;今天就来给大…
阅读更多...
P1903 [国家集训队] 数颜色 / 维护队列

P1903 [国家集训队] 数颜色 / 维护队列

带修改的莫队 带修改的莫队就是在基础莫队的基础上增加了一维属性&#xff0c;之前只需要维护l&#xff0c;r现在还需要维护一下时间t&#xff0c;排序还是先按照左端点块儿号排序&#xff0c;然后右端点块儿号排序&#xff0c;最后按时间排序。其它的都是差不多的。 #include…
阅读更多...
无人机航迹规划：小龙虾优化算法COA求解无人机路径规划MATLAB（可以修改起始点，地图可自动生成）

无人机航迹规划：小龙虾优化算法COA求解无人机路径规划MATLAB（可以修改起始点，地图可自动生成）

一、小龙虾优化算法COA 小龙虾优化算法&#xff08;Crayfsh optimization algorithm&#xff0c;COA&#xff09;由Jia Heming 等人于2023年提出&#xff0c;该算法模拟小龙虾的避暑、竞争和觅食行为&#xff0c;具有搜索速度快&#xff0c;搜索能力强&#xff0c;能够有效平衡…
阅读更多...
掌握未来技术趋势：深度学习与量子计算的融合

掌握未来技术趋势：深度学习与量子计算的融合

掌握未来技术趋势&#xff1a;深度学习与量子计算的融合 摘要&#xff1a;本博客将探讨深度学习与量子计算融合的未来趋势&#xff0c;分析这两大技术领域结合带来的潜力和挑战。通过具体案例和技术细节&#xff0c;我们将一睹这两大技术在人工智能、药物研发和金融科技等领域…
阅读更多...
Maven多环境下 active: @profileActive@报错问题解决

Maven多环境下 active: @profileActive@报错问题解决

1.报错&#xff1a; Caused by: org.yaml.snakeyaml.scanner.ScannerException: while scanning for the next token found character that cannot start any token.(Do not use for indentation) 2.解决办法&#xff1a; 在主pom的文件下&#xff0c;重新加载&#xff1a;
阅读更多...
软件测试-根据状态迁移图设计测试用例

软件测试-根据状态迁移图设计测试用例

测试用例状态迁移图 许多需求用状态机的方式来描述&#xff0c;状态机的测试主要关注状态转移是否正确。对于一个有限状态机&#xff0c;通过测试验证其在给定的条件内是否能够产生需要的状态变化&#xff0c;有没有不可达的状态和非法的状态&#xff0c;是否可能产生非法的状…
阅读更多...
算法通关村第六关|白银|二叉树的层次遍历【持续更新】

算法通关村第六关|白银|二叉树的层次遍历【持续更新】

1.二叉树基本的层序遍历 仅仅遍历并输出全部元素。 List<Integer> simpleLevelOrder(TreeNode root) {if (root null) {return new ArrayList<Integer>();}List<Integer> res new ArrayList<Integer>();LinkedList<TreeNode> queue new Lin…
阅读更多...
newstarctf2022week2

newstarctf2022week2

Word-For-You(2 Gen) 和week1 的界面一样不过当时我写题的时候出了个小插曲 连接 MySQL 失败: Access denied for user rootlocalhost 这句话印在了背景&#xff0c;后来再进就没了&#xff0c;我猜测是报错注入 想办法传参 可以看到一个name2,试着传参 发现有回显三个字段…
阅读更多...
获取淘宝商品详情APi

获取淘宝商品详情APi

以下是使用Python获取淘宝商品详情的代码示例&#xff1a; python复制代码 import requests import json def get_taobao_product_details(url): # 发送HTTP请求获取商品详情页面内容 response requests.get(url) # 将页面内容转换为UTF-8编码的字符串 response.encoding u…
阅读更多...
51基于matlab模拟退火算法矩形排样

51基于matlab模拟退火算法矩形排样

基于matlab模拟退火算法矩形排样&#xff0c;基于最低水平线算法完成矩形板材下料优化&#xff0c;输出最优剩料率和最后的水平线&#xff0c;可替换自己的数据进行优化&#xff0c;程序已调通&#xff0c;可直接运行。 51matlab模拟退火算法矩形排样 (xiaohongshu.com)
阅读更多...
最新文章

Copyright @ 2022~2023