javaScript
一、计算机编程基础
- 计算机可以帮助人类解决某些问题
- 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
- 编程语言有机器语言、汇编语言、高级语言
- 高级语言需要一个翻译器转换为计算机识别的机器语言
- 编程语言是主动的有很强的逻辑性
计算机组成
- 硬件
- 输入/输出设备，CPU，硬盘，内存
- 软件
- 系统软件
- Windows, Linux, macOS
- 应用软件
- 浏览器，QQ，VSCode
- 系统软件
程序运行
硬盘（很慢脑补读取光盘机械旋转）->内存条（电的速度）->CPU(很快）
单位换算
1 Byte = 8 Bits（即 1B=8b）
1 KB = 1024 Bytes
1 MB = 1024 KB
1 GB = 1024 MB
二、初识JS
2.1 JavaScript 是什么
- js是一门脚本语言
- 一种运行在客户端的脚本语言 （Script 是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
- 现在也可以基于 Node.js 技术进行服务器端编
2.2 JavaScript 的作用
- 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js
2.3 HTML/CSS/JS 的关系
HTML/CSS 标记语言–描述类语言
- HTML 决定网页结构和内容( 决定看到什么 )，相当 于人的身体
- CSS 决定网页呈现给用户的模样( 决定好不好看 )， 相当于给人穿衣服、化妆
JS 脚本语言–编程类语言
实现业务逻辑和页面控制( 决定功能 )，相当 于人的各种动作
2.4 JS组成
（1）ECMAScript
（2）DOM(Document Object Model)
通过DOM提供的接口可以对页面上的各种元素进行操作（大小，位置，颜色等）
（3）BOM(Browser Object Model)
通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
2.5 JS书写位置
<head>
<!-- 2.内嵌式的js -->
<script>
// alert('沙漠骆驼');
</script>
/* 3. 外部js script 双标签
*引用外部 JS文件的 script 标签中间不可以写代码
*/
<script src="my.js"></script>
</head>
<body>
<!-- 1. 行内式的js 直接写到元素的内部 -->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
2.6 JavaScript注释
// 1. 单行注释 ctrl + /
/* 2. 多行注释 默认的快捷键 shift + alt + a
2. 多行注释 vscode 中修改多行注释的快捷键： ctrl + shift + /
*/
2.7 JS输入输出语句
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
三、变量
变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改
3.1声明变量
// 1. 声明了一个age 的变量
var age;
// 2. 赋值 把值存入这个变量中
age = 18;
// 3. 输出结果
console.log(age);
// 4. 变量的初始化
var myname = 'pink老师';
console.log(myname);
// 1. 更新变量 一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
var myname = 'pink老师';
console.log(myname);
myname = '迪丽热巴';
console.log(myname);//迪丽热巴
// 2. 声明多个变量
var age = 18,
address = '火影村',
gz = 2000;
// 3. 声明变量的特殊情况
// 3.1 只声明不赋值 结果是？ 程序也不知道里面存的是啥 所以结果是 undefined 未定义的
var sex;
console.log(sex); // undefined
// 3.2 不声明 不赋值 直接使用某个变量会报错滴
// console.log(tel);
// 3.3 不声明直接赋值使用
qq = 110;
console.log(qq);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p2CMhWME-1657722085188)(D:\CoCo’s home\可韵前端设计\Note\images\声明变量特殊情况.png)]
3.2 变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如：var、for、while
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
3.3 两个变量交换
// js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做
// 1. 我们需要一个临时变量帮我们
// 2. 把apple1 给我们的临时变量 temp
// 3. 把apple2 里面的苹果给 apple1
// 4. 把临时变量里面的值 给 apple2
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
四、 数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利 用存储空间，于是定义了不同的数据类型
// int num = 10; java
// var num; // 这里的num 我们是不确定属于哪种数据类型的
var num = 10; // num 属于数字型
// js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
var str = 'pink'; // str 字符串型
// js是动态语言 变量的数据类型是可以变化的
var x = 10; // x 是数字型
x = 'pink'; // x 字符串型
1、简单数据类型
Number, Null, Boolean, String, Undefined,Symbol
<!-- 1. Number
1.1整数
1.1.1八进制 var num = 010;
1.1.2十六进制 var num = 0xa;
1.1.3数值的最大值 Number.MAX_VALUE;
数值的最小值 Number.MIN_VALUE;
1.1.4数字型的三个特殊值
Infinity，代表无穷大，大于任何值
-Infinity
NaN
1.1.5 isNaN()判断是否是数字，返回false,true
1.2浮点数
2. String
2.1 可单引号可双引号 --JS推荐单引号
2.2 字符串转义字符，以\开始，写在引号里面 'I am \n Xiao'
2.3 检测获取字符串的长度，age.length
2.4 字符串拼接 字符串+任何类型=拼接之后的字符串 -->
console.log('pink老师' + 18); // pink老师18
console.log('pink老师' + 18 + '岁');
var age = 19;
console.log('pink老师age岁');
// 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
console.log('pink老师' + age + '岁');
// 变量和字符串相连的口诀： 引引加加
console.log('pink老师' + age + '岁');
3.布尔型 Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
4、Undefined 和 Null
//一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
//一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
2、复杂数据类型 （object)
3、数据类型转换
typeof 可用来获取检测变量的数据类型
转字符串
1. num.toString()
2. String(num)
3. num+'我是字符串' --和字符串拼接的结果都是字符串
转数字型
1. parseInt('78')
2. parseFloat('78.21')
3. Number('12.3')=>12.3
4. js隐式转换（-,*,/） ‘12’-0
转布尔型
1. Boolean()函数
代表空、否定的值会被转换为false，如‘’，0，NaN, null, undefined, 其余会被转换为true
4、解释性语言和编译型语言的特点
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行 程序。程序语言翻译成机器语言的工具，被称为翻译器。
- 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
- 编译器是在代码执行之前进行编译，生成中间代码文件
- 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
五、运算符
JavaScript 算数运算符
算数运算符用于对数字执行算数运算：
1、前置自增和后置自增如果单独使用效果是一样的
- 后置自增 口诀：先返回原值 后自加1 前置自增 口诀 ：先加1 后返回值
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值:
JavaScript 比较运算符
//1. 我们程序里面的等于符号 是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
console.log(3 == 5); // false
console.log('pink老师' == '刘德华'); // flase
console.log(18 == 18); // true
console.log(18 == '18'); // true
console.log(18 != 18); // false
// 2. 我们程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以 true
console.log(18 === 18);
console.log(18 === '18'); // false
JavaScript 逻辑运算符
短路运算
// 1. 用我们的布尔值参与的逻辑运算 true && false == false
// 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
// 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.log('' && 1 + 2 && 456 * 56789); // ''
// 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
// 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
console.log(123 || 456); // 123
console.log(123 || 456 || 456 + 123); // 123
console.log(0 || 456 || 456 + 123); // 456
// 逻辑中断很重要 它会影响我们程序运行结果思密达
var num = 0;
console.log(123 || num++);
console.log(num); // 0
JavaScript中运算符的优先级
| 优先级 | 运算符（名称） | 运算符（样式） |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | + + - - ！ |
| 3 | 算术运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == !== === !=== |
| 6 | 逻辑运算符 | 先 && 后 |
| 7 | 赋值运算符 | = += -= *= /+ %= |
| 8 | 逗号运算符 | ， |
六、循环
循环的目的：可以重复执行某些代码
流程控制
for循环
// 1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
// 2. if else if语句是多分支语句
// 3. 语法规范
if (条件表达式1) {
// 语句1;
} else if (条件表达式2) {
// 语句2;
} else if (条件表达式3) {
// 语句3;
} else {
// 最后的语句;
}
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}
// 1. for 重复执行某些代码， 通常跟计数有关系
// 2. for 语法结构
// for (初始化变量; 条件表达式; 操作表达式) {
// // 循环体
// }
// 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用
// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
// 6. 代码体验 我们重复打印100局 你好
for (var i = 1; i <= 100; i++) {
console.log('你好吗');
}
/ 1. 首先执行里面的计数器变量 var i = 1 .但是这句话在for 里面只执行一次 index
// 2. 去 i <= 100 来判断是否满足条件， 如果满足条件 就去执行 循环体 不满足条件退出循环
// 3. 最后去执行 i++ i++是单独写的代码 递增 第一轮结束
// 4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮
for 循环案例
// 1. 求1-100之间所有数的平均值 需要一个 sum 和的变量 还需要一个平均值 average 变量
var sum = 0;
var average = 0;
for (var i = 1; i <= 100; i++) {
sum = sum + i;
}
average = sum / 100;
console.log(average);
// 2. 求1-100之间所有偶数和奇数的和 我们需要一个偶数的和变量 even 还需要一个奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
even = even + i;
} else {
odd = odd + i;
}
}
console.log('1~100 之间所有的偶数和是' + even);
console.log('1~100 之间所有的奇数和是' + odd);
// 3. 求1-100之间所有能被3整除的数字的和
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 3 == 0) {
// result = result + i;
result += i;
}
}
console.log('1~100之间能够被3整数的数字的和是：' + result);
分支流程控制switch语句
// 1. switch 语句也是多分支语句 也可以实现多选1
// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思
// switch (表达式) {
// case value1:
// 执行语句1;
// break;
// case value2:
// 执行语句2;
// break;
// ...
// default:
// 执行最后的语句;
// }
// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，
就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句
// 4. 代码验证
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等
必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
do-while
//do-while一定会循环一次
do{
// 循环体
}while(条件表达式)
三元表达式
/ 1. 有三元运算符组成的式子我们称为三元表达式
// 2. ++num 3 + 5 ? :
// 3. 语法结构
// 条件表达式 ？ 表达式1 ： 表达式2
// 4. 执行思路
// 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
// 5. 代码体验
var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
console.log(result);
// if (num > 5) {
// result = '是的';
// } else {
// result = '不是的';
// }
continue和break
- continue，退出本次循环，继续执行剩余次数的循环
- break, 立即跳出整个循环（循环结束）
最低0.47元/天 解锁文章
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
