前端-js-基础知识学习笔记

1. 表单动态校验

2. 网页特效

3. 服务端开发

4. 桌面程序、app

5. 控制物件

6. 游戏开发

三种书写方式：行内式、内嵌式、引入外部js

1. 行内式：

/* 当我们点击按钮输入唐伯虎时浏览器会弹出提示框*/

<input type=“button” value=“唐伯虎” οnclick=“alert(‘秋香姐’)”>

2. 内嵌式：

3. 引入外部js：

输入与输出

弹出输入框: prompt(‘请输入你的姓名’);

弹出输出 alert (‘计算机结果是’);展示给用户的;

输出到控制台 console.log (‘我是程序员能看到的’);

js变量

变量：就是用来存放数据的容器，本质上就是程序在内存中申请了一块用来存放数据的空间，

变量的使用： 先定义、后使用

var age; //申明一个变量名age的变量

age=10; // 给变量名赋值

var myname=‘pink老师’//变量的初始化

注意事项：

• 更新变量：一个变量被重新赋值后，它原来的值就被覆盖了。

• 多个变量之间要用逗号隔开

• 声明变量的特殊性（这个就自己下去了解吧），我建议还是按照变量使用规则来。

• 变量命名：由数字 字母 下划线，美元符号💲组成、严格区分大小写、不能以数字开头、不能是关键字、保留字 比如var name、变量名必须有意义、遵守驼峰命名法：首字母小写，后面单词的首字母需要大写 myFirstName

js数据类型（分为简单数据类型和复杂数据类型 ，这里就先介绍简单数据类型）

简单数据类型包括：Number数字型、String字符串型、Boolean布尔型、Undefined 和 null

数字型：

1、数值型进制的表示

2、这里介绍一个方法：isNaN()用来判断非数字，并且返回一个值，如果是数字就返回false，不是数字就返回ture。

String字符串型：

1.字符串引号嵌套 ：js可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

2.字符串长度length

var str=‘123’;

console.log (str.length)//输出字符串的长度，也就是字符串里面的数据个数

3.字符串拼接 +

特点：

任何数据类型都可以拼接成一个字符串类型

只要有字符串+其他数据类型最后都是字符串

//口诀：数值相加，字符相连

console.log(‘沙漠’+‘骆驼’);// 拼接成一个字符串沙漠骆驼

//变量不要写到字符串里面，通过和字符串拼接实现 引引加加的方式更方便哟！

var age=18;

console.log ( ‘pink老师’+age +‘岁’);【引引加加】

Boolean类型：

true（在参与运算时值为1）、false （在参与运算时值为0）

Undefined / null类型：

underfined 和数字相加结果是NaN

null 和数字相加结果是数字

underfined |null 和字符串相加结果是字符串拼接

数据类型的转换

在学习如何数据类型转换前，我们是不是要先知道它是那种数据类型呢？

利用typeof 获取变量的数据类型

var num=10；

console.log(typeof num);//检测num是什么数据类型

• 转换为字符串类型

方法：

1、toString()

2、String()强制转换

3、加号拼接字符串 这种放大也是经常用到的，也称为隐式转换

举例：

var num =1;

//toString方法

console.log (num.toString());

//String强制转换

alert(String（num））;

//加号拼接字符串

alert(num+" ");

• 转换成数值型

方法：

1、parselnt(string)函数 ⚠️转换的是取整，后面带px单位时则会去掉px

2、parseFloat(string)函数 ⚠️字符型转换成数字型，包括小数

3、Number()强制转换函数

4、js隐式转换（ - * /)

举例：

/parselnt(string)转换/

parselnt(age);

parselnt(‘12’);

parselnt(‘120px’); //可以直接去掉单位 结果120

/parseFloat(string)转换/

parseFloat(‘2.14’);

/Number()强制转换函数/

Number(变量);

Number(‘123’);

/*js隐式转换（ - * /) */

console.log(‘12’ - 0);//12

• 转换成Boolean型

代表空、否定的值会被转换成false 比如’’ 和 0、NaN、null、undefined

其余的值都会被转换成true

Boolean()函数

举例

//转化成布尔类型

var info1 = ‘你好,未来’;

var info2 =’ ';

var info3 =‘0’;

console.log(Boolean(info1));

console.log(Boolean(info2));

console.log(Boolean(info3));

运算符

1. 算数运算符（浮点数最好不要进比较）

2. 递增递减运算符

前置递增和后置递增单独使用效果是一样的

1、++age = age=age+1 前置递增：先自加后返回值

2、age++ = age=age+1 后置递增：先返回原值 后自加

3. 比较运算符

<

=

<=

== 判断 会转型 console.log(18==‘18’)结果是true 默认转换数据类型，这里会把字符串转换成数值型

!=

=== 全等 就是一模一样，要求两边的值还有数据类型要相等

!== 不全等于

4. 逻辑运算符 & || ！

逻辑中断的原理：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

逻辑中断的原理：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

语法：表达式1 || 表达式2

如果第一个表达式的值为真，则返回表达式1 后面就不用计算了

如果第一个表达式的值为假，则返回表达式2

5. 赋值运算符

= 直接赋值

+=、-= num+=2相等于num=num+2

*= 、=、%= num _=2相等于num=num_2

运算符优先

流程控制

流程控制分类：顺序结构、分支结构、循环结构

顺序结构：很简单就是按照我们书写代码的先后顺序来执行

分支结构 ：

根据不同的条件执行不同的代码，从而得到最终的结果。

首先在这里介绍两个关键字： break、continue

break 表示立即退出整个循环

continue 表示立即跳出本次循环，继续下一洗循环 （本次循环体中continue之后的代码就会少执行一次）

• if语句

1、

if（条件表达式） {

//执行语句

}

else {

//执行语句

}

2、多分支语句 多选一

if（表达式1） {

/ /若条件符合执行的代码；

}

else if (表达式2) {

}

。

。

。

else {

最后的语句;

}

• 三元表达式

如果表达式结果为真就执行表达式1，如果表达式结果为假就执行表达2. 一定会有个返回值

条件表达式 ？ 表达式1 ：表达式2;

• switch语句

多支语句

针对一系列特定的值的选项时

switch (表达式){

case value1:

执行语句1;

break;//退出循环

case value2:

执行语句2;

break;

…

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-eKDKbeeP-1715879481362)]

[外链图片转存中…(img-WWGkzAEg-1715879481363)]

[外链图片转存中…(img-AC19aSvO-1715879481363)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！