前端编程语言——JS背景知识、JS基础语法、算数运算符和关系运算符（1）

0、前言：

  • JS全称是JavaScript，是一种脚本语言，诞生于1995年，JS是由ECMAScript（包含js语法）、BOM（Brower Oject Model，和浏览器相关操作）、DOM（Document Object Model，和页面内容相关操作）组成的。JS的版本有ES5、ES6、ES7、ES8
  • JS可以写在HTML文件当中的，JS也可以写在后缀名为js的文件当中，然后导入到html文件中，还可以写在标签中，作为标签属性。和CSS一样，JS也有三种写入html的写法。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 这里写css语法 */</style><!-- 第一种JS引入方式 --><script type="text/javascript">// 这里写javascript语法// alert(100)// document.write('hello')// document.write('<b>hello</b>')// 在控制台打印，相当于python中的print：console.log('控制台打印内容！')</script><!-- 第二种JS引入方式 --><script src="./demo.js">// 如果是外部导入的js，在此处写入的js代码是不会执行的</script>
</head>
<body><script>console.log('body中执行')</script><!-- 第三种JS引入方式 --><button onclick="alert('错误')">点击会弹出内容</button>
</body>
</html>
  • JS当中每行代码结束最好都加上分号，JS是弱数据类型语言，容错率比较高。
  • 注意html代码写好之后调试会出现网页，如果期间代码有修改，可以通过刷新网页更新页面。

1、JS基本语法：

  • 变量：定义变量要使用var（variable）关键字，可以先定义在赋值，也可以定义加赋值。可以通过逗号隔开，一次定义多个变量。变量类型无需声明，赋值是什么变量类型就是什么。
  • 命名规范：
    • 数字、字母、下划线以及美元符（$）组成
    • 首字符不能为数字
    • 不能使用关键字或者保留字
    • 区分大小写
    • 小驼峰命名：myStudentScore，大驼峰命名：MyStudentScore
  • 数据类型：Number（int, float）, Boolean（布尔类型）, String（字符串）, Array（数组，类似python中的列表）, Object（对象）, Set（集合）, Null（空，是对象类型的一种值）, Undefined（变量未定义的默认值，是有Null派生而来，两者相等但不全等，但undefined类型就是其本身）
  • NaN：not a number，是一种非法运算的结果。
  • 布尔类型转换规则：非空字符串为true，空字符串为false。非0数值为true，0或者NaN为false，null为false，undefined为false。
  • 在JS中整数是4个字节保存，浮点数是8个字节保存，一般为了节省内存，就会把12.0这种数值强转为整数。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 变量var a = 10;console.log(a);var a=1,b=2,c=3;console.log(a,b,c); // 1 2 3// 数据类型：int和floatvar m=10;console.log(typeof m); // numbervar n=3.2;console.log(typeof n); // numbervar l=3.14e3; // 相当于3.14*10^3console.log(l); // 3140console.log(1/0); // Infinityconsole.log(1/0*0); // NaN，不是一种数据类型，是一种特殊值，非法的数值运算产生的值console.log(isNaN(NaN)); // true，判断是否是特殊值console.log(parseInt(10.8)); // 10console.log(parseInt('10')); // 10// Math数学函数console.log(Math.round(3.243)); // 3, 四舍五入会得到整数部分console.log(3.145.toFixed(2)); // 3.15, 四舍五入可以设置保留位数console.log(Math.max(3,1,2,-1)); // 3, 取最大值// null和undefinedconsole.log(null == undefined) // trueconsole.log(null === undefined) // false</script>  
</body>
</html>

2、算数运算符和关系运算符：

  • 算数运算符：+，-，*，/，%（取余数）
  • 字符串和变量的拼接：+
  • 关系运算符：>，<，<=，>=，两个等于号 （值相等就成立），三个等于号（值和类型都相等才成立）， !=，!==
  • 逻辑运算符：&&、//、! （特别注意逻辑运算中的短路运算，且运算遇到false则短路，或运算遇到true则短路）
  • 赋值和复合运算符：=、+=、-=、*=、/=、%=
  • 一元运算符：++a，a++，–a，a–
  • 三目运算符：条件？满足条件执行语句 ：不满足条件执行语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 普通运算符console.log(10+4); // 14console.log(10%4); // 2console.log(10/4); // 2.5console.log(10**2); // 100console.log('hello'+'haha'); // hellohahaconsole.log('hello'+10+20); // hello1020console.log(10+20+'hello'); // 30helloconsole.log(10 == '10'); // trueconsole.log(10 === '10'); // falseconsole.log(NaN == NaN); // falseconsole.log('abc'>4); // false(字符串和数字比较是非法的，字符串不能被解析为有效数字，就会被转换为NaN，返回值就是false)console.log('abc'<4); // false(字符串和数字比较是非法的，字符串不能被解析为有效数字，就会被转换为NaN，返回值就是false)// 逻辑运算符的短路操作：逻辑运算返回的是逻辑运算两边的某个操作数，且运算遇到0或False就会短路返回，或运算遇到非0或true就会短路返回console.log(0 && true); // 0console.log(false && 0); // falseconsole.log(true || 0); // trueconsole.log(0 || 1); // 1// 一元运算符var n = 10;var m = n++;console.log(m,n); // 10 11      var n = 10;var m = ++n;console.log(m,n); // 11 11 var a = 10;console.log(a++); // 10console.log(++a); // 12var a = 10;console.log(a--); // 10console.log(--a); // 8// 三目运算符var a=20,b=30;console.log(a>b?a:b); // 30</script>
</body>
</html>

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

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

相关文章

ubuntu设置中文输入法教程

ubuntu设置中文输入法教程

在 Ubuntu 上设置中文输入法可以通过以下步骤来完成。我们将以安装和配置 fcitx 输入法框架及其中文输入法插件 fcitx-sunpinyin 为例。 ### 步骤一&#xff1a;安装 fcitx 和中文输入法插件 1. **更新软件包列表** 打开终端并运行以下命令来更新软件包列表&#xff1a; …
阅读更多...
浅谈—“文件映射”

浅谈—“文件映射”

目录 文件映射头文件&#xff1a; 核心函数 port flags 文件映射头文件&#xff1a; #include<sys/mman.h> 核心函数 void *mmap(void *addr,size_t length, int port,int flags,int fd, off_t offset ); int munmap(void *addr,size_t length);// 对比free&#x…
阅读更多...
联邦和反射器实验

联邦和反射器实验

拓扑图 一.实验要求 1.AS1存在两个环回&#xff0c;一个地址为192.168.1.0/24&#xff0c;该地址不能在任何协议中宣告 AS3存在两个环回&#xff0c;一个地址为192.168.2.0/24&#xff0c;该地址不能在任何协议中宣告 AS1还有一个环回地址为10.1.1.0/24&#xff…
阅读更多...
PyTorch训练关键点

PyTorch训练关键点

1.背景 在网上找了一些资料用来训练关键点&#xff0c;一般都是人脸或者车牌关键点训练&#xff0c;或者是联合检测一起训练。很少有是单独基于轻量级网络训练单独关键点模型的工程&#xff0c;本文简单介绍一种简单方法和代码。 2.代码模块 &#xff08;1&#xff09;网络结…
阅读更多...
[C][动态内存分配][柔性数组]详细讲解

[C][动态内存分配][柔性数组]详细讲解

目录 1.动态内存函数的介绍1.malloc2.free2.calloc4.realloc 2.常见的动态内存错误3.C/C程序的内存开辟4.柔性数组1.是什么&#xff1f;2.柔性数组的特点3.柔性数组的使用4.柔性数组的优势 1.动态内存函数的介绍 1.malloc 函数原型&#xff1a;void* malloc(size_t size)功能…
阅读更多...
iOS马甲包， AB面，H5跳转包，开发上架

iOS马甲包， AB面，H5跳转包，开发上架

什么是马甲包 马甲包一般是主APP的分身或者克隆&#xff0c;也或者说是穿着马甲的一个APP&#xff0c;脱掉马甲&#xff0c;APP将呈现另一种样式&#xff0c;也就是常说的AB面APP。 1. 马甲包、AB面、白包、h5跳转包 2.苹果开发者 3.TG&#xff1a;APPYKJ 4.喂心&#xff1…
阅读更多...
【AI算法岗面试八股面经【超全整理】——概率论】

【AI算法岗面试八股面经【超全整理】——概率论】

AI算法岗面试八股面经【超全整理】 概率论信息论机器学习CVNLP 目录 1、古典概型、几何概型2、条件概率、全概率公式、贝叶斯公式3、先验概率、后验概率4、离散型随机变量的常见分布5、连续型随机变量的常见分别6、数学期望、方差7、协方差、相关系数8、独立、互斥、不相关9.大…
阅读更多...
【PB案例学习笔记】-11动画显示窗口

【PB案例学习笔记】-11动画显示窗口

写在前面 这是PB案例学习笔记系列文章的第11篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…
阅读更多...
ESP32 - Micropython ESP-IDF 双线教程 WIFI (2)

ESP32 - Micropython ESP-IDF 双线教程 WIFI (2)

ESP32 - Micropython ESP-IDF 双线教程 WIFI ESP32 - IDF WIFI转换为ESP32-IDF的示例代码main/main.c 代码解释 ESP32 - IDF WIFI 转换为ESP32-IDF的示例代码 以下是使用ESP-IDF&#xff08;Espressif IoT Development Framework&#xff09;编写的连接到Wi-Fi网络的示例代码…
阅读更多...
颈源性头痛症状及表

颈源性头痛症状及表

颈源性头痛一般表现为&#xff0c;就是说从枕后一直颞侧&#xff0c;到太阳穴附近&#xff0c;这个是枕小的一个疼痛&#xff0c;还有一部分人从枕后&#xff0c;沿着一个弧线&#xff08;如下图&#xff09;的轨迹到了前额&#xff0c;到我们前额&#xff0c;这样一个疼痛&…
阅读更多...
Bitbucket的原理及应用详解（一）

Bitbucket的原理及应用详解（一）

本系列文章简介&#xff1a; 在数字化和全球化的今天&#xff0c;软件开发和项目管理已经成为企业成功的关键因素之一。随着团队规模的扩大和项目的复杂化&#xff0c;如何高效地协同开发、管理代码和确保代码质量成为了开发者和管理者面临的重要挑战。Bitbucket作为一款功能强…
阅读更多...
深入解析线程上下文切换：掌握线程上下文切换的核心原理

深入解析线程上下文切换：掌握线程上下文切换的核心原理

1. 进程与线程的基本概念 1.1 进程与线程的区别 在操作系统中&#xff0c;进程和线程是两个基本的概念&#xff0c;它们共同构成了程序的执行环境。了解它们的区别是理解线程上下文切换的基础。 进程&#xff1a;进程是程序的一次执行实例。它是操作系统资源分配的基本单位。…
阅读更多...
pytest的断言与Selenium 模拟操作的一个例子

pytest的断言与Selenium 模拟操作的一个例子

在Python中&#xff0c;pytest是一个流行的单元测试框架&#xff0c;而Selenium是一个用于自动化浏览器操作的工具。结合这两者&#xff0c;我们可以编写自动化测试脚本来验证网页的行为是否符合预期。下面是一个简单的例子&#xff0c;展示了如何使用pytest的断言功能以及Sele…
阅读更多...
解决在Mac下使用npm报错：Error: EACCES: permission denied

解决在Mac下使用npm报错：Error: EACCES: permission denied

原因说明&#xff1a;没有足够的权限在 /usr/local/lib/node_modules 目录下创建文件夹 这个错误表明你在安装或更新 Vue.js&#xff08;vue&#xff09;包时&#xff0c;没有足够的权限在 /usr/local/lib/node_modules 目录下创建文件夹。这通常是因为默认情况下&#xff0c;普…
阅读更多...
【头歌-Python】文件自学引导

【头歌-Python】文件自学引导

禁止转载&#xff0c;原文&#xff1a;https://blog.csdn.net/qq_45801887/article/details/139258793 参考教程&#xff1a;B站视频讲解——https://space.bilibili.com/3546616042621301 如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 文件自学引导 第…
阅读更多...
算数运算符

算数运算符

算术运算符是用于数值类型变量计算的运算符。 它的返回结果是数值。 赋值符号 关键知识点&#xff1a;先看右侧&#xff0c;再看左侧&#xff0c;把右侧的值赋值给左侧的变量。 附上代码&#xff1a; string myName "唐唐"; int myAge 18; float myHeight 177.5…
阅读更多...
202312青少年软件编程（Python）等级考试试卷（四级）

202312青少年软件编程（Python）等级考试试卷（四级）

第 1 题 【单选题】 下列有关分治算法思想的描述不正确的是？（ ） A :将问题分解成的子问题具有相同的模式 B :将问题分解出的各个子问题相互之间有公共子问题 C :当问题足够小时，可以直接求解 D :可以将子问题的求解结果合并成原问题的解 正确答案:B 试题解析: 第 2…
阅读更多...
ADIL简单测试实例

ADIL简单测试实例

参考资料&#xff1a;https://blog.csdn.net/geyichongchujianghu/article/details/130045373这个连接是Java的代码&#xff0c;我根据它的链接写了一个kotlin版本的。 AIDL&#xff08;Android Interface Definition Language&#xff09;是Android平台上用于进程间通信&…
阅读更多...
AI办公自动化：kimi批量新建文件夹

AI办公自动化：kimi批量新建文件夹

工作任务&#xff1a;批量新建多个文件夹&#xff0c;每个文件夹中的年份不一样 在kimi中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个编写关于录制电脑上的键盘和鼠标操作的Python脚本的任务&#xff0c;具体步骤如下&#xff1a; 打开文件夹&…
阅读更多...
FFmpeg编解码的那些事（1）

FFmpeg编解码的那些事（1）

看了网上很多ffmpeg的编解码的文章和代码&#xff0c;发现有很多文章和代码都过时了&#xff0c;主要还是ffmpeg有很多接口都已经发生变化了。 这里简单说一下&#xff0c;什么是编码和解码。 1.视频编码 对于视频来说&#xff0c;可以理解为多张&#xff08;rgb或者yuv&…
阅读更多...
最新文章

Copyright @ 2022~2023