05--JavaScript基础语法(1)

一.初始JavaScript

1.JavaScript是什么

JavaScript ( 简称 JS)
是世界上最流行的编程语言之一
是一个脚本语言 , 通过解释器运行
主要在客户端 ( 浏览器 ) 上运行 , 现在也可以基于 node.js 在服务器端运行 .
JavaScript 最初只是为了完成简单的表单验证 ( 验证数据合法性 ), 结果后来不小心就火了 .
当前 JavaScript 已经成为了一个通用的编程语言

应用

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

2.JavaScript的历史

Javascript诞生记 - 阮一峰的网络日志

3.JavaScript和HTML和CSS之间的关系

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

如果只有HTML和CSS,那么就是静态网页,结构和数据都不会发生变化,而有了JS后,网页就可以动起来了

4.JavaScript 运行过程

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

浏览器分成渲染引擎 + JS 引擎 .
渲染引擎:解析HTML和CSS,俗称内核
JS引擎:JS解释器,典型的就是Chrome中内置的V8

JS引擎逐行读取JS代码,然后解析为二进制指令再执行

5.Javascript的组成

ECMAScript( 简称 ES): JavaScript 语法
DOM: 页面文档对象模型 , 对页面中的元素进行操作
BOM: 浏览器对象模型 , 对浏览器窗口进行操作
光有 JS 语法 , 只能写一些基础的逻辑流程 .
但是要想完成更复杂的任务 , 完成和浏览器以及页面的交互 , 那么久需要 DOM API 和 BOM API.

(这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,就不太需要关注 DOM 和 BOM)
重要概念 : ECMAScript
这是一套 " 标准 ", 无论是啥样的 JS 引擎都要遵守这个标准来实现 .

二.前置知识

1.第一个程序

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>
</head>
<body>
    <!-- 内嵌式 写入到script标签中 -->
    <script>
        alert("第一个JS程序")
    </script>
    <!-- 行内式 直接嵌入到html元素内部 -->
    <input type="button" value="button" onclick="alert('我被点击')">
    <!-- 外部式 写入单独的js文件中  -->
    <script src="demo1.js"></script>
    <!-- 注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.  -->
</body>
</html>

2.JavaScript书写形式

行内式

直接嵌入到html文件元素内部
注意 , JS 中字符串常量可以使用单引号表示 , 也可以使用双引号表示 .
HTML 中推荐使用双引号 , JS 中推荐使用单引号 .

内嵌式

写入到script标签中

外部式

写在单独的JS文件中

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.

3.注释

单行注释 // [ 建议使用 ]
多行注释 /* */
使用 ctrl + / 切换注释 .
多行注释不能嵌套 .

4.输入输出

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>
</head>
<body>
    <script>
        prompt("请输入你的姓名:")
        alert("弹出一个弹窗")
        console.log("输出一串字符")
    </script>
</body>
</html>

输入prompt

弹出一个输入对话框

输出alert

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

输出 console.log

在控制台打印一个任务(供开发者查看)

重要概念 : .
console 是一个 js 中的 " 对象 "
. 表示取对象中的某个属性或者方法 . 可以直观理解成 " 的 "
console.log 就可以理解成 : 使用 " 控制台 " 对象 " 的 " log 方法 .

三.语法概览

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

1.变量的使用

基本用法

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

html 复制代码

varname='zhangsan';
varage=20;

var 是 JS 中的关键字 , 表示这是一个变量 .
= 在 JS 中表示 " 赋值 ", 相当于把数据放到内存的盒子中 . = 两侧建议有一个空格
每个语句最后带有一个 ; 结尾 . JS 中可以省略 ; 但是建议还是加上 .
初始化的值如果是字符串 , 那么就要使用单引号或者双引号引起来 .
初始化的值如果是数字 , 那么直接赋值即可 .

使用变量

html 复制代码

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

实例

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>
</head>
<body>
    <!-- <script>
        prompt("请输入你的姓名:")
        alert("弹出一个弹窗")
        console.log("输出一串字符")
    </script> -->
    <script>
        var name=prompt("输入姓名:");
        var age=prompt("输入年龄:");
        var gender=prompt("输入性别:");
        var score=prompt("输入成绩:");
        alert("姓名:"+name+"\n"+"年龄:"+age+"\n"+"性别:"+gender+"\n"+"成绩:"+score);
    </script>
</body>
</html>

"+"字符串拼接,也就是将两个字符串首尾相连

"\n"换行符
JavaScript 中还支持使用 let 定义变量 . 用法和 var 基本类似 . 用法上的差异此处暂时不讨论 .

2.理解动态类型

JS 的变量类型是程序运行过程中才确定的 ( 运行到 = 语句才会确定类型 )
随着程序运行 , 变量的类型可能会发生改变 .

html 复制代码

<script>
        // 数字类型
        var a=10;
        console.log(a);
        // 字符串类型
        a="Hello World";
        console.log(a);
    </script>

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

3.基本数据类型

JS中内置的几种类型

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

number数字类型

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

数字进制表示

计算机中都是使用二进制来表示数据 , 而人平时都是使用十进制 .
因为二进制在使用过程中不太方便 (01 太多会看花眼 ).
所以在日常使用二进制数字时往往使用八进制和十六进制来表示二进制数字 .

html 复制代码

vara=07;      // 八进制整数, 以 0 开头
varb=0xa;     // 十六进制整数, 以 0x 开头
varc=0b10;    // 二进制整数, 以 0b 开头

特殊的数字类型

Infinity: 无穷大 , 大于任何数字 . 表示数字已经超过了 JS 能表示的范围 .
-Infinity: 负无穷大 , 小于任何数字 . 表示数字已经超过了 JS 能表示的范围 .
NaN: 表示当前的结果不是一个数字 .

html 复制代码

varmax=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 函数判定是不是一个非数字 .

html 复制代码

console.log(isNaN(10));  // false
console.log(isNaN('hehe' - 10));  // true

string字符串类型

基本规则

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

html 复制代码

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

如果字符串本身就有引号怎么办

html 复制代码

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

转义字符

一些字符无法直接输入,就可以通过转义字符来输入
\n 回车(换行)
\\ 转义的\
\' 转义的'
\" 转义的"
\t 转义的tab键

求长度

使用 String 的 length 属性即可

html 复制代码

var a = 'hehe';
console.log(a.length);   //结果为4
var b = '哈哈';
console.log(b.length);   //结果为2

单位为字符的数量

字符串拼接

使用" + " 进行字符串拼接

html 复制代码

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

//数字和字符串也能进行拼接
var c = "my score is ";
var d = 100;
console.log(c + d);

//要认准是字符串和数字(隐式类型转化)进行拼接还是两个数字进行相加
console.log(100 + 100);     // 200
console.log('100' + 100);   // 100100

boolen布尔类型

表示真和假

参与运算时看为1和0,1为真,0为假

html 复制代码

console.log(true + 1);   //2
console.log(false + 1)   //1

实际上我们并不会这样写,这里只是做个演示

undefined未定义类型

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

html 复制代码

 <script>
    var a;
    console.log(a);
    console.log(a+10);
    console.log(a+"10");
    </script>

这里就能看到未定义类型

未定义类型+数字结果不是数字

未定义类型+字符串类型就是字符串进行拼接

null空值类型

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

html 复制代码

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

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

4.运算符

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

算数运算符

+（加）-（减）*（乘）/（除）%（取模）

++ 自增 --自减分前缀和后缀

一元负号

赋值运算符

基础赋值=（赋值）。

复合赋值：结合算术/位运算，如 +=、-=、*=、/=、%=、<<=、>>= 等。

比较运算符

相等性检查

==（非严格相等，允许类型转换）、===（严格相等，类型和值均需相同）。

!=（非严格不等）、!==（严格不等）。

大小比较：>、<、>=、<=。

特殊比较：in（检查属性是否存在对象中）、instanceof（检查对象是否为某构造函数的实例）。

逻辑运算符

逻辑与/或/非：&&（与）、||（或）、!（非）

短路特性：&& 和 || 会返回第一个满足条件的值（非布尔值时）

0 || "hello" 返回 "hello"

位运算符

操作数的二进制形式

&（按位与）、|（按位或）、^（按位异或）、~（按位非）。

移位操作：<<（左移）、>>（带符号右移）、>>>（无符号右移）。

条件(三元)运算符

条件 ? 表达式1 : 表达式2

特殊运算符

类型检查：typeof（返回数据类型字符串，如 "number"）、delete（删除对象属性）

空值处理：??（空值合并运算符，仅在左侧为 null 或 undefined 时使用右侧值）。

示例：a ?? b 当 a 为 null 或 undefined 时返回 b。

可选链：?.（安全访问对象属性，避免因属性不存在而报错）。

示例：obj?.prop?.subProp 不会因 obj 或 prop 不存在而抛出错误。

逗号运算符：,（依次执行表达式，返回最后一个表达式的值）。

其他运算符

字符串连接：+（当操作数为字符串时）。

void：void(expression) 执行表达式但返回 undefined。

分组：()（改变运算优先级）。

05--JavaScript基础语法(1)

一.初始JavaScript

1.JavaScript****是什么

应用

2.JavaScript的历史

3.JavaScript和HTML和CSS****之间的关系

4.JavaScript 运行过程

5.Javascript的组成

二.前置知识

1.第一个程序

2.JavaScript书写形式

行内式

内嵌式

外部式

3.注释

4.输入输出

输入prompt

输出alert

输出 console.log

三.语法概览

1.变量的使用

基本用法

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

使用变量

实例

2.理解动态类型

3.基本数据类型

JS中内置的几种类型

number数字类型

数字进制表示

特殊的数字类型

string字符串类型

基本规则

转义字符

求长度

字符串拼接

boolen布尔类型

undefined未定义类型

null空值类型

4.运算符

算数运算符

赋值运算符

比较运算符

逻辑运算符

位运算符

条件(三元)运算符

特殊运算符

其他运算符

1.JavaScript是什么

3.JavaScript和HTML和CSS之间的关系