初识JavaScript

最新推荐文章于 2024-07-22 15:13:59 发布

*Miraitowa*

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量642

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_58646138/article/details/124575998

版权

初识JavaScript

「1.JavaScript是什么」

创始人布兰登·艾奇(Brendan Eich),起初命名为LiveScript后来与Sun公司合作改名为JavaScript。

JavaScript运行在客户端的脚本语言，不需要编译，由js解释器(js引擎)逐行解释执行。Node.js也可以用于服务器端编程。
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程

「2.JavaScript的作用」

表单动态校验(密码强度检测)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

「3.HTML/CSS/JS 的关系」

HTML/CSS 标记语言--描述类语言

HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆

JS 脚本语言--编程类语言

实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

「4.浏览器执行 JS 简介」

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
JS引擎：也称为 JS 解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

「5.JavaScript组成」

ECMAScript(JavaScript语法)、DOM(文档对象模型)、BOM(浏览器对象模型)

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

「6.JavaScript书写位置」

JS有3种书写位置，分别为行内、内嵌和外部。

行内式

<input type="button" value="点我试试" 
onclick="alert('Hello World')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

内嵌式

<script>
    alert('Hello  World~!');
</script>

可以将多行JS代码写到 <script> 标签中
内嵌 JS 是学习时常用的方式

外部式

//引用外部js文件
<script src = "my.js"></script>

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

JavaScript 注释

「1.单行注释」

// 我是单行注释 (快捷键 ctrl + / )

「2.多行注释」

/*
  获取用户年龄和姓名
  并通过提示框显示出来
  点击vscode左下角管理-键盘快捷方式-切换块注释
  (默认快捷键 alt + shift + a) 修改为 (ctrl + shift + /)
*/

JavaScript 输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器
console.info()	浏览器控制台打印输入信息	浏览器
console.error()	浏览器控制台输出错误信息	浏览器

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

  <script>
        // 这是一个输入框
        prompt('请输入您的年龄');
        // alert 弹出警示框 输出的 展示给用户的
        alert('计算的结果是');
        // console 控制台输出 给程序员测试用的  
        console.log('我是程序员能看到的');
    </script>

变量

变量概述

「1.什么是变量」

变量是程序在内存中申请的一块用于存放数据的空间。
变量是用于存放数据的容器，可以通过变量名获取数据，甚至修改数据。

变量的使用

变量使用时分为两步：1.声明变量 2.赋值

「1. 声明变量」

// 1.声明变量
var num; // 声明一个 名称为 num 的变量

var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
num是我们定义的变量名，可以通过变量名来访问内存中分配的空间。

「2. 赋值」

num = 10;//给 num 这个变量赋值为 10

= 用来把右边的值赋给左边的变量空间中

此处代表赋值的意思变量值是程序员保存到变量空间里的值

「3. 变量的初始化」

声明一个变量并赋值，我们称之为变量的初始化。

var num = 10;//声明变量并赋值为10

变量语法扩展

「1. 更新变量」

一个变量被重新赋值后，它原有的值会被覆盖掉，变量值以最后一次赋的值为准。

var num = 10;
num = 11;//最后的结果就是11因为10被覆盖掉了

「2. 同时声明多个变量」
同时声明多个变量时，只需要写一个var,多个变量名之间用英文逗号隔开

var num = 10, age = 15, name = 'bjt';

「3. 声明变量特殊情况」

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

数据类型

数字类型简介

「1.为什么需要数据类型」

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

「2.变量的数据类型」

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

在代码运行过程中，变量的数据类型是由 JS引擎根据“ =” 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 8;           // x 为数字
var x = "Ball";      // x 为字符串

「3.数据类型的分类」

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

简单数据类型

简单数据类型（基本数据类型）

简单数据类型	说明	默认值
Number	数字型,包含整型值和浮点型值	0
Boolean	布尔值型	false
String	字符串型	""
Undefined	var a;声明了变量a但是没有赋值，此时a = undefined	undefined
Null	var a = null;声明了变量a为空值	null

数字型（Number）

JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 21;       // 整数
var Age = 22.36987;  // 小数

「1.数字型进制」

// 1.在JS中八进制前面加0，十六进制前面加 0x
var num1 = 07;   // 对应十进制的7
// 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;

「2.数字型范围」

JavaScript中的数值有最大值和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

最大值:Number.MAX_VALUE，值为：1.7976931348623157e+308
最小值:Number.MIN_VALUE，值为：5e-32

「3.数字型三个特殊值」

alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN

Infinity 无穷大 -Infinity 无穷小 NaN，Not a number 代表一个非数值
isNaN():用来判断一个变量是否为非数字的类型。非数字型为true,数字型为false。

「4.isNaN」

用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一个非数字

字符串型String

字符串型可以是引号中的任意文本，语法为单引号和双引号

var msg = '我的名字叫';
var name = "小白";

因为HTML标签里面的属性使用的是双引号，JS更推荐使用单引号

「1. 字符串引号嵌套」

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

「2. 字符串转义符」

都是以 \ 开头，详细如下👇👇

转义符	说明
\n	换行符，n是 newline 的意思
\\	斜杆 \
\'	单引号 ‘
\"	双引号 "
\t	tab 缩进
\b	空格,b是 blank 的意思
\x	16进制数 \x16

够减的地方放1，不够减的地方放0 15

「3. 字符串长度」
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串length属性可以获取整个字符串的长度。

 var msg = '我是公主';

console.log(msg.length); // 显示 4

访问字符串中的某个字符：字符串变量名[index]

「4. 字符串拼接」

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串。
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112 +号口诀：数值相加，字符相连
// 1.4 字符串拼接加强
var age = 18;
alert('公主今年' + age +'岁了');

+号总结口诀：数值相加，字符相连

布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

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

Undefined 和 Null

一个变量声明后没有赋值会有一个默认值undefined(如果相连或者相加时，注意结果)

  var variable = undefined;
  console.log(variable); // undefined
  console.log("你好" + variable); // 你好undefined
  console.log(11 + variable); // NaN
  console.log(true + variable);// NaN

一个变量声明并赋值null,里面存的值为空

  var var2 = null;
  console.log(var2); // null
  console.log("你好" + var2); // 你好null
  console.log(11 + var2); // 11
  console.log(true + var2);// 1

获取变量类型及转换

「1.获取检测变量的数据类型」

检测变量的数据类型 typeof

  var num = 10;
  console.log(typeof num)//结果为 number

「2.字面量」

字面量:是源代码中一个固定值的表示法，就是字面量如何去表达这个值。通过数据的格式特征可以判断数据的类型

有数字字面量:8,9,10
字符串字面量:'公主'，"前端开发"
布尔字面量:true,false

数据类型转换

「1.什么是数据类型转换」

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：转换为字符串类型、转换为数字型、转换为布尔型

「2.转换为字符串」

方式	说明	案例
toString()	转成字符串	var num=1; alert(num.toString())
String()	强制转换	var num=1; alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+'我是字符串')

「3.转换为数字型」

方式	说明	案例
parseInt(String)函数	将string类型转成整数型	alert(parseInt('11'))
parseFloat(String)函数	将string类型转成浮点型	alert(parseFloat('11.2'))
Number() 强制转换函数	将string类型强制转换为数值型	alert(Number('12'))
*js隐式转换 ( - /)**	利用算数运算隐式转换为数值型	alert('12' - 0)

parseInt('11px')//11  会去掉这个px单位
parseFloat('11.2px')//11.2  会去掉这个px单位

「4.转换为布尔型」
代表空、否定的值会被转换为false，如''、0、NaN、null、undefined 其余值都会被转换为true

方式	说明	案例
Boolean()	其他类型转换为布尔值	Boolean('true')

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

JavaScript运算符

运算符(操作符)

运算符是用于实现赋值、比较和执行算数运算等功能的符号。常用运算符分类如下👇

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算数运算符

「1.算数运算符概述」

概念：算数运算使用的付哈，用于执行两个变量或值的算数运算。

运算符	描述	案例
+	加	10+20=30
-	减	10-20=-10
*	乘	10*20=200
/	除	10/20=0.5
%	取余(取模)	返回除法的余数9%2=1

+-既可以作为双目运算符，也可以作为单目运算符（表示正负）单目运算符的优先级比双目运算的优先级高

「2.浮点数的精度问题」

  var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

浮点数值的最高精度是17位小数，但是在进行算数运算时其精确度远远不如整数,所以不要直接判断两个浮点数是否相等!

「3.表达式与返回值」

表达式：由数字、运算符和变量组成的式子。
返回值：每一个表达式经过相应的运算之后，会有一个最终结果，称为表达式的返回值

递增和递减运算符

「1.递增和递减运算符概述」

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：

递增和递减运算符必须和变量配合使用。
作为独立语句前缀和后缀没有区别

「2.前置递增运算符」

var  num = 10;
  alert(++num + 10);   // 21

使用口诀：先变量自加，后返回值

「3.后置递增运算符」

  var  num1 = 10;
  alert(10 + num1++);  //10+10= 20 num1=11

使用口诀：先返回原值，后变量自加

  var num = 1;
  var num2 = ++num + num++; //2+2 num=3
  console.log(num2);//4

  var num = 1;
  var num1 = 1;
  var num2 = num++ + num1++; // 1 + 1
  console.log(num2);//2

var num = 1;
var num2 = num++ + num++;//1 + 2
console.log(num2);//3

比较运算符

「1.比较运算符（关系运算符）概述」

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

运算符	描述	案例	结果
<	小于号	1<2	true
>	大于号	1>2	false
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	小于等于号(小于或者等于)	3 <= 2	false
==	判等号(会转型)	15 == '15'	true
!=	不等号	37 != 37	false
=== !==	全等全不等(要求值和数据类型都一致)先比较类型后比较值	37 === '37'	false

「2.小结」

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

「1.逻辑运算符概述」
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔型。用于多个条件的判断。
短路运算:当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

运算符	描述	案例	特点
&&	"逻辑与",简称"与" and	true && false	同真则真，有假则假
\|\|	"逻辑或",简称"或" or	true	有真为真，同假则假
!	"逻辑非",简称"非" not	!true	取反

「2.短路运算（逻辑中断）」

短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与

语法：表达式1 && 表达式2 有假则假

如果表达式1的值为真，则返回表达式2

如果表达式1的值为假，则返回表达式1 不运算表达式2（表达式1为假的时候运算结果一定为假，不需要运算表达式2）

如果有空的或者否定为假，其余都是真的。0、空字符串、null、undefined、NaN

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

逻辑或

语法：表达式1 || 表达式2 有真则真

如果表达式1的值为假，则返回表达式2

如果表达式1的值为真，则返回表达式1 不运算表达式2（表达式1为真的时候运算结果一定为真，不需要运算表达式2）

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

var num = 0;
console.log(123 || num++);//逻辑中断，num++不执行
console.log(num);  //0

赋值运算符

概念：用来把数据赋值给变量的运算符。

运算符	描述	案例
=	直接赋值	var userName = 'fan'
+=、 -=	加减一个数后再赋值	var age=5; age+=5
*=、 /= 、%=	乘、除、取模后再赋值	var age=5; age*=5

'='的左边只能是变量，不能是常量和表达式
优先级是最低的
复合赋值运算符

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
age *= b+c;//  相当于age=age*(b+c)

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	! 、++、 --
3	算数运算符	先* / % 后+ -
4	关系运算符	>、 >=、 <、 <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	,

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

位运算符

按位与（&）：a&b相对应的二进制数都为1时结果为1，否则结果为0

按位或（|）：a|b相对应的二进制位有一位为1时结果为1 ，都为0时结果为0
按位异或（^）:a^b相对应的二进制数相同为0，不同为1

var a=10,b=15//a=00001010  b=00001111
c=a&b//c=00001010  c输出为10
d=a|b//d=00001111  d输出为15
e=a^b//e=00000101  e输出为5

位移运算符

按位左移（<<）： 运算对象<<位移位数 位移时高位舍弃，低位补零

对于正整数和无符号的数左移n位等于让运算对象乘以2的n次方

原码，反码，补码（原码取反加一）

		7	6	5	4	3	2	1
a=2		0	0	0	0	0	0	1
左移一位	0	0	0	0	0	0	1	0

var a=2,b
b=a<<1  //b=4   2左移一位b=a*a的一次方=2*2=4

按位右移(>>)：运算对象>>位移位数 位移时低位舍弃，高位补零

对于正整数和无符号的数左移n位等于让运算对象除以2的n次方

条件运算符

三元表达式也能做一些简单的条件选择。由三元运算符组成的式子成为三元表达式。

「1.语法结构」

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

「2.执行流程」

如果条件表达式为 true ，则返回表达式1的值，如果条件表达式为 false，则返回表达式2的值
简单理解：就类似于 if else （双分支）的简写

 var num = 10;
 var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
 console.log(result);//是的

JavaScript 流程控制-分支

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

分支流程控制if语句

「1.分支结构」

由上到下执行代码的过程中，根据不同条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

JS语言提供了两种分支结构语句

if语句
switch语句

「2.if语句」

语法结构

//条件成立执行代码，否则什么也不做
if（条件表达式） {
    //条件成立执行的代码语句
}

执行流程

「3. if else语句(双分支语句)」

语法结构

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {    
       // [如果] 条件成立执行的代码
} else {    
      // [否则] 执行的代码
}

执行流程

「4. if else if语句(多分支语句)」

语法结构

// 适合于检查多重条件。
if (条件表达式1) {   
     语句1；
} else if (条件表达式2)  {
     语句2；
} else if (条件表达式3)  {
    语句3；
 ....
} else {    
// 上述条件都不成立执行此处代码
}

执行流程

「5. if 的嵌套」

（1）在if子句中的嵌套

if（表达式1）{
  if（表达式2）{
        代码段1
  }
}else{
  代码段2
}

（2）在else子句中进行嵌套

if(表达式1）{
代码段1
 }else{
  if(表达式2）{
     代码段2
     }else{
    代码段3
  }
}

注意：

在没有大括号{}时，if或else的控制范围（作用域）为其后的第一条语句
在没有大括号{{}}时，else总和离他最近的if匹配

分支流程控制 switch 语句

「1.语法结构」

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

  switch( 表达式 ){ 
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }