【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的后续讲解，请关注博主后续创作。感谢大家的支持，欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注，点赞，收藏支持一下！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue3 uniapp h5 安卓和iOS开发适配踩坑记录

vue3 uniapp h5 安卓和iOS开发适配踩坑记录

font-size适配屏幕大小及iOS和安卓状态栏及安全距离的处理 App.vue <script setup lang"ts"> import { onLaunch, onShow, onHide } from "dcloudio/uni-app"; import ./main.scss onLaunch(() > {console.log("App Launch");var wid…
阅读更多...
leetcode刷题详解——粉刷房子

leetcode刷题详解——粉刷房子

1. 题目链接&#xff1a;LCR 091. 粉刷房子 2. 题目描述&#xff1a; 假如有一排房子&#xff0c;共 n 个&#xff0c;每个房子可以被粉刷成红色、蓝色或者绿色这三种颜色中的一种&#xff0c;你需要粉刷所有的房子并且使其相邻的两个房子颜色不能相同。 当然&#xff0c;因为…
阅读更多...
六大排序详讲（直接插入排序+希尔排序+选择排序+堆排序+冒泡排序+快速排序）

六大排序详讲（直接插入排序+希尔排序+选择排序+堆排序+冒泡排序+快速排序）

文章目录 排序一、 排序的概念1.排序&#xff1a;2.稳定性&#xff1a;3.内部排序&#xff1a;4.外部排序&#xff1a; 二、插入排序1.直接插入排序2.希尔排序 三、选择排序1.直接选择排序方法一方法二直接插入排序和直接排序的区别 2.堆排序 四、交换排序1.冒泡排序2.快速排序…
阅读更多...
Threejs_07 环境、透明度、纹理、ao、光照等贴图的渲染

Threejs_07 环境、透明度、纹理、ao、光照等贴图的渲染

老陈打码 继续学习老陈threejs 支持&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 下面用到的所有图片、资源、hdr文件都是老陈打码的原资源 链接&#xff1a;https://pan.baidu.com/s/1WWWHgekCIH7OnjI7S_3ZtQ 提取码&#xff1a;6666 Thre…
阅读更多...
新建模板，或组件自适应

新建模板，或组件自适应

1&#xff0c;***一定要改为固定布局&#xff08;才可以自适应&#xff09; 2&#xff0c; 3&#xff0c; 4&#xff0c;系统序号“1”就是第一根柱 5&#xff0c;系列-自动-配色这里1就是第一根柱颜色&#xff0c;2..... 6&#xff0c;坐标柱 标红的去掉&#xff0c;在那里设…
阅读更多...
debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdp --nowapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese
阅读更多...
【vue+eltable】修改表格滚动条样式

【vue+eltable】修改表格滚动条样式

<style lang"scss" scoped> ::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px; /*纵向滚动条的宽度*/height: 10px; /*横向滚动条的高度*/ } /*定义滚动条轨道 内阴影圆角*/ ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {bo…
阅读更多...
以太网_底层

以太网_底层

【实物图】 【网线接口】 MAC(媒体访问控制器)&#xff1a;控制数据的收发和管理&#xff0c;和用户层打交到&#xff1b;通过MII/RMII、SMI接口和PHY进行通信。 PHY(以太网物理层收发器)&#xff1a;中间体&#xff0c;负责收发信号的转换 常见PHY芯片有&#xff1a;LAN8720…
阅读更多...
Docker上部署mysql（超简单！！！）

Docker上部署mysql（超简单！！！）

拉取mysql镜像 运行如下命令 docker pull mysql:5.7 拉取成功 查看镜像 运行容器 此处部署最新版本的mysql docker run -d --name mysql -p 3307:3306 -e TZAsia/Shanghai -e MYSQL_ROOT_PASSWORD111 mysql --name mysql&#xff1a;给容器起个名字&#xff08;唯一&#xff…
阅读更多...
按照指定条件对数据进行分组并对每个分组内的全部数据应用自定义函数进行聚合计算groupby().apply()

按照指定条件对数据进行分组并对每个分组内的全部数据应用自定义函数进行聚合计算groupby().apply()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 按照指定条件对数据进行分组 并对每个分组内的全部数据 应用自定义函数进行聚合计算 groupby().apply() [太阳]选择题 下列输出正确的是&#xff1a; import pandas as pd data {Name: [A, B,…
阅读更多...
Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用

Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…
阅读更多...
深度解析Python Melt函数的妙用技巧

深度解析Python Melt函数的妙用技巧

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是涛哥&#xff0c;今天为大家分享 Python Melt函数的妙用技巧&#xff0c;文章4200字&#xff0c;阅读大约15分钟&#xff0c;大家enjoy~~ 在数据处理和清洗中&#xff0c;melt函数是Pandas库中一个强大而灵活…
阅读更多...
squid代理服务器（传统代理、透明代理、反向代理、ACL、日志分析）

squid代理服务器（传统代理、透明代理、反向代理、ACL、日志分析）

一、Squid 代理服务器 &#xff08;一&#xff09;代理的工作机制 1、代替客户机向网站请求数据&#xff0c;从而可以隐藏用户的真实IP地址。 2、将获得的网页数据&#xff08;静态 Web 元素&#xff09;保存到缓存中并发送给客户机&#xff0c;以便下次请求相同的数据时快速…
阅读更多...
抖音本地生活服务商申请怎么做？无保证金的申请方法来了

抖音本地生活服务商申请怎么做？无保证金的申请方法来了

想做抖音的本地生活服务项目&#xff0c;却不知道去哪里申请&#xff0c;或者如何申请&#xff0c;其实&#xff0c;官方的通道在今年上半年还是有的&#xff0c;自己去平台上提交资料申请就可以了&#xff0c;但需要缴纳高额的保证金。 而在今年下半年&#xff0c;平台已经关…
阅读更多...
从0开始学习JavaScript--深入理解JavaScript的async/await

从0开始学习JavaScript--深入理解JavaScript的async/await

JavaScript的异步编程在过去经历了回调地狱、Promise的引入&#xff0c;而今&#xff0c;通过async/await&#xff0c;让我们获得了更加优雅、可读性更高的异步编程方式。本文将深入探讨async/await的概念、用法&#xff0c;并通过丰富的示例代码展示其在实际应用中的威力。 理…
阅读更多...
Linux安装ErLang（亲测可用）

Linux安装ErLang（亲测可用）

注&#xff08;我这里安装完成后显示的是中文&#xff0c;有的是显示的英文&#xff09; 1.下载er wget https://packages.erlang-solutions.com/erlang-solutions-1.0-1.noarch.rpm2.安装er yum -y install epel-release截图截不全&#xff0c;就只截安装完成的部分了 rp…
阅读更多...
在银行外包如何自我提升

在银行外包如何自我提升

作者&#xff1a;苍何&#xff0c;前大厂高级 Java 工程师&#xff0c;阿里云专家博主&#xff0c;CSDN 2023 年 实力新星&#xff0c;土木转码&#xff0c;现任部门技术 leader&#xff0c;专注于互联网技术分享&#xff0c;职场经验分享。 &#x1f525;热门文章推荐&#xf…
阅读更多...
基于单片机公交安全预警系统仿真设计

基于单片机公交安全预警系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机公交安全预警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态&#xff0c;并在发生异常情况时进行…
阅读更多...
使用Pytorch实现linear_regression

使用Pytorch实现linear_regression

使用Pytorch实现线性回归 # import necessary packages import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt# Set necessary Hyper-parameters. input_size 1 output_size 1 num_epochs 60 learning_rate 0.001# Define a Toy datas…
阅读更多...
GB28181视频监控国标平台EasyGBS如何进行服务迁移？

GB28181视频监控国标平台EasyGBS如何进行服务迁移？

视频流媒体安防监控国标GB28181平台EasyGBS视频能力丰富&#xff0c;部署灵活&#xff0c;既能作为业务平台使用&#xff0c;也能作为安防监控视频能力层被业务管理平台调用。国标GB28181视频EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安防视…
阅读更多...
最新文章

Copyright @ 2022~2023