javaScript入门基础知识点

编程的由来

1、前端：JavaScript

2.后端：java PHP Python Go Node(特殊)

计算机软件

编程：计算机为了解决某个问题而使用某种程序设计语言编写代码，并最终得到结果的过程，这个过程我们就叫编程

计算机程序：就是计算机所执行的一系列的集合指令，而程序全部都是我们所掌握的语言来编写的，计算机一定是通过计算机语言向计算机发送指令

计算机语言

-汇编语言 二进制 0101001010

-机器语言

-高级语言 JavaScript java PHP Python Go Node(特殊)等等

计算机数据储存

位（bit) 1bit可以保存一个0或者1（最小的储存单位）

字节（Byte) 1B=8b

千字节（KB) 1KB=1024B

兆字节 （MB） 1MB=1024KB

吉字节 （GB） 1GB=1024MB

太字节 （TB） 1TB=1024GB

计算机运行程序的过程

1、打开某个程序时，先从硬盘把程序的代码加载到内存中

2、再从CPU执行内存中的二进制

3、把js代码编译成二进制进行执行

JavaScript祖师爷

布兰登 艾奇 （Brendan Eich) ,设计Javascript 10天完成

原名LiveScript 后改为JAvaScript

javascript是什么

1、javascript 是一种运行在客户端的脚本语言，运行在浏览器中

2、脚本语言：不需要编译，运行过程中由 JS 解释器（JS引擎）逐行进行解释并执行

3、javascript 也可以基于Node js 技术进行服务器开发

javascript的作用

1、表单动态效验（js最初目的）

2、网页特效

3、服务端开发

4、桌面程序

5、APP

6、微信公众号，小程序开发

7、控制硬件-物联网(Ruff)

8、游戏开发（CoCo2d-js）

js语言它是单进程单线程的语言，一旦报错，后面的代码无法运行

前端三大核心

1.html 版本 4.0 5.0

2.css 版本2.0 3. 0

3.javascript 版本 5.0 6.0-10.0

javascript 三大核心

1.DOM 文档对象模型

2.BOM 浏览器对象模型

3.ECMAScript javascript核心语法

javascript三种使用方式

1.行内式

 onclick="alert('我是按钮弹窗')"
​
<button onclick="alert('我是按钮弹窗')">按钮</button>

2.内嵌式

直接在Html文件中写

 <script>
    //声明变量
    var a;
   // 输入
    a=prompt("请输入姓名");
   // 弹窗
    alert(a);
   // 编译器显示
    console.log(a);
   // 页面显示
    document.write(a);
 </script>

3.外部引入

<script  src="test.js"></script>

a标签的不跳转

<a href="javaScript: ;"></a>

javascript注释方式

1.单行注释 //

快捷键ctrl +/

2、多行注释

/* */

快捷键 shift + alt +A

什么是变量

1.变量是储存数据的容器，白话就是装东西的盒子

2、变量是储存在内存当中的，本质是程序在内存申请的一块来存放数据的空间

3.变量的使用

1.变量的声明 使用关键字 var，ES6有新的 let 关键字

2.变量的赋值 等号的右边的值赋给左边的变量

var 是js 的关键字，用来声明变量，使用关键字声明变量后，计算机会自动分配内存空间，不需要程序管了

var a=10;

javascript 常用单词

1.输入 prompt 弹窗

prompt('请输入');

括号里的是提示语，有返回值，不输入默认null

2,声明变量

var a=10;

var a=prompt('请输入')；

//声明多个变量
1、var a=10;

var b=10;



var a=10, b=10;

声明变量的特殊情况

声明了变量，未赋值， undefined 未定义（声明了变量，但是没有赋值。就叫未定义）

var d;

console.log(d)

不声明变量，也不赋值，直接使用会报错

console.log(d)

不声明，直接赋值使用，赋值在前，打印输出在后，可以使用

d=200;

console.log(d);

变量名的命名规范

由字母，数字，下划 _ 美元符号$组成

不能以数字开头

严格区分大小写

不能是关键字或者保留字

保留字：未来可能成为关键字的单词

变量名必须有意义

遵守驼峰命名法，

小驼峰：第一个单词首字母小写，第二单词首字母大写

userName

大驼峰：所有单词首字母大写

UserName

3.输出

控制台输出
console.log(a);
console.log( prompt('请输入') )；

页面输出
document.write(a);
document.write( prompt('请输入') )；

关键字

ECMAScript关键字：

break 结束

case 容器

catch 捕获

continue 继续

default 默认的

delete 删除

do 执行

else 否则

finally 最后

for 因为 --由于

function 运转

if 如果

in 在---之内

instanceof 运算符

new 新

return 返回值

switch 开关

this 这个

throw 投掷

try 试用

typeof 运算符

var 声明变量

void 空

while 虽然

with 由于

保留字

ECMAScript保留字：

保留字在某种意义上是为将来的关键字而保留的单词。所有保留字也是不能用作变量名和函数名的。

abstract    提取
boolean    布尔值
byte   字节
​
char   字符
class   类
const  常数
debugger   调试器
double   两倍
enum   枚举
export   输出
extends  继承
final      结束
float    浮点
goto    转到
implements    执行
import    输入
int    整数
interface   接口
long    长
native  本地
package    打包
private      私有
protected    保护
public    公共的
short   短暂
static   静止
super   极好的
synchronized   同步
throws       投
transient  临时的
volatile   易变的
​
​

二进制 八进制 十进制 十六进制

二进制：10011

转十进制 1* 2^0+1 *2^1+0 *2^2+ 0 *2^3 + 1 *2^4

八进制 ：067 0开头（零开头）

转十进制 7* 8^0+6 *8^1+0 *8^2

十进制

转二进制 整数除以2，取余，除到最后，倒序写

转八进制

转十六进制

十六进制 0x464 0x开头（零x开头）

转十进制

4 *16^0 +6 * 16^1 +4 * 16^2

js变量的数据类型

1.js的基本数据类型

01.字符串（String）单双引号括起来的文本

字符串转义字符，都是用 \ （反斜杠） 开头

换行

var text="晶方科技撒付款，\n 哈哈飞机孔";

转义字符

var text="晶方科技撒付款：\“里边\” ";

里面有引号的文本可以采取 外单内双 或者外双内单

var text="晶方科技撒付款：'里边 ' ";

var text='晶方科技撒付款："里边 " ';

字符串拼接

var name="zhangsan";

var age=16;

var sex="男";

console.log("我的名字叫"+name+" ,"+"年龄"+age+"岁"+",性别"+sex);

任何类型的数据和字符串拼接，最终的结果都是字符串

字符串的长度判断 length

cosole.log(a.length);

02、数字（Number) 不需要加单双引号

数字分为整数型和浮点型

数字型进制，二进制 八进制 0开头·

十进制 十六进制 0x 开头

数字在js中最大值是1.7976E^308 最小值 5E^-32

数字的三个特殊值

1.Infinity 代表无穷大

2.INfinitesimal，代表无穷小

3.NaN (Not a Number),代表一个非数值 NaN != NaN,它不等于它本身，所以不好做判断

例如：

var a ;

Number( a ) == NaN //false

if( Number( a ) == NaN ){

console.log("请输入数字")

} //即使变量a不是数字，转换为NaN, NaN != NaN,进不去if

改为 if( isNaN( a ) ){

console.log("请输入数字")

} //如果变量a不是数字，isNaN( a ) 返回true 可以进去if

1. isNaN() 用来判断一个变量是否为非数值的类型，返回true或者false；

03 布尔值 （Boolean)

只有true和false

04 未定义 （Undefined)

声明了变量，但是没有赋值

05 空（Null）

判断字符串的类型

第一种写法

var tex="fff";

console.log(typeof tex);

第二种写法

var tex="fff";

console.log(typeof(tex) );

其他数据类型转化为字符串类型

强制转换

1.String(其他数据类型)

var num=10;

console.log(typeof String(num) );

2.其他数据类型.toString

var num=10;

console.log(typeof num.toString() );

3.数字类型转化为二进制，八进制 ，十六进制

toString(2~32)

转化后的进制变为字符串类型

var num=10;

二进制

console.log(typeof num.toString(2) );

八进制

console.log(typeof num.toString(8) );

十六进制

console.log(typeof num.toString(16) );

隐式转化

数字加一个空格

console.log( num+"" )

任何数据类型与字符串相加都会变成字符串

其他数据类型转化为数字类型

注意：转换字符，数字，布尔类型，首字母必须大写！！！

1.Number(其他数据类型) 强制转换

如果字符串是纯数字（不包含任何非数字字符），可以转化

如果不是，则转化为NaN(非数字),NaN属于Number类型

var str="1234";

var tex="fff1233"

转化为数字

console.log( Number(str) );

console.log( typeof Number(str) );

转化为NaN(属于Number类型的一种)

console.log( Number(tex) );

console.log( typeof Number(tex) );

常见转换

var  tex="12jjj";
​
console.log(Number(tex));       //  NaN
​
console.log(Number(true));       //  1
​
console.log(Number(false));    //0
​
console.log(Number(Undefined));    //NaN
​
console.log(Number(null));    //0
​
console.log(Number("") );    //0
​
console.log(Number("  ") );    //0

2.parseInt(变量，进制数) 把字符转换为数字型，得到整数

如果字符串是纯数字或者是数字开头的，可以转换把字符中的字符串中的数字转换成数字，如果不是转换为NaN

2.1、转换顺序是从左往右转的，

如果第一个字符不是数字，就会直接转换成NaN,

如果第一个是数字，就按顺序继续转换，直到碰到非数字，就停止转换，输出前面转换的结果

2.2、第二个参数是进制的数字，正常范围是2-36，为什么是36，它是由26个字母加0-9的10个数字组成。默认为0

2.2.1、特殊情况：

0：如果前面的数字是由0x开头的转换为16进制，由0开头转换为8进制，正常数字转为10进制，非数字转为NaN

1：如果为1，则不管前面是不是数字都转换为NaN

var  str="12.45";
​
var  tex="12jjj";
​
var  re="dd12jjj";
​
console.log(parseInt(str));       //  12
​
console.log(parseInt(tex));       //  12
​
console.log(parseInt(re));       //  NaN
​
console.log(parseInt(true));       //  NaN
​
console.logparseInt(false));    //NaN
​
console.log(parseInt(Undefined));    //NaN
​
console.log(parseInt(null) );    //NaN
​
console.log(parseInt("") );    //NaN
​
console.log(parseInt("  ") );    //NaN

3.parseFloat(变量) 把字符型转换为浮点数，保留小数

如果字符串是纯数字或者是数字开头的，可以转换把字符中的字符串中的数字转换成数字，如果不是转换为NaN

   var  str="12.45";
​
var  tex="12.45jjj";
​
var  re="dd12jjj";
​
console.log(parseFloat(str));       //  12.45
​
console.log(parseFloat(tex));       //  12.45
​
console.log(parseFloat(re));       //  NaN
​
console.log(parseFloat(true));       //  NaN
​
console.log(parseFloat(false));    //NaN
​
console.log(parseFloat(Undefined));    //NaN
​
console.log(parseFloat(null) );    //NaN
​
console.log(parseFloat("") );    //NaN
​
console.log(parseFloat("  ") );    //NaN
​
​

4.利用算术运算 +（2特别注意） 任何类型数据跟字符相加，都是拼接成字符串

console.log("12"+12) //1212

- * / 隐式转换 调用Number() 强制转换

console.log("14"-12)     //  2
​
console.log("12"*2)     // 24
​
console.log("12"/2)     //6
​
console.log(true-12)     // -11
​
console.log(false-12)     //  -12
​
console.log(""*12)     //  0
​
console.log("   "*12)     //  0  
​
console.log(null*12)     // 0
​
console.log(Undefined-12)     // NaN

其他数据类型转化为布尔类型

口诀： 非0 非空(字符串) 非Undefined 非null,都是true

boolean(其他类型)   
​
var  str="12.45";
​
var  num=0;
​
var  tt="发GV"
​
console.log(Boolean(str));       //  true
​
console.log(Boolean(tt));       //  true
​
console.log(Boolean(num));       //  false
​
console.log(Boolean(45));    //true
​
console.log(Boolean(Undefined));    //false
​
console.log(Boolean(null) );    //false
​
console.log(Boolean("") );    //false
​
console.log(Boolean("  ") );    //true

运算符

算术运算符 + - * / %

console.log(1+1)    //1
​
document.write("1" + 1)   //11
​
alert("1"  -  1)    //0
​
console.log(1*2)    //2
​
document.write(6 /  2)   //3

取余数

alert(7 % 2) //1

js设计缺陷

面试题： js中 0.1+0.2===0.3 吗 答案：不等于

解释：js对浮点数的计算有时候会出现溢出的情况

console.log(0.1+0.2) ; //0.30000000004

不能拿着浮点数进行比较

表达式与返回值

var num=1+1;

表达式是指由数字、运算符、变量等组成的式子，称为表达式 1+1

右边的表达式计算完毕会把结果返回给左边，叫做返回值

一元运算符 ++ --

​
a++      相当于   a=a+1
​
a--       相当于    a=a-1

前置的递增运算符 ++a --a 先运算后赋值

var a=10;

var b= ++a;

console.log(a) // 11

console.log(b) // 11

后置的递增运算符 a++ a-- 先赋值后运算

var a=10;

var b= a++;

console.log(a) // 11

console.log(b) // 10

 var a=10;
​
•    var c=++a;
​
•    console.log(c);      //11
​
•    console.log(a);    //11
​
•    var b=a++;
​
•    console.log(b);     //11
​
•    console.log(a);     //12
​
•    console.log(b +1 +c);     //23

比较运算符 > >= < <= == === != !==

console.log(1>3)       //false
​
console.log(1>=3)       //false
​
console.log(1<3)       //true
​
console.log(1<=3)       //true
​
console.log(1==3)       //false
​
console.log("3"==3)       //true
​
console.log("3"===3)       //false
​
console.log(1  !=  3)       //true
​
console.log("3" !== 3)       //true
​
console.log("3" != 3)       //false

双等和三等的区别：双等只判断他们的值是否相等（把字符串的数据类型转换成数字类型去比较），三等需要判断值和数据类型是否相等。

特殊情况 null和undefined是转换成布尔值进行比较

console.log( null == undefined ) //true

console.log(null === undefined ) //false

console.log( null != undefined ) //false

console.log(null !== undefined ) //true

逻辑运算符 && 与 || 或 ！非

优先级： () > ! >&& > ||

所以比较时先看 括号内 在看 ！ 再看 && 最后看 ||

console.log(9<9 && 7<8 || 0 && 3>2 || 0 && 3>4 || 5>2) //true

false false false true

&& and 两边的表达式都为真，即为真，如果一个假，即为假

|| or 两边的表达式都为假，即为假，如果一个真，即为真

！ 取反

console.log( !true ); //false

逻辑运算符的短路现象

&& 会出现短路现象 ，为假时，最终输出的值会获取第一个false的值。为真时，最终输出的值会获取最后一个为true的值。

为假时

console.log(0 && 1+2 && 10*2); //0

console.log(10 && 1+2 && 10*2 &&0 && 2); //0

为真时

console.log(1 && 1+2 && 10*2); // 20

|| 会出现短路现象 ，为真时，最终输出的值会获取第一个true的值。为假时，最终输出的值会获取最后一个为false的值

为真时

console.log(0 || 1+2 ||10*2); // 3

console.log(10 || 1+2 || 1>5 || 0 || 2); // 10

为假时

console.log(1>3 || 1<0 || 0 ); // 0

console.log(1>3 || 1<0 || 0 ||1+2 ); // 0

赋值运算符 （二元运算符）= += -= *= /= %=

var a+=5 ; //相当于a=a+5

var a-=5 ; //相当于a=a-5

var a * =5 ; //相当于a=a * 5

var a/=5 ; //相当于a=a / 5

var a%=5 ; //相当于a=a % 5

算术 比较 逻辑 递增/递减 赋值 运算符的优先级

分组 ( ) > 后置递增/递减 >逻辑非 （！） > 一元加法（+）/减法（-） > 前置递增/递减 > 乘、除、余 > 加、减 > 逻辑运算符 > 赋值运算符

分支语句 if else

if语法 条件表达式为true,执行语句块1，false执行语句块2

条件表达式中不要出现=，=为赋值，==或者===，才是比较

if(条件表达式){

语句块1；

}else{

语句块1；

}

例题

判断输入是字符串还是数字

if( isNaN(num) ){

alert("输入错误，请输入正确年份")

}else{

if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {

alert(year+"是"+"闰年");

} else {

alert(year+"是"+"平年");

}

}

判断用户输入的数字是不是年龄还是年份

1.用字符长度判断 年龄字符长度在1-3，年份字符长度为4

2.年龄在200以内 年份在1000以上

3.&& 与 输入的数字>=18 && (2022-输入的数字)>=18

多分支判断语句

if( ){

}else if( ){

}else if( ){

}else{

}

1.多选一，只能执行一个

2.else if（）{} 可以写多个

3.else if 用空格隔开

<script>
        var mon = prompt("请输入星期数:1,2,3,4,5,6,7");
        if (isNaN(mon)) {
            alert("请输入数字1--7");
        } else {
            if (mon == 1) {
                alert("今天星期"+mon+",监督邹志进跳舞");
            } else if (mon == 2) {
                alert("今天星期"+mon+",监督邹志进唱歌");
            } else if (mon == 3) {
                alert("今天星期"+mon+",监督邹志进喊方艳文爸爸");
            } else if (mon == 4) {
                alert("今天星期"+mon+",打邹志进");
            } else if (mon == 5) {
                alert("今天星期"+mon+",打邹志进");
            } else if (mon == 6) {
                alert("今天星期"+mon+",打邹志进");
            } else if (mon == 7) {
                alert("今天星期"+mon+",打邹志进");
            } else {
                alert("没有此星期数，请输入数字1--7");
            }
        }
            </script>

三元运算符 （表达式） time<10?'0'+time:time;

1.一元运算符 ++ --

2.二元运算符 += -= *= /= %=

3.三元运算符

var   num=10;
​
var   re=  num>5?"是的“:"不是的";
​
alert(re);        //是的
​
​
​
var  time = prompt("请输入0—9之间的数字")；
​
var times=time<10?'0'+time:time;
​
alert(times);        //输入1，输出01

Switch分支语句

Switch（表达式  ||  固定值）{
​
•       case   value  :
​
•                 执行语句1；
​
•                  break;
​
•      case   value  :
​
•                 执行语句2；
​
•                  break;
​
•       case   value  :
​
•                 执行语句3；
​
•                  break;
​
•        default:
​
•                 最终语句；
​
•                  break;
​
}

注意事项：

1.case 里面匹配的value值的时候，是做的完全相等的匹配（值和类型都要相等）

2.case 里面匹配的value值是单个类型，不能使用逻辑运算

if else 和 switch case的区别？

1、if支持逻辑运算和固定值，switch只支持固定值，所以当只有固定值时就用switch

2.switch能实现的if都能实现，if能实现的，switch不一定能全部实现。

for 循环

for 语法

for（初始变量;条件表达式;操作表达式）{

循环语句（执行语句）;

}

1.初始变量，就是用var声明一个普通的变量，通常用作计数器使用

先执行计数器变量

2.条件表达式，就是用来决定每一次循环是否继续，就是终止条件（注意不要出现死循环）

再进行条件判断，为true时进入循环体，为false时跳出，

3.操作表达式 是每次循环最后的执行的代码，通常用于我们计数器变量进行递增或者递减的操作

最后执行操作表达式，进行变量的递增或递减，第一轮循环结束，再来一轮，直到条件表达式不成立，跳出循环。

i为一个三位数，取个位数parseInt(i%10) 取十位parseInt( i%100/10) 取百位parseInt(i/100)

注意：直接计算的除法得到的值为真实值，值为小数时需要用parseInt() 转换为整数型。 3/2=1.5 parseInt(3/2)=1；转换不遵循四舍五入，直接取整。

for循环特殊情况

1.for循环也可以把变量放在外面，操作表达式写在循环体内，但是格式不变，分号也要打出来

var i=0

for( ; i<0 ; ){

i++;

}

2.for循环上面打印得到的是undefined, for循环下面打印得到的是不满足条件表达式的最后的值 。

console.log(i); //undefined

for(var i=0 ; i<10;i++){

}

console.log(i); //10

双重for循环

for(var i=0 ; i<10;i++){

for(var j=0 ; j<10;j++){

}

}

1.外层for循环一次，里面for循环执行一遍

2.两个for循环声明的变量不能相同

while循环

声明变量
​
while(条件表达式){
​
•     循环体
​
•      递增/递减
​
}
​
​
​
var i=1;
​
var sum=0;
​
while (i<=100){
​
sum +=i;
​
i++;
​
}

while循环与for循环的区别

1.while循环把初始变量声明在外面，操作表达式写在循环体内，容易造成死循环

2.for循环也可以把变量放在外面，操作表达式写在循环体内，但是格式不变，分号也要打出来

var i=0

for( ; i<0 ; ){

i++;

}

3.for循环上面打印得到的是undefined, for循环下面打印得到的是不满足条件表达式的最后的值 。

console.log(i); //undefined

for(var i=0 ; i<10;i++){

}

console.log(i); //10

do while循环

do{

console.log("不管条件成不成立，都会执行一次）;

}while(表达式);

do while循环与while循环的区别

1、do while 先执行一次，再判断条件，如果条件表达式结果为真则继续执行循环体，否则退出循环。 while 是先判断条件表达式是否为真，后执行。

循环的关键字

break 终止

执行到break时，跳出循环，不执行循环操作

continue 继续

执行到continue时，跳出本次循环，继续执行下一次循环

获取表单的值 input.value

获取表单的值

input.value

表单事件：oninput

表单输入的时候实时触发，获取表单的值

<body>
​
  <input type="text" class="inp">
  <script>
    var inp=document.getElementsByClassName("inp")
​
  //  表单事件：实时获取值
​
  inp[0].οninput=function (){
​
•    console.log(inp[0].value)
​
  }
​
  </script>
</body>
​

表单改变事件：onchange

表单输入完成时失去焦点后触发，获取表单的值

<body>
​
  <input type="text" class="inp">
  <script>
   var inp=document.getElementsByClassName("inp")
​
  // 表单改变事件  失去焦点获取值
​
  inp[0].onchange =function (){
​
•    console.log(inp[0].value)
​
  }
​
  </script>
​
</body>

2，复杂数据类型

06.Object 它是泛指js中的一切对象

1.数组 Array

数组：就是一组数据的集合，存储在单个变量中

var arr = [1,2,3,"s","aesdfs",true] ;

创建数组的几种方式

1.利用new 创建数组

注意：使用new Array() 创建数组时，如果只有一个数字，则表示创建了一个这个数字长度的空数组

var arr= new Array() ; 创建了一个空数组 [ ]

2.利用数组的字面量创建数组

var arr = [ ]; 创建了一个空数组 [ ]

数组的使用方法

1.数组里面的数据一定要用逗号分隔，比如下面的数组里的1，2，3，我们称为数组元素

2.获取数组元素 格式 数组名[索引号] 索引号都是从0开始的

3.如果数组中没有这个元素，输出的结果为undefined

var arr2 = [1,2,3] ;

console.log( arr[0] ) // 1

console.log( arr[5] ) // undefined

遍历数组

1.因为数组的索引是从0开始

 var arr=[1,3,2,4,"d","fd"];

//arr.length动态监测数组元素的个数，不要跟索引号混淆
 for(var i=0;i<arr.length;i++){

​      //输出的时候，使用 数组名[ 索引号] 获取遍历的元素
 console.log(arr[i]);

}

分隔数字与字符

  var arr=[1,3,2,4,"d","fd",5,8];
    var str=[];
    var num=[];
    for(var i=0;i<arr.length;i++){
​
•      if(typeof(arr[i]) === "number"){
•        num[i]=arr[i];
•      }else if(typeof(arr[i]) === "string"){
•        str[i]=arr[i];
•      }else{
•        console.log("不属于数字和字符");
•      }
•    }
•    console.log("数字:"+num);
•    console.log("字符:"+str); 
​
​

求最大值

  var arr=[23,34,88,111,55,32];
    var max =arr[0];
    for(var i=1;i<arr.length;i++){
      if (arr[i]>max){
        max=arr[i];
      }else{
        continue;
      }
    }
​
console.log( "最大值："+max);

求最小值

 var arr=[23,34,88,111,55,2,32];
 var min =arr[0];
 for(var i=1;i<arr.length;i++){
 if (arr[i]<min){
 min=arr[i];
      }else{
 continue;
      }
    }
 console.log( "最小值："+min );
​
​

数组的属性 length

数组的方法 push 追加元素

数组追加元素方式

1.通过数