JS基础一

JavaScript基础

计算机语言分为:机器语言,汇编语言,高级语言.

JavaScript是一门基于浏览器的编程语言.基于对象和时间驱动,运行在浏览器 客户端的脚本语言.

组成:ECMAScript.BOM,DOM

书写位置:内嵌式,外联式,行内式

内嵌式:在html页面中嵌入script标签

 ☞  在html页面内部设置
    
​
  注意：
      该标签可以放到head标签中或者body标签中，可以有多个

外联式:用script标签的src属性引入外部的JS文件

1. 新建js文件
    2. 通过script标签引用到当前页面中
    
注意:1.不能把代码写在外联式的标签中
2.一个页面可以引入多个js文件

行内式:在标签上写入JS代码

☞  将js代码写到标签内部

​
注意：onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码

JavaScript中输入消息方式:

alert();//弹出框
​
document.write('
我是一段文字
');  // 在网页中输出信息
​
// 输入框,如果想想吧用户输入的信息保存起来我们需要用变量;
prompt("请输入姓名:");   //接收用户输入的【输入框】
​
confirm("确定不听课么");//确认框,只有确定和取消
​
console.log("adsadsfafds");  //在控制台中输出消息
​
总结：
     1. 在js中如果希望输出一个具体的文本信息，必须带引号
     2. 在使用document.write();的时候，可以在方法内输出html标签，加引号。

变量

变量指的是在程序中保存数据的一个容器

用来保存数据:变量

语法:var 变量名=值;

定义变量以及赋值:

 ☞ 定义变量（多种）
     var 变量名；
     var 变量名 = 值;
     var a,b,c,d;
     var a,b=2,c,d=4;
​
 ☞ 赋值
      变量名 = 值;
    var 变量名 = 数据;
 ☞ 总结：
       1. 一个变量一次只能保存一个值
       2. 最后一次的赋值结果
       3. 变量是区分大小写（js区分大小写）

变量的命名规则:

☞ 规则 :
    1. 包含字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
    2. 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
    3. 不能 以数字开头，或者汉字定义变量名
    4. 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&, class
    5. 不能出现空格
        
☞ 规范  建议遵守的，不遵守的话 JS引擎 也不会报错
    1. 变量名必须有意义
    2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

数据类型:

typeof 变量;可以查看变量的数据类型.

简单的数据类型分为:number,string,boolean,null,undefined

string(字符型):

1.字母，符号，汉字作为数据内容的时候都是字符型.
2.遇到字符类型一定要加引号,单引号或双引号.
//不管是什么数据如果用引号包含就变成字符串类型
3.在js中一般写字符串类型的变量时候，推荐使用单引号。
 var num = '你好,Amy';
//此时 console.log(typeof num);在控制台即可查看变量num的数据类型是string  
 特别注意：字符串和其他内容不准直接挨着写
 document.write('你和Amy说的是:'+num+'
')
​
注意：
 1. 单引号和双引号之间的嵌套//引用规则是:外单内双,外双内单.
 例如： 输出    我是"高帅富"程序猿;  
 var num = '高富帅';
 document.write('我是"'+num+'"程序猿')
 2. 转义字符【\】
   \n        换行
   \\       斜杠
   \'       单引号
   \"       双引号
   \r       回车符
   \t       缩进(tab)
   \b       空格
   例:  document.write('I\'m the GOD of my world ~!
');
        console.log('好好学习\n\r天天向上')
        document.write('好好学习
天天向上');
        document.write('这个是\\,神奇!')
​
字符：string
    1.汉字，字母，符号作为数据内容的时候，都是字符类型，遇到字符类型一定千万要记住加引号
    2.不管是什么数据内容，一旦让引号套起来的时候，就变成了字符串类型
    3.字符串不能和其他内容直接挨着写
    
    注意：引号内部不换出现相同的引号，如果出现的话，需要用\转义一下才可以

number(数字型):

1.凡是数字都属于该类型【整数，小数，负数】
2.只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型
​
number类型表示的数字大小：
      最大值是±1.7976931348623157乘以10的308次方    Number.MAX_VALUE
      最小值是±5 乘以10的-324次方                  Number.MIN_VALUE
​
知识点：
    十进制：默认
    
    八进制：前面加0，八进制写法
    
    十六进制：前面0x，十六进制写法
​
注意：计算机在计算的时候，数值最终都会转换成十进制计算
​

Boolean/bool(布尔类型)

true（真）  和 false （假）
描述两种状态

判断变量是不是一个数字

NaN：not a number【特殊值】isNaN：is not a number【判断】

用来判断一个值是否是数字，如果是数字得到的false，如果不是数字得到的是true

isNaN来判断非数字并返回值
isNaN(x) 方法
    ==>x是数字{false}
    ==>x不是数字{true}
isNaN(x)
        let a = 12
        let b = '文字'
        let c = '12'
        console.log(isNaN(a));====>false
        console.log(isNaN(b));====>true
        console.log(isNaN(c));====>false

数据类型转换

转换成数字型:

1.Number(变量) 2.parseInt(变量) 3.parseFloat(变量) 4.隐式转换

(一)Number(变量)：
1. 可以通过该方法将数据类型转换为数值类型
2. 在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去
3. 如果变量无法转换为数值类型，那么返回的结果是NaN; 对应的数据类型依然是数值类
4. 如果将布尔类型转换为数值类型，true 转化后的结果是 1 ; false 转化后的结果是0
   NaN：not a number【number类型】
(二)parseInt(变量)取整//没有四舍五入
 var num1 = parseInt("12.3abc");   // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
 var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
1  只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数
2. 如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值
3. NaN (not  a  number)   ----NaN对应的数据类型是数值类型
4. 通过该方法可以将其他数据类型转为数值类型
(三)parseFloat(变量)取浮点//没有四舍五入
 var num1 = parseInt("12.3abc");   // 返回12.3
 var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
1. 通过该方法可以将其他数据类型转换为数值类型
2. 在转换过程中，如果遇到小数，那么会直接将小数部分保留
3. 如果转化不成功过，返回的结果NaN
(四)隐式转换
在使用-/*时可以做隐式转换.其中加号不可以,原因是+是指字符串拼接或者赋值使用

转字符串类型【n.toString，String(n)】

(一)变量.toString()
        var num = 5;
        console.log(num.toString());
(二)String(变量)
n.toString();
备注：
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

转布尔类型Booleab(n)

Boolean(n) 
 备注：
     0  |''(空字符串) | null | undefined | NaN |false 会转换成false  其它都会转换成 true
其中使用"!取反"也可转换成false 23是true !23就会返回false 

算数运算符

+ 运算
1. 如果是数值类型的变量相加，结果就是一个数值类型的结果
2. 如果是一个字符串类型的变量相加，最后的结果就是字符串（加号起到的作用就是拼接字符串的功能）
如果+两边都是数字就是数学上的加，如果两边有字符串出现就会执行字符串的连接
 
-运算
1. 如果是数值类型的变量相减，结果就是一个数值类型的结果
2. 如果是数字的字符串相减，得到的结果也是一个数值类型结果（发生了隐式类型转化）
            var n1 = '123';
            var n2 = '123';
3. 如果是非数字的字符串相减，得到的结果是NaN
        
 *运算
乘法
    
 /运算
1.如果是数值类型的变量相除，结果就是一个数值类型的结果
2. 如果是数字的字符串相除，得到的结果也是一个数值类型结果（发生了隐式类型转化）
3. 如果是非数字的字符串相除，得到的结果是NaN
4. 如果除数是0 ，得到的结果是 Infinity （无穷大的值）
       
 %取余（获取余数）【求两个数相除的余数】  

赋值运算符:

复合赋值运算符
=把=右边的值赋值给左边
复合赋值运算符
+= |  -=   |  *=  |  /=  |   %= 
+=:a+=2 =====>a=a+2//先加后等,先进行加法运算然后再将结果赋值给变量a
-=:a-=2 =====>a=a-2//先减后等,先进行减法运算然后再将结果赋值给变量a
*=:a+=2 =====>a=a*2//先乘后等,先进行乘法运算然后再将结果赋值给变量a
/=:a/=2 =====>a=a/2//先除后等,先进行除法运算然后再将结果赋值给变量a
%=:a+=2 =====>a=a%2//先取余后等,先进行取余运算然后再将结果赋值给变量a
​

一元运算符

++|--(前置和后置两种,前置先运算后赋值,后置先赋值再运算)
n++ //先赋值再自加1
++n //先自加1再赋值
n-- //先赋值再自减1
--n //先自减1再赋值
注意:
// 如果a++或者++a单独运算的话，都代表a自增1
// 但是：如果有其他操作（运算符）参与运算的时候，那么a++和++a，就有不同的含义
var b = a++;==>先把a赋值给b，a再自增(自加)
var b = ++a;==>先把a自增1，再赋值给b

比较运算符

1.   >      大于
    
2.   <      小于
    
3.   >=     大于 或者 等于，只要有一个满足即可
    
4.   <=     小于 或者 等于，只要满足一个即可
​
5.  ==      //只用来比较变量中的值是否相等，不考虑数据类型
    
6.  ===     //用来判断值和数据类型必须同时相等
    
7.  !=      //判断值是否不相等，不考虑数据类型
 
8.  !==     // 判断值和数据类型
//✔ 通过比较运算符得到的结果只有两个结果，一个是正确的，一个是错误的
//✔ 通过比较运算符得到的结果 只有 true[正确] 和 false[错误]

逻辑运算符

(一)|| 或： 条件只要有一个满足即可
1. 如果条件中有一个结为true(代表有一个条件满足了)，那么通过或运算后最后的结果为true
2. 如果条件中结果都不满足，那么通过或运算后结果为false
3.如果有一个为true，结果为true，只有两个都为false，结果为false
(二)&& 与（且）： 要求所有的条件都必须满足才可以
 1. 如果条件都为真（true），那么通过且运算后最后的结果也是真（true）
 2. 如果条件中自少有一个条件不满足（false），那么通过且运算后的结果为false
 两个条件都为true，结果true，有一个为false，结果为false    
(三) !非（取反） 

运算符优先级:

1. () 优先级最高

2. 一元运算符 ++ -- !

3. 算数运算符 先* / % 后 + -

4. 关系运算符 > >= < <=

5. 相等运算符 == != === !==

6. 逻辑运算符 先&& 后||

7. 赋值运算符：=

补充:

报错打印出的是undefined时是因为只声明了未赋值

报错打印出的是is not defined时是因为没有声明

null代表空值,代表空对象指针,转数值是为0;undefined代表无初始值,转数值时为NaN

流程控制

顺序结构 , 分支结构 , 循环结构

分支结构:

1.单分支结构
if(条件表达式【布尔类型的结果】){
    //执行语句
}
2.双分支结构
if(条件表达式【布尔类型的结果】){
    //执行语句
}else{
    //执行语句
}
3.多分支结构
if(条件表达式【布尔类型的结果】){
    //执行语句
}else 
    if(条件表达式【布尔类型的结果】){
    //执行语句
}...
else{
    //执行语句
}
执行过程:
✔ 先进行表达式结果判断 
✔ 如果结果是true, 程序只会执行if中的语句，不会执行else中的语句
✔ 如果结果是false， 程序只会执行else中的语句，不会执行if中的语句

三元表达式

   表达式 ?  结果1 ：  结果2 // ？ 相当与条件判断中的if; :相当于else
   执行过程:
   ✔ 先判断表达式的结果是 true还是false
   ✔ 如果结果是true/真 ,那么代码执行 结果1
   ✔ 如果结果是false，那么代码执行 结果2

循环结构

switch 语句

switch ( 变量 ) {
    case  值1:
        代码语句..
        break;
    case  值2:
        代码语句...
        break;
    .......
    default:   
        代码语句...
        break;
}
执行过程:
 1. 如果在程序中要表示一个范围，那么推荐使用条件判断
 2. 如果程序中表示的是一个具体的值， 可以用switch语句
 注意：
    switch判断等不等用的是全等判断的
    //1. switch 后面的变量数据类型必须和 case 后面的值数据类型保持一至
    //如果case值用的是比较运算符,输出的就是布尔值,所以变量类型需要和case的类型保持一直
    //2. break语句必须加

while 循环

while(条件表达式) {
    //代码（循环体）
}
执行过程:
循环变量初始化==>条件判断（true）==>循环体(i++)==>条件判断（true）==>循环体(i++)==>条件判断（false）==>跳出循环
 1.  先条件判断结构是 true 还是 false
 2.  如果是true，那么程序会一直执行循环体中的代码
 3.  如果条件为false，那么程序会立即跳出循环体代码结束执行

do ... while 循环

do {
    //循环体代码
}while(条件表达式)
执行过程:
循环体==>条件判断（true）==>循环体==>条件判断(true)==>循环体==>条件判断(false)==>跳出循环
1. 先执行循环体代码
2.然后判断条件
3.如果条件为true，继续执行循环体代码
4. 如果条件为false,循环体代码立即结束，跳出循环

do...while 和 while的区别:

     1. 如果条件不满足，do while循环会比while循环多执行一次
     2. 如果条件满足，do while循环和while循环执行的次数是一样一样的。

for循环

for(初始化变量;条件判断; 变量自增（变量自减）){
    //循环体代码
}
执行过程:
1. 先执行变量初始化
2. 条件判断，结构是否为true
3. 如果条件为true，进入循环体中执行代码 【如果条件为false，循环立即结束】
4. 变量自增或自减  --   条件判断   --  true  --- 执行代码

双重for循环

for(初始化变量;条件判断; 变量自增（变量自减）){
    for(初始化变量;条件判断; 变量自增（变量自减）){
    //循环体代码
}}
执行过程:
1. 先执行变量初始化
2. 条件判断，结构是否为true
3. 如果条件为true，进入第二个for循环 【如果条件为false，循环立即结束】
4. 第二个for循环先执行变量初始化
5. 第二个for循环条件判断，结构是否为true
6.如果条件为true，进入循环体【如果条件为false，循环立即结束】
7.变量自增或自减  --   条件判断   --  true  --- 执行代码,如果条件为false
8.第一个for循环进行变量自增或自减  --   条件判断
9.为true就继续到第5-7步.....

循环中的continue和break

1.当程序遇到continue的时候，会结束本次循环，后面的代码也不会执行。进入到下一次循环中。
2.当程序遇到break语句的时候，程序会立即终止，后面的代码不执行