【JavaEE初阶】 JavaScript基础语法——壹

文章目录

  • 🎋初识JavaScript
    • 🚩JavaScript 是什么
    • 🚩JavaScript 和 HTML 和 CSS 之间的关系
    • 🚩JavaScript 运行过程
    • 🚩JavaScript 的组成
  • 🎍前置知识
    • 🚩第一个JS程序
    • 🚩JavaScript 的书写形式
    • 🚩注释
    • 🚩输入输出
      • 🎈输入: prompt
      • 🎈输出: alert
      • 🎈输出: console.log
  • 🍀JavaScript语法概览
  • 🎍变量的使用
  • 🌳基本数据类型
    • 🎈number 数字类型
    • 🎈string 字符串类型
      • 📌基本规则
      • 📌转义字符
      • 📌求长度
      • 📌字符串拼接
      • 📌boolean 布尔类型
      • 📌undefined 未定义数据类型
      • 📌null 空值类型
  • 🌴运算符
    • 🎈算术运算符
    • 🎈赋值运算符 & 复合赋值运算符
    • 🎈自增自减运算符
    • 🎈比较运算符
    • 🎈逻辑运算符
    • 🎈位运算
    • 🎈移位运算
  • ⭕总结

🎋初识JavaScript

🚩JavaScript 是什么

JavaScript (简称 JS)

  • 是世界上最流行的编程语言之一
  • 是一个脚本语言, 通过解释器运行
  • 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不小心就火了.

当前 JavaScript 已经成为了一个通用的编程语言

JavaScript 的能做的事情:

  • 网页开发(更复杂的特效和用户交互)
  • 网页游戏开发
  • 服务器开发(node.js)
  • 桌面程序开发(Electron, VSCode 就是这么来的)
  • 手机 app 开发

学习JavaScript,我们就一定要来拜见一下我们的祖师爷

JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)
在这里插入图片描述
我们还需要明确的是JavaScript与Java没有任何关系

🚩JavaScript 和 HTML 和 CSS 之间的关系

在这里插入图片描述

我们可以理解为

  • HTML: 网页的结构(骨)
  • CSS: 网页的表现(皮)
  • JavaScript: 网页的行为(魂)

在这里插入图片描述

🚩JavaScript 运行过程

  1. 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
  2. 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
  3. 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
  4. 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
    在这里插入图片描述

浏览器分成渲染引擎 + JS 引擎.

  • 渲染引擎: 解析 html + CSS, 俗称 “内核”
  • JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
  • JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行

🚩JavaScript 的组成

  • ECMAScript(简称 ES): JavaScript 语法

  • DOM: 页面文档对象模型, 对页面中的元素进行操作

  • BOM: 浏览器对象模型, 对浏览器窗口进行操作

光有 JS 语法, 只能写一些基础的逻辑流程.

但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么久需要 DOM API 和 BOM API.

上面只是对JS一个简单的了解,接下来我们一起来感受一下JS的语法,关于语法部分,由于一些逻辑与代码的书写与Java类似,所以博主这里只会重点介绍不同的地方,关于DOM与BOM博主会在后续博文进行讲解

🎍前置知识

在博主正式讲解语法前,我们先来了解以下前置知识,方便后续的讲解

🚩第一个JS程序

首先我们得明确

  • JavaScript 代码可以嵌入到 HTML 的 script 标签中.

接下里我们一起写一下我们的第一个JS程序

<body><script>alert("你好,遇事问春风乄")</script>
</body>

此处的alert作用为弹出一个警示对话框, 输出结果

在这里插入图片描述

🚩JavaScript 的书写形式

  1. 行内式

直接嵌入到 html 元素内部

<input type="button" value="点我一下" οnclick="alert('你好,遇事问春风乄')">

在这里插入图片描述
注意,:

  • JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.
    HTML 中推荐使用双引号, JS 中推荐使用单引号
  1. 内嵌式
    写到 script 标签中
<body><script>alert("你好,遇事问春风乄")</script>
</body>
  1. 外部式

写到单独的 .js 文件中

alert('遇事问春风乄')
<body><script src="JS_one.js"></script>
</body>

在这里插入图片描述
注意:

  • 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).

外部式JS适合代码多的情况.

🚩注释

  • 单行注释 // [建议使用]
  • 多行注释 /* */
// 我是单行注释
/*我是多行注释我是多行注释我是多行注释
*/

注意:

  • 多行注释不能嵌套. 否则会报错

🚩输入输出

🎈输入: prompt

弹出一个输入框

// 弹出一个输入框
prompt("请输入您的姓名:");

在这里插入图片描述

🎈输出: alert

弹出一个警示对话框, 输出结果

// 弹出一个输出框
alert("hello");

上面已经演示过了,这里不再演示了

🎈输出: console.log

在控制台打印一个日志(供程序员看)

// 向控制台输出日志
console.log("这是一条日志");

如何查看日志,我们需要需要打开浏览器的开发者工具(F12) => Console (控制台)标签页 才能看到结果
在这里插入图片描述
这里的console 是一个 js 中的 “对象”

  • . 表示取对象中的某个属性或者方法. 可以直观理解成 “的”
  • console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法

🍀JavaScript语法概览

avaScript 虽然一些设计理念和 Java 相去甚远, 但是在基础语法层面上还是有一些相似之处的.

有了 Java 的基础很容易理解 JavaScript 的一些基本语法

🎍变量的使用

创建变量(变量定义/变量声明/变量初始化)

var name = 'zhangsan';
var age = 20;
  • var 是 JS 中的关键字, 表示这是一个变量.

  • = 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格

  • 每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.

  • 注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.

  • 初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来

  • 初始化的值如果是数字, 那么直接赋值即可

使用变量

console.log(age); // 读取变量内容
age = 30; // 修改变量内容

代码示例: 弹框提示用户输入信息, 再弹框显示

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);

也可以合并成一个弹框显示:

alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
score + "\n");
  • +表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串.
  • \n 表示换行

JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似,博主更推荐使用let,具体区别可以参考 青颜的天空 大佬所写的《JavaScript中let和var区别详解》

还需要强调的我们上面的无论let还是var都属于动态类型

那什么是动态类型呢?

  1. JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)
let a = 10; // 数字
let b = "hehe"; // 字符串
  1. 随着程序运行, 变量的类型可能会发生改变
let a = 10; // 数字
a = "hehe"; // 字符串

这一点和 C Java 这种静态类型语言差异较大.

  • C, C++, Java, Go 等语言是静态类型语言. 一个变量在创建的时候类型就确定了, 不能在运行时发生改变.
  • 如果尝试改变, 就会直接编译报错

🌳基本数据类型

JS 中内置的几种类型

  • number: 数字. 不区分整数和小数.
  • boolean: true 真, false 假.
  • string: 字符串类型.
  • undefined: 只有唯一的值 undefined. 表示未定义的值.
  • null: 只有唯一的值 null. 表示空值

🎈number 数字类型

JS 中不区分整数和浮点数, 统一都使用 “数字类型” 来表示

  1. 数字进制表示
    • 计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
    • 因为二进制在使用过程中不太方便(01太多会看花眼).
    • 所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字
let a = 07; // 八进制整数, 以 0 开头
let b = 0xa; // 十六进制整数, 以 0x 开头
let c = 0b10; // 二进制整数, 以 0b 开头
  • 注意:
    • 一个八进制数字对应三个二进制数字
    • 一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)
  1. 特殊的数字值
    • Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.

    • -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.

    • NaN: 表示当前的结果不是一个数字

let max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
  • 注意:
    • 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
    • ‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.
    • 可以使用 isNaN 函数判定是不是一个非数字.

🎈string 字符串类型

📌基本规则

字符串字面值需要使用引号引起来, 单引号双引号均可.

let a = "haha";
let b = 'hehe';
let c = hehe; // 运行出错

如果字符串中本来已经包含引号咋办?

let msg = "My name is "zhangsan""; // 出错
let msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号.
let msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
let msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

📌转义字符

有些字符不方便直接输入, 于是要通过一些特殊方式来表示.

  • \n
  • \
  • "
  • \t

📌求长度

使用 String 的 length 属性即可

let a = 'hehe';
console.log(a.length);
let b = '哈哈';
console.log(b.length);

📌字符串拼接

使用 + 进行拼接

let a = "my name is ";
let b = "zhangsan";
console.log(a + b);

📌boolean 布尔类型

表示 “真” 和 “假”

  • boolean 原本是数学中的概念 (布尔代数).
  • 在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断.

注意:Boolean 参与运算时当做 1 和 0 来看待

📌undefined 未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

let a;
console.log(a)

undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10"); // undefined10

undefined 和数字进行相加, 结果为 NaN

console.log(a + 10);

📌null 空值类型

null 表示当前的变量是一个 “空值”.

let b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10

注意:

  • null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
  • null 表示当前的值为空. (相当于有一个空的盒子)
  • undefined 表示当前的变量未定义. (相当于连盒子都没有)

🌴运算符

JavaScript 中的运算符和 Java 用法基本相同. 此处不做详细介绍了.

只是简单提一下:

🎈算术运算符

+
-
*
/
%

🎈赋值运算符 & 复合赋值运算符

=
+=
-=
*=
/=
%=

🎈自增自减运算符

++: 自增1
- -: 自减1

🎈比较运算符

< >
<=
>=
== 比较相等(会进行隐式类型转换)
!=
=== 比较相等(不会进行隐式类型转换)
!==

这里涉及一个隐式转换,是指在JavaScript中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算。这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。

转换规则如下:
在这里插入图片描述
转换举例:

    <script>let a = true;console.log(1 == true);console.log(2 == true);console.log(1 === true);</script>

在这里插入图片描述

🎈逻辑运算符

用于计算多个 boolean 表达式的值.

  • && 与: 一假则假
  • || 或: 一真则真
  • ! 非

🎈位运算

  • & 按位与
  • | 按位或
  • ~ 按位取反
  • ^ 按位异或

🎈移位运算

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)

⭕总结

关于《【JavaEE初阶】 JavaScript基础语法——壹》就讲解到这儿,HTML 只是描述了页面的骨架结构.使用 CSS 可以针对页面进行进一步美化,JavaScript可以赋予灵魂。关于JavaScript的后续讲解,请关注博主后续创作。感谢大家的支持,欢迎各位留言交流以及批评指正,如果文章对您有帮助或者觉得作者写的还不错可以点一下关注,点赞,收藏支持一下!

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

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

相关文章

Linux JumpServer 堡垒机远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f516;系列专栏&#xff1a; C语言、Linux、Cpolar ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5.…

VMware——WindowServer2012R2环境安装mysql5.7.14解压版_主从复制(图解版)

目录 一、服务器信息二、192.168.132.33主服务器上安装mysql&#xff08;主&#xff09;2.1、环境变量配置2.2、安装2.2.1、修改配置文件内容2.2.2、初始化mysql并指定超级用户密码2.2.3、安装mysql服务2.2.4、启动mysql服务2.2.5、登录用户管理及密码修改2.2.6、开启远程访问 …

Redis 9 数据库

4 设置键的生存时间或过期时间 通过EXPIRE命令或者PEXPIRE命令&#xff0c;客户端可以以秒或者毫秒精度为数据库中的某个键设置生存时间&#xff08;TimeToLive&#xff0c;TTL&#xff09;&#xff0c;在经过指定的秒数或者毫秒数之后&#xff0c;服务器就会自动删除生存时间…

SPASS-时间序列预测

时间序列的建立和平稳化 填补缺失值 时间序列分析中的缺失值不能采用通常删除的办法来解决&#xff0c;因为这样会导致原有时间序列周期性的破坏&#xff0c;而无法得到正确的分析结果。按“转换→替换缺失值”打开“替换缺失值”对话框。 定义日期变量 展示效果如下

Vue3 customRef自定义ref 实现防抖

防抖就是防止在input 框中每输入一个字符就要向服务器请求一次&#xff0c;只要在用户输入完成过一段时间再读取用户输入的内容就能解决这个问题&#xff0c;减小服务器的压力。 1. 自定义ref是一个函数&#xff0c;可以接受参数。 比如我们自定义一个myRef&#xff1a; setu…

全网最全jmeter接口测试/接口自动化测试看这篇文章就够了:跨线程组传递jmeter变量及cookie的处理

setUp线程组 setUp thread group&#xff1a; 一种特殊类型的线程组&#xff0c;用于在执行常规线程组之前执行一些必要的操作。 在 setup线程组下提到的线程行为与普通线程组完全相同。不同的是执行顺序--- 它会在普通线程组执行之前被触发&#xff1b; 应用场景举例&#xf…

转录组学习第三弹-下载SRR数据并转成fastq

下载数据 前面已经安装好了需要的软件&#xff0c;那么我们现在需要下载我们练习需要用到的sra数据。从 SRA 数据库下载数据有多种方法。可以用ascp快速的来下载 sra 文件&#xff0c;也可以用wget或curl等传统命令从 FTP 服务器上下载 sra 文件。另外sra-tools的prefetch也支…

Java精品项目源码基于SpringBoot的樱花短视频平台(v66)

Java精品项目源码基于SpringBoot的樱花短视频平台(v66) 大家好&#xff0c;小辰今天给大家介绍一个樱花短视频平台&#xff0c;演示视频公众号&#xff08;小辰哥的Java&#xff09;对号查询观看即可 文章目录 Java精品项目源码基于SpringBoot的樱花短视频平台(v66)难度指数&…

基于单片机加热炉多参数检测和PID炉温系统

**单片机设计介绍&#xff0c; 基于单片机加热炉多参数检测和PID炉温系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态&#xff0c;并在发生异常情况…

Softing mobiLink助力过程自动化——兼容HART、FF、PA的多协议接口工具

由于全球人口增加和气候变化等因素&#xff0c;“水”比以往任何时候都更具有价值。与此同时&#xff0c;环境法规和水处理标准也变得愈加严格。在这一大环境下&#xff0c;自来水公司不得不应对一些新的挑战&#xff0c;例如&#xff0c;更好地提高能源效率、最大程度地减少资…

HP惠普暗影精灵7Plus笔记本OMEN 17.3英寸游戏本17-ck0000恢复原厂Windows11预装OEM系统

链接&#xff1a;https://pan.baidu.com/s/1ukMXI2V3D0c-kVmIQSkbYQ?pwd2rbr 提取码&#xff1a;2rbr hp暗影7P原厂WIN11系统适用型号&#xff1a; 17-ck0056TX&#xff0c; 17-ck0055TX&#xff0c; 17-ck0054TX &#xff0c;17-ck0059TX 自带所有驱动、出厂时主题壁纸、…

vue-quill-editor 使用

vue-quill-editor 安装 npm install vue-quill-editor -S 使用 .....<quill-editorstyle"padding-left: 0;padding-top: .0px;margin-top: 30px;"ref"editorRef" v-model"params.content" class"ql-editor" :options"editor…

大数据:SAS数据分析1,数据步,和过程步

大数据&#xff1a;SAS数据分析 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql…

java.lang.UnsupportedOperationException 关于Arrays.asList问题解决

解析String 字符串为List集合ArrayList<String> itemsList Arrays.asList(items.split("\\|")List<String> itemsList Arrays.asList(items.split("\\|")final Iterator<String> iterator itemsList.iterator();while (iterator.hasNex…

自定义类型之结构体

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

Altium Designer学习笔记5

整体修改元件标号&#xff1a; 重置Reset Schematic Designators: 恢复之前的状态。复位&#xff0c;恢复之前的状态。

安防视频监控管理平台EasyCVR定制首页开发与实现

视频监控平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#xff0c;也能支持视…

使用Kafka、Flink、Druid构建实时数据系统架构

1. 背景 对于很多数据团队来说&#xff0c;要满足实时需求并不容易。为什么&#xff1f;因为作流程&#xff08;数据采集、预处理、分析、结果保存&#xff09;涉及大量等待。等待数据发送到 ETL 工具&#xff0c;等待数据批量处理&#xff0c;等待数据加载到数据仓库中&#…

Vulhub靶场-KIOPTRIX: LEVEL 1.1

目录 环境配置 端口扫描 漏送发现 漏送利用 提权&#xff08;内核漏洞提权&#xff09; 环境配置 环境配置的过程同主页该专栏第一个靶场&#xff0c;不在赘述。 端口扫描 首先通过arp-scan并根据靶机的mac地址确定靶机的IP地址 然后对靶机进行一个扫描 首先扫描到OpenS…

C++--STL学习笔记

参考教程&#xff1a;黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难_哔哩哔哩_bilibili 软件界一直希望建立一种可重复利用的东西&#xff0c;C的面向对象和泛型编程思想&#xff0c;目的就是复用性的提升。 大多情况下&#xff0c;数据结构和算法都未能有一套标准,…